Эвристики Нильсена: как применять 10 главных правил UX

В первую очередь давайте разберём слово «эвристики» — уж слишком оно страшное, не так ли? Бояться точно нечего: воспринимайте его как более привычное слово «правила». Ничего это не поменяет, но, видимо, мистер Нильсен решил, что «эвристика» звучит круче (на самом деле так и есть — можете смело этим козырять).

В этой статье мы с вами рассмотрим и разберёмся со всеми эвристиками usability. Если вы хотите углубиться и изучить каждую из них на PRO-уровне, то в специальном разделе мы разобрали их подробно — с описаниями и примерами. Данная статья основана на исследованиях Якоба Нильсена, сооснователя NNGroup.

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

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

Лоадеры отличный элемент для информирования пользователя о статусе системы

Показывай пользователю, что сейчас происходит с системой. Если он загрузил какой-то файл, то покажи ему процесс загрузки. Система может быть исправна, и файлик загружается, но пользователь-то не в курсе. Поэтому он начнёт повторять свои действия, возникнут ошибки и т. д. И всё это можно пофиксить. Например, использовать дизайн-элемент в виде progress bar или лоадер. Часто в работах дизайнеров я замечал эту ошибку, когда дизайнеры забывают продумать состояния загрузки и различные информационные окна.

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

Приложения используют попапы для информирования пользователя о состоянии системы

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

“Мне этот мир абсолютно понятен” — так же он должен быть понятен и вашим пользователям. Лучше всего с этим нам помогут разобраться примеры «хорошего» и «плохого» сайта. Начнём с хорошего, который сами NNGroup приводят в описании эвристики. Это сайт профилактической помощи BlueCross BlueShield, где на понятном языке для любого пользователя описано, что это за профилактика, почему она важна и какие преимущества у BlueCross BlueShield.

Информация на сайте BlueCross BlueShield предоставлена на понятном для пользователя языке

И напротив — «плохой» сайт компании Abacus, которая предоставляет юридическое программное обеспечение. На странице About данного сайта на программистском парселтанге описаны преимущества, которые будут понятны только узким специалистам из этой сферы, но никак не юристам или обычным пользователям. Используются сложные термины и аббревиатуры, которые нигде не расшифрованы.

Информация на сайте Abacus написана на очень профессиональном языке. Обычный пользователь, не из сферы, не сможет понять про что говорится на странице

Поэтому при проектировании своих интерфейсов или визуалов используйте язык, на котором говорит ваша целевая аудитория. Если у вас целевая аудитория 16–20 лет — можете смело писать: «А ничо тот факт, что наш продукт лучше, ок», а если целевая аудитория старше — разговор, следовательно, будет другой.

Это касается не только текстов, но и того, как выглядят и работают ваши элементы. Очень часто дизайнеры, особенно неопытные, начинают выдумывать велосипед и изобретать треугольные кнопки, непонятные иконки и т. п. Это всё может быть — и поверьте, бывает, — но не в большинстве интерфейсов, а скорее в фестивальных работах, которые отправляются на конкурсы типа Awwwards. Треугольная кнопка в интерфейсе вашего клиента, по продаже газонокосилок, не увеличит ему конверсию — это 100%, а только введёт пользователей в заблуждение.

3. Контроль и свобода действий

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

Пользователи постоянно ошибаются

Господи, храни человека, который придумал сочетание клавиш Ctrl+Z. Это самый яркий пример свободы действий — когда вы в любой момент работы в каком-нибудь редакторе можете отменить действие. А представьте, если бы такой возможности не было? Как, например, та же Figma. Сколько раз вы мискликали и сдвигали случайно направляющую? Ctrl+Z — и сделаем вид, что ничего и не было.

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

Иконка крестика в popup’ах приложений привычный и устоявшийся паттерн

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

4. Согласованность и стандарты

Люди проводят бОльшую часть времени в других интерфейсах, если конечно, вы не разработчик YouTube или TikTok (в таком случае можете смело поспорить). А это значит, что у них уже есть какие-то представления и ожидания от вашего интерфейса — что элементы будут выполнять те же функции, что и в других интерфейсах.

Во многих приложениях, свайп вниз обновляет ленту

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

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

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

Как мы уже с вами знаем, пользователи часто ошибаются. Все ошибки можно разделить на 2 типа: промахи и просчёты.

Промахи — это ошибки, когда пользователь невнимательно куда-то нажал, мискликнул, отвлёкся, поспешил.

А вот просчёты — это когда пользователь сознательно совершил ошибку, ожидая другого отклика от системы.

От всех ошибок, застраховать пользователей не получиться

Поэтому мы, как дизайнеры, можем некоторые ошибки предупредить. Все ошибки закрыть не получится, к сожалению — точно найдётся пользователь, который, увидев надпись «файл должен весить 20 МБ», будет старательно пытаться всунуть в систему файл большего размера.

И встаёт логичный вопрос — как мы можем предотвращать ошибки?

Например, при удалении чего-либо переспросите у пользователя, точно ли он хочет это удалить. Сколько файлов Photoshop лично мне засейвил своим сообщением при закрытии — вы даже не представляете.

Photoshop предупреждает о несохраненных изменениях при закрытии программы

Ещё один классный, более PRO-уровень реализации удаления — это заставить пользователя прописать название того, что он удаляет. Такое удаление используют в Figma. При попытке удалить команду, Figma заставит вас прописать её название, чтобы вы несколько раз успели подумать — точно ли хотите её удалить.

Figma просит прописать полное название команды при попытке удаления

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

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

А если ещё и все его введённые данные не сохранятся — то воспламенение пятой точки пользователя обеспечено.

6. Узнавание вместо запоминания

Пользователь не должен держать всё у себя в памяти. Во-первых, это трудно. Во-вторых — он, конечно же, всё не запомнит. Вспоминаем закон Миллера.

Пользователь не должен все запоминать и держать в голове

Показывайте и подсказывайте своему пользователю, как работает ваш интерфейс.

Самый понятный пример — это уже упомянутый Photoshop. В нём куча разных инструментов, и запомнить, что делает каждый, достаточно сложно. Поэтому ребята в Adobe сделали небольшие подсказки, которые появляются при долгом наведении.

Photoshop при долгом наведении на инструмент показывает пользователям подсказки, что делает тот или иной инструмент.

То же самое относится и к веб-интерфейсам. Интернет состоит не только из лендингов и e-commerce-интерфейсов, где и без подсказок всё понятно. Существуют также сложные интерфейсы — например, интерфейсы с аналитикой или таск-менеджеры. Там подсказки реализуются зачастую при помощи tooltips — смело можете заимствовать этот опыт и использовать их в своих интерфейсах. 

7. Гибкость и эффективность

С вашим интерфейсом можно взаимодействовать по-разному. Особенно если это какой-то сложный интерфейс — как, например, Figma.

Figma максимально дружелюбная, с минимальным количеством непонятных элементов, и новички её не боятся — в отличие от того же Photoshop или даже — Blender.

Интерфейсы с большим количеством элементов пугают пользователей

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

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

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

Это сделает ваш интерфейс более дружелюбным по отношению к пользователю — согласно эвристикам Нильсена.

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

Тут спойлер в названии: чем меньше ненужных и декоративных элементов будет в вашем интерфейсе — тем лучше.

Дизайнерам листвы, чаек и дыма — привет!

Перебор с декоративными элементами плохо сказывается на юзабилити вашего интерфейса

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

Конечно, не стоит впадать в крайности и делать одну кнопку «Купить» на весь экран, довольным при этом говоря: «Это минимализм, вы ничего не понимаете». Но выдерживать эстетику и не перебарщивать с декорациями — очень важно.

И запомните: никаких чаек — если это не дизайн про чаек. И никаких летающих листиков — если это не дизайн про летающие листики. Спасибо!

9. Помощь в распознавании и исправлении ошибок

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

Поясняйте ошибки для своих пользователей: почему произошла ошибка и как её исправить

Произошла ошибка, и пользователь видит сообщение «Ошибка». Спасибо, а я сразу и не понял. “Как её исправить?” — вот главный вопрос, на который вы должны сразу дать пользователю ответ.

Если привести пример на тех же полях, где зачастую происходят ошибки, то скажите пользователю не просто «Ошибка», а, например: «Поле с e-mail должно содержать @ и иметь формат designer@gmail.com».

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

10. Справка и документация

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

Даже в небольших интерфейсах создавайте блок FAQ, где отвечаете на часто задаваемые вопросы. Даже если вся эта информация есть на сайте — продублируйте её в этот блок.

Попытки разобраться в системе без документации

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

Документация — важная часть процесса дизайна. И чем раньше вы начнёте с ней работать — тем быстрее прокачаете свой уровень в дизайне.

Вот и все эвристики usability по Якобу Нильсену, напомню, что если хотите изучить эвристики подробнее, то переходите в этот раздел, где мы каждую из них разбираем более детально.