Содержание
Мне, как проектировщику интерфейсов, лучше всего работается в рамках четкой иерархии ограничений. Поскольку типографика – катализатор моей дизайнерской части работы, самое важное решение, которое я принимаю в начале проекта – выбор шрифта (или набора шрифтов). Как только выбор оказывается сделан, я могу разрабатывать систему для поддержания моего процесса принятия решений, что позволяет мне избежать жуткой ситуации, когда выясняется, что заполнить тот или блок интерфейса нечем.
Для того, чтобы сузить область выбора среди огромного количества вариантов гарнитур, я начинаю с того, что описываю общими словами масштабы стоящей передо мной дизайн-проблемы. Это, как правило, означает, что я обозначаю для себя основные цели проекта, над которым работаю. Может быть, это контент-ориентированный веб-сайт, который предоставляет информацию развлекательного характера? Веб-приложение, ориентированное на задачи и помогающее вовремя выполнять намеченные дела? Или же это сайт, содержащий как контент-ориентированные элементы, так и элементы с ориентацией на выполнение задач (подобно CMS)?
Контент-ориентированные сайты (на переднем плане) и ориентированные на задачи веб-приложения (на заднем плане) часто различаются по способам использования текста.
Различия между этими двумя типами сайтов влияют на подход, который применяется для выбора гарнитур в том и другом случаях. Контент-ориентированные веб-сайты широко используют объемные, протяженные текстовые блоки, в то время как веб-приложения, преимущественно ориентированные на выполнение задач, оперируют более короткими, единичными вкраплениями текста. Знание этих функциональных различий может помочь определить фокус проекта в начале работ путем предоставления набора важных ограничений, которые, в свою очередь, помогают нам принять сбалансированное решение о выборе гарнитуры.
Сейчас я продемонстрирую несколько моментов, которые могут оказать специфическое влияние на выбор шрифта для ориентированных на задачи веб-приложений (пользовательских интерфейсов), начиная с наших физиологических ограничений на восприятие текста и заканчивая тем, как это может повлиять на дизайн шрифта. Моя основная цель – продемонстрировать вам несколько приемов, которые могут облегчить процесс принятия решений по выбору типографики и помогут существенно улучшить ваши будущие варианты дизайна интерфейсов – как с функциональной, так и с визуальной точки зрения.
Особенности процесса чтения
В сфере пользовательских интерфейсов вы нередко можете столкнуться с экранами, которые, говоря типографским языком, представляют из себя группы слов, отображенные на некотором расстоянии друг от друга. Примеры подобных экранов: веб-формы, навигационные меню, панели управления и т. п. И в этом заключается ключевое отличие между сайтами, ориентированными преимущественно на контент и приложениями, ориентированными на выполнение задач. Так почему же это отличие значимо?
Как выясняется, эффективность/легкость чтения – функция от количества доступного нам текста. В рамках определенного порога восприятия (в пределах 15-20 букв) существует линейная зависимость между скоростью чтения и количеством букв, видимых глазу [1]. Это означает, что изолированное слово, которое состоит из менее чем 20 графем, будет читаться медленнее, чем слово, которое является частью предложения.
Для того, чтобы лучше понять этот феномен, полезно получше ознакомиться с одной из базовых механик чтения: cаккадой. Вместо того, чтобы пробегать по странице плавно, в процессе чтения наши глаза делают дискретные скачки, фиксируясь на одном слове на короткий отрезок времени прежде чем сделать резкий прыжок к другому слову. Такое движение и называется саккадой [1].
В процессе чтения наши глаза двигаются не линейно, но совершают резкие скачки от одного слова к другому.
Однако, несмотря на свою «баллистическую» природу, эти стремительные движения глаза улучшают нашу способность к чтению. Пока мозг обрабатывает слова, находящиеся в фокусном пространстве глаза, мы используем дополнительную информацию за границами фокусного пространства, которая направляет процесс чтения. Для нас, как читателей, время, затрачиваемое на понимание смысла слов, сокращается за счет контекста, создаваемого смежными словами – по мере автоматической обработки мозгом более коротких функциональных единиц предложения, таких как предлоги и союзы.
Этот неочевидный на первый взгляд факт может серьезно повлиять на процесс выбора гарнитуры для интерфейса. По необходимости наши ориентированные на выполнение задач веб-приложения тяготеют к более активному использованию отдельных слов или фрагментов предложений нежели их контент-ориентированные коллеги. Из-за этого мы не можем полагаться на то, что характерный для саккады эффект контекстуализации поможет нам улучшить восприятие текстовых элементов нашего дизайна, равно как не можем и бесконтрольно увеличивать объем текста для того, чтобы сгладить негативный эффект от неудачно выбранного шрифта. Это делает выбор гарнитуры жизненно важной задачей при проектировании сайтов, ориентированных на выполнение задач.
Важность тщательно продуманной структуры
Недавние исследования в области когнитивной психологии подтверждают мысль о том, что мы распознаем слова, в первую очередь определяя их отдельные буквы. Это означает, что любой шрифт, подходящий для пользовательских интерфейсов, должен обладать безукоризненной ясностью формы.
Несколько лет назад исследователи факультета психологии Университета Виктории провели эмпирическое исследование, которое ставило целью выяснить, какие характерные отличия находят читатели между визуально схожими буквами.
Результаты исследования ученых Университета Виктории. Выделенные области содержат в себе элементы, благодаря которым читатели различают отдельные буквы при разном разрешении текста.
Согласно авторам исследования, «области прерывания линий оказываются наиболее важными элементами идентификации букв [2]», но я считаю, что крайне содержательный анализ результатов исследования, проведенный дизайнером Ральфом Геррманном, может быть более применим к нашей теме:
[В крайней левой колонке] мы видим, что в большинстве случаев мы обращаем внимание на элементы структуры букв, которые содержат в себе их отличительные черты…поперечный элемент в букве «е», устремленный вверх штрих в окончании буквы «с», присутствие и форма восходящих и нисходящих элементов вообще [3].
Разумеется, эти структурные элементы играют ключевую роль, когда читателям приходится находить отличия между теми буквами алфавита, которые наиболее часто путают: с/е, а/о, I/l, и O/0.
Геометрические гарнитуры, такие как Futura PT (размером крупнее15 px), содержат большое количество схожих форм, что может негативно сказаться на качестве распознавания текста при увеличении шрифта.
Качественно выполненная читабельная гарнитура сможет нивелировать проблему распознавания букв, которые, оставаясь близкими по форме, тем не менее становятся четко отличимы одна от другой. Интересно, что такая характерная высокая распознаваемость является отличительной чертой моноширинных шрифтов, которые благодаря этому приобрели большую популярность у программистов (чьи средства к существованию напрямую зависят от точности кода на уровне вводимых символов).
Многие моноширинные шрифты, подобно Source Code Pro (размером крупнее14 px), знамениты своими хорошо различимыми формами букв и высокой читабельностью.
Недостатки экранов и их нейтрализация за счет правильного выбора шрифтов
За счет технологической природы использующихся устройств передачи данных, точность визуального воспроизведения в нашей работе ограничена разрешением экранов, на которых воспроизводится интерфейс. Следовательно, никакое исследование гарнитур для интерфейсов не может претендовать на полноту, если оно не затрагивает сложности, которые возникают из-за того, как тот или иной текст отображается на экране.
За исключением немногих выдающихся устройств с дисплеями Retina и HD, большинство экранов компьютеров имеют относительно низкое разрешение: приблизительно 100-150 пикселей на дюйм для высококачественного дисплея [4]. (Для полноты картины отмечу, что эта величина составляет менее 20% от максимального разрешения, которое может восприниматься человеческим глазом: оно составляет примерно 800 ppi в зависимости от того, как вы проводите вычисления [5]).
Ограничение разрешения экрана представляет собой проблему, поскольку большинство шрифтов изначально разрабатывались для печатных медиа с существенно более высокой степенью разрешения. Для текста (часто размером 18 px и ниже) грубые пиксельные сетки наших мониторов могут ограничить способность пользователей замечать мелкие детали, которые делают буквы читабельными. Это, в свою очередь, может сделать наш дизайн исключительно сложным для восприятия. Дизайнер шрифтов Питер Биляк так обозначил суть этой проблемы:
Очертания букв разрабатываются и хранятся как контуры, математически совершенные линии и кривые, которые выглядят прекрасно при высоком разрешении, но могут стать нечеткими и даже неразличимыми в случае их преобразования в группы пикселей…[6].
При изменении размеров текста грубые пиксельные сетки мониторов могут серьезно исказить форму букв (шрифт Bodoni размером более 24 px, увеличен в 600 раз).
Для противодействия этой хорошо известной проблеме некоторые гарнитуры, специально разрабатываемые для использования на экране, подвергаются процессу оптимизации, называемому «хинтингом», посредством чего «математически совершенные [векторные] контуры [букв] соотносятся с пикселями монитора [6]». В теории, гарнитура, прошедшая процедуру хинтинга, будет отображаться на экране более четко – или как минимум более читабельно – и не будет существенно изменяться при переключении между браузерами. И, разумеется, выбирая гарнитуру для пользовательского интерфейса, стоит обратить внимание именно на хинтованные шрифты; хинтинг может помочь решить вопрос выбора в пользу одной из двух сопоставимых по остальным свойствам гарнитур. Но это лишь дополнительное свойство, а не гарантия успеха.
Хинтование может улучшить рендеринг шрифта, но поскольку различные платформы и приложения используют различные технологии растеризации, результаты рендеринга могут серьезно различаться. Более того, в соответствии с мнением Питера Биляка «хинтование утомительно, занимает массу времени и повсеместно признано практически устаревшим» из за чего «99% всех шрифтов, даже коммерческих, не хинтованы». Как результат, мы не можем полагаться только на эту технологию для решения проблемы отображения данных на экранах с низким разрешением.
Вместо этого при выборе шрифта мы должны удвоить внимание к форме букв и смириться с теми требованиями, которые предъявляет нам экосистема устройств с низким разрешением экрана. В частности, хороший шрифт должен выдерживать принципы эстетического баланса: он не слишком тонкий или ажурный, не слишком тяжелый или кричащий, в нем скорее должны присутствовать запоминающиеся, искусно выполненные черты, за счет которых шрифт может выглядеть визуально привлекательным и индивидуальным. С технической точки зрения такой шрифт должен содержать в себе ряд следующих функциональных черт:
- Крупные строчные буквы — по отношению к заглавным (спасибо Mercury13 за перевод)
- Просветы естественной формы, не сплющенные — то есть, не Bodoni (спасибо Mercury13 за перевод)
- Хорошо распознаваемые черты, которые соответствуют общепринятым принципам дизайна
- Умеренные восходящие/нисходящие элементы
- Пропорциональность
- Достаточно большое межбуквенное расстояние
- Низкий/минимальный контраст в штрихах
- Уверенные, жесткие, серифы с засечками без скобок (или шрифты без засечек)
- Ориентация по вертикальной оси (подходит для пиксельной сетки)
Verdana (шрифт, спроектированный Мэтью Картером) демонстрирует большое количество отличительных признаков хорошей UI-гарнитуры
Более подробно я проиллюстрирую эту идею на примерах интерфейсов с указанием конкретных шрифтов в следующем посте.
Типографика улучшает продуктивность
В конечном счете, изучение различий между выбором гарнитур для веб-сайтов и веб-приложений менее важно, нежели понимание базовых принципов хорошей типографики. В сущности, многие из тех советов по выбору шрифта, которые были приведены здесь, могут быть применимы вне зависимости от того, работаете вы над большим или малым объемом текста: вы должны понимать, как пользователи читают текст, а затем выбрать такой шрифт, который поможет им сделать это как можно более эффективно в условиях существования других ограничений дизайна.
Правильный выбор шрифта – упражнение в тонкости и демонстрация навыков и чувствительности – к контексту, форме и потребностям пользователя. Как UI-дизайнерам, нам важно помнить, что главная наша цель – не сбить пользователя с толку обилием деталей, а облегчить бремя их задач и помочь выполнить необходимые задачи.
