5 Принципов типографики для улучшения восприятия (и показателей конверсии)

Posted on by riasevastopol

Общеизвестно, что в рекламе наиболее значимая роль отводится тексту. Это утверждение в равной степени справедливо как для печатной, так и для интернет-рекламы. Потому, что 90-95% информации, представленной в сети — текст, нужен грамотный отбор инструментов и средств для его представления.

Тяжёлый для чтения контент подобен невнятному бормотанию перед полным залом слушателей. От качества поданной информации зависит успех восприятия оффера и проекта в целом. Вследствие этого, делается ясно высказывание Оливера Рэйченстейна (Oliver Reichenstein) из Information Architects: «95% веб-дизайна образовывает типографика».

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

  • Как типографика воздействует на коэффициент конверсии и юзабилити?

1. Применяйте буквицу

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

Существует вывод, что буквица помогает для украшения, по крайней мере, так думали средневековые монахи, каковые ее изобрели.5 Принципов типографики для улучшения восприятия (и показателей конверсии) В действительности, применение буквицы — это художественный прием, разрешающий сделать текст более приятным для чтения. Сам Дэвид Огилви (David Ogilvy) в книге «О рекламе» отмечал, что «буквица повышает привлекательность текста на 13%».

Похожую идея высказывает и специалист по копирайтингу Мария Велосо (Maria Veloso), заявляя, что буквица в 11 основных параграфах сайта увеличит ваши продажи на 251%. Не смотря на то, что эти цифры научно не обоснованы, но специалисту в области рекламы, пожалуй, возможно верить. Убедитесь в этом сами — добавьте буквицу к текстам на своем сайте и отследите изменение конверсии.

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

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

  • Пара любопытных фактов о кернинге шрифта текста

2. Выбирайте верный шрифт

Следующее утверждение шокирует представителей ветхой школы печатной рекламы: используете вы шрифт с засечками либо без — не имеет значения. Исследователь Алекс Пул (Alex Poole) изучил авторитетные мнения на данный счет и сделал вывод: это вправду не имеет значение.

Выбирайте шрифт в соответствии со следующими чертями:

1. Подходит для чтения с любого экрана

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

2. Личные изюминки шрифта

Выбранный вами шрифт формирует определенную воздух сайта, создаёт чувство. Шрифт Merriweather из примера выше — простой, рабочий и прекрасно подходит для бизнеса, в то время как Alegreya считается более книжным: выбирая его, вы информируете читателю, что перед ним художественный текст.

Шрифты без засечек, к примеру, хорошие Arial, Helvetica либо новейшие Calibri, Roboto — воспринимаются как современные и довольно часто употребляются на технических сайтах.

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

Логотип Google, 2013 год

Логотип Гугл, 2015 год

Каким шрифтам дать предпочтение, зависит от того, какую стратегию контент-менеджмента вы используете. Довольно часто несложнее применить готовое ответ, но время от времени приходится искать что-то уникальное. Из бесплатных сервисов возможно назвать Гугл Fonts и Font Squirrel.

В случае если же вам необходимо больше шансов, попытайтесь Cloud.typography от HoeflerCo либо Typkit от Adobe.

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

  • Как выбрать верный шрифт для лендинга?

3. Делайте шрифт больше

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

Более того, чем старше ваша целевая аудитория, тем хуже обстановка. В 40 лет сетчатка глаза принимает лишь половину того света, что принимала в 20, а в 60 — всего 20%. По данной причине еще в 2005 году большинство пользователей всемирной сети именовало небольшой шрифт проблемой номер 1.

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

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

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

Лишь в этом случае возможно рассчитывать, что браузер машинально выберет тождественный размер на базе его экрана размера и разрешения пользователя. Установка размера шрифта между 130 и 150 процентами трудится оптимальнее :

body{ font-size:150%; }

  • Базы адаптивной веб-типографики

4. Устанавливайте высоту линий вертикальной сетки в диапазоне 135-150%

Текст будет легче восприниматься, в случае если его выровнять посредством сетки базисных линий. Для этого необходимо задать базисную высоту строчка в виде отношения к размеру шрифта (в большинстве случаев это число от 1,35 до 1,5).

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

body{ font:150%/1.5 Arial,Helvetica,sans-serif; }

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

  • 20 базисных HTMLCSS приемов для маркетологов

5. Избегайте необыкновенного форматирования

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

1. Подчеркивания уместны, лишь в то время, когда это интерактивные ссылки

Если вы выделите второй текст, читатель запутается и сочтет вас некомпетентным. Это обычная неточность представителей ветхой школы, каковые перешли трудиться в интернет, не хотя признавать, что печатная машинка — больше не верх разработок.

2. Избегайте выравнивания и центрирования текста по правому краю

Известный факт: пользователи тратят до 2/3 внимания на левую сторону страницы и на так именуемое F-образное чтение. Если вы уберете целостное левое поле, чтение превратится в пытку. Кстати, по данной же причине, размещение картин слева — нехорошая мысль.

3. Будьте последовательны и постоянны

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

Не поменяйте его размер и шрифт просто так. Выберите один размер и шрифт для главного текста. Возможно применять второй шрифт и приблизительно 3-4 размера либо стиля для заголовков, цитат и подзаголовков, но не перестарайтесь.

минимализм и Сдержанность — серьёзные качества в эстетике. чрезмерная сложность и Непоследовательность выглядят подозрительно. Изучения Брента Кокера (Brent Coker) говорят о том, что пользователи больше доверяют несложным и понятным сайтам, а так как веб-дизайн на 95% — это типографика, крайне важно, как выглядит ваш текст.

4. Применяйте чёрный текст на ярком фоне (в случае если обратное не предусмотрено изюминками бренда)

Яркий фон с чёрным шрифтом меньше напрягает глаза на протяжении чтения. Как утверждает Дрейтон Берд (Drayton Bird), обратное отношение (яркое на чёрном) уменьшает количество заявок наполовину.

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

5. Не размещайте текст поверх изображений либо узоров

Это делает его неудобочитаемым. Текст, наложенный на изображение, мозгом человека воспринимается как часть образа, содержание не усваивается. Помимо этого, довольно часто таковой текст просто не просматривают: он выглядит через чур причудливо — пользователи машинально пропускают его, принимая за рекламу.

6. Избегайте низкой контрастности

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

Высоких вам конверсий!

По данным: conversionxl.com, image source: Classic Film

Случайные статьи:

Модуль 1: Отслеживание и установка конверсий


Подборка похожих статей:

riasevastopol

More Posts