not found
Юзабилити

Типографика в инфографике, примерах и цифрах

Автор: Аркадий Туманов25.07.2014

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

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

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

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

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

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

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

Шрифт, как воплощенная индивидуальность

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

Проводя аналогию со шрифтами, можно сказать, что для первого случая отлично подойдет «солидный» шрифт в духе Times New Roman, а для второго – более неформальный и легкий, наподобие Arial или Helvetica.

В рамках данной статьи мы будем пользоваться материалами одного из самых основательных и наглядных исследований в области влияния шрифтов на юзабилити веб-ресурса. Называется оно «The Psychology of Fonts» и принадлежит авторству видного психолога Арика Сигмана. Основной тезис «Психологии шрифтов» ¬¬¬¬¬– любой шрифт вызывает у читателя вполне определенные и универсальные ассоциации:

not found

По результатам исследования основные шрифты семейства Serif, такие как Times New Roman или Georgia были охарактеризованы как «надежные», «производящие впечатление», «авторитетные». Классические книжно-газетные засечки предсказуемо продемонстрировали эффект «традиционности» и «солидности». Особенно любопытен тот факт, что люди, читавшие текст, набранный шрифтом с засечками, считали себя более производительными, хотя на самом деле лучшие результаты по скорости и восприятию информации они демонстрировали при чтении текста, набранного шрифтом Sans-Serif. Вот такое интересное воздействие на человеческое восприятие оказывает старый добрый Serif.

В свою очередь, шрифты Sans-Serif, к примеру, вездесущая Helvetica или Arial, были награждены такими эпитетами, как «чистые», «современные» и «действенные», что вполне соответствует их природе и подтверждается практикой.

Так называемые «брусковые» шрифты (Slab Serif), характеризующиеся прямоугольными засечками, ассоциировались у читателей с «цельностью» и «массивностью», рукописные (Script) вполне очевидно оказались «дружелюбными», «элегантными» или «женственными», а броские шрифты семейства Modern пользователи описали как «исключительные», «стильные» и «интеллектуальные».

Sans vs. Sans-Serif: очередная попытка поставить точку

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

not found

Тексты, набранные шрифтами Serif, обладают отличной читаемостью, каждая буква быстро и легко распознается благодаря засечкам. А вот семейство Sans, уступающее, на первый взгляд, в эффективности шрифтам Serif, показывает свое превосходство при верстке текстов для чтения с монитора. Объясняется это более низким разрешением компьютерного монитора (порядка 100 DPI) по сравнению с напечатанным на бумаге текстом (разрешение как минимум в 1000 DPI). Таким образом, шрифты Sans значительно удобнее при электронной верстке, их легко и приятно читать с экрана.

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

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

not found

*Заголовки шрифтами Serif – почему бы и нет?

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

Размер и читаемость

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

Читаемость

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

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

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

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

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

Дифференциация

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

not found

Цвет: эмоции, внимание, скорость

Об использовании цветов и их роли в вопросах юзабилити мы уже говорили в статье «Пользовательское бессознательное или как заставить цвета работать». Теперь мы постараемся разобраться в том, как именно цвет способен менять свойства текста.

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

Эмоции

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

not found

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

  • Желтый цвет оптимистичный и молодежный, с его помощью можно успешно привлекать внимание к витринам.
  • Красный – само воплощение энергии. Учащает сердцебиение и часто используется в кричащей рекламе огромных скидок или радикальных распродаж.
  • Голубые оттенки успокаивают человека, вызывая ассоциации, связанные с надежностью и доверием. По этой же причине синие и голубые цвета в оформлении активно используют банки, страховые компании и другие подобные организации, чья деятельность связанна с определенными рисками.
  • Зеленый цвет, согласно исследованиям, является наиболее простым и естественным для человеческого восприятия. Также он ассоциируется с благополучием и часто используется для расслабления и отдыха.
  • Оранжевый, безусловно, содержит определенную агрессивность и ассоциируется с активными действиями, поэтому применяется тогда, когда клиента необходимо подтолкнуть к конкретному шагу: регистрации, покупке или продаже.
  • Розовые оттенки, в первую очередь, привлекают женскую аудиторию и настраивают пользователя на романтичный лад. Используются при оформлении и рекламе продукции для молодых девушек.
  • Черный цвет символизирует могущество и обладает особым лоском, его часто можно встретить в рекламе товаров категории «люкс».
  • Фиолетовый цвет успокаивает и, что характерно, довольно часто используется в продвижении косметической и антивозрастной продукции.

Внимание

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

not found

Скорость и концентрация

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

not found

В статье Can Colored Text Turn You Into an Online Speed-Reader? исследователи утверждают, что «ведение» пользователя по тексту при помощи градиента может повышает скорость чтения до 30%. Этот простой прием минимизирует те усилия, которые глаза тратят на постоянное слежение за текстом и позволяет избежать «потери строки» или всем нам известного перечитывания одного и того же фрагмента по два раза. Вы вполне можете самостоятельно убедиться в полезности этого трюка, применив градиент к какому-либо тексту средней сложности и попробовав после этого его почитать. Для чистоты эксперимента вы также можете предложить друзьям на скорость прочесть оригинальный и обработанный градиентом текст, засекая при этом время. Скорее всего, результаты вас приятно удивят. А еще вам наверняка понравится то ощущение, которое градиент внесет в текст.

Форматирование

Многоколоночная верстка с короткими строчками, активно используемая в газетах и разного рода периодических изданиях, есть результат долгих исследований юзабилити типографики. Газетные строки очень короткие, их длина находится в диапазоне 7-9 см. Еще в начале века было установлено, что читать текст в таком формате удобнее всего ¬– при увеличении длины строки и, соответственно, ширины колонки, читатель чаще сбивается и быстрее утомляется, что вполне логично, ведь в этом случае глазам приходится двигаться со значительно большей амплитудой. Использовать в сетевой верстке богатый опыт газетных типографистов вполне естественно. Разумеется, с определенными поправками.

Конечно, верстка многоколоночного текста на сайте – штука довольно неоднозначная и уместная только для решения определенных эстетических задач, поэтому от газетной типографики мы возьмем только самое удачное её достижение, а именно оптимальную длину строки. Как и в случае с размером шрифта, который мы обсуждали в начале статьи, следует учитывать большее удаление читателя от монитора по сравнению с расстоянием от глаз до газетного или книжного листа. С поправкой на это удаление 7-9 см газетной строки преобразуются в 10-12 см, также как кегль в 10 пунктов преобразуется в 12:

not found

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

Реакция на статью
поделюсь
0%
интересно
0%
полезно
0%
не уверен
0%
скучно
0%
где автор?
0%
Комментарии
Оставить отзыв

You must log in to post a comment