Эвристика Якоба Нильсена — это 10 правил юзабилити, которые помогают создать удобный дизайн веб-сайта или приложения. Они используются при разработке новых веб-сайтов и при тестировании существующих веб-сайтов, чтобы найти способы улучшить взаимодействие с пользователем.
Правила не являются конкретными рекомендациями и называются «эвристическими» — они дают общие рекомендации по дизайну веб-сайтов. Они были сформулированы Якобом Нильсеном, экспертом в области UX-дизайна.
Если вы будете следовать этим правилам, людям будет проще использовать ваш продукт — будь то покупка продуктов, просмотр веб-сайта или заполнение формы.
В этой статье мы приведем примеры того, как можно применять эти эвристики, и покажем, как они помогают улучшить взаимодействие с пользователем и создавать удобные и увлекательные веб-сайты.
Содержание
- 1 1. Видимость состояния системы
- 2 2. Соответствие между системой и реальным миром
- 3 3. Пользовательский контроль и свобода
- 4 4. Последовательность и стандарты
- 5 5. Предотвращение ошибок
- 6 6. Узнавание, а не память
- 7 7. Гибкость и эффективность использования
- 8 8. Эстетичный и минималистичный дизайн
- 9 9. Помогите пользователям исправить ошибки
- 10 10. Ссылки и документация
- 11 Диплом
1. Видимость состояния системы
Согласно этому правилу, пользователь должен четко видеть, что происходит в приложении или на сайте. Это может быть представлено различными элементами интерфейса: цветами, символами или анимацией.
Представим, что у автомобиля нет спидометра. Вы едете, но не знаете, с какой скоростью вы едете. Согласитесь, это очень неудобно, так как можно получить штраф за превышение скорости. Для того чтобы владелец автомобиля знал скорость его движения, был придуман спидометр.
Возьмем другой пример: пользователь интернет-магазина кладет товар в корзину или система должна сообщить ему об этом, например, должно измениться количество товаров рядом со значком корзины — это будет визуальный сигнал.
Кстати, об удобстве корзины мы рассказывали в нашем гайде.
Таким образом, видимость состояния системы помогает уменьшить путаницу и улучшить взаимодействие с пользователем.
2. Соответствие между системой и реальным миром
Проще говоря, интерфейс сайта должен быть понятным и отражать то, как он работает в реальной жизни.
Например, использование тумблера для включения и выключения функции будет понятно и знакомо большинству пользователей, поскольку в реальной жизни оно работает точно так же.
Поэтому вам следует избегать использования специальных слов и фраз, которые известны только разработчикам, но не вашей целевой аудитории. Помните, что ментальная модель пользователя основана на его реальном опыте и предыдущих взаимодействиях с цифровыми продуктами.
Всегда используйте пиктограммы и иллюстрации, относящиеся к реальному миру, чтобы пользователи могли сразу распознать изображение и понять, что вы пытаетесь передать.
Другие связанные статьи:
3. Пользовательский контроль и свобода
Важно, чтобы пользователь знал, какие действия он может предпринять и каковы последствия. Это поможет избежать страхов и недоразумений.
Если действие нельзя отменить, стоит предупредить об этом пользователя и дать ему возможность подумать еще раз. В дизайне интерфейса важна каждая деталь, чтобы пользователь понял, как «выйти» из сценария или вернуться туда, где он был. Для этого используются иконки «крестик», «отмена», «стрелка», «хлебные крошки».
Этот принцип предполагает, что пользователю должна быть предоставлена свобода выбора и действий. Пользователь может совершить ошибку и должен иметь возможность ее исправить.
Возьмем пример: допустим, вы редактируете документ в текстовом редакторе и случайно удалили важный фрагмент текста. Если в редакторе нет возможности отменить последнее действие, все ваши изменения будут утеряны, и вам придется начинать заново. Когда это происходит, это может привести к разочарованию и потере ценной информации.
Мы рекомендуем всегда давать пользователю возможность отменить действие или вернуться в предыдущее состояние, чтобы он чувствовал себя увереннее и быстрее изучал ваш пользовательский интерфейс.
4. Последовательность и стандарты
Чем меньше новых навыков пользователю предстоит освоить при взаимодействии с интерфейсом, тем эффективнее и быстрее он сможет работать с системой.
Во-первых, попробуйте использовать шаблоны интерфейса, которые уже знакомы нашим пользователям. Например, вы заметили, что торговые площадки и интернет-магазины выглядят почти одинаково? Чтобы пользователям не приходилось каждый раз вспоминать, как пользоваться интернет-магазинами.
Во-вторых, используйте ту же нотацию для элементов интерфейса внутри системы. Например, значок увеличительного стекла всегда означает «поиск». Когда пользователь видит этот элемент, ему не нужно догадываться, что он означает.
Элементы пользовательского интерфейса должны выглядеть и функционировать одинаково, чтобы не запутать пользователя и облегчить ему изучение пользовательского интерфейса.
5. Предотвращение ошибок
Все люди иногда ошибаются. UX-дизайнеры должны заботиться о пользователях и помогать им избегать ошибок. Поэтому постарайтесь предоставить четкие уведомления и инструкции для кнопок, полей ввода и форм.
Проиллюстрируем этот принцип на примере. Предположим, пользователь хочет отправить форму заказа, но забыл ввести свой адрес доставки. Вместо того, чтобы разрешить отправку неполной формы, система предупреждает пользователя о необходимости заполнить все обязательные поля перед отправкой заказа — это проблема.
Если вы введете слово «вложение» в Gmail и попытаетесь отправить его, в электронном письме будет задан вопрос, не забыл ли пользователь включить это вложение.
Таким образом, дизайнеры и разработчики помогают предотвратить ошибки, предупреждая пользователей о неправильно заполненных или отсутствующих данных перед отправкой формы. Это делает взаимодействие с сайтом проще и удобнее.
Примеры роста кликов, конверсий, заказов и прибыли:
6. Узнавание, а не память
Не заставляйте пользователей запоминать информацию, особенно если она была предоставлена ранее или на другой странице. Об этом принципе написана целая книга под названием «Не заставляй меня думать».
Например, представьте, что вам приходится каждый раз вводить данные карты для оплаты товаров в маркетплейсе — вместо этого система предлагает запомнить данные карты, чтобы минимизировать нагрузку на пользователя.
Поэтому при создании сайта учитывайте этот принцип, чтобы снизить нагрузку на память пользователей и упростить взаимодействие с сайтом.
7. Гибкость и эффективность использования
Чтобы удовлетворить потребности разных пользователей, важно обеспечить гибкость пользовательского интерфейса сайта или приложения. У каждого пользователя свой подход к использованию интерфейса и мы должны это учитывать.
Некоторым пользователям нужны подсказки, некоторым нет. Некоторые предпочитают кнопку «Отмена», в то время как другие предпочитают «Крест» для выполнения того же действия.
Некоторые люди предпочитают использовать поиск для перехода к нужному разделу, в то время как другие предпочитают использовать навигацию по меню.
Постарайтесь учесть все предпочтения пользователя, продублировав функциональность кнопки «Отмена» с помощью «X» в модальных окнах и предложив продвинутым пользователям возможность закрыть окно с помощью клавиши Esc.
Рекомендуется учитывать разные уровни пользовательского опыта и создавать функции, удовлетворяющие все сегменты аудитории.
8. Эстетичный и минималистичный дизайн
Чем больше информации отображается на экране, тем труднее увидеть то, что важно. Поэтому следует использовать подход, при котором вторичная информация скрыта за кнопками, ссылками или в меню «Справка» и «Информация».
На странице выделено самое главное — название текущего раздела. Основные действия, такие как кнопки «Регистрация» и «Войти», выделены цветом. Дополнительную информацию, например для ввода QR-кода, мы прячем в ссылке.
Эстетика и минимализм важны не только для визуального оформления сайта, но и для пользовательского опыта (UX). Не всю информацию нужно давать пользователю сразу, часть информации следует давать частями и поэтапно – платежная информация редко нужна сразу в начале использования сайта.
Например, не обязательно заставлять пользователя вводить дату рождения при регистрации — лучше сделать это позже.
Постарайтесь упростить информацию и избавить UI от ненужных элементов, не поддерживающих основные цели и задачи сайта.
9. Помогите пользователям исправить ошибки
При возникновении ошибок в пользовательском интерфейсе вы должны предоставить пользователям четкие сообщения, объясняющие, что произошло, и предлагающие возможные решения проблемы.
В примере с ошибкой 404 пользователь столкнулся с ситуацией, когда запрошенная страница не найдена. Сообщение об ошибке понятно, а также предлагается конкретное решение проблемы — вернемся к основной проблеме.
В таких случаях также можно предложить пользователю альтернативные действия: например, перейти к последним просмотренным товарам или предложить товар, как в примере выше — скотч.
Вам нравится статья? Тогда обратите внимание на наши курсы!
10. Ссылки и документация
Хороший пользовательский интерфейс должен быть понятен без дополнительных объяснений. Однако иногда пользователи могут столкнуться с трудностями или вопросами. Поэтому важно предоставить им доступ к информации, где они смогут найти ответы на свои вопросы.
Рекомендуем воспользоваться разделом «Помощь» или страницей «Вопросы и ответы» на сайте. Вы также можете использовать всплывающие подсказки.
В последнее время чаты с онлайн-консультантами и чат-ботами стали обычным явлением. О том, как написать текст для чат-бота так, чтобы его понимали пользователи, мы рассказали в этой статье.
Диплом
10 эвристик юзабилити Якоба Нильсена — полезные советы по улучшению интерфейсов. Эти правила распространяются на различные цифровые продукты: веб-сайты, мобильные приложения и программы. Хотя правила не решают всех проблем удобства использования, соблюдение этих правил гарантированно улучшит ваш пользовательский интерфейс.
И если вы хотите, чтобы ваш интерфейс проверил эксперт по юзабилити, мы рекомендуем нанять UX-аудит. Наши специалисты изучают ваш сайт и находят недостатки, препятствующие конверсии. И, конечно же, они расскажут вам, как их исправить 🙂
