design-web-toolkit valutare posizione menu di navigazione (sx / dx)

Credo che la navigazione sia la parte più complessa di un sito web, e qui si sono aperte diverse questioni. Provo ad esprimere con ordine le mie opinioni. Il menu off-canvas implementato nel toolkit lavora bene ma credo sia migliorabile per quanto riguarda i seguenti aspetti:

il livello di profondità esplorabile da menu deve secondo me essere limitato, onde evitare che diventi davvero troppo lungo (anche se lo spazio è teoricamente infinito) - probabilmente questo si può tradurre in una raccomandazione.
Quando ci sono molti menu aperti, la freccia 'su/giù' non aiuta a capire cosa è aperto e cosa è chiuso. Proporrei l'utilizzo di '+' e '-', come suggerito in questo articolo http://uxmovement.com/navigation/where-to-place-your-accordion-menu-icons/ - nello stesso articolo viene proposto di mettere l'icona sulla sinistra, ma su questo ho qualche riserva in più. In alternativa credo aiuterebbe un meccanismo che, quando si apre una voce di menu per esplorare i figli, chiudesse un eventuale altra voce aperta sullo stesso livello (in questo momento il menu ha questo comportamento solo al primo livello). In tal caso sono convinto che la freccia non risulterebbe più così fuorviante.
lo schema colori del menu nell'off-canvas mi risulta incomprensibile. O meglio, è comprensibile solo dopo un confronto delle varie voci aperte/chiuse, ma è uno sforzo che l'utente non dovrebbe fare: secondo me meglio lasciare lo sfondo sempre uguale e demandare all'accoppiata "icona/spazio a sinistra" l'indicazione della struttura (che deve comunque essere limitata come numero di livelli).
se una voce di menu ha dei figli, come raggiungo la pagina legata a quella voce? Sono d'accordo sulla soluzione indicata su www.funzionepubblica.gov.it (fatta da @gunzip su questa issue - https://github.com/italia-it/ita-web-toolkit/issues/10), è pur vero che lì la struttura è semplice e ci sono 4 voci di menù che contengono figli, quindi il tutto è molto semplificato. Ancora una volta, il numero di livelli esplorabile da menu deve essere limitato.
ricordo una implementazione leggermente diversa di menu, che era presente nella versione 4 (vado a memoria) del Framework Zurb Foundation. E' quella che viene chiamata "the ol' right-to-left" in questo articolo: http://bradfrost.com/blog/web/complex-navigation-patterns-for-responsive-design/ - Il menù "si sposta" di livello od ogni navigazione, restringendo il contesto ad ogni passo. Non è altro che il vecchio "drill down", che però risulta a mio avviso efficace su mobile.

Una volta limitato il numero di livelli esplorabile da menù, succede che a un certo punto la navigazione si sposta "nella pagina": come presentare la navigazione "di sezione" in una pagina che abbia ancora dei figli? Potrebbe essere con i "link in evidenza" mostrati qui https://italia-it.github.io/ita-web-toolkit/components/detail/page--default.html, anche se l'utente ci arriva solo dopo aver letto il testo di quella pagina. Oppure l'idea era quella di utilizzare i link "correlati" sulla destra, come avviene qui http://www.funzionepubblica.gov.it/dipartimento-della-funzione-pubblica? (sulla destra c'è una sorta di menù dove vedo i figli della pagina). Non sono certo di essere d'accordo su questo: elementi correlati ed elementi figli sono due cose diverse a mio avviso, e andrebbero mantenuti separati. Certo che quell'elemento posizionato sulla destra e che somiglia molto a un menu risulta forse fuorviante.

Tutte queste considerazioni valgono in modo particolare per il comportamento del menu su mobile, perché su Desktop, posto che le voci di primo livello devono essere limitate, l'utilizzo del menu è a mio (e non solo) avviso, imbattibile: https://www.nngroup.com/articles/hamburger-menus/

Ah, ho già detto che il numero di livelli esplorabile da menu dovrebbe essere limitato?

Oct 12 '16 13:10 mirkobattisti

il livello di profondità esplorabile da menu deve secondo me essere limitato, onde evitare che diventi davvero troppo lungo (anche se lo spazio è teoricamente infinito) - probabilmente questo si può tradurre in una raccomandazione.

assolutamente, deve essere limitato ma in merito alla raccomandazione, purtroppo è più complesso: va definita l'architettura dell'informazione (almeno il primo livello) per le diverse tipologie di PA.

Quando ci sono molti menu aperti, la freccia 'su/giù' non aiuta a capire cosa è aperto e cosa è chiuso. Proporrei l'utilizzo di '+' e '-'

ok, lo propongo. avevo notato l'utilizzo di +/- qui: https://standards.usa.gov/accordions/, personalmente lo trovo 'destabilizzante' rispetto ai 'caret', tuttavia consideriamo l'approccio :)

lo schema colori del menu nell'off-canvas mi risulta incomprensibile. O meglio, è comprensibile solo dopo un confronto delle varie voci aperte/chiuse, ma è uno sforzo che l'utente non dovrebbe fare: secondo me meglio lasciare lo sfondo sempre uguale e demandare all'accoppiata "icona/spazio a sinistra" l'indicazione della struttura (che deve comunque essere limitata come numero di livelli)

ok (potrebbe esser utile individuare con un colore diverso almeno le voci espanse in modo da poter ricostruire il 'percorso' ?)

ricordo una implementazione leggermente diversa di menu, che era presente nella versione 4 (vado a memoria) del Framework Zurb Foundation. E' quella che viene chiamata "the ol' right-to-left" in questo articolo: http://bradfrost.com/blog/web/complex-navigation-patterns-for-responsive-design/ - Il menù "si sposta" di livello od ogni navigazione, restringendo il contesto ad ogni passo. Non è altro che il vecchio "drill down", che però risulta a mio avviso efficace su mobile.

ok, ma

complica ulteriormente il problema del 'dove sono' (rimane solo la voce precedente visibile)
per tornare alle voci di primo livello ho bisogno di una sequenza di 'back-back-back' che non è necessaria con la vista ad albero

Oct 12 '16 13:10 gunzip

Oppure l'idea era quella di utilizzare i link "correlati" sulla destra, come avviene qui http://www.funzionepubblica.gov.it/dipartimento-della-funzione-pubblica?

si, l'idea era quella: https://italia-it.github.io/ita-web-toolkit/components/preview/page--section.html

Oct 12 '16 14:10 gunzip

C'è qualcosa che mi lascia perplesso nel mettere la navigazione di sezione sulla destra e "mescolata" con i contenuti correlati.

Nella pagina https://italia-it.github.io/ita-web-toolkit/components/preview/page--section.html, su schermi piccoli, compare un link in alto che indica "Esplora contenuti correlati", ma qui si sta dicendo che tra i "contenuti correlati" ci va anche la navigazione di sezione. Secondo me sono due cose diverse, e come tali andrebbero trattate. Allo stesso tempo non sono sicuro della posizione della navigazione di sezione per quando riguarda la visualizzazione desktop. Non so se siano stati fatte analisi di usabilità su questo, ma io sarei per un approccio simile a questa pagina: https://standards.usa.gov/page-templates/docs/

In questo senso, la struttura completa della pagina potrebbe essere su desktop:

Navigazione di sezione - Contenuto principale - Contenuto correlato

con le adeguate sistemazioni, il reale ordine degli elementi (che compare su mobile) dovrebbe essere:

Contenuto principale - Navigazione di sezione - Contenuto correlato

Ovviamente, pagine diverse potrebbero avere variazioni di questa struttura:

solo contenuto principale,
contenuto principale e navigazione di sezione
contenuto principale e contenuto correlato
full stack: contenuto principale, navigazione di sezione, contenuto correlato

Non è nulla di innovativo, ma credo che con questo genere di struttura si riesca a coprire la totalità delle necessità di presentazione.

[a margine aggiungo che nella pagina https://italia-it.github.io/ita-web-toolkit/components/preview/page--section.html c'è uno spazio tra il contenuto principale (largo 6) e la colonna "di destra" (larga 4 ma con offset di 2)]

Oct 13 '16 06:10 mirkobattisti

ok, lo consideriamo. qualche appunto:

non sono stati fatti test riguardo la posizione del menu, ma tramite eye-tracking è stato verificato che la parte in alto a sinistra (sotto l'header) è quella che, senza dubbio, catalizza maggiormente l'attenzione.

credo sia il motivo per il quale si sia scelto di mettere a sx il contenuto principale e ipotizzo che sia lo stesso motivo per il quale govuk lo propone nella stessa posizione (es. https://www.gov.uk/book-theory-test).

i link in-page (come nell'esempio che hai citato) sono un caso a parte poiché afferiscono direttamente al contenuto della pagina che si sta visualizzando (non è un menu di sezione quello in https://standards.usa.gov/page-templates/docs/) e ne costituiscono quindi l'outline (va bene quindi che siano anche sopra il contenuto su mobile).

Oct 13 '16 07:10 gunzip