Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 67
Может быть стереотип, но мне приятнее пользоваться табами.
Мне тоже табы привычнее, но это сказывается постоянное пользование нормальными браузерами. Но пользователи ИЕ6 привыкли вообще к окнам, так что им в общем то всё равно — табы или аккордеон, лишь бы удобно.
Мы как раз только сегодня обсуждали этот вопрос с коллегами относительно одного из проектов :)
Мы как раз только сегодня обсуждали этот вопрос с коллегами относительно одного из проектов :)
Так об удобности и речь. Что по-вашему удобней, когда и почему? :)
Мы для нашего проекта пока не решили. Придется наверное делать оба варианта и тестировать на живых людях.
Аккорден — если на том же горизонтальном уровне уже есть какой-то текст. Например, слева отображается картинка, а справа в виде аккордеона ее EXIF свойства, разбитые по подгруппам.
Табы — если можно занять больше пространства. Например страница настройки чего-либо.
Как-то так.
Табы — если можно занять больше пространства. Например страница настройки чего-либо.
Как-то так.
У пользователей тоже табы, просто они в таскбаре.
Аккардеон — это маленький вертикальный ТАБ :)
А мне кажется все зависит от задачи. И табы и аккордеон одинаково хороши и полезны в разных ситуациях
Я могу согласится, что вертикальные табы — хуже, чем аккордион. Но если одна и та же задача реализуема через оба варианта, какой выбрать?
я бы сказал так, аккордеоны лучше всего подходят для организации меню, особенно если блоки логически разделены (вспомнить хоть windows проводник) а табы лучше выглядят если нужно разделить контент по разделам (ходить далеко не надо — хабр подходящий пример)
Еще аккордеоны неплохо подходят для небольших презентационных сайтов или баннеров. Часто они даже перелистываются без участия пользователей. Подходят лучше табов банально потому что эффектней
Ну вот меню: что же хорошего в организации меню через аккордеон? Видели, как это сделано на сайте Apple? Ещё и раскрывается по mouseover. И я вынужнен «бегать» мышкой вверх-вниз, чтоб открыть следующий/предидущий пункт. По-моему — неудобно.
А также — когда раскрыт 2-й из 3-х пунктов, то до меня не сразу дошло (когда-то), что третий вообще открывается. Не наглядно.
А также — когда раскрыт 2-й из 3-х пунктов, то до меня не сразу дошло (когда-то), что третий вообще открывается. Не наглядно.
> Однако по моему аккордеон — от лукавого
Просто аккордеон нужно использовать, когда Вы ограничены по горизонтали (пример: телефоны), если же говорить о табах, то их вполне удобно использовать при большой длинне (пример: браузеры на десктопах). Главное лишь найти удобное место где это применять.
Просто аккордеон нужно использовать, когда Вы ограничены по горизонтали (пример: телефоны), если же говорить о табах, то их вполне удобно использовать при большой длинне (пример: браузеры на десктопах). Главное лишь найти удобное место где это применять.
НЕ понял, почему это длинный текст в случае с «Tabs» это минус, а вслучае с «Accordeon» — плюс. Как по мне, так с точностью до наоборот: длинный текст в «Accordeon» нежелателен, так как пользователю, даже если он не будет читать текст придётся прокрутить страницу, чтобы кликнуть на нижние «клавиши». В случае же с «Tabs» если я не читаю текст, то могу переключиться на другую без дополнительной прокрутки.
Мне лично в аккордионе больше всего не нравится разрыв целостности блока навигации.
Т.е. если у меня есть однородная инфа, разделённая по группам, то и навигация должна быть «без разрывов», чтоб я видел все варианты выбора.
Т.е. если у меня есть однородная инфа, разделённая по группам, то и навигация должна быть «без разрывов», чтоб я видел все варианты выбора.
Вы все сговорились штоль с этим радикалом???
Да, автор, закинь картинку куда-нибудь в другое место, не видно
Много писал приложений для HR&Block (собственно и ава оттуда), так в их приложениях очень хорошо уживались табы с аккордеонами. Это, на самом деле, очень удобно. Вот например, т.к. хрблок занимается таксами (taxes), то в америке есть несколько форм для заполнения. Т.е. какие-то, относящиеся к одному типу формы, можно вынести в один таб (Personal info, Wages-2 и т.п.), а какие-то в другие (fill status и т.п.).
Второе, не вижу никаких проблем в навигации с аккордеонами, если, например, формы надо заполнять строго в последовательном порядке. Допусти, заполнили мы форму персонал инфо, следующая у нас идет wages-2, взяли, сохранили инфу, заходим в следующий рах, у нас активизируется таб с персональной инфой и открывается следуюий незаполненный аккордеон — wages. Ну не важно, в принципе, что открывается.
Я о чём, а о том, что при должном дизайне и конкретной последовательности действий, аккордеоны — это очень даже вполне себе крутая штука, лишённая минусов. А в связке с табами, так вообще, красота, богатство интерфейса и т.п.
:)
Второе, не вижу никаких проблем в навигации с аккордеонами, если, например, формы надо заполнять строго в последовательном порядке. Допусти, заполнили мы форму персонал инфо, следующая у нас идет wages-2, взяли, сохранили инфу, заходим в следующий рах, у нас активизируется таб с персональной инфой и открывается следуюий незаполненный аккордеон — wages. Ну не важно, в принципе, что открывается.
Я о чём, а о том, что при должном дизайне и конкретной последовательности действий, аккордеоны — это очень даже вполне себе крутая штука, лишённая минусов. А в связке с табами, так вообще, красота, богатство интерфейса и т.п.
:)
название компании написал неправильно :) — H&R Block
давайте, я попробую завтра оживить этот топик конкретной реализацией, надеюсь, последствий для меня не будет, ибо писал я программы уже давно, и некоторые из приложений там уже не используются. Вы все сами сможете увидеть очень прекрасную реализацию табов с аккордеонами. Как по мне, так я до сих пор под впечатлением
Буду рад увидеть пример хорошего использования аккордеона ;-)
Ну вот тут еще табы так умело под прогрес бар заделали. Естественно, это не единственное приложение с аккордеонами. Может, оно и не супер, ибо взяли фреймворк с другого проекта.
Я согласен, когда пользователь последовательно идёт по каким-то шагам, то accordion неплохо применим.
Но если у меня — нет шагов, нет wizard'а, но зато есть random navigation по этому аккордеону (или табам)?
Я считаю, что в таком случае аккордеон — очень неудобен.
Но если у меня — нет шагов, нет wizard'а, но зато есть random navigation по этому аккордеону (или табам)?
Я считаю, что в таком случае аккордеон — очень неудобен.
Прямо огорчил ваш пост, ниочём-так похоливарить.
У аккордеона есть ещё один минус — при большом количестве «клавиш» они занимают много места, которое могло бы достаться контенту.
табы — в основном применяются для отображения страниц содержащих большой объем контента, аккордеон в основном для отображения небольшого объема — к примеру какие-то настройки, инфо, прочее.
смысл сравнивать?
Ограничение по ширине — исходная точка для аккордеона. Разные боковые панели инструментов.
Кроме того — группировка записей в гридах — это тоже аккордеоны.
Кроме того — группировка записей в гридах — это тоже аккордеоны.
Меня смущает аккордеон, потому что когда нажимаю на вкладку все разъезжается, те если я, например, ошибся разделом, мне нужно тратить миллисекунды на осознание того, куда уехали остальные вкладки. Конечно, я им пользуюсь постоянно без особого дискомфорта, просто поймал себя на такой мысли.
Я думаю не стоит сравнивать молоток с отверткой.
Нужно использовать технологию там где это будет к месту.
Если говорить об аккордионе то я бы не стал реализовывать при помощи него меню я бы использовал табы.
Но есть исключения, это тот случай когда у аккордиона могут быть раскрыты несколько пунктов сразу.
Приведу реальные примеры.
WordPress последних версий, вертикальное меню в админке реализованно не то чтобы при помощи класического аккордиона но все же это можно назвать аккордионом. И оно довольно удобно.
Классика, как на сайте Apple — это жутко неудобно, плохая реализация.
Куда бы я запихнул аккордион так это в блоги… в некоторых блогах сайдбар просто неимоверно огромен и приходится скролить страничу чтобы пролистать то тэгов например.
Заменим сайдбар на аккордион, сделаем раскрытым по умолчанию только один самый важный радел.
Далее, пусть этот аккордион передвигается при скроле странички и все время на виду.
И наконец, контент раскрытого раздела аккордиона не должен превышать высоту окна в браузера чтобы при игре на нем было удобно пользоваться информацией.
Думаю это будет удобно.
Может реализую даже как плагин со временем. :)
Нужно использовать технологию там где это будет к месту.
Если говорить об аккордионе то я бы не стал реализовывать при помощи него меню я бы использовал табы.
Но есть исключения, это тот случай когда у аккордиона могут быть раскрыты несколько пунктов сразу.
Приведу реальные примеры.
WordPress последних версий, вертикальное меню в админке реализованно не то чтобы при помощи класического аккордиона но все же это можно назвать аккордионом. И оно довольно удобно.
Классика, как на сайте Apple — это жутко неудобно, плохая реализация.
Куда бы я запихнул аккордион так это в блоги… в некоторых блогах сайдбар просто неимоверно огромен и приходится скролить страничу чтобы пролистать то тэгов например.
Заменим сайдбар на аккордион, сделаем раскрытым по умолчанию только один самый важный радел.
Далее, пусть этот аккордион передвигается при скроле странички и все время на виду.
И наконец, контент раскрытого раздела аккордиона не должен превышать высоту окна в браузера чтобы при игре на нем было удобно пользоваться информацией.
Думаю это будет удобно.
Может реализую даже как плагин со временем. :)
минусы «аккордеонов» высосаны из пальца.
> «Клавиши» разбросаны. Отсюда — неудобство навигации.
это довольно смелое умозаключение, на мой взгляд не хватает логического шага от разброса до неудобства.
> И отсутствует целостность навигации, что тоже важно.
как же отсутствует?
Также можно легко потерять фокус (на каком варианте я сейчас?
> я сейчас на том варианте, который открыт.
> А какой он по счёту?
у вас пронумерованы названия секций.
> А какие ещё были? И где они? Внизу, говорите?), когда раскрытый документ довольно «высок».
все секции видно за раз, так как «неактивные» сворачиваются. если же наполнитель слишком высок, это промашка наполняющего, но всегда можно свернуть-развернуть секцию и посмотреть, что же там ещё.
ещё спешу заметить, что вы отлично подметили, что «аккордеоны» очень хорошо подходят для последовательных процессов вроде «волшебников» :)
> «Клавиши» разбросаны. Отсюда — неудобство навигации.
это довольно смелое умозаключение, на мой взгляд не хватает логического шага от разброса до неудобства.
> И отсутствует целостность навигации, что тоже важно.
как же отсутствует?
Также можно легко потерять фокус (на каком варианте я сейчас?
> я сейчас на том варианте, который открыт.
> А какой он по счёту?
у вас пронумерованы названия секций.
> А какие ещё были? И где они? Внизу, говорите?), когда раскрытый документ довольно «высок».
все секции видно за раз, так как «неактивные» сворачиваются. если же наполнитель слишком высок, это промашка наполняющего, но всегда можно свернуть-развернуть секцию и посмотреть, что же там ещё.
ещё спешу заметить, что вы отлично подметили, что «аккордеоны» очень хорошо подходят для последовательных процессов вроде «волшебников» :)
Мне на много привычные «табы». Мне кажется, что они на много удобнее, чем «акордионы». Почему? В статье написаны основные плюсы, вот по этим критериям мне и удобны, особенно пункт #1.
а зачем Вы сравниваете разные вещи?
табы — чтоб показать «только 1 «текущий» документ» из множества подобных, но не совместимых.
гармошка — чтобы списки коротких словосочетаний (ссылок) показывать.
табы — чтоб показать «только 1 «текущий» документ» из множества подобных, но не совместимых.
гармошка — чтобы списки коротких словосочетаний (ссылок) показывать.
Воду-в-ступе-толчения пост :)
Главное преимущество табов в их узнаваемости и повсеместном использовании. Их использование идет на рефлексе для 99.9% пользователей. У аккордеона этого нет. Тупой пользователь может не понять. А пользователь — тупой априори.
Аккордеон хорош когда нужно переключаться между 3-4 пунктами, если их станет с десяток и больше — половина пространства которое должно было быть занято контентом будет занято заголовками этого аккордеона.
к тому же у аккордеона менее универсальное применение расположения на рабочей области — его ширина как правило всегда равна ширине содержимого, а значит он годится только для узеньких вертикальных полосок-панелей, а табы действительно можно использовать и вертикальные и горизонтальные плюс ширина панели табов может занимать например половину от ширины содержимого.
итого я считаю аккордеон довольно убогим и сомнительным компонентом
к тому же у аккордеона менее универсальное применение расположения на рабочей области — его ширина как правило всегда равна ширине содержимого, а значит он годится только для узеньких вертикальных полосок-панелей, а табы действительно можно использовать и вертикальные и горизонтальные плюс ширина панели табов может занимать например половину от ширины содержимого.
итого я считаю аккордеон довольно убогим и сомнительным компонентом
Сравнение input type=«text» vs input type=«file»
Нельзя сравнить Tab с Аккордеоном
Нельзя сравнить Tab с Аккордеоном
надабы сделать подборку с примерами
Товарищи, мне даже не столько хотелось сравнить эти два контрола, сколько услышать ваши плюсы и минусы к одному и другому.
Аккордион это просто частный случай тех же самых Табов.
Для примера вот ссылка: flowplayer.org/tools/demos/tabs/accordion-horizontal.html
Для примера вот ссылка: flowplayer.org/tools/demos/tabs/accordion-horizontal.html
На мой взгляд, Аккоредон полезнее когда нужно показать контент небольшого визуального объема. Удобен тем, что изначально пункты показываются вертикальным списком, который удобно воспринимать, в то время как надписи на вкладках Табов можно запросто слить в единую строку и получить кашу.
Может сделать Табы вс. Аккордеон вс. Слайдер? :)
Может сделать Табы вс. Аккордеон вс. Слайдер? :)
Недавно я для себя открыл расширение frefox — Tree Style Tab До этого сидел на Tab Mix Plus несколько лет. Стоит посмотреть. :)
Всем спасибо за ваши комментарии. Буду теперь компилить полученную информацию.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Tabs vs. Accordion