Первое впечатление — важно. И с этим не поспоришь.
Еще сотню лет назад поспорить было бы можно, ведь по большей части организации были монополистами, но мы с вами живем во времена нескончаемой конкуренции. За внимание пользователя нужно бороться.
Большие баннеры, яркие иллюстрации, интригующие (а иногда и провокационные) заголовки — существует невероятно много способов притянуть взгляд человека. Например, старые добрые GIF-анимации на сайтах уже не несут компаниям никакой эффективности, а чаще — и вовсе отталкивают. Одни способы выходят из моды, а другие, напротив — проходят проверку временем и остаются даже несмотря на веяния трендов. Но как понять, что в итоге сработает, а что окажется бесполезным?
Весь секрет кроется в том, чтобы разработать такой дизайн, от которого человек не сможет оторвать взгляд, пока не просмотрит страницу до самого футера. Цель трансформировалась — нужно не просто привлечь внимание, а основательно завладеть им. Заинтересовать так, чтобы пользователь пролистал сайт целиком, и, впечатленный, нажал на кнопку «Купить».
Давайте разберемся, о чем нужно задуматься при разработке дизайна сайта, чтобы управлять вниманием пользователя в пользу вашего бизнеса.
Что такое внимание и как оно работает
Если кратко, то внимание — это
направленность органов восприятия на объект, процесс или информацию, которые имеют для человека какое-то значение в определенный момент времени.
Мы не будем говорить обо всех видах внимания, которые выделяют ученые. Вместо этого рассмотрим только те, которые в первую очередь стоит взять в расчет при разработке дизайна для сайта — непроизвольное и произвольное.
- Непроизвольное внимание работает в те моменты, когда мы не напрягаемся, чтобы на чем-то сосредоточиться.
Это может быть поразительное событие, мимо которого невозможно пройти, яркий и пестрый объект, немедленно приковывающий взгляды, или занятие, совпадающее с кругом наших интересов, мысли к которому возвращаются снова и снова.
За этот вид внимания наибольшую ответственность берут чувства и эмоции человека.
- Произвольное внимание (волевое, активное) работает только тогда, когда мы силой воли заставляем себя на чем-то сосредоточиться.
Под пример этого вида внимания подходит любая деятельность, которая предшествует выполнению какой-либо цели. На такой деятельности мы концентрируемся, как правило, не из-за ее чрезвычайной привлекательности (яркость, громкость, степень раздражительности), и не из-за удовольствия от процесса ее выполнения, а благодаря одному лишь усилию воли.
Этот вид внимания мы полностью осознаем и контролируем, что и отличает его от непроизвольного.
Если вы хотите управлять вниманием пользователя в интерфейсах, помните про особенности этих видов при разработке дизайна. Вызвать непроизвольное внимание — это только полдела, а вот заставить человека вовлечься и остаться на сайте — задача посложнее.
Принципы и законы восприятия в дизайне
Когда человек смотрит на изображение, он видит точки. Мозг складывает точки в линии, сканирует их и создает вектор внимания. Траектория, по которой прокладывает свой путь вектор внимания, в дизайне называется силовой линией. Именно по силовым линиям каждый пользователь просматривает страницу сайта, интерфейс приложения или любое другое статичное или динамичное изображение.
Дизайн выделяет несколько вариантов расположения силовых линий.
1. Диаграмма Гутенберга
Самый распространенный паттерн, при котором взгляд человека движется по странице сверху вниз. Простой пример — чтение книги.
Стоит упомянуть, что движение начинается не строго сверху, а именно из левого верхнего угла экрана, затем скользит в правый верхний угол, спускается по диагонали налево вниз и оттуда быстро переходит в правый нижний угол.
Любопытный факт: диаграмма названа по фамилии одного из создателей книгопечатания.
2. F-паттерн
Паттерн, который используется чаще всего на страницах с большим объемом текста и малым количеством графики. Взгляд следует по силовым линиям, расположенным в виде буквы F.
Паттерн подразумевает, что к концу страницы внимание пользователя снижается, он начинает отвлекаться и обрабатывать лишь некоторые фрагменты информации.
Поэтому чем выше вы разместите важную информацию на странице сайта, тем вероятнее пользователь с ней ознакомится и выполнит те действия, которых вы от него ждете. А вот в конце страницы следует размещать ту информацию, которая будет требовать от пользователя как можно меньше усилий на обработку.
Например, призыв к действию. При грамотно разработанных дизайне страницы и структуре текста человек к концу чтения уже должен определиться с решением.
3. Z-паттерн
Как и F-паттерн, был выявлен Якобом Нильсеном благодаря технологии айтрекинга. Z-паттерн наблюдался при просмотре страниц, на которых текста было мало, а вот графические элементы занимали наибольшую часть.
При этом виде восприятия пользователь начинает ознакомление в левой верхней области страницы, затем по горизонтали переходит в правую верхнюю. Аналогично форме буквы Z, взгляд следует по диагонали в левый нижний угол, а заканчивает свой путь в правом нижнем углу экрана.
4. Закон близости
Не всегда списки и подробные разъяснения необходимы. Расположите элементы близко друг к другу и отделите от остальных на странице, и пользователь не задумываясь поймет, что они принадлежат к одной группе.
Вспомните об этом законе, чтобы внимание в дизайне вашего сайта не рассеивалось у пользователя на обилие маркеров, которыми отмечены пункты в списках. Корректное расположение элементов без визуального шума может не просто облегчить пользователю ознакомление с сайтом, а еще и вызвать симпатию.
5. Закон подобия
Элементы, которые похожи между собой, например, по цвету или форме, человеческий глаз сразу выделяет и соотносит между собой. Поэтому, даже если вы разделите элементы по столбцам, но внутри выделите несколько штук другим цветом, пользователь неосознанно придет к выводу о том, что у элементов есть нечто общее.
6. Закон Фиттса
Закон прост: чем больше размер цели, тем быстрее пользователь в нее попадет. Теперь перенесем это на дизайн сайта.
Выделите CTA (call to action) в большую яркую кнопку и человек гораздо быстрее и охотнее нажмет на нее.
7. Закон Хика
Количество информации, которое поступает в мозг человека, напрямую влияет на скорость принятия решения. Комфортнее всего пользователю принимать решение, когда он видит 7±2 вариантов перед собой.
Очевиднее некуда — чем больше у нас вариантов выбора, тем дольше мы думаем. Попробуйте выделить главную информацию и оптимизируйте ее, облегчайте пользователю выбор и не нагружайте страницу визуально. Помогите клиентам быстрее добираться до покупки вашего продукта.
Вы можете использовать все эти принципы для развития вашего бизнеса.
Способы управления вниманием пользователя в дизайне
При создании дизайна интерфейса необходимо понимать, что не каждый пользователь захочет сильно напрягаться, чтобы ознакомиться со страничкой. Поэтому, если ваша цель — продать продукт, сделайте дизайн для предполагаемого клиента интуитивно понятным и максимально простым, чтобы подвести его к покупке.
Способов управлять вниманием пользователя много, и вот несколько из них:
1. Контраст цвета
Контраст всегда притягивает наше внимание в первую очередь. Именно поэтому важнейшие кнопки и надписи рекомендуется делать ярче и заметнее остальных, чтобы пользователь мог их безошибочно найти.
На изображении ниже мы видим, что контраст цвета используется как способ пользователю понимать, какую услугу он рассматривает в данный момент. Ему не нужно держать ничего в памяти — это было предусмотрено дизайнером.
2. Контраст формы
Тут все просто: самый важный объект делайте самым большим на странице, а менее важные — поменьше. Тот же способ можно использовать, если хотите, чтобы человек просматривал информацию в определенном порядке. Сперва взгляд «прилипнет» к крупному элементу, а потом пойдет к тем, что менее заметны.
3. Типографика
Вы можете облегчить пользователю восприятие информации с помощью структурированной и легкой типографики. Предоставьте клиентам возможность сразу находить ключевые элементы на страницах вашего сайта. Вероятнее всего пользователь будет очень признателен вам, если ему не придется долго читать до необходимой графы или открывать «Поиск по странице».
4. Глубина и позиционирование
Для этого способа в дизайне используется иллюзия трехмерности: изменение размера, насыщенность тени и света, различие цветов. Тогда, если элемент больше по размеру и выделяется на фоне остальных объектов — он кажется ближе, и именно его пользователь заметит первее всего.
Кстати, всплывающие уведомления — один из примеров использования данного способа.
Другой пример:
5. Визуальный вес
Один из аспектов глубины, который касается непосредственно размера объекта. Чем он крупнее — тем больше в нем важности для человеческого восприятия.
6. Анимация
Даже небольшое движение на фоне статичных объектов может привлечь внимание моментально. Важно использовать анимацию умеренно и следить за тем, чтобы она не доставляла пользователю неудобств при просмотре интерфейсов сайта — и тогда анимация будет работать в вашу пользу.
7. Направление движения
Пользователь легко считывает направления движения в интерфейсе. Нажать на левую часть экрана, чтобы вернуться назад, и, наоборот, на правую, чтобы перейти к следующему элементу — довольно очевидные для большинства пользователей действия.
Пример использования на сайте автосервиса "Toyota Taganka":
В дизайне этого элемента переключение между карточками применяется вместо списка достоинств компании для потенциального клиента.
8. Звук
Можно использовать, чтобы оповестить пользователя об изменениях на странице. Например, об открытии чата на сайте Detailing-центра Kolorika пользователя оповещает звуковое уведомление.
9. Лицо и взгляд
Человек, будучи социальным существом, почти всегда при наличии на странице текста и фотографии лица обращает внимание первоначально на лицо. Применение этого способа в дизайне сайта может вызвать у пользователя симпатию и доверие.
И, все же, будьте осторожны, включая в дизайн фотографии людей. Тщательно продумывайте посыл, который хотите донести до гостя вашего сайта тем или иным изображением человека. Черты и выражение лица, позы тела и жесты должны строго соответствовать тому ощущению, которое вы намерены вызвать у пользователей.
Также очень не рекомендуем использовать стоковые изображения только ради того, чтобы добавить фотографии с людьми в дизайн. В этом случае гораздо вероятнее, что больше доверия у пользователя вызовут снимки реальных сотрудников вашей компании.
Пример включения данного способа в дизайн: размещение на странице изображение с человеком, который смотрит в направлении текста. Так и пользователь проследит его взгляд.
Способов управлять вниманием пользователей много, и в этой статье мы перечислили не все существующие. Важная особенность, которая присуща всем способам — это стремление облегчить жизнь читателю сайта.
Поэтому при планировании дизайна нужно понимать, что гораздо эффективнее — найти приятное для восприятия сочетание пары-тройки способов вместо того, чтобы использовать их все одним скопом. И, конечно, не забывайте, что восприятие у разных людей — разное.
Изучайте свою аудиторию тщательно, присматривайтесь к людям, с которыми хотите сотрудничать. Способ, который не сработает для одного человека, может отлично сработать для другого, и наоборот. Исследуйте все варианты и не останавливайтесь в анализе предполагаемых клиентов. Продолжайте отслеживать актуальные веяния в дизайне сайтов. В особенности — те, что могут понравиться вашей аудитории.
Нет единственно правильного способа, который стопроцентно сработает для любого. Но пока вы держите эту мысль в голове, вы остаетесь гибкими. Ищите то, что подойдет именно вашему сайту и именно вашему бизнесу. Спрашивайте коллег, своих клиентов, исследуйте конкурентов. Экспериментируйте. И добивайтесь поставленных целей.
Успехов!