Истории

9 универсальных паттернов, которые помогут улучшить UX-дизайн

Истории
Елена Лиханова
Елена Лиханова

Старший редактор RB.RU

Елена Лиханова

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

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

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

9 универсальных паттернов, которые помогут улучшить UX-дизайн
Присоединиться

Что такое паттерн?

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

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

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

  • пользователи могут решить свои проблемы;
  • они могут сделать это быстро;
  • дизайн сводит к минимуму человеческие ошибки;
  • пользователи удовлетворены;
  • кривая обучения короткая или вообще отсутствует;
  • дизайн пользовательского интерфейса соответствует требованиям бизнеса (коммерческий успех).

Шаблоны необходимы для UX-дизайна?

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

Топ-9 паттернов в UX-дизайне

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

Закон Фиттса

«Чем дальше и меньше объект, тем меньше шансов точнее к нему переместиться»

Согласно закону Фиттса, вероятность достижения цели зависит от размера и расположения интерактивных элементов.

Для контекста, Пол Фиттс был психологом, который изучал, как люди движутся к своим целям. В 1954 году он пришел к выводу, что время, необходимое для достижения цели, зависит не только от того, насколько она далека, но и от ее размера. «Чем дальше и меньше объект, тем меньше шансов точнее к нему переместиться».

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

пример интерфейса Patreon

Скриншот: hongkiat.com

Например, на сайте Patreon пользователи могут кликнуть и по текстовому меню, и по целому  блоку.

Закон Хика

«Чем меньше вариантов, тем быстрее делается выбор»

Хик выдвинул свой закон в 1952 году, предположив, что выбор из слишком большого числа опций заставляет «слишком долго думать». Теперь это главный принцип для сервисов по подбору товаров. Все мы знаем, что пытка выбора одна из самых тяжелых. UX-дизайнеры, которые заботятся о пользователях, не хотят подвергать их такому испытанию.

Но что делать, если уменьшить количество вариантов невозможно? Попробуйте разбить их на более простые этапы. Закон Хика направлен на то, чтобы облегчить пользователю выбор. Иногда список вариантов может быть безграничным, и сократить его трудно. Для примера возьмем Netflix: кажется, что на платформе бесконечно много фильмов и сериалов.

Закон Хика на примере Netflix

Скриншот: Techradar

Однако Netflix сумел избавить пользователей от мучений, связанных с трудным выбором. Для этого была введена функция «Топ-10 в вашей стране».

Закон Джейкоба

«Чем более знакомым кажется сайт, тем больше он понравится пользователям»

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

Дизайнеру приходится принять суровую правду – пользователи проводят много времени на других сайтах. Последнее, что они хотят делать, — это узнавать что-то новое при посещении нового сайта.

Иллюстрация к закону Джейкоба

Скриншот: uxplanet.org

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

Закон Прагнанца

«Человеческий мозг склонен интерпретировать сложное через более простые формы»

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

Поэтому не делайте UX-интерфейс загадкой для пользователя, поскольку он либо не понимает его, либо упрощает до понятной формы.

Закон Прагнанца

Скриншот: hongkiat.com

Обычно это справедливо для иконок на сайтах.

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

«Элементы, располагающиеся близко друг к другу, воспринимаются как одна группа»

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

закон близости

Скриншот: hongkiat.com

Закон внутреннего и внешнего

«Чтобы отличить один элемент от других, сделайте его более отдаленным»

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

Закон внутреннего и внешнегоСкриншот: hongkiat.com

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

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

«В среднем человек может удерживать внимание на 7 элементах одновременно»

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


Читайте по теме:

Пять нейросетей, которые раскрасят ваши фотографии

Создать персонализированные баннеры — как сделать это быстро и бесплатно


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

Краевой эффект

«Люди лучше запоминают первый и последний элементы в ряду»

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

Краевой эффект: люди лучше запоминают первый и последний элементы в ряду

Скриншот: hongkiat.com

Эффект Ресторфф (изоляции)

«Среди похожих объектов в ряду люди заметят изолированный»

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

Совет дизайнерам: если вы хотите что-то подчеркнуть, придайте этому другую форму или отделите от других элементов.

Общие рекомендации, основанные на паттернах

Навигация

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

Формы

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

Общие рекомендации

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

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

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

Источник.

Фото на обложке: Unsplash

Подписывайтесь на наш Telegram-канал, чтобы быть в курсе последних новостей и событий!

Нашли опечатку? Выделите текст и нажмите Ctrl + Enter

Материалы по теме

  1. 1 Быстрый онбординг и вовлеченность сотрудников: зачем компании описывать HR-процессы
  2. 2 3 рабочих инструмента, чтобы бизнесу не умереть в первый год
  3. 3 Подводим итоги месяца в компании — как делать это правильно?
  4. 4 ТРИЗ — что это и как внедрять?
  5. 5 Как заключить договор на издание ПО: условия и особенности
ArtTech — карта разработчиков арт-технологий
Все игроки российского рынка технологий для искусства
Перейти