6 принципов дизайна Дона Нормана

Кто не в курсе, Дон Норман — это такой крутой учёный дедуля из Америки, который известен научными работами по теории познания, в частности когнитивной психологии. Кроме того, он специализируется на компьютерной инженерии и дизайне и даже является сооснователем Nielsen Norman Group. Это консалтинговая компания, которая занимается вопросами UI/UX.

Эту статью мы подготовили на основе публикации UX-дизайнера из Лиссабона Тани Виейры (Tania Vieira). Привет, Таня!

Что за принципы?

Принципы, которые излагает Дон, универсальные, но мы будем пересказывать их именно с точки зрения UI/UX.

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

1. Разрыв выполнения. Пользователю нужно что-то сделать, но это требует усилий.
2. Разрыв оценки. Пользователю нужно понять, что происходит с системой, когда он с ней взаимодействует.
   

Пользователь поочерёдно преодолевает эти разрывы, пока не достигнет своей цели. Проще объяснить это на примере.

Допустим, нужно удалить фото с Facebook. Для этого пользователь сначала нажимает «Параметры» — этим он преодолевает разрыв выполнения. Вылезает меню, и пользователь понимает, что всё нажалось удачно и теперь предстоит выбрать один из пунктов — преодолён разрыв оценки. Нажимает «Удалить это фото» — снова преодолевает разрыв выполнения. И так далее, пока пользователь не удалит эту чёртову фотокарточку.

Чем больше препятствий на пути к цели ставит система, тем больше таких циклов проходит пользователь. В случае с удалением фото с Facebook, например, система ещё спросит, уверен ли он, что ему это надо.

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

Видимость функций

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

Например, Google Документы. Когда ты их открываешь, ты видишь страницу, на которой можно печатать текст, и основные инструменты редактирования: стиль, шрифт, кегль и так далее.

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

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

Обратная связь

Хрестоматийный пример про бабушку из бухгалтерии: «Я куда-то нажала, и всё исчезло». Такие ситуации будут возникать реже, если система будет сообщать пользователю о том, что он только что сделал.

Facebook спрашивает своих пользователей: «Уверены, что хотите удалить эту фотографию?» С одной стороны, это ещё одно препятствие на пути к цели, ещё один разрыв выполнения. С другой стороны, это важный отклик от системы. Facebook сообщает пользователю, к чему ведёт его предыдущее действие. Если он хотел сделать что-то другое, система даёт ему шанс всё исправить.

Система информирует пользователя: «Да, твой запрос получен, сейчас выполняется, и вот какой будет результат». Причём пользователь должен получать обратную связь немедленно.

Вспомните анимацию курсора в Windows с песочными часами. Она сообщает о том, что система сейчас занята каким-то процессом. Сталкивались с ситуацией, когда эта анимация не срабатывала? Делаете двойной клик на значке программы — ничего не происходит. Может, не получилось? Делаете ещё раз — снова тишина. Ещё двойной клик, ещё, ещё… внезапно открывается десять окон этой программы. Всё потому, что система не дала ясной обратной связи пользователю.

Обратная связь может проявляться по-разному: в виде звука, анимации или подробного текстового сообщения.

Ограничители

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

Самые очевидные ограничители — физические. Например, USB-разъём сделан так, что к нему можно подключить только USB-кабель.

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

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

Соответствие

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

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

Дон объясняет разницу между хорошим соответствием и не очень на примере газовой плиты.

Иногда этот принцип сознательно нарушают. В этом случае дизайн говорит пользователю, что такой-то элемент управления соответствует такому-то результату, но в действительности результат иной. То есть дизайн обманывает пользователя. Раньше этим особенно злоупортебляли файлообменники. Пользователь нажимал на кнопку «Скачать», но вместо нужного файла скачивал менеджер драйверов или ещё какую-нибудь бесполезную дичь. 

Благо, сейчас так почти не делают, ибо современные браузеры блокируют сайты с такими приколами, а поисковые системы убирают их из выдачи.

Аффорданс

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

Самый простой пример применения этого принципа — написать текстом, что это за элемент, и как его использовать. Например, «Поиск», «Подписаться», «Мне нравится».

Если человек не первый раз в интернете, он поймёт, что при клике на фразе со стрелочкой вниз раскроется в выпадающее меню. Если объект при наведении курсора меняется, то он кликабельный. Если нажать на крестик, то поп-ап закроется.

Принцип аффорданса тесно связан с принципом согласованности.

Согласованность

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

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

Знакомые всем образы логично использовать в дизайне элементов интерфейса. Функцию поиска можно обозначить стилизованной лупой, раздел с видео — значком с киноплёнкой, предпросмотр — изображением глаза.

Можно выделить четыре уровня согласованности:

1. Функциональная. Это то, о чем мы говорили выше: функции обозначаются с помощью знакомых образов.

2. Эстетическая. Различные элементы дизайна должны сочетаться друг с другом с точки зрения красоты. Плюс, они должны соответствовать фирменному стилю, чтобы пользователь на любом этапе взаимодействия с продуктом чувствовал, что он всё ещё имеет дело с одним брендом.

3. Внутренняя. В рамках одной системы все элементы управления должны выглядеть одинаково. Иначе вы просто запутаете пользователя, заставите его задаваться вопросом: «Это та же функция или другая?»

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

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