Размер шрифта пусть выбирают сами пользователи

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

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

Управление шрифтами

Настоящей статьей я начинаю кампанию за то, чтобы Microsoft в своем броузере дала пользователям возможность переопределять размер шрифта, заданный на любой Web-странице веб-дизайнером.

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

Разумеется у некоторых веб-броузеров есть функция, позволяющая пользователям создавать свой собственный список стилей. Это конечно хорошо. Для опытных пользователей. Но 99% пользователей просто хотят увеличить размер текста на странице, если его трудно читать. Броузер iCab, выпускаемый только для Macintosh, дает пользователям эту возможность. Так давайте же сделаем Internet Explorer таким же дружественным по отношению к пользователям.

И так, давайте выясним для начала, почему же так трудно читать большую часть веб-сайтов? Есть две версии:

• Большинство дизайнеров - молодые люди. У них прекрасное зрение. Мелкий текст им не в тягость, в отличие от тех, кто перешагнул порог 40 лет. Дизайнеры также как правило работают на дорогих высококачественных мониторах, которые не утомляют глаз.

 

• При создании веб-сайтов дизайнеры не читают информацию на странице. Они просто бросают на нее взгляд мельком, чтобы убедиться, что текст лег в страницу правильно. Иногда большая часть дизайнов сдается с текстом "lorem ipsum" вместо реального текста, который на странице будет.

Так как слишком много сайтов выбирают для своего текста неверный размер шрифта, пользователям как правило приходится его менять. Первые версии Internet Explorer поддерживали эту необходимость. У них на панели инструментов были две кнопки: одна для того, чтобы увеличить размер шрифта, а другая - чтобы уменьшить. Именно так это и должно было быть.

Господин Гейтс, пожалуйста, верните нам эту хорошую дизайнерскую находку, которая была в IE4 для Macintosh-а.

Как упростить управление шрифтом

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

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

Для тех же опытных пользователей, которые все-таки разобрались с настройками и вернули отсутствующую кнопку на панель инструментов, сама процедура изменения текста в IE6 будет занимать несколько этапов:

1. Переместить курсор к кнопке. Так как кнопки на панели IE достаточно велики, этот этап выполняется весьма быстро (согласно закону Фиттса - Fitts's Law)
2. Нажать кнопку.
3. На экране появится выпадающее меню, в котором перечислены пять вариантов размеров текста. Надо просмотреть этот список и отметить про себя, какой размер сейчас активен.
4. Определить, какой новый размер необходим. Как правило, это следующий размер (меньше или больше) рядом с текущим размером.
5. Все ещё удерживая кнопку мышки, необходимо переместить курсор к тому пункту меню, который соответствует выбранному размеру.
6. Отпустить кнопку мышки.

Нажать нужную кнопку.

Разумеется я немножко схитрил: вам все равно необходимо выполнить первый этап - т.е определить, в какую строну вы хотите изменить размер шрифта, чтобы решить, какую кнопку нажимать. Но тем не менее, так как вся эта процедура вызывается вашим раздражением тем, что вам неудобно читать текст, вы уже заранее знаете, что вам нужно текст увеличить (или уменьшить). У среднего пользователя нету в поведении функции под названием "изменить размер текста", которой подаются в качестве параметра определенное значение размера; наоборот, у среднего пользователя есть две функции: "мельче" и "крупнее". Вне зависимости от того, каким образом вы программируете ту или иную функцию, ее поведение должно отражать модель представлений пользователя, а не языка программирования.

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

Как видим юзабилити броузера увеличивается на порядки, при использовании одно-функциональных кнопок, которые пошагово движут пользователя в одном направлении. Отметим, что результат выполнения действия должен отображаться достаточно быстро после каждого нажатия на кнопку. Именно поэтому, кстати, кнопка Back так ценится пользователями. Именно поэтому ею пользуются чаще, чем функцией History.

Как улучшить броузеры будущего

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

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

 

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

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

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

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

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

Советы по улучшению читаемости веб-сайта

Глупо просто сидеть и ждать, пока Microsoft создаст хороший броузер, хотя это окончательно решило бы проблему с размерами шрифта. Ну, а пока читаемость веб-сайтов можно увеличить, пользуясь следующими советами:

• Не используйте абсолютные размеры шрифтов в своих списках стилей. Задавайте размеры шрифта в относительных величинах. Как правило это делается с помощью процентов: например, 120% для большого текста и 90% для мелкого.
• Размер шрифта по умолчанию должен быть разумно большим (как минимум 10 точек), чтобы лишь немногим пользователям приходилось менять его размер.
• Если целевая аудитория вашего сайта - пожилые люди, делайте размер шрифта еще большим (как минимум12 точек).
• Если возможно, не используйте графический текст. Это связано с тем, что с помощью стилей можно поменять размер простого текста, а на размер графических изображений они не влияют. Если вам все-таки приходится использовать текст "отлитый" в графике, постарайтесь использовать достаточно большой размер шрифта (как минимум 12 точек), а также выбирайте высококонтрастные цвета.
• Подумайте над тем, чтобы добавить к интерфейсу кнопку, загружающую альтернативный список стилей, в котором заданы очень большие размеры шрифта. Это особенно касается сайтов, чьи посетители - пожилые люди, или люди со слабым зрением. Лишь немногие пользователи знают о скрытой функции изменения размера шрифта в броузере, потому добавление такой кнопки облегчит им эту задачу. Однако, добавление каждой новой функции все равно что-то отнимает от каждой страницы, я не рекомендую применять данный совет на сайтах с широкой аудиторией.
• Увеличьте по максимуму контраст между текстом и фоном (и не пользуйтесь, пожалуйста, фоновыми изображениями, рябящими в глазах). Несмотря на то, что уже давно известно, насколько низкоконтрастный текст затрудняет читаемость сайта, Web кишит результатами таких изысков.

Статьи по теме

9 лучших бесплатных фотостоков

В этой подборке представлены 9 ресурсов, где можно бесплатно загрузить изображения «без ограничений авторского права»: живые фото...

2025-12-02

10 причин высокого показателя отказов на сайте

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

2025-11-26

Зачем запускать MVP и как сделать это грамотно?

Создание проекта без минимально жизнеспособного продукта (MVP) аналогично строительству здания без проверки несущей способности фу...

2025-11-26

Перенос сайта с большим количеством ссылок

Сложности переноса крупных проектов Перенос корпоративных сайтов с большим количеством URL требует решения не только техниче...

2025-11-20

Онлайн-формы: универсальный инструмент для сбора обратной связи

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

2025-11-14

Авторизация на сайте: как выбрать решение для удержания клиентов и сохранения продаж

Оглавление Кому нужна авторизация на сайте? Когда и как лучше вводить авторизацию? Виды авторизации: что выбрать для удерж�...

2025-11-14

Внедрение DMARC для защиты корпоративного домена от спуфинга

Привет, Хабр! В этом посте мы снова поговорим о проблеме подделки отправителя (или так называемом спуфинге)...

2025-10-28

Цифровой детокс: необходимость, тренд или искусственная потребность?

Если десять лет назад смартфоны символизировали технологический прогресс, то сегодня каждый третий пользователь (35%) открыто призн...

2025-10-24

No-code/low-code: как создавать цифровые продукты в 2025 без программистов

Представьте: у вас родилась блестящая идея. Не просто очередная догадка, а по-настоящему инновационное решение, которое может изм�...

2025-09-26

Yandex Data Lens: как визуализировать данные для маркетинга и аналитики

Yandex DataLens — это сервис от Яндекса, с помощью которого маркетологи визуализируют результаты рекламных кампаний. Он подключается к разным ...

2025-09-10

Владельцам сайтов: изменения в законе о персональных данных

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

2025-07-04

11 нейросетей для генерации изображений в 2025 году

Генерация картинок нейросетью упрощает работу маркетологам, дизайнерам, контент-мейкерам, а теперь — и владельцам бизнеса. Для всех �...

2025-06-10

Год назад то, что занимало у меня несколько дней работы, сейчас я делаю за 1-2 часа. Без преувеличений. И это только начало

За этот год я нашел 7 способов применения ИИ, с которыми моя эффективность и качество взлетели минимум в пять раз. Расскажу честно — без п...

2025-05-30

Нейросети для написания текста: 7 сервисов в помощь копирайтеру

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

2025-05-25

Мы делали презентации 35 лет, а потом пришла нейросеть

*Отсчёт от создания PowerPoint в 1987 году Эту историю для блога рассказал Николай Букин, дизайнер и основатель брендингового ...

2025-05-05