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

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

Лучшие практики обеспечения безопасности PHP и PDO в современной веб-разработке Оглавление ...

2024-11-26

Перенос сайта на WordPress с одного домена на другой

Данная инструкция поможет вам, если вам нужно перенести сайт: с одного домена на другой; с поддомена на основной домен (наприме�...

2024-11-15

OSPanel 6: быстрый старт

Коротко объясняю как быстро начать работу с Open Server Panel v.6 Содержание: Вступление Концепция новой версии Первая уст...

2024-11-08

Как установить PhpMyAdmin в Open Server Panel

Как установить PhpMyAdmin в Open Server Panel В данной статье мы рассмотрим процесс установки и настройки PhpMyAdmin (PMA) на платформе Open Server...

2024-11-08

Как быстро запустить Laravel на Windows

Все привет, меня зовут Павел Жуковский и сегодня я расскажу о том как быстро развернуть Laravel на Windows. Как развернуть чере...

2024-09-30

Next.js

На мой взгляд, Next.js - это лучший на сегодняшний день инструмент для разработки веб-приложений. Обратите внимание: руководство актуально �...

2024-09-25

OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения

OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения Либо ограничить доступ. OpenAI рассказа...

2024-09-05

WebSocket

Протокол WebSocket («веб-сокет»), описанный в спецификации RFC 6455, обеспечивает возможность обмена данными между браузером и сервером че...

2024-08-01

Ошибка 404: что это такое и как ее использовать для бизнеса

Для SEO 404 Error — возможность сохранить клиента и позиции в выдаче. Как это сделать, в статье. Окно «404 Not Found» вид...

2024-07-17

PostgreSQL 16. Изоляция транзакций. Часть 2

Введение Данная статья является продолжением первой части: "PostgreSQL 16. Организация данных. Часть 1". Как и первая часть, эта является объед�...

2024-05-27

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

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

2024-04-22

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

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

2024-04-22

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

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

2024-04-17

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

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

2024-04-08

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

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

2024-04-08