Yahoo! Blog User Interface (YUIBlog)

Risultati del sondaggio Pattern Fisarmonica

Alcuni mesi fa abbiamo condiviso la nostra riflessione in corso sulla "fisarmonica" componente di navigazione , e ha chiesto alla comunità di sviluppatori web e designer che leggono questo blog per fare un sondaggio per aiutarci a determinare valori predefiniti, le pratiche correnti, e altre linee guida per incorporare in un Fisarmonica modello e fornire un contributo in un componente Accordion YUI.

Ho avuto qualche tempo per rivedere e studiare i risultati e ho voluto condividere con la comunità, come si scrive una versione "beta" del pattern e preparati a condividerlo, così senza ulteriori esitazioni, ecco i risultati (si noti che questa indagine non deve essere considerato strettamente scientifico).

Che hanno risposto

Gli intervistati hanno individuato stessi modi seguenti:

• Designer 21,4%
• Developer 32,1%
• Hybrid (entrambi designer e sviluppatore) 42,3%
• Nessuno dei precedenti 4,2%

Terminologia Riconoscimenti

Un schiacciante maggioranza in tutti gli intervistati hanno concordato che

• Fisarmonica e fisarmonica Menu significano la stessa cosa (73%)
• Fisarmoniche e controlli Tree sono due cose diverse (89%)

Molti commentatori descritto la differenza tra fisarmoniche e gli alberi in queste righe: "Albero di controllo implica in genere una profondità di gerarchia che non è generalmente presente con una fisarmonica".

La maggioranza ha detto che la più piccola fisarmonica e pannelli ripiegabili si riferiscono alla stessa cosa (60%).

Tali maggioranze sono stati coerenti tra ruoli.

Presentazione di Fisarmoniche

Una solida maggioranza (68%), ha detto che fisarmoniche possono essere disposti orizzontalmente e verticalmente (e infatti il modello è ben attestata sul web). La gente ha suggerito che le etichette su una fisarmonica orizzontale dovrebbe essere scritto in verticale e / o ruotato.

Una maggioranza ancora più grande (72%) ha detto che fisarmoniche può avere solo due livelli (questo si allinea con la distinzione tra fisarmoniche e degli alberi):

Una lieve maggioranza (53%) ha detto che fisarmoniche può essere annidato all'interno di fisarmoniche altri. Le osservazioni scritte suggerito che la formulazione della domanda ha portato alcuni a rispondere che è certamente possibile ma non necessariamente auspicabile, suggerendo come, "se adeguatamente grondaia, questo sarebbe possibile, ma in genere una pessima idea - un po 'come usare troppe schede e di farle avvolgere in più righe. "

Questa era una delle domande cui l'auto-descritto i progettisti e gli sviluppatori hanno i lati opposti. 57% di sviluppatori e ibridi hanno convenuto che le fisarmoniche possono essere annidate, mentre il 64% dei progettisti ha detto che non possa essere. (Nessuno di 50/50 dividere il Aboves!)

Se dovessi indovinare, direi che gli sviluppatori (e ibridi), più intimamente connesso con il come che il motivo può essere stato espresso più di un "si potesse fare ..." punto di vista, mentre i progettisti possono essere stati esprimere più di un "... ma non è" punto di vista dovrebbe.

Come dovrebbero comportarsi Accordions

Una piccola maggioranza (54%) ritiene che dovrebbe consentire di fisarmoniche più di un panel di essere aperta alla volta. Entrambi i comportamenti possono essere trovate on-line, così la nostra impressione è che questo comportamento può dipendere più i vincoli dello spazio di progetto e lo scopo della fisarmonica che su una regola di coperta in un modo o l'altro.

Questa domanda anche diviso lungo linee di identità, ma in modo ambiguo. Ibridi preferito la sola regola del pannello-at-a-tempo da una maggioranza piccola, mentre a designer e sviluppatori e nessuno degli Aboves convenuto che i pannelli multipli sono daccordo con maggioranze leggermente più grandi.

Una maggioranza molto più ampia (73%) ritiene che una fisarmonica può avere uno stato completamente chiuso (cioè che non è necessario che ci sia sempre un pannello aperto). L'unico valore anomalo è che l'Nessuno dei Aboves ruppe il 60% per la posizione che ci deve essere sempre un pannello aperto.

commentatori hanno suggerito che sia una buona pratica di avere un pannello aperto di default, e per questo pannello di essere il primo, il più utilizzato di recente.

Un altro grande maggioranza (76%) ritiene dimensione complessiva di una fisarmonica può cambiare, se necessario, piuttosto che essere costretti a una dimensione consistente. (Naturalmente, ci sono contesti, come lo schermo di un dispositivo mobile, in cui può essere una scelta valida o anche un vincolo di design che una fisarmonica mantenere una dimensione consistente.)

Una maggioranza molto lieve (51%) ha suggerito che le fisarmoniche di aprire al clic (a differenza di hover) e una quasi altrettanto grande minoranza (45%) ha detto che dipende. È interessante notare che meno del 4% è disposto a indicare il fisarmoniche dovrebbe aprirsi allo sfioramento come una regola.

Le osservazioni scritte su tale questione ha offerto un sacco di buon cibo per il pensiero, come ad esempio:

L'apertura di un pannello dovrebbe richiedere un intervento esplicito. Se una fisarmonica ha più pannelli, apertura sul passaggio del mouse potrebbe essere una esperienza stridente. Piuttosto, utilizzare un tooltip per trasmettere i dati principali di ciò che è nel pannello, e che l'utente in modo esplicito "click" per aprire quel pannello.

Dipende dalla configurazione di ogni fisarmonica.

Ho messo insieme questi esempi [ di più , rollover ], per cui lo sviluppatore può effettivamente utilizzare le "best fit" per ciascun caso d'uso.

Inoltre, ci dovrebbe essere l'opzione per utilizzare rollover con regole diverse: (più aperto) o (elementi dovrebbero essere aperto solo al passaggio del mouse).

Per usi avanzati, una fisarmonica dovrebbe aprire il passaggio del mouse durante le operazioni di drag and drop. In qualsiasi altra circostanza, non ti puoi fidare che l'hover è intenzionale.

Accessibilità

Infine, abbiamo chiesto a uno di pesca domanda aperta per eventuali problemi di accessibilità noti con fisarmoniche e un sacco di grandi risposte. (Per il nostro problema, ad esempio, la maggioranza delle persone convenuto che, per rendere l'intera etichetta cliccabile e non solo una piccola icona è importante.)

Ecco un campionario di intuizione altri sull'accessibilità con fisarmoniche:

Penso che sia lecito ritenere che una interazione fisarmonica è una interazione avanzata. Un sacco di problemi di accessibilità possono sorgere.

1. Il contenuto è nascosto dietro i pannelli così la gente non la può trovare.
2. A seconda delle dimensioni dell'area cliccabile o il grilletto per aprire / chiudere i pannelli ci potrebbero essere problemi con la manualità necessaria.

Fisarmoniche dovrebbe aprire tutti i pannelli se javascript non è disponibile (anche se che può produrre un "flicker" per quelli con javascript).

Dipende se il contenuto nei pannelli nascosto è presente nel DOM o viene recuperato dopo l'apertura del pannello. Se è stato ripreso, focus deve essere posto sul pannello appena aperto.

Beh, io veramente credo che il titolo dovrebbe essere cliccabili, specialmente se il contenuto dell'elemento verrà caricato utilizzando AJAX (proprio come un approccio tabview), ma la realtà è che a volte lo sviluppatore (dovrebbe) / (vuole) il controllo personalizzare il comportamento. Ecco l'elenco di esempi che ho creato per una implementazione basata su widget fisarmonica YUI 2.x, è probabilmente uno dei componenti più utilizzati da YUI estensione bolle.

Abbiamo avuto un caso in cui l '"etichetta' della fisarmonica è un link ad un post sul blog pieno, e quindi non poteva essere a fisarmonica cliccabile. In questo caso, abbiamo scritto un icona nella sorgente con js per fare il lavoro. A condizione che l'icona è sufficientemente ampio e / o viene fornito con una accesskey, non vedo un grosso problema ...

Fisarmonica controlli server al fine di lotti montaggio di contenuti in meno spazio. Poiché questo è un problema visivo, sarebbe bene per uno screen reader per leggere semplicemente tutti i contenuti e ignorare il fatto che viene visualizzato come una fisarmonica visivamente. E 'sufficiente che l'icona sia cliccabile per espandere un pannello. Ci potrebbe essere una opzione di configurazione per consentire l'etichetta intera per espandere un pannello, oppure può essere lasciata allo sviluppatore di applicazione di allegare un listener per l'etichetta che richiama un pubblico "aperto" o "funzione di espandersi per aggiungere tale funzionalità.

Basti pensare a una fisarmonica come vista a schede. L'intera area etichetta pannello dovrebbe essere cliccabile, ma se contiene altri controlli (ad esempio un "licenziare" o "chiudere" il tasto) Suggerisco solo l'etichetta (testo) è cliccabile, o almeno la zona clikable solo ampliare fino al interattiva controlli (vale a dire per una didascalia contenente un pulsante, l'area sopra, sotto e "dopo" il pulsante deve essere cliccabile).

Rilasciando il progetto di Pattern

Un commentatore in discussione i vincoli artificiali del sondaggio (un poliziotto giusto, se mi chiedete):

Non mi piaceva questa indagine. Le domande non sono state abbastanza flessibile. Come designer / sviluppatore, credo che tutti gli elementi di interfaccia devono essere adattati alle determinato sito o applicazione web. Fare domande in bianco e nero non lascia spazio per le ovvie differenze tra i progetti. Alcuni progetti hanno bisogno di un regola ferrea, mentre la stessa norma potrebbe essere del tutto inadeguato per un'altra applicazione. Per la maggior parte, avrei potuto rispondere a ogni domanda con un "dipende" risultato.

Siate certi che il modello solo dolcemente raccomandare e il codice di YUI sarà flessibile e potente. L'indagine non è stata concepita per limitare le scelte delle persone, ma piuttosto quello di raccogliere opinioni e preferenze, quindi anche un feedback di non avere regole rigide e veloce è utile.

Abbiamo pubblicato una versione beta del modello di fisarmonica di Yahoo! Design Pattern Library. Se desideri dare un feedback ulteriormente sul modello, in una forma maniera libera, si prega di goccia o visitare il relativo forum di discussione.

Trova le conversazioni: bloglines | technorati

Condividere ed estendere: Bookmark con del.icio.us | digg it! | reddit!