10 эвристик Нильсена простыми словами
Это правила хорошего тона в дизайне интерфейсов. Простыми словами и с примерами, которые видишь каждый день.
1. Видимость состояния системы
Суть: Человек всегда должен понимать, что происходит в данный момент. Система не должна «молчать».
Пример: Когда вы заказываете такси, на карте видно, где едет машина и через сколько минут она прибудет. Или полоса загрузки, когда скачивается файл.
2. Сходство системы с реальным миром
Суть: Интерфейс должен говорить с пользователем на его языке. Используйте знакомые слова и образы, а не сложный технический сленг.
Пример: Иконка «Корзина» для удаления файлов, переключатель-тумблер для включения функций или «Сердечко» для добавления в избранное.
3. Свобода действий
Суть: Пользователь должен иметь возможность легко отменить ошибку и вернуться назад. Нужна кнопка «аварийный выход».
Пример: Стрелка «назад» в браузере, функция «Отменить удаление» (Ctrl+Z) или кнопка «Удалить товар» прямо на этапе оформления заказа, если вы случайно добавили лишнее.
4. Единообразие и стандарты
Суть: Не нужно изобретать велосипед. Одинаковые вещи должны работать одинаково на всех страницах и экранах.
Пример: Кнопка «Войти» или «Профиль» почти на всех сайтах находится в правом верхнем углу, а логотип компании, который ведёт на главную, — в левом верхнем. Если их поменять местами, люди запутаются.
5. Предотвращение ошибок
Суть: Лучше не дать пользователю ошибиться, чем потом говорить ему об этом.
Пример: Когда вы придумываете пароль, сайт сразу пишет: «Добавьте одну заглавную букву». Или когда поисковик при вводе «Паржи» мягко спрашивает: «Возможно, вы имели в виду Париж?».
6. На виду, а не в памяти
Суть: Человек не должен судорожно вспоминать информацию. Все подсказки должны быть перед глазами.
Пример: Список «Вы недавно искали» или «Вы недавно смотрели» в интернет-магазине. Не нужно заново вбивать в поиск товар, который вы открывали пять минут назад.
7. Гибкость и скорость
Суть: Интерфейс должен быть удобен и новичку, и профессионалу. Новичок идёт по подсказкам, профи использует «горячие клавиши».
Пример: Скопировать текст можно через правую кнопку мыши (для новичков), а можно через Ctrl+C (для продвинутых). Или шаблон «Повторить прошлый платёж» в банковском приложении.
8. Минимализм и красота
Суть: Ничего лишнего. Каждый лишний элемент, баннер или текст отвлекает внимание от главного.
Пример: Главная страница Google. Только логотип, строка поиска и пара кнопок. Никаких лишних новостей, погоды и рекламы, потому что ваша главная цель — найти информацию.
9. Помощь в исправлении ошибок
Суть: Если ошибка всё-таки случилась, сообщение должно быть понятным и предлагать решение, а не просто пугать кодом вроде Error 404.
Пример: Вместо «Неверный ввод» сайт пишет: «В номере телефона не хватает одной цифры» или «Почта введена без значка @».
10. Справка и инструкции
Суть: В идеале система понятна без инструкций. Но если они нужны, то должны быть короткими, простыми и доступными в нужный момент.
Пример: Знак вопроса «?» рядом со сложным полем в анкете. Вы нажимаете на него, и всплывает маленькое окошко: «Здесь нужно указать номер вашего договора, он на первой странице сверху».
В моих концептах
Мои примеры из собственных проектов:
- Видимость состояния и помощь в исправлении ошибок: в AI Assistant экран Verify answer показывает по каждому шагу статус (Supported / Partial support / No source) и честно пишет, чего источник не доказывает.
- Свобода действий: при сохранении инсайта есть «Undo save», а вход по e-mail и коду без пароля.
- На виду, а не в памяти: в мобильном сценарии North & Bean на главном экране стоит «Order again», чтобы не собирать заказ заново.