УДК 004

Исследование влияния типографики на удобство использования интерфейса

Малюшко Виталий Константинович – ведущий UX/UI дизайнер OpenTalent, Нидерланды, г. Амстердам

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

Ключевые слова: типографика, пользовательский интерфейс, дизайн, шрифт, читабельность.

Введение

Задумываясь о том, что связывает Ирак 3400 года до н.э., Египет 3200 года до н.э., Китай 1300 года до н.э. и Мезоамерику 600 года до н.э., следует отметить, что тысячи лет назад индивиды начали писать изобразительные знаки в этих четырех частях света, которые постепенно эволюционировали от клинописи, иероглифов, символов и кодексов до алфавитов, активно использующихся сегодня. Из простых надписей эти письма превратились в служащие различным целям стили письма.

Например, витиеватые стили использовались в письмах, отправляемых монархами, символизируя власть и богатство. Четкие, незамысловатые стили применялись для того, чтобы уличные знаки или другие публичные сообщения были более читабельными.

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

Таким образом, в дизайне цифрового пользовательского интерфейса (UX) типография является его неотъемлемой частью.

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

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

Цель исследования

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

Ввиду указанного в настоящем исследовании следует изучить роль типографики в дизайне пользовательского интерфейса.

Исследование

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

Ключевыми целями типографики являются читабельность, доступность и иерархия. Задача дизайнера пользовательского интерфейса заключается в том, чтобы текст был:

1. Четким и читабельным: алфавиты должны быть отличимы друг от друга. Пространство между буквами, словами и предложениями должно быть последовательным.
2. Доступным: текст должен быть читабельным для пользователей со слепотой, потерей зрения и нарушениями чтения.
3. Иерархичным: пользователи должны уметь различать информацию различной важности [1].

Представляется необходимым рассмотреть перечисленные выше признаки на примере (рисунок 1).

Рисунок 1. Скриншот домашней страницы Эппл.

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

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

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

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

Результаты исследования

Учитывая, что подавляющее большинство информации в Интернете представлено в виде текста, важность типографики нельзя недооценивать. В то время как изображения и элементы дизайна могут быть поразительными, именно текст зачастую передает суть сообщения. Чтобы гарантировать, что последнее транслируется четко, в надлежащем порядке и за короткий промежуток времени, типографика имеет решающее значение. Далее в исследовании приведем результаты эффективной типографики, положительно воздействующей на пользовательский интерфейс [3].

Недвусмысленная передача информации

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

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

стрелкой рядом с ним, он понимает, что это ссылка [2].

Привлекательность

Учитывая огромное количество контента и веб-сайтов в Интернете, пользователи избалованы выбором. Они с большей вероятностью предпочтут получить новости или иную информацию из объектов, которые предлагают более приятный визуальный опыт. Хорошая типографика способствует этому. Она может:

• привлечь внимание размером, весом или даже цветом;
• создать определенное настроение. Например, шрифты для рукописного ввода могут создать у пользователя ощущение знакомства и дружелюбности;
• вызвать ассоциации. Например, шрифт Кока кола или шрифт Дисней вызывают ностальгию и эмоциональные связи, даже если они представлены в простом черно-белом варианте (рисунок 2).

Рисунок 2. Шрифт Кока кола.

Создание бренда

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

Рисунок 3. Шрифт, используемый брендом Нью Йоркер

Например, шрифт Irvin, применяемый компанией Нью Йоркер мгновенно узнаваем по большой круглой букве «О» и наклонной букве «S» (рисунок 3).

Воздействие на принятие решений

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

Рисунок 4. Побуждение к действию от компании Глория Джинс

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

Вывод

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

У Мэтью Баттерика есть широко используемое определение: «Типография – это визуальный компонент написанного слова». То есть типографика позволяет сделать язык видимым, играя жизненно важную роль в дизайне.

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

Список литературы

1. Тарасова Н.А. Применение принципов типографских канонов при построении элементов интерфейса // E-Scio. 2022. № 7 (70). С. 12-19.
2. Филиппова М.Г. Типографика как элемент интерактивной среды // МНКО. 2021. №4 (41). С. 96-102.
3. Шевцова Д.В. Типографика в веб-версиях современных печатных изданий // Актуальные проблемы авиации и космонавтики. 2019. С. 48-54.