Меню сайта слева: Top 30 Inspiring Website Sidebar Design Examples in 2020

1. Энтони Дж. Рейберн

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

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

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

Kate Vass Galerie — это галерея современного искусства, которая тесно сотрудничает с кураторами и ведущими искусствоведами, чтобы представить работы художников. Чтобы помочь посетителям легко изучить произведения искусства, слева есть боковая панель, на которой перечислены имена разных художников.

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

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

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

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

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

Love Billy использует жирный шрифт на боковой панели своего веб-сайта. Он служит в качестве навигации для посетителей и дает обзор всего интерфейса.

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

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

«Церковь жизни сегодня» — это веб-сайт для детей. Он имеет обычную простую боковую панель. Весь дизайн чистый и красивый.

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

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

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

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

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

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

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

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

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

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

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

Rose Datoc Dall — это веб-сайт, на котором представлены произведения искусства. Боковая панель справа рядом с произведениями искусства отображает последние сообщения с красивыми миниатюрами и типографикой.

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

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

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

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

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

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

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

Масштабируемость, отзывчивость и простота сканирования

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

Автор: Пейдж Лаубхаймер

• Стр. Лаубхаймер

на 2021-05-16 16 мая 2021 г.

Темы:

Навигация, информационная архитектура, визуальный дизайн, гамбургер, размер экрана

• Навигация Навигация,
• Информационная архитектура, 
• Визуальный дизайн

Поделиться этой статьей:

Каждый раз, когда я говорю о широких иерархиях в нашем курсе UX Conference по информационной архитектуре, возникают два вопроса:

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

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

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

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

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

Большинство преимуществ этого пользовательского интерфейса навигации проистекает из его способности размещать множество категорий высшего уровня.

1. Определенные категории повышают вероятность поиска и снижают стоимость взаимодействия.

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

2. Вертикальная навигация предлагает пространство для роста.

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

3. Вертикальная навигация обеспечивает более эффективное сканирование, чем горизонтальная навигация.

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

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

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

4. Пользователи знакомы с вертикальной навигацией . Несмотря на то, что вертикальная навигация менее распространена на современных веб-сайтах, она часто встречается в настольных приложениях (как в нативных, так и в веб-приложениях).

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

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

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

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

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

Nua Bikes старого и нового дизайна. (Слева) Предыдущий дизайн Nua Bikes использовал вертикальную левостороннюю навигацию с соотношением контента и хрома приблизительно 5:1. (Справа) редизайн сайта, перенесенный на горизонтальную панель навигации с соотношением контента и хрома 12:1 на экране того же размера. Хотя новый дизайн предоставляет гораздо меньше категорий верхнего уровня в видимой навигации, он занимает гораздо меньше места для контента.

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

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

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

1. Разместите вертикальную навигацию слева и используйте заметный дизайн.

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

Кроме того, убедитесь, что навигация визуально выделяется. Различные цвета текста или фона и границы могут выделить его среди других элементов страницы.

2. Не дублировать меню как по вертикали, так и по горизонтали.

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

3. Не прячьте навигацию за значками.

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

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

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

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

4. В длинных меню менее важные размещайте внизу.

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