Паттерны в UX-дизайне#
В нашей повседневной жизни мы делаем некоторые вещи автоматически и почти всегда одинаковым образом. Мы называем это привычками, шаблонами или паттернами. Они помогают привнести в жизнь структуру и упрощают принятие решений.
Тот же принцип подходит для UX-дизайна. Эти паттерны помогают дизайнерам создавать интерфейсы высокого качества и управлять вниманием пользователей.
Рассмотрим некоторые из самых популярных паттернов в дизайне и как их использовать, чтобы сделать интерфейс более удобным для пользователя.
Что такое паттерн?#
В психологии термин «паттерн» часто относится к повторяющемуся типу поведения, проявляющемуся в определённой обстановке с течением времени.
В дизайне интерфейса паттерны — это правила и закономерности, включая когнитивные искажения и шаблоны поведения.
Несмотря на то, что эти шаблоны применяются в дизайне, они имеют психологическую основу, поскольку предубеждения и правила проистекают из подсознательных мыслей и суждений.
Почему паттерны важны?#
Хорошие продукты должны:
- вызывать реакцию и эмоции,
- одновременно поощрять конкретные действия.
Таким образом, понимание того, как работают паттерны, помогает спровоцировать желаемые реакции пользователей.
Это необходимо для создания удобного в использовании дизайна, который отвечает следующим критериям:
- пользователи могут решить свои проблемы;
- они могут сделать это быстро;
- дизайн сводит к минимуму человеческие ошибки;
- пользователи удовлетворены;
- кривая обучения короткая или отсутствует;
- дизайн пользовательского интерфейса соответствует требованиям бизнеса (коммерческий успех).
Паттерны в UX-дизайне#
Закон Фиттса#
Note
Чем больше элемент и чем ближе он расположен к пользователю, тем проще на него навести курсор и нажать.
Закон Фиттса гласит, что время, необходимое человеку, чтобы переместить курсор на цель — например, на элемент интерфейса, зависит от расстояния до цели, разделенного на ее размер. По сути, это означает, что нам легче взаимодействовать с близко расположенными большими объектами. Первоначально этот закон был сформулирован психологом Полом Фиттсом в 1954 году. Он работал над оценкой способностей нервной системы и создал математические модели поведения человека.
Закон Фиттса#
Суть его эксперимента была проста: он расположил на доске на расстоянии друг от друга две чувствительные вертикальные полоски. Когда человек касался их инструментом (по сути, стилусом), ему засчитывалось «попадание в цель».
Целью испытуемого было как можно быстрее касаться поочередно то одной, то другой полоски. А Фиттс изменял их ширину, высоту и расстояние между ними.
В итоге, отслеживания время, проходящее между касаниями, Фиттс нашел четкую зависимость. Чем меньше размер полосок, тем больше времени испытуемые тратят на каждое касание. Даже если расстояние между полосками при этом физически не меняется. И наоборот: чем они крупнее, чем больше размер цели, тем быстрее люди ее достигают. Это и есть закон Фиттса.
Что это значит для нас?#
Закон Фиттса даёт количественную оценку дихотомии скорости и точности:
чем точнее нужно выполнить задачу, тем больше для этого потребуется времени.
В переводе на UI-дизайн это означает, что чем дальше от курсора или пальца находится цель — скажем, кнопка «Купить» или «Добавить в корзину» — тем крупнее она должна быть. Только так можно будет быстро добавить товары в корзину, и это не потребует особой точности.
Важность размера UI-элементов может показаться очевидной.
Но закон Фиттса не об увеличении размера ради визуального раздражения и привлечения внимания.
Речь идёт о сокращении времени, которое требуется пользователю, чтобы дотянуться до элемента интерфейса пальцем или курсором.
Часто это подразумевает увеличение размера UI-элементов, но можно использовать и другие методы, которые позволят пользователям более эффективно перемещаться по онлайн-магазину.
У этого закона есть один любопытный нюанс: размер любого экрана ограничен, а элементы, которые находятся на границах, имеют условно бесконечную ширину — потому что курсор при попытке попасть в них просто упрется в край экрана. А это значительно экономит время на то, чтобы достичь цели, в том числе и из-за отсутствия фазы торможения.
Из этого следует, что углы — это самые легкодоступные места на экране. Мы можем моментально передвинуть курсор в любой угол, не обращая внимания на реальные размеры элемента — и все равно в него попадем.
Не случайно в операционных системах важные элементы находятся в углах: иконка Windows или яблоко в MacOS.
Джеф Раскин, специалист по компьютерным интерфейсам, юзабилист, в своей книге «Интерфейс» посчитал, что для того, чтобы воспользоваться меню в MacOS, человеку в среднем требуется 0,6 секунды, в то время как на Windows эта операция занимает 1 секунду.
Все потому, что меню в Windows раньше располагалось с некоторым отступом от верха, потому что наверху находилось название программы, и приходилось целиться.
Несколько рекомендаций, которые помогут улучшить ваше приложение уже сейчас:
- Увеличьте область клика для чекбоксов и переключателей. Сделайте лейблы для этих элементов кликабельными. Это позволит уменьшить количество пользовательских ошибок.
-Расставьте контролы в вашем приложении, чтобы все они располагались по ходу основных пользовательских сценариев. - Сделайте больше отступ между взаимно нежелательными кнопками, например «Сохранить» и «Удалить»
- Для списка ссылок сделайте кликабельными не только надписи, но и все строки целиком.
- Используйте всплывающее меню в месте курсора. Это позволит сократить время, потраченное на перемещение мышки.
Закон Хика#
Note
Чем меньше вариантов, тем быстрее делается выбор
Закон Хика-Хаймана— подтвержденная экспериментально теория о том, что количество информации, которая поступает в мозг человека, влияет на время, которое он тратит на принятие решения.
В 1952 году психологи Уильям Хик и Рей Хайман вывели формулу, которая описывает логарифмическую зависимость между временем реакции и количеством опций, из которых нужно сделать выбор.
T = a + b * log2(n + 1)
Где:
T — это общее время реакции
a — задержка перед выполнением задания
b — индивидуальный коэффициент скорости принятия решения
n — количество вариантов, из которых нужно выбрать
Для наглядности давайте построим график:
Из графика следует, что при увеличении количества объектов увеличивается и время реакции в логарифмической зависимости.
Таким образом, чем меньше объектов, тем быстрее и проще выбрать из них нужный.
Закон Хика широко используется в проектировании интерфейсов, например при создании выпадающих меню, форм регистрации, контактных форм, меню навигации и многого другого.
Предположим, на вашем сайте порядка 40 разделов меню. Встает вопрос, как отобразить их?
Сгруппируйте разделы меню по категориям. Это позволит уменьшить количество опций, и, как следствие, уменьшит когнитивную нагрузку на пользователя. В качестве примера можно привести почти любой интернет-магазин техники или одежды.
Но что делать, если уменьшить количество вариантов невозможно? Попробуйте разбить их на более простые этапы. Закон Хика направлен на то, чтобы облегчить пользователю выбор. Иногда список вариантов может быть безграничным, и сократить его трудно. Для примера возьмем Netflix: кажется, что на платформе бесконечно много фильмов и сериалов.
Однако Netflix сумел избавить пользователей от мучений, связанных с трудным выбором. Для этого была введена функция «Топ-10 в вашей стране».
Закон Якоба Нильсена#
Note
Пользователи проводят большую часть времени на других сайтах, и от вашего сайта они ожидают, чтобы он работал таким же образом, как и другие сайты
Замечали ли вы, путешествуя по сети, как много сайтов похожи друг на друга? В других случаях это может показаться плохим знаком. Однако, когда дело доходит до сайтов, речь идет не о том, чтобы быть «уникальным и эксклюзивным», а скорее об удобстве использования.
В самом деле Пользователи проводят большую часть своего времени на сайтах, и они предпочитают, чтобы ваш https... работал примерно так же, как и остальные. Иными словами, мы должны создать такой UX-дизайн, в котором пользователи смогут сосредоточиться на своих задачах, а не на изучении новых моделей.
На основании какого механизма выведен этот принцип? Он называется ментальная модель. Это восприятие или представление человека о продукте, с которым он взаимодействует. И формируется оно на основе многократного использования других подобных систем: сайтов, приложений, интерфейсов — а также знаний, как именно они работают.
При знакомстве с новым продуктом человек будет переносить на него свои ожидания и привычки, которые выстроились вокруг другого похожего продукта. Яркий пример: если ребёнок в детстве играл на планшете, то он когда-то обязательно попробует свайпнуть телевизор, книгу или что-то подобное.
При этом стоит помнить, что ментальная модель не равна реальности, а ментальная модель дизайнера не равна ментальной модели пользователя.
Именно эту идею продвигает специалист по UX Якоб Нильсен: не перегружайте пользователей новыми концепциями, а используйте знакомые шаблоны.
Закон Прагнанца#
Note
Человеческий мозг склонен интерпретировать сложное через более простые формы
Закон Прагнанца также берет начало в гештальт-психологии. В 1910 году психолог Макс Вертхаймер заметил, что человеческий мозг воспринимает ряд мигающих огней как постоянно движущуюся линию. Причина этого, опять же, в склонности человеческого мозга упрощать сложные вещи и не перегружать себя.
Поэтому не делайте UX-интерфейс загадкой для пользователя, поскольку он либо не понимает его, либо упрощает до понятной формы.
Обычно это справедливо для иконок на сайтах.
Закон близости#
Note
Элементы, располагающиеся близко друг к другу, воспринимаются как одна группа
Этот принцип исходит из теории гештальта и предполагает: если требуется, чтобы элементы воспринимались как связанные друг с другом, их следует разместить рядом друг с другом.
Закон внутреннего и внешнего#
Note
Внутренние промежутки всегда должны быть меньше внешних
Это еще один аспект Закона близости. Каждый сложный элемент состоит из объектов меньшего размера: слова состоят из букв, строки — из слов, а текст — из строк.
Чтобы придать индивидуальность одному объекту, нужно увеличить расстояние между ним и другими.
Закон Миллера#
Note
В среднем человек может удерживать внимание на 7 элементах одновременно
Закон Миллера (также известен как «магическое число семь плюс-минус два») утверждает, что кратковременная память человека способна удерживать в среднем 7 ± 2 элемента (например, цифр, слов или объектов) одновременно.
В 1956 году Джордж Миллер, американский психолог, опубликовал статью под названием «Магическое число семь плюс-минус два: некоторые ограничения в нашей возможности обработки информации».
Проведя серию экспериментов, в ходе которых людям необходимо было различать звуковые сигналы с разной частотой, психолог выявил, что если количество сигналов 2 или 3, то у испытуемых не возникает сложностей в их определении. Начиная с 4-го сигнала появляются незначительные проблемы. А на 5-м и более звуках испытуемые ошибаются всё чаще. Помимо экспериментов со звуком также проводились эксперименты со вкусом, с визуальным восприятием и другие.
Миллер обобщил показатели всех экспериментов и получил то самое число 7±2. Именно такое количество элементов способна хранить кратковременная память среднестатистического человека.
Несмотря на то, что закон Миллера является одним из наиболее популярных и цитируемых в среде UX-дизайна, он не имеет почти никакого отношения к пользовательскому опыту и интерфейсам. Этот закон — миф, как и многие вытекающие из него убеждения о том, что количество элементов меню или элементов списка не должно превышать семь.
Начнём с того, что пользователю просто незачем запоминать информацию, она и так представлена в полном объёме на экране, поэтому он легко может оперировать большим количеством элементов. И незачем искусственно ограничивать это количество семью.
Human Factors International (HFI), одна из крупнейших компаний, специализирующихся на проектировании пользовательского опыта, провела исследования, в результате которых выяснилось, что объёмные, но неглубокие меню могут работать лучше, чем те, которые имеют большое количество вложенностей.
Даже сам Джордж Миллер был потрясён тем, насколько его статья была неверно истолкована, заявив, что исследования проводились для одномерных стимулов (звук, яркость и т. д.) и не имеют никакого отношения к способностям человека понимать печатный текст.
Тем не менее, основной вывод исследований Миллера для UX-специалистов следующий: кратковременная память человека ограничена, поэтому, если вы хотите, чтобы пользователи работали с бóльшим объёмом информации и запоминали её, разделяйте информацию на порции. Не просите пользователей одновременно хранить в краткосрочной памяти сразу много фрагментов информации. И не зацикливайтесь на цифре семь.
Краевой эффект#
Note
Люди лучше запоминают первый и последний элементы в ряду
Диаграмма ниже иллюстрирует этот принцип: слова, которые находятся в начале или конце ряда, закрепляются в памяти лучше тех, что следуют между ними.
Закон Теслера#
Note
Закон Теслера, или закон сохранения сложности, утверждает, что для любой системы существует определенный уровень сложности, который нельзя сократить.
Ларри Теслер — информатик, специалист в области взаимодействия человека и компьютера. Он работал в таких компаниях как Xerox PARC, Apple, Amazon и Yahoo. Фактически именно он ввел в оборот комбинацию клавиш Ctrl+C, Ctrl+V.
Он утверждал, что каждое приложение имеет определенную степень сложности. Единственный вопрос: кто будет иметь с этим дело? Пользователь, разработчик приложения или разработчик платформы?
Требуется довольно много работы, чтобы сделать что-то «простое». Уменьшая сложность для пользователя, мы переносим сложность на дизайнеров, разработчиков.
Давайте разберем простой пример — выбор типа платежной системы.
В первом случае выбор ложится на плечи пользователя, тем самым усложняя для него систему, но упрощая разработку. Во втором — тип платежной системы подставляется автоматически, когда пользователь начинает вводить номер карты. Это упрощает работу для пользователя, так как сложность задачи уменьшается на один шаг. Но разработка при этом становится сложнее.
Распространённая ошибка многих продуктовых команд — отдать как можно больше контролов для выбора пользователю, как будто он лучше знает, что с этим делать. Дизайнер рисует очередную пачку чекбоксов, говоря прямым текстом пользователю:
«Парень, теперь это твоя проблема».
Модель Кано#
Note
«Модель Кано» — методика, которая используется для оценки эмоциональной реакции потребителя на отдельные характеристики продукта. Она позволяет управлять удовлетворенностью и лояльностью потребителей, упрощает и оптимизирует процесс потребления.
Модель Кано разработана в 1984 году доктором Нориаки Кано.
Модель Кано позволяет проектировщикам гораздо лучше понять желания потребителей и избавиться от ненужных фич в продукте. С его помощью компании вырабатывают стратегии и решают задачи по обеспечению удовлетворенности и лояльности пользователей.
Кано разделяет все свойства продуктов на 5 категорий:
- Обязательные характеристики
- Линейные характеристики
- Привлекательные характеристики
- Безразличные характеристики
- Обратные характеристики
Давайте разберем каждую из них более подробно.
Обязательные характеристики#
Как и следует из названия, к обязательным характеристикам продукта относятся те, без которых продукт не будет работать надлежащим образом. Например, автомобиль без руля, смартфон без возможности совершать звонки и так далее.
Обязательные атрибуты должны присутствовать, ведь без них продукт не будет иметь ценность для потребителя.
Однако, как следует из графика ниже, уровень выполнения обязательных характеристик продукта не влияет на удовлетворённость потребителей напрямую.
Само наличие таких атрибутов в продукте не вызывает у пользователей больших эмоций, поскольку они считают, что эти атрибуты должны присутствовать в продукте по умолчанию.
Но если упустить какое-либо основное свойство, то никакие прочие свойства продукта не спасут потребителя от разочарования.
Линейные характеристики#
К линейным или одномерным характеристикам относят характеристики из разряда «чем больше, тем лучше». Например, объём памяти, расход топлива, ёмкость аккумулятора и прочие. Чем лучше значения этих показателей, тем выше удовлетворённость клиента.
Как показывает график, уровень удовлетворенности линейными характеристиками находится в прямой зависимости с уровнем функциональности указанного атрибута.
Привлекательные характеристики#
Привлекательные или восхищающие характеристики продукта — это киллер-фичи вашего продукта.
К таким характеристикам в своё время относилась функция iPhone Touch ID, а теперь и Face ID.
Автоматическая разблокировка MacBook часами Apple Watch, беспроводная зарядка смартфонов и многие другие.
Уровень выполнения привлекательных свойств не влияет на удовлетворённость потребителей напрямую.
Если восхищающее свойство отсутствует, потребители не будут разочарованы, так как у них не было никаких ожиданий относительно такого свойства.
Но зато если восхищающее свойство обнаружено потребителями, то благодаря эффекту неожиданности они будут настолько впечатлены, что просто не смогут удержаться и не поделиться своим открытием с другими.
Со временем многие привлекательные характеристики переходят в разряд обязательных.
Безразличные характеристики#
Это те функции и атрибуты продукта, которые потребителя мало интересуют или не интересуют вовсе; функционал, который никак не влияет на уровень удовлетворенности клиента продуктом.
В качестве примера таких свойств можно привести шифрование фотографий в Google Photos, сторона расположения бензобака на автомобиле и другие.
Обратные характеристики#
Обратные или нежелательные характеристики — это те свойства продукта, которые по мере роста своего количества уменьшают удовлетворённость пользователя продуктом.
В качестве примера таких характеристик можно привести огромное количество кнопок на руле автомобиля, которые отвлекают водителя,
или автомобильную парковку с большим количеством мест, но места в которой настолько узкие, что трудно открыть дверь автомобиля.
Как использовать Модель Кано?#
Для того, чтобы использовать Модель Кано, вам потребуется провести исследование целевой аудитории, выявить их видение характеристик вашего продукта.
Составьте список фич вашего продукта для каждого типа персон. Ведь один сегмент ваших потребителей будет видеть доминирующую ценность продукта в одних характеристиках, а другие — в других. Учитывайте этот факт при опросе.
Далее перейдём к самому опросу. Он состоит всего из двух вопросов, каждый из которых задаётся один раз для каждого атрибута:
- Как бы вы себя чувствовали, если бы продукт имел следующую характеристику?
- Как бы вы себя чувствовали, если бы продукт не имел следующей характеристики?
В качестве ответа опрашиваемым необходимо выбрать один из нескольких вариантов ответа:
- Мне бы понравилось
- Я ожидаю это
- Мне всё равно
- Я могу с этим жить
- Я бы не использовал продукт из-за этого
Обратите внимание на таблицу ниже:
Она состоит из нескольких категорий, отмеченных буквами:
- A — Attractive — Привлекательные
- O — One dimensional — Линейные
- M — Must-be — Обязательные
- I — Indifferent — Безразличные
- R — Reverse — Обратные
- Q — Questionable — Под вопросом
(Отражает неясные результаты, которые не могут быть оценены)
Таким образом, каждая пара ответов на пересечении строк и столбцов показывает тип категории для данной функции.
К примеру, если пользователь отвечает «1. Мне бы понравилось» на функциональный (положительный) вопрос и «2. Я ожидаю это» на нефункциональный (отрицательный) вопрос, то тестируемая функция попадает в категорию «A», т.е. привлекательная.
Обратите внимание также, что там, где вы получили R — людям не интересен ваш продукт, это не ваша целевая аудитория, а там, где вы получили Q — люди скорее всего не поняли вопрос.
Таким образом, Модель Кано может помочь выяснить требования клиентов к данному продукту и помогает в создании продуктов, которые приводят к высокой удовлетворённости клиентов.
Эффект Фон Ресторфф#
Note
Среди нескольких похожих объектов запомнится тот, что отличается от других.
В сущности, тот, кто не похож на других, всегда будет выделяться больше всех. Этот факт был подтвержден психиатром фон Ресторффом, который предположил, что в группе сходных элементов будут запоминаться изолированные.
Совет дизайнерам: если вы хотите что-то подчеркнуть, придайте этому другую форму или отделите от других элементов.
Предложение немного расслабиться#
Рассмотрим следующие дизайнерские решения и поймем что с ними не так