Skvot

Mag

Skvot              Mag Skvot Mag
Курсы по теме:
Законы психологии для дизайнера

Продакт-дизайнер GM Джон Яблонски собрал главные UX-правила.

card-photo
card-photo
Вика Пушкина

автор в SKVOT

Джон Яблонски — старший продакт-дизайнер в General Motors. Он много пишет о дизайне digital-продуктов и объясняет, как сделать его «этичным и человечным».

Главный хаб с его мыслями — проект Humane by Design, за который Яблонски получил награду Awwwards 2019. Но у него есть еще один полезный ресурс — компактный и простой сайт Laws of UX. Там Яблонски собирает и иллюстрирует главные законы психологии, которым подчиняется UX-дизайн.

Когда Laws of UX только запустился, на нем было 10 законов, и их перепостили почти все отраслевые СМИ. Сейчас законов 20. Мы их собрали, перевели и к каждому подобрали пример.

 

1. Эффект «эстетика в юзабилити»

Чем эстетичнее дизайн, тем скорее его посчитают удобным.

Встречают все-таки по одежке. Эффект «эстетики в юзабилити» подметили в 1995 году исследователи Масааки Куросу и Каори Кашимура из Дизайн-центра Хитачи.

Они провели эксперимент: показали 26 вариантов дизайна экрана банкомата 252 пользователям и попросили оценить удобство и красоту каждого. Оказалось: чем эстетичнее выглядел интерфейс, тем выше оценивали его функциональность (даже если она была так себе).

Сейчас тоже так. Сайт у довольно популярного сервиса Tumblr симпатичный, но не очень удобный. Например, выбор интересов в профиле выглядит хаотично. Раскладка красивая, но в русской версии почему-то сразу два языка (русский и английский), а кнопка выбора темная и в самом углу. А верхнее меню будто не прогрузилось:

2. Порог Доэрти

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

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

До 1982 года стандарт был 2 секунды — считалось, что в течение этого времени пользователь обдумывает задачу. Но потом исследователи из IBM Research Уолтер Доэрти и Арвинд Тадани выяснили, что за 2 секунды человек, скорее, переключится на что-то новое. Пришлось строить более мощные сервера, а интерфейсы делать удобнее.

Более того: чем быстрее отклик системы, тем быстрее отвечает ей пользователь. Например, при ответе системы в 0,3 секунды человек реагирует за 9 секунд. Когда система тормозит и отвечает за 3 секунды, человек думает 16 секунд:


Источник: medium.com/@Gugel

3. Закон Фиттса

Чем ближе и крупнее элементы, тем быстрее их выбирают.

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

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

Например, на сайте Patreon кликнуть можно не только по тексту в меню, но и по всей ширине блока:

4. Закон Хика

Чем меньше вариантов, тем быстрее происходит выбор.

Закон вывели психологи Уильям Хик и Рей Хаймон в 1952 году. Когда вариантов много, выбор усложняется — ты тратишь много времени на «подумать». Если сократить количество вариантов нельзя, разбивай процесс на несколько простых шагов.

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

5. Закон Якоба

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

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

Принцип похожести вывел американский UX-специалист Якоб Нильсен, а Яблонски объясняет, как им пользоваться: не грузи юзера новым и используй знакомые паттерны.

Посмотрите на сайты топовых производителей ноутбуков: Asus, Acer и HP. Они практически идентичны:

6. Закон общего пространства

Элементы внутри общей границы воспринимаются как группа.

Этот закон — из гештальтпсихологии. Ученые этого направления выяснили, что мозг всегда стремится объединять объекты в группы. Для этого он ориентируется на пять принципов: близость, сходство, непрерывность, замкнутость и связность.

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

7. Закон прегнантности

Сложный образ интерпретируется максимально простой формой.

В 1910 году гештальтпсихолог Макс Вертхаймер заметил, что мелькающую серию огней мы воспринимаем как непрерывно бегущую строку. Все потому, что мозг старается не переполняться лишней информацией и упрощает сложное. Это явление назвали прегнантностью (нем. «хорошая, полная форма»).

Поэтому не превращай изображения и интерфейсы в загадку для пользователя — он все равно упростит его до чего-то своего. Лучше создавай то, что не нужно долго интерпретировать. Лучший пример — базовые иконки. Например, как на левой панели сайта Pocket:

8. Закон близости

Близкие друг к другу элементы воспринимаются как группа.

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

По закону близости строится любой интерфейс. На веб-странице и экране за счет разных фонов легко выделить блоки. Вот как делает Apple:

9. Закон сходства

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

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

Яркий пример — инстаграм. В строке актуальных сторис иконки идут в одном стиле — круглые и с надписями в одном формате:

10. Закон связности

Чем больше элементы похожи, тем более связанными воспринимаются.

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

Этот принцип круто работает для интернет-магазинов, сервисов просмотра фильмов и других ресурсов, где информации ну очень много.

Например, на главной странице магазина Uniqlo товары показаны обычно на красном или бело-сером фоне, и позы моделей часто одинаковые:

11. Закон Миллера

Пользователь запоминает 7 (+−2) элементов за раз.

В 1956 году американский психолог Джордж Миллер выяснил, что человеческий мозг в среднем запоминает 7 (+−2) объектов. Поэтому у групп в интерфейсе должно быть максимум 9 элементов. А лучше 5 — чтобы точно никто не заблудился.

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

12. Бритва Оккама

Из одинаковых гипотез выбирай ту, в которой меньше предположений.

Бритва Оккама — это подход, который назвали по имени английского философа Уильяма Оккамского. Смысл в том, чтобы добавлять в систему только необходимое.

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

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

13. Принцип Парето

20% действий обеспечивают 80% результата.

Принцип 80/20 вывел итальянский экономист Вильфредо Парето, заметив, что 80% земли принадлежит 20% населения. Затем этот принцип сформировал целый образ мышления. В UX работают несколько вариантов этого закона:

  • — 80% внимания уделяется 20% интерфейса
  • — 20% функций отвечают за 80% действий
     

Пример реализации принципа Парето в дизайне есть у сайта Amazon. В списке со странами вверху стоит 20%, которые выбирают чаще всего:

14. Закон Паркинсона

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

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

Теперь правило применяют как к дедлайнам, так и в UX: дают пользователям ограниченное время для выполнения конкретной задачи. Например, на сайте Сoncert.ua на покупку билета в корзине выделяется 15 минут, а обратный отсчет времени идет в правом углу:

15. Пиковое правило

Пользователи обращают основное внимание на самый яркий момент и конец.

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

Из результата этого эксперимента Яблонски сделал сразу три вывода:

  • УДЕЛЯЙ внимание пику интереса и концу пользовательского пути в интерфейсе.
  • ОПРЕДЕЛИ моменты, когда продукт наиболее полезный, ценный и интересный, и улучши их с помощью дизайна.
  • ПОМНИ, что пользователи запоминают негативный опыт лучше положительного.
     

На сайте планировщика задач Asana закрытые таски отмечают симпатичной анимацией:

16. Закон Постела

Относись лояльно к пользователям и критично к себе.

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

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

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

17. Эффект порядкового номера

Пользователи лучше запоминают первые и последние элементы в списке.

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

Этому принципу следуют, например, в презентациях — акцентируют внимание на первых и последних слайдах. И часто используют в меню приложений и сайтов. Например, на верхней панели сайта Dribbble самые важные — кнопка логотипа и регистрация с поиском, они же крайние:

18. Закон Теслера

У любой системы есть объем сложности, который нельзя сокращать.

Ларри Теслер — информатик, изучающий взаимодействие компьютера и человека — утверждал, что систему нужно максимально упрощать. Но его коллега Брюс Тогнаццини, проектировщик первого интерфейса Apple, выяснил: слишком простую систему пользователь, наоборот, пытается усложнить.

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

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

Популярный сервис бронирования Booking позволяет «усложнять» поиск кастомными условиями — от места назначения до цели поездки или количества номеров:

19. Эффект фон Ресторфа

Из множества похожих элементов заметят тот, который отличается.

Не такие, как все, привлекают внимание — что и подтвердила в 1933 году психиатр Хедвиг фон Ресторф. Она заметила, что из группы одинаковых элементов лучше запоминаются те, которые изолированы или выглядят иначе.

Если хочешь что-то акцентировать — ставь ключевые объекты интерфейса подальше от остальных или оформляй их по-другому. С помощью этого принципа компании часто выделяют выгодные тарифные планы. Вот как это сделал файловый хостинг Dropbox:

20. Эффект Зейгарник

Пользователи запоминают то, что не доделали.

Советский психолог Блюма Зейгарник, которая изучала нарушения памяти, в 1920-х выясняла, как мы запоминаем завершенные и незавершенные задачи. Она определила, что вторые мы помним лучше.

Этот эффект важен и для UX-интерфейсов. Поэтому в дизайне делай напоминания для незаконченных задач и индикаторы выполнения сложных процессов.

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

Поделиться материалом
РАССЫЛКА SKVOT

Раз в две недели мы отправляем новые публикации и анонсы курсов на почту