Навигация по сайту примеры: Навигация по сайту — примеры как сделать навигацию удобной

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

Итак, чем же наполнить свой сайт? Мы об этом уже немного говорили, но повторим еще раз, потому что это очень важно.

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

Страничка, посвященная коллекции пивных пробок, — Beer Caps Web

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

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

Что же обычно бывает на страничках начинающих? Давайте посмотрим:

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

Пример типичного доморощенного каталога с жутким дизайном и «крутейшим» наполнением — по паре ссылок в каждом разделе

2) Различные советы.
Начинающие очень любят советовать то, в чем ничего еще не понимают, причем делают это с большим пылом-жаром. Так что советы бывают какие угодно — по веб-дизайну (это всегда потрясающе смотрится на странице, которая представляет собой верх дизайнерского кошмара), по «раскрутке» страницы в Интернете (тоже шикарно смотрится на странице, где счетчик сегодня зарегистрировал только одного посетителя — вас, смотрящего эту страницу) и так далее.

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

3) Анекдоты и истории.
Многие создатели страничек знают, что интернетошатающиеся с большим удовольствием читают анекдоты и различные истории из жизни, и что сайты, наполненные подобным содержимым, бывают весьма и весьма посещаемы. Поэтому они кладут на свою страничку пару десятков анекдотов (взятых с каких-то известных сайтов развлечений, типа Anekdot.Ru) и надеются после этого, что теперь каждый день тысячи людей будут посещать их страничку, чтобы снова и снова все это читать. Ну что ж… Надежды, как говорится, юношей питают.

Довольно типичный доморощенный сайт анекдотов. За весь день я на него зашел первым. Стоило ли вообще трудиться его создавать?

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

4) Информация о том, как заработать деньги в Интернете.
Сейчас разделы с подобными данными стали очень популярными, и я их встречаю примерно на каждой третьей домашней страничке. Причем, если внимательно почитать восторженный текст, в котором излагается весь этот бред, можно прийти к выводу, что создатель данного сайта уже давно зарабатывает 5-10 тысяч долларов в месяц, настолько все это увлекательно изложено. Но потом натыкаешься на небольшое объявление: «Парни и девчата! Если вам нравица мой саит, тагда пришлити мне каждый по два долара, чтобы я мог купить сибе новый модем USR Sportser!», после чего возникает законный вопрос: «Парень! Если в Интернете так легко заработать деньги, то что же ты собираешь деньги на устройство, которое стоит 30-40 баксов? А если все не так просто, тогда что вообще данная информация делает на твоем сайте?».

Довольно типичный пример сайта «Заработай в Сети». Посещаемость у него — человек десять в день. Впрочем, владелец данного сайта довольно скромен и оперирует цифрами 200-300$ в месяц. Остальные стесняются меньше и называют суммы в 2000-3000$. Прям как в том анекдоте: «…кто вам мешает? И вы говорите»

5) Отделение доморощенной дизайнерской студии.
Очень часто бывает так, что, нарисовав кривыми ручками свою первую кошмарную страничку, молодой (или не очень) человек приходит в такой восторг, что немедленно открывает свою «Дизайнерскую студию», о чем тут же горделиво оповещает весь мир на своей страничке. Излишне говорить, что не нужно торопиться величать себя «Дизайнерской студией», если ты даже свою страничку нормально сделать не можешь. Тем не менее таких «студий» — вагон и маленькая тележка. Вот нравится людям выставлять себя на посмешище.

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

Navigation For Mega-Sites — Smashing Magazine

Об авторе

Пол — лидер в оптимизации коэффициента конверсии и дизайнерском мышлении пользовательского опыта. Он имеет более чем 25-летний опыт работы с такими клиентами, как врачи… Больше о Павел ↬

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

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

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

Дополнительная литература по SmashingMag:

Однако есть один класс веб-сайтов, для которого эта традиционная форма навигации не справляется.Это то, что я называю «мегасайтом».

Что такое мегасайт?

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

Организации с мега-сайтами включают такие учреждения, как BBC, компании с разнообразным портфелем, такие как Microsoft, государственные органы, высшие учебные заведения и крупные благотворительные организации, которые проводят множество кампаний, например Всемирный фонд дикой природы.

Эти веб-сайты:

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

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

Проблемы навигации на мегасайтах

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

Традиционная навигация не поддерживает глубину

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

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

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

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

Традиционная навигация не может поддерживать несколько точек входа

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

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

Другой пример — мать-одиночка, желающая узнать о пособиях на ребенка. Они с большей вероятностью попадут на сайт о льготах, чем на домашнюю страницу правительства. В таких ситуациях пользователь фокусируется на своем текущем контексте (например, аспирантура или пособия на ребенка). Их не сразу интересует более широкий мегасайт.

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

Относится ли раздел с надписью «Исследования» на странице университета ко всему университету или только к просматриваемой школе? А как насчет случая, когда один и тот же ярлык появляется дважды, но идет в два разных места? Увеличенная версия.

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

Как же тогда решить проблемы с навигацией на мегасайтах?

Навигационные решения

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

Полностью избавьтесь от навигации

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

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

Этот подход имеет несколько преимуществ :

• Он поддерживает веб-сайт неограниченного размера.
• Идеально подходит для пользователей, которые переходят на сайт по глубокой ссылке.
• Он обеспечивает более динамичное взаимодействие между страницами и легко позволяет добавлять и удалять страницы.

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

Тем не менее, это вариант, и от него не следует быстро отказываться.

Разделение веб-сайта на более мелкие микросайты

Другой подход — разбить мегасайт на несколько более мелких и более управляемых микросайтов.Это подход, принятый BBC.

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

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

BBC старается не быть мегасайтом, разделяя свое присутствие в сети на несколько более мелких веб-сайтов, сохраняя при этом единообразие в навигации и языке дизайна.Увеличенная версия.

Хотя микросайты BBC действительно различаются по внешнему виду, они используют одну и ту же основную навигацию, а также имеют единый язык дизайна для таких вещей, как типографика, макет и модули. Этот язык, определенный на веб-сайте BBC Global Experience Language (GEL), является достаточно последовательным, чтобы обеспечить стабильный пользовательский интерфейс, но при этом достаточно гибким, чтобы обслуживать различные аудитории и тематику.

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

Используйте подход, основанный на хлебных крошках

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

Gov.uk полагается почти исключительно на хлебные крошки для навигации. Увеличенная версия.

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

Он также хорошо переносится на мобильные устройства, на которые приходится 45% веб-трафика Gov.uk.

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

К сожалению, у него есть свои минусы .

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

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

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

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

Мое предпочтительное решение

Мое предпочтительное решение основано на навигационном подходе, который использовался BBC Sports до появления GEL.

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

Старый веб-сайт BBC Sports использовал вертикальные хлебные крошки в качестве основного инструмента навигации.Когда пользователь входил в раздел, например футбол, все другие виды спорта (т. Е. Братья и сестры) удалялись, фокусируя внимание пользователя на рассматриваемой теме. Увеличенная версия.

Этот подход объединяет всю навигацию в одном месте, дает пользователю четкое представление о своем местоположении и уменьшает пространство, отведенное для навигации. Тем не менее, он все еще страдал от проблем Gov.uk.

Работая над Университетом Брайтона, мы предложили подход BBC Sports, но добавили одну важную вещь.Мы предложили сохранить единую панель навигации верхнего уровня. Хотя это добавляет больше возможностей для навигации по странице, это дает пользователю мгновенный обзор структуры веб-сайта. Это позволяет пользователям, которым требуется информация из нескольких разделов (например, будущий студент, исследующий курсы, а также жилье), быстро переключаться между этими разделами.

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

Отображение братьев и сестер при использовании навигации по хлебным крошкам

До сих пор я рассмотрел два возможных решения этой проблемы.

Один работает исходя из предположения, что братья и сестры часто имеют отношения друг с другом; они — часть одной истории, если хотите. Исходя из этого, простого добавления кнопок «следующий» и «предыдущий» (например, вы найдете во многих блогах) может быть достаточно решения. Затем пользователи могли перемещаться между братьями и сестрами одним нажатием кнопки.

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

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

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

Тем не менее, я не тестировал этот подход, и у некоторых возникнут опасения по поводу сенсорных устройств.

Требуются другие идеи

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

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

Хорошие и плохие примеры — Smashing Magazine

Об авторах

Сара — UX-инженер стартапа Kevel из Дарема.Адриенн — графический и полиграфический дизайнер, в настоящее время работающая в Сиракузах, штат Нью-Йорк. Мы работаем вместе, чтобы создавать… Больше о Сара и Эдриенн Кан ↬

Хорошая навигация — это краеугольный камень эффективного веб-сайта. На практике, однако, часто бывает непросто придумать осмысленный и однозначный способ организации, упорядочивания и отображения контента для пользователей; И зачастую найти визуально интересное решение не так просто. Широкая адаптация библиотек JavaScript, таких как jQuery, упрощает добавление различных видов гладкой анимации в дизайн навигации.

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

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

Дополнительная литература по SmashingMag:

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

Параллакс и прокрутка

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

Nike Better World

Богатая графика и 3D-эффекты параллакса

Вертикальная прокрутка навигации с фоновыми эффектами параллакса

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

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

Rosso Carmilla

Анимация горизонтального параллакса

Горизонтальная прокрутка с анимацией параллакса

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

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

Откройте для себя Tennessee Trails & Byways

Горизонтальная прокручиваемая навигация, пояснение.

Горизонтальная прокрутка с параллаксной анимацией и понятной навигацией.

Discover Tennessee Trails & Byways включает в себя навигационную систему для просмотра следов для своих пользователей. Дизайнеры сайта используют ту же идею горизонтальной прокрутки навигации с анимацией Parallax, но они решили сначала объяснить пользователям, как использовать навигацию на сайте.Обычно это не признак эффективной навигации, но в этом примере он работает довольно хорошо, особенно потому, что общий дизайн в любом случае кажется пользователям очень новым, игривым и экспериментальным. В случае необычных или особенно новаторских методов проектирования такие инструкции могут потребоваться до тех пор, пока пользователи не поймут парадигму нового шаблона навигации.

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

Siebennull

«Загроможденный стол» соответствует Parallax

Уникальный и оригинальный взгляд на «загроможденный рабочий стол»

Поразительно оригинальный, Siebennull имеет деревянную тему в стиле «загроможденный стол» вместе с 3D. чувствовать себя частично обеспеченными тенями и другой реалистичной графикой, а частично — эффектом параллакса, который применяется ко всей странице.Общий эффект кажется очень взаимосвязанным, без лишнего беспорядка.

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

Рассказывание историй

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

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

Бен Телохранитель

Рассказанная целевая страница

Захватывающий пользовательский опыт, создание взаимодействия с пользователем с помощью дизайна и эффектов

Дизайнеры целевой страницы Бен Телохранитель выбрали очень запоминающуюся метафору для своей главный герой. Вместо того, чтобы представлять общую страницу «скоро» с описанием предстоящей услуги, сайт эффективно рассказывает историю.Главный слоган страницы — «Француз, охраняющий твои секреты. Да серьезно.» Рядом с этим утверждением представлено описание инструмента тонко . Загадочный персонаж отображается на заднем плане, но при этом очень хорошо привлекает внимание и интерес пользователей.

Самая интересная часть страницы происходит, когда вы медленно прокручиваете страницу. Если вы обратите внимание на иллюстрации и прочитаете все представленные подробности, то сможете наблюдать, как разворачивается история. Пока рассказчик идет по улице, он дает вам некоторые объяснения, но достаточно, чтобы вызвать ваш интерес.По мере того, как вы продолжаете прокручивать, история достигает своей кульминации и заканчивается заметными кнопками с призывом к действию. Обратите внимание, что дизайн адаптивный, а иллюстрации адаптируются к области просмотра пользователя. В целом это не классическая навигация, но и не традиционный сайт. Ben the Bodyguard — замечательный веб-сайт, и рассказывание историй очень хорошо работает в этом контексте рекламного ролика. Вот почему сайт получил столько внимания, когда он был впервые выпущен.

Youzee

Плавное, мягкое повествование

Плавная анимация с плавным параллаксом

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

Обратите внимание, как тщательно дизайнеры используют повествование, чтобы вовлечь пользователя в рассказ и вовлечь его в изучение инструмента. В отличие от Бена Телохранителя, дизайн не сильно зависит от персонажа, а использует более знакомые, существующие метафоры, чтобы разворачивать историю.Основная область вверху не говорит о том, о чем идет речь; пользователь узнает его по ходу прокрутки страницы. Также обратите внимание, насколько хорошо дизайнеры используют метафору «Включить» для кнопки в верхней части страницы; он выглядит так, как если бы он хотел, чтобы на него щелкнули, и соответствующим образом реагирует на щелчок. Молодцы, ребята, молодцы.

Навигация с прокруткой

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

Polecat

Назад к основам

Простая навигация со сплошной прокруткой

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

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

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

Cornerd

Простая навигация с вертикальной прокруткой

Простая навигация с вертикальной прокруткой

Как и Polecat, Cornerd имеет множество наглядных иллюстраций.Тема монстров работает очень хорошо, а легкие движения глаз монстров создают привлекательную, игривую атмосферу. Дизайнер Дениз Чандлер не относится к себе слишком серьезно, и именно это вызывает сочувствие и сочувствие на сайте, облегчая формирование доверия к способности дизайнера создавать увлекательные и привлекательные работы.

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

Curious Generation Group

Прокрутка одной страницы с поворотом

Прокрутка одной страницы с поворотом

Несмотря на то, что Curious Generation Group чистая и организованная, ее красочные круглые формы кажутся немного неожиданными. Простая статическая панель навигации вверху не только незаметна, но и хорошо сочетается с общим дизайном этого веб-сайта. Иногда фиксированная панель навигации может казаться неуклюжей и отвлекающей, но эта кажется легкой и воздушной благодаря своей прозрачности.Позиционирование контента хорошо сочетается с анимацией прокрутки и помогает направлять взгляд по веб-сайту. Обратите внимание, что все отдельные области взаимосвязаны: для каждой области есть боковая панель навигации, отображающая дополнительные параметры навигации. Очень яркий, красочный и запоминающийся дизайн.

Эрик Йоханссон

Езда на скутере

Езда на скутере с анимацией параллакса

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

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

Haunted Cathouse

Вертикальная прокрутка навигации с графикой сборника рассказов

Вертикальная прокрутка навигации с иллюстрациями из сборников рассказов

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

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

Sam Web

Горизонтальная прокрутка в пределах горизонтальной прокрутки

Горизонтальная прокрутка вложена в горизонтальную прокрутку

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

Интересно, что на странице портфолио есть вложенный горизонтальный скроллер. Поскольку он прокручивается в том же направлении, что и основная область контента, но не контролируется той же системой навигации, он может сбить с толку пользователей. Стрелки влево и вправо — это визуальные индикаторы того, что в этом разделе что-то не так, но он также может выиграть от использования немного другого вида прокрутки или использования какого-либо другого взаимодействия для навигации по этому контенту.Это непростая задача — найти удобный способ добавить навигацию к субконтенту уже внутри какой-то интерактивной навигации.

Denny’s Restaurant

Слишком много всего вредно для вас

Комбинированная горизонтальная и вертикальная прокрутка

Дизайнеры Denny’s Restaurant, вероятно, промахнулись при поиске способа разместить много контента. Сочетание горизонтальной и вертикальной прокрутки скорее дезориентирует, чем помогает.Без небольшой подсказки на главном экране пользователь может даже пропустить контент, доступный только с помощью дополнительной вертикальной прокрутки. Дополнительный контент скрыт в слайдерах, и кажется, что его легко потерять. Сайт не только сбивает с толку, но и не очень удобен для мобильных пользователей, которые хотят заказать или найти ресторан на ходу. Сайт может создавать ощущение «текучего контента», которое немного сложно понять и на котором сосредоточиться, поскольку все движется; все интерактивно и все меняется.Дизайн можно было бы использовать более спокойно.

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

Ferocious Quarterly

Более нестандартные вкладки

Интересные иллюстрации

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

Zut Alors [Предупреждение: первые пять секунд могут вызвать головную боль!]

Всплывающая мания в лучшем виде

Навигация с вкладками спереди и по центру

В целом, ZUT ALORS! чрезвычайно авангардный и очень нетрадиционный.Крупные передние и центральные буквы — это единственный контент на странице, и они служат для навигации. Каждое письмо открывает серию тщательно упорядоченных всплывающих окон с последующим содержимым страницы.

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

Method Design Lab

Последние новости
Селектор графического эквалайзера

Меню Method Design Lab, позволяющее следить за их потоками, является единственным в своем роде. Следить за их действиями на сайте можно с помощью истории в виде графического эквалайзера в правом верхнем углу. При нажатии на час отображаются все сообщения, пресс-релизы и твиты за последние часы.Различить разные типы несложно, так как каждому присвоен определенный цвет. Щелчок по одному из пузырей новостей открывает окно с фактическим сообщением. И идея, и реализация довольно освежают и не теряют терпения посетителей.

The Web Standards Sherpa

Пропуск контента
Ясно и просто — пока контент ограничен

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

BonLook

Иллюстрированное раскрывающееся меню
Возможность выбора по форме с помощью пиктограмм

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

Design Intellection

Правые вкладки динамической навигации
Правая панель навигации меняет свой внешний вид

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

Как правило, приятный и интуитивно понятный стиль меню стоит адаптировать и легко расширить для охвата подразделов контента.

Bernat Fortet Unanue

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

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

Lega-Lega

Интуитивно понятные и четкие пиктограммы с переворачивающимися заголовками

Простая навигация

Lega-Lega просто структурирована и удобна.Меню состоит всего из семи категорий, каждая из которых представляет собой один слой. Единственный минус: горизонтальную полосу прокрутки можно легко принять за часть макета, а не за скроллер. Добавление эффекта наведения указателя мыши может решить проблему. Чистый и удобный сайт с простой навигацией — здесь вы точно не заблудитесь.

Bluecadet Interactive

Чистое подменю
Предоставление пользователю возможности выбора категории

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

Данило Иурларо

Креативные анимационные эффекты

Креативные анимационные эффекты

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

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

Fantasy Cartography

Карта навигации

Карта навигации

Fantasy Cartography — это сайт, демонстрирующий карты с навигацией, смоделированной по образцу самой карты. Хотя разделы содержимого в основном представляют собой прокручиваемую навигацию, организация и расположение параметров навигации необычны. Сайт также полон «мягких эффектов», которые хорошо сочетаются с иллюстрациями.

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

C&C Coffee Company

Очаровательная анимация

Простая и забавная анимация, которая улучшает навигацию, не отвлекая ее

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

Панировочные сухари

NOS

Контекстно-зависимые хлебные крошки

Интерактивные хлебные крошки

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

MDM Bank

Постоянная навигационная цепочка

Постоянная навигационная цепочка

Раздвижные разделы

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

Directions

Навигационные ссылки в стиле «гармошка»

Навигационные ссылки в стиле «гармошка»

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

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

Совместные выставки

Разверните для просмотра содержания
Разверните элементы календаря

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

Bankwest

Несколько уровней расширения

Несколько уровней расширения

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

Elliot Lepers

Выдвижные коробки с подписями

Выдвижные коробки с подписями

Elliot Lepers использует интересную сетку с интерактивными выдвижными полями. Они загружаются быстро, и по сайту легко ориентироваться. Простота размещения информации на главной странице крайне затрудняет заблуждение, так как всегда есть стрелки, по которым нужно следовать и нажимать.Цвета довольно бодрящие, а содержание хорошо организовано.

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

Глобальная гуманитарная помощь

Скрытые разделы помогают работать с большими объемами контента

Скрытые разделы помогают справляться с большими объемами контента

Одна из первых вещей, которую пользователь, вероятно, должен заметить в Глобальной гуманитарной помощи, — это ярко-желтое левое выдвижное меню.Он аккуратно выполнен, но, поскольку все остальные элементы тоже желтые, это не бросается в глаза. Сайт очень загружен данными и предназначен для предоставления посетителям доступа ко многим отчетам и тематическим исследованиям, которые скрыты за желтой полосой; В общем, это очень удобный и простой способ скрыть вторичную навигацию до тех пор, пока она не понадобится ( контекстно-зависимая навигация ). Интересная идея: такие выдвижные панели, как правило, являются хорошим способом для сайтов с большим количеством контента, чтобы скрыть что-то, сделав их доступными по всему миру.В этом конкретном случае вторичная панель навигации могла быть немного толще, чтобы привлечь внимание пользователя.

Creative NZ

Много информации на небольшом пространстве

Много информации на небольшом пространстве

Creative NZ имеет «мега раскрывающееся меню». Это хороший пример навигации, которая эффективно использует пространство, добавляя классическую навигацию (например, контактную форму, расширенный поиск и т. Д.).), а также информационные блоки внизу каждого из них. Если вы собираетесь использовать такое меню, действительно стоит потратить время на то, чтобы внимательно изучить контент и убедиться, что вы эффективно выбираете контент для включения в каждое подменю.

Кроме того, обратите внимание на категоризированный ползунок на главной странице. Используя категории, он фактически представляет сразу несколько слайд-шоу.

Заключение

Некоторые заключительные моменты, о которых следует помнить при работе с творческой навигацией:

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

Похожие сообщения

Примечание: Спасибо корректору Smashing Magazine Джону фон Бергену.
(ik) (vf)

14 примеров блестящих дизайнов навигации по сайту

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

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

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

Что вы найдете в этой статье?

Хотя ваш веб-сайт работает достаточно хорошо, приведенные ниже факторы могут добавить ему красоты —

Ограничьте навигацию по сайту

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

Знаки — хороший вариант

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

Сосредоточьтесь на количестве имеющегося у вас контента

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

Скрыть поле ввода поиска

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

Залипание навигации для бесконечной прокрутки

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

Используйте описательную навигацию

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

Порядок элементов — важная концепция

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

Оптимальное использование раскрывающихся меню

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

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

Привлекающий внимание стиль шрифта, удобное подменю

CSSChopper имеет потрясающее меню навигации с четким стилем шрифта. внимание пользователя по номиналу.Удобный макет подменю помогает пользователям легко переходить на определенную страницу. Их меню навигации хорошо продумано для плавного пользовательского интерфейса.

Sparx IT Solutions

Простое навигационное меню, прочная структура

Sparx IT Solutions — известная компания, занимающаяся проектированием и разработкой веб-сайтов, которая использует удобную навигацию, чтобы помочь пользователям легко переключаться с одной страницы на другую . Прочная структура позволяет легко просматривать несколько веб-страниц.

inkySoft

Гладкая навигация, простая компоновка

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

No-Refresh

Подпись для изображений, беспроблемная навигация

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

HTMLPanda

Простой макет, впечатляющий стиль шрифта

Благодаря простейшему макету навигации HTMLPanda была одной из ведущих компаний по веб-разработке в США.Контент, меню и подменю идеально подходят для беспроблемного взаимодействия с посетителями, приходящими на сайт. Аутентичный стиль шрифта предлагает ориентированный на пользователя подход, а также исключительный внешний вид.

PSDtoWordPressExpert

Хорошо продуманная навигация, чистый внешний вид

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

Nimble Tank

Хорошая навигационная система для интерактивного взаимодействия

Основным преимуществом этого веб-сайта является интуитивный интерфейс с поворотом на 360 ° с помощью кнопки «Повернуть» в углу веб-сайта, имитирующей поворот iPad и нацелен на мобильные устройства. Это агентство для мобильных веб-сайтов позволяет быстро и легко собирать информацию с помощью нетипичного пользовательского интерфейса.

Acko

Сеточное меню, трехмерное видео

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

Better Graph

Красивые меню и подменю, простая навигация

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

AppsChopper

навигация

Красиво продуманная навигация для легкого переключения

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

Anet Design

Традиционная панель меню, красочный подход

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

PHPDevelopmentServices

Чистый стиль меню, необыкновенно продуманное меню

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

Big Apple Hot Dogs

Простое переключение между страницами, минимальная навигация

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

Niketo

Превосходный фон, быстрое меню

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

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

Какие самые лучшие советы по плавной и великолепной навигации? Расскажите нам ниже или напишите нам в Твиттере!

19 Примеры дизайна навигации по веб-сайту для вашего онлайн-портфолио

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

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

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

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

Лучшие примеры дизайна навигации по веб-сайту

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

Навигация по веб-сайту с вертикальной прокруткой

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

Exhibition

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

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

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

Меандр

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

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

Mode

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

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

Range

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

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

Навигация по веб-сайту с горизонтальной прокруткой

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

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

Reel

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

Если вы хотите создать элегантное и современное портфолио, которое позволит вашему контенту сиять, Reel — отличный выбор.

Skyline

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

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

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

Dusk

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

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

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

Beacon

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

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

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

Навигация по дизайну веб-сайтов в полноэкранном режиме

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

Промышленность

Одна из ниш в фотографии, которая особенно хорошо подходит для высокоэффективного полноэкранного веб-сайта, — это архитектурная фотография.Независимо от того, снимаете ли вы архитектуру экстерьера или интерьера, обычно цель состоит в том, чтобы запечатлеть объект так, чтобы он выглядел великолепно. Вот почему полноэкранный шаблон целевой страницы, такой как Industry, является идеальным выбором.

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

Fullframe

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

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

Sun

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

Ambience

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

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

Навигация по дизайну тайлового веб-сайта

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

Kiln

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

Collage

Если вам нравится мозаичный вид, но вы предпочитаете более элегантный дизайн, Collage отметит все эти флажки.Доказательство того, что меньше значит больше, каждый элемент дизайна вносит свой вклад в чувство изысканности и артистизма.

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

Detail

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

Hue

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

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

Навигация по дизайну слайд-шоу

Хорошее слайд-шоу может рассказать визуальную историю. Сайты с дизайном слайд-шоу — отличный способ погрузить людей в мир ваших изображений.

Fabric

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

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

Slate

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

Ель

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

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

Хотите узнать больше о дизайне? Читать дальше!

26 Совершенно важных советов по дизайну веб-сайтов

13 качеств каждого хорошо продуманного веб-сайта портфолио

Как использовать шаблоны видео веб-сайтов для вашего онлайн-портфолио

Тенденции навигации по веб-сайту: 10 советов и примеров — Наверх Цифровое агентство

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

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

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

1. Полноэкранная навигация

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

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

2. Навигация в нижней части экрана

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

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

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

3. Вертикальные стеки

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

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

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

4. Нет навигации

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

Этот метод не рекомендуется, если ваш сайт содержит несколько страниц контента, хотя некоторые сайты агентств находят успех с этой концепцией.Что делать, если навигация отвечает на вопросы пользователей? Именно этим занимается юридический сайт Quincy Requin & Associes. Без традиционной навигации каждая ссылка ведет на страницу, отвечающую на конкретный вопрос.

5. Выдвижные меню

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

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

6. Больше мегаменю

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

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

7. Анимированные элементы навигации

Анимация — это тенденция и 2015 года, поэтому логично, что она становится все более популярной и для стилей навигации. Лучшая анимация для навигации — простая.

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

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

8. Параметры навигации в виде карты

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

Каждая отдельная доска — это карта. Каждая доска содержит больше карт, и на сайте есть бесконечная колода карт и ссылки. Он разработан, чтобы вы продолжали нажимать на него весь день

И все больше пользователей и сайтов знакомятся с этим форматом. В популярной документации Google Material Design есть даже рекомендации по дизайну карточного стиля.Этот стиль навигации лучше всего работает, если у вас есть много контента, который может быть автономным, без необходимости привязки к другим частям контента по всему сайту. https://www.google.com/design/spec/components/cards.html

9. Навигация без кнопок

Текст в виде кнопок — это новый стиль кнопок. Одна строка хорошо разнесенного текста в верхней, нижней или нижней части страницы — это простой и легкий в использовании стиль навигации. Вам не нужно беспокоиться о стилях кнопок или элементах, которые могут мешать другим частям дизайна.(Это особенно хорошо работает, например, с полноэкранными изображениями.)

Способ заставить его работать — использовать простой и легко читаемый шрифт, резко контрастирующий с фоном. (Вам действительно нужно сочетание светлого и темного цветов для максимального воздействия.) Включите достаточно места между словами, чтобы у каждого было достаточно места для чтения и щелчка, и убедитесь, что вокруг каждой текстовой «кнопки» достаточно места для легкого выбора с помощью мыши или пальца.

10. Одностраничная прокрутка навигации

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

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

Бонус: 5 сайтов с уникальной навигацией

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

Adwyse

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

Cave a Bieres

Сможете ли вы найти элементы навигации? На самом деле они скрыты в визуальной истории в этом плане веб-сайта.

Просмотр данных

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

Ладлоу Кингсли

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

Nike LiDyana

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

Заключение

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

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

лучших практик и примеров оптимизации навигации в электронной коммерции

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

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

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

Что такое оптимизация навигации?

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

Разбиение на различные компоненты и примеры навигации по сайту

Первичная навигация

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

1. Размер страницы: На настольных устройствах горизонтальное меню навигации экономит больше места на странице, чем вертикальное, сужая область содержимого, доступную как на вашей домашней странице, так и на страницах сайта.Однако на мобильных устройствах, где пространство ограничено, вертикальная навигация через гамбургер-меню позволяет быстро скрывать и открывать элементы меню.
2. Приоритет пункта меню: Обычно крайний левый и верхний пункты меню имеют наибольший вес, так как эти позиции визуально воспринимаются как основные области. Кроме того, поскольку большинство пользователей читают слева направо, существует более веский аргумент в пользу горизонтальной навигации на настольных сайтах, где доступно больше места на сайте (этого нельзя сказать о мобильных устройствах, где большинство устройств оптимизированы для вертикального форматирования). страниц).
3. Сканирование: Многие пользователи находят быстрое сканирование страниц по вертикали более естественным, что делает возможным использование вертикальных меню навигации.

Категории

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

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

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

1. Многоуровневые меню: Список родительских категорий и отображение подкатегорий только при наведении курсора или щелчке мышью
2. Мегаменю: Располагает все родительские категории и подкатегории при начальном раскрывающемся меню

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

Вдохновение для дизайна меню для мегаменю

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

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

Пример пересортированного меню навигации в зависимости от интересов каждого посетителя

Дополнительные элементы, которые необходимо учитывать

Помимо создания основного навигационного макета, командам электронной коммерции предстоит принять множество других решений.К ним относятся:

Липкая навигация

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

Пример липкого меню электронной коммерции

Стиль дизайна

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

Отображение меню

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

Рекомендуемые товары в примере меню навигации электронной коммерции

Нижний колонтитул

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

Пример подробного описания нижнего колонтитула

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

Различные типы функций поиска

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

Фасетный поиск

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

Пример фасетного поиска на сайте электронной коммерции

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

Пример поисковых фильтров на сайте электронной коммерции

Семантический поиск

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

Результаты поиска при вводе текста в режиме инкогнито

Результаты поиска при вводе текста при входе в систему

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

Два варианта окна поиска, чтобы побудить целеустремленных покупателей найти то, что они ищут

Переход между страницами категорий

Лучшая практика для разработки страниц со списком продуктов (PLP) и страниц с подробными сведениями о продуктах (PDP) — это оптимизация навигации между страницами электронной коммерции.Как только пользователь переходит на PDP, он может захотеть легко вернуться на свою первоначальную страницу результатов поиска, если он не нашел то, что искал. Убедитесь, что пользователи не теряют свое место на вашем сайте при переходе между страницами и обратно, путем интеграции хлебных крошек, которые упростят навигацию по сайту.

«Хлебные крошки» — это линейный экран навигации, обычно видимый в верхней части веб-страницы, который отображает путь пользователя по страницам, чтобы перейти на текущую (т. Е. Женщины> Обувь> Ботинки> Ботильоны> Туфли на блочном каблуке).Каждый элемент в цепочке навигации должен быть интерактивным и возвращать пользователя на эту конкретную страницу.

Пример навигации по веб-сайту: хлебные крошки на целевом веб-сайте

Дополнительные советы по дизайну мобильной навигации

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

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

Вертикальное меню в приложении Nike (слева) и гамбургер-меню Amazon слева (в центре: до щелчка; справа: после щелчка)

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

Пример баннера категории на мобильной странице PDP для возврата пользователей к основной категории

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

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

Реальные эксперименты по навигации в электронной коммерции от брендов из нашей клиентской базы

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

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

Начните тестирование своего пути к успешной навигации по сайту

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

40 Меню творческой навигации | Профессиональный дизайн блога

Первое, что нужно сделать при планировании нового веб-сайта, — это проработать весь контент, который будет на нем. Затем вы разделите это на разделы, а затем на различных уровней навигации .

Получился скучный список ссылок.

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

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

Горизонтальные меню

1. Ткань Лондон

Красивое минималистичное меню с яркими цветами и компактным дизайном.

2. Нопоко Графика

Элегантные вкладки с тенью и красивым фоновым рисунком.

3. Код культуры

Меню стиля iPhone для приложения Iphone.

4. Коробка Wish

Простой, компактный и элегантный.

5. Кролик Mac

Светлые цвета и креативные символы выделяют это меню из общей массы.

6. Kyan Media

Сплошные цвета и простые эффекты MouseOver делают это меню красивым.

7. Loodo

Симпатичное разноцветное меню. Крошечный зеленый автомобиль обозначает текущую страницу.

8. Firestone Live

Красивое черно-белое тематическое меню с блочными шрифтами.

9. Мэтт Максвелл Дизайн

Простое меню с красивыми контрастными цветами.

10. Cognigen

Еще один простой дизайн в светлых тонах с уникальными вкладками.

11. Черная книга Mag:

Черно-белое меню с эффектом прозрачности.

12. Агачи

Простое многострочное меню в нежно-голубых тонах.

13. App Storm

Классный пример минималистичного многострочного меню.

14. Построен Buffalo

Широкие вкладки и простые шрифты придают этому меню довольно изысканный вид.

15. Очистить слева

Еще одно многострочное меню с отличной цветовой гаммой.

16. Фэшн-фотография

Поистине динамичное меню. Миниатюра появляется каждый раз, когда вы наводите курсор на пункт меню.

17. Миа и Мэгги

Классное многострочное меню с традиционным эффектом подчеркивания.

18. Майкл Остин

Широкие вкладки и простые цвета.

19. Монетный двор

Еще одно меню с широкими вкладками и эффектом прозрачности.

20. Рокатай

Обновление использования цифр в каждом пункте меню.

21.Ронни Прайс

Эффект «Мел на доске» делает меню непринужденным, но творческим.

22. Роял Карибский бассейн

Еще одно отличное меню с элегантными шрифтами и приятными контрастными цветами.

23. Маленький камень

Действительно креативное и уникальное меню для ди-джея.

24. Сохтанака

Красивые цвета, элегантные шрифты и световые эффекты.

25. Девушка-резюме

Еще одно креативное меню в приятном повседневном стиле.

26. Скай Ларкин

Каждый элемент в меню имеет свой цвет при наведении на него курсора. Действительно креативно и весело.

27.Веб-дизайнер Wall

Еще одно повседневное меню в стиле липких заметок.

Вертикальные конструкции:

28. Surfstation

Одно из самых элегантных меню. Красивое использование пуль в минималистичном дизайне.

29. Алекс Коханюк

Расширяемое вертикальное меню с большим количеством цветов.

30. Карбоника

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

31. Районные решения

Каждый элемент в этом вертикальном меню окрашивается в другой цвет, когда вы наводите на него курсор.

32. IipVapi

Черно-белое вертикальное меню в виде открытки.

33. Интерактивная

Элегантное многострочное вертикальное меню.

34. Питание плаката

Продуманные шрифты и эффект прозрачности выделяют это меню.

35.Джефф Сармьенто

Красочное меню с очень большими шрифтами и символами.

36. Макаллан Ридж

Еще одно многострочное меню с красивым текстурированным фоном.

37. Nando Designer

Обычное меню с эффектом записной книжки.

38. Pixel Media

Просто и элегантно.

39. Ник Ad

Очень динамичное меню с великолепными эффектами и контрастными цветами.

40.Ночной Майами

Еще одно вертикальное меню с эффектом прозрачности.

Ваши любимые меню

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