Вы решили действительно заняться оптимизацией юзабилити, но не понимаете, с чего начать? При таких условиях стоит обратиться к практикам, проверенным временем. Так, к примеру, имеете возможность забрать за базу 10 базисных правил, выделяемых Якобом Нильсеном (Jacob немного).
Следуя им, вы сможете создать по-настоящему дружелюбный интерфейс пользователя.
Если вы трудитесь в B2B-секторе либо сложный продукт, у ваших клиентов точно будет появляться много вопросов — так пускай поиск ответов на них станет приятным опытом. Информационная архитектура сайта обязана помогать пользователям, а не запутывать.
Кроме того в случае если ваш сайт не есть тем местом, где заключаются сделки, он остается одной из наиболее значимых точек на «карте путешествия потребителя». Так, знание 10 правил оптимизации юзабилити от Якоба Нильсена будет полезно каждому, кто вступает в борьбу за высокую конверсию:
- Пользователь неизменно прав, либо из-за чего так принципиально важно уделять внимание UX в 2015 году?
1. Позаботьтесь об удобстве навигации
Если вы желаете, дабы визитёр ощущал себя комфортно, убедитесь в том, что в любой из моментов навигации по сайту он имеет четкое представление о собственном местонахождении.
Это возможно сделать посредством следующих инструментов:
Навигационная цепочка
Этот элемент демонстрирует путь, что визитёр уже преодолел. Человек, имеющий перед глазами навигационную цепочку, будет четко осознавать, где он находится.
Заголовок страницы
Заголовок есть первым подтверждением того факта, что визитёр попал на релевантную его запросу страницу. Грамотное применение данного инструмента разрешает получать внушительных результатов при проектировании пользовательского опыта.
Выделение выбранного пункта навигационного меню
Выбрав тот либо другой пункт, пользователь обязан без промедлений взять подтверждающий визуальный сигнал. Четкая обратная сообщение — один из столпов юзабилити.
Индикаторы прогресса
Визитёр совершил определенное воздействие и ожидает ответной реакции? Продемонстрируйте ему, что запрос обрабатывается.
Страницы признательности
Thank You Page возможно применять в качестве инструмента, информирующего о том, что цель клиента (будь то приобретение электронной книги, регистрация в качестве участника вебинара либо что-либо еще) достигнута.
Сайт The Berkshire company дает пользователю четкую возможность и обратную связь ознакомиться с навигационной цепочкой. Кроме этого стоит обратить внимание на заголовок страницы, не подметить что фактически нереально:
Клиенты MSC Industrial Supply Company, скачивающие брошюру со справочной информацией, смогут смотреть за ходом загрузки благодаря особому индикатору:
А вот пример того, как страница признательности может употребляться в качестве сигнала, дающего клиенту осознать, что он достиг собственной цели:
2. Отыщите неспециализированный язык с вашими клиентами
Эффективность бизнеса зависит от вашего умения строить взаимоотношения с клиентами. Одним из наиболее значимых элементов совокупности коммуникации между компанией и ее целевой аудиторией есть язык.
Если вы желаете наладить диалог с клиентом, не пробуйте навязать ему собственные условия. Откажитесь от применения терминов, каковые понятны лишь экспертам. Рассказываете с человеком на том языке, на котором он привык общаться.
Красивым примером того, как бизнес подстраивается под клиентов, есть интерфейс медиаплеера iTunes, в котором использован предельно несложный язык:
Обрисовывая преимущества оффера, применяйте формулировки, которыми пользуются представители вашей целевой аудитории. Не опасайтесь играть честно , продиктованным потребителями. В итоге, построение взаимоотношений между клиентом и бизнесом — это не та игра, где победа одной из сторон постоянно означает поражение для второй.
- Как создать качественный интерфейс? Обратитесь за советом к своим клиентам
3. Предоставьте людям свободу действий
Предпринимая попытки манипулировать пользователями, вы без шуток рискуете. Чрезмерное давление на визитёров может привести к резкому падению уровня конверсии.
Разглядим четыре метода, которыми кое-какие компании пробуют подтолкнуть людей к «верному» ответу:
Всплывающие окна
Тут стоит оговориться, что грамотно настроенное pop-up окно чуть ли вызовет негодованиепользователя. Но, в случае если всплывающее окно на вашем сайте предлагает лишь один вариант действий, вы ступили на скользкую дорожку.
Почувствовав давление, многие люди просто-напросто покинут страницу и отправятся к вашим соперникам. В случае если подобный сценарий вас не устраивает, позаботьтесь о том, дабы у ваших клиентов всегда был выбор.
В полном соответствии с этим принципом, в pop-up окне компании Grainger под призывом к действию («Join») находится кнопка («No Thanks»), разрешающая отказаться от предложения:
Машинально включающиеся видеоролики
Видео, которое запускается само собой при переходе на сайт, воспринимается пользователями без особенного энтузиазма. Разрешите им самим выбирать, что и в то время, когда наблюдать.
Машинально появляющийся онлайн-консультант
Продавец, «приходящий на помощь» через секунду по окончании открытия страницы и разумеется не существующий в реальности, приводит к отторжению у подавляющего большинства пользователей. В случае если в перечне ваших задач нет пункта «разозлить клиентов», этому продавцу не место на вашем сайте.
Слайдеры
Еще один пример инструмента, применяя что вы рискуете взять совсем не тот итог, которого ожидали. В случае если желаете обеспечить пользователям легкий доступ к интересующей информации, откажитесь от слайдеров. Организовать эргономичную навигацию возможно и посредством несложных приемов. Cайт WSI — наглядный тому пример:
- Секреты юзабилити: Как эргономичен ваш видео-контент?
4. Будьте последовательны и придерживайтесь стандартов
Аура непредсказуемости и загадочности чуть ли сослужит вашему бизнесу хорошую работу. Обращаясь в ту либо иную компанию, человек взять товар либо услугу. Подкидывая клиенту головоломки, вы провоцируете его на отказ от сотрудничества с вами.
Попав на сайт производителя сельскохозяйственной техники Massey Ferguson, пользователь без лишних упрочнений отыщет то, что ему необходимо. А все вследствие того что внешний вид всех страниц тут приведен к единому знаменателю. На каждой из них клиент будет видеть белый фон и расположенные на нем в соответствии с четкой иерархией карточки товаров:
Навигационная панель всегда находится перед глазами визитёров сайта Sprint Business, что существенно облегчает процесс поиска нужной информацим:
А сейчас посмотрите на четыре сайта, любой из которых имеет яркое отношение к американской корпорации Georgia-Pacific. Согласитесь, не через чур похоже на четыре элемента единой структуры:
В случае если специфика вашего бизнеса предполагает наличие нескольких веб-сайтов, попытайтесь сделать так, дабы при переходе с одного из них на другой людям не приходилось затевать изучение интерфейса пользователя с нуля.
- 10 советов по улучшению юзабилити сайта
5. Попытайтесь предугадать вероятные неточности пользователей и не дайте им их совершить
В случае если интерфейс вашего сайта содействует совершению клиентом досадных промахов, вы должны это исправить. Тщательная проработка небольших подробностей и грамотно организованное тестирование разрешат вам избавить клиентов от необходимости обучаться на собственных неточностях.
Ниже представлен перечень неточностей, по которым вам направляться нанести предупредительный удар:
Неправильное заполнение лид-форм
Возможность совершения человеком данной неточности существенно возрастает, в случае если подписи к полям для заполнения находятся в этих полей. Непременно, таковой подход разрешает сделать форму более компактной. Но, экономия пространства в этом случае достигается за счет пользователей, для которых заполнение формы преобразовывается в диагностику краткосрочной памяти.
Вам думается, что подписанные в поля создадут вашим клиентам важные сложности? Поместите подписи за пределами полей, и неприятность будет решена прежде, чем успеет появиться.
Пользователю думается, что он совершил ошибку кнопкой, не смотря на то, что в действительности он все сделал верно
В случае если целевая страница не имеет ничего общего с тем, что давал слово Call to Action, пользователи будут запутаны. Пример для того чтобы диссонанса между Landing Page и кнопкой призыва к действию вы имеете возможность видеть ниже:
CTA и посадочная страница компании Simply Business значительно больше будут похожим звенья единой цепи:
На данной целевой странице, кроме другого, пользователь при необходимости может взять подсказку. Но, без недочётов не обошлось: на странице отсутствует заголовок, что показывал бы визитёру на то, что он попал как раз в том направлении, куда желал.
Неточности при применении поискового окна
Вы желаете быть уверены, что пользователи сумеют отыскать нужную информацию на вашем сайте? Предложите им окно поиска с автоматическими рекомендациями, как это делает, например, Гугл:
Случайный уход с вашего сайта
Ваш сайт изобилует ссылками на другие ресурсы? Помните, что любая подобная ссылка — лишняя дверь, через которую лиды смогут покинуть воронку конверсии. Если вы не готовы отказаться от ссылок на сторонние ресурсы, сделайте так, дабы при нажатии на них пользователи приобретали соответствующее уведомление («Вы покидаете отечественный сайт»).
Так, вы разрешите возможность остаться на вашем сайте людям, каковые не планировали с него уходить.
Неточность при выборе CTA
Если вы заботитесь о комфорте клиентов, удостоверьтесь в том, что основной Call To Action постоянно выделяется на фоне вторичного. Само собой разумеется, вынудить человека приобрести ненужный ему товар посредством этого приема у вас не выйдет. Но, вы сведете к минимуму возможность того, что пользователь случайно надавит не ту кнопку, на которую планировал нажать.
6. Не заставляйте пользователей запоминать через чур большой количество информации
Необходимость держать в голове через чур много информации есть значительным препятствием на пути пользователя к цели. Но, грамотное структурирование содержания сайта разрешает решить эту проблему.
Забрать, например, страницу сайта Wealthfront. Она содержит внушительный количество информации, но вся она структурирована так, дабы максимально уменьшить пользователю ознакомление с контентом:
Atlassian существенно упростила навигацию за счет применения закладок, и «липкого» меню, которое при прокрутке страницы остается на своем месте. В следствии, компании удалось детально обрисовать достаточно сложный программный продукт Jira в рамках одной-единственной страницы:
Еще один метод увеличения юзабилити сайта (что многие UX-дизайнеры почему-то игнорируют) — выделение цветом ссылок, по которым человек уже переходил:
- Как типографика воздействует на коэффициент конверсии и юзабилити?
7. Разместите главные элементы так, дабы их не было возможности не подметить
Если вы не желаете создавать людям лишние сложности, вам нужно максимально упростить им задачу по поиску самые важных элементов страницы.
На сайте Pipedrive, например, главные варианты действий («подписаться», «пройти регистрацию», «получить доступ к триал-версии», «взять дополнительную данные о продукте») расположены «выше линии сгиба»:
Призыв к действию, расположенный на самом верху страницы, есть очень действенным орудием:
- 8 несложных способов увеличения юзабилити вашего сайта
8. Не перегружайте интерфейс
Чем больше второстепенной информации ваш сайт предлагает клиентам, тем выше возможность того, что сущность вашего оффера ускользнет от них. Ваша задача содержится в том, дабы «отсечь все лишнее».
На представленном ниже изображении вы имеете возможность видеть красивый пример сайта, созданного по всем канонам минимализма:
На сайте информагентства Рейтерс вы кроме этого не отыщете лишних подробностей. Раздельно необходимо подчеркнуть белый фон, применение которого разрешило повысить читабельность текста:
Визитёров сайта Basecamp встречает тот же белый фон и всего два призыва к действию (для постоянных клиентов и для «новичков»):
А сейчас давайте разглядим страницу Apple, на которой пользователю предлагается выбрать собственную страну либо регион (это тот редкий случай, в то время, когда Apple употребляется в качестве отрицательного примера). Казалось бы, визуальный контент (знамёна стран) обязан снизить когнитивную нагрузку на человека и упростить стоящую перед ним задачу:
Но на деле применение подобной системы ведет к обратному эффекту. Людям приходится заниматься поиском флага собственной страны вместо того, дабы пара первых букв ее заглавия в окно поиска.
- Примеры юзабилити интерфейса пользователя
9. Сделайте сообщения об неточностях более человечными
Появление на экране страницы, оповещающей об неточности, в большинстве случаев вызывает у людей только отрицательные чувства. Но вам в полной мере по силам снизить градус негатива.
Как вариант, вы имеете возможность забрать пример с компании Bluegg, на сайте которой сообщения об неточностях имеют достаточно уникальный вид:
«Аaaaaaaaaaaa! Таковой страницы не существует.
Не переживайте. Вы имеете возможность возвратиться на домашнюю страницу, либо остаться тут и слушать козу, которая кричит как человек».
Страница неточности 404 от TechCrunch в дополнение к вариантам предстоящих действий предлагает пользователю контент, что возможно ему увлекателен:
Не забывайте: в случае если вам необходимо сказать человеку об неточности, вы должны применять максимально несложный язык. Непонятные коды злят большая часть пользователей.
- Как перевоплотить страницу 404 в инструмент продаж?
10. Предоставьте людям нужную помощь
В случае если у вашего клиента появились какие-то вопросы, он должен иметь возможность оперативно узнать ответы на них. Наладить коммуникацию с потребителями возможно, например, посредством всплывающих окон живого чата:
Наличие на странице ответов на довольно часто задаваемые вопросы кроме этого существенно упрощает процесс ознакомления с вашим оффером. Значение FAQ особенно громадно в тех случаях, в то время, когда речь заходит о сложных продуктах.
Еще один метод оптимизации юзабилити предполагает создание таблицы, содержащей цену и важнейшие характеристики каждого из продуктов:
Zendesk оказывает помощь пользователям сделать верный выбор при помощи всплывающих подсказок:
Заключение
Само собой разумеется, легко следуя базисным правилам проектирования пользовательского опыта, вам чуть ли удастся сделать из вашего сайта «совершенную машину для генерации лидов». Скорее, эти правила стоит разглядывать в качестве фундамента, на котором вы имеете возможность выстроить фактически все, что захотите.
Высоких вам конверсий!
По данным: conversionxl.com, image source: d_jan