Библиотека Интернет Индустрии I2R.ru

Ответ прост: никакой! Как я уже и говорил раньше, несмотря на то, что дизайнеры разрабатывают страницы, надеясь на то, что люди будут скрупулезно вчитываться в текст, посетители просто ПРОБЕГАЮТ по страницам глазами.

Поэтому, когда к тому же текст не является удобочитаемым, ситуация усугубляется в разы. Ведь если посетителю нужно напрягаться, чтобы прочесть текст, то все остальное (навигация, графический дизайн и т. д.) оказывается не нужным. Обидно, не правда ли?

Выбор шрифта для экранного текста

Основной текст на страницах обычно имеет небольшой размер. Такой текст воспринимается значительно лучше, если используются рубленые шрифты, например, Arial, Verdana, а не шрифты с засечками (например, Times New Roman). Это происходит от того, что современные мониторы имеют сравнительно низкую разрешающую способность, и поэтому для того, чтобы четко отобразить засечки шрифта размером 10 пунктов попросту не хватает пикселов!

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

Я думаю, этот парадокс разрешится сам собой, когда мониторы будут улучшены настолько, чтобы чтение с экрана стало бы таким же быстрым и приятным, как чтение книги.

Вообще говоря, на то, что большинство пользователей Internet предпочитают беглое ознакомление внимательному чтению, во многом влияет именно качество современных мониторов. Чтение с экрана оказывает повышенную нагрузку на зрение и приблизительно на 25% медленнее, чем чтение текста с бумаги. Поэтому нет ничего удивительного в том, что люди пытаются свести к минимуму объем читаемой информации.

Но вернемся к проблеме выбора шрифта. Если бы мы с вами обсуждали печатные документы, разговор затянулся на многие десятки килобайт из-за неимоверного количества шрифтов, которые можно было бы использовать. Но в Internet все проще и сложнее одновременно. В Сети мы можем использовать только 3 основных шрифта с достаточно высокой степенью уверенности, что они отобразятся у всех посетителей одинаково. Это Arial, Verdana и Times New Roman.

Про то, как дружатся Таймс и экран я уже говорил. Из Ариала и Верданы на экране, на мой взгляд, лучше смотрится все-таки Ариал, т. к. у Верданы слипаются некоторые буквы (хотя, возможно, я придираюсь). А вот с распечатыванием все как раз наоборот. Кириллическая версия Ариала оставляет желать лучшего, и при печати документ, набранный этим шрифтом, кажется каким-то "небрежным. "

Поэтому мне больше нравится Вердана. Она практически ничем не уступает Ариалу на экране, а при печати документы выглядят лучше. Есть еще один камень в огород Ариала. Некоторые буквы при полужирном начертании и небольшом размере "сливаются". Мелочь, а не приятно.

Размер шрифта на сайте

Тут существую две набившие оскомину рекомендации:

1. Текст должен быть достаточно крупным, чтобы его было удобно читать всем
2. Размер шрифта должен быть маштабируемым. Иными словами, его размер в листах стилей (или непосредственно в коде страницы) нужно задать в относительных единицах измерения. Например, вместо 15px лучше написать 110%.

Психология восприятия шрифтов

Компьютерная техника дала нам большие возможности для самовыражения. И примером этого может служить наличие у каждого пользователя доступа к тысяче и одному шрифту.

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

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

Для примера дам пару конкретных рекомендаций.

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

Размер шрифта тоже играет важную роль в создании определенного эффекта.

Достаточно мелкий шрифт (скажем, 10-11 пунктов) создает ощущение большей доверительности и важности информации. Подразумевается, что текст настолько значителен, что нет нужды заниматься украшательством и делать его прочтение максимально комфортным. Наоборот, это обязанность читателя — склониться и прочитать столь важное сообщение.

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

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

Выбор цветов текста и фона на web-страницах

Выбор оптимальной цветовой гаммы очень важен для сайта. Она должна не только обеспечивать разборчивость текста, но и создавать у посетителя соответствующий настрой, отвечать целям сайта.

Немного теории. Существуют две полярные цветовые схемы: позитивная (черный текст на белом фоне) и негативная (белый текст на черном фоне). В целом, и та, и другая схема обладают хорошей читабельностью, хотя иногда говорят, что негативная схема слегка замедлят чтение из-за того, что способствует рассеянпю внимания читателя.

Какая цветовая схема все-таки наиболее оптимальна?

По этому поводу рекомендую прислушаться к рекомендациям моего знакомого программиста (программистам вообще можно доверять в этих вопросах, поскольку они очень много работают именно с экранным текстом):

"Для удобочитаемости очень важна подобранная контрастность. Черный шрифт на белом фоне очень сильно напрягает глаза. Гораздо лучше выглядит темно-серый шрифт на светло-сером фоне. К распечаткам на лазерном принтере это тоже относится. Наши американские партнеры печатают на бумаге с низкой степенью белизны и шрифтом с чернотой 60-80%."

А вот еще на заметку список некоторых распространенных цветовых сочетаний в порядке постепенного ухудшения восприятия их пользователем:

• Синий на белом
• Черный на желтом
• Зеленый на белом
• Черный на белом
• Зеленый на красном
• Красных на желтом
• Красный на белом
• Оранжевый на черном
• Черный на пурпурном
• Оранжевый на белом
• Красный на зеленом

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

Фон web-страниц

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

Влияние выравнивания и ширины текста на его удобочитаемость

Выравнивание текста

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

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

Ширина текста

И снова рекомендации все того же программиста:

"Посколько угол обзора при чтении составляет 15-20 градусов по горизонтали и 5 градусов по вертикали, то ширина текста при чтении с монитора не должна превышать 20 см и количество букв в строке должно быть в диапазоне 40-60. Иначе глазные мышцы будут совершать много лишних движений и поэтому уставать намного быстрее."

Регистр символов и удобочитаемость

НЕТ НИЧЕГО УЖАСНЕЕ, ЧЕМ ЦЕЛЫЕ АБЗАЦЫ ТЕКСТА, НАБРАННЫЕ В ВЕРХНЕМ РЕГИСТРЕ, ОСОБЕННО ЕСЛИ ВАМ ДЕЙСТВИТЕЛЬНО НУЖНО ИХ ПРОЧИТАТЬ. МОГУ ПОРЕКОМЕНДОВАТЬ НАБИРАТЬ ТАКИМ ОБРАЗОМ ДОГОВОРА, ЛИЦЕНЗИНОННЫЕ СОГЛАШЕНИЯ, СОДЕРЖАЩИЕ ВЫГОДНЫЕ ВАМ ПОДВОДНЫЕ КАМНИ :) ИЛИ, НАПРИМЕР, ТЕКСТ, ДЛЯ КОТОРОГО ВАЖНО ПРИСУТСТВИЕ ЕГО НА САЙТЕ КАК ТАКОГОВОГО, А НЕ ЕГО СОДЕРЖАНИЕ.

Вообще, текст, набранный заглавными и строчными буквами воспринимается лучше, чем литерами одинакового размера.

Вопросы-ответы

В этой постоянной рубрике публикуются вопросы читателей рассылки и мои ответы на них.

Вы совершенно правы: юзабилити — степень удобства использования. Это понятие может быть применимо в равной степени и к тостеру, и к веб-сайту. И насколько удобно и просто пользоваться тостером или сайтом определяет их "юзабильность".

Приведу примеры.

1. По кнопке размером 5 на 5 пикселей трудно попасть мышкой — значит, она не юзабильна.
2. На сайте, торгующем лыжами и другим инвентарем для зимнего спорта вместо привычной всем пользователям пиктограммы "тележки" для покупок использовалась пиктограмма "санок" для покупок, что сбивало покупателей с толку. Это тоже не юзабильное решение.
3. В операционной системе Windows 98 кнопка "Пуск" в отделена от левой и нижней границ экрана 3-мя пикселями. А в Windows XP она уже вплотную прилегает к границам экрана и попасть по ней гораздо проще — достаточно просто дернуть мышкой вниз и влево. Поэтому это решение — юзабильнее.

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

[ Задайте Ваш вопрос ]

На сегодня это все, спасибо за внимание

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