Большинство сайтов переполнены мелким текстом, который больно читать. Почему? Нет никаких причин для втискивания всей информации на одном экране, это просто глупая коллективная ошибка, которая берет начало во времена, когда мониторы были очень маленькими.
Мы не хотим изменять настройки браузера каждый раз, когда заходим на сайт!
Перегруженные сайты выглядят ужасно. Заполнение страницы под завязку не способствует юзабилити. Вы нагружаете нас хламом только из-за своей лени. Мы хотим, чтобы вы подумали и выбрали только то, что действительно важно, никто не хочет делать работу за вас.
Ведь, это значит что все сайты плохие. Нет ничего неправильного в необходимости скроллинга, точно также как нет ничего плохого в перелистывании страниц книги.
95% того, что обычно называют веб дизайном — это типографика.
Просто перестаньте облизывать экран, откиньтесь назад и читайте в расслабленной позе.
Мы не хотим нажимать на кнопки увеличения или уменьшения и менять настройки браузера. Мы хотим, чтобы вы подстраивались под наши настройки и мониторы.
Создание хорошей страницы, использующей крупные шрифты, действительно сложная задача, но, преодолев все трудности, вы получите простой и удобный сайт. Легко втиснуть на страницу всю возможную информацию, сделать страницу простой и понятной пользователям, сложно. Поначалу стандартный размер шрифта может вас шокировать, но уже через день вы не захотите видеть ничего мельче 100% или 1em для основного текста. Он выглядит крупным, но скоро вы поймете, почему все производители браузеров выбрали именно такой размер шрифта по умолчанию.
Текст должен дышать. Использование пространства это не просто прихоть дизайнеров или дело вкуса, наличие воздуха вокруг текста уменьшает нагрузку на читателя и позволяет ему лучше сфокусироваться на смысле. Нет никакой необходимости заполнять все окно разным хламом. То, что пространство смотрится лучше это не побочный эффект, а следствие функционального дизайна.
Брокманн: «Ширина колонки это не только вопрос дизайна и формата, это в такой же степени вопрос читабельности»
Убедитесь, пожалуйста, что ширина колонки не слишком велика, и вы добавили пространство слева и справа, чтобы глазу было проще находить начало строки. Мы не хотим настраивать размер шрифта или ширину окна, когда заходим на сайт, мы хотим просто читать.
Замечательно если ширина колонки изменяется так, чтобы строки никогда не заканчивались за пределами окна.
Ширина колонки должна быть такой, чтобы каждая строка содержала 10-15 слов. Для резиновой разметки, и размера шрифта 100%, колонка в 50% ширины окна дает хороший результат на большинстве разрешений.
Хороший Нильсен — Плохой Нильсен. Король юзабилити недавно добавил немного пространства на своем сайте и установил максимальную ширину колонки, немного увеличил и высоту строки, что очень хорошо сказалось на читабельности текстов.
Вот что об этом говорят специалисты по чтению:
Строки, размещенные слишком близко, уменьшают скорость чтения, потому что в поле зрения попадают предыдущая и следующая, читатель не может сфокусироваться, тратит энергию в неверных местах и быстро устает, то же самое верно и для слишком разреженных строк.
Высота строки, используемая браузерами по умолчанию, слишком мала, если ее увеличить текст станет более читальным, хороший результат дает 140% лидинг.
Об этом даже не стоит говорить. Но если вы все еще используете одну из следующих комбинаций:
тогда вы просто пытаетесь изображать из себя дизайнера, никто в это не поверит, потому что никто не может прочитать то, что вы пишите. Прекратите это недоразумение и сделайте так, чтобы мы могли видеть, что вы пишите.
Примечание: Для экранного текста слишком сильный контраст (черный и белый) не всегда лучшее решение, потому что текст начинает мерцать. Попробуйте #333 на #fff.
Мы хотим иметь возможность искать текст, копировать текст, сохранять текст, играть с курсором и выделять текст, когда читаем. Текст в виде изображений смотрится красиво, но красота это не то, что нужно в веб. Веб это связь и информация, а информация должна быть читабельной и удобной, масштабируемой, цитируемой и сохраняемой.
Если вы не можете сделать красивый сайт без текста в изображениях, я боюсь, что вам придется начать все сначала и научиться.
Если вы хотите, чтобы больше сайтов были удобными и читабельными, внесите свой вклад в популяризацию заботы о пользователях, разместите на своем сайте ссылку на эту страницу, чтобы люди знали, что читабельность очень важна. Если вы присоединитесь к акции 100E2R, я буду счастлив, добавить вас в список участников.
Оставляйте комментарии на странице 100% Easy-2-Read — Design For Masters, содержащие ссылку и пару строчек описания, если ваш сайт соответствует принципам 100E2R, я добавлю его в список на этой странице независимо от того нравиться мне его дизайн или нет. Конечно никакого спама, пopно или политики.
Честь российского дизайна пока никто не поддержал.
Что думаете, я точно знаю что для Verdana 16px это слишком, а Arial не очень читаем и на 16px, поэтому хочется услышать различные мнения насчет 100% размера шрифтов и увидеть сайты где они используются, кидайте ссылки, многие из сайтов, участвующих в акции, удобными и читабельными никак не назовешь.
Не говорите нам, что можно настроить размер шрифта
Мы не хотим изменять настройки браузера каждый раз, когда заходим на сайт!
Не говорите нам, что заполненная страница лучше смотрится
Перегруженные сайты выглядят ужасно. Заполнение страницы под завязку не способствует юзабилити. Вы нагружаете нас хламом только из-за своей лени. Мы хотим, чтобы вы подумали и выбрали только то, что действительно важно, никто не хочет делать работу за вас.
Не говорите нам, что скроллинг это плохо
Ведь, это значит что все сайты плохие. Нет ничего неправильного в необходимости скроллинга, точно также как нет ничего плохого в перелистывании страниц книги.
Не говорите нам, что текст не важен
95% того, что обычно называют веб дизайном — это типографика.
Не говорите нам, что нужно взять очки
Просто перестаньте облизывать экран, откиньтесь назад и читайте в расслабленной позе.
Пять простых плавил
1. Стандартный размер шрифта для длинных текстов
Мы не хотим нажимать на кнопки увеличения или уменьшения и менять настройки браузера. Мы хотим, чтобы вы подстраивались под наши настройки и мониторы.
Создание хорошей страницы, использующей крупные шрифты, действительно сложная задача, но, преодолев все трудности, вы получите простой и удобный сайт. Легко втиснуть на страницу всю возможную информацию, сделать страницу простой и понятной пользователям, сложно. Поначалу стандартный размер шрифта может вас шокировать, но уже через день вы не захотите видеть ничего мельче 100% или 1em для основного текста. Он выглядит крупным, но скоро вы поймете, почему все производители браузеров выбрали именно такой размер шрифта по умолчанию.
2. Активное пространство
Текст должен дышать. Использование пространства это не просто прихоть дизайнеров или дело вкуса, наличие воздуха вокруг текста уменьшает нагрузку на читателя и позволяет ему лучше сфокусироваться на смысле. Нет никакой необходимости заполнять все окно разным хламом. То, что пространство смотрится лучше это не побочный эффект, а следствие функционального дизайна.
Брокманн: «Ширина колонки это не только вопрос дизайна и формата, это в такой же степени вопрос читабельности»
Убедитесь, пожалуйста, что ширина колонки не слишком велика, и вы добавили пространство слева и справа, чтобы глазу было проще находить начало строки. Мы не хотим настраивать размер шрифта или ширину окна, когда заходим на сайт, мы хотим просто читать.
Замечательно если ширина колонки изменяется так, чтобы строки никогда не заканчивались за пределами окна.
Ширина колонки должна быть такой, чтобы каждая строка содержала 10-15 слов. Для резиновой разметки, и размера шрифта 100%, колонка в 50% ширины окна дает хороший результат на большинстве разрешений.
Хороший Нильсен — Плохой Нильсен. Король юзабилити недавно добавил немного пространства на своем сайте и установил максимальную ширину колонки, немного увеличил и высоту строки, что очень хорошо сказалось на читабельности текстов.
3. Удобная высота строки
Вот что об этом говорят специалисты по чтению:
Строки, размещенные слишком близко, уменьшают скорость чтения, потому что в поле зрения попадают предыдущая и следующая, читатель не может сфокусироваться, тратит энергию в неверных местах и быстро устает, то же самое верно и для слишком разреженных строк.
Высота строки, используемая браузерами по умолчанию, слишком мала, если ее увеличить текст станет более читальным, хороший результат дает 140% лидинг.
4. Четкий контраст
Об этом даже не стоит говорить. Но если вы все еще используете одну из следующих комбинаций:
- светло серый текст на легком сером фоне
- серый текст на белом фоне
- серый текст на желтом фоне
- желтый текст на красном фоне
- зеленый текст на красном фоне и тому подобное…
тогда вы просто пытаетесь изображать из себя дизайнера, никто в это не поверит, потому что никто не может прочитать то, что вы пишите. Прекратите это недоразумение и сделайте так, чтобы мы могли видеть, что вы пишите.
Примечание: Для экранного текста слишком сильный контраст (черный и белый) не всегда лучшее решение, потому что текст начинает мерцать. Попробуйте #333 на #fff.
5. Не делайте текст в виде изображений
Мы хотим иметь возможность искать текст, копировать текст, сохранять текст, играть с курсором и выделять текст, когда читаем. Текст в виде изображений смотрится красиво, но красота это не то, что нужно в веб. Веб это связь и информация, а информация должна быть читабельной и удобной, масштабируемой, цитируемой и сохраняемой.
Если вы не можете сделать красивый сайт без текста в изображениях, я боюсь, что вам придется начать все сначала и научиться.
Борьба за читабельность
Если вы хотите, чтобы больше сайтов были удобными и читабельными, внесите свой вклад в популяризацию заботы о пользователях, разместите на своем сайте ссылку на эту страницу, чтобы люди знали, что читабельность очень важна. Если вы присоединитесь к акции 100E2R, я буду счастлив, добавить вас в список участников.
Как присоединиться к E2R
Оставляйте комментарии на странице 100% Easy-2-Read — Design For Masters, содержащие ссылку и пару строчек описания, если ваш сайт соответствует принципам 100E2R, я добавлю его в список на этой странице независимо от того нравиться мне его дизайн или нет. Конечно никакого спама, пopно или политики.
Участники акции 100E2R
- James Starkie: James Starkie is a graphic artist / designer and his website is a nice showcase for decent simple 100er2 design.
- Piqniq: Social Network for foreign families in Japan.
- Asoboo: International Social Network for Japanese that want to become foreigners and foreigners that want to become Japanese.
- Dadako: Internationally acclaimed pixelpusher Hawken King is currently redesigning his website according 100E2R. iA is particularly proud we could convert him. So far he’s updated his blog. We can’t wait to see the currently hidden treasures (like the work he did for Nintendo) of his amazing portfolio integrated in a easy to browse and read format.
- Katzenbach: Blog about the current re-configuration of the media landscape and a scratch book for his master thesis on structures and discourses in the blogosphere.
- Kilian Muster: Typographer, blogger, podcaster living in Japan. Very nice 100E2R example.
- Glorum: Very intriguing Wiki-posting-blackboard-web2.0 thing in gamma stage. Haven’t found out what it is, but it is on a good path.
- Engtech: Geeky stuff like blogging, programming, general nerdery, internet trends, marketing, how-to guides…
- Blue Fountain Blog: They say: “Don’t look at our main site whatever you do”
- Protos: Creative stuff by Kristian Türning regarding: Internet culture, innovation, UI, branding and unlimited success.
- Neunzehnhundert: German Blog: We’re just two lost souls swimming in a fish bowl, year after year, running over the same old ground. What have we found?
- NVAC: The National Visualization and Analytics Center is a national and international resource providing strategic leadership and coordination for visual analytics technology and tools. NVAC supports the Department of Homeland Security’s mission to secure our homeland and protect the American people.
- Corum: Corum Web Designs specializes in simple website designs. We don’t do Flash, Java, Multimedia, or database driven shopping carts.
- Praegnanz: German weblog. Indeed 100% easy to read.
- TagCrowd: Blog for the TagCrowd web app where you can roll your own tag clouds from any text.
- Clinton Forbes: The rantings of Clinton Forbes.
- Jens: He writes mostly about web, xhtml and css stuff.
- Adub: Web application design with emphasis on usability and simplicity.
- De Amicis: De Amicis is a small company who’s mission is to help software development companies test their work.
- Connexin Heiko’s Website with (German) info on all sorts of themes.
- Gwersi Cymraeg A blog in Welsh promoting the Welsh. As far as I can tell…
- rsart“A games industry site, where I generally talk rubbish but every now and them try to dole out useful advice to people who want a job making games”
Честь российского дизайна пока никто не поддержал.
от себя
Хм… Правда ли?
Что думаете, я точно знаю что для Verdana 16px это слишком, а Arial не очень читаем и на 16px, поэтому хочется услышать различные мнения насчет 100% размера шрифтов и увидеть сайты где они используются, кидайте ссылки, многие из сайтов, участвующих в акции, удобными и читабельными никак не назовешь.
