Законы UX: как провести пользователя по сайту, чтобы он сделал покупку?

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

Что ожидает найти на сайте посетитель

Как только посетитель заходит на сайт, он начинает искать ответы на три ключевых вопроса:

• Что происходит?
• Какую пользу это мне даст?
• Почему я должен это покупать?

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

• информирование – посетитель направляется от одного действия к другому;
• эмоциональное воздействие – если условия равны, выбор будет сделан в пользу более приятной картинки;
• указание на взаимосвязь – правильная группировка элементов и категорий позволит пользователю проще ориентироваться.

Как посетитель просматривает контент

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

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

• Паттерны на десктопах;

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

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

• Паттерны на мобильных устройствах;

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

Сетка позволяет разместить на странице максимальное количество контента, а для привлечения внимания используется контраст.

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

Расставляем акценты

Одна из важных задач дизайнера – распределить контент в пространстве сайта, показав пользователю, какая информация наиболее важная:

• Контрасты;

Важные вещи делают контрастными по отношению к остальному контенту. И чем важнее информация, тем ярче она смотрится.

• Глубина;

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

• Цвет;

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

В заключение

Чтобы провести посетителя по сайту к точке «Х», нужно не просто использовать имеющиеся паттерны и эффекты. Важно сделать это умело – сгруппировать одни элементы, выделить другие. Нарушайте монотонность и старайтесь избегать повторов. Но задачу по организации пространства и разработке сайтов стоит доверить профессионалам. И сделать это намного проще, когда под рукой находится площадка, вроде Workspace (рабочая область), которая объединила небольшие и крупные компании, начинающих и опытных исполнителей.