Компания
41,45
рейтинг
17 июля 2013 в 15:55

Дизайн → Хороший пользовательский интерфейс перевод


Вольный перевод статьи Якуба Линовски — «A Good User Interface».

Хороший пользовательский интерфейс обладает высокими показателями конверсии и прост в использовании. Другими словами, он хорош как для бизнеса, а так и для людей, которые им пользуются. Ниже вашему вниманию предлагается ряд практических идей, которые вы можете попробовать применить.



Идея 1: Старайтесь использовать макет с одной колонкой вместо многоколоночного


Макет с одной колонкой позволяет лучше контролировать повествование. Он сможет направить ваших пользователей наиболее предсказуемым путем — сверху вниз. Многоколоночный подход допускает риск того, что пользователь может отвлечься от основной цели страницы. Направляйте людей с помощью рассказа с обязательным призывом к действию в конце.


Идея 2: Старайтесь сделать подарок, не завершайте продажу сразу


Дружественный жест, такой как сделать подарок покупателю, именно то, что нужно. Если смотреть глубже, то подарки — это еще и эффективная тактика убеждения, основанная на принципе взаимности. Как бы очевидно это не звучало, но небольшие знаки признательности окупятся сторицей.


Идея 3: Старайтесь объединять схожие функции и не дробить интерфейс


В ходе работы можно непреднамеренно создать несколько разделов и элементов, которые выполняют одну и ту же функцию. Это обычная энтропия, когда система становится беспорядочной с течением времени. Не используйте разные названия для одинаковых функций, чтобы не увеличивать информационную нагрузку на ваших клиентов. Чем больше фрагментирован пользовательский интерфейс, тем более крутой становится кривая обучения и тем сложнее клиенту вникнуть в суть того, что от него требуется. Проведите рефакторинг пользовательского интерфейса и объедините сходные функции вместе.


Идея 4: Старайтесь использовать социальное доказательство вместо того, чтобы рассказывать о себе самом


Социальное доказательство является еще одной тактикой убеждения, которая позволяет увеличить конверсию.
Рекомендации о вас и вашем предложении могут побудить пользователя к действию, Убедитесь, что данные рекомендации или мнения присутствуют.


Идея 5: Старайтесь повторить главный призыв к действию, вместо того, чтобы показывать его один раз


Повторение призыва к действию больше применимо к более длинным страницам или же используется повторение через несколько страниц. Конечно, вы не хотите, чтобы предложение показывалось 10 раз на одной странице и раздражало людей. Длинные страницы стали нормой и попытка уместить все в первый экран уже не является хорошей идеей. Нет ничего страшного в том, чтобы сделать один призыв вверху страницы, ненавязчиво напомнить в середине и закрепить в конце. Когда люди достигают конца страницы, они останавливаются подумать, что сделать дальше, и тут самое время сделать предложение или завершить сделку.


Идея 6: Старайтесь усиливать различия в стиле между кликабельными и выбранными элементами, а не размывать их


Выразительные средства, такие как цвет, глубина и контрастность, могут быть использованы в качестве надежных маркеров, отражающих фундаментальный язык навигации по интерфейсу: где я, и куда я могу перейти. Чтобы четко донести эту идею до пользователей, нужно использовать различное визуальное оформление для элементов разного назначения (ссылок, кнопок, выбранных элементов и контента), эти различия должны быть явно выражены, и следует использовать их одинаковым образом во всем интерфейсе.
На картинке приведен пример, где синий цвет выбран, чтобы отметить все, что может нажиматься, а черный для всего, что было выбрано или указывает на то, где мы. При правильном применении, людям будет гораздо легче ориентироваться среди таких подсказок. Не усложняйте жизнь пользователям — не нарушайте смысловое кодирование.


Идея 7: Попробуйте рекомендации вместо показа равнозначных вариантов


В случаях, когда показывается несколько предложений, выделенная рекомендация продукта может быть хорошей идеей, потому что некоторых людей нужно немного подтолкнуть. Есть некоторые психологические исследования, которые предполагают, что чем шире выбор, тем меньше шансов, что решение вообще будет принято и реализовано. Чтобы не допустить такой аналитический паралич, старайтесь подчеркивать и выделять одни варианты на фоне других.


Идея 8: Попробуйте отмену действия вместо запросов на подтверждения


Представьте, что вы только что нажали на действующую кнопку или ссылку. Отмена действия уважает изначальное пользовательское намерение, позволяя действию произойти сразу, с возможностью отмены. Запросы на разрешения действия, напротив, внушают пользователю, что он или она не знают, что они делают, подвергая сомнению их намерения. Действия человека чаще всего отражают его действительные намерения, и только в редких ситуациях они случайны. Неэффективность и убожество подсказок особенно очевидны, когда пользователи должны выполнять действия повторно, и подсказки будут появляться много раз, снова и снова: это плохой опыт. Попробуйте дать вашим пользователям больше возможностей контроля: отменить действие и не спрашивать подтверждения там, где это возможно.


Идея 9: Объясните, для кого предназначен продукт. Не пытайтесь адресовать сообщение всем подряд


Вы четко выделяете свою аудиторию, или обращаетесь ко всем сразу? Эта идея повышения конверсии заключается в том, чтобы ясно объяснить, для кого именно предназначен ваш продукт или сервис. Когда вы обращаетесь к аудитории, выделите определенные признаки ваших покупателей. Это выведет общение с ними на новый уровень и придаст некий оттенок эксклюзива и элитарности. Возможный риск такой стратегии заключается в том, что при объявлении каких-либо ограничений вы можете отсечь часть потенциальной аудитории. В этом случае выручит прозрачность предложения: честность вызывает доверие.


Идея 10: Говорите прямо вместо предположений


Вы можете обратиться к людям с неуверенной дрожью в голосе или можете сказать то же самое уверенно. Если вы заканчиваете каждое предложение вопросительными знаками, используете слова вроде «возможно», «было бы здорово», «вам интересно?» или «не хотите попробовать?», тогда у вас есть все возможности добавить вашему сообщению убеждение. Кто знает, быть может, иногда стоит подсказать людям следующий шаг на пути оптимизации конверсии?


Идея 11: Больше контраста вместо однородности


Чем более явно и резко выделяются призывы к действию среди остальных элементов страницы, тем лучше будет работать ваш интерфейс, тем он сильнее. Контраст основных целевых действий можно усилить с помощью множества способов. Используя насыщенность, вы можете делать некоторые элементы темнее на фоне светлых, с помощью глубины вы заставляете предметы казаться ближе на фоне остального контента, который выглядит более отдаленным (используйте тени и градиенты). Наконец, вы можете подобрать дополняющие цвета из цветового круга (например, желтый и фиолетовый) для еще большего усиления. Однако не стоит чрезмерно увлекаться: контраст между контентом и основным действием должен быть сбалансирован.


Идея 12: Покажите место происхождения продукта вместо обобщений


Информация о вас, вашем продукте или услуге позволяет выйти на более личный уровень в общении с клиентом. Хороший способ рассказать о себе – упомянуть страну, штаты или город происхождения. Если вы сможете практически применить данный совет, то отношение к вам станет более доброжелательным. Часто, упоминание о том, где был сделан продукт, является хорошим способом создать ощущение более высокого качества продукта.


Идея 13: Сокращайте количество полей, не спрашивайте слишком много


Люди по своей природе не любят трудоемкие задачи, и это в полной мере относится к заполнению полей формы. Каждое поле, которое требует ответа от пользователя, может спровоцировать его к уходу со страницы. К тому же, не все устройства позволяют быстро набирать текст, особенно трудно это делать на мобильных устройствах. Постарайтесь оставить только необходимые поля, и удалить столько полей, сколько возможно. Если необходимых полей действительно много, то заполнить их будет лучше после отправки основной формы на отдельной странице или при помощи дополнительной формы. Расширить форму несложно, но меньшее количество полей позволяют увеличить конверсию.


Идея 14: Раскройте все опции сразу


Каждое выпадающее меню, используемое вами, скрывает набор действий, на поиск которых требуется дополнительное усилие. Если эти скрытые опции являются центральными для того, чтобы пользователь совершил необходимое действие, то, возможно, стоит увеличить их приоритет на странице. Попробуйте сделать выпадающее меню для тех опций, которые очевидны и не требуют новых знаний от пользователя: в выборе даты и времени (например, календари) или географического расположения. Иногда пункты выпадающего меню могут работать в тех интерфейсах, действия которых пользователь должен совершать время от времени. Будьте осторожны, используя выпадающие списки для элементов на пути основного повествования.


Идея 15: Предлагайте последовательность вместо страниц с двойным дном


Страницы с двойным дном — убийцы конверсии. Да, все уже привыкли скроллить длинные страницы, но важно не создать у посетителей ложное ощущение того, что страница закончилась раньше, чем это произойдет на самом деле. Если страница предполагает прокрутку, задайте визуальный или смысловой ритм, который явно укажет пользователю, что дальше есть продолжение. Будьте аккуратны с большими разрывами на местах «сгиба», где может появиться граница экрана (конечно, я имею ввиду условные зоны, поскольку сложно предусмотреть все варианты для разнообразных устройств).


Идея 16: Сохраняйте фокус, не злоупотребляйте ссылками


Нет ничего сложного в том, чтобы расставить побольше ссылок в разных местах страницы в надежде удовлетворить как можно больше нужд потенциальных клиентов. Однако, когда вы создаете повествовательную страницу, предназначение которой в том, чтобы подвести пользователя к определенному целевому действию, подумайте дважды. Не забывайте, что любая ссылка перед основным целевым действием увеличивает риск ухода пользователя со страницы и отвлекает от того, что вы от него ждете. Следите за количеством ссылок и по возможности соблюдайте баланс между разводящими страницами (с немного большим количеством ссылок) с «тоннельными» страницами с меньшим количеством ссылок и большей конверсией. Чистка от ненужных ссылок наверняка увеличит шансы добраться до важной кнопки.


Дмитрий Калинников, директор департамента проектирования и дизайна ADV/web-engineering
Ильдар Киньябулатов, веб-дизайнер ADV/web-engineering
Автор: @tourte Jakub Linowski
ADV/web-engineering co.
рейтинг 41,45
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Комментарии (63)

  • НЛО прилетело и опубликовало эту надпись здесь
  • –47
    Отвратные картинки. Очень раздражают кривые линии и кнопки таких макетов(
    • +27
      Прямые линии — это уже претензия на дизайн.
      Такая стилистика же позволяет (вам — нет) сконцентрировать внимание на смысле, а не на оформлении.
      • +11
        а в чем сделаны картинки?
    • +3
      по моему все нормально. по крайней мере свою роль они исполняют.
      • +9
        Ну, судя по моей карме и количеству несогласных, действительно. Всё нормально)
        • 0
          А по-моему, дело не в качестве картинок, а в том, что оно не имеет отношения к теме топика.
          • 0
            Оно, что?
            • +1
              Качество картинок.
              • –2
                Да, тут скорее не хороший, а продающий пользовательский интерфейс.
            • 0
              удалено
    • +3
      Это скетчи прототипов. Многим людям нравится, т.к. сильно схоже с рисунками от руки. Часто софт для прототипирования имеет возможность таким образом оформлять результат :)
    • +8
      Отличные картинки. Очень нравятся кривые линии и кнопки таких макетов)
      • –5
        Ну, как говориться, каждому своё.
    • НЛО прилетело и опубликовало эту надпись здесь
  • +15
    Насчёт 4 — не согласен. Какая разница мне, кто там что сказал? Почему я должен доверять этим людям? Лучше дайте ключевые особенности.
    • +4
      мнение авторитетных людей или изданий, если оно, конечно, есть, во многих случаях значит гораздо больше, чем описание сервиса.

      например, можно сколько угодно описывать интерьер ресторана, люмены освещения и ватты света — критерием все равно будет субъективное «вкусно» и «комфортно»
      • +2
        Мнение авторитеных людей, обычно мотивировано деньгами. Плохие и даже нейтральные отзывы как правило удаляются если там конечно вообще можно добавлять отзыв. После этого ощущение что из тебя делают дурака. Как правило катит для зарубежных пользователей, советских такой штукой уже не кпишь. Критическое мышление, однака.
        • +1
          Простейший A/B тест полностью опровергнет вашу точку зрения. 95% никто не отменял. Вы молодец, технарь с критическим мышлением, для вас подберут другой «крючок». Кстати, 4 пункт не совсем корректен, лучше не взаимоисключать, а совмещать. На кого-то повлияют отзывы, а на кого-то описанные преимущества, зависит от ЦА.
          • –1
            Тесты войны 1812 и 1941 наш народ выдержал с честью, полностью опровергнув любые точки зрения кроме нашей. Соотношени 5% процентов идиотов на 95% нормальных людей оказалось что так. Это я к чему, западные лекалы они на наши плечики ну ни как не лезут, костюмчик всегда оказывается маловат да кургузенький. @Вы молодец, технарь@ Пальцем в… короче сами решайте куда, ни одного технического.
            • 0
              Это я к чему, западные лекалы они на наши плечики


              Поэтому надо свои лекалы промерять. Что-то сработает, что-то нет, надо пробовать.
    • +5
      По причине того, что большинство не имеют достаточных знаний, опыта или времени с желанием для принятия собственного мнения.
      Да и не дело в суде пишем а пытаемся смотивировать пользователя к определённым действиям. Это абсолютно такая-же психологическая уловка как и другие в статье.

      Мы проводили A/B тестирование, чтобы выяснить что эффективнее симпатичное лицо + не аргументированный текст от имени лица с рекомендацией, или красивая картинка ключевой особенности с текстом почему это круто. Результат 1 более чем в два раза эффективнее. (аудитория игроки. скорее всего для специализированных нишевых вещей разница будет другая)
      • +2
        В тему: Пьер Лемье, «Следуя за толпой»
        Выдержки статьи про информационные каскады и механизмы доверия мнению окружающих в условиях отсутствия своего мнения.
      • –1
        А игроки во что? И сколько лет им лет?
        • 0
          четверть женщин за 30.
    • 0
      Он ещё и двухколоночный, вопреки пункту 1!!!
      • 0
        Первый пункт не запрещает делать двух и более колоночные интерфейсы. Его суть в том, что делать лучше одноколоночные, когда важно, чтобы пользователь получал информацию в определенном порядке. Когда это не имеет значение, как в случае с отзывами, можно использовать и другие варианты оформления.
  • +2
    Отличная статья!

    Только от иллюстрации к 6 совету мне стало неприятно. Несколько противоречит другим советам.
  • +3
    Большая часть советов направлена на конверсию
    • +2
      конверсия — это смысл любого интерфейса. и не обязательно целью является покупка или переход по ссылке.
      • +1
        Уточню, большая часть советов общая для рынка продвижения в целом, и может подойти даже для рекламных афиш.
        Остальное ограничивается элементарными вещами.
        • 0
          Справедливости ради, рекламная афиша — тоже интерфейс.
          • +2
            Увы, интрефейс предполагает взаимодействие. Наше воздействие на непосредственно рекламную афишу достаточно бессмысленно, так что интерфейсом она не является.
            • 0
              Интерфейс не обязан быть двунаправленным, так что является.
  • –3
    Мысли очень правильные, а вот качество подачи действительно, хромает.

    Мне кажется, эффект был бы лучше если указать на реальные примеры где хорошо а где плохо.

    P.S. с четвертым пунктом тоже не согласен. Исключение только если это известные люди.
    • 0
      Увы, человек существо социальное. Ну а как действует эффект толпы объяснять думаю не надо. Вот из последнего на что натыкался, где описывается эффект от социальных призывов.
  • +11
    Респект за перевод надписей на картинках!
    • +14
      Да, перевод весьма творческий, особенно «Canada» -> «Мордовия»
      • +1
        Перечитал картинки. Нашел мордовию.
  • 0
    Я, конечно, понимаю, что это перевод, но у вас первая картинка не согласуется с последующими по подаче материала. У вас на ней слева негатив, справа позитив. На остальных картинках — наоборот. Мелочь, но если уж придираться к интерфейсам, то либо негатив/позитив всех последующих картинок поменять местами, либо сделать что-то с непонятной первой картинкой.
  • +5
    > Старайтесь использовать социальное доказательство вместо того, чтобы рассказывать о себе самом

    Каждый раз, когда читаю все эти «нам очень понравилось» с подписями «Евгений Козлов, Няш Интернешнл», только вертится мысль — не надоело им самим о себе такие сопли распускать.

    Куда честнее написать именно список: «мы стараемся быть быть лучшими в отрасти, и предоставлять сервис так:...», где пишется именно то, во что сами работники верят. Вранье никогда не доводило до добра, даже если оно в виде соцрекомендаций.
    • +1
      А где тут хоть слово о вранье? Предлагается использовать реальные отзывы реальных людей, если, конечно, они есть.
      • +2
        Дело в том, что отличить реальные от придуманных ну не то чтобы невозможно, но сложно весьма.
        • +1
          Это вопрос подачи. Можно транслировать комментарии из соцсети или сообщения в твиттере — их подделать куда сложнее, чем выпиленный на собственном сайте лозунг «Евгений Козлов сказал, что мы крутые».
          • 0
            Большее доверие вызывает отзыв с фотографией/ссылкой на соцсеть или с указанием организации, в которой человек работает.ё
            Типа так:
            «Отличные булочки, всегда выпекаются в срок в нужных количествах»
            Сидор Петров, Hewlett-Packard. [фотка]
        • 0
          Для убедительности можно оставить орфографию и пунктуацию источника))
      • +1
        А где тут хоть одно доказательсто невыдуманности этих самых признаний? :)

        Я же не про то, что автор сайта — лжец. Я о том, что выглядят такие «признания» (testimonials), написанными на сайте, на котором Вас уговаривают потратить какие-то ресурсы, несколько придуманными.

        Хотя бы потому, что положительных отзывов пишут всегда меньше, чем отрицательных. И пишут эти положительные отзывы люди вполне определенного склада характера — того склада, чьему бы мнению я даже при наличии такого человека рядом, простите, не поверил бы. Кроме того, надо делать скидку на неопытность восторгающихся — обычно радуются те, кто не разбирается в вопросе.

        Скажем, человек купил китайский планшет, и (искренне) пишет отзыв — «отличный девайс», хотя планшет — дрянь та еще, но человек просто других не видел. Верить ли его искреннему выражению радости? Я бы не стал, т.к. мое ожидение платшет может и не выполнить. Получается, что для меня честный чей-то озвыв окажется неподходящим, хотя человек и не врет.

        Посему — я лично их пропускаю, делая только отметку, что здесь играют на неопытности.
  • +6
    По названию думал, что будет речь об интерфейсе приложения, а теперь сижу и думаю, что между рекламным баннером и веб-приложением нет четкой разделительной черты. У баннера один управляющий элемент — он сам, а у веб-приложения их могут быть тысячи на сотнях страниц, но суть одна и та же: чтоб пользователь получил то, что он хочет и не получил того, чего он не хочет.
  • 0
    Идея 3: Старайтесь объединять схожие функции и не дробить интерфейс

    Не согласен. Один из признаков продающих целевых страниц (не обязательно лендингов кстати, даже наоборот) часто является выбор. Например: зарегистрироваться или связаться с отделом продаж. Или: отправить заявку на услугу / перезвоните мне.
    Во всех случаях идёт отправка емейла, но в данном случае у человека отстаётся выбор (вместо выбора делать-не делать).
    Это как «посуду будешь мыть сейчас или вечером?» вместо «посуду будешь мыть?»
    • +1
      Видимо, это палка о двух концах… Оба бьют одинаково больнее середины
  • 0
    Очень полезная статья, с удовольствием перечитал ее в переводе.
    Как я понимаю — пункты добавляются со временем?
  • +1
    Возможно, я — наивный дурак, но я искренне считаю, что создавать интерфейс надо так, чтобы он масимально эффективно решал задачи конечного пользователя, а не свого владельца. В статье же рассказывается о том, как с помощью визуального оформления эффективнее впаривать что-то конечным пользователям.
    Это, конечно, тоже нужно, но статья получается уже не об интерфейсах, это другая наука.
    • 0
      У меня тоже схожее впечатление. Такое чувство, что вылили ушат булшита из телевизора или супермаркета в духе купи %uselessthing% и получи в подарок то, что у нас складе валяется уже полгода.
      • 0
        Скорее, это что-то околополитическое. Возможно, это из-за того, что «Призыв к действию» подсознательно распознаётся не как коммерческое предложение ))
  • +2
    Идея 8 — очевидная и нужная, но… сложность реализации отката действия, как правило в несколько раз сложнее предупреждения (именно поэтому мы имеем традиционные диалоги подтверждений). Отсюда вывод — если менеджер не настоит на реализации отката, то программист (с большей долей вероятности) предпочтет стандартное предупреждение перед действием
  • –7
    Оформление вашей статьи ужасно :)
    Уберите все описание и оставьте только заголовки и картинки. Честно, я только на них и смотрел.
    • +3
      Никогда этого не понимал, а теперь у меня появилась возможность спросить напрямую.
      Когда вы писали этот комментарий, вы правда рассчитывали, что автор подумает: «Да! Я сделаю так, как мне сказал тот парень в интернете! Ведь его мнение для меня важнее всех остальных и даже важнее моего собственного!», да?
      А если нет, то чем обоснован императив?
      • 0
        «В интернете кто-то неправ»
      • 0
        Нет. Это был комплимент картинкам и заголовкам. Серьезно.
        Я там даже смайлик поставил, специально для вас и братии с минусами в руках.
  • +1
    Спасибо за интересную статью. Со многими моментами хочется поспорить, но уже это говорит о том, что писали не зря.
  • +2
    Фейсбук посмотрел, и сделал все наоборот )
  • 0
    Спасибо!

    Полезно, тезисно, наглядно. Очень интересная подача!

    С удовольствием добавил в избранное и от меня вам плюс :)

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.

Самое читаемое Дизайн