Здесь и далее в этой статье и мы будем использовать слово «сканирование» в значении «беглый просмотр содержимого».
Карточки содержимого - один из наиболее распространенных способов упорядочивания контента. Они представляют собой предпросмотр содержимого, которое увидит пользователь при переходе по карточке. Это удобно – пользователю необязательно погружаться в детальное изучение, чтобы выбрать что-то интересное для себя, он поверхностно сканирует краткие описания и на основе этого уже выбирает, что хочет изучить подробнее.
Само по себе использование карточек еще недостаточно для создания удобного интерфейса. Необходимо оптимизировать их читаемость. Оптимальная читаемость определяется не только тем, что у вас выбран легко читаемый шрифт контрастного с фоном цвета. Само оформление текста также очень важно. Пользователи должны иметь возможность без лишних усилий сканировать и понимать предложенную информацию.
Важно создать пользователю такие условия, чтобы его взгляд не метался из стороны в сторону, не зная, с чего начать изучение карточек, и не понимая, какая информация имеет большую важность. Ваша задача – взять штурвал на себя: сделать так, чтобы все элементы карточек направляли пользователя и помогали ему сканировать информацию быстрее и точнее. Для этого необходимо добавить визуальные акценты к каждому типу текстовых элементов. Нужно однозначно и однообразно отмечать заголовки, выделять маркерами списки, и использовать любые другие, уместные в вашем случае способы структуризации информации.
Текстовая иерархия карточки содержимого
Карточка содержимого имеет несколько типов текста, которые выполняют разные информационные функции. Давайте посмотрим на типы текста основной карточки контента.
Карточки могут включать в себя надзаголовок, заголовок, подзаголовок, метаданные, вводный текст, картинки и изображения, график, список, комментарии и действия.
Надзаголовок – можно назвать это категорией, – максимально общее отражение содержимого карточки. Заголовок и подзаголовок сообщают в нескольких словах пользователю, о чем конкретнее идет речь. Текст описывает содержание в виде короткого абзаца. Списки, графики и изображения упрощают восприятие. Вы должны установить текстовую иерархию для своей карточки, выяснив, какие типы текста более важны для пользователей.
Правильная текстовая иерархия для этой карточки содержимого будет следующей:
- Заголовок - самый важный, потому что он описывает содержание наиболее кратко и емко.
- Метаданные - предоставляют общий контекст о контенте, чтобы пользователи могли оценить его актуальность.
- Тело - описательный абзац, на его чтение уходит больше всего времени.
- Надзаголовок – предоставляет дополнительный контекст
Ваша карточка должна побуждать пользователей сканировать типы текста в этом порядке. Чтобы добиться этого, вам необходимо сделать правильный визуальный акцент на типах текста, используя методы управления сканированием.
Управление очередностью сканирования
С правильным визуальным акцентом вы можете контролировать то, в какой очередности пользователь будет сканировать информационные блоки. Ваша задача – чтобы эта очередность совпадала с вашей текстовой иерархией. Когда сканирование следует текстовой иерархии, пользователи тратят меньше времени и находят интерфейс более удобным.
В приведенном ниже примере показано сравнение того, как работает управление сканированием. Разница заключается в акценте на разные типы текста.
Когда управление сканированием не применяется, только заголовок имеет минимальный акцент. Другие типы текста имеют такой же акцент, что заставляет их конкурировать за внимание пользователя.
Когда применяется управление сканированием, заголовок выделяется в большей степени. Метаданные выделены над телом и надзаголовком, но не настолько, чтобы перебивать заголовок. Снижается акцент на теле, на надзаголовке - еще больше. В результате получается эффективный шаблон сканирования, который отражает текстовую иерархию.
Когда мы заменяем замещающий текст содержимым, вы лучше понимаете, как читаются карточки содержимого. Движение глаз на контролируемой карточке кажется преднамеренным, потому что у человека есть привязка к тому, где начать сканирование. Однако движение глаз у неконтролируемого человека кажется беспорядочным, потому что ему не за что зацепиться и выделить структуру. В этом случае поведение пользователя хаотично.
Подведем небольшой итог
Карточки содержимого – хорошая форма для удобного и краткого предоставления контента. Но важно правильно организовать и выделить ключевые текстовые блоки в них, чтобы ориентировать пользователя и контролировать его восприятие.
Контролируемые карточки позволяют пользователям сканировать только ключевые пункты, без визуального шума сопровождающего текста. Так человек быстрее находит то, что ему нужно, мы помогли закрыть его потребность, он доволен. В следующий раз он снова захочет обратиться к нашему интерфейсу, чтобы сэкономить время и нервы.
Неконтролируемые карточки труднее сканировать, приходится тратить время на вычленение ключевых пунктов, потому что остальной текст отвлекает. Такой интерфейс неудобен, пользователь может начать раздражаться и отправится искать информацию в другое место. Мы потеряем клиента.
Надеюсь вам понравилась эта статья, и она окажется полезной. Обязательно оставьте комментарий! И не забудьте подписаться ✌️