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

Содержание

Юзабилити сайта
Что такое юзабилити
Юзабилити vs продукт, пользователи, мотивов
Польза от улучшения юзабилити сайта
Какие выгоды получают пользователи, сотрудники,
Этапы проверки
Как измеряется юзабилити?
10 базовых принципов юзабилити Якоба Нильсена
1. Видимость состояния системы
2. Совпадение между системой и реальностью
3. Свобода пользователя
4. Согласованность и стандарты
5. Предотвращение ошибок
6. Распознавание вместо запоминания
7. Гибкость и эффективность
8. Минималистичный и эстетичный дизайн
9. Помощь с ошибками
10. Доступ к документации
Как проверить юзабилити на сайте
Тестирования дизайна и структуры сайта
Тестирование функциональности сайта
Анализ поведения пользователей по показателям статистики
Проведение опросов и интервью с фокус-группой
Вы можете провести исследование юзабилити по следующему
Анализ результатов и принятие решений о необходимости
Основные ошибки юзабилити
Как улучшить юзабилити сайта
Улучшение технических параметров сайта
Скорость загрузки страниц
Адаптивность
Кроссбраузерность
Мобильная версия
Безопасность
SEO-оптимизация
Упрощение схемы совершения целевых действий
Регистрация должна быть простой и быстрой
Упростите форму оформления заказа
Обратная связь
Дизайн сайта
Навигация
Шапка
Хлебные крошки
Правило Фиттса
Контент
Распределение контента по страницам
Юзабилити-аудит сайта: Чек-лист для проверки юзабилити

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

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

Что такое юзабилити

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

Юзабилити часто путают с пользовательским опытом (UX), но это разные вещи. Юзабилити - это как раз характеристика удобства использования, которая основана на опыте пользователя.

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

“Юзабилити” чаще всего говорят по отношению к тому, что связано с компьютерами и мобильным устройствами. Более материальный термин “Эргономичность”, говорят в контексте дизайна продукта, включая корпус, органы управления и т. п.

Стандарт ISO 9241–11 дает следующее определение юзабилити:

«Юзабилити — степень, с которой продукт может быть использован определёнными пользователями при определённом контексте использования для достижения определённых целей с должной эффективностью, продуктивностью и удовлетворённостью».

Юзабилити - свойство продукта, которое определяет, насколько он удобен и понятен посетителям. Неудобство или непонятность интерфейса – это “юзабилити-проблемы”. Например, если посетители просто не знают куда нажать/кликнуть, это точно проблемы с юзабилити.

Юзабилити vs продукт, пользователи, мотивов

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

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

Польза от улучшения юзабилити сайта

Юзабилити помогает достичь таких целей:

• Посещаемость сайта. Чтобы увеличить прибыль от сайта, нужно привлекать больше посетителей. Если сайт неудобный или непонятный, они просто уйдут к конкурентам.
• Возврат посетителей - чем больше людей возвращается и совершает нужное действие, тем меньше мы тратим на маркетинг, на продвижение ресурса. Чтобы привлекать и удерживать, нужно работать над разработкой интерфейса и навигации сайта.
• Удобство играет ключевую роль в том, сколько времени на нем проведут посетители и сколько страниц сайта или блога просмотрят.
• Поведенческие факторы, такие как время, проведенное на сайте, процент отказов, глубина просмотра и процент возвращений, влияют на ранжирование интернет-ресурса в поисковых системах. Если сайт или блог неудобный, посетители с него быстро уходят и поисковые системы принимают это во внимание при определении позиции ресурса в выдаче
• Конверсия. Чтобы увеличить прибыль для бизнеса, можно тратить много денег на рекламу и привлекать к ресурсу новых посетителей, но если сайт неудобный и сложный, они правы - уйдут к конкурентам. Конверсия - сколько посетителей совершили желаемое действие (оставили заявку, сделали покупку). Чем выше конверсия, тем меньше средств тратится на привлечение потенциальных клиентов - при конверсии 1% на привлечение одного клиента уйдет столько же денег, сколько на рекламу, а при конверсии 10% затраты на привлечение клиента снижаются в 10 раз.
• Снижение стоимости одной заявки. Оптимизация структуры сайта, навигации, процесса покупки и удобства использования, повышает конверсию. Это способствует снижению отказов, что в свою очередь снижает общие затраты на привлечение нужных клиентов.
• Снижение расходов на поддержку: Важно именно то, что благодаря юзабилити, посетители самостоятельно достигают своих целей, не обращаются за помощью к сотрудникам компании, не тратят их рабочее время, а бизнес - деньги.

Какие выгоды получают пользователи, сотрудники, компания

Следствие улучшения юзабилити - выгоды. Рассмотрим их с коммерческой точки зрения.

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

В информационных системах компании улучшение юзабилити:

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

Этапы проверки

Проверка юзабилити производится в несколько этапов:

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

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

Как измеряется юзабилити?

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

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

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

10 базовых принципов юзабилити Якоба Нильсена

При создании удобных сайтов рекомендуется придерживаться 10 основных принципов юзабилити, которые сформулировал в 80-х годах XX века Якоб Нильсен (Jakob Nielsen) основатель компании «Nielsen Norman Group». Эти полезные принципы стали основой современного юзабилити, сегодня ими руководствуются разработчики и UX/UI дизайнеры по всему миру.

1. Видимость состояния системы

• Правило первое, видимость актуального состояния системы: когда посетители сайта открывают страницу, он сразу видят, какие вкладки интерфейса активны, а какие нет. Например, на странице управления профилем в социальных сетях, сразу видно, какие сведенья уже заполнены, а какие еще нет. При просмотре ленты новостей в социальных сетях можно видеть количество не прочитанных сообщений или новых лайков и комментариев к своим публикациям, уведомлений и не прочитанных статей.
• Обратная связь после каждого действия: при отправке сообщения, пользователь видит в интерфейсе уведомление о том, что оно отправлено. После регистрации на сайте предлагается проверить свой почтовый ящик и перейти по ссылке для активации.
• Показываем каждое действие: после того, как заполнена форма, видны все введенные данные. При оформлении заказа - выбранное и общая стоимость покупки.
• Знание того, что происходит: при покупке, видимость в интерфейсе статуса своего заказа (оплачен, отправлен, доставлен).
• Беспокойство у пользователей: когда они не могут найти информацию о своем заказе, когда они не получают уведомления об изменении состояния своего заказа. Если невозможно войти в свой аккаунт.

2. Совпадение между системой и реальностью

• Правило совпадения между системой и ожиданиями: Все должно быть интуитивно понятно. Знаки и символы - похожи на те, которые используем в повседневной жизни.
• Язык: Сайт должен использовать простой язык, избегая специфической лексики и сложных оборотов. Вместо «Провести транзакцию» можно написать «Оплатить» Если произошел сбой, не нужно сообщать о технических проблемах. Достаточно написать, что ресурс временно недоступен или что скоро все будет работать.
• Преимущества: Помимо перечисления главных функций продукта, следует указать, какие преимущества получают от его использования. Например, «наушники с улучшенным качеством звука» или «наушники, которые обеспечивают комфорт при длительном использовании».
• Задачи: Каждая страница должна решать конкретные задачи пользователя. Например, страница с описанием продукта должна содержать нужную информацию о его характеристиках, стоимости, наличии и способах доставки.

3. Свобода пользователя

• Контроль процесса: Например, «Сохранить» в текстовом редакторе. В интернет-магазине при оформлении заказа можно контролировать процесс, выбирая способ доставки и оплаты.
• Возврат на предыдущие этапы: «Назад» в браузере. При покупке билетов можно вернуться на предыдущий этап и выбрать другую дату или место.
• Отмена: Если вы случайно нажали «Удалить», вы можете нажать на кнопку «Вернуть» и файл будет восстановлен. Отмена последнего действия в текстовом редакторе или удаление последнего символа в поле ввода. Если при оформлении заказа была допущена ошибка, можно отменить это действие и начать все заново.
• Исправление своих ошибок и сообщений: Функция редактирования сообщений на многих веб-сайтах и приложениях. Если пользователь отправил не тому получателю, он сможет исправиться, отправив повторно или удалив его.

4. Согласованность и стандарты

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

5. Предотвращение ошибок

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

6. Распознавание вместо запоминания

• Интуитивное взаимодействие: Не стоит заставлять пользователя много думать. Например, если он голоден, то взаимодействие должно быть интуитивным, а описание очень доступным.
• Структурирование информации: Если ее очень много, лучше разбейте на блоки и разместите на одной странице. Пользователь не должен переходить на другие страницы для получения дополнительных данных и держать в памяти уже имеющиеся. В карточке товара разместите фотографию, описание, характеристики, стоимость, условия доставки и наличие товара.
• Демонстрация важного: Представление ключевых моментов на одной странице для быстрого ознакомления и пользования. На главной странице Яндекса есть набор популярных запросов и опций, которые облегчают поиск и навигацию.
• Узнаваемый интерфейс: Логотип и стиль ВК помогают пользователю разобраться в навигации и взаимодействии с сайтом.
• Значимость мелких деталей в восприятии интерфейса: иконки заменяют текст, очень экономят место и облегчают нашу жизнь. Стоит учесть, что метафоры на иконках не всегда очевидны.

7. Гибкость и эффективность

• Гибкость: Страницы адаптивного сайта подстраиваются под различные устройства и предпочтения. Приложение, которое пользователь может использовать как в портретной, так и в альбомной ориентации.
• Эффективность: Предоставляется несколько способов достижения цели, ускоряя и упрощая процесс. Сервисы онлайн-бронирования предлагают клиентам различные варианты маршрутов и дает возможность сравнить цены. В онлайн-магазинах есть функция быстрого нахождения товара по цене и популярности.
• Простота: Интерфейс понятен и удобен для всех категорий пользователей. Интерфейсы социальных сетей имеет простой и понятный дизайн, не требующий обучения. Интуитивный интерфейс большинства мобильных приложений позволяет быстро находить нужную информацию, а значит и выполнять необходимые действия.
• Настройка под индивидуальные потребности каждого пользователя: Например, лента новостей в социальных сетях учитывает интересы каждого и предлагает соответствующий контент. Cайт, разрешает настроить внешний вид и даже добавить функционал под свои предпочтения, как новичкам, так и опытным пользователям.
• Выбор: Предоставлять возможность включать/выключать различные функции и опции. Платформы потокового видео, предлагают нескольких пакетов услуг с разным набором функций и ценой. В настройках электронной почты можно найти темы оформления и правила для уведомлений.
• Ускорители: Будет полезна функция умного поиска на поисковике или сайте автоматически предлагает наиболее подходящие результаты на основе введенных ключевых слов.
• Настройка: Обеспечить возможность настройки действий под индивидуальные предпочтения пользователя. Видео сервисы предлагает гибкие настройки и подбор контента, позволяя выбирать качество видео, озвучку и даже субтитры.

8. Минималистичный и эстетичный дизайн

• Минималистичный дизайн: Отсутствие лишних элементов позволяет сразу увидеть главное, концентрирует пользователя на самой важной информации или действиях.
• Эстетичный дизайн: Используются спокойные и приятные цвета, простые и чистые линии, а не сложные и запутанные формы, кричащие оттенки - все, что может раздражать или отвлекать внимание посетителя от контента. Все гармонично, приятно сочетается друг с другом. Сайт оценивают, как привлекательный.

9. Помощь с ошибками

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

10. Доступ к документации

• Правильно, когда при работе нет потребности в обращении к документации, однако если такая необходимость возникает, следует предоставить доступ. Это помогает человеку разобраться со сложными моментами и позволяет самостоятельно решать, нужно ли еще что-либо.
• Справочная информация доступна, структурированной, краткой, понятной посетителям сайта. Обычно ее размещают в разделах “Помощь”, “FAQ”, “Вопрос-ответ” и других.
• Около 10% пользователей читают справочные материалы. В большинстве случаев система предлагает пройти обучение при первом взаимодействии. Должен быть выбор: проходить обучение или нет. Доступ к справочным материалам должен быть всегда легким, даже если посетители ими пользуются редко.
• Сложные действия. Когда необходимо выполнить что-то сложное, продумать подсказки. При этом предусмотрена возможность отказаться от них.
• Может оказаться недостаточно документации. Для этого на сайте можно внедрить онлайн-чат, добавить кнопку для звонка или форму для связи. Здесь посетитель сможет задавать вопросы, решать возникающие проблемы, оставлять пожелания.

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

Существуют два разных подхода к улучшению пользовательского опыта на сайте:

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

Оба подхода включают в себя оценку:

• структуры;
• дизайна;
• функциональности;
• анализ поведения на основе показателей статистики.

Тестирования дизайна и структуры сайта

В процессе его выполнения необходимо обратить внимание на соблюдение основных принципов юзабилити:

• Соответствие ожиданиям пользователей: Сайт должен предлагать решения для удовлетворения потребностей выбранной целевой аудитории. Предлагаемые решения - соответствовать мотивам и критериям выбора пользователей сайта. ь
• Простота: Выглядит просто, поэтому легко находить нужное и выполнять действия.
• Удобство навигации: Когда она логичная, для перемещения между страницами и поиска тратится минимум времени..
• Дизайн и структура: продумано таким образом, что все легко различимо и взаимосвязано.
• Читаемость текста и иконок: Шрифты четкие и легко читаемые. Размер текста достаточен для комфортного чтения. Иконки узнаваемы, привычны, хорошо распознаются. Графические элементы интерфейса уместны и не перегружают страницу.
• Цвета и контрасты: Цвета и контрасты подобраны таким образом, чтобы не вызывать дискомфорта, точно соответствуют нужной тематике и привлекают внимание к самому важному.
• Обратная связь и отзывы: Обязательно нужна обратная связь от пользователей, чтобы использовать ее для улучшения юзабилити.
• Адаптивность: корректно отображается на различных устройствах и разрешениях экрана.
• Скорость загрузки: быстрая загрузка чтобы не терять пользователей из-за долгого ожидания.

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

Тестирование функциональности сайта

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

В рамках данного этапа проверяют:

• Основная навигация: Тестировщик проверяет, насколько просто и быстро пользователь может перемещаться по основным разделам. На сайте электронной коммерции обязательны разделы “Главная”, “Каталог товаров”, “Корзина” и “Профиль пользователя”.
• Регистрация и авторизация: Проверяется, как пользователь регистрируется на сайте и авторизуется. Процессы простые, безопасные и требуют минимум данных.
• Личный кабинет: Тестируется юзабилити личного кабинета пользователя, функциональность всех его элементов. Доступна информация о пользователе, история заказов, настройки, возможность выхода из системы.
• Обратная связь: Проверяется наличие доступной и простой формы обратной связи сайта, ее работоспособность (возможность выбора типа обращения и прикрепления файлов).
• Поиск: Тестируют и оценивают возможности поиска, включая поиск на сайте по ключевым словам и фразам. Поиск доступен на любой странице сайта.
• Фильтры и сортировки: Проверяются возможности управления результатами поиска.
• Форма заказа: Тестируется форма заказа клиентом товаров или услуг, проверяется правильность работы всех ее полей ввода данных о покупателе и адресе доставки.
• Уведомления и рассылки: Особенно проверяется функциональность системы уведомлений и рассылок. Система уведомлений удобна для пользователя, дает управлять настройками уведомлений и отписками.
• Мобильная версия: Контент корректно отображаться на мобильных устройствах, с сохранением функциональности основных элементов.
• Безопасность: Проверяется защищенность от взлома и возможность утечки личных данных пользователей.

Анализ поведения пользователей по показателям статистики

В процессе анализа данные о поведении пользователей собираются, оцениваются с помощью сервисов и инструментов веб-аналитики: Яндекс метрика, Вебвизор Яндекса, Google analytics и т.п. Это позволяет узнать, какие части сайта наиболее популярны, а какие не посещаются совсем.

• Просмотры - это количество раз, когда открыли страницу. Метрика помогает определить, какие из них наиболее популярны.
• Время, проведенное на сайте (TSS, Time Spent on Site). Позволяет по времени оценить, насколько интересен контент, предпочтения по страницам.
• Отказы (BR, Bounce Rate). Процент посетителей, которые закрывают целевую страницу без совершения каких-либо действий. Высокое значение по отказам указывает на то, что страница неинтересна или сложна для понимания.
• Глубина просмотра (PPV, PagesPer Visit). Количество страниц, которые просматривают за одно посещение. Большой показатель глубины просмотра может указывать на то, что найдена интересная и полезная информация.
• Возврат посетителей (RV, Returning Visitors). Число клиентов, которые посещали сайт за расчетное время несколько раз.

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

Проведение опросов и интервью с фокус-группой

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

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

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

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

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

• Как вы считаете, удобно ли расположены элементы навигации?
• Да Нет Не знаю

• Возникали ли у вас трудности?
• Да Нет Затрудняюсь ответить

• Легко ли вы нашли то, что вас интересовало?
• Да Нет Затрудняюсь ответить

• Напишите, что вам понравилось больше всего?

Вы можете провести исследование юзабилити по следующему алгоритму:

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

Определите конкретный сценарий для участников. Задание может быть таким: “Закажите одежду, обувь для ребенка в возрасте от 5 до 7 лет и футболку для себя. Расскажите, как вы это сделали, и прокомментируйте каждый свой шаг”.

Задайте уточняющие вопросы для получения более подробного ответа. Спросите, “Какие задачи были легкими для выполнения, а какие вызывали трудности?”

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

Анализ результатов, решение о необходимости улучшений

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

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

Основные ошибки юзабилити

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

• Структура сайта: Отсутствие логики или дублирование элементов
• Работа поиска: Незаметный или плохой, неудобный
• Наличие “хлебных крошек”: Их отсутствие или расположение вне зоны видимости
• Страница выбора товаров: Отсутствие подробных описаний товара, услуг или цен
• Корзина и процесс оформления заказа: Человеку предлагается пройти несколько этапов для оформления заказа
• Тексты: Отсутствие абзацев и форматирования, недостоверная информация и отсутствие блоков для выделения важной информации или подзаголовков
• Визуализация: Отсутствие медиаматериалов, замедляющая скорость загрузки сайта и теряющая интерес к изучению информации
• Дизайн интерфейса: Слишком пестрое оформление, содержащее множество отвлекающих деталей, не несущих практической пользы для пользователей
• Скорость загрузки: Ресурс загружается слишком медленно, что может привести к снижению лояльности большинства пользователей
• 404-страница и битые ссылки: Факторы, негативно влияющие на рейтинг сайта
• Адаптивная верстка: Неудобство чтения сайта с мобильных
• Капча: Слишком сложная или неудобная
• Кнопки: Некорректное расположение или размер

Как улучшить юзабилити сайта

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

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

Для того, чтобы повысить юзабилити сайта выполняют следующее:

Улучшение технических параметров сайта

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

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

• Оптимизация изображений: Правильные размеры картинок и фото, форматы без уменьшения качества - JPEG, PNG, или WEB.
• Кэширование: Кэширование позволяет сохранять копии того, что часто используется на стороне пользователя, что уменьшает время загрузки при последующих посещениях.
• Повысить производительности сервера: Убедитесь, что ваш сервер имеет достаточную мощность и пропускную способность для обработки запросов пользователей. Также проверьте, не работает ли на сервере слишком много ненужных процессов, которые могут снижать его производительность.
• Уменьшение “тяжести” загружаемого: Оцените и удалите ненужное: скрипты, стили и шрифты, которые не задействованы. Это поможет уменьшить размер HTML-кода и ускорить загрузку.
• Работайте над пропускной способностью: Обеспечьте достаточную пропускную способность для вашего интернет ресурса, чтобы он мог обрабатывать большое количество запросов без замедления.

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

Адаптивность

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

Простой способ проверки адаптивности - открыть меню разработчика в браузере. Для этого нужно нажать на клавишу F12 или сочетание клавиш Ctrl+Shift+M. После этого появится страница, которую можно просмотреть на различных мобильных устройствах, имитируя различные размеры экрана и типы устройств.

Кроссбраузерность

Сайт должен корректно отображаться и работать во всех популярных браузерах (Chrome, Firefox, Safari, IE, Opera и др.). Это важное требование для удобства пользователей, так как позволяет им работать на любом устройстве и с любым браузером без проблем.

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

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

Безопасность

Сайт должен обеспечивать защиту данных пользователей и предотвращать их кражу. SSL-сертификат обеспечивает безопасность передачи.

SEO-оптимизация

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

Упрощение схемы совершения целевых действий

Регистрация должна быть простой и быстрой

Вот несколько примеров того, как можно упростить форму регистрации:

• Сокращение обязательных полей: Не требуйте от пользователей заполнять все возможные поля. Если посетителю для совершения покупки достаточно указать имя, телефон и адрес доставки, то не стоит требовать заполнения полей “отчество”, “дата рождения” или “резервная электронная почта”.
• Автозаполнение: Многие современные браузеры поддерживают функцию автозаполнения, которая позволяет автоматически выполнить регистрации на основе данных, уже сохраненных в браузере. Это может значительно ускорить процесс регистрации.
• Применение капчи: Капча – это инструмент, который помогает определить, является ли пользователь человеком или ботом. Однако многие пользователи считают капчу раздражающей и отказываются от регистрации, если она присутствует на сайте. Поэтому можно использовать капчу только в тех случаях, когда вы понимаете, что это действительно необходимо.
• Разделение формы на этапы: Если она слишком длинная, большой список можно разделить на несколько этапов. Сначала пользователь может заполнить только основные сведенья, а затем, при необходимости, вернуться и заполнить дополнительные поля.
• Упрощение полей: Определите и добавьте для ввода информации только несколько простых и понятных полей.

Упростите форму оформления заказа

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

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

Обратная связь

Требования к форме обратной связи:

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

Дизайн сайта

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

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

Навигация

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

• Максимальная простота: будьте проще и понятней.
• Быстрый поиск: пользователь предпочитает находить нужное за 2-3 клика.
• Расположение: основные разделы разместите в верхней части экрана или в боковом меню, дублируйте в нижней части.
• Заметность: меню, ссылки, фильтры сделайте заметными и хорошо распознаваемыми.

Шапка

• Информативная шапка: в верхней части нужно разместить название компании, контакты, кнопку “Войти”.
• Контрастные элементы: самое важное выделяйте с помощью разных рамок или цветных кнопок.
• Закрепление шапки: важно быть всегда на виду. Шапка может быть закреплена и даже не исчезать при прокрутке.

"Хлебные крошки"

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

Правило Фиттса

Для определения оптимального размера кнопок пользуются правилом Фиттса, которое гласит о том, что чем больше размер кнопки, тем она удобней. Например, на Ozon и Яндекс Маркет, "Корзина", "Купить" и "Перейти к оформлению" имеют достаточно большой размер, что позволяет быстро и комфортно совершать разные целевые действия.

Контент

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

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

Распределение контента по страницам

Максимально информативная "главная" страница сайта. Кратко и увлекательно расскажите о самом уникальном предложении компании клиентам. Можно разместить контрастные баннеры с новыми привлекательными предложениями, основными преимуществами. Также стоит разместить на главной странице ссылки на основные разделы, выбрав для каждого раздела яркий образ и сопроводив его ниже коротким описанием и ссылкой или кнопкой “Подробнее”. Разместить на главной вовлекающие баннеры, рекламу, акции.

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

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

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

Стоимость eye tracking тестирования юзабилити сайта

Стоимость выполнения работ всегда индивидуальна, зависит от ряда факторов:

• Место: дистанционно или с выездом к заказчику.
• Число человек: Tobii рекомендует 10-30.
• Показатели: количество карт и таблиц в отчете.