21 июля 2009

Ориентируем пользователя на сайте

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

Основная структура сайта

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

Заголовки

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

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

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

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

Горизонтальное меню

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

Хлебные крошки (последовательный набор ссылок)

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

Пример хлебных крошек скажем на сайте об играх:

Главная > On-line игры > MMORPG

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

Контент

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

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

  1. Абзац текста
  2. Иерархия заголовков трех-пяти уровней
  3. Элемент выделения важной информации
  4. Цитата
  5. Ненумерованный список
  6. Нумерованный список
  7. Вложенные списки
  8. Иллюстрация на полосу, в текст
  9. Таблица или несколько их типов
  10. Файлы для скачивания
  11. Выноски
  12. Оформление маргиналий (записки на полях), если такие используются
  13. Подача информации в 2–3 колонки

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

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

Плюсануть
Поделиться
Отправить
Класснуть
Линкануть
Запинить