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

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

Экран против журнала: 100% — это НЕ много. Фото — Вилсон Майнер.

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

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

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

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

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

Потому что тогда все сайты плохи. Нет ничего плохого в прокрутке. Совсем ничего. Так же как нет ничего плохого в переворачивании страниц в книгах.

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

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

Не говорите нам одеть очки

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

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

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

Тот размер, что вы видите на сайте http://informationarchitects.jp/100e2r/ не большой. Это то, что браузеры отображают по умолчанию. Это размер, который браузеры должны были отображать.

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

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

2. Активное использование пустого пространства

Дайте вашему тексту дышать. Использование пустого пространства — не прихоть дизайнера. Это не дело вкуса.

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

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

Хороший Нильсон — Плохой Нильсон

«Король Юзабилити» недавно добавил белого пространства и максимальную ширину столбца в своих статьях (на скриншоте слева). Старая разметка тянулась до 100% (на скриншоте справа). Немного больше места между строками и можно праздновать!

Простое правило: 7-11 слов на строку; для тянущихся дизайнов, при 100% размере шрифта — 50% на ширину колонки (относительно размера окна) — отличный эталон для большинства разрешений экрана.

3. Дружественный к читателю интерлиньяж

Вот, что говорит специалист по чтению:

Интерлиньяж, установленный в HTML по умолчанию, слишком мал. Если вы увеличите его, то текст станет более читабельным. 140% — хороший ориентир.

4. Отчетливый контраст цвета

Это даже не нужно говорить. Но если вы до сих пор верите, что можно использовать одну из этих комбинаций:
1. светло-серый текст на еще более светло-сером фоне
2. «серебряный» текст на снежно-белом фоне
3. серый текст на желтом фоне
4. желтый текст на красном фоне.
5. зеленый текст на красном фоне, и так далее...
... то вы не веб-дизайнер, а просто «дизайнер с точкой зрения» (смысл этой метафоры не очень ясен, следует читать статью по ссылке, — прим. переводчика). Если же вы настаиваете на том, что вы веб-дизайнер, тогда вам должно быть известно, что никто никогда не узнает то, что вы хотите сказать, если не сможет это прочитать. Так что отбросьте этот нонсенс и дайте нам увидеть то, что вы печатаете. На заметку: для экранного дизайна слишком сильный контраст (чисто черный на белом) не идеальный вариант, так как текст начинает рябить. Хорошее начало: #333 на #fff.

5. Никакого текста картинками

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

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