#10 — Выпадающее меню и списки
itProger Видеокурсы Изучение технологии Bootstrap (верстка сайта) #10 — Выпадающее меню и списки
Bootstrap HTML5Начиная с этой лекции мы приступаем к изучению Bootstrap стилей в связке с JavaScript скриптами. Мы изучим создание выпадающих списков, а также меню за счёт заранее подготовленных JavaScript скриптов.
Исходный код
Шапка с выпадающими списками
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap уроки</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh5u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> </head> <body> <nav role="navigation"> <div> <div> <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span>Навигация</span> <span></span> <span></span> <span></span> </button> <a href="#">itProger</a> </div> <div> <ul> <li><a href="#">Ссылка</a></li> <li><a href="#">Ссылка</a></li> <li> <a href="#" data-toggle="dropdown">Dropdown <b></b></a> <ul> <li><a href="#">Действие</a></li> <li><a href="#">Другое действие</a></li> <li><a href="#">Что-то еще</a></li> <li></li> <li><a href="#">Отдельная ссылка</a></li> <li></li> <li><a href="#">Еще одна отдельная ссылка</a></li> </ul> </li> </ul> <form role="search"> <div> <input type="text" placeholder="Поиск"> </div> <button type="submit">Отправить</button> </form> <ul> <li><a href="#">Ссылка</a></li> <li> <a href="#" data-toggle="dropdown">Dropdown <b></b></a> <ul> <li><a href="#">Действие</a></li> <li><a href="#">Другое действие</a></li> <li><a href="#">Что-то еще</a></li> <li></li> <li><a href="#">Отдельная ссылка</a></li> </ul> </li> </ul> </div> </div> </nav> <div> <button data-toggle="dropdown">Список <span></span></button> <ul> <li>Заголовок 1</li> <li><a href="#">CSS</a></li> <li><a href="#">HTML</a></li> <li><a href="#">jQuery</a></li> <li></li> <li>Заголовок 2</li> <li><a href="#">Javascript</a></li> </ul> </div> <!-- jQuery --> <script src="https://ajax. googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>
Онлайн редактор кода
Загрузка…
Задание к уроку
Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям
Большое задание по курсу
Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца
Также стоит посмотреть
# Веб сайты
Создание блога на Ruby On Rails8 уроков
# Веб сайты
Видеокурс по PHP, MySQL / Создание динамического сайта# Веб сайты
Уроки Python Django / Создание сайта# Веб сайты
Вёрстка адаптивного сайта на Bootstrap 46 уроков
# Веб сайты
Современная вёрстка адаптивного веб-сайтаМы используем файлы cookie, чтобы улучшить работу и повысить эффективность сайта.
Продолжая пользование данным сайтом, вы соглашаетесь с использованием файлов cookie.
Хорошо
Настройки
Руководство по созданию сайта с выпадающим меню в WordPress
Выпадающие меню хорошо смотрятся на сайтах, они функциональны и удобны для посетителей. Когда пользователь наводит указатель мыши на элемент меню, в раскрывающемся меню отображается список ссылок на страницы и разделы вашего сайта.
В этом руководстве для начинающих подробно изложено, как создать выпадающее меню на сайте WordPress.
Зачем использовать выпадающие меню в WordPress
WordPress поставляется со встроенной системой управления меню, которая позволяет легко добавлять навигационные меню на ваш сайт WordPress.
Навигационные меню – это ссылки на главные страницы вашего сайта, которые обычно отображаются сверху в виде горизонтальной строки рядом с логотипом сайта.
Если вы начинаете блог или создаете веб-сайт с несколькими страницами, вы можете добавить их в один ряд.
Однако, если вы запускаете интернет-магазин или большой веб-сайт, можно добавить дополнительные ссылки в меню навигации.
Выпадающие меню помогают решить проблему ограниченного пространства, отображая ссылки меню только тогда, когда пользователи наводят указатель мыши на родительский элемент. Они также позволяют организовать структуру меню по темам или иерархии.
Наконец, они выглядят довольно мило.
Посмотрим, как легко создать выпадающее меню WordPress и добавить его на свой веб-сайт.
Шаг 1. Выбор темы с поддержкой выпадающего меню
WordPress поставляется со встроенной системой управления меню, но отображение этих меню полностью зависит от вашей темы WordPress.
Почти все темы WordPress по умолчанию поддерживают выпадающие меню. Однако встречаются темы, не поддерживающие или плохо отображающие такие меню.
Как узнать, поддерживает ли используемая вами тема выпадающее меню?
Можно на сайте темы перейти на демо-версию и посмотреть, показывает ли демо выпадающее меню в меню навигации.
Если выпадающего меню в демо-версии нет, лучше поискать другую тему WordPress.
Вот несколько отличных тем, которые поддерживают выпадающее меню из коробки.
- Astra – многоцелевая тема WordPress, поставляется с несколькими начальными сайтами и множеством функций.
- Темы StudioPress – профессиональные темы, созданные на основе фреймворка Genesis, высоко оптимизированы для повышения производительности.
- OceanWP – популярная тема WordPress, подходит для любых веб-сайтов.
- Ultra – разработанная на основе Themify Builder, включает в себя красивые шаблоны и гибкие опции темы.
- Divi – популярная тема от Elegant Themes, которая использует конструктор страниц Divi и содержит множество функций перетаскивания, включая выпадающие меню.
Шаг 2. Создание меню навигации в WordPress
Перейдите во вкладке «Внешний вид» на страницу «Меню» и нажмите кнопку «Создать новое меню».
Укажите имя для меню навигации. Оно не будет отображаться на вашем сайте.
Нажмите кнопку «Создать меню». WordPress создаст для вас новое пустое меню.
Добавим верхние ссылки в меню навигации. Эти пункты появятся в верхнем ряду вашего меню.
Выберите страницы, которые хотите добавить, в левом столбце и нажмите кнопку «Добавить в меню». Можно выбрать записи в блоге, категории или добавить пользовательские ссылки.
Эти страницы появятся в правом столбце под вашим новым меню.
Смотрите также:
Как создать мощное меню с помощью плагина WP Mega Menu.
Шаг 3. Добавление подпунктов в меню
Подпункты – это элементы, которые появятся внутри выпадающего меню. В зависимости от того, как вы хотите организовать свои меню, можно добавить их в любой из существующих пунктов.
Для этого урока добавим категории по ссылке в блоге.
Выбираем элементы, которые нужно добавить, в левом столбце, а затем нажмите кнопку «Добавить в меню».
Они появятся в правом столбце.
Эти ссылки отображаются как обычные элементы, а мы хотим сделать их подпунктом родительского меню.
Можно просто перетащить элемент меню и поместить его под родительский элемент. Переместите его немного вправо, и он станет подпунктом.
Повторите процесс для всех ссылок, которые хотите показать в раскрывающемся меню.
Не забудьте нажать кнопку «Сохранить меню».
Шаг 4. Публикация выпадающего меню
Если вы редактируете меню, которое уже есть на вашем сайте, оно сразу же появится на вашем сайте.
Однако, если это новое меню, необходимо выбрать местоположение меню на сайте, предусмотренное темой.
Темы WordPress могут отображать меню в разных местах. Каждая тема определяет свои собственные местоположения меню, и вы можете выбрать, какое меню вы хотите отобразить там.
Найдете эту опцию в правом столбце в разделе «Настройки меню». Выберите опцию рядом с настройкой «Показать местоположение» и нажмите кнопку «Сохранить меню».
Теперь перейдите на свой веб-сайт, и посмотрите на выпадающее меню в действии.
Советы по созданию интерактивных выпадающих меню
Навигационные меню важны, потому что это первое место, где ваши пользователи будут искать необходимую им информацию. Правильное меню поможет пользователям ориентироваться на вашем сайте.
Меню также поможет получить больше просмотров страниц, конверсий и продаж на вашем сайте.
Несколько советов о том, как сделать ваши навигационные меню более интерактивными с помощью выпадающих меню:
1. Создайте многоуровневые выпадающие меню
Если сделать ссылку под элементом другой ссылки, она появится в выпадающем меню. Вы также можете добавить подпункт ниже другого подпункта, создав многоуровневые выпадающие меню.
Ваша тема автоматически отобразит их в виде подменю внутри выпадающего меню.
2. Несколько выпадающих меню
Вы можете создать раскрывающийся список под любой верхней ссылкой в вашем меню.
И можете добавить несколько выпадающих меню в главном меню навигации.
3. Меню с предварительным просмотром
Если ваше меню становится слишком сложным, вы можете переключиться на визуальный предварительный просмотр. Перейдите во вкладку Внешний вид »Настройка и запустите настройщик активной темы.
Оттуда, нажмите на вкладку «Меню» и выберите свое меню навигации. Теперь вы увидите редактор перетаскивания в левом столбце с предварительным просмотром вашего сайта в правой панели.
4. Большое Мегаменю в виде выпадающего меню в WordPress
В раскрывающихся меню отображается только один раскрывающийся список за раз. Что если вы хотите показать полную структуру вашего сайта в виде Мегаменю, которое появляется только тогда, когда пользователи наводят курсор на главное меню?
Мега-меню отображаются в виде выпадающего меню, но они могут отображать гораздо больше ссылок, подменю и многое другое.
Надеемся, что эта статья помогла вам разобраться с меню на сайтах WordPress и научила легко создавать выпадающее меню.
Источник: wpbeginner.com
Смотрите также:
Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующий на создание сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/
Руководство по созданию выпадающих списков и меню
Выпадающие меню определенно занимают свое место в веб-дизайне. Однако злоупотребление ими и их неправильное использование запутывают посетителей сайтов и создают проблемы юзабилити. Дизайнеры обращаются к всплывающим меню по разным причинам, в том числе:
Для запуска выбранного действия — командные меню:
Выпадающее меню Microsoft Word с командами публикации, появляющее при нажатии на кнопку «Опубликовать».
Для перемещения пользователей по сайту — навигационные меню:
Гарвард использовал выпадающее меню, чтобы показать подкатегории.
Для того, чтобы пользователь мог выбрать нужный вариант при заполнении формы:
На сайте Sunnyvale.ca.gov в выпадающем списке нужно выбрать тип здания.
Для выбора нужного атрибута из возможных вариантов:
Изначально термины «выпадающее меню» и «выпадающий список» были синонимичны, но со временем между ними появилась разница. Сегодня выпадающими меню называются первые два варианта (навигационные и командные меню), а выпадающие списки обычно используются для заполнения форм и выбора атрибутов.
Кроме того, выпадающие списки обычно отличаются от выпадающих меню: списки сопровождаются стрелкой и содержат подпись или название первой возможной позиции, которое видно еще до разворачивания списка. У MacOS и Windows разные инструменты для реализации выпадающих меню, но в обеих операционных системах командные меню отличаются от меню для выбора атрибутов. Macintosh Human Interface Guidelines даже рекомендует не использовать выпадающие меню для команд.
Читайте также: Юзабилити: раскрывающиеся меню в контексте сложных целевых страниц
Рекомендации по дизайну выпадающих меню и списков
У выпадающих списков и меню определенно есть свои плюсы. Во-первых, этот тип меню не занимает много места на экране. Во-вторых, будучи стандартным (хоть и нелюбимым) виджетом, они знакомы и понятны пользователям. В-третьих, выпадающие списки содержат только допустимые варианты, и поэтому люди делают меньше ошибок при вводе данных.
Несмотря на эти преимущества, веб-юзабилити было бы гораздо лучше, если бы разработчики использовали выпадающие меню реже, чем сейчас. Вот несколько рекомендаций по дизайну выпадающих меню:
1. Избегайте взаимозависимых меню, когда набор вариантов в одном из них меняется, если пользователь выбирает что-то в другом меню. Появляющиеся и исчезающие варианты запутывают пользователей и мешают выбрать нужный вариант, когда он отображается в зависимости от выбора, сделанного в другом виджете.
iTunes: Меню «Вид» содержит разные варианты в зависимости от того, выбрал ли пользователь вариант «Песни» или «Альбомы» в боковом меню «Библиотека».
2. Выделяйте недоступные варианты серым цветом вместо того, чтобы скрывать их. Варианты, которые нельзя выбрать, все равно должны быть видимы: если скрывать неактивные элементы, интерфейс теряет пространственную согласованность и становится сложнее для изучения. А если вы хотите создать действительно замечательный UX, при наведении мыши на недоступный вариант показывайте короткое сообщение с пояснением, почему вариант неактивен и как это исправить.
Snagit: недоступные варианты выделены серым цветом.
3. Очень длинные выпадающие меню, требующие скроллинга, не позволяют сразу увидеть все возможные варианты, а также требуют очень точных движений мыши, чтобы нечаянно не закрыть меню или не выбрать что-нибудь ненужное. Это проявление «закона коррекции» (steering law), гласящего, что время, необходимое пользователю на перемещение указывающего устройства по условному тоннелю, зависит от длины и ширины тоннеля: чем он уже и длиннее, тем больше времени необходимо.
Закон коррекции — это следствие из закона Фиттса (Fitts law).
Не поддавайтесь искушению включить максимум вариантов в каждое меню. Если вариантов много, поищите другие способы их преподнести: например, список обычных ссылок или двухмерное мега-меню, требующее менее сложных движений мыши и позволяющее добраться до нужных пунктов в среднем быстрее, чем линейные меню.
4. Избегайте выпадающих списков в ситуациях, когда напечатать ответ можно быстрее, чем выбрать его в списке. Обычно это касается названий стран и регионов, например при выборе почтового адреса. Гораздо проще напечатать, например, «МО», чем скроллить выпадающий список и выбирать там нужный регион. Свободное заполнение форм с ограниченными вариантами тоже требует подтверждения данных, но с точки зрения юзабилити это, как правило, лучший вариант.
Tinyprints усложнили процесс покупки, лишив пользователей возможности просто набрать одну или две цифры.
5.
Избегайте выпадающих списков для данных, которые хорошо знакомы вашим пользователям. Пользователь отлично помнит, например, дату своего рождения, и выбирать нужные цифры в длинном списке — это нарушение предыдущей рекомендации и просто лишний труд.
Live.com: Чтобы создать аккаунт, пользователь должен ввести дату рождения, выбрав день, месяц и год в выпадающих списках. Просто напечатать эти цифры было бы гораздо проще.
6. Название пунктов или описание должно быть видимо, когда выпадающее меню открыто. Названия меню задают границы и направление, напоминая пользователю, что именно он выбирает. Когда название скрывается или исчезает при разворачивании меню, пользователю приходится вспоминать, что ему надо выбрать, и возникает заминка.
После разворачивания меню The Square прячет заголовок «Выберите сферу деятельности», и пользователю придется его вспоминать, чтобы понять контекст вариантов в меню.
Также не рекомендуется размещать меню в центре или выравнивать по правому краю, потому что меню, выравниваемое по левому краю, проще сканировать.
7. Не прячьте категории верхнего уровня в выпадающие меню.Скрытая навигация способна испортить юзабилити на любом сайте.
На сайте The Joann есть несколько ссылок на категории верхнего уровня, но в основном навигация спрятана в выпадающее меню. Из-за этого варианты навигации гораздо сложнее обнаружить.
8. Поддерживайте ввод с клавиатуры при работе с выпадающими меню и списками. В случае с меню у пользователя должна быть возможность легко выбрать нужный вариант с клавиатуры, а в случае списков — напечатать несколько букв и сразу переключиться на варианты, начинающиеся с них. Такие альтернативы решают некоторые проблемы, связанные с длинными выпадающими списками, а также делают сайт более веб-доступным.
Читайте также: Школа юзабилити: как улучшить навигацию сайта?
Заключение
Когда-то NNgroup провели небольшой пользовательский тест в рамках презентации методов юзабилити.
Завершая регистрацию, участник теста должен был ввести свой адрес, причем для названия улицы было обычное текстовое поле, а для ее типа (улица, переулок, проезд и т.д.) — выпадающий список. Угадайте, что произошло? Пользователь ввел полное название улицы в текстовое поле, потому что всегда так делал, а выпадающий список стал для него сюрпризом. Пользователю пришлось вернуться назад и стереть часть информации в текстовом поле.
Это небольшое исследование показывает, что иногда достаточно протестировать свои формы даже на одном-единственном пользователе. Увидев, что он путается, вы осознаете, что «полезное» выпадающее меню, призванное сэкономить несколько нажатий на клавиши, способно навредить больше, чем помочь. Руководствуйтесь приведенными в этой статье рекомендациями при разработке своего сайта, чтобы улучшить навигацию и юзабилити.
Высоких вам конверсий!
По материалам: nngroup.com.
29-06-2017
Использование для Ссылания на Локализованный Контент
Использование <select> для Ссылания на Локализованный КонтентВопрос
Как лучше использовать выпадающие меню на основе элемента select для направления
посетителей к локализованному контенту?
Поскольку компании и организации запускают все большее количество локализованных сайтов, то растет необходимость в удобной глобальной навигации.
Одним из наиболее популярных является выпадающее меню на главной странице, которое создается с помощью элемента select и включает ссылки
на локализованные версии контента. Такие списки могут использоваться не только на главной странице, но могут также рассматриваться как эффективный способ,
позволяющий пользователям переключаться между переводами или регионально локализованными сайтами на других страницах.
Отметим, что локализованный контент может быть альтернативным сайтом страны, переведенной версии сайта или страницы, и т.д. В этой статье мы не будем обсуждать лучший способ организации информации (т.е. переведенный контент или специфические региональные сайты) для того, чтобы сосредоточиться на плюсах и минусах и не будем обсуждать передовую практику, связанную с использованием списков выбора для выбора контента. Есть множество других аспектов глобальной навигации, которые будут описаны в других статьях.
Должен ли я использовать список
select (выбора) вообще?Выпадающие меню могут быть очень привлекательными, там где много свободного пространства.
Тем не менее, выпадающее меню не всегда является лучшим решением для
глобальной навигации, и вы должны решить, подойдет ли оно для вашего сайта. Следующие пункты помогут.
Главное преимущество использования выпадающего меню — занятие меньшего пространства.
Основные недостатки использования select для ссылок на локализованные страницы или сайты:
пользователи не могут увидеть или получить доступ к ссылкам сразу
трудно найти метку для списка, который используется не для конкретного языка
Пользователи могут не иметь шрифтов для всех вариантов текста и графика не может быть использована вместо текста
Если ваш сайт поддерживает только несколько из локализованных версий, то, наверное, лучше вообще не использовать выпадающее меню и
просто разместить ссылку непосредственно на странице. Это дает большую гибкость в использовании графики для представления иностранного текста, позволяет избежать трудностей
поиска подходящей неязыковой отметки для списка, и позволяет пользователям намного быстрее определять присутствие страницы и ссылки на нее.
Также есть и другие методы. Например, контурные карты могут быть использованы для выбора местных сайтов на основе региона или страны.
Если выпадающее меню содержит ссылки на более чем 20 других сайтов или страниц, вы должны рассмотреть вопрос, удобно ли это для веб-пользователей, которые должны прокручивать список до конца. Если нет, то на домашней странице вы можете поставить ссылку на страницу специального глобального шлюза. Если между локализованными версиями определенных страниц есть взаимные ссылки, то страница выбора не может быть практичным решением.
Лучшие практики
Если вы решите использовать выпадающее меню, вот некоторые рекомендации, которые следует иметь в виду.
Расположение
Размещайте выпадающее меню или в верхней части страницы или близко к ней. Это место очень заметное, и есть повышенная
вероятность того, что посетитель будет видеть его. Проведенные исследования относительно страниц написанных на скриптах, что выравниваются слева направо показывают, что расположение в правом верхнем углу увеличивает
видимость.
Кроме того, все большее число сайтов разместили свои глобальные шлюзы в этом месте, как результат веб пользователи
ожидают их в этом месте.
Конечно, не ставьте список в нижней части страницы, потому что он может не появиться на first screenful (объем информации, видимый на экране одновременно при загрузке страницы без прокрутки) (и имейте в виду, что один screenful может быть различным для разных пользователей — в заложности от расширения экрана).
Обозначение
Создайте графический дизайн в качестве метки для выпадающего меню. Вы не можете ожидать, что веб-пользователи, что не обладают Английским языком поймут «Select language» (выберите язык). Общепризнанные иконки понятны людям, независимо от того, каким языком они общаются. В идеальном мире для этого был бы создан широко известный символ. Хотя то время еще не пришло, похоже, что глобальные иконки, становятся все более популярными.
Например возможная графика может включать глобусы, иконки профилей лиц с линиями, обозначающими речь, буквы с
различных скриптов (в частности, для ссылок на переводы), и т.
д..
Альтернативный текст для такой графики не имеет большого значения. Вы можете подумать, что для доступности он должен быть на всех языках, или же не содержать вообще конкретного языка, но в действительности люди, которые используют программы для чтения с экрана могут перейти к выпадающему тексту для поиска правильной ссылки.
Использование атрибута размера
В некоторых случаях для отражения первого набора опций в списке эффективным может быть использование атрибута size — особенно, если это длинный список. Это говорит пользователю, что это набор
языков/регионов, и может устранить необходимость использования для списка специфических неязыковых меток. Вот пример:
Опции перевода
Переведите меню на целевой язык. Вместо того, чтобы включить в выпадающее
меню ссылки на перевод, например, ссылка «French» будет читаться «français»; и вместо ссылки
на сайт альтернативной страны, например ссылка «Germany» будет читаться «Deutschland».
Обратите внимание на правила капитализации в других языках. Обратите внимание, что правильный перевод «French» — «français» пишется с маленькой буквы ‘f’.
Кодировка
Для отображения смеси таких нелатинских языков, как Арабский, Русский и Японский, вы должны иметь способ представления всех необходимых символов.
Преимущественно вы должны использовать UTF-8 (Unicode) в качестве кодировки для вашей страницы, так как эта кодировка поддерживает все символы, которые вам понадобятся. Если вы не можете использовать UTF-8, то для представления символов, которые не поддерживаются кодировкой вашей страницы, вы должны использовать escapes (экранированные символы).
Шрифты
Вы также должны подумать о том, будет ли читатель иметь шрифты для отображения этого диапазона скриптов. Имейте в виду, что
Веб-пользователи во Франции, например, могут увидеть пустые квадраты вместо текста, написанного на Японском языке, тогда как пользователи в Японии будут видеть текст.
Это потому, что
шрифты, которые доступны в системе Французского пользователя могут не содержать Японских глифов. Можно утверждать, что это не очень важно, так как Французскому пользователю
не нужно уметь читать на Японском языке. С другой стороны, вы можете почувствовать, что пустые квадраты непривлекательны.
Если вы чувствуете, что пустые квадраты некрасивые, то у вас может возникнуть искушение использовать текст в графике для нелатинских вариантов. К сожалению, это не возможно включить графику в сам список выбора, но некоторые сайты добавляют такую графику за пределами выпадающего меню.
Наприклад:
Однако, будьте осторожны, решение вопроса с нелатинским текстом таким образом, по-прежнему может не решить всех проблем. Некоторые акцентированные латинские символы, такие,
как ‘čeština’ могут вызвать такой же эффект для некоторых пользователей, которые имеют латинские шрифты, которые охватывают только Западноевропейские
языки.
Описание
В некоторых случаях можно применить следующие названия языка или страны на родном скрипте/языке, взяв для названия язык текущей страницы.
Например:
čeština (Чешский)français (Французский)
Deutsch (Немецкий)
日本語 (Японский)
Полезно использовать скобки, поскольку они более четко показывают, что это разъяснение.
Такой подход не всегда является необходимым или желательным. С другой стороны пользователи могут чувствовать себя более комфортно при отсутствии глифов шрифта, тогда когда они видят
⬜⬜⬜ (Japanese)Отметим также, что названия на языке текущей страницы должны на самом деле быть переведены для каждой страницы, где они появляются — если вы оставите их на Английском языке, то вы можете получить неправильный результат.
Расположение
Расположение. Также есть вопросы относительно того, как расположить многоязычный список языков или названий стран. Этот
вопрос не является специфическим для списков выбора, и на него нет простого ответа.
Трудно применять расположение в алфавитном порядке, так как это зависит от языка, а кроме того, вероятно, будет еще несколько скриптов. Можно следовать порядку по умолчанию, который установлен алгоритмом сортировки Unicode, но будет ли он полезным, интуитивным или узнаваемым для пользователя это уже другой вопрос.
Другой вариант расположить список по размеру рынка сбыта, размеру области или числа носителей языка, или какому-то географическому принципу. Опять же, в то время как это может предоставить обоснование размещения, ни один из этих подходов не обязательно будет полезным для пользователей — особенно при длинных списках.
This page and Wikipedia list language alternatives by (English) alphabetic order of the associated language tags. So, for example, German (de) comes before English (en), and Spanish (es) comes before French (fr). This assumes that the user can either find his language easily by scanning (which is the case for this page) or knows the tag for their language and can guess easily enough that that has been used for the ordering.
Кстати говоря
Вы не должны использовать автоматическое согласование контента в качестве замены ссылок на странице. Всегда есть смысл предоставить на странице ссылку на тот случай, если что-то пойдет не так, как ожидалось.
Эта статья специально направлена на использование элемента select. Некоторые дизайнеры предпочитают использовать
JavaScript для имитации выпадающих списков. Это может помочь в том, что вы не ограничены текстом; вы можете использовать текст в иллюстрациях, чтобы избежать проблем со шрифтами.
Но, конечно, есть и другие потенциальные проблемы, которые, в свою очередь, связаны уже с использованием JavaScript.
Дополнительные материалы
Проект Common Locale Data Repository (CLDR) Project (для поиска родных версий языков и названий стран)
Ссылки по теме, Разработка HTML & CSS
- Навигация
- Связь с локализованным контентом
145 техник создания меню для сайта CSS и jQuery
CSS меню для начинающих | Демо версия
Креативное меню от Шевчука Антона.
Как пишет сам Антон, меню само по себе не представляет особой сложности но зато очень привлекательно смотрится.
Графическое CSS-меню | Демо версия
Это тот момент когда меню требуется оформить графикой, если требуется использовать не стандартное решение в навигации.
Горизонтальное меню (Solid Block Menu) | Демо версия
Меню с помощью CSS с использованием 2 градиентных картинок. Легко настраивается под любой дизайн.
Создание горизонтального меню | Демо версия
Еще одно похожее на то что выше горизонтальное меню.
Горизонтальное меню | Демо версия
Красивые вертикальные меню – 9 штук скачать | Демо версия
9 красивых вертикальных меню, встроены в одну HTML страницу, для того чтобы узнать код нужного вам меню просто раскройте исходный код.
Кстати все эти меню взяты из программы CSS Tab Designer программа бесплатная поэтому смело можно ее скачать. В программе соответственно выбор этих меню больше есть и горизонтальные и вертикальные.
Красивые горизонтальные меню – 11 штук скачать | Демо версия
Продолжение предыдущего пункта, тоже самое чтобы узнать код раскройте исходный файл.
CSS горизонтальное меню | Демо версия
Простое базовое CSS горизонтальное меню.
41 простых но красивых CSS меню | Демо версия
Styled Menus предоставил 41 простых стильных менюшек для ваших сайтов, за что им большое спасибо, не хотите заморачиваться с кодом и дизайном, возьмите идею отсюда.
Для страховки выложил архив и на SHEBEKO.COM вот ссылка
Стильные горизонтальные CSS навигации | Демо версия
Если у вас есть собственный блог.
Возможно вам подойдет одно из этих красивых горизонтальных меню.
CSS меню с использованием изображений в виде текста | Демо версия
Пример красивого горизонтального меню. Очень стильно даже по-моему.
Анимированное меню | Демо версия
Горизонтальное меню на тот случай если нужна анимация в навигации, задний фон немного притухает при наведении на ссылку.
Hover метод при наведении курсора | Демо версия
Навигация на CSS & jQuery | Демо версия
Стильное навигационное меню с использованием jQuery | Демо версия
Простое jQuery выпадающее меню | Демо версия
Простое выпадающее меню на jQuery | Демо версия
Простой метод выпадающего меню на jQuery. Данный тип меню очень прост, одновременно это хорошее решение для любого интернет портала (магазина)
Выпадающее меню версия 2 | Демо версия
Иногда требуется сделать настолько простую навигацию на сайте, но никак не можешь подобрать технологию, то слишком сложный код, то меню носит платный характер.
Вот вам как и в случае выше выпадающее горизонтальное меню.
Выпадающее меню без Javascript | Демо версия
Источником сего примера являеться полезнейший ресурс CSSPlay.
Выпадающее меню без javascript версия 2 | Демо версия
На CSSplay недавно была опубликована новая версия выпадающего меню без использования javascript. В этой версии никаких хаков, условных комментариев и таблиц для IE6.
Простое вертикальное или горизонтальное меню на CSS | Демо версия
Выпадающее горизонтальное меню | Демо версия
Выпадающее меню XHTML+CSS+jQuery | Демо версия
Классный вариант от Dynamic Drive выпадающего меню с использование эффектов jQuery. Это многоуровневое меню, которое оформлено в виде многоуровневого HTML-списка и преобразованное в полноценное выпадающее меню с использованием чистого CSS и с применением эффектов jQuery.
Выпадающее меню на CSS | Демо версия
Недавно сделал сайт для одной строительной компании, использовал как раз данный тип выподающего меню для их сайта. Просто и со вкусом.
Выпадающее меню на CSS | Демо версия
Александр Шабуневич перевел статью про выпадающие меню на CSS – Suckerfish Dropdowns. Данная статья предназначена для новичков в CSS, желающих научиться делать красивые меню без использования JavaScript, сохраняя при этом чистый код HTML-страниц.
Минималистское выпадающее меню | Демо версия
Меню строится с помощью сочетания css + javascript, противников использования javascript’а для таких нужд не мало, но все же это меню имеет право на свое существование.
CSS Экспресс выпадающее горизонтальное меню | Демо версия
CSS Выпадающее горизонтальное меню | Демо версия
Простое выпадающее горизонтальное меню| Демо версия
Бесплатная сборка из 8 выпадающих CSS меню | Демо версия
Очень красивые и интересные техники навигации, причем используемые на популярнейших ресурсах интернета.
Можно все скачать на SHEBEKO.COM
Flickr горизонтальное меню | Демо версия
Меню уже есть в сборнике выше. Меню с популярного сайта flikr
Простое jQuery выпадающее меню | Демо версия
jQuery & CSS – выпадающее меню | Демо версия
Интересное выпадающее меню, можно применить в разных областях веб-дизайна.
Выпадающее меню с использованием CSS and jQuery | Демо версия
Еще один пример выпадающего меню, в данном примере может служить как выбор какой-нибудь страны.
Выпадающее меню с анимацией jQuery | Демо версия
Отличный вариант для тех кто хочет выделить мало место под навигацию.
Дропдаун, выпадающее меню с эффектами на jQuery | Демо версия
Очень красивая выпадающая навигация от веб технолога. На данный момент эта версия позволяет добавить эффекты slide и fade, как по отдельности так и вместе, для выпадающего списка горизонтальной навигации.
Плагин предназначен для двухуровневой навигации – видимый и вложенный список.
Выпадающее меню на CSS | Демо версия
Выпадающее подменю на CSS и jQuery | Демо версия
Jquery выпадающее меню | Демо версия
Мега горизонтальное выпадающее меню для больших проектов, интернет магазинов и тп. А еще здесь есть перевод урока.
Динамическое 2-х уровневое меню | Демо версия
Оригинальный урок опубликован в статье Pastel color menu with dynamic submenu using CSS. Алексей Ильин немного изменил HTML и CSS код, для того чтобы конечный результат стал более семантически корректным.
Верхняя горизонтальная навигация | Демо версия
Очень стильная горизонтальная система навигации.
2 выпадающих вертикальных CSS меню| Демо версия
Стильные навигации с разными эффектами.
Креативное с движением вертикальное меню | Демо версия
Модное и креативное меню, для ценителей стильных навигаций.
Меню с выпадающими кнопками на Mootools | Демо версия
Меню с выпадающими кнопками, с помощью Mootools. Результат будет выглядеть следующим образом:
Анимированная навигация | Демо версия
Это аналог fancy menu mootools но на jQuery. Навигация с различными эффектами добавляет на ваш сайт немного динамики, что визуально выглядет очень красиво.
Анимированное меню на Mootools | Демо версия
Техника создания анимированного меню, с помощью библиотеки Mootools. По умолчанию внешний вид меню выглядит примерно так:
Перекрывающиеся кнопки в меню | Демо версия
Выглядит просто, но симпатично =)
Jquery горизонтальная слайд навигация | Демо версия
Jquery вертикальное слайд меню | Демо версия
Меню «Гаражные двери» | Демо версия
Очень красивое меню, реализованное при помощи Jquery, сравнимое только с меню реализованными на флеше.
Это меню работает за счет изменения background-position наложенных друг на друга слоями изображений.
Динамичное меню | Демо версия
Способ от Bedrich Rios, по созданию приятного и динамичного меню при помощи JavaScript библиотеки jQuery.
Анимация для меню при помощи спрайтов | Демо версия
Интересная реализация анимированного меню с помощью спрайтов.
Красивое выпадающее меню | Демо версия
Очень красивое решение, при нехватки места на сайте очень помогает, по сути на основе этой JavaScript библиотеки, размером в 10 килобайт, можно реализовать множество оригинальных идей.
3-х уровневое горизонтальное меню (+Видео) | Демо версия
Очень красивое 3-х уровневое выпадающее горизонтальное меню, плюс видео на английском как все это делается =)
Меню в стиле ipod | Демо версия
Сам не знаю где его применить … наверно только сайтам посвященым ipod’ам =)
Lava-Lamp стиль горизонтального меню (+Видео) | Демо версия
Великолепное горизонтальное меню навигации Lava-Lamp стиль, для креативных умов человечества =) и видео как это все делается.
Затемнение кнопок в меню навигации с помощью jQuery | Демо версия
Развижное горизонтальное меню | Демо версия
Просто и креативно, нечего сказать тут, надо просто пробывать данное меню на своем сайте.
Анимационная навигация с помощью CSS и jQuery | Демо версия
Анимационное меню из иконок | Демо версия
Выпадающее горизонтальное меню | Демо версия
JankoAtWarpSpeed сделал красивое меню. Которое можно использовать и доставлять себе удовольствие в использовании такой навигации.
Многоуровневое выпадающее меню | Демо версия
Горизонтальное выпадающее меню | Демо версия
MooTools выпадающее меню | Демо версия
Меню прекрасно подойдет для туристического сайта =)
Деревовидное меню: dTree | Демо версия
Простое выпадающее меню в окне | Демо версия
Красивое MooTools анимационное меню | Демо версия
Играючее меню, мне кажеться красивы будет смотреться на сайте посвященному играм или детям.
Верхнее слайд меню с помощью jQuery | Демо версия
Такие меню очень экономят место на сайте.
Раздвижное JavaScript меню | Демо версия
Стикер навигация | Демо версия
Создание меню при помощи CSS и JavaScript | Демо версия
Многоуровневое меню для сайта CSS | Демо версия
Я думаю это великолепный вариант горизонтального меню для сайта видео или музыкального контента, или новостного ресурса, так как неограниченноое вложенность и неограниченное число колонок.
CSS3 меню | Демо версия
Тут сказать нечего, технология новая =) … пробуйте, экспериментируйте …
Графическое CSS горизонтальное меню | Демо версия
Очень интересная идея подхода в создании данного меню.
CSS горизонтальное меню со спрайтами | Демо версия
Красивое меню отлично подойдет для детского сайта или сайта игрушек.
Горизонтальное меню с описанием | Демо версия
При наведении на ссылку снизу появляется подсказка.
Спрайт горизонтальное меню | Демо версия
CSS горизонтальное меню. Очень стильно выглядит, сам обязательно буду пользоваться и вам советую, лучше сами посмотрите:
Горизонтальное меню | Демо версия
Выпадающее меню | Демо версия
Меню которое очень красиво и не броско смотрится.
CSS вертикальная навигация| Демо версия
При наведении на ссылку появляется стильная подсказка.
Меню из изобразений | Демо версия
Горизонтальное меню с прокруткой и сменой изображений.
Меню на Javascript с использование слайдера | Демо версия
2 меню на выбор, которые если включить фантазию могут способствовать улучшению вашего юзабилити, а тут источник.
CSS вертикальное меню Digg | Демо версия
Вам нравиться дизайн сайта Digg.com?Вы можете позаимствовать технику создания ихнего меню.
Раздвижные ссылки | Демо версия
Секси выпадающее меню на jQuery и CSS | Демо версия
Не знаю почему секси, но выглядит очень красиво.
Анимационная горизонтальная навигация на CSS & jQuery | Демо версия
Меню с иконками на CSS и jQuery | Демо версия
Красивое меню для экономящих место на сайте.
Меню с иконками на CSS и jQuery 2 | Демо версия
Тоже самое что и выше тока с другой стороны =)
Горизонтальное выпадающее меню | Демо версия
Горизонтальное меню на jQuery | Демо версия
Горизонтальное меню в стиле Apple.
Слайд Jquery меню | Демо версия
Очень стильное выпадающее меню, оцените сами.
Анимационное горизонтальное меню | Демо версия
Меню для не традиционного и креативного подхода.
jQuery плагин: Вид дерева | Демо версия
Скролл jQuery меню | Демо версия
Горизонтальное скролл меню на CSS и jQuery
Анимационное выпадающее меню | Демо версия
Супер jQuery меню на CSS3 | Демо версия
Анимационное графическое меню на новом CSS3
MooTools горизонтальное меню | Демо версия
Горизонтальное меню в стиле Макбука
MooTools выпадающее горизонтальное меню | Демо версия
Многоуровневое горизонтальное выпадающее меню.
Создание меню с пояснениями | Демо версия
Меню «Лава лампа» на jQuery | Демо версия
jQuery версия скрипта, впервые написанного на mootools.
Slashdot меню от Dynamic Drive | Демо версия
Выезжающее меню — плагин к jQuery | Демо версия
Очень необычное меню, мне понравилось.
Меню FastFind | Демо версия
Скрипт позволяет создавать вложенные меню, использую при этом AJAX. К нему так же применимо перетаскивание (благодаря Interface для jQuery).
Выезжающее меню | Демо версия
Доступнен вариант с mootools и script.aculo.us.
Разворачивающееся меню | Демо версия
Меню разворачивается при нажатии на ссылку.
Слайд горизонтальная навигация | Демо версия
При нажатии на ссылку выпадает подменю.
jQueryЛист меню | Демо версия
Отличное меню рубрикатор по алфавиту.
Kwicks на jQuery | Демо версия
Красивое раздвижное меню при наведении курсора мыши.
Фиксированное меню | Демо версия
Если вы желаете чтоб ваша навигация была постоянно у посетителя на виду, то этот вариант для вас.
mb.menu | Демо версия
Очень сложное меню и долго грузится, я в нем до сих пор не разобрался, но имеет место быть.
Выпадающее меню | Демо версия
Очень нужный стиль если требуется через элемент формы сделать многоуровневое меню, мне вот этот элемент очень понравился.
Слайд развигающее меню | Демо версия
Увеличениее объекта при наведении | Демо версия
jQuery файловое дерево | Демо версия
Создание фиксированного меню на jQuery и CSS | Демо версия
iPod-стиль меню | Демо версия
jQuery select меню | Демо версия
Красиывй эффект навигации для элемента HTML-select
Красивое слайд меню Mootools | Демо версия
Стильное горизонтальное меню использует jQuery | Демо версия
CSS меню| Демо версия
При наведении курсора выскакивает подменю.
CSS навигация с иконками | Демо версия
Это красивое CSS меню с использование иконок.
CSS Hoverbox | Демо версия
Что то типа меню для сайта комиксов …
Двухуровневое горизонтальное меню на CSS | Демо версия
CSS горизонтальное меню | Демо версия
Outlook навигация | Демо версия
Навигационная панель из Outlooka
Меню на jQuery и CSS3 | Демо версия
CSS3 дизайн меню … пробуйте, экспериментируйте.
Слайд меню на JQuery и CSS | Демо версия
Навигация на CSS и jQuery | Демо версия
Красивый эффект при наведении курсора.
CSS3 и jQuery выпадающее меню | Демо версия
Очень красивое выпадающее горизонтальное меню.
Выезжающее меню с помощью jQuery | Демо версия
Горизонтальное меню | Демо версия
При наведении курсора, ссылка меняется на подменю.
Графическое горизонтальное меню | Демо версия
Красивое анимационное меню, для например сайта по рисованию.
Горизонтальное меню под ваш размер на jQuery | Демо версия
jDiv: jQuery выпадающее меню | Демо версия
Супер меню на jQuery & CSS3 | Демо версия
Очень стильное и красивое меню. Оцените демо:
Fresh вертикальное меню | Демо версия
Стильная и креативная навигация … Фрешшш =)
Спрятанное выпадающее горизонтальное меню на jQuery | Демо версия
Lava Lamp простое меню | Демо версия
Простое но очень красивое меню …
jQuery горизонтальное меню из иконок | Демо версия
Очень красивое горизонтальное меню из иконок, можно использовать на персональных страницах или в профилях.
Вертикальная навигация | Демо версия
Сбоку от ссылки появляется стильная подсказка.
jQuery мега меню| Демо версия
При наведении на ссылку, выпадает большое подменю. Очень красиво смотриться.
Меню на CSS & jQuery | Демо версия
Интересный подход в меню, можно создать с помощью данного плагина небольшой сайт визитку.
Слайд меню на jQuery | Демо версия
Меню с иконками, при наведение меняется иконка и показывается подсказка, красиво смотрится.
Слайд меню | Демо версия
Спрайт горизонтальное меню используется CSS и MooTools | Демо версия
Красивое горизонтальное меню. Подойдет для любого сайта.
Горизонтальное выпадающее меню CSS: особенности, пошаговая инструкция
Меню – это тот элемент, с которым пользователь встречается при входе на сайт и видит его, перемещаясь по страницам.
Главное меню располагается в шапке сайта, а дополнительное – в нижнем блоке страницы. Там содержится полезная или второстепенная информация, которая для удобства часто оформляется в виде меню. Зачастую на всех страницах сайта используется одинаковое оформление навигационного элемента.
Когда какие-то пункты содержат дополнительные разделы, создается несколько уровней. Это работает так: при наведении мыши на одну из секций появляется дополнительный список с подразделами. При разработке необходимо позаботиться, чтобы при просмотре страницы на маленьких экранах появлялось адаптивное меню вместо обычного.
HTML-разметка
Перед тем, как сверстать адаптивное выпадающее меню на CSS, нужно создать скелет. Задается с помощью языка разметки HTML и находится в файле с расширением .html. Начинается с <!DOCTYPE>, затем обозначается начало и конец документа тегами <html> и </html> соответственно. Внутри документа задается тег head, где указывается мета-информация о сайте:
- заголовок документа;
- краткое описание;
- кодировка;
- файлы со стилями и скриптами.
После закрывающегося тега </head> следует тело документа, оформленное как <body>. Здесь находятся логические блоки сайта, они интерпретируются браузером и выводятся на экран в виде визуальных элементов.
Базовая разметка обычно состоит из тегов ul и li. Это семантически верное оформление, которое связано с тем, что при просмотре в браузерах, которые не поддерживают CSS, анализатор контента правильно опознает этот блок. Хотя использование стандартных div-ов также широко распространено.
Простая разметка меню без скрытых элементов и выпадающего меню на CSS выглядит таким образом:
<ul>
<li><a>Главная</a></li>
<li><a>История</a></li>
<li><a>О нас 3</a></li>
<li><a>Контакты 3</a></li>
</ul>
В теге <a> указываются ссылки на страницы, а во всех остальных – используемые селекторы.
Базовые стили
Следующим шагом создания выпадающего меню на HTML и CSS является создание каскадной таблицы стилей.
Они хранятся в файле с расширением .css, где описывается внешний вид документа и различные визуальные эффекты. Здесь задаются цвета, шрифты, расположение блоков и других аспектов внешнего вида веб-страницы.
То, что здесь будет находиться, зависит исключительно от дизайна. Есть несколько основных моментов, которые следует разобрать. Поскольку создается меню, маркеры списка не должны отображаться. Они убираются с помощью атрибута list-style: none. Немаловажной частью является устранение подчеркивания ссылок. Для этого селекторы, которые отвечают за оформления тега <a>, должны содержать text-decoration: none.
Необходимо назначить действия при наведении мыши на кнопки. Для чего используется псевдокласс :hover? Используя его, пользователь видит, как меняется цвет пунктов или появляется выпадающий список меню на HTML CSS. Для скрытия некоторых элементов применяется display: none, а для появления – display: block или display: inline.
Горизонтальное размещение через float
После базового оформления пользователь заметит, что полученная структура – это вертикальное меню с выпадающим списком на HTML CSS.
Для некоторых сайтов приемлемо расположение вертикального меню, но, как правило, используется горизонтальное.
Теперь нужно разместить все элементы в ряд. В этом случае будет использовано свойство float, отвечающее за обтекание. Сначала оно использовалось исключительно для того, чтобы управлять расположением текста относительно изображения. Таким образом, можно задать левостороннее или правостороннее выравнивание, отменить обтекание текста или назначить наследование значения родителя.
Горизонтальное размещение через inline-block
По умолчанию блоки, которые задаются тегом div, выравниваются по вертикали. Ширина каждого занимает всю страницу, а при создании сестринского элемента он будет следовать вниз, начиная от предыдущего.
Когда нужно скрыть, используется display: none. Это понадобится для появления скрытых частей меню при наведении курсора мыши. Важно отметить, что блок не просто становится прозрачным, – видимые части сайта занимают его место.
Чтобы разместить дивы горизонтально друг за другом, необходимо использовать свойство inline или inline-block.
Что касается последнего, его применение имеет больше преимуществ, ведь содержит свойства как строчного элемента, так и блочного.
Свойство display используется для div-ов и тегов li списка ul.
Таким образом, чтобы создать горизонтальное выпадающее меню на HTML CSS в файле стилей в селекторах li или div, указывается атрибут display со значением inline-block.
Создание выпадающих элементов
Выпадающие элементы изначально не видны на странице, они имеют свойство display: none. Позже none меняется на block или inline-block. Это происходит при клике на один из пунктов меню или во время наведения мыши. Для создания этого эффекта и связанных анимационных переходов, используется CSS.
Должно выглядеть примерно так:
#menu ul li {
position:absolute;
display: none;
}
#menu li:hover ul {
display:inline-block;
}
Следует обратить внимание на атрибут position, с помощью которого устанавливается позиционирование элемента. Блок div при заданном значении absolute отображается над другими блоками.
А отсчет координат начинается от левого верхнего края родительского элемента. В данном случае родителем считается document. Это нужно изменить и сделать родителем #menu, задать position: relative. Теперь в #menu ul нужно указать координаты left и top, чтобы выпадающий список появлялся прямо под основным пунктом и не перекрывал его.
Если рядом находится несколько абсолютных блоков, надо использовать свойство z-index. При рассмотрении двух дивов с абсолютным позиционированием, когда один находится поверх другого, z-index первого должен иметь значение выше, чем у второго.
Адаптивность
Ни один сайт не может считаться хорошим, если он неправильно отображается на мобильных устройствах и планшетах. Смысл создания адаптивных страниц в том, чтобы изменить оформление при достижении определенного размера экрана. Для этого используется ключевое слово @media. В значениях указывается тип носителя, максимальный или минимальный размер экрана.
Чтобы работать с этим атрибутом, нужно задать начальную ширину блока на большом экране свойством max-width: 100%.
Уменьшая экран, происходят изменения с блоком:
@media (min-width: 768px) {
.container-small {
//меняем ширину пунктов меню, выводим иконку гамбургера
}
Эта иконка меню играет важную роль в создании адаптивного многоуровневого выпадающего горизонтального меню на CSS. Представляет собой три находящихся параллельно друг другу горизонтальные линии. Когда пользователь нажимает на них, появляются скрытые части альтернативного меню.
Использование Bootstrap
С появлением фреймворка Bootstrap верстальщикам стало намного легче создавать адаптивные элементы и строить сайт. Он позволяет прототипировать идеи с помощью готовых компонентов и мощных плагинов. Для использования базовых возможностей нужно включить скомпилированные стили Bootstrap из CDN в head сайта. Должно выглядеть так:
<link rel=»stylesheet» href=»https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css» integrity=»sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4″ crossorigin=»anonymous»>
Для создания горизонтального меню с выпадающим списком на CSS используется компонент Navbar.
Его нужно скопировать с официального сайта. По умолчанию он имеет два режима отображения: десктопный и мобильный.
Теперь осталось добавить оформление, чтобы выглядело так, как того требует дизайн.
Другой способ создания адаптивных элементов – использование Grid системы. Ее отличие от Bootstrap в том, что можно указать любое количество колонок и сделать их разной ширины.
UberMenu
Сегодня разработано огромное количество плагинов, которые освобождают от собственноручного написания кода. Верстальщику необходимо подключить соответствующие файлы, внести изменения в функционал.
UberMenu – это горизонтальное меню с выпадающим списком HTML CSS, разработанное под движок WordPress. Его возможности:
- адаптивность;
- выпадающее меню;
- поддержка сенсора;
- работа из коробки;
- гибкие настройки;
- большой список анимационных переходов;
- наличие фильтров сортировок;
- автоматическая интеграция в любую тему WordPress.
Есть бесплатная и платная версия с полным функционалом стоимостью 19 долларов.
Удобство использования готовых плагинов для создания выпадающее меню на CSS в том, что все браузеры будут одинаково отображать содержимое веб-страницы. Есть одна неприятная особенность – UberMenu не умеет работать с браузером IE6. Но это не страшно, ведь сегодня среда распространения «Интернет Эксплорера» составляет менее 1%.
Max Mega Menu
«Макс Мега Меню» – это отличное решение для создания выпадающего меню на CSS. Оно поддерживает возможность расположения меню в хедере и футере. С ним легко работать, он поддерживает функцию drag-and-drop. Все, что необходимо сделать для размещения кнопок меню, – мышью перенести соответствующие элементы на выбранное место.
Можно назначить любые способы, чтобы появилось скрытое субменю: навести курсор мыши на элемент или кликнув по нему. Существует много анимационных эффектов: постепенное исчезание, появление, выезжание.
Этот плагин достаточно легкий, файл javascript весит менее 2 килобайт.
При создании можно использовать встроенные шрифты, иконки. Если появляются проблемы с использованием, можно ознакомиться с соответствующими мануалами.
Для начала работы достаточно добавить его в список плагинов WP.
JQuery Accordion Menu Widget
Для создания выпадающее меню на CSS можно использовать плагин JQuery Accordion Menu Widget. Он доступен для скачивания из репозитория WordPress или с официального сайта. Работает с последними версиями CMS, совместим с другими плагинами.
С его помощью можно создавать вертикальное меню. Он поддерживает стандартные функции аналогичных инструментов, но есть особенные дополнения. Например, при развертывании субменю, если за 1 секунду не было совершено никаких действий, оно самостоятельно возвращается к исходному состоянию. Другая интересная функция представляет собой отключение родительских ссылок, когда активны дочерние. Это означает, что при появившемся подменю нет возможности нажать на пункты основного.
При самостоятельном создании меню пользователь встречал ситуацию, когда элементы сразу реагируют даже при случайном наведении мыши или щелчке.
Чтобы избежать такого неудобства, встроена задержка hover delay. Другая полезная функция – управление скоростью появления и скрытия подменю.
Заключение
Важно создать выпадающее меню на CSS для простого и удобного взаимодействия между пользователем и интерфейсом веб-страницы. Чтобы решить задачу необходимо грамотно разработать дизайн, сверстать базовые элементы, оформить стили, доработать анимационные эффекты.
Можно воспользоваться готовыми вариантами, если не предусмотрены какие-то уникальные дизайнерские решения. Плагины легко подключаются к странице, их очень просто править в соответствии с требованиями.
Если есть смысл разрабатывать меню с нуля, конечно, это необходимо делать самостоятельно. При работе с фреймворками используются готовые компоненты, они сразу адаптивны. Отсутствие необходимости подстройки верстки под маленькие экраны сильно экономит время.
Десять примеров выпадающих меню на веб-сайтах
Поиск правильного стиля меню для вашей организации
15 июня 2020 г.
Дизайн
В наш век цифровых технологий ваш веб-сайт является визитной карточкой вашей организации. Он передает ваш бренд с помощью цветов, шрифтов и изображений, а также раскрывает ваш подход в тоне каждого фрагмента контента. Многие часто забывают, что навигация по вашему сайту также играет важную роль в определении вашего присутствия в Интернете.
Элементы сайта, такие как навигационные панели, меню и выпадающие списки, служат основной цели: предвосхищать потребности пользователей и направлять посетителей сайта к интересующему их содержимому. Но помимо своей функциональности элементы навигации предлагают пространство для дальнейшего уточнения онлайн-бренд.
Когда дело доходит до выпадающих меню, существует бесконечное количество возможностей для структуры и дизайна. Для дизайна веб-сайта B2B может потребоваться надежное меню для отображения множества параметров, в то время как для дизайна местного некоммерческого веб-сайта лучше использовать что-то более простое и минимальное.
В любом случае добавление изображений, шрифтов и цветов в раскрывающиеся списки развивает сильное чувство идентичности и делает все возможное, чтобы превзойти ожидания посетителей.
В этом посте мы рассмотрим десять примеров выпадающих меню, в которых используется широкий спектр функций и стилей. Многие из них — это меню, которые мы создали для наших клиентов, а другие — отличные примеры, с которыми мы столкнулись в Интернете. Вы можете перейти к конкретным примерам ниже:
Многоуровневые выпадающие меню
1. RTI
2. Быстроногие ноги
3. UNC Kenan Flagler
Минимальные выпадающие меню
Women International
4. Moishe21 House 5.0 Медиа Фонд
Vertical Navigation Examples
6. UNC Campus Recreation
7. Converse
Image-Based Dropdown Menus
8. MiracleFeet
9. Santa Cruz Bicycles
10. Helias Oils
1. RTI
First up — это Research Triangle Institute (RTI), сайт, который мы создали для международной некоммерческой организации, занимающейся научными исследованиями.
На сайте RTI огромное количество контента, поэтому им нужно было меню, которое упростило бы посетителям поиск и доступ ко всем их важным страницам.
Мы достигли этого с помощью интерактивных раскрывающихся списков, включающих вкладки третьего уровня. Это означает, что в каждом раскрывающемся списке также представлены более узкие категории, вложенные под основной список. Параметры третьего уровня облегчают посетителям сайта прямой переход к интересующим их страницам.
2. Fleet Feet
Fleet Feet — специализированный ритейлер, на веб-сайте которого есть большая платформа электронной коммерции. Когда мы собирали сайт, имело смысл использовать мегаменю для разделения различных категорий розничной торговли. Мегаменю — это раскрывающийся список во всю ширину экрана, в котором на одной панели отображается множество параметров. Для сайта с большим количеством категорий это более удобная альтернатива отдельному раскрывающемуся списку для каждой области контента.
На сайте Fleet Feet посетители могут щелкнуть вкладки «Снаряжение», «Мужчины» или «Женщины», чтобы увидеть мегаману, указывающую на страницы просмотра ассортимента связанных предметов.
3. Kenan Flagler
Для Кенана Флаглера, бизнес-школы UNC-Chapel Hill, мы разработали уникальный стиль выпадающего списка, который показывает вложенные элементы, не требуя от посетителя наведения или повторного щелчка. В этом формате параметры второго уровня просто располагаются с отступом под их родительской категорией. Видимое вложение гарантирует, что посетители сайта не пропустят страницы, которые охватывают важные подтемы.
4. Мойше Хаус
Отойдя от мегаменю и многоуровневых стилей, мы отдали предпочтение простоте при работе над сайтом Мойше Хаус. Moishe House — это некоммерческая организация, которая способствует целенаправленному проживанию еврейской молодежи в общинах. Эстетика сайта, как правило, современная и чистая, поэтому мы использовали гладкие черные выпадающие списки, чтобы обеспечить организацию, не конкурируя с остальным дизайном.
В соответствии с игривым стилем сайта выпадающее меню динамически скользит и отступает от панели навигации при наведении на него курсора посетителя.
5. Международный женский медиафонд
Как и в Moishe House, мы использовали минималистичный современный дизайн при создании раскрывающихся списков для Международного женского медиафонда (IWMF). IWMF — это неправительственная организация, которая обучает и поддерживает женщин-журналистов по всему миру. У них есть ряд программ и основных проблем, поэтому простые выпадающие списки были идеальным способом представить свою информацию без каких-либо помех.
Забавные дополнительные детали включают красную подчеркивание и оранжевую подсветку, которые появляются при наведении курсора на пункты меню. Цвета — это тонкий способ, которым меню строится на бренде и стиле организации.
6. UNC Campus Recreation
UNC Campus Recreation (еще один клиент NMC!) смешивает его с помощью вертикального меню.
Для них это имеет смысл, потому что самый верх страницы занимает стандартная панель навигации UNC. В меню боковой панели щелчок по каждому значку плюса открывает раскрывающийся список, в котором отображаются связанные внутренние страницы.
7. Converse
На веб-сайте Converse используется верхняя навигационная панель с большими меню для большей вертикальности. Эта комбинация эффективна, потому что позволяет бренду предлагать множество различных вариантов, не перегружая посетителя сайта.
Нам очень нравится этот пример, потому что в нем умело используется анимация, чтобы оживить текст. Анимация тонкая, но она добавляет индивидуальности, которая говорит о творческом духе бренда.
8. MiracleFeet
Недавно мы запустили совершенно новый сайт MiracleFeet, международной некоммерческой организации, которая занимается лечением детей с косолапостью. MiracleFeet использует мегаменю, похожее на то, что мы создали для Fleet Feet, но каждое раскрывающееся меню также включает в себя избранное изображение, показывающее некоммерческую организацию в действии.
Сайт насыщен визуальными элементами, поэтому выпадающие изображения соответствуют бренду.
Если вам интересно узнать больше о проекте, ознакомьтесь с нашим примером из практики на новом веб-сайте MiracleFeet.
9. Велосипеды Santa Cruz
Велосипеды Santa Cruz делают еще один шаг вперед благодаря меню, полностью основанному на изображениях продуктов и технических характеристиках. Для велосипедной компании это отличный подход. В то же время изображения облегчают просмотр и поиск определенного элемента. Нам также нравится, как другие выпадающие списки используют изображения, чтобы добавить интереса к таким категориям, как Gear и Wheels.
10. Helias Oils
Helias — это розничный продавец эфирных масел, чья домашняя страница была представлена в нашем блоге «Тенденции веб-дизайна 2020» из-за использования анимации. Как и домашняя страница, выпадающее меню Helias уникально, потому что оно демонстрирует изображения и движения. Нам нравится, как в раскрывающемся списке четко отображается название и упаковка каждого продукта, а также то, как при наведении на изображения появляется характерная волновая анимация компании.
Заключение
Как видите, выпадающие меню могут быть чем-то большим, чем утилитарным. Они могут быть забавными, серьезными, визуальными, минималистичными — или любой их комбинацией, которая отражает потребности организации и посетителей ее сайта. Не каждый стиль подходит для каждого проекта, но независимо от того, являетесь ли вы юридической фирмой с богатым содержанием или энергичным стартапом, мы будем рады работать вместе, чтобы найти раскрывающееся меню, которое подходит именно вам. Не стесняйтесь, напишите нам!
По Sophie Worthy
Когда они работают и когда они не работают
Выпадающее меню (иногда называемое раскрывающимся меню или списком) — это графический элемент управления, предназначенный для помощи посетителям в поиске определенных страниц или функций на вашем веб-сайте.
Щелчок или наведение курсора мыши на заголовок меню верхнего уровня предлагает раскрывающийся список опций. Затем пользователь переходит к тому, который ему нужен, если только плохо спроектированная структура меню или функциональность не делают его слишком сложным для него.
Неудивительно, что многие раскрывающиеся списки сложны в использовании. Это может привести к разочарованию пользователей, что может привести к высокому уровню отказов. Потенциальные клиенты, которые в противном случае могли бы стать вашими клиентами, возьмут свой бизнес в другом месте.
Давайте рассмотрим некоторые плюсы и минусы раскрывающихся меню, а также некоторые жизнеспособные альтернативы навигации по веб-сайту.
Почему мы иногда не любим раскрывающиеся меню
Большой процент раскрывающихся меню имеет плохой дизайн, что делает их раздражающими, запутанными и малофункциональными для посетителей вашего сайта. Они сложны и трудны для чтения или понимания.
Наиболее сложными являются меню, разработанные с функцией наведения. Это означает, что когда пользователь наводит курсор на определенный пункт меню, этот пункт расширяется для отображения подкатегорий. Однако, если вы потеряете, так сказать, наведение, меню исчезнет, и вам придется начинать все сначала.
Если в раскрывающемся списке есть несколько пунктов меню, некоторые экраны не позволяют пользователю видеть все параметры. Пользователь может попытаться расположить строку меню в самом верху экрана, чтобы все раскрывающиеся списки были видны после щелчка. Или они могут просто перейти к конкуренту, у которого более удобная схема навигации по веб-сайту.
Еще одним недостатком этого формата навигации является то, что он редко хорошо переводится на мобильные платформы. И поскольку большинство посетителей вашего сайта, вероятно, уже находят вас с помощью смартфона или планшета, это большой недостаток.
Google тоже не самый большой поклонник выпадающих меню. На самом деле, поисковым роботам Google может быть сложно их правильно проиндексировать. Это может повредить вам в результатах поисковой системы — в некоторых случаях значительно, в зависимости от того, как была закодирована (запрограммирована) навигация по вашему сайту.
Когда раскрывающиеся меню *Делают* работают хорошо
Если они правильно разработаны, эти инструменты навигации могут быть эффективными для доставки посетителей сайта туда, куда они хотят.
Они также занимают очень мало драгоценного пространства «вверху страницы» или той части сайта, которую посетитель может видеть на своем экране без прокрутки.
Если у вас ограниченное количество параметров, особенно если у вас не более одного уровня параметров меню, этот подход может работать хорошо, даже если вы используете функцию наведения. Вы также можете улучшить удобство использования наведения, если отложите его деактивацию. Другими словами, позвольте меню оставаться на дисплее в течение нескольких секунд, даже если указатель мыши пользователя отклоняется.
Если вы сделаете раскрывающиеся меню кликабельными, вы потенциально повысите удобство посетителей вашего сайта, если только они не смогут понять, как заставить меню исчезнуть после того, как они щелкнули по нему.
Убедитесь, что стиль и размер шрифта чистые и читаемые, а цвета фона достаточно отличаются от цветов шрифта. Также позаботьтесь о том, чтобы у пользователя не возникало задержек после нажатия или наведения курсора.
В противном случае они могут щелкнуть слишком много раз в неправильных местах и оказаться там, куда никогда не хотели идти, и это заставит их убежать с вашего сайта.
Сосредоточьтесь на чистоте, простоте и функциональности при использовании раскрывающихся меню. Если вы не можете достичь этих целей, рассмотрите возможность использования альтернативного формата навигации.
Что можно использовать вместо раскрывающегося меню?
Меню боковой панели когда-то были любимцем навигации по веб-сайтам. Но поскольку вертикальный формат монополизировал от одной четверти до одной трети страницы, веб-дизайнеры массово отказывались от него в пользу менее навязчивых и сложных в использовании горизонтальных вариантов. Некоторые из ваших любимых социальных сетей (а именно, Twitter и Facebook) до сих пор успешно используют боковые меню.
Если вы не хотите, чтобы меню боковой панели нарушало внешний вид вашего сайта, вы можете рассмотреть возможность использования сворачиваемого или всплывающего меню боковой панели.
Один из вариантов, популярность которого растет с каждым днем, известен как панели прокрутки. Эта схема навигации основана на расширенной домашней странице, которую пользователь прокручивает вниз, чтобы найти нужные параметры. Это хорошо работает, если у вас ограниченное количество навигационных целей, и почти без проблем переводится на мобильные платформы. Панели прокрутки лучше всего подходят для традиционных предприятий сферы услуг, таких как рестораны и парикмахерские.
Пожалуй, самая мощная и универсальная альтернатива — карточная навигация. Этот стиль навигации можно адаптировать к большинству видов бизнеса. Он также очень хорошо переводится на мобильные устройства. Поскольку сегодня многие сайты используют карты для навигации, эта архитектура навигации стала знакома большинству пользователей Интернета.
Лучший вариант для вашего сайта будет зависеть от вашей бизнес-модели и структуры сайта. Например, если у вас есть большой сайт электронной коммерции, вы можете извлечь выгоду из мегаменю.
Однако, если ваше мегаменю не спроектировано должным образом, оно может раздражать вас так же сильно, как любое раскрывающееся меню.
Какое это имеет значение?
Раскрывающиеся меню являются важным компонентом навигации по веб-сайту, а навигация по веб-сайту — основным компонентом взаимодействия с пользователем (UX). На любом сайте, если UX не очень хорош, вы потеряете бизнес — потенциально много. Однако хороший UX может увеличить конверсию на 200 процентов.
Интернет стал важной частью повседневной жизни большинства людей, включая ваших потенциальных клиентов и клиентов. Привычки просмотра, исследования, общения и покупок в Интернете являются практически второй натурой, почти как включение света или воды.
Если вы входите в чей-то дом или гостиницу, вы знаете, как включить свет и запустить воду, даже если вы никогда не были там раньше. Теперь представьте, что вы заходите в одно из таких мест и не можете найти выключатель или не можете понять, как включить горячую воду.
Когда потенциальный клиент впервые попадает на ваш сайт, крайне важно, чтобы он сразу понял, как включить воду и свет — так сказать.
Это суть пользовательского опыта. Плохой UX приведет к тому, что потенциальный клиент убежит к вашему следующему конкуренту с интуитивно понятным и удобным сайтом. И поскольку схема навигации является якорем UX, наличие интуитивно понятных и удобных меню имеет решающее значение.
Если вы похожи на большинство владельцев бизнеса, возможно, вы не знаете, как лучше всего разработать хороший UX, и в этом вам может помочь эксперт по онлайн-маркетингу. В Be Locally SEO отличная архитектура и дизайн веб-сайта — это лишь часть того, что мы делаем, но эти элементы имеют решающее значение для ваших общих усилий в области онлайн-маркетинга.
Вы можете потратить весь свой маркетинговый бюджет на поисковую оптимизацию (SEO), поисковый маркетинг (SEM) и контент-маркетинг с целью увеличения посещаемости вашего веб-сайта. Но весь трафик в мире не принесет никакой пользы, если посетители не смогут найти то, что им нужно, попав на ваш сайт.
Веб-дизайнеры компании Be Locally SEO знают, как создать наиболее удобную для пользователя структуру сайта, которая побуждает посетителей оставаться на сайте и помогает им в принятии крайне важного решения о покупке. Свяжитесь с нами сегодня, чтобы узнать больше о том, как мы можем помочь вам — используя выпадающие меню или нет — создать оптимальный UX для ваших потенциальных клиентов и клиентов.
Дизайн выпадающего списка: полное руководство
Мы используем файлы cookie, чтобы обеспечить максимальное удобство пользования нашим веб-сайтом. Для получения дополнительной информации нажмите здесь. Понятно
Дизайн выпадающего списка может улучшить или испортить пользовательский опыт вашего веб-сайта или приложения. Узнайте, как сделать их лучшими в этом руководстве!
Все любят простые и эффективные формы, настройки и опросы, не так ли? Ведь они всего лишь средство для достижения цели. Можно с уверенностью сказать, что большинство людей не делают это для развлечения (ну, может быть, UX-специалисты), поэтому идея состоит в том, чтобы сделать их как можно более безболезненными.
Создавайте и прототипируйте веб-приложения и мобильные приложения с Justinmind бесплатно. Неограниченное количество проектов!
Среди многих других важных элементов пользовательского интерфейса, которые облегчают жизнь пользователя, выпадающие списки выделяются среди самых ярких. Почему? Потому что они автоматизируют процесс — пользователи выбирают ответ из раскрывающегося списка и вуаля — поле заполнено!
Однако, как и во многих других вещах в жизни, выпадающие списки следует использовать умеренно и в подходящем сценарии. При разработке веб-формы или опроса с помощью инструмента прототипирования, такого как Justinmind, вам нужно знать, как обеспечить максимальное удобство использования. Не волнуйтесь — мы рассказали об этом в этом посте!
- Что такое элемент раскрывающегося списка?
- Дизайн раскрывающегося списка по сравнению с другими элементами пользовательского интерфейса
- Когда использовать раскрывающийся список с множественным выбором
- Дизайн раскрывающегося списка для веб-сайтов
- 5 вдохновляющих дизайнов раскрывающихся списков для веб-сайтов
- Разработка раскрывающихся списков для мобильных приложений
Что такое элемент раскрывающегося списка?
Так что же такое выпадающий список? Чтобы ответить на этот вопрос, важно провести различие между выпадающим списком и выпадающим меню!
Выпадающие меню предназначены для навигации по веб-сайту или приложению.
Они часто предоставляют пользователю варианты навигации, когда он наводит указатель мыши на элемент меню. Вот несколько отличных примеров выпадающих меню!
С другой стороны, раскрывающийся список больше предназначен для того, чтобы пользователи могли выбирать настройки параметров или вводимые данные через сворачиваемый список. Обычно они обозначаются полем с заполнителем, за которым следует стрелка, указывающая вниз, однако это не всегда так.
Вероятно, вы используете раскрывающиеся списки для настройки параметров на своем компьютере или когда выбираете адрес для отправки посылки Amazon. Или, возможно, это что-то более сложное, например, выбор диапазона бюджета в форме веб-приложения для консультационной услуги.
Основная причина появления выпадающих списков в дизайне пользовательского интерфейса заключается в том, что они должны облегчить жизнь пользователю. Однако, как и все остальное, если вы не применяете их должным образом, они могут иметь неприятные последствия.
Выпадающие списки облегчают жизнь (иногда)
Выпадающие списки, если их правильно использовать, могут иметь много преимуществ. Наиболее очевидным является то, что они могут помочь вам сэкономить пространство экрана в пользовательском интерфейсе, сгруппировав похожие параметры или варианты ввода в сворачиваемом поле. Они также являются отличными инструментами для фильтрации данных в таблицах и списках!
Дополнительные преимущества, которые прототипирование раскрывающихся списков может принести вашему пользовательскому интерфейсу, включают упрощение работы пользователя, экономию времени на обдумывание или ввод ответов. Кроме того, они могут сократить время, затрачиваемое на проверку внутренних данных при заполнении форм. Это потому, что пользователи просто выбирают из списка предварительно выбранных ответов.
Аналогично, рассмотрите стоматологическую хирургию для сладкоежек. У них есть ряд слотов для встреч, доступных для клиентов. На их веб-сайте вместо того, чтобы позволить клиенту войти в интересующее его время только для того, чтобы получить сообщение об ошибке, сообщающее ему, что его предпочтительный слот недоступен, пользователь может просто выбрать из списка предлагаемых доступных слотов в раскрывающемся списке.
Однако элементы раскрывающегося списка не всегда подходят. Они, как правило, чрезмерно используются по всем направлениям, и часто даже с приложениями и веб-сайтами, которые имеют многолетний опыт работы. Иногда есть лучшие альтернативы выпадающему списку. Ключом к правильному использованию выпадающих списков является знание того, когда это уместно и когда использовать другие элементы пользовательского интерфейса.
Дизайн раскрывающегося списка по сравнению с другими элементами пользовательского интерфейса
Мы также покажем вам несколько альтернатив, чтобы вы не переусердствовали с раскрывающимся списком. И не волнуйтесь — это часто случается с некоторыми из самых известных брендов и организаций!
Это ни в коем случае не ошибка новичка, на самом деле, мы могли бы даже считать это изящным искусством — знать, как использовать элемент раскрывающегося списка с уважением, знать, когда его использовать и как использовать его с изяществом.
Тумблеры
Тумблеры — отличный способ предотвратить чрезмерное использование раскрывающихся списков, поскольку они помогают отображать два параметра настроек одновременно.
Представьте себе следующий сценарий, в котором вы хотите, чтобы пользователь выбирал светлый или темный режим для пользовательского интерфейса. Выпадающий список может не иметь особого смысла.
Мы могли бы также принять во внимание, что для светлого и темного сценария тумблер буквально будет похож на включение или выключение выключателя света, и, следовательно, может быть более интуитивным.
Радиокнопки
Теперь предположим, что вы хотите, чтобы пользователь выбирал, является ли он «мужчиной», «женщиной» или «предпочитает не указывать». Для этого можно использовать элемент раскрывающегося списка. Но будет ли это лучшим вариантом здесь? Это может быть, если у вас ограниченное пространство на экране.
Однако, если позволяет место, для пользователя может быть более целесообразным использовать переключатели, когда пользователь может выбрать одну кнопку, чтобы другие автоматически отключались. Они не могут быть одновременно «Женщина» и «Предпочитаю не указывать».
Это было бы просто странно!
Средства выбора даты и времени
Создавайте и прототипируйте веб-приложения и мобильные приложения с помощью Justinmind бесплатно. Неограниченное количество проектов!
Флажки
В качестве альтернативы, если вам нужно, чтобы пользователь указал ряд применимых к нему параметров, например, состоит ли он в браке, не женат, имеет детей, живет с родителями или живет один, вы можете решить, что лучше используйте флажки.
Для такого типа ответа с множественным выбором может быть предпочтительнее, если позволяет место, чтобы пользователь мог просмотреть все варианты одним взглядом.
Теперь давайте перейдем к знаменитой головоломке — и многие компании и организации совершают эту ошибку — правильному выбору времени и даты. В большинстве случаев средства выбора даты, представленные в виде элемента календаря, на самом деле имеют больше смысла, чем прокрутка месяцев и дней.
Оптимальным решением может быть предоставление раскрывающегося списка для года, а затем использование календаря для месяца и дня.
Тем не менее, когда дело доходит до чего-то вроде даты рождения, пользователи обычно имеют соответствующие нажатия клавиш для этих типов дат, хорошо встроенные в их память мышц пальцев. В этом случае лучше позволить пользователю вводить день, месяц и год.
Дайте пользователю возможность печатать, когда это легко запомнить, например дату рождения или номер мобильного телефона.
Панели поиска
В других случаях может быть лучше предоставить панель поиска, если то, что они ищут, относительно просто. Когда пользователю легче что-то напечатать, может быть лучше позволить ему просто напечатать это — это избавит его от необходимости щелкать раскрывающийся элемент и прокручивать длинный список, просматривая все варианты.
Однако, если это что-то, что, вероятно, потребует проверки данных, то, возможно, лучше использовать дизайн раскрывающегося списка. Таким образом, вы обеспечиваете целостность данных, которые пользователь всегда будет вводить.
СОВЕТ Чтобы получить бонусные UX-очки, попробуйте создать панель с интеллектуальным поиском!
Степперы
Степперы отлично заменяют, когда пользователю просто нужно установить процент масштабирования страницы, яркость экрана или ввести количество заказа. Поля раскрывающегося списка в этих сценариях могут быть излишне широкими и занимать больше места на экране.
В случаях, упомянутых выше, степперы также могут быть более интуитивными — кнопки «плюс» и «минус» просто указывают на увеличение или уменьшение значения.
Когда использовать раскрывающийся список с множественным выбором
Во многих случаях лучше использовать раскрывающийся список с множественным выбором. Например, если вы хотите, чтобы пользователь мог выбрать несколько ответов на вопрос, но в пользовательском интерфейсе также мало места. Вы можете столкнуться с этой дилеммой при разработке опроса или анкеты, для которых дизайн раскрывающегося списка с множественным выбором был бы оптимальным решением.
Еще один сценарий может быть, например, когда вы хотите предоставить пользователю привилегию выбирать, какие элементы он хочет отображать на странице.
Возьмем типичный редактор WordPress, где вы можете выбрать, какие параметры управления вы хотите видеть. Или программное обеспечение ERP для управления бизнесом или веб-приложение, в котором вы хотите, чтобы пользователь выбирал то, что отображается на его панели инструментов в любой момент, но не имеет места на экране для выделения списка флажков.
Создавайте и прототипируйте веб-приложения и мобильные приложения с помощью Justinmind бесплатно. Неограниченное количество проектов!
Дизайн выпадающего списка для веб-сайтов
Выпадающие списки имеют свои плюсы и минусы, а также свое место в веб-дизайне пользовательского интерфейса. Давайте посмотрим, как мы можем наилучшим образом использовать этот практичный элемент дизайна, чтобы обеспечить наилучшее взаимодействие с пользователем.
При разработке раскрывающихся списков для веб-сайтов или веб-приложений необходимо заранее учесть несколько моментов. Представьте, что вы не уверены, использовать ли дизайн выпадающего списка или некоторые из элементов выше.
Ответ прост. Сколько места вы хотите сэкономить, и будет ли это за счет более высокой стоимости взаимодействия? В конце концов, важен пользовательский опыт. Если использование большего пространства означает лучшее удобство использования, вы можете предпочесть один из альтернативных элементов, упомянутых выше.
Сколько вариантов включить в раскрывающийся список?
Если, согласно проведенному вами пользовательскому тестированию, удобство использования не пострадает, выпадающий список может помочь вам сэкономить место. Общее эмпирическое правило, которому нужно следовать, заключается в том, что если у вас есть более пяти раскрывающихся списков, то выпадающий список может быть подходящим способом. Список будет казаться менее пугающим в сворачиваемом поле.
Более 10, и вы рискуете сделать его слишком длинным.
Следует любой ценой избегать длинных выпадающих списков, так как пользователи не смогут сразу увидеть все варианты выбора. Это может привести к потере очков в мире UX, поскольку пользователь будет усерднее работать, чтобы найти то, что он ищет.
Длинные выпадающие списки также заставляют пользователя больше работать над движениями мыши, чтобы случайно не свернуть список. Боль в запястье — это последнее, что вы хотите причинить своим пользователям!
Недоступные опции и сообщения об ошибках
Что делать с недоступными опциями? NNG в своих раскрывающихся рекомендациях предлагает затенить недоступные параметры, а не удалять их. Нажатие на опцию, которая ничего не делает, может сбить пользователя с толку и заставить его подумать, что сайт или приложение не работает или что это может быть проблема с его мышью!
Вы также должны использовать технику затемнения вместо удаления параметров. Удерживая эти параметры в поле зрения, вы гарантируете, что все имеет смысл для пользователя и даете им контекст.
Другая идея состоит в том, чтобы использовать быстрое всплывающее сообщение, которое появляется всякий раз, когда пользователь наводит курсор на опцию, которая была выделена серым цветом, и объясняет, почему опция была отключена и как и возможно ли это исправить, чтобы она снова стала доступной. .
Когда лучше печатать?
Когда дело доходит до поисковых запросов на сайте, NNG считает, что может быть лучше позволить пользователю ввести свой запрос в строку поиска, а не выбирать из раскрывающегося списка, когда речь идет о потенциально длинных списках элементов, таких как состояния в США или странах. Хотя это может потребовать дополнительной проверки серверной части, если это обеспечивает лучшее удобство использования, оно того стоит.
Создавайте и прототипируйте веб-приложения и мобильные приложения с помощью Justinmind бесплатно. Неограниченное количество проектов!
5 вдохновляющих дизайнов выпадающих списков
1.
House of FraserВсемирно известный интернет-магазин House of Fraser — отличный пример того, как в электронной торговле одеждой можно использовать выпадающие списки для максимального удобства использования преимущества.
Они используют выпадающий список в нужном месте — чтобы пользователи могли выбрать размер обуви и одежды. Они используют степперы, чтобы помочь им указать количество. Целесообразным является использование выпадающего списка для размеров обуви — перечисление различных доступных размеров заняло бы много места на экране, выглядело бы беспорядочно, и пользователю было бы трудно его просмотреть.
Ввод размеров также может быть неуместным, так как клиент или пользователь могут быть склонны к ошибкам при вводе, что сделает их заказ неполным или недействительным. Их кстати пользователь может просто выбрать из складного списка из тех размеров, которые доступны и написаны в соответствующем формате размеров.
2. Leadformly
Leadformly помогает своим клиентам создавать формы для веб-сайтов и приложений, которые должны иметь высокие показатели успеха и завершения.
Поэтому правильно, что мы обращаем особое внимание на то, как они построили форму заказа.
И, конечно же, наше внимание особенно привлекает использование выпадающего списка, позволяющего пользователям выбирать, сколько потенциальных клиентов они хотят генерировать в месяц. Выпадающий список для этой цели был отличным выбором, потому что вместо того, чтобы позволить пользователям вводить произвольные числа в качестве ответов, которые затем потребовали бы сортировки, вместо этого они выбирают заранее назначенное количество потенциальных клиентов, что делает работу бэкэнда намного более эффективной.
3. UX Passion
UX Passion — еще один пример веб-сайта, который понимает правильное применение дизайна выпадающего списка.
Для вопросов, которые могут быть автоматизированы и не позволяют пользователю печатать без необходимости, они предоставили два раскрывающихся списка ответов на два вопроса: для предлагаемого бюджета пользователя и для их даты начала.
Вместо того, чтобы вводить невозможные даты начала (например, через пять минут), пользователи должны выбирать из списка возможных дат начала. А когда дело доходит до бюджетов, клиенты должны выбирать из предопределенных количеств, как в приведенном выше примере, что упрощает категоризацию и сортировку данных, а также автоматизацию после того, как пользователь отправит свою информацию.
Умное планирование, но меньшего и не приходится ожидать от домена под названием UX Passion!
4. Broker Notes
Broker Notes — это веб-сайт, предназначенный для помощи трейдерам и инвесторам в поиске надежного брокера. Но что больше всего интересует Justinmind, так это их контактная форма, а точнее, их дизайн выпадающего списка!
Их выпадающий список оптимизирован для брокеров, которые хотят попасть в список и имеют различные вопросы, которые они хотели бы задать людям, стоящим за брокерскими заметками.
Как оказалось, задавать вопросы здесь легко.
Пользователь просто выбирает одну из пяти ситуаций, отмеченных в этом раскрывающемся списке, например «Я брокер и хочу разместить рекламу на заметках брокера», после чего он может перейти к следующей странице вопросов, соответствующих этой ситуации. Полная автоматизация — вот что такое дизайн выпадающего списка!
5. Venture Harbour
Venture Harbour — отличный пример веб-сайта, форма выпадающего списка которого идеально подходит. И они должны это делать — их работа заключается в создании новых онлайн-предприятий, требующих, чтобы их формы были точными. Фактически, Leadformly выше является одним из их предприятий.
Чтобы подписаться на их информационный бюллетень, в их форме есть два выпадающих списка: один для выбора вашей должности, а другой для того, где вы работаете. Это позволяет им адаптировать контент, который вы получаете, но также может быть направлено на полезное исследование того, кто является их аудиторией.
Кроме того, тот факт, что они используют два выпадающих списка, означает, что их форма подписки занимает всего три поля и может быть на главной странице.
Эффективный способ извлечь выгоду из пространства!
Создавайте и прототипируйте веб-приложения и мобильные приложения с Justinmind бесплатно. Неограниченное количество проектов!
Разработка раскрывающихся списков для мобильных приложений
Если вы разрабатываете мобильное приложение, то в большинстве сценариев вы вряд ли будете использовать раскрывающиеся списки. Это связано с тем, что, несмотря на то, что пространство на мобильных телефонах и планшетах еще более ограничено, сворачиваемые выпадающие списки обычно занимают слишком много места на экране, особенно если они имеют много вариантов. Это также может затруднить навигацию по мобильному интерфейсу.
Если вы разрабатываете элемент раскрывающегося списка для мобильного пользовательского интерфейса, убедитесь, что пользователю легко и интуитивно понятно открывать и закрывать его. Также должно быть легко прокручивать список пальцем. iOS обходит это, используя встроенные списки прокрутки и поля со списком в нижней части пользовательского интерфейса.
Как и в веб-дизайне, используйте выпадающий список только тогда, когда невозможно отобразить группу ответов или вариантов на одном экране. Наконец, вам нужно убедиться, что все параметры в раскрывающемся списке легко сканируются.
Кроме того, еще один способ сделать выпадающие списки более интуитивно понятными и естественными в дизайне мобильных приложений — добавить ощущение возвышенности, особенно если вы разрабатываете для Android. Материальный дизайн гласит, что любой элемент списка или меню должен отображаться перед другими фиксированными элементами пользовательского интерфейса. Для достижения наилучших результатов используйте легкое затенение, чтобы придать приподнятый вид!
Когда дело доходит до высоты выпадающего меню на устройствах Android, убедитесь, что выпадающие списки никогда не длиннее U. Material Design предлагает оставлять пространство на одну строку выше и ниже раскрывающегося списка.
Дизайн выпадающих списков — главный вывод
Короче говоря, выпадающие списки работают, когда речь идет об увеличении площади экрана для работы, а также помогают автоматизировать определенные процессы для пользователей, например заполнение форм и опросов, а также изменение настроек, намного эффективнее.
Однако это не всегда так, и то, что вы определили возможность использования раскрывающегося списка в дизайне пользовательского интерфейса, не означает, что вы должны это делать. Всегда помните о пользователе, когда думаете о том, что было бы проще. Если пользователю проще что-то напечатать — дайте ему такую возможность!
Наконец, всегда проверяйте дизайн выпадающего списка на своих пользователях, чтобы убедиться, что они обеспечивают наилучшие возможности. Если нет, рассмотрите некоторые из альтернативных элементов пользовательского интерфейса, перечисленных в этом посте.
ПРОТОТИП · СООБЩЕНИЕ · ПОДТВЕРЖДЕНИЕ
УНИВЕРСАЛЬНЫЙ ИНСТРУМЕНТ ПРОТОТИПИРОВАНИЯ ДЛЯ ВЕБ И МОБИЛЬНЫХ ПРИЛОЖЕНИЙ
Скачать бесплатно
Джозеф Даунс
Штатный копирайтер UX, гурман и любитель классических автомобилей
20 веб-сайтов с креативным дизайном раскрывающегося меню
Сегодня мы выбрали 20 веб-сайтов с креативным дизайном раскрывающегося меню и крутым макетом.
Вы не увидите, как выглядят выпадающие меню во всех предварительных просмотрах, поэтому отправляйтесь прямо на веб-сайты и ознакомьтесь с дизайном целиком!
Мы также выбрали несколько прототипов раскрывающихся меню, созданных очень талантливыми дизайнерами Dribbble. Вы можете найти пять из них в конце этого списка.
Если вы хотите научиться кодировать выпадающие меню самостоятельно, вы должны знать, что это обычно делается с помощью jQuery. Первым шагом является построение концепции в Photoshop, затем размещение основных элементов HTML, стилизация всего в CSS и, наконец, связывание всего этого с помощью нескольких строк jQuery для создания семантического, доступного и деградируемого дизайна меню.
Вы обязательно вдохновитесь нашим выбором и сами создадите потрясающие меню. Некоторые из этих дизайнов раскрывающихся меню очень просты и ясны, в то время как другие имеют уникальные элементы и являются более сложными.
Какие из них вам нравятся больше всего и почему? Дайте нам знать в разделе комментариев ниже.
П.С. Если вам нужно больше вдохновения для дизайна веб-навигации, ознакомьтесь с этими веб-дизайнами с всплывающими меню навигации и дизайнами веб-сайтов с необычными навигационными меню.
Ben Sherman
Pin
Строка меню Ben Sherman определенно вдохновит вас, особенно если вы предпочитаете минималистичный дизайн. Это отличный пример простого и понятного выпадающего меню, которое можно интегрировать во все виды веб-проектов.
American Eagle
PIN-код
Раскрывающееся меню American Eagle также имеет минималистский дизайн, но оно намного сложнее, чем в предыдущем примере, потому что открывает больше категорий. Этот пример можно использовать для магазинов, и он может быть очень полезен, потому что все продукты разделены на более мелкие категории, что облегчает покупателям поиск того, что они ищут.
Пивоварение Mayflower
Пин-код
Красная выпадающая строка меню.
Mayflower Brewing имеет простое меню с 6 категориями. Если вы наведете указатель мыши на каждую из них, вы заметите, что подкатегории имеют более темный оттенок красного и похожий дизайн, в котором используется тот же шрифт, что и в меню.
Hampton Bays
Пин-код
Это еще один пример сложной, но аккуратной строки меню. В этом раскрывающемся меню также используется угловая графика, что делает его уникальным и привлекательным для посетителей. Все хорошо организовано в строке меню, что упрощает просмотр и поиск того, что вам нужно.
Redbrickhealth
Пин-код
Это аккуратное и понятное раскрывающееся меню, которое можно интегрировать во все виды веб-проектов. Вы можете легко просматривать и находить то, что вам нужно с помощью этого меню.
Carreras con Futuro
Pin
Это красочная выпадающая строка меню. Каждая категория имеет свой собственный плоский значок, и фон становится розовым при наведении курсора на каждую категорию.
Это очень креативный пример строки меню.
Callaway Golf
Контакт
Веб-сайт Gallaway Golf имеет элегантную выпадающую строку меню. Он имеет простой и чистый дизайн и расположен рядом с логотипом. Будет отлично смотреться на чистых, минималистичных дизайнах.
Bon Look
Pin
Bon Look — еще один отличный пример веб-сайта с творческим выпадающим меню. Проверьте это и убедитесь, что в каждой подкатегории также есть изображение для предварительного просмотра, которое помогает покупателю найти именно то, что ему нужно. Это также отличный способ непрямого продвижения вашей продукции.
Converse
Булавка
У Converse есть очень красочное слайд-шоу своей продукции. Строка меню выглядит как простая и тонкая черная горизонтальная полоса с белым шрифтом. Каждая родительская категория имеет несколько подкатегорий, которые весьма полезны на веб-сайтах электронной коммерции.
Гернси Уотер
Это еще один креативный пример выпадающего меню.
Тонкая горизонтальная полоса с иконками для каждой категории и простое серое выпадающее меню с большим количеством подкатегорий.
Полевая школа Куалоа
Пин-код
Меню Полевой школы Куалоа также аккуратное и имеет современный дизайн. На этом веб-сайте в заголовке используется большое горизонтальное изображение с крупным шрифтом и логотипом, за которым следует строка раскрывающегося меню.
Puma
PIN-код
Puma — еще один пример хорошо организованного веб-сайта с классной выпадающей строкой меню. Он выглядит как горизонтальная полоса, которая представляет каждую подкатегорию, такую как рекомендуемые, новые поступления и т. д., но также добавляет что-то, что отличает этот пример от предыдущих, связанные изображения с различными коллекциями, распродажами и специальными предложениями. Это действительно интересный дизайн раскрывающегося меню, идеально подходящий для крупных веб-сайтов, работающих в нише моды.
Reaching Quiet
Пин-код
Reaching Quiet имеет минималистичный дизайн на всем пути от верхней строки раскрывающегося меню до нижнего колонтитула страницы.
Каждая подкатегория представлена белыми рядами с черными рамками, которые прекрасно продолжают концепцию дизайна этого сайта. Все элегантно оформлено, и у вас может сложиться впечатление, что этот веб-сайт имеет черно-белый макет, но вы обнаружите, что на самом деле он довольно красочный.
Хелми-Берн
Штифт
На веб-сайте Helmy-Bern есть темное, но аккуратное раскрывающееся меню, которое может быть именно тем, что вы искали. Он имеет современный и функциональный дизайн, который легко интегрируется во всевозможные веб-проекты. Это меню очень хорошо разработано и оформлено, и оно может стать отличной отправной точкой для других замечательных дизайнов. Пусть это будет вашим вдохновением для темных выпадающих меню!
Santa Cruz
Pin
Выпадающее меню Santa Cruz также весьма креативно и дает посетителям небольшое представление о том, что они собираются увидеть в этом магазине. Идеально подходит как для крупных, так и для небольших интернет-магазинов.
Пин-код
Это выпадающее меню имеет уникальный дизайн, основанный на угловой графике и синей палитре. В каждой категории подменю используется градиентный фон с белой типографикой. В целом, этот пример выглядит великолепно и очень креативно.
PinЭто выпадающее меню — еще один креативный пример. Это меню намного прозрачнее, чем предыдущие примеры, потому что в этом случае большую роль играет фон. Будет отлично смотреться как на веб-сайтах, так и в приложениях.
Контакт
BH — элегантное выпадающее меню, идеально подходящее для винного магазина. Если вы работаете над похожим проектом, то этот пример может вам очень пригодиться.
Pin
Это выпадающее меню также имеет прозрачность. Он имеет темный фон, использует белую типографику и большие значки. Это может очень хорошо работать на веб-сайте интернет-магазина.
Пин-код
Это раскрывающееся меню было разработано для сайта электронной коммерции модной одежды. Меню корзины — это то, что делает этот пример интересным и заслуживающим внимания в будущих проектах.
Вы всегда можете проверить товары, добавленные в корзину, не покидая страницу. Каждый товар имеет свою миниатюру фото, название и цену.
Лучший шаблон UX для навигации по сайту с выпадающими меню
исследования пользователей, UX Design
Содержание
- Часть 1: Тестовая установка
- Часть 2: Результат
- Часть 3: Большие выводы
- Часть 4: Состояние выпадающей навигации в Интернете… и проблемы
- Часть 5. Что делать с мобильными устройствами
- Часть 6. Не забывайте о доступности
- Часть 7: Заключение исследования
Что делать с мобильными устройствамиЧасть 1
Тестовая установка
Здесь, в ExpandTheRoom, мы постоянно разрабатываем и переосмысливаем информационные архитектуры и схемы навигации по веб-сайтам для наших клиентов. В этих проектах необходимо решать множество различных моделей и уникальных задач. Эти проблемы часто становятся намного сложнее, чем вы думаете на поверхностном уровне. Часто возникает вопрос: «Как правильно работать с выпадающими меню?» Это кажется простым, но есть много разных способов принять это решение — должен ли быть кликабельным верхний элемент навигации или только метка? Если она кликабельна, мы повторяем ссылку в выпадающем меню или показываем ее только вверху? А как насчет взаимодействия с выпадающим списком? Должен ли он срабатывать при наведении или при нажатии? Что мы делаем для мобильных устройств? Что насчет доступности?
При поиске ответов в Интернете я не нашел ответа.
Казалось, что все ведущие веб-сайты в разных отраслях работают по-разному. Любые статьи, посвященные этой теме, не были настолько глубокими, как мне хотелось бы, и в основном полагались на расплывчатые «лучшие практики», которые различались между статьями. Я хотел данных , которые давали ответ раз и навсегда, поэтому я провел исследование сам.
В этой статье я поделюсь результатами исследования юзабилити, в ходе которого было протестировано несколько разных итераций прототипа навигации, а также обзором популярных веб-сайтов и шаблонов, которые они используют. Для проведения исследования я создал прототип навигации в Figma и протестировал его с помощью инструмента Useberry. Я набирала участников из рекрутинговой службы Prolific. Я рад сообщить, что, по моему мнению, результаты дают нам некоторые окончательные ответы на истинные рекомендации по использованию выпадающих меню в навигации.
Во-первых, давайте пройдемся по разным вариантам, которые я решил протестировать.
Все они используют простой прототип каркаса для вымышленного веб-сайта фитнес-клуба. В каждом прототипе использовалась одна и та же навигация по элементам управления с небольшими переменными между ними. Я позаботился о том, чтобы навигация и задачи, которые необходимо выполнить участникам, были довольно простыми, чтобы никого не запутать.
Эти четыре задания были заданы каждому участнику в случайном порядке. Два вопроса нацелены на элемент верхнего уровня/обзора, а два вопроса нацелены на элементы вспомогательной навигации.
- Куда бы вы щелкнули, чтобы узнать больше об этом тренажерном зале и его предыстории?
- Ответ: О программе (в версии 3 это называлось «Обзор»)
- Где бы вы щелкнули, чтобы прочитать о том, чем отличается этот тренажерный зал, и о преимуществах участия в нем?
- Ответ: О программе → Почему выбирают Panda Gym
- Где бы вы щелкнули, чтобы узнать о программах под руководством инструктора, на которые вы можете записаться?
- Ответ: Классы (в версии 3 это называлось «Обзор»)
- Где бы вы щелкнули, чтобы узнать о программах пилатеса в тренажерном зале?
- Ответ: Занятия → Пилатес
Я хотел протестировать три основных элемента:
- Что происходит, когда кто-то щелкает верхний элемент (или метку, вызывающую открытие раскрывающегося списка)?
- Что происходит, когда кто-то наводит курсор на верхний элемент?
- Полезно ли иметь какую-то страницу «обзора», которая ссылается на верхний элемент в раскрывающемся списке?
Я уже встречал комбинации каждой из этих навигационных схем и хотел выяснить, какая из них будет работать лучше всего.
Благодаря Useberry я смог заставить участников пройти исследование без модерации, что позволило сэкономить время и деньги. Я все еще мог смотреть сеансы позже, чтобы детально проанализировать их движения мыши и щелчки. Я набрал по 50 участников для каждой версии теста, и мы с коллегами наблюдали и анализировали каждую сессию.
| Нажмите на верхний пункт | , парящий на верхнем элементе | Обзор страницы | ||||||||||||||||||||||||||||||||||||||||||||||||||||
| Версия 1 | Opens Menu | . страница | Открытие меню | Да — описательный | ||||||||||||||||||||||||||||||||||||||||||||||||||
| Версия 3 | Переход на страницу | Открытие меню | Нет | |||||||||||||||||||||||||||||||||||||||||||||||||||
| ничего не делает | Opens Menu | Да -Дискриптива | ||||||||||||||||||||||||||||||||||||||||||||||||||||
| Версия 5 | НИЧЕГО | . : щелкает ли участник верхний элемент, когда он неактивен (версии 1, 4 и 5)? Когда присутствуют и верхняя ссылка, и обзорная страница, что участники используют чаще (версия 2)? Какая версия в конечном итоге имеет самое быстрое время выполнения задачи? Есть ли «щелчки ярости» крайнего разочарования? (Яростный щелчок — это поведение, при котором пользователь лихорадочно щелкает одну и ту же ссылку снова и снова из-за разочарования. ) Что касается страницы обзора, мне также было любопытно, влияет ли более описательный ярлык на понимание, например, повторение «Узнайте о нас». вместо чего-то более общего, такого как «Обзор», поэтому я также сделал версию, чтобы проверить это.Часть 2 ИсходСначала я поделюсь общими результатами тестов, а затем перейду к некоторым пикантным выводам и их последствиям.
Как видите, многие средние значения общего времени задач оказались очень близкими, но версия 3 явно заняла наибольшее количество времени. Часть 3 Большие выводыВот краткое изложение моих основных выводов из этих данных:
В разных версиях участники быстро изучили шаблоны взаимодействия, и время выполнения задачи резко сократилось. Просматривая все записи отдельных сеансов, я быстро распознал закономерность во всех версиях, независимо от порядка выполнения задач. В первом задании у участников было более медленное время выполнения, поскольку они сориентировались и разобрались с навигацией. Некоторые открывали несколько меню в поисках ответа. Затем большинство пролетели над следующими тремя задачами. Они изучили уникальный интерфейс этого дизайна. Интернет-пользователи делают это постоянно. Поиск информации — это концепция, описывающая, как люди находят информацию в Интернете. Пытаясь найти место для информации, которую ищут пользователи, они могут открывать выпадающие меню, чтобы заглянуть в то, что находится внутри них, прежде чем принимать решение о том, куда перемещаться. Из-за этого я рекомендую открывать выпадающие меню навигации при наведении, а не при щелчке. При таком подходе необходимо учитывать последствия как для мобильного дизайна, так и для специальных возможностей, которые я объясню в конце этой статьи. В версии 2, где участники могли получить доступ к странице либо по верхней ссылке, либо по обзорной ссылке, большинство участников выбирали обзорную ссылку. Предоставление нескольких способов выполнения задачи или поиска информации является полезным принципом удобства использования. Это также принцип доступности. Пока разные методы не противоречат друг другу, несколько путей могут повысить находимость и помочь пользователям с разными ментальными моделями выполнить задачу. По этой причине я рекомендую сделать верхнюю ссылку кликабельной, а также предоставить обзорную страницу, которая ведет к той же информации, чтобы можно было использовать оба этих метода. Отсутствие ссылки на обзор вызвало недоумение и разочарование.Имеются веские доказательства того, почему версия 3, в которой верхняя ссылка была кликабельной, но не было обзорной ссылки, показала наихудшие результаты с точки зрения среднего времени выполнения. Отсутствие ссылки на обзор явно вызвало замешательство и разочарование у некоторых пользователей, что значительно увеличило время их завершения. Как мы видели в предыдущем выводе, лишь горстка участников догадалась щелкнуть верхнюю ссылку, поэтому, когда это стало единственным вариантом, его было легко не заметить. Из первого вывода мы узнали, что пользователи научились обнаруживать и адаптироваться к различным шаблонам, поэтому большинство из них в конце концов поняли, как использовать верхнюю ссылку в этой версии, но только после того, как немного потрудились, что, конечно же, мы хотим избегать. В версии 3 я насчитал 11 из 50 пользователей, которые каким-то образом сбились с толку — неоднократно пропускали правильный ответ и щелкали везде, иногда пробуя одну и ту же ссылку несколько раз. Чем больше описательных меток, тем лучше. Результаты последних двух версий, будь то более описательная метка («Все классы») или более общая метка («Обзор») были размытыми — они обе получили примерно одинаковые оценки. Но я думаю, что на этот раз я действительно буду полагаться на лучшие практики, чтобы диктовать подход. Больше контекста даст пользователям более сильный «информационный нюх». Часть 4 Состояние выпадающей навигации в Интернете… и проблемыВ дополнение к данным, которые мы собрали об участниках, использующих наши версии прототипов, мы также собрали данные о том, что делают 100 самых популярных веб-сайтов в Интернете с раскрывающимися навигациями. Результаты были довольно шокирующими. Часть некоторых данных, собранных на 100 самых популярных веб-сайтах в сети. Как и следовало ожидать, каждый из различных шаблонов, которые мы тестировали (и некоторые из которых мы не тестировали), обнаружился на этих веб-сайтах, подтверждая нашу гипотезу о том, что нет реальный консенсус в отношении того, что лучше всего использовать шаблон.
 Некоммерческий Международный женский фонд имеет интерактивную верхнюю ссылку, которая ведет на страницу «О нас». Если бы вы не знали, что это кликабельно, вы бы упустили ключевую информацию об организации. Мне нравится, как Barnes and Noble обрабатывают ссылку «Обзор» — верхний элемент «Художественная литература» кликабельный, но они повторяют ссылку в заметном месте в раскрывающемся списке. Другим плохим дизайнерским решением, которое мы видели на разных сайтах, было несоответствие стилей, из-за которого было трудно определить, где есть выпадающий список, а где кликабельно. В дизайне важно убедиться, что ваши интерактивные элементы обозначают, как с ними можно взаимодействовать, и что уникальные взаимодействия имеют уникальные обозначения. Примером этого является то, что элемент навигации с раскрывающимся меню часто имеет стрелку вниз. Консистенция снова играет роль здесь. Если все верхние элементы элементов имеют одинаковое взаимодействие и одинаковый стиль, как в приведенном выше примере Barnes и Noble, все в порядке. Это вызывает разочарование у пользователей и мешает им изучить шаблон вашего конкретного веб-сайта, когда каждая ссылка может выполнять что-то другое. Вот почему важно четко различать взаимодействия или избегать разных типов взаимодействий, когда они не нужны. Часть 5 Что делать с мобильным телефоном «Наведите курсор, чтобы открыть раскрывающийся список» и «щелкните верхний элемент, чтобы перейти непосредственно на обзорную страницу» могут иметь смысл на настольных компьютерах, но они быстро разваливаются для мобильных устройств, где пространство для навигации ограничено и наведение курсора невозможно. Чтобы создать оптимальное мобильное взаимодействие, вам понадобятся некоторые правила взаимодействия только с мобильными устройствами. Мне нравится, как это делает Barnes and Noble. Меню начинается с того, что содержится в меню гамбургера или значке, состоящем из 3 горизонтальных линий, сложенных друг на друга. Это стало стандартным индикатором мобильной навигации, но для обеспечения доступности я по-прежнему рекомендую иметь метку «Меню» для сопровождения значка. Когда меню открыто, верхние элементы отображаются вертикально в стопке. При нажатии на верхний элемент больше не происходит прямой переход на страницу, вместо этого открывается раскрывающийся список в виде подменю. В раскрывающемся списке пользователь по-прежнему может выбрать обзорную ссылку, чтобы перейти на главную страницу элемента. Это еще одна причина, по которой необходимо повторять верхнюю ссылку в выпадающем меню. В примере с International Women’s Media Foundation, , нажав на верхний элемент в своем мобильном меню, переходят непосредственно на страницу, фактически делая все элементы раскрывающегося списка полностью недоступными на мобильных устройствах. Часть 6 Не забывайте о специальных возможностяхСделать Интернет доступным для всех очень важно, но о нем часто забывают, поэтому я хотел уделить некоторое время разговору о том, как обеспечить доступность рекомендуемого нами шаблона навигации. Это означает несколько вещей:
Когда верхний элемент также является ссылкой, он не может одновременно выполнять роль ссылки, ведущей на страницу, и кнопки, открывающей раскрывающийся список. По этой причине я рекомендую, чтобы элементом, запускающим открытие и закрытие раскрывающегося списка, была стрелка рядом с элементом верхнего уровня. Убедитесь, что у стрелки есть кнопка роли, и к ней применены упомянутые выше атрибуты арии. Часть 7 Заключение исследованияПодводя итог исследования, какой UX-шаблон лучше всего подходит для навигации по сайту с выпадающими меню? Я считаю, что данные указывают на то, что ответ относится к версии 2. Навигация с помощью раскрывающихся меню должна сделать верхнюю ссылку доступной для клика, а затем повторить эту ссылку как описательную ссылку в раскрывающемся меню, чтобы ее не пропустили аудитории с различными ментальными моделями. паутина. Для мобильных устройств, когда наведение больше недоступно, сделайте так, чтобы верхний элемент открывал только меню и полагался на обзорную ссылку в подменю, чтобы перейти на страницу верхнего элемента. Убедитесь, что стили уникальны для разных типов взаимодействия, и рассмотрите возможность использования стрелок, чтобы указать, когда раскрывающийся список существует в целях доступности. Я надеюсь, что эта статья дала вам некоторую ясность. Конечно, как и во многих других вещах в мире UX, правильный ответ — «это зависит», и некоторые веб-сайты могут требовать уникальной навигации, отличной от этого решения. —– Керрин Уиппл — дизайнер пользовательского интерфейса и исследователь в ExpandTheRoom, агентстве по дизайну и разработке, занимающемся созданием высокоэффективных цифровых продуктов в различных отраслях, включая финансы, страхование, спорт, развлечения, путешествия и потребительские товары. Победа с UX Research: руководство ETR по успеху цифрового продукта Вы запускаете новый веб-сайт, ваш первый крупный проект в качестве вице-президента по маркетингу. Сайт запускается и зависает. Трафик начинает снижаться. Как проверить доступность в Интернете с помощью программы чтения с экрана и клавиатурыОбратите внимание, ниже приведена расшифровка видео выше, адаптированная для чтения. Вы можете получить доступ к прямой стенограмме, используя функцию субтитров в видеоплеере. В ExpandTheRoom мы часто помогаем проводить аудит веб-сайтов наших клиентов на предмет их соответствия требованиям WCAG, то есть рекомендациям по обеспечению доступности веб-контента. В этих рекомендациях изложены методы обеспечения доступности Керрин УипплAllWebsite DesignCustomer storiesCovid-19AllSocial-mediaDomainsConvertingBloggingEcommerceSeo-reportingDesignWhat’s New Website DesignCustomer storiesCovid-19AllSocial-mediaDomainsConvertingBloggingEcommerceSeo-reportingDesignWhat’s New May 6, 2020 We are рады объявить о выпуске выпадающих меню в качестве стандартной функции Rocketspark на всех планах. Уже более десяти лет мы пропагандируем важность ясного и простого пути посетителя веб-сайта — такого опыта, который не оставит посетителя в замешательстве или перегрузке. При неправильном использовании выпадающие меню могут действительно идти вразрез с этим и привести к огромным лабиринтам структуры веб-сайта, и поэтому мы направили людей к альтернативам. Со временем наш взгляд на выпадающие меню немного потеплел — мы начали видеть примеры удачных выпадающих меню. Простое выпадающее меню, используемое экономно для определенной цели, может иметь свое место. Это также был один из наших самых больших запросов на добавление функций за все время, поэтому мы понимаем, что владельцам бизнеса и дизайнерам нравится возможность добавлять раскрывающийся список или два. Счастливые клиенты равны большему количеству запросов или продаж. Когда навигация по вашему сайту сделана хорошо, у вас больше шансов добиться успеха в Интернете. Хорошая навигация не только позволяет вашим зрителям наслаждаться путешествием по вашему веб-сайту, но и в первую очередь влияет на количество посетителей, которые попадают на ваш сайт. Что такое выпадающее меню?Выпадающие меню часто используются в разделе главного меню веб-сайта, который обычно расположен в верхней или иногда в левой части окна браузера. Это вторичное меню в родительском меню (например, в главном меню), которое появляется, когда вы наводите указатель мыши на один из элементов родительского меню. Его можно использовать для отображения связанных страниц, которые можно сгруппировать по родительской теме, чтобы облегчить поиск более конкретного контента для людей, которые в нем заинтересованы. Выпадающие меню предназначены для улучшения дизайна страницы и не должны заменять призыв к действию на странице. Когда лучше использовать выпадающее меню? Если ваша организация охватывает широкий спектр тем, услуг или подкатегорий, выпадающие меню могут быть очень полезными, чтобы быстро направить посетителей вашего веб-сайта туда, куда они хотят. Электронная торговля и выпадающее менюВыпадающее меню может быть отличным инструментом для электронной коммерции или интернет-магазинов. В Rocketspark уже есть несколько вариантов навигации для предприятий с категориями, тегами продуктов и брендами. Однако для тех компаний, которые предлагают большее количество подкатегорий в этих сегментах, выпадающее меню может предоставить удобное решение для фильтрации их клиентов. Предоставьте своим клиентам быстрый и простой способ добраться туда, куда они хотят. Возьмем, к примеру, этот распространенный сценарий. Покупатель одновременно просматривает несколько интернет-магазинов в поисках зимней куртки. Как бизнес электронной коммерции, для наилучшего шанса конвертировать и совершить продажу вы хотите, чтобы ваши зрители имели привлекательный и простой просмотр на вашем веб-сайте. В дополнение к вашему основному призыву к действию на главной странице вы можете добавить подкатегорию выпадающего меню под названием «Куртки и пальто» в главном/родительском меню. Выпадающие меню — это также быстрый способ показать услуги, предлагаемые вашей компанией, доступные из любого места на сайте. Если вы занимаетесь туризмом и/или размещением, вы можете использовать раскрывающееся меню, чтобы легко направлять и сопоставлять своих клиентов с тем, что они ищут, с номерами, которые разделены по размеру, типу или количеству комнат в люксе и т. д. Интуитивно понятное раскрывающееся меню для мобильных устройствДа, раскрывающееся меню будет работать так же хорошо, как и на компьютере. Однако вместо открытия с помощью мыши или наведения пальца, как это меню должно работать на настольном компьютере, зритель будет следовать визуальным подсказкам, чтобы коснуться элемента главного меню, чтобы открыть раскрывающееся меню на своем мобильном телефоне. Создание пользовательского опыта, который очаровывает зрителя Хотя выпадающие меню были одной из наиболее востребованных функций здесь, в Rocketspark, мы рекомендуем использовать их вдумчиво. Вместо того, чтобы перегружать посетителей бесчисленным количеством интерактивных опций на главной странице, лучшей стратегией может быть предоставление им нескольких хорошо подобранных маршрутов меню, ведущих к другим логически связанным опциям на следующей странице. Мы также предлагаем вам обозначить параметры главного меню понятными и интуитивно понятными метками. Не будь слишком умным. Это также совет мастера веб-юзабилити Якоба Нильсена, когда дело доходит до выбора ярлыков для меню. Давать вашим страницам необычные, экзотические или жаргонные имена просто парализует ваших пользователей и приводит к нерешительности. Нужно что-то немного другое? Выпадающее меню — это быстрое и простое решение для настройки на вашем веб-сайте, которое включено во все 3 тарифных плана Rocketspark. Если по какой-либо причине выпадающее меню не то, что вам нужно, у нас есть другие варианты меню за комиссионные, доступные на Rocketspark. Свяжитесь с нами, если вы хотите получить предложение по установке одного из них на вашем веб-сайте. Прилепленные заголовки Если вы хотите организовать на своем веб-сайте более удобную навигацию для пользователей с помощью другого инструмента из раскрывающихся меню, приклеенный заголовок может быть хорошим вариантом. Это особенно верно, когда у вас длинная страница — это позволяет зафиксировать ваше главное меню в верхней части страницы, чтобы оно не исчезало из поля зрения людей при прокрутке вниз. Прикрепленные подменю В отличие от группировки второстепенных страниц для прикрепления к главному меню в вертикальном представлении, вы можете отображать ключевые разделы на одной странице на вторичном уровне в горизонтальном представлении, прямо под вашим главным меню . В этом примере показано, как липкие заголовки и липкие подменю работают вместе, обеспечивая лучшую навигацию — ключевые элементы липкого подменю берутся из основных заголовков каждого раздела на странице. Нажав на один из них, ваши зрители могут быть перенаправлены прямо в соответствующий раздел. При прокрутке липкие меню остаются в верхней части окна, и по мере прокрутки каждого раздела на странице выделяется, к какому разделу прокручивались зрители. Мега-выпадающие меню Мега-меню популярны в интернет-магазинах — это большие панельные меню, которые позволяют вам разделять категории/теги/бренды магазинов на подкатегории и всевозможные другие вещи, которые можно найти в раскрывающихся списках. Легко настроить и подготовить за считанные минутыВы можете направить посетителей вашего веб-сайта туда, куда вы хотите, или они хотят перейти в кратчайшие сроки, добавив раскрывающееся меню. Вам не только легко настроить свой веб-сайт Rocketspark, но и сделать это всего за несколько кликов! Перейдите к нашему пошаговому справочному руководству, чтобы узнать, как добавить раскрывающееся меню. |
После анализа данных становится понятно, почему. Версия 2 работала лучше всего, что также имеет смысл по причинам, о которых я расскажу позже. Я не увидел реальной разницы между двумя моими обзорными ярлыками. Интересно отметить, что три версии без интерактивной верхней ссылки имели почти одинаковое общее время выполнения задачи. Чтобы получить статистически значимых количественных данных, мне, вероятно, пришлось бы набрать в 10 раз больше участников, чем я. Но как UX-дизайнер я знаю, что количественные данные — это хороший способ получить представление об общей картине, в то время как качественные данные могут показать вам почему и часто именно в них заключаются лучшие идеи. Далее мы углубимся в то, что показали записи задач и данные отдельных задач.
Каждый новый веб-сайт — это новая головоломка, и на практике мы довольно эффективно разобрались в различных возможностях. Но почему это время должно быть потрачено на изучение каждого сайта отдельно? Одно часто цитируемое правило дизайна интерфейса — согласованность — не изобретайте велосипед, когда в этом нет необходимости, так как это замедлит работу пользователей. Вместо этого полагайтесь на уже установленные стандарты. Однако для этого конкретного вопроса действительно нет стандарта! На макроуровне навигация работает почти так же — горизонтальный список ссылок в верхней части страницы, некоторые с выпадающими списками дополнительных ссылок. Но детали еще не согласованы, что отнимает у интернет-пользователей драгоценное время, поэтому я решил создать это исследование в первую очередь.
Я видел такое поведение во всех версиях прототипа. И что было интересно, так это разница в скорости между меню «нажмите, чтобы открыть» и меню «наведите, чтобы открыть», когда пользователи искали информацию. Это может занять всего лишь миллисекунды, но постоянное нажатие меню для поиска информации может утомить и стоит дороже, чем зависание, которое может складываться. Посмотрите эти видеоклипы, чтобы понять, что я имею в виду.
Это может быть связано с тем, что обзорная ссылка была наиболее очевидным путем, и пользователи узнали, что это не гарантирует, что верхний элемент будет кликабельным. Тем не менее, 11 из 50 участников выбрали верхнюю ссылку. В версиях 4 и 5, где щелчок по верхним элементам ничего не давал, 15 участников в каждой версии пытались щелкнуть верхнюю ссылку. Это говорит нам о том, что даже если большинство пользователей знают, что нужно использовать обзорную ссылку, некоторые все же могут попытаться щелкнуть верхнюю ссылку и ожидать взаимодействия.
Три из этих 11 включали «щелчок ярости». Мы никогда не хотим вызывать у наших пользователей такой стресс при использовании нашего продукта. Мы не хотим прятать ценный контент на видном месте, где его редко можно найти. Если бы эти участники не согласились протестировать наш прототип и вместо этого столкнулись с чем-то подобным «в дикой природе», скорее всего, они просто сдались бы и отправились на сайт конкурента в надежде удовлетворить свои потребности в другом месте.
Точно так же, как мы хотим избежать ссылок «Подробнее» в теле страницы в пользу более описательного текста ссылки, мы должны сделать то же самое в навигации. Мы не должны полагаться на контекст верхнего элемента, чтобы сообщить, куда ведут ссылки в раскрывающемся списке. Это плохо для специальных возможностей и вспомогательных технологий, которые считывают только текст ссылок, а также, как правило, менее понятны для тех, кто быстро просматривает вашу навигацию.
Чего я не ожидал, так это того, что большинство использовало шаблон, который тестировал 9.0019 худшее. Верно, версия 3, где верхняя ссылка кликабельна и не отображается в раскрывающемся списке, версия, которая заняла больше всего времени и вызвала наибольшее разочарование, является наиболее распространенным шаблоном в Интернете. Почему, я не уверен. Это может быть связано с тем, что системы управления контентом, такие как WordPress, по умолчанию устанавливают верхний элемент в навигации как ссылку, а повторение его в навигации просто просматривается. В любом случае, эта проблема должна быть решена, поскольку это может стоить этим веб-сайтам потери пользователей и дохода .