IMG	PDA версия	тел. +7(98I) 7608865
		Юзабилити у вас перед лицом, или критерии 100% читаемости сайтов

абракадабра :-)

<-предыдущая следующая ->

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

Экран и журнал: 100%-размер шрифта — это не много. Фотограф: Wilson Miner.

Не заставляйте нас изменять размер шрифта

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

Не говорите что переполненные сайты выглядят лучше

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

Не говорите что прокрутка страниц — это плохо

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

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

95% веб-дизайна — это типографика (eng).

Не заставляйте нас носить очки

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

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

1. Оставьте размер шрифта для основного текста как есть

Размер шрифта который вы читаете сейчас не есть большой. Это тот размер который браузер использует по-умолчанию (имеется ввиду сайт автора, но ведь врёт, редиска!).

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

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

2. Пустое пространство — активный элемент дизайна

Позвольте вашему тексту дышать. Использование пустого пространства — это не прихоть отдельного дизайнера и не имеет отношения к чувству прекрасного (eng).

«Ширина колонки должна быть пропорциональна размеру шрифта. Чересчур широкие колонки утомляют глаза и ещё имеют некоторый (какой же?) неблагоприятный психологический эффект. Чересчур сжатые тоже могут мешать, потому что прерывают процесс чтения и фрустрируют читателя, заставляя глаза сменять строку слишком часто.»
Josef Muller-Brockmann, Grid Systems

Использование пустого пространства уменьшает уровень напряжения, так как позволяет проще фокусироваться на главном. Вам не надо заполнять всё окно браузера. То что пустое простанство делает сайт приятнее — не случайный эффект: это логичное следствие конструктивного дизайна. Кто сказал что сайты должны быть наполнены подзавязку?

Muller-Brockmann: «Вопрос о ширине колонки — это вопрос не только дизайна или формата сайта; вопрос доходчивости не менее важен.»

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

Король юзабилити, Якоб Нильсен, недавно добавил путого пространства на своём сайте и ограничил максимальную ширину контента (левая картинка). В прежней версии (картинка справа) статья расширялась на всё окно. Немного увеличить межстрочное расстояние, и ты будушь совершенен, Якоб.

Простое правило: по 10-15 слов в строке (это для английского языка; для русского, где слова в среднем длиннее, стоит взять величину поменьше). Для резиновой вёрстки, при 100% величины шрифта, половина окна для основной колонки будет хорошим решением на большинстве разрешений экрана.

3. Поменяйте высоту строки на удобную для чтения

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

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

Межстрочное расстоние в HTML слишком мало по умолчанию. Если вы увеличите его, текст станет более легко читаемым. 140% будет в самый раз.

4. Используйте контрастные цвета

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

… значит вы не веб-дизайнер, а всего-лишь дизайнер-самодур (так я перевёл «with an attitude», спасибо комментаторам). Если вы настаиваете на бытии своём веб-дизайнером, то должны знать что никто даже не сможет прочитать что вы написали. Прекратите этот абсурд и позвольте людям прочитать то что вы пишете. Заметьте, для экранного дизайна наиболее сильный контраст тоже неидеален, так как буквы начинают мерцать (flicker; кажется, имеется ввиду неравномерность отрисовки). Попробуйте #333 на фоне #fff.

5. Нет тексту в изображениях!

Мы хотим искать текст, копировать текст, сохранять текст, играть курсором и выделять/помечать его пока читаем. Текст в изображениях выглядит приятно, но приятность — не то для чего существует интернет (eng). Он существует для общения и доступа к информации, и эту информацию должно быть легко читать, масштабировать, цитировать, копировать и передавать.

Если вы не можете сделать сайт, хорошо выглядящий без текста облачённого в изображения, вы должны будете начать (учиться, что ли?) с самого начала.

Расскажите об этом людям

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

____ от переводчика ____

Firefox 3.0.5 позволяет не зависеть от желаний дизайнеров, он прозрачно запоминает настройки zoom для каждого сайта (раньше был нужен аддон «No Squint»).

Ростислав Чебыкин в своей книге упоминает что в CSS размер шрифта (кегль) предпочтительнее указывать как font-size: 1em; для нашего случая. Стандартные именованные обозначения (large, medium, small) и проценты (font-size: 100%;) не годятся потому что в некоторых случаях могут привести к различному отображению текста.

Автору статьи, Oliver'у, неплохо бы самому задуматься над такими проблемами в readability своего сайта как:
а) сильные затруднения при поиске посещённой ссылки в тексте (почти не отличается от основного текста),
б) трудно прочитать дату написания статьи и комментариев — их там просто нет.
/habrahabr.ru/blogs/webdev/48862/#habracut
Перевод статьи Oliver Reichenstein «The 100% Easy-2-Read Standard».

Создание эксклюзивных сайтов, юзибилити анализ и бесплатный анализ под запросы основных поисковых машин

Контактная информация :
тел. +7(98I) 7608865

Полная карта сайта