08
08
08

Radial Menu Prototype, Mac OSX style

20:59 Technocracy

Ragionavo l’altro giorno con Simbul su alcuni dei prototipi e concept presentati nel contesto del Mozilla Lab per presentare possibili visioni future nell’esperienza d’uso del web.

E’ uscita una riflessione sui menu radiali (o pie menu), così mi sono messo a pensare ma l’unico caso che ricordo di approccio funzionale al problema è quello di Maya. Ci sono sì moltissime altre soluzioni, come ad esempio Neverwinter Nights (nei giochi è più frequente) ma molto spesso hanno problemi: l’approccio che usa solo icone, oltre ad essere poco denso informativamente, è anche poco comprensibile nel colpo d’occhio e richiede un apprendimento sensibile.

Non venendomi in mente nessun esempio di menu radiale ben strutturato, modulare, scalabile ed esteticamente piacevole, ho pensato di preparare un mockup seguendo le linee guida di Apple (HIG).

Dietro questa scelta vi sono alcune considerazioni di portata più e meno ampia, ma vorrei sapere la vostra opinione in merito. :)

Vi lascio quindi con due domande:

  1. Pro e Contro di questa soluzione?
  2. Avete esempi di menu radiali che ritenete efficaci, efficienti ed esteticamente piacevoli?

18 comments Add yours below

1

SW 2008 08 08 at 21:09

mmhh... così a occhio, di primo acchito, direi che questo tipo di soluzione può essere un po' troppo... pesante? rischio di troppe informazioni?
2

Folletto Malefico 2008 08 08 at 21:42

Il punto è esattamente opposto: se "devo" mettere molte informazioni a schermo, è meglio usare un menu radiale che uno lineare, perché quello radiale risulta estremamente più veloce, ancora di più se i 4 quadranti sono semanticizzati (ovvero, ognuno risponde ad uno specifico scopo).
Pensa all'esempio minimo: 4 voci. Una su ogni angolo, rispetto a una sotto l'altra, risulta essere più efficiente (più vicino al mouse). :)
3

Roberto Ostinelli 2008 08 09 at 01:30

1. la tua è una soluzione ibrida: quattro menu verticali disposti a raggio obbligano ad una lettura dapprima circolare e poi verticale. l'occhio segue una forma direzionale di visualizzazione che in questo caso viene a modificarsi, e, a mio avviso, questo è controproducente.

ciò detto, immagino tu proponga un raggruppamento funzionale, e pertanto ritengo che questa disposizione, se accoppiata ad un relativo grado di familiarità con l'interfaccia, possa portare risultati apprezzabili [ad esempio: voglio cambiare la formattazione di un testo, e so che tutte le funzioni di formattazione del carattere sono nel quadrato in alto a dx].

2. in effetti è raro pensare ad applicativi che utilizzino detti menu in modo soddisfacente. uno dei primi che mi è venuto in mente è quello disponibile su http://songza.com/, ma in effetti è particolarmente semplice e non ha certo cambiato la storia delle interfacce :)

ciò detto se li chiami 'pie menu', come sono in realtà meglio conosciuti, trovi delle cose particolarmente divertenti, anche decisamente datate quali http://www.donhopkins.com/drupal/taxonomy/term/18 :)
4

Folletto Malefico 2008 08 09 at 12:49

1. Si, è ibrido, ma il fatto è che un menu radiale "puro" è praticamente impossibile, perché almeno un cambio di direzione deve comunque esserci: leggere. ;)

Bisogna sempre valutare rispetto a quale alternativa si sta elaborando: l'alternativa è una lunga, singola lista. Per questo motivo il rallentamento cognitivo di una ricerca su 4 direzioni è compensato dal fatto che l'equivalente menu sarebbe stato invece una lunga e lenta ricerca lungo una singola direzione. :)
Come noti poi giustamente, un raggruppamento funzionale migliora ulteriormente la resa.

Songza è una soluzione molto carina per quanto si, semplice. Aza Raskin ha studiato un bell'approccio. :)
5

Riccardo 2008 08 10 at 00:55

fermo restando che ero, sono e resterò un fondamentalista del RTFM + keyboard shortcut :)

1. soluzione interessante. Come Roberto non sono sicuro di quanto saranno felici i miei occhi di farsi il giro ogni volta, specie se i menu sono lunghi (potrebbe volermici un attimo per identificare i menu). Le altre perplessità sono:
a) cosa succede quando voglio riportare più di quattro menu? o forse
b) i menu sono sempre gli stessi?
c) il menu radiale così impostato è "coprente": perdo di vista il contesto, ergo l'oggetto sul quale sto lavorando. Ora, questo non dovrebbe essere un grosso problema, visto che l'interazione con il menu è per definizione breve, ma non mi stupirei se gli utenti reagissero con fastidio (un esempio banale che mi viene in mente: non puoi verificare che l'oggetto che stai puntando sia quello giusto).
d) cosa succede se attivi un menu vicino ai bordi dello schermo? nel caso di un menu tradizionale le HGI mi sembra specifichino che il menu deve apparire interamente nello schermo, ma se le segui significa che il "centro" del tuo pie menu non sarà sotto al mouse, ed il centro (che nel caso dei pie menu funziona un po' da "mirino") sarà da qualche parte verso il centro schermo. Confusione, paura e delirio ;)

2. Boh, non mi viene in mente molto oltre ai già citati songza (che non riesco ad usare) e giochi vari.

Detto questo, ho dei seri dubbi sul fatto che meno pixel = maggiore efficienza. Lo è da un punto di vista puramente meccanico, ma nel nostro relazionarci quotidianamente con il computer portiamo comunque a spasso per chilometri il mouse inutilmente (foss'anche solo per toglierlo di mezzo dalla finestra attiva). Non credo che risparmiare qualche pixel possa fare una grande differenza, o che, se preferisci, non sprecheremmo comunque un sacco di movimento in pixel "spuri".
A questo punto, forse, preferirei un approccio basato sulle gesture. sì, ok, vanno imparate, ma in fondo anche l'uso del tasto destro.
6

Folletto Malefico 2008 08 10 at 23:52

Dalla risposta credo ci sia stato un leggero fraintendimento, quindi chiarisco anche se magari ho capito male: questo è un prototipo per un modo di gestire menu, non per realizzare un software add-on (stile Quicksilver o Sapiens) che mi riporti delle voci system-wide. :)
E' come se a livello di sistema operativo fosse stata fornita una classe RadialMenu oltre che Menu, per gestire questa tipologia di interazione. :)
In altri termini è come Maya o Neverwinter Nights: un menu specifico, che si attiva su un oggetto specifico, in una applicazione specifica. A scelta dello sviluppatore.

Quindi, credo che (a) e (b) come domande decadano, o sbaglio? :)

Il punto (c) ha centrato invece una delle mie principali preoccupazioni di questa proposta. :)
Ho tentato di risolverlo mettendo un "puntatore" romboidale al centro, in modo da sottolineare il punto di click, e leggerissimamente aiutano i menu con una minima trasparenza. Non risolvono il problema alla radice.

Il punto (d) è sicuramente critico e probabilmente è "il" motivo per cui non ha mai preso piede alcuna forma di menu radiale. Dovrei capire cosa succede quando fai lo stesso in Maya o NWN per avere una metrica. Sinceramente non ricordo.

Sull'efficienza, per quanto posso anche concordare che non è sempre detto che meno pixel si traducano in maggiore efficienza, ci sarebbe il vantaggio addizionale di poter "spezzare" i contenuti in modo semantico nei 2-3-4 quadranti, cosa che secondo me rappresenta il principale punto di forza di questo tipo di layout.

Però attenzione: i movimenti "non attuativi" come spostare il mouse per leggere e altre azioni circostanziali non rappresentano un controesempio, perché di fatto si applicano sempre e comunque: come se non si applicassero mai. :)

Il vantaggio di un sistema radiale non è solamente quello della rapidità di click (che in effetti questa soluzione in particolare non massimizza particolarmente) ma anche quello dell'eliminazione dell'effetto blob e della memorizzazione meccanica di una direzione ("in alto a destra c'è la funzione X"), due effetti che migliorano sia la percezioe che l'interazione.
7

Cristian Conti 2008 08 12 at 12:54

Dopo il primo spaesamento mi sembra un'idea interessante, soprattutto per ovviare a quei menù verticali infiniti.
Io ci vedrei bene un sistema che fosse in grado di cambiare la visualizzazione dei menù: se non ci vado sopra appare una icona che rappresenta le funzionalità di quel menù, poi andandoci sopra appaiono le varie voci. In questo modo sarei meno stressato da una trentina di voci che il mio occhio proverebbe ogni volta a leggere.
Poi come dici tu, la memorizzazione spazio-funzione supplisce con l'uso al numero di funzioni possibili.
8

Antonio Patti LdF 2008 08 14 at 00:37

Nonostante possa rappresentare una barriera e un'ennesima cosa da imparare, non potrebbe decidersi se attivare menù verticali o orizzontali con uno o due click?

Inoltre da buon cafonal quale sono, farei una differenziazione cromatica oltre che semantica tra le voci del menù rotante e allineerei (ma si scrive così?) i menù di sinistra, a sinistra appunto.

Per la copertura dalla zona puntata, a parte che si potrebbero utilizzare delle trasparenze che almeno un po' attenuerebbero il problema, e poi boh..considerate che un utente che necessita di quella quantità di informazioni non è un newbie, quindi è disposto a sacrfici, apprendimento e qualche sacrificio.

Ad un utente medio copia e incolla basta e avanza se sa usarlo!
:-)
9

leeander 2008 08 17 at 11:01

Il trucco credo sia nel non pensare che RADIALE debba per forza essere STATICO.

- TEMPO
- PERTINENZA
- PROATTIVITA' / PREDITTIVITA'

possono essere alcune delle dimensioni da utilizzare per progettare menu radiali dinamici.

Pensiamo alle tecniche di interazione per l'era dei computer intelligenti e non per l'era dei computer meri esecutori. Credo questa possa essere la sfida. :)

come al solito... IMAO :)))

ciao
leeander
10

Cyanto 2008 08 17 at 18:54

Segnalo DENIM ( http://dub.washington.edu:2007/denim/ ) che è un software per fare mock-up di siti web. E' dotato di un menu radiale, credo che sia visibile dai video messo a disposizione sul sito.

A mio parere è molto interessante il fatto che vengano gestiti radialmente molti livelli di menu.

La soluzione potrebbe essere migliorata, sopratutto perchè l'opacità del menu copre lo stage di lavoro e questo diventa problematico, sopratutto se si usa il menu per manipolare oggetti... ovviamento mi riferisco alla situazione d'uso del software.

Saluti
11

Folletto Malefico 2008 08 18 at 20:17

@Cristian:
Io sono più portato per la visualizzazione immediata di tutti i contenuti, in modo intelligente (categorie, spazi, bilanciamenti, colori) piuttosto che nasconderlo in varie forme (aperture, titoli, sottomenu). :)

Il motivo è che il problema nel presentare tutto subito è di "overload", ma questo si ha solamente nei primi utilizzi del sistema, quando si ha un impatto di "troppo". Questo spesso si risolve semplicemente ristrutturando la modalità di interazione (con metodologie espresse da Leandro qualche commento dopo).

Quando invece le informazioni sono "quelle e proprio quelle, non si possono rimuovere" (per varie ragioni) allora secondo me conviene sempre visualizzarle. :)


@Antonio:
1. Come dici giustamente: "barriera" e "cosa da imparare". Questo già è un buon indice per farti capire che è meglio evitare quel tipo di soluzione. :)
2. La cromatica è utile, ma non sempre e non in ogni caso. In questa situazione si parla di Mac, e quindi l'estetica complessiva impone l'uso di soli bianchi e neri. Il raggruppamento viene dato dalla spazialità dei menu, motivo per cui solitamente il colore non fornisce un gran valore aggiunto.
3. L'allineamento era una delle cose a cui avevo pensato, ma seppure forse esteticamente valido, inficia la lettura a scansione, perché obbliga a un continuo salto fra le varie righe: leggendo da sinistra a destra, dovremmo ogni volta trovare l'inizio.


@Lee:
Vero, quello è sicuramente un passo aggiuntivo per gestire la quantità delle informazioni da visualizzare. :)


@Cyanto:
Si, quella gestione del menu è analoga ad un plugin per Quicksilver (Mac), Radial Menu credo sia. Il problema è che in realtà in quel modo sta solamente complicando la vita all'utente: clicko in alto a sinistra, il menu appare in centro, devo cercare e navigare in tanti sottolivelli.
Ho quasi solamente svantaggi. :)

Interessante spunto, comunque, anche il software che hai segnalato. :D
12

Riccardo 2008 08 26 at 15:41

Sinceramente trovo anche io un menù di questo tipo eccessivamente pesante, e che comunque non aggiunge molto ai menù a cascata, che se vengono indicizzati secondo le buone regole dell'interaction desing, risultano molto più fruibili.

Comunque, penso che un menù in cui tutta l'informazione sia fruibile all'istante causi un enorme confusione, forse se fosse evidenziato il menù principale e gli altri visibili in sola trasparenza, sarebbe più facile trovare l'informazione richiesta, magari facendo girare il menù circolarmente con la rotellina, per evidenziare il menù sul quale intendiamo lavorare. (Spero sia stato in grado di spiegarmi :) )
13

Folletto Malefico 2008 08 27 at 12:22

Sui menu a cascata più fruibili è solamente una percezione dovuta alla quantità. Prendi un menu qualunque e riproponilo in modalità radiale e vedrai che la complessità relativa diminuisce, proprio per la migliore disposizione spaziale degli elementi che viene facilitata.
Calcola che il menu di esempio sopra ha ben 32 elementi sul mio portatile occuperebbe praticamente tutto lo schermo se fosse a cascata. :)
A questo aggiungi che i click sono più vicini e noti che hai guadagnato parecchio. :)

La fruibilità immediata di tutti i contenuti come detto è controproducente unicamente per l'impatto iniziale, ma alla fine è una soluzione più efficace: perché dovrei interagire con il mouse come proponi per poter vedere tutto? Non facilita: mi rallenta! :)
Un esempio banale: Microsoft aveva introdotto i menu che "automaticamente" nascondevano le voci inutili. Pessima soluzione, che infatti è svanita dalle versioni successive! :)
14

Riccardo 2008 08 27 at 20:16

Ma i menù a cascata non sono messi a caso, sono divisi in sottocategorie, se le categorie sono messe con intelligenza penso sia più veloce che trovarsi al centro del computer una rosa di menù che ti copre il resto della videata. Io non intendevo però oscurare le opzioni o i menù che non servono, ma renderle leggermente meno visibili (in trasparenza) di quella su cui stai leggendo, in questo modo, per chi inizia non c'è il problema dell'impatto iniziale, per chi conosce il sistema non ci sarebbe bisogno di scorrere, e l'effetto grafico sarebbe gradevole.

I geni della Microsoft avevano invece oscurato le voci che si utilizzava meno frequentemente con il risultato che le voci meno conosciute, erano anche quelle più nascoste :)
15

Folletto Malefico 2008 08 28 at 01:10

Quello che voglio farti notare è che la soluzione che proponi introduce complicazioni, senza risolvere il motivo per cui vuoi introdurla.
Ti spiego: vedere dei menu in trasparenza amplifica la confusione. I motivi sono molteplici: (1) non stai cambiando di fatto la quantità di informazioni a video [non risolve] (2) le persone cercherebbero comunque di leggere, questa volta con la trasparenza [fastidio] (3) "trasparenza" significa che vedi quello che c'è sopra E quello che c'è sotto, quindi rendendo più confuso l'aspetto complessivo [confusione] e (4) devi introdurre una modalità di interazione aggiuntiva, che complica non solo la percezione ma anche l'uso [una interazione in più].

L'utente esperto in una situazione simile non è mai il problema: lui vuole velocità, quelle opzioni servono e quindi le vuole il più velocemente possibile. Pensa sempre a Photoshop: è vero che la quantità di informazioni a video spaventa gli utenti iniziali, ma se sposti le voci per favorirli, non fai altro che rallentare gli utenti esperti.
La soluzione non è mai nascondere, infatti Adobe non l'ha mai fatto: al più ha migliorato l'interazione e ridotto ancora il numero di click (mostrando più roba!). :)
Pensa solo all'introduzione delle palette "apribili": in questo modo posso tenere sempre a schermo le palette che uso, anche se chiuse. Così invece di doverle andare ogni volta a riaprire e richiudere, ora sono sul lato e in una posizione spaziale precisa: un click e apro, un click e chiudo. Velocissimo (rispetto a prima) e sfrutta anche la memoria spaziale. :)

In ogni caso, come è stato evidenziato dagli ottimi commenti di tutti, la soluzione radiale non è sicuramente priva di difetti: aiuta alcuni fattori a discapito di altri. Come ogni cosa nel design, è sempre un problema di bilanciamento. ;)

Se non sei ancora convinto, prova a realizzare due o tre prototipi (che so, in Flash) e "sentire" come si svolgerebbe l'interazione che hai in mente rispetto agli altri casi. :) Chissà, magari sbaglio. ;)
16

Riccardo 2008 08 28 at 17:50

Non saprei probabilmente hai ragione, ma pensaci, un click destro sullo sfondo ti windows ti aprirebbe 3 maschere, quella base, quella di disponi econe per, e quella "nuovo", quando magari io volevo selezionare solo proprietà. Un conto un programma come photoshop fatto per utenti che probabilmente diventeranno esperti e hanno voglia di spendere un tot di risorse per imparare un conto è farlo con un sistema che dovrebbe essere usato da tutti che hanno una curva di attenzione molto ripida :). Sulla trasparenza io non la snobberei così tanto, se è vero che aggiunge un passo in più per alcune scelte, focalizza l'attenzione sulla maschera centrale per un fenomeno simile a quello figura e sfondo, e iinoltre rifletterei anche sui tipici movimenti oculari su uno schermo, parte superiore, parte al margine sinistro, proprio i movimenti necessari per scorrere il tradizionale menù a tendina, che poco si adattano a quello radiale.

Poi è solo per gusto di scambio di idee, non sono per nulla ferrato sul desing penso si veda :D
17

Yoghi 2008 11 11 at 12:58

girovagando in rete ho trovato : http://www.cssplay.co.uk/menus/circular-sub.html
18

Folletto Malefico 2008 11 11 at 13:50

E' una soluzione carina, che però ha gli stessi problemi dei menu circolari in generale e si limita a pochi elementi.
Solleva anche il problema delle icone: non sono immediatamente comprensibili e quindi rallentano la comprensione. :)

Cmq carina come implementazione. :P

Leave your Comment

required

required, hidden, never shared

Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Trackback this post ~ Subscribe to the comments via RSS Feed