Эти 12 законов внимания работают в дизайне мобильных приложений и сайтов

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

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

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

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

Недосказанность

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

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

Законы эстетики

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

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

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

Диаграмма Гутенберга

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

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

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

Z-паттерн

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

F-паттерн

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

Эффект серийной позиции

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

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

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

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

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

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

Закон Хика

Суть закона Хика сводится к формуле: чем больше вариантов, то есть разделов, полей и кнопок, тем больше времени понадобится пользователю, чтобы принять решение.

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

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

Закон Фиттса

Время, необходимое для перемещения указателя (например, ракеты или курсора мышки) к цели, зависит от ее размера, а еще от того, как далеко она находится. Чем заметнее и крупнее элемент, тем проще с ним взаимодействовать: нажимать, проводить пальцем или брать в руку. К тому же, чем элемент ближе, тем быстрее это взаимодействие может случиться.

В цифровых продуктах по закону Фиттса делают крупные кнопки призыва к действию с хорошими отступами, оптимизированные зоны клика в меню и понятные иконки управления. В приложениях — плавающие кнопки действия (FAB) в нижней части экрана, зоны свайпов с запасом, расстояние между элементами управления.

Закон Якоба Нильсена

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

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

Эффект фон Ресторфф

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

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

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