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

Иногда технологический прогресс становится палкой о двух концах. Иногда получается, что лучшая технология оказывается худшей для ее пользователей. 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 кишит результатами таких изысков.

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

Комментирование кода и генерация документации в PHP

Зачем нужны комментарии к программному коду? В каком виде их писать? Где они нужны, а где нет? Как правильно комментировать код? Как прид�...

2024-04-22

Что такое CSS-модули и зачем они нам?

В последнее время меня интригуют CSS-модули. Если вы о них не слышали — эта статья для вас. Мы рассмотрим, что это за проект, какие задачи о�...

2024-04-22

23 сервиса для эффективного экспресс-аудита любого сайта

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

2024-04-17

Яндекс переходит на новую версию Wordstat

Часть старой функциональности уже недоступна. Обновленный Яндекс Вордстат полностью перейдет на основной домен wordstat.ru 20 марта. С...

2024-04-08

Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть

Она умеет распознавать эмоции человека по голосу. Алгоритм-эмпат определяет характер речи пользователя: говорит он с явным негатив...

2024-04-08

Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI

Скорость обработки сложных научных статей составляет менее трех секунд. Новое поколение моделей ИИ от компании Antropic под названием Cl...

2024-04-08

Как пользоваться GPT 4 и Claude бесплатно и без VPN

Как бесплатно пользоваться GPT 4, его плагинами, а также новой нейросетью Claude 3? Это можно делать в рамках одного сайта, который называет�...

2024-04-08

Как использовать анимацию с помощью JavaScript-библиотеки GSAP

Узнайте, как использовать мощную JavaScript-библиотеку GSAP для создания захватывающих анимаций на веб-страницах, освоив основы и примеры. GSAP...

2024-03-13

Использование GSAP 3 для веб-анимации

Использование GSAP 3 для веб-анимации От автора: Greensock Animation Platform (GSAP) — это простая в использовании библиотека JavaScript для веб-анимации....

2024-03-13

Мерч и IT: на что обратить внимание в 2024 году

Оглавление Смена поколений Живой контакт Трансляция ценностей Офлайн-мероприятия Пользоввательский контент Биг б�...

2024-02-17

Копируем с RSync: основные примеры синхронизации файлов

RSync это быстрый и чрезвычайно универсальный инструмент для синхронизации (копирования) файлов. Его самое основное преимущество это пер...

2024-02-16

Лучшие noCode AI платформы для создания диалоговых ботов

Про GPT знают уже все, да? Но даже про его возможности не все осведомлены. Например, знаете ли вы, что GPT можно обучать непосредственно н�...

2024-02-15

Факторы ранжирования Google 2024 — исследование Semrush

Рассказываем самое важное об исследовании более 60 предполагаемых факторов ранжирования. Компания Semrush провела исследование...

2024-02-14

Перенос сайта на другой хостинг

Как перенести сайт на хостинг самостоятельно, что подготовить до и проверить после смены хостинг-провайдера. Содержание Бэ...

2024-02-12

В России сформирован реестр хостинг-провайдеров

Роскомнадзор сформировал реестр провайдеров хостинга. С 1 февраля компаниям, не включенным в этот реестр, запрещено оказывать услуги х�...

2024-02-05