10 лучших UX практик, за которые посетители полюбят ваш сайт.

Сделать сайт удобнее — это путь к увеличению его конверсии.

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

В этой статье мы поговорим о том как это сделать.

1. Клиент должен знать, где находится и что происходит.

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

Разберем примеры.

1. Оформление заказа в интернет-магазине.

В нем стоит показать этапы этого процесса. А также явно обозначить, на каком из них в данный момент пользователь находится.

2. «Хлебные крошки».

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

3. Сообщения об ошибках и результат валидации форм

Очень важна обратная связь на любое взаимодействие пользователя с интерфейсом. В частности для ситуации, когда посетитель что-то сделал не так. Не стоит надеяться, что он сам поймет в чем проблема, особенно, если он сам что-то ввел неправильно. Проще уйти на другой сайт, чем сидеть и гадать.

4. Статусы в карточке товара.

Если в наличии осталось мало товаров или он недоступен, просто покажите эту информацию.

2. Не изобретайте велосипед.

В этом принципе речь идет о том, чтобы сделать элементы веб-сайта понятными каждому пользователю.

Например, любое приложение для воспроизведения музыки содержит типовой набор элементов (play, stop, pause и пр.), которые закрепились за соответствующим действиям. Они пришли к нам еще со времен кассетных магнитофонов.

Любая попытка вместо них использовать что-то уникальное усложнит интерфейс аудио или видеоплеера.

Не стоит изобретать велосипед. Если в дизайне интерфейса стандарт является общепринятым, то стремление к лишнему креативу, принесет больше вреда, чем пользы.

3. Дайте пользователю возможность управлять взаимодействием с сайтом.

Бывало ли у вас такое.

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

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

Подобное ужасно раздражает.

Что это значит для нас?

Необходимо предоставлять пользователю полный контроль при работе с вашим интерфейсом.

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

Это особенно актуально для мобильных устройств, где случайные «нажатия» более распространены, чем на компьютерах.

На скриншоте ниже показана форма заявки банка «Райфайзен». Заполненные пункты обозначены жирным шрифтом. При клике на него — вы возвращаетесь к пункту, где можете внести правки.

4. Стандарты важны.

Очень важно, чтобы все страницы сайта поддерживали единые стандарты оформления элементов. Иначе есть риск запутать пользователя.

На что стоит обратить внимание.

  • Шрифты. Не используйте разные шрифты для однотипных элементов.
  • Стиль кнопок по всему сайту должен сохранятся.
  • Цвет и оформление ссылок
  • Цветовая гамма
  • Поведение кнопок и ссылок после наведения курсора
  • Стиль сообщений об ошибках, оповещений и пр.
  • Расположение описаний полей внутри форм

Кроме этого существуют общепринятые стандарты в области расположения отдельных элементов в UX/UI.

Это, например:

  • Размещение логотипа в верхнем левом углу или в середине верхней части экрана, при клике на него с внутренних страниц должен быть переход на главную
  • Меню вверху или сбоку страницы
  • Меню на мобильных устройствах доступно после нажатия значка «гамбургер» или кнопки «меню» в верхнем левом или правом углу экрана.
  • Значок «Корзина» в интернет-магазине в правом верхнем углу экрана.

Все описанное выше решает одновременно две задачи. С одной стороны — делает ваш сайт понятнее. С другой упрощает вам работу по его проектированию.

5. Предусматривайте возможные ошибки до их появления.

В идеале взаимодействие со страницей должно быть таким, чтобы вообще не было сообщений об ошибках.

Но это утопия. В реальности максимум что мы можем сделать — это постараться сделать так, чтобы их было как можно меньше.

Способы, которые помогают достичь этой цели:

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

Например, в форме заявки у Тинькофф банка, при клике в поле ввода телефона можно сразу увидеть подсказку для его заполнения.

А при создании почты в Яндексе — вы получаете уведомление о том, что поле заполнено корректно еще до нажатия на кнопку «Зарегистрироваться».

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

6. Не заставляйте посетителя все помнить.

Удобный веб-сайт предоставляет пользователю нужную информацию, когда ему это необходимо. Так, чтобы последнему не было бы необходимости полагаться только на свою память.

Например, блоки «Недавно просмотренные товары», характерные для интернет-магазинов, являются отличным этому примером.

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

Существует распространенная ошибка в UX — это писать имена полей формы внутри без дополнительных подсказок.

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

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

В интернет-магазинах в корзины могут добавлять много разных товаров.

Поэтому хорошим решением будет в процессе оформления еще раз показывать ему список того, что он покупает. Это убирает необходимость отвлекаться и проверять все ли он заказал из того, что планировал.

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

7. Оптимизируйте взаимодействие.

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

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

Несколько примеров.

Одна из типовых задач в интернет-магазине — фильтрация товаров по параметрам.

На скриншоте ниже видно 2 приема, повышающие скорость работы.

  1. Возможность выбрать пункты и нажать на появившуюся рядом кнопку «Показать». Это убирает необходимость листать страницу вниз и ждать пока перезагрузится после выбора нужных опций.
  2. Для того, чтобы не кликать по всем «птичкам», предусмотрена одна «Все производители.»

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

Сюда же относятся любые горячие клавиши (Tab, Enter, пробел) или действия по двойному клику мышкой, которые позволяют выполнять типовые действия быстрее.

8. Не создавайте хаос.

Чем больше контента на странице, тем больше энергии пользователь тратит на поиск того, что ему нужно.

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

С точки зрения юзабилити минимализм безопаснее, чем обилие текстов, баннеров, ссылок, анимации и пр.

Остерегайтесь ловушки «А вдруг кому-то понадобится …» — так можно перегрузить сайт и сделать из него что-то вроде елки. Сосредоточьтесь на отображении самой важной для пользователя информации в рамках той страницы, на которой он находится.

Не походите на ставший уже мемом LingsCars.

9. Сделайте ошибки человечнее.

Когда пользователь столкнулся с ошибкой — он должен увидеть не системное сообщение из серии «Ошибка!» или «Ошибка №123456». Иначе он просто уйдет к конкуренту.

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

Например, если вы пытаетесь зайти в свою почту, но ввели неверный email. Вы видите сообщение «Не удалось найти аккаунт Google» и тут же под ним действие, которое поможет решить проблему.

А вот, что будет, если при регистрации почты вы введете уже занятое имя. Снова: причина ошибки и решение.

Ошибка всегда связана с раздражением. Когда ваш сайт начинает разговаривать с пользователем на простом языке и подсказывает что можно сделать — градус напряжения снижается.

10. Помогите найти ответы на любые вопросы.

Лучший интерфейс — тот, работа с которым проста, понятна и очевидна. И она не требует дополнительных инструкций и пояснений.

Однако, это не всегда возможно.

Часто у потенциальных клиентов возникает много вопросов о товарах, условиях покупки, возврате или гарантиях. Для решения этой задачи подойдет раздел часто задаваемых вопросов.

Поэтому стоит позаботиться о том, чтобы у вас он был. Без него все вопросы будут задаваться по электронной почте, телефону горячей линии или в чате. Что требует дополнительных расходов со стороны бизнеса.

Наиболее горячие темы можно выносить в основное меню сайта.

Или дать возможность задавать вопросы прямо в карточке товара в соответствующем разделе.

Заключение.

Надеюсь, что описанные в статье рекомендации были вам полезны.

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

Оставьте комментарий