Непродуманный веб-дизайн ухудшает читабельность
Плохой веб-дизайн вредит читабельности
Вне зависимости от того, насколько хорошо вы пишете (у вас может быть абсолютная грамотность, прекрасная стилистика) и как часто пропускаете свою искрометную прозу через текстовые оптимизаторы, на веб-странице присутствуют определенные элементы, которые могут свести на нет все усилия.
Размер шрифта
Скорее всего, вам встречались статьи с советами о важности выбора типа шрифта. Это важно для корректной передачи имиджа бренда. Но в отношении читабельности нельзя сказать, что текст, написанный Comic Sans, сложно прочесть. Некоторые сайты позволяют выбрать только из 8 возможных шрифтов.
Боковые панели
Удаление боковых врезок устранит отвлекающие элементы, но вместе с тем и позволит добавить CTA, что, в свою очередь, повысит уровень вовлечения и показатели конверсии.
По результатам исследования VideoFruit (точность, примерно, на уровне 95%), дизайн без боковой панели приводит к увеличению конверсии на 26%.
Некоторые эксперты высказывают мнение, что боковые панели время от времени выходят из моды, а потом вновь попадают в тренд, по мере того, как меняются популярные направления в веб-дизайне. К слову, более централизованный вид сайтов был популярен в прошлом году.
Рассмотрим скриншот, сделанный на сайте 4Ps Marketing’s. Между прочим довольно интересный блог. Однако текст статьи слишком расползается в ширину страницы (даже на десктопе). Заголовок выглядит неплохо, но в таких условиях даже подзаголовки читаются с трудом, несмотря на то, что они выделены шрифтом большего размера. Текст параграфа — плотный шрифт без засечек, легко читается, но эти длинные линии не позволяют сфокусироваться. Оптимальная ширина — это, пожалуй, 600 пикселей.
Цвет шрифта, цвет фона и контраст
Шрифт серого цвета — распространенная ошибка, поскольку он не столь заметно контрастирует с цветом фона.
Пример — сайт Squarespace. ?дея, вероятно, состояла в том, чтобы сделать кнопку «добавить в корзину» заметнее на общем фоне, но серый цвет меню заголовка, а равно и текст заголовка и основной текст не контрастируют с серым фоном.