Блог компании Yed Prior

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

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

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

Огромные вертикальные раскрывающиеся блоки на сайте foodnetwork.com; обратите внимание на кнопку закрыть (”х” в верхнем правом углу).

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

Где использовать выпадающее меню

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

Организовать категории в блог

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

Отображать продукты в интернет-магазине

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

Показать блоки

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

Лучшая реализация

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

Избегайте использования меню более двух уровней вложенности

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

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

Вариант 1: Hover Меню (меню отображается при наведение курсора мыши)

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

Вариант 2: Clickable Меню (меню появляется при клике на нем)

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

Выпадающее меню на сайте Digg активируется/деактивируется по клику, на него следует обратить внимание.

Кроме того, Google также использует подобное раскрывающееся меню.

Задержка деактивации при наведении мыши

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

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

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

Добавить Hover эффект в меню

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

В следующем примере, на главной странице MediaTemple, меню открывается при наведении

Плавные Переходы

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

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

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

Удалить Подсказки

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

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

Техника верстки

Использование фона может сделать меню более привлекательным. Однако фон должен быть таким, чтобы на нем легко читался контент. Вот несколько способов “оживить” меню, без чрезмерного использования фона.

Используйте списки при верстке

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

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

С другой стороны, сайт The Washington Post имеет очень плохое выпадающее меню. Здесь существенно не хватает расстояния между элементами, и поэтому ссылки выглядят достаточно беспорядочными и неудобными.

Hover эффект на пунктах меню

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

Полупрозрачный фон

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

Сохранить общий стиль

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

Смотрите выпадающее меню в следующем примере.

Плохая реализация выпадающего меню

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

Navigant Consulting

Это меню плохо сверстано и нефункционально.

Panasonic

Хотя это меню неплохо сверстано, но из-за плохого эффекта при наведении затруднительно в использовании.

Toshiba

На сайте Toshiba меню слишком маленькое, что не соответствует хорошей практике.

LG

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

Chrysler

Сайт Chrysler использует выпадающего меню с очень маленьким текстом, что делает меню трудночитаемым.

Sun

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

Creative Labs

Следующее меню слишком беспорядочно и не имеет задержки перед закрытием, так что это не очень удобно.

HP

Еще одно недостаточно удобное меню.

Alienware

Черное меню на черном фоне делает этот меню не удобным для использования.

Хорошая реализация выпадающее меню

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

Sony

Хорошо разработанное Hover меню.

ActionEnvelope

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

.

Helmy Bern

Меню в красивом стиле, с эффектом плавного исчезновения.

RedBrick

Это меню имеет хорошую верстку и легко читаемый текст.

REI

Очень широкое меню, поэтому легко удерживать курсор мыши в фокусе.

Philips

На сайте Philips большое и удобное выпадающее меню.

Walmart

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

Samsung

На сайте Samsung меню очень удобное из-за своих больших размеров и приятного стиля.

Epson

На Epson показано другое удобное меню.

Mini Cooper

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

Gateway

Вот еще один удобный выпадающий элемент.

Asus Global

Хорошее меню с задержкой перед исчезновением.

Intel

Очень простое и понятное выпадающее меню.

Target

Хорошо организованное меню с задержкой перед закрытием.

Garmin

Это раскрывающееся меню простое, но функциональное.

Logitech

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

Incase

Это меню очень простое, но вполне выполняет свои функции.

evelMerch

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

IBM

Многоуровневое меню, с небольшой задержкой.

EA

Очень простое и хорошо сверстанное раскрывающееся меню.

ACTIVISION

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

Yahoo! Finance

На сайте Yahoo! Finance меню содержит большие кнопки и иконки, чтобы показать где открывается меню.

Источник: Smashing Magazine