Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 71
Есть мнение, что Вы зря убрали белую полосу, визуально отделяющую кнопку от логотипа. Особенно выделятся на фоне поиска, у которого осталось отделение от логотипа.
Перевод не замечай @ комменты посылай
Даже не увидел этой строчки до картинки, привык что обычно везде используется стандартный функционал для обозначения перевода.
Здесь используется стандартный функционал «из песочницы», который не совместим со стандартным функционалом «перевод». Так что автор не виноват, это недоработка (или фича?) Хабра.
В правилах песочницы указано, что переводы не приветствуются.
Возможно с этим связано отсутствие стандартного функционала для обозначение перевода.
Возможно с этим связано отсутствие стандартного функционала для обозначение перевода.
Фича — фичей, но проблема-то остается: в итоге не была полноценно прочитана статья, не была проверена ее принадлежность к корпоративному ресурсу :). Так можно слить любую «дезу», (без пользы, конечно, но..). (например: можно написать статью об A/B тестировании наличия на логотипе фейсбука религиозной символики..)
Статью не читали? Там первой строкой «Перевод статьи «The Hamburger Icon» дизайнера сайта Booking.com Мишеля Феррейры от 23 сентября 2014 года.»
Привыкание к этой кнопке очень большое, мне почему-то приятнее лицезреть «гамбургер» вместо «MENU» — своего рода интуитивный алиас, который не нужно заучивать.
Очень хорошая интуитивная иконка. Особенно хороша там, где она единственная по вертикали и первая/последняя на панели.
Т.е. когда она явно настаивает: «чувак, мы вооот сюда всё попрятали для красоты и удобства».
В противном случае (ну как-же не пнуть хабр), фиг додумаешься.
С интуитивной силой этой иконки сравнятся только «пупырышки» для перетаскивания, крестик закрытия и пауза ||.
Т.е. когда она явно настаивает: «чувак, мы вооот сюда всё попрятали для красоты и удобства».
В противном случае (ну как-же не пнуть хабр), фиг додумаешься.
С интуитивной силой этой иконки сравнятся только «пупырышки» для перетаскивания, крестик закрытия и пауза ||.
Ухты. Прочитал ваш комментарий, взглянул на панельку хабра, и — я был слеп, но теперь вижу! Насколько сильно отличается ассоциативная нагрузка трёх иконок: звоночек, карандашик и… три полоски, которые не только не связаны с предметом реального мира, но и вообще сами по себе с чем-то не связаны.
Полоски могут ассоциироваться разве что с «всё то, чего нету в окружающих меня иконках» или «то, для чего дизайнер не осилил нарисовать иконку», но тогда её действительно хочется видеть с краю ряда.
По сути, наверное, пересказал вашу мысль.
Полоски могут ассоциироваться разве что с «всё то, чего нету в окружающих меня иконках» или «то, для чего дизайнер не осилил нарисовать иконку», но тогда её действительно хочется видеть с краю ряда.
По сути, наверное, пересказал вашу мысль.
Я думаю, что показатели теста были бы гораздо объективнее, если бы было представлено время, за которое новый пользователь(имеется в виду первое посещение) нашел бы глазами и нажал на гамбургер и меню соответственно.
Думаю, что если результаты будут явно смещены в одну из сторон, то да.
Напомню, что, как понятно из статьи, результаты были без явного смещения в какую то ни было сторону.
Мне пришлось несколько раз перечитать, чтобы убедиться в отсутствии в статье каких-либо данных касающихся того, как именно был получен результат. Нет ни цифр, ни объективного критерия. Просто фраза
Всего лишь утверждение о том, что ничего не изменилось.
не оказало существенного влияния на поведение наших пользователей
Всего лишь утверждение о том, что ничего не изменилось.
Мне кажется, результаты теста такие потому, что все просто знают, что в левом верхнем углу должна располагаться кнопка открытия меню. Тем более что большинство все равно меню открывают свайпом слева направо
Кстати Apple говорит о том, что данный вид навигации — зло и не надо его использовать(WWDC 2014 — Designing Intuitive User Experiences). И очень многи популярные приложения от него уже отказались.
Автор как-то непоследовательно излагает мысли. То иконка у него позорная, то при А/B тестировании ничего позорного не произошло — ну вообще никакого результата исследования. А разгадка, я думаю, одна — все пользователи давно привыкли, что слева вверху меню, и нарисуй ты там хоть чайку — эффект будет один.
На Хабре слева вот иконка с моей аватарой, иконка с колокольчиком и иконка с гамбургером. Все три вызывают меню. При этом меню гамбургера называется «Разделы». И я до сих пор путаюсь, в каких из этих меню какой пункт искать.
true story. Аналогично. А всё потому, что
А я забываю, в какое из этих меню спрятали поиск…
Более того, все три меню содержат по два подменю, первое уникальное, а второе — ОДИНАКОВОЕ ДЛЯ ВСЕХ ТРОИХ. WTF?!?!?!!?
Только мне противно, когда иконку со списком называют гамбургером?
В моём мозге она ассоциируется с иконкой из Microsoft Office (с кружочками левее палочек).
Прекрасная иконка, особенно когда находится с краю. И 1 из немногих, которой идёт монотонное представление (ну не могу я после превосходных цветных копировать-вставить из офиса привыкнуть к андроидовскому нечто).
В моём мозге она ассоциируется с иконкой из Microsoft Office (с кружочками левее палочек).
Прекрасная иконка, особенно когда находится с краю. И 1 из немногих, которой идёт монотонное представление (ну не могу я после превосходных цветных копировать-вставить из офиса привыкнуть к андроидовскому нечто).
Apple выпендрился и для меню сделал 2 полоски. Просто бутерброд с колбасой, а не гамбургер.
Вы тестировали на гарантированно новых посетителях или на всех? Если на всех — то результат предсказуем, постоянные уже знают, что меню там и им совсем не важно какая иконка в том месте.
Странно, раньше никогда не замечал, чтобы «гамбургер» был популярен. Чаще всего я его вижу именно на хабре.
Зачем выкладывать в конце рабочего дня фото такого сочного гамбургера?
Ощущение, что текст SEOшник писал
Для тех, кому интересно: нашёл недавно библиотеку с иконками, которая позволяет сделать анимацию гамбургера как на сайте flatornot.klm.com/en_GB/ средствами CSS3 без картинок и это не единственный пример с анимацией этой иконки.
Библиотека: fian.my.id/marka/
Библиотека: fian.my.id/marka/
А вот тут морфинг между тремя состояниями pollenlondon.com/loft-studios/
Добавлю, что этот символ использовался для меню еще во времена текстовых интерфейсов (Turbo Vision, например) под MS-DOS. Тогда для его вывода использовался знак с кодом 240 из второй половины ASCII-таблицы.
«постоянный спутник нашего интернет-серфинга с первого дня, как вы стали обладателем своего компьютера»
Что-то я не припомню в досе или нортоне такой иконки… И в 95-ом тоже, вроде, не было.
Что-то я не припомню в досе или нортоне такой иконки… И в 95-ом тоже, вроде, не было.
Без контрольной группы эксперимент не имеет доказательной силы.
Если бы они аналогично проверили какую-нибудь другую нерелевантную иконку, например, с изображением куска пиццы, то, я уверен, получили бы аналогичные результаты.
Если бы они аналогично проверили какую-нибудь другую нерелевантную иконку, например, с изображением куска пиццы, то, я уверен, получили бы аналогичные результаты.
Честно говоря, не понимаю этой дурацкой тенденции упростить иконки до минимума… Тогда идеальной иконкой станет точка!
Вспоминаю с теплом времена windows 98 c ее иконками, в которых прорисовывались детали… У нас теперь экраны со сверх высоким разрешением, а рисуем прямоугольнички да квадратики…
Недавно выбесило то, как обозначили журнал звонков в интерфейсе андроида от HTC, просто иконка с часами, с-ка. А может это, блин, будильник, напоминалка позвонить или что вообще?.. Меньше символизма, товарищи,
все самые прекрасные вещи были тогда, когда создатели добавляли ДЕТАЛИ. Как раньше с домами было — были красивые дома с барельефами, скульптурами, и прочими декоративными элементами, а теперь — стеклянные коробки. Так и с иконками… деградация…
Вспоминаю с теплом времена windows 98 c ее иконками, в которых прорисовывались детали… У нас теперь экраны со сверх высоким разрешением, а рисуем прямоугольнички да квадратики…
Недавно выбесило то, как обозначили журнал звонков в интерфейсе андроида от HTC, просто иконка с часами, с-ка. А может это, блин, будильник, напоминалка позвонить или что вообще?.. Меньше символизма, товарищи,
все самые прекрасные вещи были тогда, когда создатели добавляли ДЕТАЛИ. Как раньше с домами было — были красивые дома с барельефами, скульптурами, и прочими декоративными элементами, а теперь — стеклянные коробки. Так и с иконками… деградация…
Тихо, тихо… Мало ли что нас ждет в системе, которую в очередной раз стараются разработать без привязок к привычному — в Windows 10. Сделают кнопку «пуск» в виде точки, а там и веб-сайты переймут моду. Я, кстати, по поводу «трех полосок» так думаю: дизайнеры бы взяли символы, которые в ОС меню обозначают, но на Маке и в Винде, и (во многих) менеджерах окон на Линуксах символы эти не «отвлеченные», а изображающие что-то уникальное для ОС («яблоко», «флаг», лого X-Windows или лого KDE, скажем), и такое на сайте как поставить в роли универсального символа меню?
Да-да
Непонятно, куда дизайн движется.
Насчет тенденции — это не только в веб-дизайне.
В искусстве тоже была деградация
Меня больше прикалывает иконка share В первые я ее увидел на N900 потом она плавно перетекла во все остальные сервисы.
Мне вот эти три полоски (опа, а это — «гамбергер»! Почему тогда не «тождественность», та, что "≡", она же ≡ и ≡? И этоу уже не упоминая символа &2630;, который, ни много ни мало — "TRIGRAM FOR HEAVEN") никак не понравятся. Вообще не говорящая пиктограмма для понятия «меню».
И ладно бы, когда человек делает страничку для смартфона, на экран не влезает меню, а человек тупо хочет сделать страницу чисто текстовой, посему выбрал символ «позаковыристее» из UTF-8, и приделал в уголок страницы. Правда, почему не символ «равно», или символ «решетки», или даже «амперсанд» — но это дело личное. Но когда этот подход побежал по миру?
Booking.com брать, как пример юзабилити — ой, это рисково. Со вкусом у них… не очень, при этом сайт построен так, чтобы миллионный раз напомнить, какие они лучшие на рынке (тогда как по ценам проще пойти к конкурентам), притом UI действительно меняется очень часто, и даже эти дурные таблички («мы ищем для вас номер, запомните, мы самые лучшие» — при том, что задержка на «поиск» создается явно искусственно) через adblock и то можно замучиться выкорчевывать. Это я к тому, что на их сайте и символ «собаки» будет лучше (и аккуратнее) выглядеть, чем уродская кнопочка «меню в прямоугольнике» :)
И ладно бы, когда человек делает страничку для смартфона, на экран не влезает меню, а человек тупо хочет сделать страницу чисто текстовой, посему выбрал символ «позаковыристее» из UTF-8, и приделал в уголок страницы. Правда, почему не символ «равно», или символ «решетки», или даже «амперсанд» — но это дело личное. Но когда этот подход побежал по миру?
Booking.com брать, как пример юзабилити — ой, это рисково. Со вкусом у них… не очень, при этом сайт построен так, чтобы миллионный раз напомнить, какие они лучшие на рынке (тогда как по ценам проще пойти к конкурентам), притом UI действительно меняется очень часто, и даже эти дурные таблички («мы ищем для вас номер, запомните, мы самые лучшие» — при том, что задержка на «поиск» создается явно искусственно) через adblock и то можно замучиться выкорчевывать. Это я к тому, что на их сайте и символ «собаки» будет лучше (и аккуратнее) выглядеть, чем уродская кнопочка «меню в прямоугольнике» :)
Символ выбран, потому что три полоски символизируют три пункта меню, не больше и не меньше.
Логично. В таком случае "=" означает меню с двумя пунктами, так? :)
И ладно "&2630;", а вот "&2631;", "&2632;", "&2633;", "&2634;", "&2635;", "&2636;", "&2637;" — это меню, где некоторые пункты — из нескольких слов.
Не знаю, для меня символ «три полоски» ни гамбургер, ни «меню» внешне не напоминают. Особенно если прикинуть, сколько в интерфейсах горизонтальных линий, и как приходится «три полоски» выделять на сайте, чтобы в браузере они были заметны как важная кнопка.
Контрпримеры: iPhone годами обходился без кнопки «открыть меню». Android годами обходится символом «три точки по вертикали» для обозначения кнопки вызова меню.
И ладно "&2630;", а вот "&2631;", "&2632;", "&2633;", "&2634;", "&2635;", "&2636;", "&2637;" — это меню, где некоторые пункты — из нескольких слов.
Не знаю, для меня символ «три полоски» ни гамбургер, ни «меню» внешне не напоминают. Особенно если прикинуть, сколько в интерфейсах горизонтальных линий, и как приходится «три полоски» выделять на сайте, чтобы в браузере они были заметны как важная кнопка.
Контрпримеры: iPhone годами обходился без кнопки «открыть меню». Android годами обходится символом «три точки по вертикали» для обозначения кнопки вызова меню.
Это не вчерашнее изобретение, символ из трех полосок был еще в ASCII. Раньше я уже приводил тут скриншот интерфейса, разработанного на Turbo Vision под DOS, которому больше двадцати лет. Я не пытаюсь защищать этот выбор, но исторические корни он, определенно, имеет, также как и определенное визуальное сходство с предметом, который изображает (даже если вам так не кажется). При этом, от других вариантов, которые вы привели, его выгодно отличает то, что у него нет почти никаких других значений. Непонятное — лучше, чем то, что кажется одним, а является другим.
И если уж говорить об абсурдных символах, то почему все накинулись на этот, в котором есть определенная логика, если существуют, например, троеточия (Flickr), которые так и говорят: «мы очень долго думали, как назвать этот пункт меню, куда поместили все, что не влезло в другие, но так ничего в голову и не пришло».
И если уж говорить об абсурдных символах, то почему все накинулись на этот, в котором есть определенная логика, если существуют, например, троеточия (Flickr), которые так и говорят: «мы очень долго думали, как назвать этот пункт меню, куда поместили все, что не влезло в другие, но так ничего в голову и не пришло».
Когда я первый раз столкнулся с этой иконкой в каком-то приложении (кажется, в гуглокартах, когда убрали локатор), я был в шоке. Сначала я долго искал глазами меню или что-то похожее, в районе нажкранных кнопок и по углам. Заметил в углу выступающие полосочки. Нерешительно тапнул — появилась менюшка. Помню, подумал: «Господи, какой же гений до этого додумался? Наверное тот, который убрал локатор и большую часть настроек».
Конечно, я нашел бы эту кнопку на экране с m.booking.com. Просто потому что это первая кнопка на экране из двух, причем вторая скорее всего не меню. Хотя кто этих дизайнеров знает…
Конечно, я нашел бы эту кнопку на экране с m.booking.com. Просто потому что это первая кнопка на экране из двух, причем вторая скорее всего не меню. Хотя кто этих дизайнеров знает…
Я почему-то ассоциировал данную иконку не с пунктом «меню», а, скорее, с пунктом «Настройки».
Иконка-гамбургер является классической. Даже если вы не знакомы с этим ее названием, то три черные полосы столь же знакомы, как курсор мыши — постоянный спутник нашего интернет-серфинга с первого дня, как вы стали обладателем своего компьютера.
Я что-то не припомню подобного убожества в Netscape Navigator.
Вообще в математике "≡" это символ сравнения по модулю
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Иконка-гамбургер