👀 Как управлять вниманием пользователя на сайте

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

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

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

Закон Хика
Чем больше вариантов выбора, тем больше времени необходимо для принятия решения.

Пользователю проще принимать решение, когда он видит 7÷2 вариантов. Например, не размещайте на главной странице слишком много вариантов товаров или не делайте больше трех тарифов на ваши услуги. Так будет проще решиться на действие: оформить заказ или оставить заявку.

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

Подробнее о том, как организовать контент, можно узнать в статье «Визуальная иерархия сайта» на Tilda Education: https://tilda.education/articles-visual-hierarchy

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

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

Совет
Чтобы проверить, что пользователь воспринимает информацию так, как задумывалось, наложите поверх макета блюр. Отвлекитесь на другие задачи на 20 минут, а затем взгляните на пятна. Если блоки контента считываются в правильной последовательности, то вы всё сделали верно.