Анализ юзабилити: как сделать сайт популярным.

Реклама, контент-маркетинг, многоэтапные воронки… Какими бы средствами вы не привлекали клиента, рано или поздно он остается один на один с вашим веб-ресурсом. И в этом момент юзабилити сайта определяет, оформит он заказ или закроет страницу.

Зачем проводить анализ юзабилити

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

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

Юзабилити сайта: что это такое

Юзабилити — ( англ. use ability — возможность пользоваться) термин, который означает удобство использования. Простой, удобный и интуитивно понятный для пользователя сайт = сайт с высоким юзабилити.

Известный эксперт по юзабилити Якоб Нильсен в работе «Why people shop on the web» называет 5 составляющих удобства сайта:

  1. Обучаемость. Насколько интуитивно понятен ресурс, как быстро пользователь может найти нужную информацию;
  2. Эффективность. Ознакомившись с сайтом один раз, насколько быстро человек сможет работать с ним дальше? Например, однажды оформив заказ, будет ли легче сделать это еще раз;
  3. Запоминаемость. Если покинуть сайт и вернуться через месяц, будет ли все еще просто им пользоваться, или придется изучать все заново;
  4. Ошибки. Сколько раз посетители сайта ошибаются, просто ли им исправить эти ошибки. Например, если человек забыл ввести е-мейл в форме заказа, сайт подскажет ему и поможет исправить, или просто сотрет все данные и заставит заново заполнять форму;
  5. Удовлетворенность. Комфортно ли пользователям находиться на сайте, насколько просто им выбрать продукт или оформить заказ.

Как юзабилити влияет на конверсию

Юзабилити напрямую влияет на конверсию коммерческих сайтов — от лендингов до интернет-магазинов:

  1. По данным Kissmetrics, 40% посетителей уходят с сайта, если страница грузится более 3 секунд.
  2. Согласно этому же исследованию, 44% пользователей покидают сайт, если там нет четкой контактной информации.
  3. Исследование Landauer гласит, что учет юзабилити при разработке сервиса снижает затраты по его поддержке на 700%.
  4. По данным Creative Good, интуитивно понятный путь оформления заказа увеличивает количество покупателей на 40%, а сумму заказа — на 10%.
  5. Согласно User Interface Engineering,предоставив клиенту полную информацию о товаре, можно увеличить объем продаж на сайте на 225%.
  6. Якоб Нильсен в исследовании «Loyalty on the web» утверждает, что новые клиенты оформляют заказ в интернет-магазине в среднем на $127, в то время как постоянный покупатель, которому удобно пользоваться сайтом, тратит почти в 2 раза больше: в среднем $251.

Кстати, юзабилити — важный критерий успеха не только сайта, но и любого продукта. К примеру, согласно исследованию Latirman, 58% мужчин, живущих в Великобритании, не пользуются стиральными машинами, потому что считают их слишком сложными. Дизайнер Питер Фабор даже выпустил специальные наклейки, которые помогают мужчинам постирать вещи.

Бесплатные инструменты анализа юзабилити

Usabilla

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

Feng-GUI

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

UsabilityHub

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

Optimal Workshop

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

Bitmodern

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

Дизайн и элементы сайта

24. Умеренность. Яркие цвета, крупный цветной текст, анимация – используются минимально или вовсе не используются.

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

26. Отсутствие лишней анимации. Flash используется по минимуму или вовсе не используется.

27. Отсутствие нагромождения элементов. Элементы и их блоки чередуются с пустым пространством; нет чувства нагромождения, пестроты на страницах.

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

29. Подстройка курсора под «кликабельное/некликабельное». При наведении на кликабельные элементы иконка курсора «стрелка» меняется на иконку «рука». При наведении на некликабельные элементы курсор не меняется.

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

31. Пояснения для деактивированных элементов. При наведении на неактивную кнопку или ссылку появляется краткое пояснение, почему кнопка/ссылка неактивна.

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

33. Соблюдение F-паттерна сканирования. Более продвинутый уровень – расположение наиболее важных элементов сайта (УТП, строка поиска, контакты, подзаголовки статей) на странице по схеме в виде буквы F. Именно так скользит взгляд пользователя, согласно многочисленным исследованиям. Самое заметное место – верхний левый угол страницы.

34. Продуманное расположение блоков. Их располагаем на первом экране таким образом, чтобы посетитель видел, что ниже тоже есть что-то интересное. В этом случае посетитель прокрутит страницу вниз. Если же, к примеру, разместить по краю первого экрана пустую полосу, посетитель решит, что ниже ничего нет.

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

Кнопки

36. «Честные» кнопки. Стандартный функционал любой кнопки – выполнение какого-либо действия, а не переход на другую страницу, если кнопка явно этого не подразумевает.

37. Удобство клика по кнопке. Кликабельна сама кнопка, а не надпись на ней. Можно также сделать кликабельной небольшое пространство вплотную к ней (но не в том случае, если рядом расположена другая кнопка).

38. Четкий однозначный CTA. Текст на кнопке говорит о действии, которое будет совершено при клике. Оптимально это глагол в инфинитивной форме (купить, заказать, скачать, продолжить оформление). Он конкретен, информативен и не допускает различных толкований. Плохо – кнопки с названиями:

  • «Продолжить» (Что подразумевается под «Продолжить»? Что произойдет по нажатию кнопки?).
  • «Назад» (Куда именно назад? Пользователь уже может не помнить, что было на предыдущей странице).
  • «Дальше», «Готово» и тому подобными.

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

Ссылки

40. «Честные» ссылки. Стандартный функционал обычной ссылки – переход на другую страницу или открытие другой страницы в новой вкладке, но не запуск какого-либо действия.

41. Стандартизация взаимодействия. Все ссылки оформлены в привычном посетителю стиле – синим цветом, подчеркнутые, курсор при наведении на ссылку меняет свой вид на кликабельный (иконка руки). После клика ссылка меняет свой цвет (стандарт – фиолетовый).

42. Заметные отличия «особых» ссылок. Если ссылка предусматривает разворачивание скрытого контента, а не переход на другую страницу/перезагрузку существующей, она оформлена пунктирным подчеркиванием, дополнительно можно рядом можно добавить иконку треугольника. Ссылка на скачивание файла тоже отличается от обычной ссылки – в ней есть слово «скачать»; указаны размер скачиваемого файла и его формат.

Читайте также:  Как изменить стартовую заставку в Windows 10?

43. Анкорная или хотя бы человекопонятная ссылка. В тексте ссылки явно указывается объект, на который ведет ссылка (название статьи, товара). То есть пользователь точно знает, что он открывает по ссылке.

44. Удобство клика по ссылке. Текст ссылки достаточно длинный, чтобы посетитель мог легко по ней кликнуть (к примеру, ссылка с анкором «тут» не слишком удобна).

Выводы

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

Подпишись на рассылку дайджеста новостей от Webline Promotion

Email*Подписаться на рассылку Предоставлено SendPulse

Тепловые карты («Карта кликов» , , , статистика страниц Google Analytics и другие аналоги)

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

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

ПЛЮСЫ:

  • возможность оценить кликабельность элементов страницы, в т. ч. для тех из них, которые не являются ссылками.

МИНУСЫ:

  • необходим опыт в интерпретации данных для получения корректных выводов;
  • риск ошибочных выводов при наличии на странице динамического контента.

Важно понимать, что анализ юзабилити бесполезен без внедрения корректировок и их тестирования. Необходимо измерять динамику основных параметров, оценивать достижение значимых для ресурса целей. Например, можно тестировать внесенные на сайт изменения (по сравнению с исходными решениями) посредством сервиса Эксперимент Google Analytics. Так, в примере отчета ниже, мы можем увидеть статистику по двум вариантам:

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

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

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

Григорий Загребельный, руководитель отдела web-аналитики Ingate Digital Agency

Ошибки дизайна

1. Непривычное расположение элементов на странице

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

2. Отступы

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

3. Пространство страницы

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

4. Визуальный шум

Читайте также:  Huawei Honor 4C – обновление и прошивка

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

5. Читаемый шрифт

Текст должен быть читаемым. Поэтому следует обратить внимание на цвет шрифта, удобство чтения и расположение текста относительно элементов. Цветовая гамма должна быть подобрана таким образом, чтобы у посетителя не вытекали глаза (никакого прописного шрифта цвета фуксии на зеленом фоне).

Так же не буду сейчас разводить холивар на тему использования шрифта с засечками или рубленого, но всё же упомяну, что согласно общепризнанным нормам, шрифтом с засечками должны быть оформлены все заголовки и крупные элементы на странице, а рубленым шрифтом – основной текст. И НИКАКОГО КАПСА !

полей ввода данных

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

7. Выделение ссылок

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

8. Подпись изображений

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

Анализ юзабилити категорий товаров интернет-магазина

  1. Оптимальное число товаров на странице, примерно 15-20.
  2. Есть возможность самостоятельно выбрать желаемое количество товаров, отображаемое на одной странице.

     

  3. Разделы с акционными, популярными, новыми товарами т.п.
  4. Обязательные данные о товаре (фотография, название, стоимость, значок распродажи, если предусмотрен и т.п., CTA-кнопка “Купить”).

Чек-лист для проверки юзабилити фильтров

  1. Пользователю предоставляется возможность выбрать несколько параметров фильтрации и только после этого показать результат.
  2. Заметное расположение кнопки “Показать” или “Применить” условия фильтрации.
  3. Синхронизация взаимозависимых фильтров за минимальное время без перезагрузки.
  4. При выборе фильтров не допускать нулевого результата (фильтры, после применения которых отсутствуют результаты, должны быть неактивны для выбора).

     

  5. Пользователю видно число результатов от примененных фильтров.
  6. Адрес страницы динамически изменяется при выборе фильтров.
  7. Должна быть кнопка быстрого сброса фильтров и возврат страницы в исходный вид.

Корректность сортировки

  1. В начале располагаются “Хиты продаж”, а товары, которых нет в наличии, в самом конце перечня.
  2. Есть возможность создать индивидуальную сортировку (например, от самого дешевого, по популярности и т.д.). 
  3. Пользователь должен видеть, какой способ сортировки он сейчас использует.

Связь юзабилити сайта и психологии пользователей

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

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

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

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

← Поделиться с друзьями !