Руководство по юзабилити. Часть 4 – Подача контента
В этом посте я не собираюсь писать о разных копирайтерских фишках, которые помогают повысить читаемость статей на вашем блоге. На эту тему уже написано наверное всё, что только можно было написать. Давайте лучше поговорим не о самом контенте, а о его подаче: как лучше всего оформить текст, чтобы читать его было приятно и удобно.
- Цвет текста. Прежде всего он должен быть контрастным по отношению к фону. Но этот контраст не должен бить по глазам. Исследования учёных показали, что текст, оформленный тёмным шрифтом на светлом фоне, читается легче, чем инвертированный: светлым по тёмному.
Классический вариант: черный текст на белом фоне. Если быть точнее, то не черный, а темно-серый, т.к. черный на белом уж слишком контрастный и немного “режет” глаза. Еще довольно часто используются варианты с черным текстом на серо-зеленом и серо-коричневом фонах. Обычно это связано с тем, что белый фон просто не вписывается в дизайн сайта. Но не нужно забывать о том, что если дизайн идёт в разрез с юзабилити, предпочтение лучше отдавать в сторону юзабилити. Ведь посетители на ваш сайт пришли не для того, чтобы посмотреть на красивый дизайн, а для того, чтобы найти нужную им информацию.
- Использование текстур в качестве фона в 99% ухудшает читабельность текста, не говоря уже о ярких и пёстрых текстурах от которых просто глаза на лоб вылазят.
- Ширина текстового поля. Читать легче, если текстовое поле не очень широкое. Именно по этой причине в журналах и газетах текст разделен на столбцы, книги преимущественно печатают на формате A5, а сайты разбиты на 2 или 3 колонки. Для сайтов оптимальной шириной текстового поля считается 55-75 знаков.
- Выравнивание. Вариантов тут не много. А если хорошо разобраться, то вообще один. Читаем мы с лева на право, так что выравнивание по правому краю сразу отпадает. Выравнивание по ширине тоже является нежелательным, т.к. из-за разного расстояния между словами читабельность текста падает.
- Шрифты. Бывают рубленые и с засечками. Самый распространенный рубленый шрифт – Verdana (и не зря, т.к. считается самым читабельным), а самый распространенный шрифт с засечками – Times New Roman. Принципиальное отличие в том, что из-за наличия засечек, такие шрифты хуже читаются при маленьком размере шрифта. По этому рубленые чаще используют для текста абзацев, а шрифты с засечками – для заголовков и подзаголовков.
- Размер шрифта. Наверное самым распространенным является размер в 11 пикселей, но не существует такого размера, который подходил бы всем вашим посетителям. По этому на свой блог я установил скрипт переключения размера шрифта, с помощью которого посетители могут изменять размер шрифта как в большую, так и в меньшую сторону. Никто не останется недовольным
В качестве альтернативы для тех, кто сам вышеупомянутый скрипт установить не может, могу предложить плагин Font-resizer. Всё, что в этом случае вам нужно будет сделать, это установить плагин и добавить виджет в сайдбар, в котором будут отображаться 3 буквы А: уменьшить шрифт, сбросить и увеличить.
Типографические исследования показали, что в идеале:
- Отношение высоты строки к высоте шрифта должно составлять 1.48
- Отношение длины строки к высоте строки должно быть 27.8
- Для акцентирования внимания рекомендую использовать разные шрифты для основного текста и заголовков. Использование более 3-х шрифтов на одной странице не рекомендуется (шрифты на логотипах, кнопках, баннерах и других графических элементах не в счёт). Чтобы связать заголовок с текстом, используйте разные отступы сверху и снизу. Помните, что заголовок должен быть ближе к тому абзацу, к которому он относится, чем к предыдущему.
- Абзацы. Разделяйте контент абзацами в 2-5 предложений, несущих одну законченную мысль. Это сделает текст менее монотонным и подчеркнет основные идеи, содержащиеся в нём. Для расстановки акцентов так же используйте подзаголовки, картинки, маркированные и нумерованные списки.
Все эти советы помогут сделать текст ваших статей более читабельным, что, несомненно, является одним из самых важных факторов удобства пользования любого сайта.
Для того, чтобы лично вам было удобнее читать другие сайты, советую включить Clear Type – технология, которая сглаживает шрифты. Сначала может быть немного непривычно, но потом вы поймете, что читать стало гораздо легче и приятнее. В windows XP включить clear type можно следующим образом: свойства экрана – оформление – эффекты – применить следующий способ сглаживания экранных шрифтов – clear type. Так же можно установить программу Clear Type.
P.S. Очень интересный блог о копирайтинге, e-mail маркетинге, форексе и финансовом беттинге, а так же о других способах заработка в интернете.
Информационный спонсор четвертой части руководства по юзабилити о подаче контента – стальные двери форпост от интернет-магазина по продаже и установке входных дверей Vardo.
Как всегда интересная и наиболее полно раскрывающая тему, статья
Чтобы наиболее полно раскрыть тему, нужно вместо каждого поста по книге писать
Я же пишу о самом важном, на мой взгляд. Рад, что не зря стараюсь!
Ага, спасибо большое)Самое, то! Читабельность, вот что главное.
Во всех современных браузерах существует функция масштабирования, очень удобная вестчь! Поэтому необходимость в дополнительных плагинах отпадает.
Не согласен.
1) Масштабирование в браузере увеличивает все элементы страницы, что в большинстве случаев абсолютно не нужно. Скрипт, о котором я писал, увеличивает только текст, причем автор блога может сделать, чтобы не весь текст увеличивался, а, допустим, только текст статей.
2) Нажать одну кнопку, чтобы увеличить/уменьшить шрифт всё же удобнее, чем нажать в браузере: вид-масштаб-увеличить/уменьшить, либо нажать неудобное сочетание клавиш ctrl + +/ctrl+ -
Тоже не соглашусь:
1. Сочетание Ctrl + прокручивание колесика мыши очень даже удобно.
2. У меня в Опере почему то данный плагин на вашем сайте не работает, это и есть причина моего поста.
Я конечно же не навязываю свое мнение. :p
Видимо у Вас в опере отключен javascript. Только что еще раз проверил – у меня работает.
А мне вот кажеться, что книги печатают на А5, а не на А3.
А3 для книги – полотно еще то.
Точно, что-то я перепутал
Спасибо!