боковое меню сайта должно быть слева, а не справа
Фильм BBC «The Creative Brain: How Insight Works | Творческие способности: взгляд изнутри» рассказывает о группе ученых, которые исследуют работу мозга. Экспериментально доказано, что за творческие озарения отвечает участок правого полушария головного мозга. И что если подсказка попадает в левое поле зрения, люди быстрее решают проблему.
Мы используем эти данные в создании сайтов.
Как применять
Посетители ищут на сайте нужную информацию и ждут удобной навигации. Понятная навигация помогает найти нужное. Если посетитель нашел нужное, сайт ему нравится. Велика вероятность, что он воспользуется этим ресурсом повторно.
Неудобный сайт заставляет думать. Чем больше посетитель думает, тем меньше шансов, что он найдет нужную информацию. Если он не найдет то, за чем пришел, он не купит на этом сайте.
Интуитивно понятный сайт конвертирует лучше, чем запутанный.
Сайты выгоднее делать понятными и привычными по структуре. Мы писали о сайтах будущего. Интернет-гиганты вроде Google, YouTube, Twitter, Facebook собралисамую обширную статистику поведенческих факторов. Они лучше всех в мире знают что лучше для посетителей. Посмотрите на их сайты: никаких квестов, навигация лаконична, эргономика интуитивна.
Левое поле зрения посетителей использовать выгоднее. Если подсказка в левой части сайта, пользователи быстрее понимают что делать.
Меню навигации сайта делайте слева. Там его ищут по привычке. И меню слева «понятнее», чем с правой стороны. Это объясняется особенностью работы головного мозга человека. За догадки, озарения у людей отвечает участок правой части головного мозга чуть выше уха. Информация до него доходит эффективнее, если подсказка слева. Эти данные подтверждены экспериментами, описанными в фильме BBC «The Creative Brain: How Insight Works | Творческие способности: взгляд изнутри».
Главные элементы навигации с левой стороны увеличит шансы сайты быть понятным. А значит и увеличит конверсию сайта. Сайты для продаж мы делаем лаконичными и избегаем «дизайн ради дизайна». Спецэффекты оставляем для промо-сайтов, им не место в корпоративном секторе.
Не ломайте бизнес
Клиенты, которые требуют «оригинальный» сайт, рискуют получить неудовлетворительную конверсию. Веб-дизайнеров не приходится упрашивать, они ждут шанса придумать велосипед. В фантазиях веб-дизайнер теряет чувство меры. Результат работы «настроенного на творчество» дизайнера выиграет премию Awwwords. Но в этом ли задача бизнеса? Мы писали о творчестве в сайтостроении. У нашей веб-студии ReConcept тоже был путь от красивых картинок к умным сайтам.
Мы считаем: сайт может быть любым, если он понятный.
Держать в голове главную цель сайта — единственный ориентир для заказчика и веб-студии. Когда клиент и исполнитель забывают об этом, на свет появляются монстры дизайна. Необычным дизайн сайта получится, если он непривычный. По другому никак, привычная нам структура априори «обычна».
Баланс дизайна и эргономики отличает опытные студии от молодых коллективов. Компетенция проектировщика и веб-дизайнера проявляется в том, чтобы делать красиво и удобно одновременно. Зрелые веб-разработчики понимают, что конверсия сайта напрямую зависит от понятности. Зрелый клиент разделяет эту точку зрения.
Если вам нужна бесплатная консультация про сайты, отправьте нам заявку!
Спасибо! Ваша заявка принята
P.S.
Татьяна Черниговская защитила докторскую диссертацию и доказала, что нет разделения на творческое и аналитическое полушарии мозга, но по нашим наблюдениям, посетители ищут меню слева по привычке.
Как расположить блок меню справа? — Хабр Q&A
Здравствуйте!Есть определенный шаблон:
<!DOCTYPE html> <html> <head> <meta http-equiv=Content-Type content='text/html; charset=windows-1251'> <link href="/style.css" rel="stylesheet" type="text/css"></head> <body> <div> <div> <ul> <li><a href="#">Главная</a></li> <li><a href="#">Ссылка</a></li> <li><a href="#">Ссылка</a></li> <li><a href="#">Ссылка</a></li> <li><a href="#">Ссылка</a></li> <li><a href="#">Ссылка</a></li> </ul> </div> <div> <h2>Что такое Lorem Ipsum</h2> Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. </div> </div> </body> </html>
body {margin: 0; background: #fff; padding: 0;}
div {font-family: Arial, Tahoma, sans-serif; font-size: 16px; color: #666; padding: 0; margin: 0;}
a:link, a:visited {color: #111; text-decoration: underline;}
a:hover {color: #000; text-decoration: underline;}
h2,h3 {font: normal 20px 'Arial'; color: #222; margin: 0; padding: 4px 0; text-decoration: none; line-height: 20px;}
.main {display: table; width: 1000px; margin: 40px auto;}
.menu {display: table-cell; width: 200px; background: #f5f5f5;}
.menu ul {margin: 0; padding: 0; list-style: none;}
.content {display: table-cell; background: #efefef; padding: 20px;}Задача состоит в том, чтобы не меняя HTML шаблон, расположить блок меню после контента.
То есть в исходном коде шаблона сначала идет «меню» потом «контент», но внешне должно отображаться сначала «контент» потом «меню».
Загвоздка в том, что использовать flex’ы нельзя.
Подскажите пожалуйста, каким методом можно воспользоваться?
Как мне сделать выравнивание логотипа и меню в одну строку? — Хабр Q&A
С помощью inline-block я сделал обычное меню для сайта, также я добавил text-align: center; для того чтобы выровнять его по центу страницы. Мне нужно добавить логотип в левой части меню и выровнять его на одном уровне с элементами меню, когда я это делаю с помощью float: left; происходит смещение и компонентов в меню в правую часть. Мне нужно сделать так, чтобы меню оставалось в центре.Это заметно на скриншотах
<header class = "top_menu"> <a id = "logo" href="test"><img src="images/left.png"/></a> <ul> <li><a href="test">TTT</a></li> <li><a href="test">TTTR</a></li> <li><a href="test">TT</a></li> <li><a href="test">TTT</a></li> </ul> </header>
header{
display: block;
text-align: center;
background-color: #707070;
box-shadow: 1px 2px 3px 1px #999999;
margin: 0;
width: 100%;
z-index: 2;
position: fixed;
top: 0;
max-height: 45px;
overflow: hidden;}
.top_menu ul{
padding: 0;
margin: 0;
}
.top_menu li{
width: auto;
height: 45px;
display: inline-block;
background-color: #707070;
list-style-type: none;
padding-left: 20px;
padding-right: 20px;
}
.top_menu a{
color: #ededed;
text-decoration: none;
display: block;
padding-top: 14px;
font-family: arial;
font-size: 17px;
text-align: center;
}
#logo {
display: inline-block;
width: 40px;
height: 40px;
float: left;
padding: 4px;
}Примеры дизайна меню сайта | Веб-дизайн
Панель навигации является важной частью дизайна, которая помогает пользователям перейти в нужные разделы сайта. Из этой статьи вы узнаете, почему проектирование навигации заслуживает большого внимания. Мы также покажем вам лучшие примеры дизайна меню.
Вертикальное меню для сайта необходимо, потому что:
- Это помогает раскрыть тематику сайта, не посещая все страницы;
- Навигация обеспечивает структурированность ресурса, а это улучшает опыт взаимодействия пользователя;
- Это поощряет пользователей остаться на сайте дольше и посмотреть другие разделы;
- Навигация помогает поисковым роботам индексировать контент вашего сайта.
Мы сгруппировали примеры дизайна меню в три категории: горизонтальные, вертикальное многоуровневое меню для сайта и раскрывающиеся. Но вы можете использовать несколько типов одновременно, если того требует сложная структура вашего сайта.
Горизонтальное меню используется сайтами с несколькими разделами и макетом из одного столбца. Обычно оно размещается выше или ниже заголовка. Вот несколько вариантов дизайна для этого типа меню:
Дизайн с использованием вкладок:
Дизайн с элементами, отображаемыми в виде ссылок или кнопок:
С использованием иконок:
Благодаря выделению текущего раздела пользователь четко видит, в какой части сайта он находится:
То же самое справедливо и для элемента, на который наведен курсор мыши. В этом примере дизайна раздел меню «Примечания» изменяется, когда на него наводится указатель мыши:
Если страницы сайта длинные, можно зафиксировать горизонтальное меню наверху, когда пользователь прокручивает страницу вниз:
Недостатком горизонтальных меню является то, что количество ссылок, которые они могут вмещать, довольно ограничено. Именно поэтому сайты со сложной структурой предпочитают использовать раскрывающиеся меню или и горизонтальные, и вертикальные раздвижные меню для сайта. Например, этот сайт использует как выпадающее меню-гамбургер, так и горизонтальное меню (в виде вкладок «Журнал», «Популярное» и «Рекомендуем»):
На следующем скриншоте мы видим два горизонтальных меню, второе из которых является выпадающим. Логика здесь следующая: как правило, первый и последний элемент привлекают к себе наибольшее внимание:
А здесь горизонтальное и вертикальное многоуровневое меню для сайта используются вместе:
Сейчас производители отдают предпочтение широкоформатным мониторам, у которых ширина больше, чем высота. Разместив меню сбоку, мы освобождаем пространство для контента в верхней части страницы. Вертикальная навигация обычно размещается слева: так ее удобнее просматривать посетителям, использующим языки с левосторонним написанием.
В отличие от горизонтальной навигации, в вертикальных меню сайта вкладки используются намного реже:
Но вертикальные меню чаще используют группировку ссылок:
Часто также используются иконки. Иногда вертикальное меню может быть минимизировано настолько, чтобы в нем отображались только иконки:
Так как меню вертикальный аккордеон для сайта имеет больше пространства для ссылок, то иногда их трудно просмотреть до конца. В таких случаях нужно использовать выпадающие меню.
Выпадающие меню подходят для сайтов со сложной структурой: интернет-магазинов с широким ассортиментом и большим количеством групп товаров. С помощью выпадающих меню можно скрыть подразделы и сохранить драгоценное пространство:
Гамбургер-меню — это вид выпадающего меню, которое используется на мобильных и десктопных версиях ресурсов. Оно может содержать короткий список разделов сайта:
Или все разделы и подразделы:
Приведенный выше пример меню сайта соответствует передовым практикам и эффективно использует пустое пространство, чтобы меню было проще просматривать.
Но этот тип меню имеет недостаток — оно не так бросается в глаза и его труднее заметить. Поэтому оно используется для отображения второстепенных данных. Тем не менее, дизайнер должен сделать его достаточно видимым для пользователя:
И при объединении различных типов меню нужно решить, какие части будут раскрываться вниз и представлять дополнительные разделы:
В больших вертикальных выпадающих меню для сайта можно использовать графические элементы, чтобы привлечь внимание пользователя. Пример использования изображений в горизонтальном меню:
И в вертикальном меню:
Стоит также упомянуть инновационные конструкции меню, которые пока не получили широкого распространения, но заслуживают внимания. Например, элементы навигации на этом сайте размещены на всех четырех сторонах страницы:
Этот тип навигации не подходит для компьютеров, так как он предполагает слишком много перемещений мыши. Но его можно использовать на мобильных устройствах с небольшими экранами:
Идея всплывающего красивого вертикального меню для сайта хорошо реализована в шаблоне WordPress Wordie:
В веб-приложении Issuefly реализовано уникальное меню с панелью навигации, характерной для операционных систем:
Мы надеемся, что эти примеры дизайна меню сайта помогут улучшить навигацию на вашем сайте.
Данная публикация представляет собой перевод статьи «Examples of website menu designs» , подготовленной дружной командой проекта Интернет-технологии.ру