Дизайн в эпоху «дефицита внимания»: 13 лучших практик

Мы живем в «эпоху дефицита внимания». Каждое приложение, реклама и уведомление в почтовом ящике кричит: «Посмотри на меня!» 🚨. Так как же создать дизайн, который не только выглядит красиво, но и, что еще более важно, удерживает людей достаточно долго, чтобы они могли сделать что-то полезное? В сегодняшней статье вы найдете 13 лучших практик, которые помогут вам в этом.

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

Мы живем в «эпоху дефицита внимания». Каждое приложение, реклама и уведомление в почтовом ящике кричит: «Посмотри на меня!» 🚨. Так как же создать дизайн, который не только выглядит красиво, но и, что еще более важно, удерживает людей достаточно долго, чтобы они могли сделать что-то полезное?

Сегодня мы разберемся, как проектировать интерфейсы для пользователей, чье внимание до тла выжжено TikTok, электронной почтой, Slack и тем самым другом, который упорно отправляет только голосовые сообщения.

1. Используйте прокрутку с умом

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

Начните с сильного, четкого заголовка. Не заумного. Не загадочного. Четкого. Вы не пишете стихи, вы пытаетесь заинтересовать кого-то своим дизайном.

Плохой пример: «Усильте синергию вашего рабочего процесса»

Хороший пример: «Создавайте более качественный дизайн в два раза быстрее»

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

2. Визуальная иерархия: секретный ингредиент

Представьте, что ваш макет — это комната, и вы хотите провести кого-то через нее. Именно это и делает продуманная визуальная иерархия.

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

Помните о негативном пространстве — лейаут должен «дышать». Не перегружайте его деталями. Ваши пользователи и так испытывают когнитивную нагрузку. Дайте им возможность расслабиться.

3. Один экран = одна задача

Каждый экран или раздел должен предлагать пользователю одно целевое действие. Не три. Не восемь. Одно.

Они регистрируются? Читают отзыв? Покупают свитер? Сделайте это единственное действие гвоздем программы.

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

4. Взаимодействия должны быть мгновенными и очевидными

Любой клик, касание или прокрутка должны сопровождаться мгновенной обратной связью. Так мы сигнализируем мозгу пользователя: «Да, то, что вы сделали, сработало».

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

5. Позаботьтесь о том, чтобы текст был простым для восприятия

Избегайте «стен» текста. Разбивайте его на части. Используйте маркированные списки. Добавляйте заголовки. Пишите так, как будто вы общаетесь с другом в мессенджере.

Используйте короткие предложения
Используйте привычные слова, а не жаргон
Удаляйте все, что не помогает пользователю

Если вы можете донести мысль тремя словами вместо двенадцати, сделайте это.

6. «Не заставляйте меня думать»

Этот классический принцип актуален как никогда. Хороший дизайн принимает решения за пользователя.

Люди не должны гадать, на какую кнопку нажать. Они не должны задаваться вопросом, «Зарегистрироваться» и «Регистрация» — это одно и то же или нет. Будьте последовательны. Будьте предсказуемы.

Предсказуемый ≠ скучный. Предсказуемый = понятный.

7. Микротесты: маленькие слова, большое влияние

Эти крошечные надписи на кнопках, в формах и сообщениях об ошибках имеют огромное значение.

Вместо «Отправить» скажите, что именно произойдет, например: «Получить мой отчет». Вместо «Ошибка 404» объясните «К сожалению, этой страницы не существует. Попробуйте вернуться назад».

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

8. Используйте привычные шаблоны

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

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

9. Тестируйте на своих друзьях

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

Может ли он понять, что делать, в течение первых 5 секунд? Может ли он найти то, за чем пришел? Может ли он заполнить форму, не проклиная все на свете?

Если хоть один ответ «нет», вернитесь на шаг назад.

10. Используйте инструменты, которые ускоряют работу

Ваш рабочий процесс не обязательно должен быть долгим и мучительным.

Один из моих любимых инструментов — сайт Made in Figma. Здесь можно найти готовые UI-сценарии, продуктовые киты и компоненты и сразу использовать их в своих проектах. Больше не нужно часами двигать пиксели, чтобы создать базовый макет. Работайте быстрее, пропускайте скучные задачи и впечатляйте клиентов.

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

11. Не забывайте о мобильных устройствах

Большинство пользователей взаимодействуют с вашим дизайном с телефона. На маленьком экране. Одной рукой. Вторым глазом посматривая Netflix.

Сделайте целевые области достаточно большими
Используйте четкую типографику
Не пытайтесь уместить слишком много элементов на одном экране

И тестируйте на реальных устройствах. Эмуляторы лгут.

12. Радуйте, но не отвлекайте

Деликатная анимация? Замечательно. Шуточный индикатор загрузки? Обожаю.

Но навороты, которые неоправданно замедляют работу пользователей? Они просто вызывают раздражение. 😖

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

13. Думайте о UX как о хорошей шутке

Сетап (контекст), связка, панчлайн. Это формула хорошей шутки. Хороший UX работает аналогичным образом.

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

Поприветствуйте, предоставьте ценность и отойдите в сторону. Не задерживайте людей дольше, чем нужно.