Yahoo! uživatelské rozhraní Blog (YUIBlog)

Výsledky průzkumu akordeon vzor

Před několika měsíci jsme sdíleli naše současné úvahy o "akordeon" navigace komponent , a požádal Společenství webové vývojáře a designéry, kteří čtou tento blog, aby se průzkum, který nám pomáhá určit výchozí nastavení, běžné praxe, a další pokyny k začlenění do Akordeon vzoru a poskytují vstupy do akordeon YUI komponenty.

Měl jsem nějaký čas, aby přezkoumala a studovat výsledky a chtěl jsem se o ně podělit s komunitou, jak jsme se napsat "beta" verzi vzoru a připravte se na sdílení, takže bez dalšího Adieu, zde jsou výsledky (Všimněte si, že tento průzkum by neměly být považovány za přísně vědeckou).

Kteří odpověděli

Respondenti se cítí těmito způsoby:

• Designer 21,4%
• Developer 32,1%
• Hybrid (oba návrháři a vývojáři) 42,3%
• Žádný z výše uvedených 4,2%

Rozdíly terminologie

Drtivá většina všech dotázaných se shodli, že

• Akordeon a harmonika Menu znamenají totéž (73%)
• Harmoniky a stromů kontroly jsou dvě různé věci (89%)

Mnohé připomínky, popsal rozdíl mezi harmoniky a stromy v tomto duchu: "stromové struktuře zpravidla předpokládá, hloubka hierarchie, která není obecně projevuje s akordeonem."

Menší většina uvedla, že akordeon a skládací panely odkazují na stejnou věc (60%).

Tato převaha byla konzistentní role.

Prezentace akordeonů

Pohodlnou většinu (68%), řekl, že harmoniky může být stanoveno horizontálně i vertikálně (a ve skutečnosti vzor je dobře doloženo na webu). Lidé, navrhl, že štítky na vodorovnou akordeon by měla být napsána vertikálně a / nebo otáčet.

Ještě větší většina (72%) uvedla, že harmoniky mohou mít pouze dvě úrovně (což vyrovnává s rozdíly mezi stromy a harmoniky):

Těsná většina (53%) uvedla, že harmoniky mohou být vnořeny v rámci jiných akordeonů. Písemné připomínky navrhl, že znění otázky vedla některé odpovědět, že to je jistě možné, ale ne nezbytně žádoucí, aby návrhy jako: "Máte-li dostatečně žlabu je, bylo by to možné, ale obecně hrozný nápad - něco jako použití příliš mnoho záložek a mít je zabalit do více řad. "

To byla jedna z otázek, kde self-popisoval návrháři a vývojáři se nepřátelské strany. 57% vývojářů a hybridů se shodli, že mohou být vnořené harmoniky, zatímco 64% uvedlo, že designéři mohou být. (Žádný z Aboves rozdělení 50/50!)

Kdybych měl hádat, řekl bych, že vývojáři (a hybridy), úzce souvisí s více jak než proč se dávají najevo větší "Můžete to udělat ..." pohled, zatímco návrháři mohou dávají najevo více "... ale neměli byste" pohledu.

Jak se chovat Harmoniky

Malá většina (54%) věří, že harmoniky by měl umožňovat více než jeden panel bude otevřena současně. Oba chování je k dispozici online, takže náš dojem je, že toto chování může záviset více na omezení konstrukční prostor a účelu akordeon než na dece pravidlo jedna cesta nebo jiný.

Tato otázka rovněž rozdělit podle identity linek, ale jednoznačně. Kříženci přednostní jeden panel at času pravidlo malou většinou, zatímco návrháři a vývojáři, a žádný z Aboves se shodli, že více panely jsou v pořádku, o něco větší většinou.

Mnohem větší většina (73%) se domnívá, že harmonika může mít zcela zavřeném stavu (to znamená, že to není nutné, aby se vždy jeden panel otevřený). Jen odlehlá je, že žádný z Aboves zlomil 60% na pozici, že musí být vždy jeden panel otevřený.

Některé připomínky, navrhl, že to je dobré mít jeden panel otevřít ve výchozím nastavení a to panel buď první, ten naposledy použitých.

Další velká většina (76%) se domnívá, akordeon celková velikost může měnit podle potřeby, spíše než být nucen k jednotné velikosti. (Samozřejmě, tam jsou kontexty, takový jako displej mobilního zařízení, ve kterých může být platnou volbu, nebo dokonce navrhnout omezení, které akordeon udržovat konzistentní velikosti.)

Velmi mírná většina (51%), navrhl, že by se měla otevřít na akordeony klikněte na (v protikladu k hover), a téměř stejně velká menšina (45%) uvedla, že záleží. Zajímavé je, že méně než 4%, byli ochotni stát akordeonů by měla otevřít na vznášet jako pravidlo.

Písemné připomínky k této otázce nabízí spoustu dobré k zamyšlení, jako například:

Otevření panelu by měla vyžadovat explicitní akci. Pokud se harmonika má více panelů, může vznášet se na otevření nepříjemný zážitek. Raději použijte tooltip zprostředkovat Souhrn údajů o tom, co je v panelu, a uživatel explicitně "klepněte na tlačítko" otevřít tento panel.

Závisí na konfiguraci jednotlivých akordeon.

Dal jsem dohromady tyto příklady [ více , rolovací ], takže vývojář může skutečně využít "nejvhodnější" pro každý případ použití.

Také by měla existovat možnost, použít převrácení s různými pravidly: (jeden nejvíce být otevřené), nebo (prvky by měla být zahájena pouze v bublinové nápovědě).

Pro pokročilé využití, by měl otevřít na akordeon vznášet při drag and drop operace. Ve všech ostatních okolností, nemůžete věřit, že hover je úmyslné.

Přístupnost

Nakonec, jsme se zeptali otevřená otázka, která loví nějaké známé problémy s dostupností harmoniky a získal spoustu skvělých odpovědí. (Pro náš příklad problému, většina lidí se shodli, že díky tomu je označení klikací a ne jen malá ikona, je důležitý.)

Zde uvádíme přehled dalších asi přístupnosti harmoniky:

Myslím, že je bezpečné předpokládat, že interakce je akordeon pokročilé interakci. Spousta problémů s přístupností mohou vzniknout.

1. Obsah je skrytý za panely, takže lidé nemohou najít.
2. V závislosti na velikosti plochy, nebo kliknout spoušť pro otevření / zavření panelů by mohla být problémy s manuální zručnost nutná.

Harmoniky by měla otevřít všechny panely-li JavaScript je k dispozici (i když to může způsobit "blikání" pro ty s JavaScriptem).

Záleží na tom, zda obsah skrytých panelů je přítomen v DOM nebo je načtena při otevření panelu. Je-li být vyvolány, zaměření musí být umístěny na nově otevřené panely.

No, jsem opravdu přesvědčen, že titul by měl být klikací, zvláště pokud je obsah prvku bude načten pomocí AJAX (stejně jako přístup tabview), ale skutečnost je taková, že někdy developer (měl jsem) / (chcete) ovládací prvek Vlastní, že chování. Zde je seznam příkladů , které jsem vytvořil pro realizaci akordeon widgetu na YUI 2.x, je to pravděpodobně jeden z nejvíce používaných komponentů z bublající rozšíření YUI.

Měli jsme případ, kdy "etiketa" harmoniky byl odkaz na úplný blogu, a proto nemohl být akordeon-kliknout. V tomto případě jsme napsali ikonu na zdroj js pro tuto práci. Za předpokladu, že ikony jsou dostatečně velké a / nebo přichází s accesskey, nevidím zásadní problém ...

Akordeon ovládání serveru účelem montáže spoustu obsahu do méně místa. Protože se jedná o vizuální obavy, že to bude dobré pro čtení z obrazovky jednoduše přečíst veškerý obsah a ignorovat skutečnost, že se zobrazí jako harmonika vizuálně. Postačí, aby se ikona kliknout na rozšíření panelu. Tam by mohla být možnost konfigurace, aby celý štítek rozšířit panel, nebo to může být ponecháno na realizaci developer připojit posluchače na štítek, který volá veřejnost "Otevřít" nebo "Rozbalit" funkce ještě dodat, že funkci.

Jen pomyslete na akordeon, jak s kartami pohled. Celý panel označení oblasti by měly být klikací, ale pokud obsahuje další ovládací prvky (např. "propustit" nebo "Zavřít"), navrhuji pouze označení (text) je kliknout, nebo alespoň clikable oblasti jen rozšířit až na interaktivní ovládací prvky (tj. titulek obsahuje tlačítko, plocha nahoře, dole a "po" tlačítka by měla být klikací).

Uvolnění návrh vzor

Jeden komentátor zpochybnil umělé překážky šetření (spravedlivý policista, pokud jde o mě):

Nelíbilo se mi tento průzkum. Otázky nebyly dostatečně flexibilní. Jako designér / vývojář, myslím, že všechny prvky uživatelského rozhraní musí být přizpůsobena konkrétní stránky nebo webové aplikace. Kladení otázek, černé a bílé nenechává prostor pro zjevné rozdíly mezi projekty. Některé projekty vyžadují tvrdé a rychlé pravidlo, zatímco stejná pravidla by mohla být zcela nevhodné pro jiné aplikace. Z větší části, mohl jsem z odpověděl na všechny otázky s "záleží" výsledek.

Ujišťujeme vás, že vzor bude jen mírně doporučí a kód YUI bude flexibilní a výkonný. Průzkum nebyl navržen k omezení výběru lidí, ale získat názory a preference, tak i zpětnou vazbu, které nemají striktní pravidla, je užitečné.

Jsme se vydal beta verzi akordeon vzor ve způsobu Yahoo! návrhu knihovny. Pokud byste chtěli, aby další zpětnou vazbu na model, ve free-form způsobem, prosím, pokles o souvisejících nebo navštivte fórum diskusi.

Hledat konverzace: bloglines | technorati

Sdílet a rozšířit: Záložka s del.icio.us | Digg to! | reddit!