Web-studio46.ru

Обучение и образование
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Юзабилити сайта онлайн

Юзабилити сайта онлайн

Чтобы оценить эффективность сделанных обновлений, стоит провести А/Б тестирование. Обратите внимание: чтобы получить корректные данные, важно менять за один раз только один элемент на посадочной странице, а затем анализировать результаты. Так вы будете уверены, что на поведение пользователей на сайте повлияло именно это изменение, а не другие факторы.

Работоспособность сайта

Перед тем, как приступить к анализу оформления сайта и поведения пользователей, убедитесь, что все страницы работают корректно в разных браузерах и на разных типах устройств: в этом помогут отчеты Яндекс.Метрики «Устройства» и «Браузеры». Для этого кликните на иконку «Отчеты по счетчику» рядом с нужным счетчиком и сформируйте их в разделе «Стандартные отчеты» → «Технологии».

Обратите внимание на скорость загрузки страниц: большинство пользователей интернета ожидают мгновенного ответа от сайта. Мы рекомендуем сократить время до загрузки до 5 секунд.

Проверить скорость загрузки страниц можно в отчете Яндекс.Метрики «Время загрузки страниц». Для этого кликните на иконку «Отчеты по счетчику» рядом с нужным счетчиком и сформируйте его в разделе «Стандартные отчеты» → «Мониторинг».

Навигация по сайту

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

    Ключевые разделы меню должны соответствовать основным потребностям пользователя.

Принципы навигации не должны меняться на разных страницах.

Выбирайте точные и конкретные названия для ключевых разделов сайта (например, «Как добраться» будет лучше, чем «Наш офис на карте».

Желательно, чтобы с основного экрана можно было перейти ко всем ключевым разделам сайта.

Группировка разделов меню должна быть произведена по очевидной для конечного пользователя логике: не следует выносить на один уровень общий и частный заголовок, например, «Женская одежда» и «Платья».

Логотип в шапке сайта должен быть кликабельным и вести на главную страницу.

Важные разделы сайта

• Контакты

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

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

• Оплата и доставка

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

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

• Гарантия и обмен

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

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

Элемент «Корзина»

Удобное расположение блока корзины поможет пользователю совершить конверсионное действие.

  1. Необходимо располагать корзину в привычном для пользователей месте (в основном это верхний правый угол сайта).
  2. Корзина должна быть доступна со всех страниц сайта.
  3. Рекомендуется использовать привычные иконки (тележки, корзины и т.д.), контрастного по отношению к фону цвета.
  4. Элемент «Корзина» следует отображать достаточно крупно, чтобы пользователь легко мог найти его при необходимости.
  5. Рекомендуется отображать сумму заказа и количество товаров в корзине.
  6. Для повышения конверсии на сайте можно предложить пользователю перейти в корзину сразу после нажатия на кнопку «Купить»/«Заказат» — например, добавив соответствующие кнопки либо всплывающее окно.

Эффективность работы корзины можно проверить при помощи отчета «Конверсии» Яндекс.Метрики, предварительно настроив цели. Также может помочь «Карта кликов» и «Вебвизор». Чтобы подключить эти инструменты, нужно выбрать их в настройках счётчика — а затем обновить полученный код на всех страницах сайта.

Форма заказа/заявки

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

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

Рекомендации по оформлению формы заказа/заявки:

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

Отмечайте обязательные для заполнения поля звездочками.

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

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

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

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

После внедрения формы заказа на сайт необходимо тщательно протестировать работоспособность формы:

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

Оформление текста

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

Избегайте чрезмерного выделения текста шрифтами (большая часть сайтов строится на основе одного-трех шрифтов), а также «кричащих» цветов фона, текста и изображений.

Качество информации/наполнение сайта

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

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

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

Качество фото и видео на сайте

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

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

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

Мобильная версия сайта

Сегодня 29% всех визитов на сайты совершается с мобильных устройств, а 19% пользователей выходят в интернет только с мобильного или планшета.

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

Подробнее о проверке адаптации сайта для мобильных устройств читайте в разделе «Чек-лист по юзабилити мобильного сайта».

5 бесплатных инструментов для самостоятельного юзабилити-тестирования сайта

Аналитики американской компании Forrester Research выяснили, что около половины сайтов теряет клиентов из-за неудобного дизайна и других недочетов в юзабилити. Только представьте: неудачная форма заказа или некликабельная картинка — и потенциальный покупатель понес деньги конкурентам. Чтобы понять, нравится ли вашим посетителям сайт и удобно ли им делать на нем покупки, проведите юзабилити-тестирование.

Читать еще:  Создание презентации онлайн без регистрации

Что нужно тестировать?

Если сайт уже работает, какие его элементы нужно протестировать станет ясно после аналитики. Реальный пример теста юзабилити компании Imaginary Landscape: из Google-Аналитики видно, что пользователи заходят на страницу с формой обратной связи, но заявку на звонок не отправляют. После юзабилити-тестирования стало понятно, что люди не хотят заполнять такое количество строк. Форму поменяли, количество строк сократили c 11 до 4, после чего конверсия выросла на 140%. Профит.

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

Кроме прочего, тестируют:

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

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

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

1. Инструменты Яндекс Метрики

В рунете из бесплатных инструментов юзабилити-тестирования пока не придумали ничего удобнее и функциональнее счетчиков Яндекс Метрики. Чего стоит один «Вебвизор».

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

Чтобы установить «Вебвизор», авторизуйтесь на Яндекс Метрике и перейдите на вкладку «Добавить счетчик». В «Настройках» скопируйте код счетчика и вставьте на все страницы сайта.

Добавьте HTML-код счетчика на страницы своего сайта

Интерфейс Вебвизора

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

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

Тепловая карта кликов

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

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

2. UsabilityHub

Онлайн-сервис предлагает 5 простых тестов:

  • Five Second Test — тест пяти секунд. Принцип таков: вы загружаете скриншот тестируемой страницы на сайт, участники теста смотрят на нее в течение 5 секунд, после чего дают свою оценку. Можно задавать разные вопросы, например, какой элемент больше всего привлек внимание, что запомнилось, о чем сайт и тому подобное. По завершении вы получите ответы участников теста в полном объеме + автоматически сгенерированное облако часто повторяющихся слов.

1.Загружаем скриншот страницы

2. Задаем участникам вопросы

3. Получаем отчет с ответами

4. Для наглядности изучаем облако

  • Click Test — тест кликов.
    Действия те же, только вместо ответов получаем тепловую карту кликов. По ней мы увидим, что пользователи, к примеру, не жмут на стратегически важную (для нас) кнопку, зато активно кликают картинку. Дополнительно сервис предоставит отчет о количестве кликов и среднем времени щелчка.
  • Question Test — тест вопросов.
    Вы спрашиваете о своем сайте — реальные люди отвечают.
  • Navigation Test — анализ навигации.
    Позволяет понять, насколько удобно пользователям «лазить» по вашему сайту, понятна ли его архитектура и навигация.
  • Preference Test — предпочтение.
    Поможет провести А/В тестирование дизайна сайта, приложения, листовки. Загружаете два варианта дизайна — пользователи выбирают, какой им больше нравится. Все просто и оперативно.

Тепловая карта кликов

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

3. Usabilla

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

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

4. Optimal Workshop

На сервисе доступны такие инструменты:

  • Treejack — тестирование «дерева» сайта.
    Помогает понять, как пользователи ориентируются на вашем сайте, выполняют ли те действия, которые вы от них ждете, или теряются в его дебрях. Для тестирования нужно расписать информационную архитектуру своего сайта в форму Treejack. Звучит страшно, но каждая строка формы подписана, если знаете английский — легко справитесь. Также нужно поставить задачи участникам тестирования, к примеру, найти мобильный телефон на сайте. На выходе получите исчерпывающую статистику в виде таблиц и диаграмм. Бесплатная демо-версия позволяет опросить 10 человек.
  • OptimalSort — тестирование по методу сортировки карточек.
    Помогает выяснить, как пользователь думает, какие принимает решения и как ему проще достичь конечной цели на вашем сайте. Как это работает: все элементы контента сайта «выписывается» в отдельные карточки, а участникам предлагается отсортировать их так, как им было бы понятно и удобно. В результате вы получаете отчеты в виде таблиц, матриц, дендрограмм и понимание ментальной модели ваших пользователей. В бесплатной версии можно протестировать 30 карточек, опросив 10 человек.
  • Chalkmark — опросы, тепловая карта.
    Помогает узнать первое впечатление о дизайне, показывает тепловую карту кликов и анализ первого щелчка. Для тестирования загрузите скриншот страницы, поставьте участникам задачи и ждите результаты в виде карты кликов, цветовой сетки и схемы подсчета количества щелчков.

Результаты тестирования макета сайта с помощью Chalkmark

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

5. Feng-GUI

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

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

Не хотите разбираться в интерфейсах и статистиках англоязычных ресурсов? Идите в народ. К примеру, для оценки дизайна страницы разместите скриншот на revision.ru или подобных площадках, поинтересуйтесь мнением «местных» — web-дизайнеров, разработчиков и других специалистов. Проведите опросы в соцсетях, например, в тематических сообществах, или соберите фокус-группу среди своих знакомых. Для более или менее объективного анализа юзабилити достаточно опросить 5 респондентов (по некоторым данным 8) из своей целевой аудитории.

Читать еще:  Проверить правильность написания текста онлайн бесплатно

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

12 инструментов для оценки юзабилити сайта

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

Онлайн-сервисы для проведения юзабилити-тестирований подойдут компаниям, которые из-за нехватки времени или денег не могут позволить себе услуги UX-лаборатории.

Доступные инструменты для того, чтобы проанализировать юзабилити сайта, есть под рукой у каждого интернет-маркетолога, ведь исследовать поведение пользователей можно с помощью инструментов, входящих в привычные Google Analytics и «Яндекс.Метрику».

«Вебвизор»

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

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

Карта кликов

Это инструмент, который показывает статистику по кликам на всем сайте, конкретной странице или в разделе. «Метрика» подсвечивает нажатия мышкой разными цветами в зависимости от интенсивности.

Данные выгружаются в нескольких вариантах.

«Тепловая карта», в которой теплые цвета (красный, оранжевый, желтый) означают частые клики, а холодные (синий, голубой, зеленый) — редкие.

«Монохромная карта» — карта одного цвета, где насыщенный оттенок означает частые клики.

«Клики по ссылкам и кнопкам» — в этом варианте вы увидите на карте только статистику по этим элементам.

«Карта прозрачности» — страница сайта выглядит так, словно ее затянуло туманом. Точки, в которых сосредоточены клики, проступают сквозь него.

«Карта элементов», на которой отражены все элементы сайта.

Карта скроллинга

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

Аналитика форм

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

Content Experiments

Это инструмент для анализа юзабилити от Google Analytics. С его помощью можно провести бесплатное А/В-тестирование и сравнить эффективность начального и отредактированного варианта страницы.

Кроме сервисов «Яндекса» и Google, есть и другие платные и бесплатные инструменты, с помощью которых можно анализировать поведение пользователя и проводить юзабилити-тесты.

UsabilityHub

Популярная онлайн-платформа для общения дизайнеров, разработчиков, аналитиков и тестировщиков. Эксперты по юзабилити проверяют работу друг друга и зарабатывают рейтинг. Есть бесплатный вариант и подписки за $79, $199 и $396.

Предлагается несколько вариантов тестов.

Five Second Test

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

Click Test

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

Navigation Test

Тест для анализа навигации ресурса.

Preference Test

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

Usabilla

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

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

Feng-GUI

Приложение, в основе которого лежит алгоритм, имитирующий взгляд пользователя в первые пять секунд. Чтобы проанализировать страницу, нужно загрузить скриншот. За $25 в месяц можно сделать25 тестов, еще есть вариант за $50 (50 скринов на3 месяца) и 275 проверок в год за $250.

Ovo Solo

Приложение для работы с респондентами от юзабилити-лаборатории Ovo Studios. Сервис стоимостью $99 записывает видео со звуком в тот момент, когда юзер работает с вашим сайтом или приложением. Чтобы наблюдать за этим в режиме реального времени, на второй компьютер устанавливается бесплатная версия Ovo Solo.

Testograf

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

У Testograf есть бесплатная пробная версия. Если решите пользоваться им постоянно, можно выбрать из разных вариантов: проведение опроса в течение60 дней стоит5 тысяч рублей, а годовая лицензия — от25 до50 тысяч рублей.

Qualarro

Сервис для обратной связи с посетителями сайта. С его помощью можно задать пользователю любой вопрос с вариантами ответа или без.

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

У Qualarro есть бесплатная двухнедельная версия. Месячная подписка — $99.

GTmetrix

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

Ссылки загружаются на главной странице GTmetrix. Бесплатно можно проверить три URL, расширенная версия обойдется в $15, $50 и $150 в месяц.

Заключение

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

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

Главные принципы юзабилити веб-сайта для повышения конверсии

Основные принципы юзабилити: от особенностей дизайна до контента, от интерфейса формы заказа до поиска. Возможности тестирования.

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

Почему важно соблюдать принципы юзабилити сайтов?

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

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

Читать еще:  Презентацию в видео онлайн

Принципы юзабилити web-ресурса

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

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

1. Дизайн — залог доверия к сайту

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

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


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

2. Логичный структурированный контент

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

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

3. Важная информация — в левом углу

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

4. Общение с пользователем

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

Попав на такую страницу 404, пользователь не растеряется и, скорее всего, не сразу покинет ресурс.

5. Отмена действия

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

6. Ненавязчивое предложение помощи

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

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

7. Разговор на понятном языке

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


8. Отказ от резких перемен

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

То же самое относится к веб-дизайну: пользователь не только потратит больше времени, но и разочаруется, заметив, что вместо значка корзины теперь — «Добавить товар», вместо «Каталог» — «Продукция», а привычные объемные кнопки обтекаемой кнопки стали плоскими и рублеными. Потому задумав «перестановку», не шокируйте посетителя — изменения должны быть постепенными и не менять кардинально привычную структуру.

9. Все возможности — на виду

Удачное решение — когда пользователь видит все разделы, в которые может перейти, т.к. в любой момент может быстро сориентироваться, где находится и как вернуться обратно. Если на сайте планируется много контента — резонно предусмотреть горизонтальное верхнее, вертикальное меню (и то, и другое — возможно, с подразделами), а также «подвал». Если речь идет о минималистичной «визитке» или landing page — достаточно только верхнего горизонтального меню.

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

Пример удачной карты сайта

10. Форма регистрации и заказа: чем лаконичнее — тем лучше

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

11. Заметное длинное поле поиска

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

Еще один важный момент — длина поля поиска. Согласно исследованию Якоба Нильсена, в среднем туда вмещается 18 символов, а оптимальная длина — 27 символов. В 90% случаев сюда поместится даже длинный запрос, чтобы пользователь его полностью увидел и исправил при надобности. Для установки нужной ширины используйте относительную единицу «em», равную размеру используемого шрифта.

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

12. Больше свободного пространства

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

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

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

Ссылка на основную публикацию
Adblock
detector