Как размер шрифта влияет на ux и конверсию?

Posted on by riasevastopol

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

Ассортимент чая в магазине Teavana

А сейчас представьте, что было бы, если бы размер текста на каждой из этих банок был в три раза меньше.

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

А все вследствие того что размер шрифта через чур мелкий.

Для чего по большому счету уменьшают размер шрифта? 1. Через чур много контента

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

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

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

2. Стратегия Mobile First

Маркетологи все больше поймут необходимость делать сайты привлекательными для растущей мобильной аудитории.

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

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

3. Время от времени дело не только в размере

Кроме того в случае если у вас, казалось бы, достаточно большие размеры шрифтов (размер главного шрифта 20-24px и размер заголовков 30-70px), это не всегда означает отсутствие неприятностей с типографикой вашего сайта.

Высота линии текста (line height), стили шрифтов (font styles), кернинг (learning) и насыщенность (weight) кроме этого занимают важное место в обеспечении лучшего пользовательского опыта.

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

Из-за чего стоит расширить размер шрифта?

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

1. Читабельность имеет ответственное значение

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

2. Большие шрифты завлекают больше внимания

Не обращая внимания на то что время от времени большие шрифты смогут смотреться неуклюже, было найдено, что они в конечном итоге ускоряют процесс чтения. В соответствии с изучениям Payame Noor University и IBM/Гугл, чем больше размер шрифта, тем больше скорость чтения.

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

Многим кроме этого знакомо изучение Nielsen Norman Group от 2006 года, нашедшее, что направление взора пользователей при чтении веб-страницы напоминает букву F (F-паттерн). Так пользователи «сканируют» страницу, перед тем как решить, заслуживает ли этот контент их особенного внимания.

F-паттерн чтения

Более большие шрифты с легко узнаваемыми стилями параграфа и заголовка разрешают визитёру скоро идентифицировать заголовки на странице и соответственно стремительнее продвигаться к следующему пункту.

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

Какой размер шрифта лучше?

Однозначного ответа тут нет и быть неимеетвозможности.

Любой по-своему определяет самые подходящие в его случае стили шрифтов для параграфов и заголовков.

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

Ниже вы имеете возможность видеть таблицу Typecast, обрисовывающую размеры шрифтов для заголовков H1-H4, цитат и параграфов. Информация по заголовкам H5 и H6 отсутствует, потому, что они не столь довольно часто употребляются (сноски, информация об авторских правах и т. д.), или же они имеют однообразные размеры с H4, но различную насыщенность либо кернинг.

высота линии и Размер шрифта главного текста, цитат и заголовков для разных устройств

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

Просматривайте кроме этого: Как выбрать верный шрифт для лендинга-одностраничника

10 примеров хорошей веб-типографики

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

1. Smashing Magazine

2. The Economist

3. 1stwebdesigner

4. Dallas News

5. Wired

6. Quartz

7. Medium

8. News Deeply

9. CNET

10. Gary Vaynerchuk

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

По данным: impactbnd.com.

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

Какие виды триггерных рассылок бывают


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

riasevastopol

More Posts