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

Собрали основные законы и принципы, которые стоит учитывать при разработке интерфейсов.

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

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

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

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

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

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

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

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

Больше примеров показали в статье «Как применять закон Парето в дизайне мобильных интерфейсов».

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

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

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

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

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

Еще 4 способа разобрали в статье «Как применять закон Фиттса в дизайне веб- и мобильных интерфейсов».

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

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

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

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

В статье «Как работает закон Якоба в дизайне интерфейсов» показали, что произойдет, если все же нарушить привычные шаблоны.

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

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

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

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

О ситуациях, когда закон Хика не поможет — рассказали в статье «Как использовать Закон Хика в дизайне интерфейсов».

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

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

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

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

Какие еще приемы мотивируют пользователя не бросать задачу — показали в статье «Эффект Зейгарник или как довести пользователя до цели через незавершенное действие».

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

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

Как использовать в дизайне. «Скороход» продавал кроссовки через розничные магазины. В 2020 году продажи упали и компания решила выйти в онлайн. Она инвестировала в приложение, но получила недовольные отзывы клиентов. Тогда «Скороход» обратился в дизайн-студию «Ух какой UX», чтобы доработать интерфейс приложения и задобрить пользователей.

UX-дизайнеры и Product-менеджеры собрались на брейншторм. Они проанализировали рынок и покупателей «Скорохода», собрали тренды мобильных приложений и предложили 5 обновлений для интерфейса.

Чем закончился эксперимент и как не сливать деньги на ненужные элементы, рассказали в статье «Как тестировать интерфейс приложения по модели Кано».

Спасибо за внимание!

Редакция Heads and Hands