Офтоп
Редакция vc.ru

Почему читать тексты в вебе становится всё труднее — мнение

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

Редакция рубрики «Интерфейсы» публикует перевод материала.

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

Меня уже давно раздражает эта проблема, но последней каплей стало то, что платформа Google App Engine, с которой я работаю каждый день, вдруг из чёткой и ясной стала едва различимой. Текст, который только что был контрастным и тёмным, превратился в мертвенно-бледный. Да, с возрастом моё зрение падает, но в данном случае я явно страдаю от модного тренда.

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

Может быть, не все считают типографику важным элементом дизайна, но на самом деле она очень много значит. Одна из причин, почему интернет стал для нас главным каналом получения информации, — это доступность. «Сила веба в его универсальности, — писал его создатель Тим Бернерс-Ли. — В том, что он доступен каждому, независимо от его физических возможностей».

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

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

Старый дизайн Google App Engine — старомодно, но всё прекрасно видно

Современный дизайн с мелким и бледным текстом

Нетрудно догадаться, что главным условием разборчивости текста является контраст — разница между цветом шрифта и фона. В 2008 году организация Web Accessibility Initiative разработала общепринятый стандарт для создания удобочитаемых страниц. Этот стандарт использует числовые значения.

Если текст и фон имеют один и тот же цвет, контраст между ними выражается соотношением 1:1. Для чёрного текста на белом фоне (или наоборот) это 21:1. В руководстве для веб-дизайнеров оговаривается минимальный уровень контрастности шрифта — 4,5:1, а также его рекомендованный уровень — не меньше 7:1 (чтобы поддержать читателей с ослабленным зрением).

Эти рекомендации до недавнего времени чётко обозначали границы удобочитаемости. Но сегодняшние дизайнеры нарушают эти границы.

Уровни контраста в 2008 году

Например, в корпоративном руководстве по типографике Apple заявлено, что дизайнеры должны придерживаться уровня контрастности 7:1. Сама рекомендация при этом напечатана с контрастностью 5,5:1.

Фрагмент из руководства для разработчиков Apple

Руководство Google предлагает придерживаться такого же соотношения — 7:1. И тут же рекомендует добавлять прозрачность 54%, что в итоге выливается в контрастность 4,6:1.

Неудивительно, что выбор Apple и Google, которые сами балансируют на границе разборчивости, задаёт стандарты веб-дизайна для всех остальных компаний.

Так было не всегда. Изначально текст в интернете был очень разборчивым. Веб-браузер, созданный Бернерсом-Ли в 1989 году, использовал чёткий чёрный шрифт на белом фоне, а ссылки были голубыми. Этот же стиль по умолчанию стал стандартным в компьютере NeXT. И даже браузер Mosaic, который был запущен в 1993 году и тогда использовал чёрный текст на сером фоне, со временем сменил цвет фона на белый.

Появившийся в 1996 году HTML 3.2 расширил набор характеристик веб-дизайна, задав целый ряд цветов для текста и фона. И хотя этот набор включал в себя 216 цветов, едва ли существовавшие в то время 8-битные экраны могли адекватно их воспроизводить. Когда на смену им пришли экраны с разрешением 24 бит, дизайнеры отказались от кричащих оттенков 1990-х годов в пользу более изысканных цветов. Стали доступными пастельные фоны и элегантные шрифты.

Тогда дизайнеры ещё были ограничены набором шрифтов, установленным на конкретном компьютере. Большинство этих шрифтов были очень чёткими и хорошо читались, поэтому дизайнеры могли использовать для текстов более светлые оттенки. К 2009 году все шлюзы открылись: появилась возможность скачивать любые шрифты и добавлять их на любые страницы сайтов.

По мере развития LCD-технологии и появления экранов с большим разрешением возникла мода на более тонкие очертания букв. Лидером тренда стала Apple, назначившая Гельветику (Helvetica Neue Ultralight) своим системным шрифтом в 2013 году (правда, затем Apple немного отступила назад, введя опцию выделенного текста). Таким образом, по мере улучшения качества экранов дизайнеры стали использовать более светлые шрифты, более тонкие линии и меньший контраст.

Когда я спрашивал дизайнеров, почему серый шрифт стал таким популярным, многие ссылались на «Справочник типографа». Это руководство предостерегает от слишком сильного контраста, рекомендуя вместо чёрного шрифта (#000) использовать очень тёмный серый цвет (# 333).

Многие дизайнеры считают, что чёрный текст на белом фоне вызывает переутомление глаз и выбор более мягкого цвета делает страницу удобнее для чтения. Автор блога Magic of CSS Адам Шварц тоже приводит этот аргумент: «Резкий контраст между чёрным шрифтом и белым фоном может создать излишнее напряжение глаз (обратное тоже верно. Это весьма субъективно, но на это стоит обратить внимание)».

Позвольте мне побыть «капитаном очевидность»: Шварц сам признаёт субъективность своего вывода.

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

Несколько дизайнеров отослали меня к статье Яна Сторма Тейлора «Совет дизайнеру: никогда не используйте чёрный цвет». В ней Тейлор выдвигает тезис, что чистый чёрный — скорее концепт, чем цвет. «Мы видим тёмные предметы и принимаем их за чёрные, — пишет он, — тогда как в реальной жизни трудно найти предмет действительно чёрного цвета. Дорожное покрытие не чёрное, ваше кресло в офисе не чёрное, боковая панель в приложении Sparrow отнюдь не чёрного цвета, как и буквы на страницах сайтов».

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

Это подводит нас к основной проблеме. Адам Шварц отмечал: «Цвет, который мы видим, не является таковым ни для компьютера, ни для человеческого глаза».

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

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

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

{ "author_name": "Редакция vc.ru", "author_type": "self", "tags": ["\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 12, "likes": 17, "favorites": 22, "is_advertisement": false, "subsite_label": "flood", "id": 19580, "is_wide": true, "is_ugc": true, "date": "Wed, 02 Nov 2016 18:30:23 +0300", "is_special": false }
0
12 комментариев
Популярные
По порядку
Написать комментарий...

Вот из-за этой херни:

21

Это всё потому, что он чёрный.

4

«...за большим монитором с отличным расширением»

С чем-чем, простите?

2

Тот самый момент, когда отлично расширили

1

Спасибо, исправили

0

Годные замечания! Полностью согласен!

2

Пользуюсь Mozilla Firefox только из-за шрифта

1

тяжело это все как-то читать

1

Неужели я один помню бородатый анекдот:
- Чукча - не читатель! Чукча - писатель !
(те, кто пишут тексты, очень далеки от интересов тех, кто это читает)

0

Комментарий удален

Какие только проблемы люди не напридумывают себе

–1

Что-то ни слова при интерлиньяж и длину строки

–1

Комментарий удален

Режим Reader, принудительные шрифты, ну и f.lux, чтобы всё было в одной нежной оранжевой гамме чтобы облегчить нагрузку на глаза. Даже ВК пытался доказать что они провели отличный редизайн, в итоге позорно откатились практически к предыдущему с действительно необходимыми изменениями.

–3
Читать все 12 комментариев
Исследование: сотрудники хотели бы иметь комнату отдыха, бесплатный сок, а работодатели уже готовы покупать ЗОЖ-снеки

Онлайн-сервис доставки продуктов и товаров СберМаркет и исследовательское агентство Research Me спросили сотрудников, как они хотели бы питаться в офисе и что в нем видеть. В опросе приняли участие более 1500 работающих людей по всей России. Сервис также спросил работодателей – В2В-клиентов СберМаркета: что они покупают в офис, что точно никогда…

Как AliExpress забрал у меня $300

24.08 - оплачиваю заказ.

Разбор компании AMGEN. Растущая дивидендная компания

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

Правительство обязало мессенджеры регистрировать пользователей по паспортным данным с марта 2022 года Статьи редакции

Сервисы должны будут запрашивать данные у операторов, а те — предоставлять их в течение 20 минут после регистрации пользователя.

От ботаника до идола: стиль управления Питера Тиля и как «тилизм» стал доминирующим духом Кремниевой долины Статьи редакции

Перевод издания «Идеономика» статьи журналиста Макса Чафкина.

Наладили производство подделок и обманули Лувр: как братья из Одессы заработали на фальшивых древностях Статьи редакции

Шепсель и Лейба Гохманы в конце 19-го века продали Франции подделку под видом древней золотой тиары за 200 тысяч франков и ушли безнаказанными, а создатель украшения прославился в Европе — его тиара до сих пор хранится в Лувре.

Открытка с изображением поддельной тиары скифского царя Сайтаферна Amusing Planet
Как и где найти швею: наш подход к поиску производственного персонала

У нас в Кофтёнышах, 80% сотрудников — это производственный персонал: швеи, упаковщицы, мастера, а 20% — коммерческий и административный: дизайнеры, маркетологи, менеджеры интернет-магазина.

Несколько лет у нас было чёткое деление, где искать людей на свои позиции: синие воротнички на SuperJob и Авито, белые воротнички — на HeadHunter. Со временем видение изменилось, а подход мы систематизировали.

ПСБ запустил личный кабинет для предпринимателей. Там можно следить онлайн за каждым своим терминалом

Сервис предоставляется бесплатно.

Маркетинг здорового нечеловека: 3 сервиса для автоматизации маркетинга малого бизнеса

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

Скрин личного кабинета
Cloud CDN: что это такое, как устроено и кому нужно. Разбираем на примере бургеров

Cloud CDN — это сеть быстрой доставки статического контента в формате услуги облачного провайдера. Объяснить, как работает технология, проще всего на примере — сравнить Cloud CDN с популярным продуктом, который выглядит плюс-минус одинаково вне зависимости от того, заказали вы его в Москве, Питере или Нью-Йорке. Знакомьтесь: классический бургер.…

Как не попасть в карьерную ловушку тимлида: личный опыт

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

null