Лучшие практики дизайна пользовательского интерфейса для лучшей сканируемости

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

Каждый день Интернет расширяется благодаря новым приложениям, веб-сайтам, статьям и многому другому. Становится все труднее удерживать внимание перегруженных информацией пользователей, которым сложно отфильтровать нужную информацию от нерелевантного контента. Эксперт по маркетингу Дэвид Чжэн обнаружил, что более чем в 60% случаев посетители сдаются и покидают сайт менее чем за 15 секунд .

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

Что такое сканируемость?

Эксперты по UX из Nielsen Norman Group провели исследование, чтобы ответить на вопрос: как люди читают в Интернете? Его выводы были просты. Они не делают.

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

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

Преимущества сканируемого интерфейса

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

1. Соответствует ли содержание страницы ожиданиям аудитории?
2. Легко ли понять основное сообщение страницы за короткий промежуток времени?

Хотя создание сканируемых интерфейсов требует усилий, в долгосрочной перспективе это окупается за счет создания привлекательного дизайна пользовательского интерфейса. Исследование Nielsen Norman Group показывает, что страницы, оптимизированные для сканирования, становятся намного эффективнее в следующих случаях:

• Пользователи быстрее выполняют задачи
• Пользователи могут легко определить, подходит ли им контент
• Пользователи делают меньше ошибок при запоминании
• Пользователи лучше понимают структуру страницы
• Сайт получает более благоприятные субъективные оценки за достоверность и качество контента.
• Показатели отказов снижены
• Увеличивается вероятность повторных посещений
• Улучшена поисковая оптимизация (SEO)

Сила привычек пользователя в шаблонах сканирования

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

По данным Nielsen Norman Group, существует семь распространенных шаблонов, по которым пользователи сканируют интерфейс:

• Знаменитый шаблон F. Спустя двенадцать лет после открытия этот шаблон по-прежнему остается самым распространенным шаблоном сканирования — даже при сканировании мобильных интерфейсов. Глаз перемещается горизонтально, как обычно при чтении, затем переходит к содержимому ниже. Это можно делать медленно и систематически или быстро с помощью точечной тепловой карты.
• Z Pattern: Зигзагообразная модель типична для веб-страниц с однородным представлением информации и слабой визуальной иерархией.
• Шаблон Layer Cake: пользователи следуют этому шаблону при просмотре заголовков и подзаголовков, чтобы быстро определить, где (и если) можно найти информацию, которую они ищут, на странице.
• Пятнистый шаблон: креативщики обычно следуют этой модели сканирования, когда они пропускают большие фрагменты текста и сканируют визуальные компоненты, такие как цвет, формы и аномалии пропорций, чтобы найти конкретную часть информации.
• Шаблон маркировки: подобно танцору, фиксирующемуся на объекте, чтобы сохранять равновесие во время вращения, пользователи удерживают взгляд в одном месте во время прокрутки — очень распространенный шаблон для мобильного UX.
• Обход шаблона: пользователи намеренно пропускают первые слова строки, когда несколько строк текста в списке начинаются с одного и того же слова.
• Шаблон обязательства: это редкий шаблон, который возникает только тогда, когда пользователь очень заинтересован в контенте и мотивирован использовать его полностью.

Шаблоны, принятые пользователем, будут в первую очередь связаны с мотивацией посещения веб-страницы: какой тип информации они ищут? Сколько времени они готовы посвятить его поиску? Существуют ли другие веб-сайты, которые могли бы предоставить эту информацию быстрее?

Создание ценности за счет исследования пользователей и сканирования шаблонов

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

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

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

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

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

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

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

Лучшие практики дизайна пользовательского интерфейса для лучшей сканируемости

Создайте правильную визуальную иерархию

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

• Размер
• Цвет
• Контраст
• Близость
• Выравнивание
• Негативное пространство
• Репетиция

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

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

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

Используйте негативное пространство

Гениальный Клод Дебюсси однажды сказал: «Музыка — это пространство между нотами». То же самое относится и к сканируемости — отрицательное пространство между элементами — это то, что делает макет успешным. Надлежащее количество отрицательного (белого) пространства вокруг элементов пользовательского интерфейса фокусирует внимание на самих элементах. Он подчеркивает содержимое и обеспечивает необходимую передышку, чтобы макет не казался загроможденным. Без передышки человеческий мозг с меньшей вероятностью будет сканировать точки интереса и с большей вероятностью будет сбит с толку.

Используйте подзаголовки для обобщения содержания

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

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

Создание маркированных и нумерованных списков

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

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

Визуализируйте содержимое

Современные цифровые пользователи от природы визуалы и не всегда хорошо реагируют на текстовый контент (даже если он идеально структурирован и соответствует всем советам по дизайну пользовательского интерфейса для идеальной сканируемости). Внешняя среда всегда будет фактором. Таким образом, чтобы компенсировать текстовые макеты, использование изображений и графики предлагает как информативные, так и эмоционально привлекательные визуальные перерывы. Как говорится, картинка стоит тысячи слов!

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

Установите соответствующий акцент на CTA

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

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

Важность сканируемости

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

Сканируемый контент демонстрирует конечному пользователю, что его время ценится, и дает возможность понять основное сообщение, просто взглянув на дизайн макета. Вирусный блогер и профессор журналистики Ким Келлер указывает дизайнерам, что «вы начинаете разговор с кем-то, кого вы хотите видеть в качестве клиента. Это отношения, и никакие отношения не выживут, если вы не будете проводить время вместе. Уважайте их время и делайте его стоящим».

• • •

Дальнейшее чтение в блоге Toptal Design:

• Лучшие практики дизайна пользовательского интерфейса и распространенные ошибки
• Пустые состояния — самый недооцененный аспект UX
• Простота — это ключ — изучение минимального веб-дизайна
• Эвристические принципы для мобильных интерфейсов
• Дизайн для удобочитаемости — руководство по веб-типографике