Офигенные меню с навигацией через мега дроп-дауны! (mega drop-downs)
Пару дней назад для меня стал актуален вопрос выпадающих списков в софте и на сайтах. Возможно, не мне одному. Выкладываю литературный перевод статьи Я.Нильсена "Mega drop-downs" (с сайта http://www.useit.com/) - c картинками и моими комментами (курсивом).
Меню с навигацией через мега дроп-дауны офигенны!
Далее по тексту: выпадающие списки и дроп-дауны это одно и то-же, а вместо мега дроп-даунов, то есть выпадающих мега-списков, я писал просто МДД. Так короче.
Суть:
Большие двумерные дроп-дауны группируют пути навигации, устраняя скроллинг и позволяя пользоваться типографикой, иконками и подсказками, помогающих юзеру определиться с выбором.
Ситуация, когда обычные дроп-дауны создают проблемы юзабилити, предопределила мой жребий - отправить их на девастацию. Но, как показывает наше тест-видео, (они там в своей лаборатории тестируют юзеров, и на камеру снимают все их действия, подонки) мега дроп-дауны преодолевают недостатки обычных дроп-даунов. Таким образом, я могу рекомендовать одно предостерегая от другого.
Как показано на скриншотах, мега дроп-дауны имеют следующие характеристики:
• Большие, двухмерные панели разделяют опции навигации на группы
• Варианты выбора структурированы посредством сетки, типографики и (иногда) иконок
• Все видно за раз - без скроллинга
• Вертикальный или горизонтальный форм-фактор при активации через верхнюю панель навигации; при левопанельной активации они становятся мега флай-аутами.
Некоторые мега дроп-дауны имеют кнопку "закрыть" ("х" в ПВЛ), но она не нужна. Мега дроп-дауны по сути своей временны и исчезают сами по себе, когда юзер перемещает курсор к другому верхнеуровневому указателю или на "обычную" часть рабочего поля. А.Купер использует для этого понятия термин "потерять фокус", что мне кажется более удачным, как минимум, короче.
Стилистически мега дроп-дауны это копия галереи меню в "ленте" 2007-го Офиса (а также других недавних ставших популярными интерфейсах, вот например 3dmax 2010).
Как показывают примеры этих лентогалерей, мега дроп-дауны удобнее обычных дроп-даунов: они позволяют показывать подсказки, когда юзер затрудняется с выбором. Для меню с простой навигацией вы обычно используете заголовки ссылок вместо настоящих подсказок. Напомню, что А.Купер утверждает, что подсказки актуальны для новичков, т.е. относительно малочисленной категории пользователей, которые стремительно осваиваются с интерфейсом и вливаются в армию середняков, которые собственно и являются основной целевой аудиторией разработчиков. Середняку подсказки не так и важны - в какой-то момент он перестает ориентироваться по ним и перестает их замечать, они становятся просто визуальным шумом. Т.е. вопрос об абсолютном благе подсказок нельзя считать решенным. Подробнее - см. у Купера.
Мега дроп-дауны сокрушают обычные дроп-дауны.
Тестирование юзеров показывает, что мега дроп-дауны действительно работают. Вот парочка аргументов в поддержку этого эмпирического факта:
• Для больших сайтов со многими особенностями, классические дроп-дауны обычно скрывают от юзера большую часть опций. Да, вы можете прокручивать вниз, но (а) это боль и (б) прокрутка вниз скрывает начальные опции. В результате вы не можете визуально сравнить все возможности выбора, вы должны полагаться на вашу кратковременную память (кратковременная память - это он про лимит человеческого разума в удержании в памяти одновременно не более семи блоков информации). Человеческий разум имеет свои пределы и этот бардак с кратковременной памятью снижает возможности людей решить свои задачи на вашем сайте. Мега дроп-дауны показывают все сразу и люди могут видеть вместо того, чтобы пытаться все помнить.
• Текст - это, конечно, чудесно, но иллюстрация может стоить нескольких слов, что убедительно показывает 2007-й Word. МДД делают легким использование иконок и картинок в соответствующих случаях. И, даже если вы клина словили на использовании чисто текста, вы имеете больше возможностей типографики в своем распоряжении (позволяющей вам отличать важность ссылок по их размеру, например). Ключевая фраза здесь - «в соответствующих случаях» . Бывает сложно придумать понятную иконку для какой-нибудь хитрой опции. А если их несколько - то и вовсе нереально. Например, мне недавно надо было изобразить иконку возможности управлять видимостью объекта из FBD-переменной. Очень быстро я счел этот случай тем случаем, в которых наоборот - несколько слов понятнее одной иллюстрации.
Скорость
Скорость это именно то, что позволяет любому интерфейсу восприниматься, как "отзывчивый". Элементы интерфейса должны рендериться в пределах 0,1 секунды чтобы внушать материальность и ощущение того, что изменения дисплея это прямой результат действий юзера. Медленно отрисовываемые элементы интерфейса выглядят малочувствительными и порождают ощущение, будто это компьютер инициирует события, а не вы.
Вы должны протестировать время реакции вашей реализации МДД на разных компьютерах и браузерах, включая популярные платформы 5-тилетней давности, поскольку значительная часть ваших клиентов все еще использует их.
Не делайте время отклика слишком быстрым: курсор должен оставаться неподвижным 0,5 секунды до того, как появится всплывающий при наведении курсора элемент, типа МДД или подсказки. Несоблюдение этого правила сделает мерцание экрана при перемещении мышки невыносимым. Пункт, который, как вы предполагаете, хочет вызвать пользователь, должен выпасть только после 0,5 секунды неподвижности курсора на строке навигации.
Таким образом, время распределяется так:
1. Ждем пол-секунды
2. Если курсор все еще покоится на пункте строки навигации, показываем его МДД за 0,1 секунды.
3. Продолжаем показывать его еще в течении 0,5 секунды, когда курсор переместился вне выпавшего МДД и соответствующего пункта строки навигации. Потом скрываем МДД менее, чем за 0,1 секунды.
Одно исключение из правила 3: самые крутые реализации могут чувствовать, как юзер тащит курсор от строки навигации к цели в пределах дроп-дауна. Пока курсор на таком пути, дроп-даун продолжает оставаться видимым. Это дополнительное правило против возникновения «диагональной проблемы», которая возникает, когда путь курсора частично проходит вне активной зоны. Дроп-даун не должен исчезать, когда юзер по пути к цели теряет фокус.
Группировка функций в пределах МДД.
Основные принципы группировки:
• Сгруппируйте опции по типу действия, типа тех, что мы раскрыли в ходе изучения особенностей ментальных моделей юзеров методом сортировки карточек. (Сортировка карточек? Какой-то неизвестный мне адский метод Нильсена)
• Сохраняйте средний уровень детализации. Не предлагайте огромные группы со множеством опций, которые требуют длительного времени на просмотр. И наоборот, не делайте отдельные группы очень маленькими, чтобы юзеры не тратили кучу времени на понимание получившегося сверхизобилия групп.
• Используйте краткие, но описательные ярлыки для каждой группы. Помните стандартное правило: улучшать сканируемость страницы используя самые информационно емкие слова и без выдуманных терминов.
1. чтобы сохранить слова четкими и короткими, базовая форма глагола, например "купить", обычно лучше, чем герундий - "совершать покупки". В оригинале - "the base form of verbs ("shop") is usually better than gerunds ("shopping")"
2. Делайте ярлыки разными - например, "как купить" и "совершить покупку" не особенно хороши рядом.
• Упорядочивайте группы. По функциям или по важности, ставя самые важные или чаще используемые группы сверху (при вертикальной верстке) или слева (при горизонтальной - если язык, как английский, читается слева направо)• Показывайте каждый выбор только один раз. Когда вы дублируете опции - юзер офигевает - одинаковые-ли, или разные это варианты. Кроме того, избыточность делает интерфейс в целом более громоздким.
Сохраните МДД простыми
Стандартное правило юзабилити "оставить простым" относится и к МДД. Просто потому, что вы можете запихнуть туда все, что угодно, еще не значит, что вы должны это сделать.
В частности, избегайте ГИП-виджетов и других элементов интерфейса, которые предполагают более продвинутое взаимодействие, чем просто "кликнул и пошел". МДД появляются на экране ненадолго и не должны заменять диалоговые окна, предназначенные для более комплексного взаимодействия и подходящие для него лучше. Помимо прочих преимуществ, диалоговые окна убираются стандартным способом (через ОК/Cancel), остаются на экране пока их не уберут, и их можно подвинуть, если юзер хочет увидеть то, что под ними.
Action Envelope предлагает для ввода логина мини-окошко внутри дроп-дауна «My Account». Просто ссылка «My Account» в один клик на полноценную страницу была бы лучше.
Подобным образом - то есть также отстойно - Novell прячет функцию поиска внутри МДД главных опций навигации сайта. (Тут я не понял, что автор имеет ввиду - на сайте Novell «поиск» никуда не спрятан, а виден постоянно. Может редизайн?)
Это плохо по двум причинам:
• «Поиск» должен быть видимым постоянно, а не только тогда, когда юзер активирует выпадающее меню.
• Наличие ГИП-элементов (поля ввода текста и кнопульки) делает выпадающее меню тяжеловесным полем для взаимодействия вместо простого меню навигации.
Вердикт: просто потому, что МДД большие и могут вместить множество опций, вы не должны перегружать их. Меньше опций означает меньше времени на сканирование, меньше времени на вникание и меньше ошибок.
Доступность
Поскольку динамические элементы экрана потенциально могут стать причиной проблем с доступностью обзора, важно проектировать их, помня о скрин-ридерах и других вспомогательных технологиях. Даже грамотно сделанные, МДД могут напрягать плохо видящих юзеров, которые используют экранные лупы. (Это относится и к юзерам iPhon’a и других допускающих зуммирование мобильных устройств.) К несчастью для такого юзера, увеличенный фрагмент может показывать только часть МДД, а не полное меню.
Например, в случае с Action Envelope, экранная лупа может показать группы «Paper & More» и «Ways to Shop», но не «Shops». Тень от потеряшки, которая возникнет при этом с правого края меню - слишком слабый сигнал, чтобы помочь большинству юзеров. Таким образом, сайт может терять заказы, если значительная часть его клиентов - люди с плохим зрением. Сильное визуальное решение границ меню - один из способов решения этой проблемы.
К тому же, маленькие выбираемые пункты напрягают владельцев тачскринов. Другие перемудренные сценарии показа и скрытия обижают людей с нарушениями моторики.
Поэтому два основных подхода к улучшению целостности восприятия МДД это:
• Простой. Не запаривайтесь, пытаясь сделать большие выпадающие меню легкими и доступными для восприятия. Вместо этого сделайте каждый выбор верхнего уровня меню кликабельным и ведущим на нормальную страницу, где вы и представите все опции в простом, полностью открытом для обзора HTML.
• Продвинутый. Последуйте примеру майкрософтовских «keytips», облегчающих взаимодействие с ее лентой контроля. Keytips - хорошая альтернатива клавишам доступа и к тому-же легче для понимания.
Последовательность взаимодействия с ними такова:
1. Нажать Alt, чтобы войти в режим «keytips»
2. Нажать на соответствующий символ, чтобы выбрать одну из опций верхнего уровня строки навигации и показать ее выпадающий список. В этом списке показаны ключи доступа к каждому следующему меню.
3. В окне дроп-дауна можно нажать один (или два) символа для выбора соответствующей опции. Поскольку ключи доступа видны пока дроп-даун в keytips-режиме юзеру, который может видеть, не надо полагаться на память (это была, видимо, черная шутка от Нильсена, ха-ха-ха - «users who can see»).
Если у вас навороченный сайт или вы особенно обеспокоены легкостью его восприятия, вы должны применять оба подхода. Большинство сайтов, впрочем, нужно делать используя лишь простой подход.
Пробуйте!
МДД могут улучшить легкость навигации вашего сайта (конечно, всегда лучше проверить). Помогая пользователям найти больше, они помогут вам продавать больше (или достигать другие бизнес-цели, такие, как привлечение пожертвований или распространение полезной информации для некоммерческих или правительственных сайтов).