5 отличных сайтов, с которых можно украсть идеи навигации по сайту
Дизайнеры легко упускают из виду навигационные меню.
Есть пара стандартных макетов, к которым мы будем обращаться каждый раз, говоря себе: «Это то, чего ожидают пользователи». И это правда, что придерживаться того, что работает, лучше, чем стремиться к новизне ради нее самой, и что мы действительно должны проектировать с учетом ожиданий пользователей.
Но когда навигационные меню заголовка являются основным способом навигации пользователей по веб-сайту, не должны ли мы еще раз взглянуть и посмотреть, можем ли мы улучшить наш? В конце концов, пользователи не увидят никакой другой нашей дизайнерской роскоши, если они даже не смогут покинуть главную страницу.
Я не призываю просто украсть один из них. Но я предлагаю взять у них урок и, опираясь на их идеи, создать заголовочные меню, которые на самом деле лучше, чем обычно.
Имея это в виду, вот семь лучших инновационных меню заголовков, которые вы увидите сегодня в Интернете.
1: Рейсс
Reiss — компания по производству одежды, расположенная в Великобритании. Их выпадающее меню с несколькими вариантами знакомо, если вы когда-либо покупали одежду в Интернете.
Но в отличие от подавляющего большинства предприятий электронной коммерции, Рейсс использует изображения прямо в раскрывающемся меню.
Вместо того, чтобы читать текстовое описание, щелкать по нему и только после этого сталкиваться с изображением продукта, который вы рассматриваете, посетитель Reiss может просто сразу увидеть товар.
Мы знаем, что изображения электронной торговли сильно влияют на пользователей. Они являются основным фактором продаж. Так не имеет ли смысл представить их как можно раньше на пути клиента?
Однако, к сожалению, они не перенесли этот инновационный подход на свой мобильный сайт, где меню представляет собой стандартное текстовое меню из гамбургера в верхнем левом углу.
Возможно, это связано с тем, что Reiss не так много продает на мобильных устройствах, но мы знаем, что путь покупателя электронной коммерции часто начинается с мобильного устройства, поэтому, если вы думаете о том, чтобы позаимствовать эту идею меню, попробуйте найти способ реализовать ее так же хорошо на маленьком экране.
2: сон
Навигация Ruya подходит агентству, которое гордится своим дизайном. Изображение шапки главной страницы представляет собой карту путешествия по веб-сайту в виде большого изображения; вместо того, чтобы читать текст, пользователи могут выбрать место на карте для посещения.
Это приятный штрих, потому что он воспроизводит игру — многие пользователи знакомы с видеоиграми, в которых есть интерактивные карты, подобные этой.
Для осторожных пользователей, которые не хотят пробовать интерактивное анимированное меню в новом стиле, вверху есть традиционное меню-гамбургер.
Этот макет меню имеет несколько больших преимуществ. Он интуитивно понятен не потому, что он общий, а потому, что идея знакома и имеет смысл. Это впечатляет: увидев это, вы не забудете название агентства. Является ли их интерактивное меню формой контент-маркетинга? Я бы сказал так.
Но это также связано с некоторыми проблемами. Это замедляет работу страницы. Эффект меньше, чем вы ожидаете, но если ваш компьютер или ваше интернет-соединение не очень быстрое, вы не получите от этого ничего, кроме разочарования. И его реализация означает, что для домашней страницы необходимо написать значительный пользовательский код — это большая работа, которую нужно вложить в дизайнерскую идею, которая, как вы не знаете, окупится.
К сожалению, на мобильных устройствах стильное оригинальное меню Ruya сведено к статичному фоновому изображению.
Это все еще видно, и это все еще выглядит хорошо. Но он не работает как меню. Оцениваемое как заглавное изображение, оно выглядит довольно загруженным, беспорядочным и, ну, во многих отношениях уступает другим вариантам.
Если ваши клиенты обычно используют сверхбыстрый широкополосный доступ, и вы можете сэкономить часы разработки, а также усилия по проектированию, чтобы создать что-то подобное, это может помочь вам опередить конкурентов. Но опять же, учитывая, что мобильные устройства теперь являются первым экраном, не должны ли вы убедиться, что ваше творчество действительно увидит большинство ваших посетителей?
3: Машируемый
Меню Giganto популярны среди сайтов, ориентированных на контент. Причина очевидна: на таких сайтах просто больше страниц. (У Mashable.com 256 000 страниц. Серьезно!) И пользователи, естественно, хотят получать новейшие материалы с разбивкой по категориям. В эпоху, когда функции газеты и журнала были узурпированы алгоритмически подобранными новостными лентами, богатыми изображениями, рекламой и видео, сайт журнала действительно нуждается в большем, чем сухое оглавление.
Этот шаг более перспективен, чем может показаться. Когда технические журналы, такие как Wired, впервые перешли в онлайн, они соблюдали график публикации журналов, переделывая сайт каждую неделю, как новый выпуск. Когда они поняли, что пользователи посещали сайт только тогда, когда у них был новый контент, они переключились на непрерывную публикацию.
Тогда выпуском стал график публикации бумажного журнала. В Интернете вы можете публиковать информацию поэтапно, и сейчас это делают все. Но для журнальных сайтов заголовки меню не должны имитировать содержание страниц настоящих журналов. Меню заголовков, не ограниченное чернилами и бумагой, может быть динамичным, красочным, интригующим и информативным — само по себе преимущество, и все же поможет вам найти то, что вы хотите.
К сожалению, как и многие другие в этом списке, мобильное меню Mashable гораздо менее интересно. Заполняющее экран меба-меню десктопного сайта превращается в стопку плиток на мобильном:
4: Монопо
Monopo делает шаг дальше, чем большинство брендов, делая свое меню в центре внимания. Первоначально их домашняя страница имеет стандартное меню заголовка. Однако нажмите на элемент, и вы попадете в меню, которое заполняет экран. Есть изображения для пунктов меню с анимацией, которая удерживает внимание и вовлекает зрителя. Выберите подкатегорию, и иллюстрированное меню станет прокручиваемым, что позволит вам перемещаться вниз по странице и видеть больше, не щелкая мышью. Это меню как опыт, как функция, а не скупая запоздалая мысль.
В мобильной версии меню выглядит гораздо более обыденно. Есть классический гамбургер в правом верхнем углу, передний план и центр, а затем пользователь прокручивает экран вниз мимо интерактивных изображений.
Это макет, который на самом деле более знаком по блогам, чем основная часть веб-сайта, но все же не такой новый и интригующий, как меню рабочего стола. Что у него есть, так это то, что он очень нагляден, интуитивно понятен в использовании, и даже в его мобильной версии тщательно отобранные изображения передают ощущение подхода агентства.
Чего он не предлагает, так это инновационного мобильного меню. Изображения великолепны, но они все еще представляют собой стопку плиток.
5: Бумажное телевидение
Мы изучили сайты, которые размещали свои меню именно там, где пользователи не могли их пропустить, сосредоточив внимание на создании пользовательского опыта, который позволяет посетителям контролировать то, как они перемещаются по сайту с самого начала.
Но Paper Television — один из растущего числа сайтов, использующих противоположный подход и использующих глобально скрытое меню. Меню Paper Television — это гамбургер в верхнем углу. Разве это не мешает пользователям ориентироваться?
Теоретически хороший дизайн — иметь меню, которое нельзя пропустить и которое находится в стандартном, узнаваемом месте. Но для многих мобильных пользователей гамбургер стандартен и узнаваем. Добавьте к этому тот факт, что трафик Paper Television в основном идет на его домашнюю страницу:
И учтите тот факт, что целевые страницы конвертируются намного лучше, когда элементы меню удалены — иногда на 100% лучше. Если их домашняя страница по сути является целевой страницей, не следует ли Paper Television максимально убрать видимую навигацию, сохранив при этом возможность навигации по сайту для тех, кто действительно этого хочет?
Кроме того, их домашняя страница почти идентична на мобильных устройствах — только немного другие размеры.
По-настоящему ориентированный на мобильные устройства опыт должен выходить за рамки простого проектирования для мобильного дисплея и учитывать ожидания и привычки мобильных пользователей.
Всегда скрытое меню, являющееся следствием уменьшения площади экрана мобильного устройства, имеет смысл в этом контексте, так что мы можем увидеть их больше в будущем!
Вывод
Здесь представлен целый ряд различных стилей меню, от меню, которое захватывает сайт и заполняет экран, до меню, которые прячутся. Самое главное во всех этих меню то, что они начинаются с попытки дать пользователю что-то новое и необычное — они пытаются взять самое ценное на веб-сайте и превратить его во что-то большее, чем просто ряд пять-семь интерактивных опций.
Где многие из них падают, так это на мобильных устройствах, где интересные, стильные творения, которые их дизайнеры размещают на своих настольных сайтах, как правило, уступают место таким же старым, тем же самым старым карточкам прокрутки. Что мы можем с этим поделать? Дайте нам знать в комментариях ниже — и сделайте свое меню потрясающим!