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

Например, список элементов на примере выше можно разделить на три группы. У вас есть «Рабочее пространство» (“Workspace”) с основными элементами для выполнения рабочих задач. Внутри группы «Сообщества» (“Social”) находятся элементы, связанные со взаимодействием с другими людьми. И наконец, группа «Аналитика» (“Analytics”) включает элементы, которые содержат количественные данные.

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

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

Эффект последовательного расположения

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

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

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

Например, в первой группе пункты «Продукты» и «Сделки» пользователи выбирают чаще всего. Если бы они находились в середине списка, людям пришлось бы усердно сканировать меню, чтобы их найти. Вместо этого они могут сразу смотреть на верхнюю и нижнюю части списка, не просматривая середину.

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

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

Перевод статьи How to Group Your Sidebar Items for Better Findability из блога UX Movement Newsletter

В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!

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

Однако зачастую эта важная информация находится на разных страницах. Это вынуждает пользователей запоминать её или открывать несколько окон или вкладок. Именно здесь на помощь приходит сравнительная таблица.

Содержание:

Определение

Когда нужна сравнительная таблица

Когда сравнительная таблица не нужна

Типы сравнительных таблиц

Статические сравнительные таблицы

Динамические сравнительные таблицы

Лучшие практики применения сравнительных таблиц

Золотое правило сравнительных таблиц

Определение

Сравнительная таблица — таблица, где в столбцах располагают товары (или услуги), а в строках — их характеристики. Она позволяет быстро и легко сравнивать свойства и характеристики каждого предложения.

Базовая сравнительная таблица в самом распространённом виде: каждый товар находится в отдельном столбце, а для каждой характеристики товара выделена отдельная строка

Когда нужна сравнительная таблица

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

• Услуг
• Уровней членства
• Тарифных пакетов
• Функций в приложениях
• Стоимости обучения
• Локаций

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

Правила принятия решений: компенсаторные и некомпенсаторные

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

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

Когда людям приходится выбирать из небольшого набора альтернатив — обычно не более 5-7, они, как правило, принимают компенсаторные решения. То есть они рассматривают индивидуальные преимущества каждого товара и сравнивают их плюсы и минусы по ряду критериев.

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

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

Когда сравнительная таблица не нужна

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

• Не взаимоисключающие
• Простые
• Дешёвые или заменяемые
• Уникальные или их трудно сравнить

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

Не взаимоисключающие

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

❌ amazon.com: Сравнительная таблица для похожих платьев не нужна

✅ amazon.com: Вместо сравнительной таблицы на странице товара с платьем Amazon предлагал быстрый способ добавить к заказу похожее платье

Простые товары

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

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

Дешёвые или заменяемые товары

Если товар или услуга дешёвые или их легко заменить, пользователи, скорее всего, будут рады не тратить много времени на анализ альтернатив. Например, нет смысла сравнивать разные рулоны бумажных полотенец.

❌ jetpens.com: Не имеет смысла сравнивать так много характеристик такого простого и недорогого предмета, как пластиковая ручка

Уникальные товары, которые трудно сравнить

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

Типы сравнительных таблиц

Существует два типа сравнительных таблиц:

• Статические сравнительные таблицы включают заранее выбранные товары и лучше всего подходят для небольших подборок товаров — менее 5.
• Динамические сравнительные таблицы позволяют пользователям самим решать, какие товары они хотят сравнить. Они лучше всего подходят для больших подборок товаров.

Статические сравнительные таблицы

Если есть несколько товаров, которые нужно сравнить, вы можете создавать статические сравнительные таблицы.

Например, в последнем релизе Apple представлены только три модели Apple Watch. Поэтому пользователям, которые пытаются определиться с выбором, Apple предлагает готовую сравнительную таблицу.

✅ apple.com: Поскольку в продаже есть только три модели последних Apple Watch, все три Apple представила в виде сравнительной таблицы

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

При такой реализации сравнительной таблицы можно контролировать отображение информации на странице.

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

✅ apple.com: Убедитесь, что пользователи могут легко найти статическую сравнительную таблицу. Для этого включите ссылку на неё в информационную архитектуру в качестве пункта меню. Apple включила ссылку на статическую сравнительную таблицу во вторичное навигационное меню Apple Watch, рядом со ссылками на различные модели Apple Watch

Динамические сравнительные таблицы

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

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

compare-_-tesla.mp4

✅ tesla.com: На сайте Tesla  с помощью динамической таблицы пользователи могли сравнивать различные модели Tesla

Выбор элементов в динамической сравнительной таблице

Есть два популярных способа дать пользователям возможность выбрать, какие элементы добавить в таблицу. Они включают: кнопки «Сравнить» или чекбоксы, а также прямое управление интересующими элементами.

Кнопки «Сравнить» или чекбоксы

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

Чекбоксы (слева, homedepot.com) и кнопки (справа, lowes.com) — два наиболее распространённых способа, которые позволяют пользователям отбирать товары для интерактивной сравнительной таблицы

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

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

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

❌ garmin.com: Несмотря на то, что серая прозрачная кнопка сливается с интерфейсом и её не так просто обнаружить, этот пример Garmin не так уж плох. В верхней части каталога находится кнопка «Сравнить». После её активации, нажатие на карточку с товаром позволяет добавить его в сравнительную таблицу и препятствует переходу на страницу с подробной информацией о нём.

Одно из преимуществ такого подхода к выбору — возможность отделить сравнительную страницу от страницы каталога и сделать её визуально чище.

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

Лучшие практики применения сравнительных таблиц

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

Используйте сравнительные таблицы для сравнения не более 5 товаров

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

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

В случае динамических сравнительных таблиц подумайте, будет ли макет изящно масштабироваться до 5 элементов, если у пользователей будет возможность выбирать, какими будут эти 5 элементов. Большинство динамических сравнительных таблиц допускают сравнение только 3-4 элементов. Подумайте, какой объём текста нужно будет включить в описание характеристик, и как это отразится на макете и удобстве восприятия.

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

❌ Динамическая таблица Apple для компьютеров Mac неоправданно ограничивала пользователей в сравнении двух товаров даже при очень больших размерах экрана. Разрешение монитора в примере выше составляет 3008 × 1692

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

Будьте консистентны

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

❌ bestbuy.com: В этой сравнительной таблице представлены характеристики двух разных камер, которые продаёт Best Buy. Характеристик камеры Sony Alpha 7 намного больше. Поддерживать характеристики в актуальном состоянии бывает непросто, особенно когда компании продают множество товаров от разных производителей. Однако если информация обо всех сравниваемых товарах неполная, то её можно вообще не включать в сравнительную таблицу.

❌ smugmug.com: В этой сравнительной таблице подробно описаны возможности четырёх уровней членства в SmugMug. Причём в каждом столбце указано разное значение для характеристики «Реклама и спам»: Zip, Zero, Zilch и Nada. Значения в сравнительных таблицах — не лучшее место для демонстрации индивидуальности сайта. Лучше оставить эти значения эквивалентными и не отвлекать пользователей, пока они ищут различия

Поддерживайте удобство сканирования

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

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

❌ williams-sonoma.com: Дизайнеры сайта Williams Sonoma проделали хорошую работу по классификации кастрюль в этой статичной сравнительной таблице. К сожалению, горизонтальные заголовки строк выглядят нестандартно и мешают сканированию. Узкие абзацы в разделе «ОТЛИЧИТЕЛЬНЫЕ ОСОБЕННОСТИ» (DISTINGUISHING FEATURES) неудобны для сканирования и чтения

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

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

✅ В столбцах таблицы FitBit.com галочки окрашены в другой цвет. Это помогает пользователям чётко различать характеристики каждого товара. Такой подход к цветовому кодированию не очень хорошо работает для более сложных значений характеристик, которые невозможно отобразить в виде галочек

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

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

Закреплённые заголовки столбцов

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

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

Значимые характеристики

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

Старайтесь как можно чаще давать определение незнакомым терминам в контексте и связывать расплывчатые характеристики с чем-то конкретным.

Например, в сравнительной таблице Anker есть характеристики, полезные в контексте сравнения портативных зарядных устройств: ёмкость аккумулятора в mAh, скорость зарядки и вес. Что действительно делает эту сравнительную таблицу хорошей, так это тот факт, что она переводит эти характеристики на понятный для пользователя язык. Ёмкость аккумулятора составляет 3350 мАч, что примерно равно 1,2 заряда iPhone 6. Размер 3,5 x 0,9 x 0,9 дюйма, по размеру сопоставим с тюбиком губной помады. Вес — 2,7 унции, что сопоставимо с весом яйца. Среднестатистическому потребителю трудно представить себе, что такое 2,7 унции, но он наверняка может представить себе вес яйца.

✅ amazon.com: В сравнительной таблице товаров производителя технические характеристики переведены на язык, понятный среднестатистическому потребителю

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

✅ dropbox.com: Всплывающая подсказка, которая появляется при наведении курсора, поясняет значение характеристик и не добавляет на страницу лишний текст

Предоставьте пользователям контроль

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

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

В качестве альтернативы, позвольте пользователям скрывать строки, в которых все товары похожи, и показывайте только различия.

✅ bestbuy.com: В этой сравнительной таблице, выбрав переключатель «Показать различия» (Highlight Differences), пользователи могут легко увидеть различия между товарами, строки которых выделены жёлтым цветом

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

✅ smugmug.com: для быстрого просмотра на сайте SmugMug представлена упрощенная сравнительная таблица с тремя вариантами тарифных планов

smugmug.com: Гораздо более полная сравнительная таблица доступна на другой странице

Упростите сравнение в мобильных интерфейсах

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

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

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

Золотое правило сравнительных таблиц

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

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

Перевод статьи Why You Should Never Split Text Field Inputs из блога nngroup

В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!

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

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

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

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

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

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

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

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

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

В примере ниже вы видите боковое меню со оптимальным интервалом. Отступ между иконками и названиями элементов не слишком велик и не слишком мал. Всё выглядит и ощущается так, как должно быть.

Перевод статьи How to Make Any Sidebar Menu Easier to Scan из блога UX Movement Newsletter

В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!

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

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

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

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

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

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

Компонент “Slideover”

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

В большинстве приложений обзор данных на странице начинается с отображения дашборда в виде таблицы или карточек. Когда пользователи нажимают кнопку «Просмотреть детали» (“View Details”), с правой стороны страницы выезжает окно.

Страница обзора

Как ускорить просмотр данных

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

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

Окно, выезжающее в режиме slideover, без оверлея

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

Окно, выезжающее в режиме slideover, с оверлеем

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

Поэтому в окне, выезжающем в режиме slideover, рядом с кнопкой «X» должны быть стрелки пагинации. При нажатии на стрелку «вперёд» следует отображать следующий элемент по порядку, а при нажатии на стрелку «назад» пользователь будет возвращаться к предыдущему. Эти кнопки позволят людям последовательно просматривать детали, не закрывая каждый раз окно, выезжающее в режиме slideover.

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

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

Будущее за окнами, выезжающими в режиме slideover

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

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

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

Перевод статьи Why Users View Details Better with Compact Slideovers из блога UX Movement Newsletter

В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!

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

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

1. Блок «Первый экран»
2. Блоки «Характеристики»
3. Блок «Призыв к действию»

Блок «Первый экран»

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

• Логотип
• Заголовок
• Описание
• Призыв к действию
• Изображение

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

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

Выравнивание по левому краю VS по центру

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

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

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

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

Блоки «Характеристики»

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

Выравнивание по центру VS по левому краю

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

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

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

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

3 VS 2 колонки

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

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

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

Блок «Призыв к действию»

В самом конце лендинга находится блок «Призыв к действию». Он содержит заголовок, описание и кнопку. Его цель — ещё раз подчеркнуть ценность продукта и превратить пользователя в покупателя.

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

Анатомия лендинга

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

Перевод статьи How to Design the Best Layout for a Landing Page из блога UX Movement Newsletter

В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!

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

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

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

Структура навигации

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

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

Группировка элементов боковой панели

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

• Элементы контента
• Административные элементы
• Персональные элементы

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

Административные элементы включают данные, связанные с запуском и управлением приложением. К ним относятся функциональные возможности приложения (например, Настройки, Сообщить об ошибке) и любая информация об использовании приложения (например, FAQ, Поддержка).

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

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

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

Группировка элементов верхней панели

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

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

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

Лучшее место для персональных элементов — правый верхний угол верхней панели. Обычно пользователи тяготеют к этой области, чтобы получить доступ к элементам, связанным с учётной записью.

Ещё одна причина, по которой верхняя панель лучше подходит для персональных элементов, заключается в том, что она позволяет отображать выпадающие списки. Например, три элемента в примере ниже представляют собой «Сохранённое», «Уведомления» и «Аккаунт». Все они спроектированы в виде выпадающего списка, который открывается при нажатии, что было бы сложнее отобразить на боковой панели.

Поле поиска

Размещение поля поиска на боковой панели — ещё одна плохая практика, которой следует избегать. Его легко пропустить, если оно не выделяется и конкурирует с соседними элементами. Кроме того, создаётся впечатление, что пользователь ищет элементы на боковой панели, когда на самом деле он ищет контент.

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

Оптимальный дизайн и расположение

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

Перевод статьи The Best Location for Navigation Items on Web Apps из блога UX Movement Newsletter

В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!

Представьте, что у вас есть книга, которая помогает вам создать отличный UX-дизайн форм ввода и выбора данных. В ней подробно перечислены все примеры и антипримеры в отношении каждого компонента формы. И вы больше никогда не столкнётесь с проблемой, какое дизайн-решение принять при работе с формами. Именно об этом книга “Dos and Don'ts for Form Input and Selection”.

Каждая глава содержит множество примеров того, как правильно и как неправильно проектировать чекбоксы, радиобаттоны, выпадающие меню, текстовые поля и переключатели. На каждой странице есть наглядные примеры того, что нужно делать, а что делать не следует. Текст в книге — краткий и лаконичный, с конкретными и практическими рекомендациями, что делает её лёгкой для восприятия.

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

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

Ссылка на книгу: https://uxmovement.gumroad.com/l/dodontform

Вот несколько примеров из книги.

Перевод статьи Dos and Don'ts for Form Input and Selection из блога UX Movement Newsletter

В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!

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

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

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

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

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

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

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

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

Человек на фотографии должен выглядеть привлекательно и профессионально, а также улыбаться. Заголовки должны звучать как диалог. В первом заголовке представителю следует назвать своё имя. Например, важно включить фразу: «Привет! Я — Мария».

На следующем этапе добавьте диалоговый переход, который ведёт к основной части заголовка. Включив фразу «Приятно познакомиться!» в заголовок, вы придадите тону более естественный и дружелюбный оттенок.

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

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

Наконец, пользователь получает финальное сообщение в конце, которое даёт ему чувство радости от того, что он закончил заполнение формы.

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

Перевод статьи How to Make Users Fill Out the Longest 13 Field Form Inputs из блога UX Movement Newsletter

В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!

Легко ли пользователям просматривать контент на вашей странице? Если вы применяете пагинацию, то она замедляет и усложняет исследование сайта.

Пагинация — традиционный способ навигации и просмотра страниц. Однако большинство дизайнеров не знают о множестве UX-проблем, которые возникают при её использовании. Чтобы улучшить качество просмотра страниц, вместо пагинации отдавайте предпочтение кнопке «Посмотреть ещё».

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

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

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

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

У кнопки «Посмотреть ещё» нет таких UX-проблем. Её легко найти. Нажать на неё тоже просто. Кнопка расположена в нижней центральной части страницы, она широкая, а область нажатия у неё большая. Кроме того, кнопка одна, поэтому пользователям не приходится выбирать между вариантами, что снижает когнитивную нагрузку.

Вместо загрузки совершенно новой страницы для сохранения текущих элементов страницы используется AJAX*. В результате пользователь получает непрерывный поток нового контента без резких появлений свободного пространства и длительной загрузки.

*Примечание. AJAX — подход к построению интерактивных интерфейсов веб-приложений, который заключается в «фоновом» обмене данными браузера с веб-сервером.

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

Если вы разместите сообщение над кнопкой «Посмотреть ещё», то сможете проинформировать пользователей о том, сколько элементов им осталось посмотреть. Например, можно написать: «Просмотрено 24 товара из 144». Так они будут понимать, насколько далеко прокрутили страницу.

Кроме того, можно предусмотреть кнопку «Вернуться к началу». Она возвращает пользователя в начало страницы. Если вы разместите её под кнопкой «Посмотреть ещё», пользователи смогут легко вернуться к первой порции контента, не прокручивая страницу вверх.

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

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

Перевод статьи Why You Should Never Split Text Field Inputs из блога UX Movement Newsletter

В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!

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

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

Разница между данными «Текущее местоположение» (“Current Location”) и «Пункт назначения» (“Destination”) ничтожна. Везде адреса отображены в одном и том же формате и находятся рядом друг с другом. Более того, между данными «Время отправления» (“Departure Time”) и «Время прибытия» (“Arrival Time”) разница также незначительна. Неудивительно, что пользователи часто неправильно воспринимают информацию.

Рассматривайте данные с позиции визуального восприятия

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

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

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

Этот дизайн содержит гораздо меньше текста, потому что в нём нет названий полей. Обратите внимание, что названия «Номер заказа» (“Order ID”), «Статус» (“Status”), «Текущее местоположение» (“Current Location”), «Пункт назначения» (“Destination”), «Имя клиента» (“Client Name”), «Время отправления» (”Departure Time”), «Время прибытия» (“Arrival Time”) и «Общее время в пути» (“Total Elapsed Time”) удалены. Они излишни. Поскольку их заменили на визуальные элементы, теперь они выполняют свою функцию.

Каждое значение, за исключением «Номера заказа» (“Order ID”), сопровождается визуальным элементом, который улучшает восприятие данных. Теперь вы больше не читаете текст, а обрабатываете информацию на более глубоком уровне, через визуальные элементы. Это не только приятно для глаз, но и для мозга.

Визуальные элементы динамичны, потому что они отражают обновленные данные. Статус меняется с «В пути» (“In Transit”) на «Доставлено» (“Delivered”). Вы также можете видеть, как «двигаются» стрелки времени и местоположения, и линии маршрута заполняются цветом.

Ниже есть ещё один пример формата «Поле: Значение». Как видите, здесь всего три значения, но информацию все равно трудно обработать. Однако, когда вы отображаете данные в визуальном формате, они становятся более лёгкими для восприятия.

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

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

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

Ваша цель — перевести часть «Поле» из формата «Поле: Значение» в визуальный формат. Когда пользователи могут обрабатывать значения данных без названий полей, это означает, что вы всё точно визуально отобразили.

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

Перевод статьи A Better Way to Display Data Than "Field: Value" из блога UX Movement Newsletter

В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!