Как сделать сайт или продукт действительно удобным — Usability

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

Термин “юзабилити” (usability — удобство использования) заменил устаревшую формулировку “дружественный к пользователю” (user-friendly) в начале 1990-х. Путь к сегодняшнему пониманию термина был непростым. Были разные подходы: одни смотрели с точки зрения самого продукта (например, эргономичный дизайн — изогнутая клавиатура), другие — со стороны пользователя (насколько комфортно, сложно или раздражающе его использование), третьи — с точки зрения производительности пользователя (насколько легко использовать продукт в реальной жизни).

Юзабилити — это про простоту доступа и/или использования продукта или сайта. Это поддисциплина в области проектирования пользовательского опыта (UX Design — User Experience Design, проектирование пользовательского опыта). Хотя раньше UX и юзабилити использовали как синонимы, сегодня важно понимать: юзабилити — важный, но не единственный элемент UX. Её можно измерить.

Дизайн нельзя назвать просто «удобным» или «неудобным». Его юзабилити определяется комбинацией: его фичами, самим пользователем, его задачами и условиями выполнения этих задач. Удобный интерфейс даёт три ключевых результата:

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

Это — не полный список требований к юзабилити. Например, удобный интерфейс должен быть устойчив к ошибкам.
Юзабилити можно измерять на всех этапах разработки — от wireframe (каркасных схем) до финального продукта. Тестирование можно проводить как на бумаге, так и удалённо, используя более проработанные прототипы.

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

При оценке юзабилити нужно учитывать пользователя на каждом этапе. Если бы мы проектировали не сайт, а, скажем, мышку, она должна была бы соответствовать стандартам (например, иметь маркировку “CE” — Conformité Européenne). Для сайта это проще — можно сравнить с конкурентами. Давайте посмотрим на такой пример:

Наш сайт

Среднее время до кнопки “Купить”: 294 секунды
Среднее время для возвращающихся пользователей: 209 секунд
18% пользователей купили билет после перехода на лендинг
42% не прошли дальше лендинга

Happy Huzzah’s Getcha There, Inc.

Среднее время до кнопки “Купить”: 198 секунд
Среднее время для возвращающихся пользователей: 135 секунд
32% пользователей купили билет после лендинга
12% остались только на лендинге
Эти метрики говорят сами за себя. Нам стоит изучить, что делает “Happy Huzzah’s Getcha There, Inc.”, — потому что у них явно всё работает лучше.

Помимо самого контента, для юзабилити важны аспекты веб-разработки и дизайна. Основные из них:
Server (Сервер)

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

• Speed (Скорость) — Google учитывает юзабилити при ранжировании. Время загрузки страницы — один из факторов SEO (Search Engine Optimization — поисковая оптимизация). Если сайт грузится долго, пользователи теряют интерес. Сервер влияет на это напрямую — через свою производительность, специализацию и другие характеристики. Конечно, не только сервер влияет на скорость: веб-дизайнер тоже может замедлить загрузку, если, например, не оптимизирует изображения.
• Downtime (Время простоя) — Когда сервер не работает, сайт полностью недоступен. У всех бывают сбои, но чем реже — тем лучше. Надёжный сервер = лучше пользовательский опыт. Один неудачный опыт пользователь может простить. Два — скорее всего, уйдёт навсегда.

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

• Используйте ALT tags (теги ALT) — они описывают изображение для поисковых систем и помогают тем, кто использует screen reader (программы для чтения с экрана — например, для слабовидящих пользователей).
• 404 Not Found Page (Страница 404) — Сломанные ссылки — обычное дело, особенно на больших сайтах. Даже если вы регулярно всё проверяете, нужна хорошо оформленная страница 404. Она должна помочь пользователю продолжить работу с сайтом, а не выглядеть как обрыв эскалатора в пустоту. Дефолтная 404 отпугивает. Хороший дизайнер об этом не забывает. Внимание к мелочам — большая редкость, но очень ценная.

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

• Размер и цвет шрифта — Шрифт должен быть читаемым. Высокий контраст с фоном и достаточно крупный размер. Если у вас есть пожилая аудитория — увеличьте шрифт.
• Брендинг — Логотип компании помогает пользователю понять, где он находится. Согласно отслеживанию движений глаз, лучше всего размещать логотип в верхнем левом углу экрана — туда первым делом смотрят те, кто читает слева направо.
• Цвета макета — Цвета должны быть согласованы между собой, поддерживать визуальный стиль бренда, быть читаемыми. Также цвета часто помогают создать иерархию информации.
• Навигация — Чтобы пользователь получил максимум от сайта, он должен легко перейти из точки A (вход) в точку B (цель). Для этого нужна понятная навигация: меню, ссылки, поиск — особенно для больших сайтов.
• Контент — Дизайнер может не писать текст сам, но должен правильно его оформить:
• Заголовки — Разделяйте контент на логические блоки, используйте заголовки и подзаголовки. Важно задать и соблюдать единый стиль на всём сайте.

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

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

Вот список некоторых инструментов:

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

Pingdom — даёт информацию о скорости отклика сайта.

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

Как мы уже видели выше, дизайнеры часто путаются в различиях между юзабилити и более широким понятием UX. Вот основные области, которые входят в понятие пользовательского опыта (по данным Usability, 2014):

• Usability (Юзабилити) — оценка того, насколько пользователь может зайти на сайт, легко им воспользоваться и выполнить нужное действие. Мы проектируем не просто страницы, а поток взаимодействия (flow), и должны учитывать это при разработке.
• Полезный контент — сайт должен содержать достаточно информации, оформленной так, чтобы пользователь мог принимать обоснованные решения. Здесь стоит помнить про Закон Хика (Hick’s Law): упрощайте интерфейс, избегайте избыточности.
• Desirable/Pleasurable Content (Желательный / приятный контент) — лучший UX возникает, когда пользователь эмоционально вовлечён. Это значит — не только полезный и удобный интерфейс, но и такой, который вызывает эмоциональную связь. Эмоциональный дизайн — огромная часть UX. Например, сайт с ежедневными советами по английской грамматике может быть полезным. Но если эти советы ещё и забавные — пользователь не просто запомнит правило, но и вернётся снова.
• Доступность — для людей с различными видами инвалидности интернет может быть источником фрустрации. Существуют стандарты доступности, которым сайт должен соответствовать: от слабовидящих до людей с нарушениями координации или обучаемости. Продуманный подход позволяет создать полноценный пользовательский опыт для всех.
• Credibility (Доверие) — доверие к сайту тоже влияет на UX. Пользователи беспокоятся о безопасности и конфиденциальности. Учитывая это при проектировании (например, демонстрируя значки безопасности, публикуя политику конфиденциальности), можно повысить доверие к сайту.

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

Юзабилити — это про то, насколько легко пользователь взаимодействует с сайтом или продуктом. Она входит в область UX-дизайна (User Experience Design — проектирование пользовательского опыта), но не охватывает весь UX.
При проектировании юзабилити мы, дизайнеры, должны учитывать три ключевых момента:

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

При оценке юзабилити сайта важно учитывать весь контекст: от доступности и полезности контента до доверия и удовольствия от использования. Это значит — думать наперёд. Кто ваши пользователи? Могут ли они с трудом читать ваш текст? Можно ли вызвать у них улыбку, добавив немного юмора? Например, формат edutainment (education + entertainment, обучение через развлечение) отлично работает при обучении.

Пользователь должен чувствовать себя в безопасности. Это важно.

Также не стоит забывать о технической стороне: найдите надёжный сервер с хорошей скоростью загрузки. На уровне HTML обязательно используйте ALT-теги и продумайте хорошую страницу на случай ошибок (404).

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

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

Тогда приглашаем на курс «Полное погружение в продакт-менеджмент»!
Курс доступен как в индивидуальном, так и в корпоративном формате.

На курсе вы или ваша команда:

• Научитесь запускать внутренние и внешние продукты и управлять ими
• Улучшите метрики существующего продукта
• На практике систематизируете свои знания и освоите все аспекты продакт-менеджмента

Что ждать от курса:

• 30 уроков в записи
• 17 лайв-уроков с экспертами
• 21 домашнее задание
• 9 практических заданий
• 2 DEMO-записи: JTBD и глубинного интервью
• 12 бонусных уроков
• 20+ топ-спикеров из Product Lab, Яндекс, Сбер, VK, Ростелеком
• 10 индивидуальных встреч с экспертом-трекером
• 20+ полезных шаблонов для управления продуктом