risposta-alla-domanda-sullo-sviluppo-web-bd.com

Come dovresti dimostrare che una fisarmonica si espande?

Quando si dispone di una fisarmonica, è necessario un modo per mostrare lo stato corrente espanso.

Esistono diversi modi per gestirlo, e ciascuno viene utilizzato da un numero di siti Web e framework rispettati. Quindi non è chiaro quale metodo sia meglio usare in quale situazione.

Quando è meglio usare quale metodo? Punti bonus per qualsiasi studio su questo.


Nessun simbolo, solo colore per indicare l'espansione

Gmail per Android utilizza questo, ma qui ci sono alcuni esempi più chiari:

enter image description hereenter image description here


Chevron a sinistra e in basso a destra

Questi sono usati dalla BBC Global Experience Language :

enter image description here


Chevron su e giù a destra

Questi sono utilizzati nella documentazione delle Linee guida per la progettazione di Android e in Silverlight .:

enter image description hereenter image description here


Chevron destro e basso a sinistra

enter image description here


Più (+) e meno (-) simboli sulla destra

Questo è usato come predefinito in ExtJS

enter image description here


Più (+) e meno (-) simboli a sinistra

enter image description here

77
JohnGB

Passo un po 'di tempo a esaminare varie opzioni per fisarmoniche (in parte scrivendo la domanda), e sebbene non sia definitivo, il mio pensiero attuale è il seguente:

Sinistra vs destra

Se hai caselle di controllo nella tua fisarmonica, ha senso avere l'indicatore sul lato opposto alle caselle di controllo. Ciò serve principalmente ad evitare la situazione con molti indicatori molto vicini tra loro, ma rende anche meno probabile per un utente selezionare accidentalmente un'opzione quando la sua intenzione era quella di selezionare l'altra.

Questo è un ragionamento simile al perché il selettore a stella e la casella di controllo si trovano su lati opposti in Gmail per Android.
enter image description here

Altrimenti, avere le caselle di controllo a sinistra o a destra sembra essere principalmente una decisione di progettazione. Dal punto di vista del design preferisco il diritto in quanto mantiene l'attenzione dell'utente sul contenuto.

Affordance

Se non si dispone di un'icona come indicatore, ci sono poche indicazioni che si sta guardando una fisarmonica anziché un semplice elenco. Questo potrebbe non essere un problema per molte persone, ma vorrei consiglio di avere una qualche forma di indicatore. Ciò dovrebbe renderlo più facile da usare, a spese (discutibile) di avere un design più intenso.

Facilità di scansione e comprensione

Usare un gallone su/giù o sinistra/destra è sempre stato problematico per me. Non sono mai sicuro che il chevron sia uno stato o un'azione, ed è difficile per le persone dislessiche dire la differenza. sinistra/giù (indicatore a destra) o destra/giù (indicatore a sinistra) sembra causare la minima confusione pur essendo facile da scansionare.

+ e - sono i più chiari in termini di ciò che fanno, ma hanno dimostrato (nei test interni) di essere più lenti da distinguere durante la scansione rapida. Quindi eviterei questi se la velocità di scansione è importante.

Colore e tonalità

Questa è la più semplice in cui l'uso del colore (o della tonalità) per indicare che un oggetto è stato espanso è sempre una buona idea. Può essere molto sottile e distinguere tra oggetti collassati ed espansi.

Google sottile nelle loro Android, ma consiglierei di chiarire la differenza.

enter image description here

9
JohnGB

Suggerisco di combinare questi:

  • chevron a destra (più naturale, soprattutto al tatto, ma senza offesa se lo lasci a sinistra) - ovviamente, l'intera barra dovrebbe essere cliccabile per espandere/contrarre - non solo il chevron
  • rientro per il livello inferiore
  • colore di sfondo (più chiaro per livelli inferiori)
  • ombra (per mostrare che il livello inferiore è dietro/sotto quello superiore)
  • facoltativamente: espandere/contrarre il testo a destra

Credo che la combinazione possa essere davvero piacevole, quindi non ha senso sceglierne solo una, mentre tutti rendono il design più chiaro per l'utente.

18
Dominik Oslizlo

Eccone uno per iniziare la discussione. Quello che vedo è una domanda sulla migliore rappresentazione dello stato del sistema in un menu a fisarmonica. Visibilità dello stato del sistema dalle 10 euristiche sull'usabilità di Nielsen. Di seguito sono riportate le mie motivazioni per ciascuna opzione:

Nessun simbolo, solo colore per indicare l'espansione:

Stato rappresentato dal colore.

Design minimale e funziona bene per un normale utente Web (qualcuno che è abbastanza intelligente da sapere come navigare sulla pagina Web). Anche se il tuo secondo esempio (strumenti del weblog) non è la stessa cosa di quello di Gmail. Gmail utilizza 3 colori, selezione = verde, voce di menu principale = grigio scuro, voci di sottomenu = grigio chiaro. Considerando che, il weblog sta usando solo 2 colori. Sento che il sistema a 3 colori ha un invito all'azione migliore rispetto al sistema a 2 colori.

Chevron:

Stato rappresentato da galloni/frecce.

Personalmente, preferisco sinistra e giù rispetto a destra e giù e su e giù.

su e giù richiede più tempo per capire. Up significa che l'intestazione sale per rivelare cose? O il contenuto scorre nell'intestazione?

right & down sono semplici da capire (IMO), punti giusti verso il titolo e punti verso il basso verso il contenuto dalla barra del titolo.

left & down sono la mia scelta preferita. Hanno la stessa semplicità di right & down ma non sono necessariamente a tuo avviso. Puoi controllare lo stato dando un'occhiata al gallone all'estremità destra, oppure puoi continuare a leggere i titoli sull'estremità sinistra.

Più (+) e meno (-):

Stato rappresentato dai simboli +/-

Lo stesso argomento dei galloni, I preferisco il posizionamento dell'estremità destra dei simboli +/- poiché sono presenti, ma nella periferia e non richiedono necessariamente la mia attenzione.


Un'alternativa che hai perso è: Doppia applicazione dello stato, usa il colore in combinazione con i simboli chevron/più-meno.

Ora la scelta tra chevron, +/- o i colori della barra è più per me una decisione di progettazione. Ma prima di tutto proverei a vedere se la doppia applicazione sembra utilizzabile o meno. Altrimenti, sceglierei i chevron/più-meno per un tema più minimale (se non stai usando molti colori) e andrei con il colore se voglio un design minimale più incentrato sui colori in cui hai molti colori ma non molte icone simboli /.

6
rk.

Quelli che personalmente mi piacciono di più sono quelli, ma non per nessuno dei motivi citati

enter image description hereenter image description here

Nel primo, a parte il colore di sfondo, è ovvio che gli elementi vengono eliminati dall'elemento sopra di loro perché gli elementi secondari sono tutti rientrati.

Nel secondo, è ovvio che l'elemento e il testo sottostante appartengono perché, a differenza di tutti gli altri esempi, non c'è un divisore tra di loro. Ancora una volta, anche il diverso colore di sfondo è importante, per indica che è selezionato.

Onestamente non ho nemmeno notato quali esempi presentavano frecce rivolte verso l'alto o verso il basso o fuori dallo schermo, o addirittura nessuna freccia. Ciò che è veramente importante è riuscire a dire a colpo d'occhio quali elementi sono raggruppati come sottomenu dell'elemento sopra di essi. Quindi, ad esempio, questo:

enter image description here

è terribile; le voci secondarie hanno lo stesso sfondo, stesso carattere, stesso rientro, ecc.

+1 Chevron destro e basso a sinistra

Questo è un simbolo dell'interfaccia utente comunemente usato e la maggior parte delle persone lo riconoscerebbe dalla propria esperienza.

3
Sohan

Penso che le frecce rivolte verso il basso sulla sinistra funzionino meglio, i + se -s sono fastidiosi e rendono il tuo cervello confuso. Mi piacciono le cose sul lato sinistro, ma sono destrimano, quindi potrebbe avere un'influenza. E le frecce che puntano verso il basso o attraverso sono belle, di solito puoi facilmente capire cosa significano. Dovrebbe esserci anche un rientro, i colori dovrebbero avere un contrasto medio, come aperto = bianco e chiuso = grigio chiaro.

2
pythonlover

Dall'articolo: Dove posizionare le icone Le icone del menu della fisarmonica

"Esistono due icone comuni utilizzate per il collasso: l'icona meno e l'icona X. Gli utenti possono interpretare erroneamente l'icona meno perché rappresenta spesso la rimozione o l'eliminazione. Gli utenti non devono sentirsi come se stessero perdendo le opzioni di menu quando comprimono il menu.

L'icona X rappresenta il collasso migliore perché viene spesso utilizzata per chiudere le finestre modali. Quando gli utenti comprimono il menu, lo chiudono, non lo perdono. Questo è più in linea con ciò che gli utenti stanno facendo e ciò che si aspettano ".

2
Trebles57

Usa le abitudini apprese da quasi vent'anni con Windows, in particolare Windows Explorer, e in molti alberi visualizza tutto il Web: [+] e [-] a sinistra.

Sarai sicuro che tutti gli utenti riconosceranno quei simboli ergonomici.

E fai attenzione con la freccia a sinistra, è nuovo con l'interfaccia mobile per spiegare che c'è una pagina dopo, quindi mantieni la freccia per questo comportamento. Sono d'accordo con alcuni scritti, la freccia giù e sinistra o giù e su sono confuse. ..se se devi pensare un po 'di tempo ciascuno usi un'interfaccia. ... la scelta non è buona.

1
pierre lebailly

Dai un'occhiata a questo articolo UX sui menu a fisarmonica e sulla posizione dell'icona. Questo ti dirà che la prossima opzione è la migliore:

enter image description here

0
Userflow