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

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

Это блог студии Heads and Hands

Мы разрабатываем цифровые экосистемы и супераппы. Рассказываем про пользовательский опыт и помогаем бизнесу стать лидером рынка.

👉🏻 Вступайте, чтобы быть в курсе

👉🏻 Заглядывайте к нам в Telegram

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

124124
19 комментариев

Интерфейс не должен нравиться пользователям, он должен быть удобным и решать задачу

— Ваш дизайн говно
— Это дизайн говна
— Тогда недурно!

16
Ответить

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

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

9
Ответить

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

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

3
Ответить

Поиск есть в отдельной вкладке в разделе "Каталог". А так да, общепринятый паттерн. Да и больше особо пихать его некуда.

1
Ответить

Комментарий недоступен

Ответить

честно говоря, эти "законы" уже стары как мир

3
Ответить

Главное, что строители интерфейсов как нарушали эти законы, так и нарушают.)

Ответить