95% пользователей не читают 80% вашего контента, к таким выводам пришли разработчики CWsites. Статистика как видите не самая хорошая. Как же улучшать восприятие контента, донести его до как можно большего числа пользователей?
1. Разбивайте текст на небольшие параграфы
Чтобы упростить чтение, разбивайте большие блоки текста на параграфы. За компьютером читатель редко концентрируется исключительно на тексте, обычно, параллельно работает IM клиент, открыты блоги, кричат дети. Если текст разбит на параграфы, читателю проще вернуться к нужному месту текста, после того как он отвлекся от экрана. К тому же, если текст разбит на небольшие параграфы, читателю кажется, что он потратит на него меньше времени чем на тот же текст без разбиения.
2. Используйте подзаголовки
Большинство людей не читают текст полностью а быстро просматривают в поисках нужной информации, информативные подзаголовки очень сильно сэкономят им время. Старайтесь выбрать подзаголовки максимально соответствующие следующему за ними тексту.
3. Уберите все лишнее
Многословность и красноречие хороши в поэзии, но малопригодны для текста в веб.
Точность, прямота и краткость — вот что нам нужно.
Например:
«Если вы хотите получить доступ к нашему замечательному разделу содержащему техническую информацию и советы, мы просим вас нажать кнопку на вашем внешнем устройстве типа мышь»
Далеко не столь удобно и приятно для пользователя как простая ссылка:
«Техническая поддержка».
4. «Второй черновик = Первый черновик - 10%» — Стивен Кинг
В замечательном издании для авторов «Как писать книги. Мемуары о ремесле» Стивен дает отличный совет: «Второй черновик = Первый черновик - 10%». Когда текст готов, постарайтесь сократить количество слов на 10%, это сделает его более кратким и выразительным.
5. Выделяйте самое важное
Не ленитесь выделить важную часть текста жирным, курсивом или вынести ее в сайдбар. Как и подзаголовки, это позволяет сэкономить время нужное читателю для поиска нужной информации или определения релевантности страницы.
6. Используйте читабельный шрифт
Красивый, нестандартный шрифт, конечно, позволит вам выделиться, но если из-за этого пользователь не может ничего прочесть, то от этого нет толка. Уникальные шрифты подойдут для баннеров или графики, шрифт основного текста сайта должен быть простым и достаточно крупным (особенно актуально последнее, нестандартные шрифты, к счастью, плохо поддерживаются браузерами, а со слишком мелкими приходится сталкиваться почти каждый день).
7. Не забывайте подвести итоги
Этот пункт применим к большинству статей. Обязательно опишите читателю общую идею и подведите итог. Подводить итоги нужно кратко и по делу. (Для веб хорошо подходит стиль написания перевернутая пирамида, когда статья начинается с основной мысли и вывода, но писать в таком стиле очень непривычно.)
8. Чаще обновляйте информацию
Регулярно проверяйте релевантность и актуальность контента, особенно это касается часто обновляемой или временной информации. Проверять актуальность контента стоит хотя бы раз в месяц, к тому же это хорошая возможность выявить старые ошибки и неточности.
9. Тщательно проверяйте тексты перед публикацией
Не жалейте времени на поиск ошибок в тексте, пропущенные опечатки сильно отвлекают читателей. Чтение вслух хорошо помогает выявить проблемы с построением фраз и предложений. Попросите кого нибудь прочесть текст перед публикацией. (Можно отложить текст на день или два и прочесть еще раз.)
И интересный момент по оформлению: врезки.
Код врезки слева:
.cl_lvrez {
float: left; /*блок слева*/
font-size: 0.8em; /*размер шрифта*/
border: 1px solid #000000; /*граница толщина вид цвет */
height: auto; /*высота блока - зависит от текста в нем*/
width: 35%; /* %% от ширины статьи */
text-align: left; /*текст равняем влево */
background-color: #cccccc; /*цвет фона */
margin-bottom: 5px; /*отступ от блока снизу*/
margin-right: 10px; /* ---- справа*/
margin-top: 5px; /* ---- сверху */
margin-left: 0px; /* ----- слева */
padding: 5px; /* отступ текста от границ внутри блока */
}
Код врезки справа:
.cl_rvrez {
float: right;
font-size: 0.8em;
border: 1px solid #000000;
height: auto;
width: 35%;
text-align: center;
background-color: #cccccc;
margin-bottom: 5px;
margin-right: 0px;
margin-top: 5px;
margin-left: 10px;
padding: 5px
}
Горизонтальная врезки шириной 100%
.cl_vrez {
border: 1px solid #000000;
height: auto;
width: 100%;
text-align: center;
background-color: #cccccc;
margin-bottom: 10px;
margin-right: 0px;
margin-top: 5px;
margin-left: 0px;
padding: 5px
}