100% Easy-2-Read

Oliver Reichenstein, 6 мая 2007

Большинство сайтов переполнены мелким текстом, который больно читать. Почему? Нет никаких причин для втискивания всей информации на одном экране, это просто глупая коллективная ошибка, которая берет начало во времена, когда мониторы были очень маленькими.

Не говорите нам, что можно настроить размер шрифта

Мы не хотим изменять настройки браузера каждый раз, когда заходим на сайт!

Не говорите нам, что заполненная страница лучше смотрится

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

Не говорите нам, что скроллинг это плохо

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

Не говорите нам, что текст не важен

95% того, что обычно называют веб дизайном — это типографика.

Не говорите нам, что нужно взять очки

Просто перестаньте облизывать экран, откиньтесь назад и читайте в расслабленной позе.

Пять простых правил

1. Стандартный размер шрифта для длинных текстов

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

Создание хорошей страницы, использующей крупные шрифты, действительно сложная задача, но, преодолев все трудности, вы получите простой и удобный сайт¹. Легко втиснуть на страницу всю возможную информацию, сделать страницу простой и понятной пользователям, сложно. Поначалу стандартный размер шрифта может вас шокировать, но уже через день вы не захотите видеть ничего мельче 100% или 1em для основного текста. Он выглядит крупным, но скоро вы поймете, почему все производители браузеров выбрали именно такой размер шрифта по умолчанию.

2. Активное пространство

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

Брокманн: «Ширина колонки это не только вопрос дизайна и формата, это в такой же степени вопрос читабельности»

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

Замечательно если ширина колонки изменяется так, чтобы строки никогда не заканчивались за пределами окна.

²

Хороший Нильсен — Плохой Нильсен. Король юзабилити недавно добавил немного пространства на своем сайте и установил максимальную ширину колонки, немного увеличил и высоту строки, что очень хорошо сказалось на читабельности текстов.

Ширина колонки должна быть такой, чтобы каждая строка содержала 10-15 слов. Для резиновой разметки, и размера шрифта 100%, колонка в 50% ширины окна дает хороший результат на большинстве разрешений.

3. Удобная высота строки

Вот что об этом говорят специалисты по чтению:

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

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

4. Четкий контраст

Об этом даже не стоит говорить. Но если вы все еще используете одну из следующих комбинаций:

1. светло серый текст на легком сером фоне
2. серый текст на белом фоне
3. серый текст на желтом фоне
4. желтый текст на красном фоне
5. зеленый текст на красном фоне и тому подобное…

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

Примечание: Для экранного текста слишком сильный контраст (черный и белый) не всегда лучшее решение, потому что текст начинает мерцать. Попробуйте #333 на #fff.

5. Не делайте текст в виде изображений

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

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

Борьба за читабельность

Если вы хотите, чтобы больше сайтов были удобными и читабельными, внесите свой вклад в популяризацию заботы о пользователях, разместите на своем сайте ссылку на эту страницу, чтобы люди знали, что читабельность очень важна. Если вы присоединитесь к акции 100E2R, я буду счастлив, добавить вас в список участников.

Как присоединиться к E2R

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