Последнее время всё больше замечаю сайтов с непонятными интерфейсами. Остаётся загадкой, чем руководствуются проектировщики таких интерфейсов. В этой статье, мы постараемся разобраться, как помочь пользователю не заблудиться на сайте и как помочь ему получить нужную информацию.
Основная структура сайта
Есть такое понятие, как модульная сетка (статья в «Википедии»). Это, своего рода, каркас, схема расположения всех элементов сайта. Т. е. при переходе со страницы на страницу не меняется принцип расположения меню, структура контента и дополнительных модулей. Это значительно упростит восприятие информации на сайте, а также упростит задачу программистам и верстальщикам.
Заголовки
Человек, читая заголовки страниц, должен понимать, на какой странице, в какой рубрике он находится, и примерно предполагать, что он здесь увидит. Очень часто мы видим, как инициатива seo-оптимизатора рождает такие «тайтлы», что просто волосы дыбом встают. И наоборот: случается, люди просто забывают написать вообще что-либо.
Также название заголовка должно перекликаться с текстом ссылки (анкором), по которой человек перешёл на страницу.
И помните: текст в Интернете должен быть лаконичным. Не стоит писать в заголовке длинные пространные рассуждения о вселенской несправедливости. Просто и ёмко изложите основное.
И не стоит забывать о графическом оформлении заголовков: их надо писать более крупным кеглем и, по возможности, выделять цветом.
Горизонтальное меню
Едем дальше. Элементы предварительной навигации (горизонтальное меню сайта). Тут важно, чтобы человек чётко понимал, глядя на меню, на какой странице он находится. Для этого, как правило, меняют цвет фона и шрифта. У ссылки, на которую наведён курсор, меняем цвет текста на более яркий. Цвет ссылок на страницы, которые пользователь уже посетил — более тусклым. Использование иконок в горизонтальном меню оправданно, если пунктов меню не более 6-7. Хорошо будет смотреться, если они имеют общую тематическую основу. Допустим, наборы иконок для медиафайлов разных типов.
«Хлебные крошки» (последовательный набор ссылок)
Представляют собой, своего рода, вехи и отмечают иерархию разделов, в которых побывал посетитель.
Пример «хлебных крошек», скажем, на сайте об играх:
Главная > On-line игры > MMORPG
Удобство «хлебных крошек» в том, что человек может подняться в «родительский» раздел, чётко прослеживает структуру сайта и осознает, где находится.
Контент
Главное на сайте — контент. Это его сердце и душа. От того, насколько правильно он будет оформлен, во многом, зависит то, станет ли проект популярным и посещаемым или «умрёт» в самом начале.
Вот какие общие рекомендации. У вас должен быть один базовый шрифт для общей массы текста и несколько акцидентных (для выделения заголовков разного уровня, цитат и т. п.). Желательно предусмотреть отдельное графическое оформление для следующих элементов:
- Абзац текста;
- Иерархия заголовков трёх-пяти уровней;
- Элемент выделения важной информации;
- Цитата;
- Ненумерованный список;
- Нумерованный список;
- Вложенные списки;
- Иллюстрация на полосу, в текст;
- Таблица или несколько их типов;
- Файлы для скачивания;
- Выноски;
- Оформление маргиналий (записки на полях), если такие используются;
- Подача информации в 2–3 колонки.
Текст и фон должны быть контрастны (для удобного чтения), но в меру. Иначе глаза посетителей будут сильно уставать. Ни в коем случае не размещайте текст основного контента на текстурном фоне: восприятие такого текста стремится к нулю. Также не стоит использовать на сайтах с длинными текстами обратный контраст (например, чёрный фон/белые буквы). Не стоит также без необходимости разбрасывать элементы ярких цветов по странице: они будут отвлекать внимание посетителя и помешают понять основную мысль.
Не забывайте, что это всего лишь рекомендации, которых желательно придерживаться, но вы можете отказаться от любой из них. Главное, чтобы это решение было взвешенным и обдуманным.
Автор: Андрей Морковин.
Ещё материалы по этой теме:
- Кратко о техдизайне (создаём иконку)
- Введение: Как делать сайты
- Как создать «фавикон» для сайта
- Вставка PHP-кода в HTML
- Как сделать свой сайт
Комментарии:
Валерий
Хорошая статейка, прочитал и вспомнил о так называемых «хлебных крошках»
Never Lex
Особенно полезно записать все элементы отображения контента. Часто забываю оформить, например, Вложенные списки или Цитату. Нужно взять себе за правило.
Never Lex
А вообще, Андрей, вы сподвигли меня наконец на составление плана собственного разработки. Чтобы каждый раз не делать по новому. Скорость должна увеличиться.