Yahoo User Interface Blog (YUIBlog)

Resultaten van de Accordeon Pattern onderzoek

Een paar maanden geleden deelden we ons huidige denken over de "accordeon" navigatie-component , en vroeg de gemeenschap van webontwikkelaars en ontwerpers die deze blog lezen om een enquête te nemen om ons te helpen te bepalen in gebreke blijft, de huidige praktijk, en andere richtlijnen op te nemen in een accordeon patroon en input leveren in een accordeon YUI component.

Ik heb enige tijd te bekijken en bestuderen van de resultaten en ik wilde ze delen met de gemeenschap als we schrijven een "beta"-versie van het patroon en maak je klaar om te delen, dus zonder verdere adieu, worden hier de resultaten (Merk op dat dit onderzoek niet moet worden beschouwd strikt wetenschappelijk).

Die reageerden

Respondenten identificeerden zich op de volgende manieren:

• Designer 21,4%
• Ontwikkelaar 32,1%
• Hybride (Zowel de ontwerper en ontwikkelaar) 42,3%
• Geen van de Boven 4,2%

Terminologie Onderscheidingen

Overweldigende meerderheid over alle respondenten het erover eens dat

• Accordeon en accordeon menu betekenen hetzelfde (73%)
• Accordeons en Tree Controls zijn twee verschillende dingen (89%)

Veel reageerders beschreef het verschil tussen de accordeons en bomen langs deze lijnen: "Boom Controle over het algemeen betekent een diepte van hiërarchie die niet algemeen aanwezig met een accordeon."

Een kleinere meerderheid zei dat Accordeon en Inklapbare panelen verwijzen naar dezelfde zaak (60%).

Deze meerderheden consistent waren rollen.

Presentatie van de Accordeons

Een duidelijke meerderheid (68%), zei dat accordeons kan worden opgemaakt zowel horizontaal als verticaal (en in feite het patroon is goed blijkt op het web). Mensen gesuggereerd dat de etiketten op een horizontale accordeon moet verticaal en / of gedraaid worden geschreven.

Een nog grotere meerderheid (72%) zei dat accordeons kunnen slechts twee niveaus (dit sluit aan bij het onderscheid tussen accordeons en bomen) hebben:

Een kleine meerderheid (53%) zei dat accordeons kunnen worden genest binnen andere accordeons. De schriftelijke reacties gesuggereerd dat de formulering van de vraag ertoe geleid dat sommige te beantwoorden dat het zeker mogelijk is maar niet per se gewenst is, het maken van suggesties zoals: "Als je goed goot hen is dit mogelijk zou zijn, maar over het algemeen een slecht idee - een soort met behulp van te veel tabbladen en ze te laten verpakken in meerdere rijen. "

Dit was een van de vragen waar de zelf-beschreven ontwerpers en ontwikkelaars hebben tegengestelde kanten. 57% van de ontwikkelaars en Hybriden overeengekomen dat accordeons genest kunnen zijn, terwijl 64% van de Designers zei dat ze misschien niet. (Geen van de Aboves split 50/50!)

Als ik zou moeten raden, zou ik zeggen dat de ontwikkelaars (en hybriden), meer nauw verbonden met de manier waarop is dan de reden waarom kan zijn uitdrukking meer van een "je zou kunnen doen ..." perspectief, terwijl de ontwerpers kan zijn uitdrukking meer van een "... maar je moet niet" oogpunt.

Hoe Accordeons moeten gedragen

Een kleine meerderheid (54%) vindt dat accordeons moet het mogelijk maken voor meer dan een paneel open zijn op een moment. Beide gedrag kan online worden gevonden, zodat onze indruk is dat dit gedrag kan meer afhankelijk zijn van de beperkingen van het ontwerp ruimte en het doel van de accordeon dan op een deken regel een of andere manier.

Deze vraag ook splitsen langs de identiteit lijnen, maar op een dubbelzinnige manier. Hybriden de voorkeur aan de een panel-at-a-time regel door een kleine meerderheid, terwijl de ontwerpers en ontwikkelaars en geen van de Aboves overeengekomen dat meerdere panelen zijn goed door de iets grotere meerderheid.

Een veel grotere meerderheid (73%) gelooft dat een accordeon kan een volledig gesloten toestand (dat wil zeggen dat het niet nodig dat er altijd wel een te openen). De enige uitschieter is dat het geen van de Aboves 60% brak voor de positie dat er altijd moet zijn een te openen.

Een aantal reageerders gesuggereerd dat het een goede praktijk om een ​​paneel te openen standaard, en voor dat paneel te worden ofwel de eerste, de een recent meest gebruikte.

Een andere grote meerderheid (76%) van mening een accordeon de totale omvang kan veranderen als nodig is, in plaats van beperkt tot een consistent formaat. (Natuurlijk, er zijn contexten, zoals het scherm van een mobiel apparaat, waarin het kan een geldige keuze of zelfs een ontwerp beperking die een accordeon een consistent formaat te onderhouden zijn.)

Een zeer kleine meerderheid (51%) stelde voor dat accordeons moet open op klikt (in tegenstelling tot op zweven) en een bijna even grote minderheid (45%) zegt dat het afhankelijk is. Interessant is dat minder dan 4% was bereid om de staat van de accordeons moet op zweven open als een regel.

Schriftelijke opmerkingen over deze kwestie bood tal van goede stof tot nadenken, zoals:

Het openen van een panel moet expliciet vereist actie. Als een accordeon meerdere panelen, kon opening op zweven een schokkend ervaren. In plaats daarvan gebruik van een tooltip naar de samenvatting details van wat er in het panel te brengen, en uitdrukkelijk de gebruiker "klik" om die te openen.

Afhankelijk van de configuratie van elke accordeon.

Heb ik deze voorbeelden samen [ meerdere , rollover ], zodat de ontwikkelaar kan de "best fit" daadwerkelijk gebruik voor elke use case.

Ook moet er de optie om rollover te gebruiken met verschillende regels: (een meest open zijn) of (elementen moeten worden geopend op de muis overheen gegaan wordt alleen).

Voor geavanceerde gebruiksmogelijkheden, moet een accordeon open op zweven tijdens het slepen en neerzetten. In elke andere omstandigheid, kun je niet vertrouwen dat de hover opzettelijk is.

Toegankelijkheid

Tot slot vroegen we een open vraag vissen op bekende toegankelijkheid problemen met accordeons en kreeg een groot aantal mooie antwoorden. (Voor ons voorbeeld geven, de meeste mensen het erover eens dat het maken van de gehele label aanklikbaar en niet alleen een klein pictogram belangrijk is.)

Hier is een bemonstering van andere inzichten over de toegankelijkheid met accordeons:

Ik denk dat het veilig is om te veronderstellen dat een Accordeon interactie is een geavanceerde interactie. Veel van de toegankelijkheid problemen kunnen ontstaan.

1. De inhoud is verborgen achter panelen, zodat mensen kunnen het niet vinden.
2. Afhankelijk van de grootte van het aanklikbare gebied of de trekker te openen / sluiten de panelen er sprake zou kunnen zijn problemen met de nodige handvaardigheid.

Accordeons moeten openen alle panelen als javascript niet beschikbaar is (hoewel dat kan er een "flicker" voor mensen met javascript).

Het is afhankelijk van de vraag of de inhoud in de verborgen panelen aanwezig is in de DOM of wordt opgehaald bij het openen van het paneel. Als het wordt opgehaald, focus moet worden gelegd op de nieuw geopende paneel.

Nou, echt ik denk dat de titel moet klikbare te worden, vooral als de inhoud van het element wordt geladen met behulp van AJAX (net als een tabview benadering), maar de realiteit is dat soms de ontwikkelaar (moeten) / (willen) de regelaar naar aan te passen dat gedrag. Hier is de lijst van voorbeelden die ik gemaakt voor een accordeon widget implementatie op basis van YUI 2.x, het waarschijnlijk een van de meest gebruikte onderdelen van de bruisende YUI extensie.

We hebben een geval waar het 'label' van de accordeon was een link naar een volledige blog post, en dus niet kon worden accordeon-aanklikbaar. In dat geval, schreven we een icoon in de bron met js om de klus te klaren. Mits het pictogram is voldoende groot en / of geleverd met een accesskey, zie ik niet een groot probleem ...

Accordeon controleert de server het doel van de montage veel inhoud in minder ruimte. Aangezien dit is een visuele, zou het fijn zijn voor een schermlezer om gewoon alles lezen van de inhoud en het feit dat het visueel wordt weergegeven als een accordeon te negeren. Het is voldoende om een ​​icoon te worden geklikt aan een panel uit te breiden. Er zou een configuratie-optie om het hele etiket aan een panel uit te breiden zijn, of het kan worden overgelaten aan de uitvoerende ontwikkelaar een luisteraar hechten aan het label dat een openbare "open" of "uit te breiden"-functie om die functionaliteit toe te voegen oproepen.

Denk maar aan een accordeon als een met tabs weer te geven. Het hele panel etiket gebied moet worden geklikt, maar als het bevat andere controles (bijvoorbeeld een "ontslaan" of "sluiten" knop) Ik stel voor alleen de label (tekst) klikbaar zijn, of ten minste de clikable op slechts uit te breiden tot de interactieve controles (dwz voor een bijschrift met een knop, het gebied boven, onder en "na" de knop moet klikken zijn).

Het vrijgeven van de ontwerp-patroon

Een reageerder vraagtekens bij de kunstmatige beperkingen van het onderzoek (een eerlijke agent, als je het mij vraagt):

Ik hield niet van dit onderzoek. De vragen waren niet flexibel genoeg. Als ontwerper / ontwikkelaar, Ik geloof dat alle interface-elementen dienen te worden aangepast aan de bijzondere website of webapplicatie. Vragen zwart-wit vragen laat geen ruimte voor de hand liggende verschillen tussen de projecten. Sommige projecten hebben een harde en snelle regel, terwijl dezelfde regel zou kunnen worden totaal ongepast voor een andere toepassing. Voor het grootste deel, kon ik van beantwoordde elke vraag met een "het hangt" resultaat.

Wees gerust dat het patroon alleen zachtjes aan te bevelen en de YUI code zal flexibel en krachtig. Het onderzoek is niet ontworpen om de keuzes van mensen te beperken, maar veeleer om meningen en voorkeuren te verzamelen, dus zelfs feedback over het niet met hard-en snelle regels nuttig is.

We hebben publiceerde een beta versie van de Accordeon patroon in de Yahoo! Design Pattern Library. Als u wilt verder feedback over het patroon, in een vrije-vorm manier te geven, dan kunt u langs of bezoek de daarmee verband houdende forum discussie.

Zoek gesprekken: Bloglines | technorati

Delen en uit te breiden: Bookmark met del.icio.us | digg it! | reddit!