Артем Охрей, seo-аудитор, веб-разработчик

21.11.2018 в 15:34

Как применять эвристики Нильсена для улучшения юзабилити своего сайта

15 0

Якоб Нильсен – это один из основателей компании Nielsen Norman Group, признанный эксперт в области юзабилити. В 1990 году он сформулировал 10 эвристик – общих правил, которым должен соответствовать любой пользовательский интерфейс для эффективной и комфортной работы. Несмотря на то, что прошло уже почти три десятилетия, эти рекомендации до сих пор актуальны в различных сферах, в том числе и в разработке сайтов.

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

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

1. Информированность пользователя о состоянии системы

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

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

Если пользователь совершил какое-либо действие, например, отправил сообщение, сделал заказ или оставил контактные данные, но не получил никакого ответа, это вводит его в недоумение, а то и в панику: все ли было сделано правильно? Вдруг я где-то ошибся при вводе, на сайт закралась неполадка или магазин вообще не работает?

Следите за тем, чтобы сайт уведомлял о текущем статусе, например: «Ваше сообщение отправлено! Мы ответим вам в ближайшее время»; «Заказ отправлен! Наш менеджер свяжется с вами в ближайшие 10 минут и уточнит детали покупки».

Другой пример удачного индикатора статуса – сообщение о загрузке файла на Google Drive:

2. Сходство системы с реальным миром

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

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

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

3. Свобода действий и возможность отмены действия

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

Что нужно проверить? При работе с сайтом ошибочные действия практически неизбежны, и пользователям всегда нужно давать возможность «вернуть как было».

  • На сайте есть форма комментирования? Убедитесь, что есть и возможность отредактировать ошибки в комментарии или вовсе удалить его.
  • Пользователь заполняет форму заказа, где может случайно указать неверный адрес или телефон? Добавьте кнопку «Назад», которая позволит все исправить, не вводя остальные данные заново.
  • Внедряете функцию удаления профиля? Обеспечьте возможность в течение некоторого времени восстановить аккаунт, если пользователь передумал и т.д.

Пример функции редактирования сообщения на форуме

4. Единообразие и стандартизация

Не путайте пользователя, описывая разными словами одни и те же вещи, ситуации, действия. Элементы системы должны соответствовать единому стандарту.

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

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

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

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

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

  • В имени пользователя при регистрации допускаются английские буквы и цифры, но не разрешены кириллица и знаки препинания? Напишите об этом рядом с полем или во всплывающей подсказке.
  • Телефон нужно вводить, начиная с +380? Укажите эти символы прямо в поле ввода по умолчанию, или добавьте рядом с полем образец номера, записанного правильно.
  • Если требуется ввести адрес, то рационально будет сделать выбор страны и города в формате выпадающего списка: так пользователь точно не ошибется при вводе.

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

6. Максимум информации на виду, а не в памяти пользователя

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

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

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

Другой интересный пример – выбор шрифта при редактировании текста: будет гораздо удобнее, если пункты выпадающего меню будут сразу отображены нужным шрифтом, как в Microsoft Word, а не просто содержать его название.

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

7. Гибкость и удобство использования

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

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

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

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

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

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

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

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

Пример громоздкой формы, из которой без особого ущерба можно удалить многие поля

9. Распознавание и решение проблем

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

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

Пример удачно оформленной страницы ошибки 404

10. Наличие помощи и справочных материалов

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

Что нужно проверить? Наиболее популярный формат справочной информации на современных сайтах – всплывающие подсказки, о которых я уже упоминал в пункте 5. Однако, порой бывает необходим отдельный справочный раздел. Важно не перегружать его информацией, а также делать доступными ссылки на справку, чтобы пользователь мог легко ознакомиться с нужной информацией.

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

Подводя итог

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

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

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

КОММЕНТИРОВАТЬ
ВОЙТИ
  • Facebook
  • Twitter
  • Google