Как создавать интерфейсы, которые нравятся пользователям: 6 законов UX

Законы UX помогают дизайнерам создавать удобные интерфейсы и обеспечивать качественный пользовательский опыт. В этой подборке я собрал основные принципы, которыми руководствуются дизайнеры в своей работе: законы Парето, Фиттса, Хика, Якоба, эффект Зейгарник и модель Кано.

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

Сфокусировать внимание пользователя на нужных функциях: Закон Парето

Закон Парето гласит: 20% усилий создают 80% результата.

Как работает. Пользователи уделяют 80% внимания 20% интерфейса — данные Laws of UX. А 20% функций в приложении закрывают 80% потребностей пользователей. Избыток разделов в интерфейсе может сыграть против пользователя. Закон Парето помогает сфокусировать внимание на нужных функциях и быстрее их находить.

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

В «зеленой» зоне пользователь работает без затруднений, в «желтой» зоне прикладывает усилия. Чтобы достать до «красной», пользователь меняет положение телефона в руке и тянется пальцем.

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

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

Cделать кнопки и иконки, по которым легко попадать: закон Фиттса

Закон Фиттса гласит: «Время, необходимое для достижения цели, зависит от расстояния до нее и ее размера».

Как работает. Чем больше цель и чем ближе она находится к человеку, тем быстрее получится ее достичь. И наоборот: чем меньше цель и чем она дальше, тем больше времени потребуется для ее достижения.

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

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

Действует это правило и наоборот: если не хотите, чтобы сценарии пересекались, разведите кнопки по разным сторонам.

Довести до цели через через незавершенное действие: эффект Зейгарник

Советский психолог Блюма Зейгарник провела ряд экспериментов и выяснила, что люди в два раза лучше запоминают незаконченные задачи. Позже исследовательница Мария Овсянкина доказала, что если прервать человека во время решения задачи, у него возникает навязчивое желание вернуться и поскорее завершить ее.

Как работает. Перенося эффект Зейгарник в интерфейс мы можем мотивировать пользователей совершить целевые действия на сайте или в приложении.

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

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

Использовать привычные шаблоны: закон Якоба

«Пользователи проводят большую часть времени на других сайтах, а не на вашем. Поэтому они хотят, чтобы ваш сайт работал также, как и они», — считает основатель Nielsen Norman Group Якоб Нильсен.

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

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

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

Снизить информационную нагрузку и облегчить выбор: закон Хика

Закон Хика гласит: «Время реакции на выбор возрастает пропорционально количеству и сложности вариантов выбора».

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

Как использовать в дизайне. Закон Хика часто применяется при проектировании меню на сайтах так: выделяют крупные, основные разделы товаров или услуг, а внутрь них помещают мелкие, уточняющие разделы.

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

Найти фичи, которые приведут в восторг: модель Кано

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

Как работает. UX-дизайнеры оценивают реакцию пользователей на элементы приложения по модели Кано. И делят элементы на 3 группы: базовые, желаемые и восхищающие. Первая группа определяет жизнеспособность приложения, а вторая и третья — его конкурентоспособность.

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

Желаемые элементы поддерживают ожидаемый уровень сервиса. Чем лучше развиты желаемые элементы в приложении, тем выше пользователь его оценит.

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

Если восхищающие элементы появляются, клиент испытывает wow-эффект и делится впечатлениями со знакомыми. Кано считал, что восхищающие элементы запускают сарафанное радио. А 92% клиентов доверяют сарафанному радио больше, чем рекламе.