Взаимосвязь юзабилити и UX-дизайна: как улучшить пользовательский опыт?

Определение юзабилити

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

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

В Интернете удобство использования является необходимым условием выживания. Если веб-сайтом сложно пользоваться, люди уходят. Если на домашней странице не указано четко, что предлагает компания и что пользователи могут делать на сайте, люди уходят. Если пользователи теряются на сайте, они уходят. Если информация на веб-сайте трудна для чтения или не отвечает на ключевые вопросы пользователей, они уходят. Заметили здесь закономерность? Не бывает такого, чтобы пользователь читал руководство по веб-сайту или иным образом тратил много времени, пытаясь разобраться в интерфейсе. Доступно множество других веб-сайтов; уход — это первая линия защиты, когда пользователи сталкиваются с трудностями. Вот почему неудобный, сложный в восприятии сайт – это смерть для бизнеса.

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

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

Посетитель должен понимать состояние сайта

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

Говорите с пользователем на одном языке

Сайт должен говорить теми словами и фразами, которые понятны пользователю, а не какими-то странными терминами. Посмотрите на эти два примера. Это каталоги с сайтов BeFree и Uniqlo. На сайте BeFree категории названы привычными словами, и пользователю понятно, где искать, например, футболку.

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

Контроль и свобода действий

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

Стандартизируйте контент

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

Исключите возможность ошибки

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

Не заставляйте пользователя думать

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

Не раздражайте пользователя

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

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

Заключение

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