Элементы входных страниц

Иллюстрация к статье Акция «Элементы входных страниц»

C какой страницы посетители заходят на ваш сайт? Думаете всегда с главной?

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

Входной страницей (landing page), может оказаться любая страница вашего сайта. Заранее предугадать, с какой страницы зайдёт посетитель на ваш сайт невозможно, потому, как заранее нельзя сказать, какую страницу выдаст по запросу поисковик или на какую страницу поставят ссылку с другого сайта.

Причём, пользователь зашедший на сайт по адресу
yourdomain.com
должен так же легко ориентироваться и иметь доступ к интересующей его информации, как и пользователь зашедший на сайт по адресу
yourdomain.com/category/2/yourbestpost.html
или
yourdomain.com/view_cat?id=235&s=132&p=4.
И это не проблема пользователя, а проблема разработчика.

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

Возвращение к основам

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

Под понятием «шаблонное проектирование» скрывается соблюдение одного стиля для всех элементов на всём сайте (одинаковое отображение) и их примерно одинаковая компоновка на всех страницах. Сюда можно отнести title, логотип, слоган, главную навигацию, навигацю по категориям, «хлебные крошки» и т.д.

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

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

Отклонение от нормы

Странные блоги

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

Страница выглядит примерно так: шапка сайта, основная навигация (главная, о блоге, реклама, контакт), контент-область, подвал.

Возможно, такая структура будет удобна для постоянных посетителей, которые заходят чтобы почитать последние посты. Но что с теми, кто заходит впервые? Для них единственный путь выйти со страницы с контентом — ссылка «главная» или ссылка-логотип (не все пользуются кнопкой back в браузере). Причём, если посетитель решит прочитать 10 статей за раз, ему каждый раз придется возвращаться на главную, снова искать нужную категорию и в ней пост, который он ещё не читал.

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

Демо-страницы

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

Мы (HTML-кодеры, веб-дизайнеры, веб-программисты) часто создаём демо-страницы с примерами работы кода, чтобы показать своим читателям как работает тот или иной пример. Причём, это просто статичные HTML-страницы, не обладающие дизайном, навигацией и никак не напоминающие по стилю сайт или блог.

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

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

Как улучшить демо-страницу?

Для себя я отметил несколько элементов, которые точно не помешают на страницах-примерах:

  • Понятный title, в котором написано к какой статье относится этот пример и название блога.
  • Логотип (текстовый или графический) и слоган. Почему бы не выводить их на демо-страницах, тем более, что это потенциальная ссылка на главную страницу и пояснение о направленности блога (это я про слоган).
  • Название страницы. Частично дублирующее title.
  • Ссылка на статью, к которой относится пример.
  • Копирайт и контакты. Причем, первый можно дублировать ещё и в HTML-комментариях в самом коде.
  • По желанию, можно вывести список похожих статей, которые могут заинтересовать ваших пользователей.

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

* * *

Постовой с блоггерами, участниками акции «Давайте знакомиться!»

Постовой

О пользе мотивационных книг. Cоздание и продвижение сайтов Сочи. Как скрыть реферскую ссылку. Настраиваем внешний вид скроллбара с помощью jQuery.

* * *

* * *

Понравилась статья?

Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:

* * *

Статьи по теме:

Комментариев: 6

  1. Zodios, 12.10.2008 в 23:44

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

    Ответить

  2. Виталий, 13.10.2008 в 10:51

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

    Тайтл, частично дублирующий татйл основной страницы я бы не рекомендовал, т.к. тайтл является основным элементом, на который обращают внимание пользователи с поисковиков. Для повышения привлекательности ссылки тайтл лучше делать непосредственно отражающий содержание данной страницы, например : «Пример: Как писать валидный код». А уже в хеде страницы ставить линк на основную статью и на главную страницу.

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

    Ответить

  3. Александр, 16.10.2008 в 20:46

    хорошая карта, нам как раз похожая нужна.

    Ответить

  4. Наша Лига — создание, развитие, перспективы | News-Tye, 20.12.2012 в 0:34

    [...] раскрутки и оптимизации сайтов• rotor рассказывает об элементах входных страниц• • Рекомендую создание сайта в Одессе• Сайт об [...]

    Ответить

  5. Наша Лига — создание, развитие, перспективы | Как заработать в интернете, 11.06.2013 в 21:14

    [...] раскрутки и оптимизации сайтов• rotor рассказывает об элементах входных страниц• • Рекомендую создание сайта в Одессе• Сайт об [...]

    Ответить

  6. Наша Лига — создание, развитие, перспективы « Блог Ивана, 14.03.2014 в 14:00

    [...] раскрутки и оптимизации сайтов • rotor рассказывает об элементах входных страниц • • Рекомендую создание сайта в Одессе • Сайт об [...]

    Ответить

Есть что сказать?