Эвристики Нильсена — это правила, которыми должны пользоваться дизайнеры для проектирования взаимодействия между интерфейсом и пользователями. Эвристики помогают выявить основные проблемы, с которыми пользователи могут столкнуться, и предотвратить их.
Применение эвристик полезнее, когда невозможно провести исследования, но необходимо аргументировать решения.
Ниже расскажу на примере реальных приложений про каждую эвристику.
1. Видимость статуса системы
Это общение между пользователем и интерфейсом. При общении мы часто задаём интересующие нас вопросы и отвечаем друг другу. Так и между интерфейсом и пользователем происходит общение.
Пользователь совершает действие, а интерфейс отправляет пользователя на нужную страницу, блок, элемент. Отвечает пользователю на вопросы: где он сейчас находится? что сейчас происходит?
![Приложение для изучения иностранных языков Lingualeo Приложение для изучения иностранных языков Lingualeo](https://habrastorage.org/getpro/habr/upload_files/029/211/6f1/0292116f1f179fa639ea6935da3513d9.jpg)
В приложении Lingualeo показано, что мы сейчас находимся на этапе «Повторение — мать учения» и другие этапы пока недоступны. На 2 скрине видно, что в блоке изучено 0 из 10 слов. Приложение взаимодействует с пользователем, предоставляя информацию о текущем состоянии его обучения.
Т.е приложение отвечает на вопрос: какой сейчас прогресс в изучении у пользователя.
![Приложение Trello и сайт Habr Приложение Trello и сайт Habr](https://habrastorage.org/getpro/habr/upload_files/a5e/e22/78c/a5ee2278c5928166fd29a56bdc27e08f.jpg)
В Trello показан статус, что пользователь не выполнил ни одного задания из чек-листа. В Habr видно, какие навыки применили к себе, а какие нет. Т.е приложение отвечает на вопрос: какие навыки мы ещё можем применить или убрать из списка.
![Приложения Instagram и Яндекс Еда Приложения Instagram и Яндекс Еда](https://habrastorage.org/getpro/habr/upload_files/ade/17e/08c/ade17e08cabe400301153d59845c6565.jpg)
Хлебные крошки, tab bar, табы показывают, на какой странице сейчас находится пользователь. На примере Instagram видим, что мы сейчас находимся на главной странице. Так интерфейс даёт информацию о текущем местоположении в приложении. Также видно, какие сториз просмотрены, а какие нет.
В приложении Яндекс Еда видно, сколько бонусных баллов мы можем использовать. Такое общение между пользователем и интерфейсом позволяет оценить свои возможности в применении бонусные баллов при оформлении заказа.
2. Соответствие между системой и реальным миром
Мы быстрее понимаем что-то, когда уже с этим работали или видели. Поэтому, если термины, элементы, иконки ассоциируются с чем-то из реального мира — это большой плюс к пониманию.
![Приложение Spotify и Aviasales Приложение Spotify и Aviasales](https://habrastorage.org/getpro/habr/upload_files/94f/d8e/b7c/94fd8eb7cc1a1354b2d0dcb53c9064ba.jpg)
Обложка альбома в приложении Spotify похожа на обложку виниловой пластинки из реального мира. Это вызывает узнаваемость, особенно у тех, кто имел дело с виниловыми пластинками в прошлом.
Иконки в Tab Bar приложения Aviasales похожи на предметы, действия из реального мира. Поэтому подбирайте иконки, которые будут понятны пользователю.
![Приложения Яндекс Еда и Google Calendar Приложения Яндекс Еда и Google Calendar](https://habrastorage.org/getpro/habr/upload_files/48a/e7c/624/48ae7c62403ff780b7aa7efe88c35f24.jpg)
В Яндекс Еда иллюстрации похожи на еду из реального мира. В приложении Google Calendar календарь похож на настенный.
3. Пользовательский контроль и свобода
Людям свойственно ошибаться. Главное уметь исправлять ошибки и понимать, что ошибся. И 3 эвристика про это. Если пользователь ошибся, мы должны ему дать возможность исправить ошибку. Так пользователь будет чувствовать себя спокойно.
Один из важный примеров: дать возможностью по сценарию перейти назад.
Недавно испытала это на себе. Скрины не сделала, поэтому опишу словами. Бронировала билет в авиакомпании Wizz Zair и по ошибке поставила чек-бокс, что согласна участвовать в дисконтной программе. На последнем шаге заказа я увидела, что у меня в счёт включена дисконтная программа. Я хотела вернуться обратно и отменить действие, но не смогла. Пришлось заново бронировать билет.
![Приложения Booking и Oz.by Приложения Booking и Oz.by](https://habrastorage.org/getpro/habr/upload_files/c56/49a/e9a/c5649ae9a5dd12f82f546ea9e5886c02.jpg)
После бронирования жилья на Booking можно отредактировать данные гостей, отменить бронирование. После процесса бронирования жилья возникают ситуации, когда пользователь может обнаружить ошибки в данных гостей или возникнуть неожиданные обстоятельства, из-за которых нужно изменить даты. Конечно, при этом необходимо учитывать особые ограничения и правила, установленные сервисом или хозяином жилья.
В каждом интернет-магазине должна быть возможность удалить товар из корзины. Бывает, что по ошибке добавили или передумали. Удаление товара из корзины предоставляет пользователю контроль над процессом покупки, что содействует удобству и повышению удовлетворенности клиентов. Но не нужно делать иконку удаления слишком заметной, потому что это может вызвать случайное удаление товаров и уменьшить конверсию продаж. При этом иконка должна быть достаточно различимой, чтобы пользователи легко могли её найти и использовать, когда они хотят удалить товар.
Особенно важно соблюдать эту эвристику в финансовых ситуациях, когда пользователи проводят транзакции и совершают платежи.
![Приложение Альфа банка Приложение Альфа банка](https://habrastorage.org/getpro/habr/upload_files/10f/e0a/5f6/10fe0a5f650223cfd7d2d1b0fab2d0f8.jpg)
В приложении Альфа-банка вводим сумму для перевода и после нажатия на “Перевести”, мы попадаем на другую страницу для проверки данных и только после этого окончательно можем сделать перевод. Это важный этап, который позволяет пользователю внимательно просмотреть указанную сумму, реквизиты получателя и другие детали.
4. Последовательность и стандарты
Эвристика про применение паттернов — повторяющиеся, привычные действия для пользователя.
Создаются новые элементы, но не всегда пользователи знают, как ими пользоваться. Потому что привыкли к старому функционалу. Порой не нужно изобретать велосипед
Также эвристика про согласованность элементов в одном приложении, разных приложениях одной компании.
![Приложение Яндекс Еда и Delivio Приложение Яндекс Еда и Delivio](https://habrastorage.org/getpro/habr/upload_files/c71/14b/9ee/c7114b9eea7ccc3616e2669c4b318a44.jpg)
Карточки в приложениях похожи. Пользователь быстро сориентируется, если он привык заказывать в «Яндекс Еда», но в какой-то ситуации решил заказать в «Delivio», так как основные элементы интерфейса будут знакомыми. Это один из аргументов, почему важно анализировать приложения конкурентов.
![Приложения Ozon и Ozon банк Приложения Ozon и Ozon банк](https://habrastorage.org/getpro/habr/upload_files/0b2/afe/68d/0b2afe68d043da5405db8c4e587faeab.jpg)
Приложениях «Ozon банк» и «Ozon» разные, но относятся к одной компании. Видим, что консистентность между приложениями есть. Элементы интерфейса похожи: единая цветовая гамма, шрифты, формы.
Взаимодействие с интерфейсом становится интуитивным и удобным, когда все схожие элементы ведут себя согласно ожиданиям пользователей. Когда одинаковые функции объясняются с помощью одинаковых средств, использование продукта становится удобнее.
5. Предотвращение ошибок
Многие путают эту эвристику с 3 (пользовательский контроль и свобода). Но в 3 пользователь уже совершил действие, которое ему нужно отменить. А в 5 эвристике мы не должны дать пользователю совершить действие без предупреждения или ограничения, должны помочь пользователю сделать действие без ошибки.
![Cайт-переводчик Woordhunt и приложение Альфа банка Cайт-переводчик Woordhunt и приложение Альфа банка](https://habrastorage.org/getpro/habr/upload_files/d41/9f9/dea/d419f9deafddcc7a27e3ee8098ca486f.jpg)
Во многих переводчиках и других поисковых системах при вводе первых нескольких букв предлагаются варианты, которые могут подойти пользователю. Так у пользователя меньше шансов сделать опечатку или выбрать не ту информацию.
В поле с вводом номера карты можно использовать только цифры. Поэтому на клавиатуре есть ограничение для букв. Не забывайте про ограничения показа букв, если нужно вводить только цифры. К сожалению, это распространённая ошибка.
![Приложение InShot для обработки видео и Eleven для аренды самокатов Приложение InShot для обработки видео и Eleven для аренды самокатов](https://habrastorage.org/getpro/habr/upload_files/db7/ea5/b15/db7ea5b1565b9706d37b8403f7fa4b43.jpg)
Когда вы что-то удаляете, уточните у пользователя точно ли он готов удалить. На "удаление" можно нажать и по ошибке, а в итоге пользователь удалит что-то важное, что не подлежит восстановлению.
6. Распознавание вместо необходимости вспоминать
Эвристика подразумевает, что интерфейс должен предоставлять пользователю необходимую информацию и подсказки, чтобы помочь ему в выполнении задачи.
Мы лучше распознаем информацию представленную перед нами, чем когда мы должны напряженно вспоминать или вводить данные сами.
![Приложение Альфа банка Приложение Альфа банка](https://habrastorage.org/getpro/habr/upload_files/8df/8b3/7ef/8df8b37ef03f2d9979e3f9dd753fa65b.jpg)
После оплаты или перевода денег, у нас появляется окно с обновленным остатком и пользователю не нужно вспоминать: сколько у него осталось денег. Важно заметить, что информация обновляется сама, потому что в некоторых банковских приложениях пользователю самостоятельно нужно нажать на кнопку обновления.
![Браузер Google Браузер Google](https://habrastorage.org/getpro/habr/upload_files/aba/344/ab7/aba344ab7eba1edc927cc6c3007b49d5.jpg)
Во многих поисковых системах сохраняются данные, которые мы уже искали. При повторном поиске информации нам не нужно будет вводить запрос заново. Мы просто выберем из предложенных вариантов.
![Приложение Spotify Приложение Spotify](https://habrastorage.org/getpro/habr/upload_files/145/951/757/1459517575ab8c8a355d7ca683f18719.jpg)
Часто в музыкальных приложениях есть блок с недавно прослушанными альбомами или треками. Большая вероятность, что пользователь повторно захочет послушать эти треки. Поэтому ему не нужно будет искать повторно, а просто зайти в раздел с недавно прослушанными.
7. Гибкость и эффективность использования
Нужно дать пользователю решить задачу несколькими способами. У каждого пользователя может быть разный опыт, пожелания и физические ограничения.
Ярлыки, скрытые от начинающих пользователей, могут ускорить взаимодействие с опытным пользователем. Поэтому дизайн может удовлетворить как неопытных, так и опытных пользователей.
![Приложения Figma и Photoshop Приложения Figma и Photoshop](https://habrastorage.org/getpro/habr/upload_files/5ad/e71/b64/5ade71b64a56b2453539e5e84f30b58f.jpg)
Новички ПО будут пользоваться кнопками в интерфейсе, в то время как опытные ребята будут использовать shortcuts (комбинации клавиш на клавиатуре), чтобы ускорить свою работу.
![Приложение hh.ru Приложение hh.ru](https://habrastorage.org/getpro/habr/upload_files/0c1/298/3c2/0c12983c2c160b904e8dadf39fde0aae.jpg)
При регистрации или входе многие приложения дают возможность пользователю войти несколькими способами. Кому-то удобнее через почту, кому-то через соцсеть.
8. Эстетичный и минималистичный дизайн
Важно не располагать лишние элементы на странице, потому что они могут отвлечь внимание от чего-то важного. Прежде чем расположить элемент задайте себе вопрос: какую функцию выполняет элемент на странице? Если ответа нет или он расплывчат, то уберите этот элемент.
![Приложение авиакомпаний Lufthansa и Turkish Airlines Приложение авиакомпаний Lufthansa и Turkish Airlines](https://habrastorage.org/getpro/habr/upload_files/204/560/a76/204560a76aa84060f1b3b131e6f9c597.jpg)
В приложении Lufthansa на главной странице минималистичный дизайн с нужными элементами для пользователя. В приложении Turkish Airlines на такой же странице перебор элементов. Да, реклама может быть, но она не должна отвлекать пользователя от цели, а должна показываться ненавязчиво, как это сделано в приложении авиакомпании Wizz Air (ниже скрин).
![Приложение авиакомпании Wizz Air Приложение авиакомпании Wizz Air](https://habrastorage.org/getpro/habr/upload_files/046/8ef/bbe/0468efbbe7737e30da544c97988e0ab3.jpg)
9. Помогите пользователям распознать, диагностировать и устранить ошибку
Эта эвристика направлена на то, чтобы сделать процесс исправления ошибок максимально интуитивным, понятным для пользователей.
![Приложения Tripadvisor и Linkedin Приложения Tripadvisor и Linkedin](https://habrastorage.org/getpro/habr/upload_files/c5b/34a/339/c5b34a339be66ad721083584fffe77f6.jpg)
Важно не только сообщить о возникновении ошибки, но и предоставить пользователю информацию о сути ошибки и как её можно решить.
Просто сообщение о том, что произошла ошибка, не даст пользователю понимания причины проблемы и как её исправить. Вместо этого, интерфейс должен предоставить подробную информацию, объясняющую, что пошло не так и какие действия можно предпринять для устранения проблемы.
Например, если пользователь заполняет форму, и ошибка возникает из-за того, что он не заполнил поля правильно, интерфейс должен указать на эти поля и указать причину ошибки (как это сделано в приложении Tripadvisor).
Можно предоставить ссылку для получения дополнительной помощи, где пользователь сможет найти подробные инструкции или связаться с поддержкой.
10. Справка и документация
Приложение должно быть понятным. Но иногда пользователям нужна помощь в обучении или подсказка в чём-то, потому что у пользователей может быть разный уровень знаний. И так они могут понять все возможности, которые есть в приложении.
Суть этой эвристики состоит в том, чтобы обеспечить пользователей детальными объяснениями о функциональности продукта, инструкциями по использованию, ответами на часто задаваемые вопросы (FAQ), подсказками и другими полезными ресурсами.
![FigJam FigJam](https://habrastorage.org/getpro/habr/upload_files/a36/379/99c/a3637999c66343d79e4632fc37335317.jpg)
Готовые шаблоны связаны с эвристикой "Справка и документация", потому что в состав таких шаблонов входят готовые тексты, формы, что своего рода является инструкцией по использованию.
![Приложение по обработке фото Snapseed и приложение Google Приложение по обработке фото Snapseed и приложение Google](https://habrastorage.org/getpro/habr/upload_files/ba1/37a/a33/ba137aa33c4c2f2f31c0629e91c4648c.jpg)
Пользователю предоставлена справочная информация, которая помогает понять, как использовать приложения, какие у пользователя есть возможности.
Применение эвристик Нильсена позволит выявить потенциальные проблемы в интерфейсе заранее, улучшить его навигацию и взаимодействие с пользователями. Эвристики позволят избежать трудностей и дополнительных затрат в последующих этапах разработки.
Развиваю свой телеграмм-канал. Если интересно, то подписывайтесь — https://t.me/ddesignexperience !