Улучшение юзабилити сайта

Содержание:

• 1. Понятие юзабилити веб-сайта: принципы, параметры эффективности
• 2. Серьезные ошибки, ухудшающие юзабилити
• 3. Как проверить юзабилити сайта
  • Шаг 1. Изучите пути пользователя
  • Шаг 2. Соберите фокус-группу
  • Шаг 3. Изучите «Вебвизор»
  • Шаг 4. Проверьте адаптивность
  • Шаг 5. Правило трех кликов
• 4. Улучшаем UI
  • Дизайн сайта
  • Цветовая гамма
  • Навигация
  • Шапка
  • Подвал
  • Текстовый и визуальный контент
  • Первый экран
  • Формы
  • Поиск
  • Виджеты соц.сетей
  • Кнопка «Назад»
• 5. Улучшаем UX
  • Скорость загрузки
  • Отсутствие ошибок
  • Увеличение картинок по клику
  • Валидация форм
  • Сообщения после отправки форм
  • Статусные сообщения и диалоги
  • Email-уведомления
  • Динамический контент
  • Полезные инструменты и мелочи
• 6. Итог

Понятие юзабилити веб-сайта: принципы, параметры эффективности

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

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

Серьезные ошибки, ухудшающие юзабилити сайта

Чтобы задать контекст последующим рекомендациям, наша команда маркетологов решила провести исследование и выявить топ-10 самых раздражающих для пользователей элементов и деталей сайтов. В ходе исследования мы собрали банк сайтов с хорошим и не очень проработанным юзабилити, смешали их в одну подборку, попросили респондентов посерфить по данным сервисам и дать нам фидбэк в виде буллит поинтов. Каждый человек присылал основные моменты, которые вызвали негативные впечатления от взаимодействия с сайтом. Всего было опрошено более 570 человек возрастом от 16 до 55 из разных городов России. Опрос был проведен онлайн с помощью Google Forms.

В итоге мы получили следующие результаты:
1.Медленная скорость загрузки сайта или отдельных страниц – 82%.
2.Всплывающая реклама – 79%.
3. Недружественный пользователю дизайн – 67%.
4. Орфографические и грамматические ошибки –65%.
5. Перенаправление на главную страницу / отсутствие возможности вернуться «назад» – 58%.
6. Неработающие / неактивные ссылки – 55%.
7. Битые страницы (например, ошибка 404) – 54%.
8. Стоковые изображения – 49%.
9. Неработающие видео – 46%.
10. Отсутствие контактов или затруднения с их поиском – 42%.

Больше всего пользователи обратили внимание на скорость загрузки страниц сайта, всплывающую рекламу и ошибки в написании текста.

Как проверить юзабилити сайта?

Хорошо, про основные ошибки вроде выяснили. Теперь встаёт вопрос: а как же понять, что на моем сайте их точно нет?

Шаг 1. Изучите пути пользователя

Возможно вы уже слышали о таком методе, как Customer Journey Map, а если нет, то мы сейчас расскажем. CJM-это карта, которая наглядно отражает все этапы пользовательского пути и полностью описывает его взаимодействие с продуктом или компанией во всех точках контакта. Это ключевой инструмент в UX.

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

Есть более сложные и детальные:

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

Шаг 2. Соберите фокус-группу

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

Фокус-группа в маркетинге – это способ качественного исследования потребительских потребностей, мотивов и болей. Это что-то вроде «круглого стола» с ЦА. Благодаря очному формату и атмосфере дискуссии, фокус-группа позволяет получить информацию, которую невозможно узнать в ходе личного или телефонного опроса. Как правило, все вопросы в сценарии являются открытыми, что позволяет модератору группы адаптировать ход разговора под меняющуюся ситуацию. Это помогает выявить и понять совершенно неожиданные инсайты и использовать их во благо бизнеса.

Шаг 3. Изучите Вебвизор

Вебвизор (Webvisor) – это встроенный аналитический инструмент Яндекс.Метрики, который записывает действия пользователей на целевых страницах сайта. Сеанс юзера выводится на экран в видео формате, что позволяет визуально наблюдать за активностью потребителя от начала до конца посещения. Это своеобразная «камера наблюдения» на вашем сайте. Анализируя материалы с этого источника, можно явно заметить множество функциональных и визуальных проблем, с которыми сталкивается покупатель. Например, если вы видите, что уже 5-ый пользователь пролистывает сайт до формы и начинает ее заполнять, но не может завершить процесс, то стоит задуматься над изменением содержания или технических аспектов вашей формы обратной связи.

Если у вас нет Яндекс метрики, мы можем помочь вам ее установить.

Получить консультацию

Шаг 4. Проверьте адаптивность

Ни для кого не секрет, что сегодня около 70-80% трафика идет через мобильные телефоны, да и разнообразие технических устройств стало настолько огромным, что самый простецкий ноутбук может иметь множество разных параметров и характеристик. Поэтому ваша задача – обеспечить сайту хороший вид и грамотный функционал для любого устройства. Необходимо позаботиться, чтобы с телефона, планшета или ПК ваш сайт открывался правильным образом без потери части функций и проблем с дизайном. Этот пункт особенно актуален для веб-сервисов конца 90-х начала 2000-х, так как абсолютное большинство современных продуктов серьезных проблем с адаптивностью не имеет. Но все же, стоит об этом помнить, так как даже одна поехавшая кнопка может начисто испортить все впечатление от пользования ресурсом.

Шаг 5. Правило «трех кликов»

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

По мнению Nielsen Norman Group, не все клики одинаково полезны: некоторые приводят к длительному ожиданию (пока загрузится новая страница или обрабатываются данные), другие дают эффект моментально, как перемещения между состояниями блока-аккордеона. Поэтому не стоит так сильно привязываться к данной концепции.

Улучшаем UI

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

Дизайн сайта

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

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

Цветовая гамма

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

*Для быстрого подбора цветовых сочетаний можно использовать сервис Coolors.co

Навигация

Мы уже упоминали о важности навигации чуть выше, в разделе о CJM (customer journey map). Основные элементы хорошей с точки зрения юзабилити навигации это: хедер (шапка), главная, о нас, иконки, текстовые ссылки.

Разные варианты оформления навигации:

Шапка

Шапка или хедер – это закреплённый сверху блок, в котором находится основная навигационная информация. Согласно базовым принципам юзабилити, шапка сайта обязательно должна содержать логотип, меню, контактные данные (телефон, почта или раздел «контакты» в меню); опционально – конверсионная форма и корзина, если у вас интернет-магазин. Также под логотипом иногда пишут дескриптор, короткую надпись, которая отражает основное направление деятельности компании.

Примеры шапок:

Подвал

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

Примеры подвалов:

Текстовый и визуальный контент

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

Первый экран

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

Формы

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

Виджеты соцсетей

Такой инструмент, как network widget, особенно пригодится тем компаниям, которые активно ведут аккаунты в Инстаграм, Фейсбук, ВК или других соцсетях. Можно не просто поместить ссылки на профили в подвале сайта, а сделать в полноценный инструмент, который закрепит иконки на сайте, чтобы они всегда находились в поле зрения пользователя. Это поможет увеличить трафик на соцсети и положительно скажется на эффективности, особенно, если из социальных профилей тоже можно совершить продажу.

Кнопка «Назад»

Многие исследования юзабилити показывают, что пользователи (как новички, так и опытные), часто используют кнопку «вернуться назад» в браузере. К сожалению, разработчики интерфейсов и маркетологи редко задумываются, какие последствия это может иметь для юзабилити — учитывая современные модели веб-дизайна, которые используют приложения, анимацию, видео и прочее. Часто техническая структура таких макетов некорректно реагирует на функцию «вернуться назад», чем разрывает ментальный шаблон пользователей и ухудшает их опыт. Это может стать одной из основных причин ухода пользователей с сайта.

Наши разработчики предлагают решение: HTML5 может предложить относительно простое решение проблемы, и называется оно HTML5 History API. Конкретнее — функция history.pushState() позволяет изменять URL без перезагрузки страницы. Соответственно сайт будет вести себя адекватно ожиданиям пользователя, нажавшего кнопку «вернуться назад».

Читай больше об услуге UX/UI дизайн

Улучшаем UX

Скорость загрузки

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

Отсутствие ошибок

Error…this page is not влияет на потребителей как красный платок на испанского быка, негатив возрастает в разы. Как решить проблему? Технический аудит сайта, исправление всех косяков и хорошо проработанные страницы 404 (это больше к дизайнеру, они даже соревнуются в том, чтобы сделать максимально креативную страницу ошибки).

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

Получить аудит

Увеличение картинок по клику

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

Валидация форм

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

Сообщения после отправки форм

Многие забывают о важности подтверждения отправки форм и сообщения после, но, на самом деле, это играет огромную роль в пользовательском опыте общения с вашим сервисом. Представьте, что вы изучили информацию на сайте, определились с какой-то услугой/консультацией или выбрали товар для заказа, заполнили все свои данные, а в ответ – ничего. И пользователь не знает, а что будет дальше, свяжутся ли со мной или как все будет происходить? Поэтому важно проинформировать клиента об успешном получении данных и сообщить о дальнейших действиях с вашей или его стороны. Тогда покупатель будет уверен, что его заявку получили и вскоре обработают.

Статусные сообщения и диалоги

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

Email-уведомления

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

Динамический контент

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

Полезные инструменты и мелочи

«Фичи» вашего сайта могут быть разными, в зависимости от специфики деятельности. Как правило, это калькуляторы, мастера подбора услуг, инструменты сравнения и тп.

Также не стоит закрывать глаза на мелочи , которые могут серьезно осложнять жизнь вашим пользователям. Например, иконка «лупы» на картинках, где возможно увеличение, читабельные названия картинок и приложенных файлов, кнопка «наверх» для длинных сайтов, закреплённая шапка и др – все это отлично поможет клиенту при пользовании вашим ресурсом.

Выводы

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