Skvot

Mag

Skvot Mag
Курсы по теме:

Как UX-дизайнеру управлять вниманием

10 базовых приемов — цвет, звук, анимация и «правило 20 секунд».
card-photo
card-photo
Саша
Дмитрук

Автор в SKVOT

19 октября, 2022 / Дизайн / Статья

Просто nice and friendly дизайна маловато, чтобы на твоем сайте или в приложении залипали. Нужно еще зацепить пользователя и привести его к цели.

Правда в том, что людям (всем нам) не нравится напрягаться и наше внимание часто рассеяно. Чтобы сфокусироваться и жить счастливую жизнь в диджитал-мире, нужна структурность — и тут поможет четкий UX-дизайн. Чтобы его создать, нужно знать, как управлять вниманием. Но сначала — понять, как оно работает.

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

Почему важно управлять вниманием

Юзеры не только лентяи — они еще и избирательные. По данным исследования канадских ученых, человек решает, понравился ли ему сайт, меньше чем за 0,5 секунды. И если не находит то, что искал, уже через 20 секунд закрывает страницу.

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

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

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

 

Как работает внимание

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

В контенте на экранах силовая линия обычно расположена по вертикали вниз или по «диаграмме Гутенберга» (названа в честь одного из изобретателей книгопечатания):

  • #1. Глаза начинают сканировать экран с левого верхнего угла («точка входа») 
  • #2. Переходят в правый верхний угол («точка высокого потенциала»)
  • #3. По диагонали уходят влево вниз («точка низкого потенциала») 
  • #4. Быстро переходят в нижний правый угол («точка выхода»)
  •  

Этот паттерн чаще всего используют при сканировании лендингов и во время регистрации. Но выделяют еще F-паттерн — он часто встречается там, где текста много, а графики мало:

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

10 способов управлять вниманием 

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

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

Цвет 

Цвет — самый простой способ привлечь внимание в UX. Цветом выделяют элементы, которые пользователь должен увидеть в первую очередь (обычно это кнопка call to action).

Помни, что существует иерархия цветов и каждый из них по-своему влияет на эмоции и реакции человека.

  • #1. Используй яркие цвета и их оттенки, чтобы привлечь внимание к важным кнопкам или вариантам.
  • #2. Менее яркими цветами выделяй элементы, которые нужно «приглушить».
  •  

Вот как может выглядеть цветовая система кнопок на сайте или в приложении. Источник: justinmind.com

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

Контраст

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

К примеру, в iOS кнопка delete — красная. Яркий цвет говорит: элемент отличается от других — и это сразу привлекает внимание.

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

Как привлечь внимание к кнопке call to action с помощью контраста цвета. Источник: uxplanet.org

Масштаб 

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

  • #1. Самый важный элемент дизайна делай самым большим. Это может быть текст, иллюстрация — все, на что нужно обратить внимание в первую очередь.
  • #2. Используй не более трех градаций элементов — маленькие, средние и большие. Это ровно столько, сколько несложно запомнить.
  •  

Принцип работы масштаба: больше всего внимания — самому крупному элементу. Источник: dribbble.com

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

Группировка

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

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

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

  • #1. Давай элементу «дышать». Объект, вокруг которого больше пространства, видят как одну группу (он получит больше внимания).
  • #2. Не перегружай группу элементами. Когда их много — внимание, скорее всего, будет разделено между элементами.
  • #3. Собирай группу в «контейнер». Если одного визуального сигнала мало — создай для группы границы или фон.
  •  

Шрифт

По данным Nielsen Norman Group, 79% пользователей интернета сканируют, а не читают страницы. Поэтому, если шрифт (а также его размер и контраст) подобран корректно, юзер легко увидит ключевые фрагменты, даже не читая текст.

  • #1. Выбирай шрифт с разборчивыми символами и читабельным контрастом.
  • #2. На десктопе должно быть три группы шрифтов: заголовок, подзаголовок и основной текст. На мобильных устройствах — две группы (заголовок и основной текст).
  • #3. Используй заголовок, чтобы привлечь внимание к основной информации на экране.
  •  

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

Глубина

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

  • #1. Создавай эффект глубины, используя тени или размытие.
  • #2 Делай более важный элемент крупнее, чем другие, чтобы он казался ближе.
  •  

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

Еще один прием, чтобы показать глубину, — градиент: когда цвет фона постепенно меняется на другой. Вот как применили градиент в лендинге манифеста Atomic

Негативное пространство

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

  • упрощает зрительное восприятие информации
  • помогает сфокусироваться на каждом фрагменте дизайна отдельно
  •  

Например, если интерфейс перегружен визуалом, кнопка call to action может затеряться. Чем больше белого цвета будет вокруг кнопки — тем заметнее она станет.

Белое пространство также позволяет показать связь между элементами интерфейса. Для этого уменьшай его количество между объектами — они будут казаться группой.

Сложно не обратить внимание на новый iPhone, который буквально купается в белом пространстве на сайте Apple.

Анимация

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

  • привлечь внимание к конкретным элементам
  • подтолкнуть к действию (свайп вправо в приложениях) 
  • — показать «вознаграждение» за действие (анимированное зачисление бонусов)
  •  

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

  • #1. Привлечь внимание к важным процессам («скачать», «сохранить»).
  • #2. Акцентировать на том, что на странице что-то поменялось, и объяснить это (например, когда появляется или исчезает содержимое буллета).
  • #3. Сделать фокус на визуальных подсказках.
  •  

 

Звук

Метод оправдан, когда нужно усилить графический дизайн или привлечь внимание к началу или финалу действия. К примеру, конец загрузки файла или регистрации.

Звук точно нужен в UI (user interface) мессенджеров. Там он служит не только для уведомлений, но и для подпитки дофамином (это такой нейромедиатор, который отвечает за ощущение удовольствия).

Используй звук, когда нужно:

  • #1. Подчеркнуть или усилить особый момент (очистить историю, удалить спам).
  • #2. Укрепить контакт с пользователем (сигнал всплывающего окошка чат-бота).
  •  

Лицо и взгляд

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

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

Дизайнер использовал лицо и взгляд, чтобы сфокусировать внимание пользователя на точке входа. Источник: dribbble.com

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

Какие плюсы применения лиц в UX-дизайне:

  • — привлекают внимание
  • — создают эмоциональный опыт
  • — формируют доверие и симпатию
  •  

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

Поделиться материалом