Заместитель главного редактора
3,4
рейтинг
7 марта 2013 в 11:53

Дизайн → Загадка выпадающего списка «Амазона»

Бен Кэменс обнаружил, что в выпадающем списке Shop by Department на сайте «Амазон» ховер-эффект происходит очень быстро, абсолютно без какой-либо задержки. Тем самым происходит нарушение старого, выработанного ещё в 90-х годах прошлого века правила: перед отображением пункта подменю необходим так называемый гистерезис, запаздывание.



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


Пример проблемы в Mac OS. Из-за отсутствия задержки зелёный путь не сработает в NEXTSTEP и унаследованных от него виджетах.

Эта задержка есть практически во всех меню с выпадающими элементами, как, например, на сайте «Академия Хана».



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



Что же сделали с сайтом «Амазона»? Бен выяснил, что здесь путь курсора определяется особым образом.



Для каждого положения курсора высчитывается треугольник с вершинами в верхнем и нижних углах списка и курсоре (на рисунке выделено голубым). Если курсор попадает на область другого элемента в голубом треугольнике, уже открытое подменю сменится, но с задержкой, которая даст пользователю возможность протащить курсор в область подменю. Нет смысла менять подменю на Appstore for Android сразу же при попадании курсора на него — может быть, пользователь ведет курсор на пункт Learn more about Cloud Drive. Если же курсор находится вне треугольника, подменю переключится немедленно, без задержки.

Эта, по сути, мелкая деталь, единожды изобретенная, забытая и открытая заново, заставила Бена написать небольшой плагин jQuery-menu-aim для jQuery, который реализует такой же принцип функционирования выпадающих подменю. Он уже используется на сайте «Академия Хана».

Анатолий Будько @atomlib
карма
268,7
рейтинг 3,4
Заместитель главного редактора
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Дизайн

Комментарии (90)

  • +138
    Гениально!
    • +3
      да, все гениальное просто!
      • +2
        Ну как сказать «просто». Попробуйте с нуля реализуйте.

        Колесо — просто, поэтому и гениально, а это просто отличное юзабилити, реализация которого необязательно должна быть простой, лишь бы пользователю было удобно.
        • +2
          я саму идею имел ввиду
        • +3
          Колесо само по себе бесполезно. Главным изобретением стали дороги общего пользования.
          • +2
            Т.е. человек изобрел колесо, но не понял зачем?
            • +14
              нет, человек сначала освоил подсечное земледелие и вырубил гигантские площади леса. Потом освоил стационарное земледелие (не помню, как называется) — и возникла проблема транспортировки. И только после того, как появилось достаточное количество места для того, чтобы было где катить колесо, оные колёса появились. Заметим, долгое время они конкурировали с волокушами и санями — потому что волокуши по всякой фигне лучше тащатся, чем колесо катится. И только после того, как было осознано, что по ровной поверхности колесо катится лучше, чем тащится, возникло понимание, что нужны дороги. Не себе лично, а всем.

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

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

              • +1
                Однако, у майя и ацтеков были вполне инфраструктурная сеть дорог. А вот колеса никакого не изобрели.
                • +1
                  Потому что им только тачки с колёсами делать и оставалось. Верховых животных не было, запрягать было некого.

                  Колесо — это локальная оптимизация волокуши, не более.
                  • +1
                    Запрягать было рабов.
                    Каменья для пирамид они же таскали как-то.
                    • +1
                      Вот как раз таскать камни для пирамид (речь про большие глыбы в многие десятки тонн) можно и нужно без колёс. Каким должно быть колесо, чтобы обеспечить меньшее трение в оси (!) для 10Т глыбы? На деревянных перекаточках самое то.

                      Для остальных же грузов колёса или не колёса — вопрос числа затрачиваемых усилий.

                      Качественные (а не количественные) изменения от колеса:

                      ручная транспортировка тяжёлых объектов (артиллерия, баллисты и т.д.)
                      скорость движения (в основном военное применение)
                      самодвижущаяся сила, толкающаяс колёса. А это уже XIX век.

                      Другими словами, я бы не был столь восторжен относительно значимости колеса в древнем мире.
                    • +2
                      Каменья для пирамид они же таскали как-то.

                      Использовали что-то наподобие полимербетона, и никаких глыб никуда не таскали.
                      • +1
                        Это египтяне.
                        А мексиканские из кусков известняка.
                      • +1
                        Да и то — миф.
                • НЛО прилетело и опубликовало эту надпись здесь
        • +1
          Как раз реализовать такую идею очень легко. А вот придумать эту идею, видимо, очень трудно.
  • +31
    Нужно отлить этот пост из чугуния и бить им всех, кто не ставит задержку без такого алгоритма. в последний раз с таким столкнулся на сайте какого-то оператора.
    • +2
      В посте нехватает еще информации о том, что на Амазоне невыделеные пункты меню, над которыми находится мышка также получают второстепенное выделение, даже если мышка в «синем треугольнике». По нажатию эта категория становится текущей. Это позволяет избежать эфекта «глючности», когда мышка вроде как уже над другим елементом, а ничего не происходит.
  • +47
    Слава разработчикам, которые думают о пользователях!
    • +11
      Понапихают 100500 Jquery гениальных плагинов на сайт, а потом сами ноют, что у них Хром//ФФ/Сафари/Опера всю оперативку скушали=)
      • +3
        Да Вы не переживайте, года через два поддержку jQuery на аппаратном уровне включат в какой-нибудь чип (в ту же видеокарту — чего в нее еще не пихали?), и все радостно будут говорить, что уж теперь тормозов ждать неоткуда. :)
        • +6
          … и настанет время написать новый фреймворк, с пасьянсом и гейшами
        • +1
          Не включат — в jquery нет ровным счетом ничего.
          • +1
            Не успел дополнится. Основная вещь в jQuery — это sizzle — который скрывает детали браузеров в вопросе css-query. Да, querySelectorAll работает очень странно (работает наверное даже правильно, но очень странно относительно css). Вокруг него иногда удобны обёртки. Но и включать обёртки над стандартными API которые не требуют ничего лишнего и не такие сложные — это глупость.
    • +4
      Но поставить фокус в строку поиска они так и не додумались, и даже более того, если сразу после загрузки ткнуть в поиск и начать набирать текст, фокус может потеряться из поля ввода, и вместо набора текст получим прыжки по всей странице.
  • +1
    Спасибо, найду применение :)
  • +5
    Круто, но не очевидно и иногда дает ложные срабатывания, т.к. настоящие люди двигают мышкой не по линейке. Курсор довольно часто следует за взглядом. Посмотрел на последнее слово в следующей строке — поехал туда курсором.

    Можно еще отслеживать скорость курсора. Если он движется в направлении подменю, то можно еще немного потянуть время. Если же курсор почти остановился (даже в пределах фиолетового треугольника), то лучше переключить подменю. Правда, это еще менее очевидно.
    • +3
      Действительно, я всегда думал почему меню амазона так «лагает» %) Вот сейчас пробую нажать на Watch Now в Unlimited Instant Videos с минимальным путем и не получается.
    • +1
      Так оно так на амазоне и работает. Выбираешь подменю, быстро ведёшь курсор в выпадающий список — подменю не переключаются. Если вести курсор к выпадающему списку медленно, то происходит переключение подменю. Или я Вас не так понял?
    • +3
    • 0
      Я не настоящий =(
      • +1
        Пардон, не успел исправить. Я не настоящий — вел себя так, как хотели разработчики =( Кстати, дочитав до ссылки на амазон в начале статьи и посмотрев их меню, как-то сразу догадался о зоне направления курсора. Но статья хороша — заставила взглянуть на юзабилити меню по новому.
    • +1
      Поддерживаю насчёт ложных срабатываний.
      А вообще я, как типичный пользователь, не имеющий никакого отношения к веб-программированию, скажу: я бы хотел сам нажимать на каждый из пунктов и спокойно читать подпункты, не переживая за то, что случайно уведу мышку не туда и придётся опять искать этот пункт и место, где я остановился. Новаторство — это хорошо, но зачастую старое лучше и удобней.
  • +8
    Жизнь скоротечна, задержка не нужна…
    • +7
      Без задержки средний пользователь потратит больше времени, да еще и разозлится.
      • +3
        Иногда пункты в меню такие узкие и длинные, что это превращается в настоящую эпопею.
  • +2
    Значит, кто-то читал Брюса Тоньяццини. А он вроде бы говорил, что меню так ведёт себя в классических маках.
    • +1
      Действительно, так себя и ведет. Только не знаю, можно ли считать Mac OS X 10.8.2 классическим маком.
      Кстати, остановка курсора отслеживается, насколько я вижу.
      • 0
        Значит, вернули (с маками не имел дела, а Тоньяццини в далёком 2000-м жаловался, что в OSX этот алгоритм прикрыли)
    • НЛО прилетело и опубликовало эту надпись здесь
  • –26
    Идея и суть статьи — прекрасна. Анимированные гифки же заставляют мою голову болеть…
    • +10
      *Картинка с Care-o-meter*
    • +15
      А по мне, так GIF-ки здесь очень уместны.
      • –3
        Гифки уместны, безусловно, но их можно было бы скрыть и показывать по клику. Когда же пытаешься прочесть текст между двумя гифками, а вокруг все мельтешит, не знаю как у вас, но у меня неприятные ощущения.
    • +1
      Да нормально все, просмотрел все гифы, понял все, добавил в закладки на гитхабе. Быстро, удобно, весело.
  • +3
    Яндекс-закладки — поставьте такую штуку! А то сил нет попадать по многоуровневому меню.
  • +5
    Круто конечно, но зачем такое мелькание — если я не могу прочесть контент — зачем мне его показывать?
    По-моему зеленое меню (вторая картинка) — работает какраз как надо
    • НЛО прилетело и опубликовало эту надпись здесь
      • +2
        хмм…
        Может 'поженить' эти способы: добавить минимальную задержку (чтобы избежать мелькания) и дать пользователю возможность беглого просмотра
        • +1
          Вот именно так оно и работает на маках, и маленькая задержка есть, и треугольник.
    • +4
      Не так как надо. Вам придется очень точно вести мышку к подменю, иначе оно исчезнет. Исчезает-то оно без задержки.

      Мелькание мешает, да. Можно поставить небольшую задержку (100 мс), чтобы при уверенном вертикальном перемещении подменю не мелькали с частотой 20 fps.
  • +2
    Решал такую же задачу несколько иначе, ограничился лишь версткой :).
    Принцип: появляющийся блок до какой то степени перекрывает родителя и сестринские элементы родителя.
    А значит можно не опасаться, что пользователь будет водить курсор по диагонали.
    Но спасибо, вдруг пригодится этот плагин!
  • +3
    Что за бред про Mac OS? Все прекрасно работает.
    • НЛО прилетело и опубликовало эту надпись здесь
  • +3
    Поймал себя на том, что всегда в подобных ситуациях вёл мышью по строке, чтобы не переключить случайно.
  • +1
    Самая большая печаль этого приёма — он где-то будет внедрен, а где-то — нет. И никогда не знаешь, как поведет себя меню на незнакомом сайте: можно ли вести курсор по диагонали или лучше все-таки везде сперва вести мышку вправо, а потом выбирать пункт под-меню.

    Но прием классный, возьму себе на вооружение.
    • +1
      Даешь стандарт!
      • +2
        Скорее будет патент и новая волна судебных исков =)
    • +1
      Spread the world. Чтобы что-то внедрялось, нужно не только внедрять это самому, но и рассказывать другим. Я совершенно уверен, что это будет интересно любому веб-девелоперу, и чем проще будет механизм внедрения, тем чаще эта библиотека будет использоваться. Меня как UI-шника всегда бесили баги дропдаунов — как в веб-, так и в обычных приложениях.

      В общем, пост в закладки.
      • +2
        Spread the world
        Размазать мир? :3
  • +1
    Кстати, это проблема не только выпадающих меню, но и других кастомных контролов. Недавно на хабре обсуждали поведение кастомного Select.
  • +4
    А какой правильный ответ-то на вопрос о эквивалентном сопротивлении? Я завис.
    • +1
      Трудная задача, которая была популярна несколько лет назад среди инженеров-электриков, состояла в следующем: для образования двумерной бесконечной сети с квадратными ячейками соединяют бесконечно большое число одноомных сопротивлений. Следовательно, в каждом узле соединяются концы четырех сопротивлений. Чему равно эквивалентное сопротивление, между узлом и одним из четырех ближайших соседних узлов. Эта задача является удивительным примером мощности принципов симметрии и суперпозиции. Пользуясь внимательно принципом суперпозиции, вы можете решить эту задачу почти в уме.

      Ответ: 0.5 Ом
      • +1
        офф. Кстати, интересно было рассмотреть решение этой задачи при предельном переходе — строим последовательность площадок с увеличивающимся диаметром, так чтобы нужные клеммы были в центре. Так вот, оказывается, в пределе можно получить абсолютно любое значение для сопротивления — это зависит от формы границы. Более того, подобное случается не только в вымышленном мире одноомных резисторов — электрические свойства графена также сильно зависят от формы его границы.
  • +1
    Долго вспоминал, где же я столкнулся с такой проблемой как пользователь — и вспомнил, IDE Eclipse! Не раз матерился, как быстро нажать File -> New -> Android Project. Приходилось аккуратненько тянуть курсор.
  • +3
    По крайней мере, в Mac OS 10.8 работает по абсолютно аналогичному алгоритму.
  • +1
    То, что реализовано на сайте академии хана, тоже имеет свою «особенность»: задержка при переходе от одного списка к другому срабатывает, только когда мышь двигается вдоль сторон синего треугольника, то есть по направлению вниз-вправо или вверх-вправо.
    Если перемещать мышь вертикально, неизбежно возникают случайные подвижки влево-вправо, и меню может начать вести себя с точки зрения пользователя странно.
  • +2
    А кто-нибудь пробовал пользовать iOS вверх ногами? Попробуйте — забавные ощущения. Тоже, видимо, при обработке касаний учитывают, что пользователь тыкает так, чтобы видеть хоть чуть-чуть куда…
  • +4
    Парни, вы меня простите, я не веб-программист, и, уверен, не знаю многих деталей.
    Но ведь это же очевидно с точки зрения юзабилити. неужели почему только амазон это смог придумать и реализовать?

    Помидорами не бросайте, мне интересен конструктивный диалог.
    • +1
      В веб-программировании, да и вообще в программировании встречаются люди разной квалификации. А значит и поделки у всех разные. Уверяю вас, что найдется большое количество сайтов, где затронутая проблема вовсе не самая главная. А вообще ниже ответили, что подобное реализовано в GTK.
    • +1
      Правило 80/20, да из 20 не все догадались.
  • +1
    Спасибо, пригодится.
  • +1
    Когда вы, как разработчик, в очередной раз пытаетесь перенести на клиента вычисления (шаблоны, положение мышки и меню и др) подумайте, как долго сможет наслаждаться вашим приложением пользователь, работающий автономно.
    Амазон ребята с головой и проделали большую работу в плане оптимизации, чего и вам желаю!
  • +2
    Не хвастовства ради, но я еще в анчале статьи дагадался о способе решения. Спасибо за статью.
  • +1
    Спасибо за статью. Действительно очень интересный подход.
  • +13
    Только треугольник лучше вычерчивать не по высоте старого меню, а по высоте свежеоткрытого (если под меню находятся другие контекстно-зависимые ссылки, то опять же не по старому меню, а по всему участку справа). Так делают GTK и Unity Globalmenu.



    А вот в Qt простая задержка без отслеживания курсора. «Если вы действительно ненавидите кого-то, научите его распознавать плохой кернинг плохие меню».
    • +1
      Отличная идея, согласен.
  • +3
    Очень жаль, что в борьбе за удобство главной страницы Амазон забыл про все остальные.
    Например — раздел Your Kindle Library. При удалении книжки появляется надпись «Всё ок, удалено», но сама книга при этом остаётся в списке. Причём, когда наводишь мышь на её свойства, список внезапно перегружается с потерей страницы в пейджинге.
    Ещё можно отметить дикое неудобство справочной системы.
    • +2
      Разумеется всё это вы уже сообщили в техподдержку Amazon?
      • +1
        К сожалению, ни одно из моих сообщений в техподдержку Амазона не дало положительного результата. Тематика сообщений касалась другого продукта Амазона, однако, факта это не отменяет. Я решил не бороться с судьбой, и теперь, когда я вижу очередной амазоновский баг, я просто посылаю им толстый луч диареи.
        Если хотите — можете сообщить.
  • +1
    Спасибо, любопытный анализ, но вот подпись под скриншотом с Mac OS неверна.
    По приведенной Вами ссыке как раз таки пишут, что путь обозначенный зеленой стрелкой сработает в Mac OS.
    • НЛО прилетело и опубликовало эту надпись здесь
      • +1
        Все так, тем не менее скриншот вводит в заблуждение. В статье подпись под скрином говорит, что в Mac OS (классической) зеленый путь сработает, тогда как в OS X (DP) сработает только оранжевый.
        Автор же обобщает это до «из-за отсутствия задержки зелёный путь не сработает», что совсем не так. И вообще, какой смысл обсуждать баги developer preview osx пятнадцать лет спустя? )
        • НЛО прилетело и опубликовало эту надпись здесь
  • –1
    Мда, в Konqueror это меню вообще не работает.
    В Opera тоже
    Opera
    Version
    12.16
    Build
    1860
    Platform
    Linux
    System
    x86_64

    CSS3 и JS и вещи прекрасные, но участь, скорее всего, будет такая же как у flash.
    • +1
      в Konqueror это меню вообще не работает
      Попробуйте в lynx.
      участь, скорее всего, будет такая же как у flash.
      даешь статические странички без ничего и «хомяков» на перловом CGI! :)
  • 0
    даешь статические странички
    Мечта.

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