Похожие статьи

Введение в оформление текстов для веб (53,19%)
Эта статья — попытка разрешить проблемы и рассказать о подводных камнях, связанных с публикацией текстов в сети, а также сформулировать несколько принципов создания удобных и простых для чтения веб-страниц…

Доступность текста в сети — определяем размер шрифта для верстки (45,45%)
Во второй части введения в создание доступных и читабельных текстов для веб автор исследует проблему выбора оптимального размера шрифта для верстки текстов в сети, объясняет, почему этот вопрос так актуален и предлагает несколько полезных советов, которые могут быть приняты вами на вооружение для верстки текстов, легкодоступных посетителям вашего сайта…

Оформление текста с помощью CSS (40,91%)
Оформление текста — задача на первый взгляд простая, но только на первый взгляд. На деле необходимо учесть множество параметров: гарнитура, размер, цвет шрифта, длина строки, высота строки (интерлиньяж), выравнивание, отступы и поля (свободное пространство)… Итак, сверстаем текст, который удобно читать…

Автор: Jim Byrne
«Accessible Web Typography»
Оригинал статьи

Перевод: Земсков Юрий
www.ComputerLibrary.info

Дата публикации 20-02-2004 20:15
Статья просмотрена 13186 раз

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

В статье приводится перечень важных аспектов удобочитаемости и юзабилити текста.

Выравнивание

Выравнивание текста по левому краю увеличивает скорость чтения, т. к. ровный левый край помогает найти начало новой строки (Якоб Нильсен «Юзабилити в дизайне: практика простоты»).

Длина строки

Касательно длины строки, оптимальной для скорости чтения, кажется, существует относительное согласие. Основываясь на предположении, что человеческий глаз в определенный момент времени может сфокусироваться примерно на 7,5 см строки текста, считается, что длина в 9 или 10 слов увеличивает скорость чтения и восприятие материала.

Однако скорость чтения и предпочтения пользователей — не одно и тоже. Обдумайте следующее заключение Мелиссы Янгмен (Melissa Youngman) и Лоурен Карф (Dr. Lauren Scharff) (1998):

«Пользователи читают длинные строки быстрее, хотя и предпочитают строки небольшой длины. При верстке текста сначала определитесь, что важнее — скорость или удобство чтения. Если важна скорость выполнения задач пользователем, тогда длинные строки повысят темп чтения текста. Однако, если важнее удобство работы, используйте небольшую длину строки.»
www.usability.gov/guidelines/readscan.html#one

Интерлиньяж (межстрочный пробел, высота строки)

Установка интерлиньяжа больше значения по умолчанию, примерно в 1.3em от обычного значения (т. е. 130%), значительно улучшит удобочитаемость. Высота строки связана с ее длиной. Чем больше длина строки, тем больше должен быть интерлиньяж.

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

Выбор шрифта

Выбирайте шрифт, который соответствует тематике вашего текста (подробнее в первой статье цикла — прим. перев.). Если вы будете использовать более двух шрифтов на странице, она может превратиться в «голливудскую» анонимку, склеенную из заголовков газет, отвлекая пользователей от содержания публикации. В печати для заголовков, как правило, используются рубленные шрифты, а для основного содержания — шрифты с засечками. В сети же рубленные шрифты употребляются в обоих случаях. Более четкие контуры рубленных шрифтов лучше подходят для мониторов с небольшой разрешающей способностью. Не смешивайте на одной странице рубленные шрифты и шрифты с засечками, т. к. это редко приводит к хорошему результату.

Курсив

Избегайте использования курсива при небольшом размере шрифта — проблема четкого отображения шрифтов на экранах еще не устранена полностью. Курсив смотрится особенно плохо при маленьком размере шрифта из-за сложности его визуализации с помощью квадратной пиксельной сетки. Если курсив необходим, постарайтесь не оформлять им большие объемы текста.

Заглавные буквы

Не пишите основной текст заглавными буквами, более того — лучше не делать так даже для заголовков. Заглавные буквы практически идентичны по размеру и форме, поэтому читать их сложнее, чем строчные.

Удобочитаемость текста увеличивается при использовании заглавных букв только в качестве начальных каждого слова заголовка (в соответствии с нашими правилами верстки в заголовках заглавной должна быть лишь первая буква, не считая правил правописания — прим. перев.). Заглавная буква, будучи более сложной для распознавания, привлекает внимание посетителя при беглом просмотре текста.

Контрастность

Обеспечьте хорошую контрастность цветов текста и фона.

Подчеркивание ссылок

Сделайте так, чтобы посетители легко могли отличить гипер-ссылку от всех остальных элементов страницы. Не стоит полагаться только на изменение курсора мыши при наведении на ссылку, т. к. это может сбивать с толку и понижает юзабилити (см. www.usability.gov/guidelines/links.html#six).

Просмотр пользователями веб-страниц

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

Похожие статьи

Цветной scrollbar — да или нет… (39,62%)
В последнее время, в связи с приходом CSS в массы, особую популярность среди начинающих webmaster'ов получила возможность изменять цвет scrollbar'а окна браузера. Эта функция привлекла людей своей простотой, и нетребовательностью в знании языка. Все что остается сделать, это заменить цвета частей scrollbar'а по своему вкусу…

StatWin — ревизор к нам уже приехал (38,83%)
Недавно мне захотелось проверить справедливость оценки трафика моим провайдером. Программ по этому вопросу написано довольно много. Вспомнил, что года два назад у меня стояла некая программа StatWin. Утилита StatWin оказалась комплексным средством для мониторинга активности пользователей системы…

Оптимизация сайта, продвижение и раскрутка — трактовка терминов (38,17%)
Де-факто в русскоязычном Интернете профессия оптимизатора имеет достаточно широкую трактовку, что вызывает терминологическую путаницу даже среди профессионалов. Эта проблема вызвана восприятием терминов «оптимизация сайтов», «продвижение сайтов» и «раскрутка сайтов» как синонимов. В статье будут рассмотрены различия между указанными терминами…

OpenOffice 2.0 — что нового? (37,5%)
Помнится, релиз версии 2.0 офисного пакета OpenOffice нам обещали еще летом. На момент написания статьи лету осталось ровно 7 минут. Безо всякой надежды на пунктуальность программистов, будем смотреть OpenOffice.org 2.0 beta2. Забегая вперед — несмотря на beta в названии OpenOffice стабилен и никаких неприятных сюрпризов не преподнес, только — приятные…

BK ReplaceEm — поиск и замена в текстовых файлах (36,21%)
BK ReplaceEm — утилита для поиска и замены текстовых фрагментов в файлах. Однако, в отличие от стандартных средств Search & Replace многих текстовых редакторов, BK ReplaceEm предназначен для работы с множеством файлов одновременно…

← Раздел «Вебмастеру: Юзабилити» | Комментарии (7) →

Ваше имя: 

Цифры с картинки:
Включите графику в браузере

Ваши комментарии:

Все поля формы обязательны для заполнения.
Комментарий: Любые HTML-теги в сообщениях запрещены.
Гиперссылки в комментариях не работают — добавлять спам бесполезно!
Максимальная длина комментария — 5000 символов.
Комментарии, не имеющие отношения к статье, будут удалены.

 

Доступность имеет значение Недавно я стал счастливым обладателем мобильного телефона со встроенным веб-браузером. Можно долго распространяться о том, как далеко вперед шагнули технологии. Но заметка о другом. В первый же день пользования «мобильным интернетом» стала понятна истина, к которой прежде я относился с иронией. И звучит эта истина так: «Доступность сайта имеет значение»…

5 правил создания небольшого бизнес-сайта Вы решили открыть свое небольшое дело в интернете и еще только начинаете создавать веб-сайт. У вас, вероятно, есть миллион разных вариантов того, как он должен выглядеть. Однако, ваши представления об идеальном веб-сайте могут сильно отличаться от того, каким действительно должен быть сайт, предназначенный для бизнеса и продаж…

Оформление текстов для веб — вопросы юзабилити Удобочитаемость текста зависит не только от гарнитуры шрифта, часто это не самая важная составляющая. Длина строки, контрастность цветов текста и фона, соотношение текста и пустого пространства, размер шрифта и, наконец, взаимодействие всех указанных факторов оказывают большее влияние на юзабилити веб-публикаций. В статье приводится перечень важных аспектов удобочитаемости и юзабилити текста…

Доступность текста в сети — определяем размер шрифта для верстки Во второй части введения в создание доступных и читабельных текстов для веб автор исследует проблему выбора оптимального размера шрифта для верстки текстов в сети, объясняет, почему этот вопрос так актуален и предлагает несколько полезных советов, которые могут быть приняты вами на вооружение для верстки текстов, легкодоступных посетителям вашего сайта…

Введение в оформление текстов для веб Эта статья — попытка разрешить проблемы и рассказать о подводных камнях, связанных с публикацией текстов в сети, а также сформулировать несколько принципов создания удобных и простых для чтения веб-страниц…

Оформление текстов для веб — вопросы юзабилити Удобочитаемость текста зависит не только от гарнитуры шрифта, часто это не самая важная составляющая. Длина строки, контрастность цветов текста и фона, соотношение текста и пустого пространства, размер шрифта и, наконец, взаимодействие всех указанных факторов оказывают большее влияние на юзабилити веб-публикаций. В статье приводится перечень важных аспектов удобочитаемости и юзабилити текста…