Старт

Лилия Голикова

Лилия Голикова

Автор статей на TexTerra

Юзабилити для текстов, изображений и видео

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

 

Тексты на сайте

  1. Читабельный текст.
    В текстах соблюдается баланс между легкостью текстов, логичностью контента и оптимизацией для поисковых систем.
  2. Лаконичные и короткие тексты.
    Отсутствует «вода», длинные вступления, ненужная информация, перегруженные предложения.
  3. Фокус на целевой аудитории.
    В тексте используются простые, привычные и понятные для пользователей фразы и слова.
  4. Простота представления чисел.
    В основном они представлены цифрами, а не словами, для облегчения восприятия текста. Разряды в цифрах отделены пробелами (пример: 1 560 000).
  5. Форматирование текста, облегчающее чтение.
    Используются следующие приемы:

    • Подзаголовки разбивают текст на смысловые блоки.
    • Расстояние между абзацами устанавливается в 1,5–2 раза больше, чем между строками абзаца.
    • Формируются списки — нумерованные и маркированные.
    • Выделяются ключевые с точки зрения смысла слова и фразы.
    • Текст чередуется с изображениями, графиками, таблицами.
    • Отдельные, особо важные моменты выделяются курсивом.
    • Для выделения части фразы или целого предложения используется жирный шрифт.
    • Подчеркивание применяется, в основном, только для ссылок.
    • Все виды выделения текста используются в меру, чтобы текст не казался пестрым.
    • Текст выравнивается на всех страницах одинаково, предпочтительно — по левому краю.
    • Строки занимают примерно 70–80 символов.
    • Больше «воздуха» (пробелов и полей) в тексте увеличивает привлекательность текста и его «понятность», восприятие.
    • Верхний регистр не используется ни для заголовков, ни для текста — он сложен для восприятия.
    • Расстояние между подзаголовком и предыдущим абзацем больше, чем между подзаголовком и абзацем сразу за ним.

 

Шрифт

  1. Единообразие.
    На всех страницах используются единообразные шрифты. Для элементов (заголовков и т.д.) одного уровня — одинаковый шрифт.
  2. Стандартизация цветов.
    Цвет шрифта и цвет фона сочетаются, шрифт и фон взаимно подобраны для комфортного восприятия и чтения. Оптимально — темный шрифт на светлом фоне. Цвет ссылок не используется для обычного текста.
  3. Оптимальный размер шрифта.
    Для основного текста на сайте используется достаточно крупный кегль, чтобы пользователю было комфортно его читать. Существует множество мнений на этот счет, сейчас стандартными для обычного текста считаются размеры от 12 до 16 пикселей, причем современная тенденция — более крупный шрифт. Учитываем, что для разного типа шрифта один и тот же размер может давать разный результат.
  4. Правильный подбор шрифта.
    При масштабировании страницы в браузере шрифт не теряет свою читабельность.

 

Заголовки и подзаголовки

  1. Информативность.
    Из него должно быть ясно, о чем будет блок текста за ним. Даже при беглом просмотре текста страницы подзаголовки дают посетителю сайта информацию о ключевых моментах статьи (описания товара, новости).
  2. Визуальная иерархия заголовков.
    К примеру, с помощью величины шрифта: заголовок 1 уровня крупнее, чем заголовок 2 уровня, подзаголовок последнего уровня крупнее и/или жирнее, чем основной текст.
  3. Отсутствие точки в заголовках и подзаголовках.
    Допускаются только вопросительный, восклицательный знак и многоточие.

 

Изображения и видео на сайте

  1. Качество изображений.
    Все изображения на сайте — качественные, четкие, без дефектов и сторонних водяных знаков.
  2. Оправданность использования изображений.
    Все изображения несут или подтверждают какую-либо информацию, не предназначены «просто для красоты» и не создают впечатления утомляющей пестроты на сайте.
  3. Единообразие.
    Размеры предпросмотров и больших фото товара соответственно одинаковы для всех страниц товара; размеры превью-фото товара в каталоге одинаковы для всех каталогов/категорий товара.
  4. Возможность масштабировать фото.
    Каждую из фотографий товара пользователь может посмотреть в большом разрешении (например, по клику на предпросмотр), чтобы хорошо рассмотреть все детали. Может использоваться онлайн-лупа. Особенно это касается изображений с мелкими деталями. Более детальные примеры самой оптимальной подачи товаров в лучших интернет-магазинах мира собраны в этой статье.
  5. Возможность настроить показ видео.
    Сюда относится масштабирование видео, возможность отрегулировать или совсем отключить звук, поставить видео на паузу.

 

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

Задание к выполнению
Проверка контента на читабельность и качество
Проверьте сайт на соответствие указанным в статье пунктам
Предыдущая статья
Следующая статья

Хватит просто читать!

Зарегистрируйся в Cybertrassa и научись реально управлять интернет-бизнесом!
Полный доступ ко всем материалам
30% материалов доступно только зарегистрированным пользователям.
Читайте статьи и выполняйте задания
До 80% процентов прочитанного материала забывается, если теория не применяется на практике.
Копите бонусы и меняйте на услуги для бизнеса
Экономьте до 10 тысяч рублей ежемесячно.
Начать обучение