5 Альтернатив раскрывающихся меню Hover

5 Альтернатив раскрывающихся меню Hover

Прошла ли эпоха выпадающих меню при наведении курсора мыши? Этот шаблон проектирования не работает для современных пользователей. Концепция неуклюжа и не всегда хорошо отображается на небольших экранах.

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

  1. Scrolling панели

barrel

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

Люди не боятся двигаться вниз страницы, так что вам не придется зубрить каждую ссылку или бит информации на этом первом экране. Используйте HTML5 в свою пользу и создавайте сайт, который делает навигацию частью захватывающих впечатлений для пользователя. Для того, чтобы заставить его работать, вы должны сделать больше, чем просто создать длинную страницу с кучей ссылок. Дизайн должен быть с сообщением для пользователя о том, что вы делаете. Создание визуального разделения с цветом между «экранами»  включает в себя большие области, которые интерактивно сообщают пользователям, куда именно они будут идти дальше.

 

  1. Скрытые меню « гамбургеры»

trivium

Перед тем, как перейти к громким словам «Я ненавижу значки гамбургера», нужно подумать об этом еще раз. Нравится вам это или нет, но это имеет крошечный значок перерастающий в символ «выскочить», иным образом скрытое меню. Люди, кажется, понимают это. И хотя многие дизайнеры ненавидят его. Вы, вероятно, в конечном итоге, использовали его.

Как перестать бороться  с ним.

Хитростью здесь является простота. Меню  предоставляет пользователям несколько вариантов и просто в использовании на любом устройстве. Кому нужны на десятки вариантов меню больше? Значительная часть пользователей будет заходить на веб-сайт с поисковой системы на внутренние страницы;  число пользователей, набирающих ваш URL напрямую, а затем перемещаясь посредством навигации сокращается все время.

  1. Стиль-Карт навигации

katvig

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

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

В качестве дополнительного бонуса карты затем «встанут на свое место» на экранах мобильных устройств, так что опыт будет похож на разных платформах. (Пользователи будут любить вас за это.)

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

  1. Sticky меню

bloomberg

 

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

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

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

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

  1. Вертикальная Сторона меню

social-nav2

Это популярная функция для двух самых популярных сайтов в мире — Twitter и Facebook — и не многих других сайтов, с использованием вертикальной навигации по стороне меню. Может быть уже пришло время, чтобы начать их активно использовать.

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

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

 

Вывод

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

Урок здесь заключается в следующем: Простая навигация лучше. Если вы используете неуклюжие, подавляющие раскрывающиеся меню, пришло время для перемен. Действуйте!

Автор: Carrie Cousins

26.04.2016


Предыдущий пост

Следующий пост