Иерархия страниц: 4 главных элемента

Руководство по иерархии страниц

Информационная архитектура и иерархия страниц могут сделать или сломать вас.

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

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

Определите “кто” (заинтересованные стороны и целевая аудитория). Кто читает представленный вами контент? Что им нужно знать в одном предложении.
Определите “почему” (ваши цели). Почему им нужно знать эту информацию, полезно дать им контекст.
Определите “как” (функциональные требования к сайту). Как они собираются выполнить то, для чего пришли на ваш сайт. (Например, “Добро пожаловать на сайт “X”, где вы узнаете о “Y”. Вы должны узнать об “Y”, чтобы выполнить “Z”. Вот шаги, которые необходимо предпринять, чтобы выполнить “Z”).

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

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

Иерархия страниц: 4 главных элемента - обложка статьи

UniwexSoft — разрабатываем уникальные сайты, smart-контракты, мобильные приложения в сфере Blockchain, собираем IT-отделы под ключ для реализации вашего проекта, заменим CTO или сильно облегчим ему жизнь.
Если вам нужен сайт, мобильное приложение, NFT маркетплейс или крипто игра, напишите нам.

Содержание

Эффективные заголовки и подзаголовки

Страницы обычно делятся на разделы и подразделы.

Каждый раздел обычно начинается с заголовка.

Используйте заголовки в иерархическом порядке.

Иерархия заголовков на странице не должна превышать шести, начиная с H1 – самого важного и заканчивая H6 – наименее важным.

Использовать их следует следующим образом:

Заголовок страницы – название страницы – всегда оформляется как H1. Это единственный заголовок на странице, который должен использовать эту настройку.
Для подзаголовков используйте H2
Используйте H3 для подзаголовков внутри подраздела, который начинается с H2.
Используйте H4 и H5 для подзаголовков внутри разделов.
Выравнивайте все заголовки и подзаголовки по левому краю, как правило, если только дизайн вашего сайта не ориентирован на мобильные устройства и все заголовки расположены по центру.
Будьте последовательны.
Используйте регистр предложений для всех заголовков и подзаголовков. Регистр предложений – это стандартный подход к использованию заглавных и строчных букв, в основном в заголовках и рубриках. Он наиболее удобен для восприятия читателями всех уровней и дает визуальное представление о том, что это заголовок (поскольку каждое слово написано с заглавной буквы).

Лаконичные абзацы

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

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

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

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

В иерархии страниц важную роль играет форматирование текста и вот как можно использовать выделения в тексте:

Экономно использовать курсив. Конечно, его можно использовать в заголовках публикаций, но большие объемы текста, выделенного курсивом, очень трудно читать в Интернете.
Экономно используйте жирный шрифт. Для четкого выделения идеи или подзаголовка это отличный вариант, но большие объемы опять же очень трудно читать. Кроме того, нельзя выделять все!
Очень экономно используйте цвет. Чрезмерное использование другого цвета, например, красного, очень быстро теряет эффект и опять-таки становится трудночитаемым. Если необходимо выделить важный момент другим цветом, ограничьтесь как можно меньшим количеством слов и не делайте это привычкой.
Используйте все заглавные буквы экономно. Чрезмерное использование заглавных букв может быстро надоесть и должно быть припасено для особых случаев. Слова, написанные заглавными буквами, очень трудно читать в Интернете, и часто создается впечатление, что вы кричите на кого-то. Примечание: ALL CAPS отлично подходит для кнопок, основных элементов навигации и других ситуаций, когда используется одно слово.
Не подчеркивайте. Как правило, НИКОГДА не следует подчеркивать текст, поскольку в большинстве браузеров ссылки отображаются подчеркнутыми. Если вы подчеркнете текст, который не является ссылкой, это только запутает посетителей вашего сайта.

Таблицы

Если вы не дизайнер или если дизайнер не создавал для вас руководство по стилю, то, как правило, параметры любой таблицы должны быть следующими: Cell padding = 5; Cell spacing = 0.

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

Вывод из статьи Иерархия страниц: 4 главных элемента

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

Статья переведена на русский язык компанией UniwexSoft.

UniwexSoft — разрабатываем уникальные сайты, smart-контракты, мобильные приложения в сфере Blockchain, собираем IT-отделы под ключ для реализации вашего проекта, заменим CTO или сильно облегчим ему жизнь.
Если вам нужен сайт, мобильное приложение, NFT маркетплейс или крипто игра, напишите нам.