Заголовки в дизайне (h1, h2, h3)

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

Уровни типографической иерархии

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

Можно выделить три основных уровня типографической иерархии:

• Первый уровень — это непосредственно сам заголовок. Задача этого уровня привлечь читателя и провести его в направлении второго уровня.
• Второй уровень — это подзаголовки, цитаты, описания и все остальное, что идёт отдельно от основного текста, но в его поддержку. Цель этого уровня повысить сканируемость текста и подтолкнуть читателя к дальнейшему чтению.
• Третий уровень — это наш основной текст. Цель этого уровня — уйти с пути пользователя. Мы должны не мешать и не привлекать внимание к тому, что может отвлечь пользователя и увести с данной страницы. Пользователь решает, нужно ли ему переходить к этому уровню на основании двух предыдущих.

Первый уровень (заголовок)

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

В среднем 8 из 10 человек прочитают ваш заголовок, и только 2 из 10 прочитают остальной текст. Поэтому для заголовка важна максимальная информативность.

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

Для выделения заголовка, можно воспользоваться стандартными приемами визуального выделения:

• Контрастность — заголовок должен быть достаточно контрастным по отношению к остальным элементам.
• Размер — увеличение размера текста для заголовка является самым простым способом выделить данный элемент.
• Начертание — еще один способ выделить заголовок. Можно сделать текст заголовка в жирном начертании, супер жирном или курсивом. Это позволит тексту выделиться.
• Пространство — для более четкой идентификации заголовка нужно добавить свободного пространства вокруг него. Чтобы пользователь четко знал, что это основной элемент на странице, и на нём нужно заострить своё внимание.

Второй уровень (подзаголовок)

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

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

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

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

При создании подзаголовков рекомендуется заключать их в теги H2 и H3. Тег H2 использовать для основного подзаголовка, а H3 использовать как заголовок в подзаголовке.

Третий уровень

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

Основные рекомендации для третьего уровня:

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

Что еще почитать?

Начинающим дизайнерам рекомендую ознакомиться с заметкой О дизайне и о том как стать дизайнером. Тем кто хочет заниматься дизайном для iOS, определённо, следует почитать наш Справочник iOS дизайна .