Yahoo! User Interface блог (YUIBlog)

Резултати от проучване акордеон Pattern

Няколко месеца по-назад споделихме нашите текущи мислене на "акордеон" навигационен компонент , и поиска от общност от уеб разработчици и дизайнери, които четат този блог, за да вземе проучване, за да ни помогнат да определим по подразбиране, текущите практики, както и други насоки, които да се включат в едно акордеон модел и дават своя принос в един акордеон компонент Юи.

Аз съм имал известно време сега, за да прегледа и проучване на резултатите и исках да ги споделите с общността като пишем до един "бета" версията на модела и се пригответе да го споделите, така че без по-нататъшно сбогом, тук са резултатите (имайте предвид, че това проучване не следва да се разглеждат строго научна).

, Които са отговорили

Респондентите се идентифицират по следните начини:

• Designer 21.4%
• Developer 32,1%
• Hybrid (дизайнер, така и разработчик) 42,3%
• Нито едно от над 4,2%

Терминология Отличия

Коренно противоположни са и всички участници се съгласиха, че

• Акордеон акордеон меню и означават едно и също нещо (73%)
• Акордеони и Tree контрол са две различни неща (89%)

Много commenters описани разликата между акордеони и дървета по протежение на тези линии: "Дървото контрол обикновено предполага дълбочина на йерархията, че не е обикновено се представя с акордеон."

По-малко мнозинство заяви, че акордеон и Сгъваема панели се отнасят до едно и също нещо (60%).

Тези мнозинства са в съответствие в роли.

Представяне на Акордеони

А солидно мнозинство (68%), заяви, че акордеони може да се поставят хоризонтално, както и вертикално (и в действителност модел е добре, удостоверено в интернет). Хората предполагат, че на етикетите върху хоризонтална акордеон трябва да бъдат написани вертикално и / или сменят.

Още по-голямо мнозинство (72%) каза, че акордеони може да има само две нива (това се подравнява с разликата между акордеони и дървета):

Малко мнозинство от респондентите (53%) каза, че акордеони, могат да бъдат вложени в други акордеони. Писменото коментари предполагат, че формулировката на въпроса накараха някои да отговори, че със сигурност е възможно, но не непременно желателно, отправяне на предложения, като например: "Ако адекватно тях канавката, това би било възможно, но като цяло ужасна идея - нещо като използва твърде много раздели и с увийте ги в няколко реда. "

Това беше един от въпросите, които самостоятелно описани дизайнерите и разработчиците се противопоставящи се страни. 57% от разработчици и хибриди се съгласиха, че акордеони, могат да бъдат вложени, като 64% ​​от Дизайнерите твърдят, че не може да бъде. (Нито една от Aboves поделен 50/50!)

Ако аз трябваше да се досетите, бих казал, че разработчиците (и хибриди), по-тясно свързани с това как от защо може да изразяват по-скоро "можете да го направите ..." перспектива, докато дизайнери могат да изразяват повече от А "... но не трябва да" гледна точка.

Как Акордеони трябва да се държи

Една малка част (54%) смята, че акордеони би трябвало да позволи на повече от един панел да бъде открита в даден момент. И двете поведение може да се намери онлайн, така че нашата впечатление е, че това поведение може да зависи по-скоро на ограничения на пространственото оформление и целта на акордеон, отколкото върху едно одеяло правило един или друг начин.

Този въпрос също разделен на идентичност линии, но по двусмислен начин. Хибридите предпочитат един панел-в-едно-време да се произнесе по една малка част, а дизайнерите и разработчиците и никой от Aboves се съгласиха, че множество панели са добре от малко по-големи мнозинства.

Много по-голямо мнозинство (73%) смята, че един акордеон може да има напълно затворено състояние (което означава, че не е необходимо винаги да има един панел е отворен). Единственият външен човек е, че нито една от Aboves счупи 60% за позицията, която винаги трябва да има един панел се отвори.

Няколко commenters предполагат, че това е добра практика да има един панел отворен по подразбиране, и за този панел, за да бъде нито първата, на един най-често използвани.

Друго голямо мнозинство (76%) смята, общият размер акордеон може да се промени, ако е необходимо, вместо да бъдат принудени да последователна размер. (Разбира се, има ситуации, като на екрана на мобилно устройство, в които може да бъде валиден избор или дори ограничение дизайн, който един акордеон поддържате постоянна размер.)

Много леко мнозинство (51%) предполагат, че акордеони трябва да отвори на клик (за разлика от мишката) и почти толкова голямо малцинство (45%) каза, че зависи. Интересното е, по-малко от 4% са склонни да посочват акордеони трябва да отвори на мишката като правило.

Писмени коментари по този въпрос предлага много добра храна за размисъл, като например:

Отваряне на панела следва да се изисква изрично действие. Ако акордеон има множество панели, отваряне на мишката може да бъде шокиращ опит. Вместо това, използвайте подсказка за предаване на данни резюме на това, което е в панела и да има изрично потребител "клик", за да отворите този панел.

В зависимост от конфигурацията на всеки акордеон.

Сложих тези примери заедно [ множество , преобръщане ], така че разработчик може действително да се използва "най-добро напасване" за всяко използване случай.

Също така, трябва да има възможност да използват при преобръщане с различни правила: (един най-бъде отворен) или (елементи трябва да бъдат отворени на Посочете само).

За напредналите обичаи, акордеон трябва да отвори на мишката по време на влачене и пускане операции. При всички други обстоятелства, не може да вярваме, че мишката е умишлено.

Достъпност

Накрая, попитахме един отворен въпрос за риболов за всички известни проблеми с достъпността акордеони и има много голяма отговори. (За нашия пример въпрос, повечето хора се съгласиха, че вземането на целия етикет кликване, а не само малка икона е важно.)

Тук е вземане на проби от други прозрение за достъпност с акордеони:

Мисля, че е безопасно да се предположи, че един акордеон взаимодействие е модерна взаимодействие. Много достъпност проблеми могат да възникнат.

1. Съдържанието е скрита зад панелите, така че хората не могат да го намерят.
2. В зависимост от размера на кликване област или спусъка на отваряне / затваряне на панелите може да има проблеми с ръководството, необходими сръчност.

Акордеони трябва да отвори всички панели Ако Javascript е недостъпна (макар че може да доведе до "трептене" за тези с JavaScript).

Тя зависи от това дали съдържанието на скрити панели се намира в DOM или се изтеглят при отваряне на панела. Ако се извлечена, фокусът трябва да бъде пуснат на новооткрития панел.

Е, аз наистина вярвам, че заглавието трябва да се кликва, особено ако съдържанието на елемента ще бъдат заредени с помощта на AJAX (точно като подход tabview), но реалността е, че понякога на разработчика (трябва да) / (искате) контрол на персонализирате, че поведението. Ето списък на примери , които съм създал за изпълнение на акордеон джаджа въз основа на Юи 2.x, това е може би един от най-използваните компоненти от ври разширение Юи.

Имахме случай, когато "етикет" на акордеона е линк към целия пост блог, и затова не може да бъде акордеон-кликване. В този случай, ние написахме една икона в източник с JS да си свършат работата. При условие, че иконата е достатъчно голяма и / или идва с достъп, не виждам голяма трудност ...

Акордеон контрол сървър с цел монтаж много съдържание в малко пространство. Тъй като това е визуална загриженост, че би било добре за един екранен четец просто да прочетете цялото съдържание и да пренебрегнем факта, че тя се показва като акордеон визуално. Това е достатъчно за една икона, за да се кликва за разширяване на панела. Може да има конфигурация, за да позволите на целия етикет за разширяване на панела, или може да бъде оставено за прилагане разработчик да прикачите слушател на етикета, който изисква обществена "отворен" или "разширяване" функция, за да се добави, че функционалност.

Само си помислете на акордеон като раздели оглед. Цялата площ етикет панел трябва да се кликва, но ако тя съдържа други контроли (например "освобождава" или "Close" бутон) предлагам само етикет (текст) да се кликва, или поне clikable площ се увеличи само до интерактивни контроли (т.е. за един надпис, съдържащи един бутон, зоната над, под и "след" бутона трябва да се кликва).

Издаване на проекта Pattern

Един коментатор въпрос на изкуствени ограничения на изследването (един справедлив ченге, ако питате мен):

Не ми хареса това проучване. Въпросите не са достатъчно гъвкави. Като дизайнер / програмист, Вярвам, че всички интерфейс елементи трябва да бъдат съобразени с определен сайт или уеб приложение. Питам черно и бяло въпроси не оставя място за очевидни различия между проектите. Някои проекти се нуждаят от силно и бързо правило, докато същото правило може да бъде напълно неподходящи за друго приложение. За по-голямата част, бих могъл да отговори на всеки въпрос с "зависи" резултат.

Бъдете сигурни, че моделът ще препоръча внимателно и кода Юи ще бъде гъвкава и мощна. Изследването не е предназначена за ограничаване на избор на хората, но по-скоро да събере мнения и предпочитания, така че дори и обратна връзка, за да не твърд-и-бързи правила е полезно.

Ние сме публикува бета версия на акордеон модел в Yahoo! библиотека Design Pattern. Ако искате да се даде допълнителен обратна връзка по образец, в свободна форма, начин, моля пишете на или посетете свързани форум дискусия.

Вижте разговори: Bloglines | Technorati

Споделете и се разшири: Bookmark с del.icio.us | Digg го! | Reddit!