alexilin

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

Что же можно сделать для того чтобы улучшить удобочитаемость и заставить пользователей читать.

Советы:

• Подчеркивайте ссылки. Пользователи ожидают видеть ссылки подчеркнутыми, поэтому не разочаровывайте их.
• Используйте подходящее расстояние между строками в параграфе. Легче всего это сделать увеличив line-height в 1.5 раза по сравнению с высотой шрифта.
• Четко отделяйте статью от остальных элементов страницы. Должно быть очевидно где статья начинается и где заканчивается. Боковая панель, комментарии, метаданные и т.д. должны быть визуально отделены от основного содержимого.
• Если вы используете цитаты, сделайте так, чтобы они были заметны. Если пользователь не обращает на них внимания, то они не имеют смысла.
• Пишите коротко. Если ваше сообщение содержит 50 слов, вероятно вы сможете сократить ее до 30, не потеряв смысла.
• Используйте утилиты и сервисы для подбора цвета текста и фона и выберите такую комбинацию при которой у людей с ухудшенным зрением не возникнет проблем.
• Используйте структурную иерархию на странице. Например Заглавие — Вступление — Заголовок — Текст — Подзаголовок — Текст и т.д. Это сделает поток содержимого более логичным.
• Воздержитесь от использования различных сносок или рекламы в середине поста. Это сбивает читателя с хода мысли.
• Когда вы используете курсивный или жирный текст, нет необходимости также менять цвет текста. Это может вызвать путаницу у читателя. Что это за элемент, не ссылка ли это?
• Используйте семантическую верстку. Н1, h2, h3 для заголовков, strong для жирного текста. Многие из ваших читателей буду читать вас в агрегаторе новостей, где ваш не сработает.
• Размещайте изображения в начале статьи. В большинстве случаев их цель вовлечь читателя в статью.
• Сплошной текст – это плохо. Ничто не отпугивает читателя больше чем «стена» из одного текста. Оживите его немного!
• Обычно лучше использовать левое выравнивание. В очень редких случаях центрирование или растягивание текста по ширине контейнера может выглядеть лучше.
• Обратите внимание на обтекание текста. в зависимости от того как текст обтекает изображение, вы возможно захотите перефразировать текст или изменить размер изображения для того чтобы эти элементы выглядели лучше.
• Заголовки и подзаголовки должны быть отделены. Одно из главных преимуществ использования заголовков в том что пользователь может быстро пробежать статью и понять о чем она. Это работает только когда заголовки явно обособлены. Поэтому чувствуйте себя свободными в использовании больших шрифтов, подчеркивании, цветов и всего чего необходимо применительно к заголовкам.
• Вы должны знать когда использовать упорядоченные списки, а когда неупорядоченные. Когда пункты располагаются в особенном порядке, пронумеруйте их.
• Делайте отступ у списков. Покажите что это нечто большее, чем просто параграфы.
• Если какое-то изображение является важной составляющей статьи (диаграмма или график), отцентрируйте его и добавьте отступы сверху и снизу. Это даст понять что изображение является важной частью, а не просто украшением.
• Помните что ваши статьи могут читать не только на экране компьютера. Добавьте специальные стили для печати документа, чтобы и на бумаге статьи выглядели также хорошо.
• Когда вы думаете какой использовать шрифт, выберите наиболее распространенный, который есть у всех.
• Если вы добавляете постскриптум к сообщению, сделайте его курсивным, это скажет о том, что это добавление к основному содержимому.
• У выделенных фрагментов в статье должен быть тот же размер текста, что и у основного. Изменение размера будет «разбивать» основной поток.
• НЕ ПИШИТЕ СОДЕРЖИМОЕ СТАТЬИ ТОЛЬКО ЗАГЛАВНЫМИ. Делая все буквы одного размера, вы уменьшаете разницу между ними. Это значительно снижает скорость чтения.
• Не применяйте SnapShots к ссылкам. Хотя эта функция может казаться эффектной первое время, она может быть причиной неудобства в дальнейшем. Всплывающее окно перекрывает несколько строк текста каждый раз когда вы наводите на ссылку.
• Делайте строки в разумных пределах (до 100 символов). Резиновые сайты часто растягивают содержимое по всей ширине на широких мониторах, делая читабельность намного хуже.
• Слишком много параграфов лучше чем слишком мало. Когды вы пишите на бумаге, параграфы как правило содержат 4 или 5 предложений. На веб страницах короткие параграфы, состоящие из 2-х или 3-х предложений, достаточно распространены, поскольку они четко передают основной смысл.
• Не делайте боковую панель слишком длинной. Чем быстрее пользователь просмотрит боковую панель, тем быстрее он перейдет к основному содержимому.
• Если вы используете нумерацию страниц (разделение статьи на несколько страниц), сделайте навигацию по страницам ясной и легкой в использовании. Также добавьте в начало статьи краткое содержание с быстрым доступом к отдельным блокам.
• Для информации которая должна быть, но незначительна (дата статьи, ее автор) лучше всего применять «слабый» серый текст. Серый текст не будет привлекать много внимания.
• Используйте тег acronym к акронимам, с которыми читатели возможно не знакомы. Используйте CSS для добавления к ним нижнего пунктирного подчеркивания (наиболее распространенный способ).

А что вы делаете для повышения удобочитаемости?

Источник: «30 Ways to Improve Readability»