Законы и принципы UX — рекомендации, помогающие дизайнерам создавать более удобные и ориентированные на пользователей интерфейсы.
Законы UX представляют собой “сценарии”, в соответствии с которыми мы воспринимаем окружающий мир и обрабатываем полученную информацию.
Некоторые принципы существуют долгое время, а другие были сформулированы совсем недавно. В любом случае, все они по-прежнему актуальны и применимы к существующим технологиям. Они подробно описаны на замечательном сайте Джона Яблонски “Законы UX”.
Законы UX чаще всего рассматривают как что-то, применимое лишь в мире дизайна. Я же считаю, что все они используются и в реальном мире, сознательно или нет.
В статье я хочу рассказать, каким образом и где я столкнулся с этими законами за пределами цифрового опыта. Давайте приступим!
1. Закон Фиттса
Время достижения цели прямо пропорционально расстоянию до цели и обратно пропорционально размеру цели.
В реальном мире
Офисный стол
Допустим, вам надо соединить несколько листов бумаги вместе: найти скрепки будет сложнее, чем степлер. Также труднее обнаружить ручку на столе, расположенном в другом конце помещения, чем на том, рядом с которым вы стоите.
В торговом центре
То, насколько быстро вы сможете найти в торговом центре знак, обозначающий туалет, зависит от его размера и удаленности от места, где вы находитесь. Чем больше и доступнее указатели, тем легче их обнаружить.
В дизайне
UI слева: кнопка призыва к действию (CTA) слишком маленькая, никак не выделяется и почти неотличима от остальных элементов формы. Пользователю потребуется какое-то время, чтобы нажать или даже заметить такую кнопку.
UI справа: CTA достаточно большого размера и сразу бросается в глаза. Она четко обозначена, поэтому пользователю легко понять, какое действие необходимо выполнить.
2. Закон Хика
Время, необходимое для принятия решения, увеличивается с количеством доступных вариантов.
В реальном мире
В сети ресторанов быстрого питания 🍔
По сравнению с ресторанами, сети быстрого питания предлагают клиентам ограниченное количество опций. В результате люди быстрее заказывают еду, а обслуживание осуществляется за минуты. Если вы зайдете в кофейню CCD (Café Coffee Day), вы, вероятнее всего, закажете кофе.
В дизайне
При пересылке сообщения в Whatsapp вы увидите раздел “Часто используемые контакты” над списком “Последних переписок”. Предположим, что вы часто пересылаете мемы другу после работы — вам не придется пролистывать все чаты, в которых вы участвовали в последнее время. Нужный контакт попадет в раздел из трех часто используемых, что упростит опыт взаимодействия для пользователя.
3. Закон общего пространства
Элементы воспринимаются как единая группа, если они находятся внутри области с четко обозначенной границей.
В реальном мире
В магазине одежды
Разные предметы одежды размещены на отдельных полках. Даже ничего не зная об этом магазине, вы будете воспринимать предметы на одной полке как похожие. Если на полке лежит рубашка 👕, посетитель поймет, что и все остальные предметы здесь — рубашки 👕.
В дизайне
На сайте Myntra все элементы сгруппированы в пределах обозначенных границ. Можно четко отличить фильтры / параметры сортировки и результаты поиска товаров на странице.
4. Закон Якоба
Пользователи проводят большую часть времени на других сайтах. Это означает, что они хотели бы, чтобы ваш сайт работал так же, как все другие знакомые им сайты.
В реальном мире
Дверь в отеле 🚪
Приезжая в отель, вы ожидаете, что объекты будут функционировать так же, как в вашем доме. Например, вы привыкли, что дверь на балкон открывается, если ее толкнуть, и предполагаете, что в отеле она работает аналогичным образом. Поэтому, если дверь окажется раздвижной, вы, вероятно, сначала по привычке ее толкнете.
В дизайне
Вот несколько панелей навигации известных в Индии сайтов электронной коммерции: Amazon, Flipkart, Myntra, Snapdeal и Paytm. Информация и порядок ее размещения аналогичны во всех примерах. Слева логотип, по центру — поле поиска, другие элементы, такие как профиль и корзина, — справа.
5. Эффект последовательного позиционирования
Пользователи лучше запоминают первый и последний элементы в серии.
В реальном мире
Номер телефона
Пытаясь вспомнить номер телефона друга, вы зачастую сможете восстановить в памяти лишь первые 4 цифры или 3 последние. Этот закон также является причиной того, почему номер кредитной карты разбивают на группы из 4 цифр.
Список дел
Если вы посмотрите на приведенный выше список дел несколько секунд, а затем закроете его, вы, скорее всего, запомните несколько пунктов либо в начале, либо в конце списка. Можете попробовать сами.
В дизайне
Давайте рассмотрим главную страницу сайта Amazon в Индии. В верхней части сайта всегда расположены основные элементы:
- В шапке мы видим логотип, поле поиска и другие важные опции.
- Следом идет карусель, привлекающая внимание пользователя к новым акциям и предложениям.
6. Эффект Ресторфф
Эффект Ресторфф, также известный как эффект изоляции, предполагает, что среди однородных объектов человек лучше всего запоминает те, которые отличаются от остальных.
В реальном мире
В торговом центре
Креативная реклама или необычное расположение товаров, яркие цвета или большие размеры. Вы непроизвольно обратите внимание на эти объекты и, вероятнее, запомните или заметите бренд, витрина которого оформлена в неоново-зеленом цвете и включает огромные белые буквы, чем серое рекламное объявление с черным текстом.
Прогулка по улице в Бангалоре
Предположим, вы идете по улице, на которой расположено множество современных домов со стеклянными фасадами. Вдруг вы видите дом ярко-желтого цвета со скошенной крышей в традиционном стиле. Вы запомните улицу по этому уникальному дому. Даже описывая место друзьям, вы расскажете им именно о нем.
В дизайне
Дизайнеры всегда визуально выделяют кнопки призыва к действию, чтобы пользователи сразу обращали на них внимание и четко понимали, какое целевое действие необходимо совершить на странице. Если же CTA найти трудно, человек, возможно, вообще не выполнит стоящую перед ним задачу.
7. Эффект эстетики в юзабилити
Пользователи часто воспринимают эстетически привлекательный дизайн как более удобный.
В реальном мире
В автосалоне
Когда вы находитесь в автосалоне люксового бренда, вас меньше заботит функциональность транспортных средств. Конечно, прежде чем покупать автомобиль, вы узнаете его технические характеристики. Но перемещаясь по выставочному залу автосалона, вы испытываете положительные эмоции от одного внешнего вида машин.
В дизайне
Заходя на такой понятный минималистичный сайт, как Airbnb, вы подсознательно начинаете доверять компании и ожидаете от нее услуг высокого качества. Снимая жилье через этот сайт, мы остаемся в чужом доме на ночь, поэтому доверие играет здесь ключевую роль. Я бы не хотел бронировать эту же комнату на неаккуратном сайте, который вызывает у меня подозрения.
8. Правило пика и завершения
Люди оценивают опыт на основе того, как они чувствовали себя на его пике и в конце, а не по общей сумме ощущений или среднему восприятию в каждый момент.
В реальном мире
Футбольный матч
Когда вы смотрите футбол, общее впечатление зависит от того, как закончится матч (кто выиграл), и пиковых моментов (кто забил больше голов / самые захватывающие моменты матча).
В дизайне
Заказ пиццы в 2 часа ночи
Вы голодны и вам не терпится съесть пиццу. Вы заходите в приложение для заказа еды и 10 минут изучаете доступные варианты, а затем выбираете любимую пиццу. Ваше чувство голода находится на пике и усиливается с каждой минутой. Вы пытаетесь оформить заказ, но оплата не проходит.
В этот момент не имеет значения, насколько хорошо спроектировано приложение и насколько красив интерфейс. В конце концов, вы так и не смогли выполнить задачу — заказать пиццу, и именно это вы запомните.
За последние 3 года я изучил множество источников о законах UX и особенностях их применения. В статье я попытался привести ситуации из реальной жизни, в которых эти законы используются намеренно или случайно. Я никогда не видел материалов, где они рассматривались бы именно с этой точки зрения, поэтому было интересно первым представить вам свои идеи.