Как оформить текст, чтобы пользователи могли просканировать его быстро и без усилий?

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

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

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

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

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

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

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

Линия, которая отделяет панель вкладок от остального контента, толще, чем остальные разделители на странице. Под активной вкладкой она закрашена черным цветом. Чтобы выделить кнопку (Mark all read — Отметить все как прочитанные), вокруг нее добавили контур.

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

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