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

UX-паттерны часто воспринимаются как занудная догма, мешающая творчеству. На самом деле — это язык, на котором пользователь разговаривает с интерфейсом. Если вы внезапно решите перейти с кириллицы на клинопись, разговор может не получиться.

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

Якоб Нильсен (датско-американский специалист в области юзабилити, исследователь взаимодействия человека и компьютера) говорил:

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

Паттерны — это не шаблоны, а грамматика

Подобно ДНК, интерфейс несёт набор инструкций — куда смотреть, куда кликать, что ожидать. Паттерны — это UX-ДНК, прошедшее естественный отбор. Выжили те элементы, которые позволяли быстрее достигать цели и не страдать.

Нарушать можно всё, но важно понимать: против законов UX можно бороться только зная их, а не игнорируя. Если хотите «взломать систему» — делайте это как инженер: с тестами, метриками и фолбеком, а не как художник, случайно убравший тормоза у велосипеда.

Примеры стандартных паттернов

• Хедер: логотип + навигация + корзина/вход.

• Каталог: фильтры слева, товары в сетке справа.

• Карточка товара: фото слева, описание и кнопка «Купить» справа.

• Форма: метка сверху, поле ввода под ней, кнопка внизу.

• Лендинг: главный экран с оффером, затем преимущества, отзывы, контакты.

Даже если мы хотим быть «уникальными», мы должны строить на этих структурах, а не ломать их.

Почему это работает ?

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

“Я вроде уже делал это тысячу раз, почему тут по-другому?”

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

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

UX-дизайн давно перестал быть про «чувствую, что красиво». Сегодня это прикладная наука о мозге, внимании и моторике. Законы Фиттса, Хика и Миллера — не просто фамилии из учебников. Это объяснение того, почему кнопка должна быть большой, форма — короткой, а выбор — ограниченным.

Так что давайте на минуту снимем береты художников и наденем белые халаты исследователей.

Закон Фиттса: чем ближе и больше цель — тем легче попасть

Автор: Пол Фиттс, американский психолог, 1954 год. Изучал время, которое человек тратит, чтобы навести курсор (или палец, или самолёт) на цель. Да-да, изначально этот закон вообще родился из авиации: Фиттс наблюдал, как пилоты двигают рычаги в кабине и промахиваются по ним в стрессовых условиях.

Фиттс вывел зависимость:

где:

• T — время, необходимое для попадания в цель;

• D — расстояние до цели;

• W — размер цели (кнопки, области клика);

• a, b — эмпирические коэффициенты (зависят от устройства и среды).

Проще говоря:
? чем дальше и меньше кнопка — тем дольше пользователь будет к ней тянуться (и чаще промахиваться).

Причём тут дизайн?

• Ближе = быстрее. Поэтому меню и навигацию на смартфонах спускают вниз, под палец.

• Больше = точнее. Поэтому CTA-кнопки не должны притворяться мелкими ссылками.

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

Закон Хика: чем больше выбор — тем дольше решение

Автор: Уильям Эдмунд Хик (William Edmund Hick) и Рэй Хайман, 1952 год. Британские психологи, изучавшие, как количество вариантов влияет на скорость реакции. Они показывали испытуемым разные сигналы и фиксировали, сколько времени потребуется, чтобы нажать нужную кнопку. Результат оказался закономерным: чем больше вариантов, тем дольше мозг думает, что выбрать.

Хик вывел зависимость:

где:

• T — время реакции,

• n — количество вариантов,

• b — константа (зависит от сложности задачи).

Простыми словами:
? время принятия решения растёт логарифмически с ростом числа опций.
То есть между выбором из 2 и 4 пунктов — большая разница,
а между 10 и 12 — почти никакой (мозг уже устал раньше).

Причём тут дизайн?

UX-дизайнеры сталкиваются с законом Хика каждый день — в фильтрах, меню, настройках, формах и каталогах:

• Чем больше кнопок — тем меньше кликов
  Когда на экране 15 одинаковых CTA, пользователь не выбирает, а зависает.

• Минимизируйте выбор
  Показывайте только то, что действительно нужно на этом шаге — остальное можно спрятать под “ещё” или отложить на следующий экран.

• Упрощайте формы
  Разделите длинную форму на шаги — лучше 3 коротких экрана, чем один с двадцатью полями.

• Каталоги и фильтры
  Не заставляйте человека разбираться в 60 подкатегориях: сгруппируйте по смыслу, дайте рекомендации, добавьте «популярное».

Закон Миллера: мы можем удержать в голове только 7 ± 2 элемента

Автор: Джордж А. Миллер, американский когнитивный психолог, 1956 год. В своей знаменитой статье “The Magical Number Seven, Plus or Minus Two” Миллер исследовал, сколько объектов человек способен удерживать в кратковременной памяти без ошибок. Ответ оказался простым и беспощадным: примерно 7 ± 2.

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

Причём тут дизайн?

UX-дизайн напрямую работает с вниманием и памятью пользователя. И вот тут закон Миллера бьёт точно в цель:

• Навигация
  Не перегружайте меню — оптимум 5–7 пунктов. Остальное — в подкатегории, фильтры или футер.

• Формы и карточки
  Если на экране больше 9 полей или блоков, мозг просто перестаёт их различать — пользователь “сканирует”, но не читает.

• Текст и списки
  Разбивайте информацию на короткие фрагменты — это снижает когнитивную нагрузку и улучшает запоминание.

• Интерфейсы обучения и онбординга
  Никто не осваивает 15 новых кнопок за раз — лучше дозировать функциональность по шагам.

Z-паттерн и F-паттерн сканирования

Авторы: Якоб Нильсен и Дон Норман — исследователи поведения пользователей и основатели Nielsen Norman Group, легендарной компании, которая уже несколько десятилетий ставит UX-эксперименты и фиксирует, куда именно смотрят наши глаза.

С помощью eye-tracking-камер Нильсен и Норман изучали, как взгляд пользователя движется по экрану. Оказалось, что человек не “читает” интерфейс, а сканирует его —
и делает это по узнаваемым траекториям.

• Для простых страниц и лендингов — работает Z-паттерн: взгляд идёт от левого верхнего угла к правому верхнему, затем по диагонали вниз и снова вправо — словно рисуя букву Z.

• Для контентных сайтов и текстовых страниц — F-паттерн: глаза движутся слева направо по нескольким строкам, постепенно «оседая» вниз, формируя букву F.

Причём тут дизайн?

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

• Кнопка действия — вниз и вправо
  Именно там взгляд завершает маршрут, поэтому кнопки CTA, формы или переходы логично ставить в этой зоне.

• Не перегружайте середину экрана
  Глаза её часто “перескакивают” — это нейтральная зона внимания.

• Для контентных сайтов (блоги, СМИ, статьи): выравнивание по левому краю облегчает сканирование, а подзаголовки и выделения создают «визуальные якоря» для F-движения.

Итоги: UX — это не искусство угадывать, а наука не мешать

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

Мы уже разобрались, почему дальние кнопки становятся невидимыми (Фиттс), почему слишком большой выбор приводит к параличу (Хик) и почему память не выдерживает энциклопедий на одном экране (Миллер). Добавим к этому траекторию взгляда от Нильсена и Нормана, и получаем не просто набор правил — а поведенческую карту мозга,
по которой стоит проектировать сайты, если вы не хотите воевать с биологией.

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

А в следующей части серии мы нырнём в другую сторону UX — ту, где Google и Яндекс становятся вашими неожиданными союзниками. Поговорим о том, как структура, заголовки и хлебные крошки влияют не только на роботов, но и на живых людей,
и почему SEO — это не враг дизайна, а его архитектурный брат.

Скоро здесь будет ссылка на “Анатомия UX 2. SEO как часть пользовательского опыта”
— о том, как построить интерфейс, который одинаково нравится и людям, и поисковым алгоритмам.