Дизайн шапки сайта
Шапкой называют верхнюю часть сайта, в которой обычно находится его название, логотип, контактные данные и панель навигации. От правильного оформления всех этих элементов зависит, какое впечатление произведет ресурс на своих посетителей. Ведь шапка сайта – это первое, что они видят.
Шапка (header) является одной из важнейших составляющих оформления интернет-ресурса и влияет не только на его привлекательность, но и на удобство использования. Именно шапка в первую очередь предоставляет пользователям ключевые сведения о сайте. Она важна и для юзабилити. С ее помощью владелец ресурса отвечает на вопросы клиентов о том, что собой представляет проект, рассказывает о его преимуществах и предложениях, способах связи и пр.
Не обязательно вмещать абсолютно все эти данные в header. Более того, современные веб-дизайнеры не рекомендуют использовать некоторые из них. В первую очередь это касается ссылок на соцсети. Находясь в верхней части страницы, они отвлекают внимание клиентов и уводят их на другие площадки.
А публикуя адрес своей электронной почты, вы рискуете стать мишенью для рассылок спама.
Запомните, что правильно оформленная шапка страницы сайта не должна быть перегружена лишними деталями. Ведь одновременное присутствие множества интересных объектов рассеет внимание посетителя.
Выбор подходящих элементов оформления – решение серьезное. Поэтому лучше всего принимать его вместе с маркетологами проекта.
Этому есть логичное объяснение. Прежде всего, при посещении веб-сайта (особенно впервые) человек практически никогда не рассматривает внимательно всю страницу. Он быстро пробегает по ней взглядом, пытаясь обнаружить то, что вызовет у него интерес и убедит задержаться. В ходе проведения ряда экспериментов специалисты обнаружили, что при изучении веб-страниц глаза всех пользователей двигаются типичным образом.
На основе этих результатов была разработана классификация, включающая в себя 3 основные модели движения глаз:
- Гуттенберга;
- Z-образная;
- F-образная.
Первый вариант чаще всего встречается при чтении страниц со слабой визуальной иерархией либо однородным представлением данных. В нем выделяют 4 активные зоны, две из которых связаны с шапкой сайта (интернет-страницы).
Z-образная модель типична для изучения сайтов, в которых блоки контента визуально разделены. Читатель пробегает взглядом с верхнего левого угла в верхний правый. А значит, он первым делом оценивает header.
Довольно часто встречается и F-образная схема.
В этом случае глаза человека сначала движутся горизонтально, причем обычно именно по верхней части веб-страницы.
А затем они опускаются ниже и опять горизонтально «сканируют» информацию, только при этом охватывают уже меньшую область (дополнительный элемент F-образной модели).
В завершение читатель перемещает свой взгляд к левой стороне монитора, просматривая ее вертикально. В некоторых случаях этот процесс проходит достаточно медленно и систематично, из-за чего он выглядит на тепловой карте как сплошная полоса. Хотя иногда движение происходит быстрее. Этот элемент завершает стебель буквы F.