Найти в Дзене
Просто про дизайн

10 эвристик юзабилити Якоба Нильсена для дизайна интерфейсов. На понятном языке и с примерами⚡

Принципы, которые должен знать каждый дизайнер работающий с сайтами, приложениями и прочими интерфейсами. 1. Видимость статуса системы Пользователь всегда должен быть в курсе того, что происходит на сайте и где он сейчас находится. Например, при заполнении большой формы регистрации, показывать пользователю, что он находится на 2 из 4 этапов. Или, например, показывать пользователю, что его заявка успешно отправлена. 2. Соответствие между системой и реальным миром Система должна говорить на языке пользователей, используя слова, фразы и понятия знакомые пользователю, а не системные термины. Например, кнопка для отправки формы должна быть обозначена словом “Отправить”, а не “Передать данные”. 3. Пользовательский контроль Пользователи часто выполняют действия по ошибке. Им нужен четко обозначенный "аварийный выход". Например, при заполнении формы, пользователь должен иметь возможность вернуться к предыдущему этапу, если он допустил ошибку. 4. Последовательность и стандарты Одни и
Оглавление

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

Не важно, делаете вы лендинг, мобильное приложение, интернет магазин или интерфейс платёжного терминала, эти базовые правила должны соблюдаться.
Не важно, делаете вы лендинг, мобильное приложение, интернет магазин или интерфейс платёжного терминала, эти базовые правила должны соблюдаться.

1. Видимость статуса системы

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

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

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

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

Например, кнопка для отправки формы должна быть обозначена словом “Отправить”, а не “Передать данные”.

3. Пользовательский контроль

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

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

4. Последовательность и стандарты

Одни и те же действия должны выполняться одинаковыми интерфейсами.

Например, кнопка для отправки формы должна иметь одинаковый вид на всех страницах сайта.

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

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

Например, когда пользователь хочет удалить свой аккаунт — попросить подтверждение и код.

6. Узнавание, а не попытки вспомнить как пользоваться

Важные элементы, действия и опции должны быть заметными и доступными.

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

7. Гибкость и эффективность использования

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

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

8. Эстетика и минимализм

Интерфейс должен содержать минимум второстепенной информации. Потенциально это отвлекает внимание от главного действия.

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

9. Пользователь должен получать помощь при возникновении ошибок

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

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

10. Справочная и дополнительная информация

Отлично, если в интерфейсе всё понятно. Но если пользователь что-то не понял, он должен иметь возможность посмотреть пояснения и документы.

Например, расположите кнопку "Частые вопросы" в низу экрана.