7 принципов UX-дизайна Нормана. Человекоориентированный дизайн

Может ли дизайн быть опасным?

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

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

В книге Норман предлагает 7 принципов хорошего дизайна и 7 шагов при его проектировании. Он говорит, что всё, созданное человеком, по сути, имеет дизайн. Поэтому его принципы человекоориентированного дизайна можно считать универсальными. Но мы больше сделаем упор на UX-дизайн, т.е. дизайн интерфейсов, разработанный с учетом его удобства для пользователей.

Дон Норман – коллега и партнёр Якоба Нильсена, ещё одного признанного классика юзабилити. Возможно, поэтому его 7 принципов хорошего дизайн перекликаются с 10 знаменитыми эвристиками Якоба Нильсена. Эти эвристики UX-дизайнеры стараются применять при проектировании и аудите действительно удобных сайтов и интернет-магазинов. А 7 универсальных принципов Нормана отлично с ними сочетаются.

 

7 вопросов на пути к хорошему дизайну

Итак, 7 принципов дизайна по Норману это:

1. возможность,
2. означающее,
3. проекции,
4. фидбэк,
5. концептуальные модели,
6. наглядность,
7. ограничения.

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

Любое действие можно разложить на шаги: поставить цель, совершить действие, проверить результат. Норман далее делит шаги на 7 этапов: «один для цели, три для выполнения и три для оценки:

1. формирование цели;
2. формирование намерения;
3. определение последовательности действий;
4. выполнение действий;
5. восприятие изменений в окружающем мире;
6. интерпретация изменений;
7. оценка результата».

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

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

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

1. Чего я хочу добиться? – Понятен ли функционал устройства, вещи, экрана, чтобы человек изначально понял, что это предназначено для его цели. Важно всё – от формы устройства до цветов экрана. Лестница очевидно подсказывает нам, что по ней можно подняться.
2. Какие есть варианты? – Даёт ли у устройство/экран понятные сигналы, что можно сделать? Если у двери нет ручки, то понимает ли человек, как её открыть?
3. Что я могу сделать? – Соотносится ли возможность с реальностью физического мира? Например, сможет ли использовать предмет/устройство человек с определёнными физическими ограничениями?
4. Как мне это сделать? – Понятен ли сам процесс действия? Кнопку надо удерживать? Плашку нужно смахнуть вбок?
5. Что произошло? – Есть ли реакция системы? Поменялось ли что-то внешне? Были ли визуальные, физические, звуковые сигналы?
6. Что это значит? – Понятен ли сигнал системы? Можно ли сделать вывод о результате действия по этому сигналу?
7. Это хорошо? – Красная галочка на экране успеха – это успех или ошибка?

 

А теперь вернёмся к 7 принципам дизайна.

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

 

7 принципов UX-дизайна по Норману

Наглядность

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

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

Очень красивая дизайнерская вещь, по которой невозможно понять, как именно ей пользоваться – бесполезна.

Возможность

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

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

Означающее

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

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

Дон Норман рассказывает в книге, что коллеги и друзья называют неудобные и непонятные двери (да и прочие вещи) – «двери Нормана». Если на красивых стеклянных дверях, открывающихся в непонятную сторону, нет ни ручек, ни пластин, ни каких-либо еще говорящих об их способе и направлении работы подсказок – это «двери Нормана». Человек, впервые открывающий их, как минимум должен будет задуматься, а, скорее всего, ещё и попробовать несколько неверных способов их открытия. Надпись «от себя» на этих дверях и будет означающим. Флешки, которые мы вечно вставляем не той стороной, наверно, тоже стоит называть «флешками Нормана».

Наличие означающего, если предмет или интерфейс не нагляден, снижает количество ошибок. В этом 7 правил Нормана пересекаются с 10 эвристиками Якоба Нильсена. Одна из них – предотвращайте ошибки пользователя с помощью подсказок и отзывчивости (респонсивности) интерфейса непосредственно в момент работы с ним.

Проекции

Проекции – это, по сути, метафоры вещей, их соотнесенность с чем-то в реальном мире. Метафоры вещей отличаются в зависимости от культурного контекста и языка описания. В одной стране или сообществе они могут быть совсем не такими, как в другой. Удивительно, но ведь не в каждой культуре будущее ассоциируется с чем-то, что впереди, а бОльшее или более положительное с чем-то, что выше. Проекции часто именно про пространственную связь. Самый простой пример Дона Нормана – выключатели и лампы. Если мы видим три выключателя и три лампы, то мы мысленно автоматически соотносим левый выключатель с левой лампой, центральный с центральной и т.д. В дизайне мы должны учитывать эти «встроенные» в людей проекции, чтобы помогать им пользоваться спроектированными нами вещами.

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

Фидбэк

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

Фидбэк должен быть мгновенным. Иначе пользователи успеют засомневаться в происходящем и сделать ошибку, загрузить систему дополнительными сигналами или просто перестать выполнять задачу, использовать ваш продукт и просто разозлиться, потому что стало непонятно, что происходит.

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

Ещё фидбэк всегда должен быть соизмерим с задачами. Слишком много фидбэка тоже плохо – человек либо перестает реагировать на него и пропускает действительно важный сигнал, либо просто раздражается и может перестать использовать цифровой продукт или вещь. Микроволновка, закончив разогревать вашу еду, обычно делает один мелодичный «дзинь». Но моя микроволновка упорно пищит 5 раз, хотя она, очевидно, остановилась и никакой проблемы и опасности в том, что человек может не услышать её с первого раза, нет. Это обычно раздражает. Изменить сигнал, конечно же, нельзя.

Здесь тоже можно заметить пересечение с эвристиками Якоба Нильсена. Фидбэк – это, по сути, статус системы. Нильсен говорит, что пользователь в каждый момент времени должен понимать, что делает система, не зависла ли она, успешно ли совершено действие, нужно ли сделать ему что-то ещё.

Концептуальные модели

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

В чём-то концептуальные модели также перекликаются с эвристиками Нильсена. Он пишет, что хороший интерфейс всегда в чём-то отсылает нас к реальному миру. Корзина интернет-магазина отрисовывается в форме реальной корзины в супермаркете, а письмо «улетает» как бумажный самолётик. Мы платим картой и нам кажется, что деньги непосредственно хранятся в ней. Хотя при оплате они просто поменяют привязку с нашего счёта на счёт магазина.

Концептуальные модели ещё связаны с приоритетом узнавания перед запоминанием. Это тоже одна из эвристик. Например, в автомобиле все функции видны и понятны. Они соотносятся с тем, как водитель представляет себе автомобиль. Если пользователь что-то забывает, ему достаточно взглянуть на кнопку, чтобы понять, как и что делать. Д. Норман приводит в пример регулятор высоты  и положения автокресла, выполненный в форме самого кресла. Связь между расположением кнопки и ее функцией существенно облегчает её поиск. В результате практически ничего не нужно запоминать.

Ограничения

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

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

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

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

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

 

 7 способов сделать UX-дизайн простым

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

Дон Нормана в книге «Дизайн привычных вещей», в которой он и описал все принципы хорошего дизайна, в конце даёт ещё 7 обобщающих способов сделать дизайн простым.

1. Используйте как внешнюю информацию, так и внутренние знания.

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

2. Упростите структуру задачи.

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

3. Сделайте дизайн наглядным: ликвидируйте разрывы оценки и выполнения.

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

4. Используйте правильные соответствия.

Пример: джойстик – куда вы его наклоняете, туда и передвигается объект, которым мы управляем. Сюда же можно отнести экраны успеха с зелеными чек-боксами, а не красными или жёлтыми. Потому что именно зелёный уже (для нашей культуры) стал привычным символом успешной операции.

5. Применяйте ограничители – как естественные, так и искусственные.
6. Сделайте так, чтобы дизайн позволял совершать ошибки.
7. Если все остальное терпит неудачу, устанавливайте стандарты.

Здесь мы снова объединяем принципы Нормана и эвристики Нильсена. Пользователи проводят больше всего времени на других сайтах, а не на вашем. Учитывайте это и используйте паттерны поведения – расположите логотип слева, контакты справа вверху и не выдумывайте велосипед там, где он давно стал основным средством передвижения.