Tavolozza QML: Design e accessibilità

Se volete farvi un'idea delle prossime novità sulle tavolozze date un'occhiata a: https://musescore.org/en/node/296153

Congratulazioni al team per il nuovo design delle tavolozze che presto uscirà con MuseScore 3.3!
Il precedente design della tavolozza è stato scritto nel tradizionale framework C+++ di Qt, che è ancora usato per la maggior parte del codice di MuseScore. Le nuove tavolozze sono la prima caratteristica principale ad essere scritte nel linguaggio QML basato su JavaScript di Qt, che fino ad ora è stato usato solo per i plugin di MuseScore. Il passaggio a QML dovrebbe portare molti vantaggi nel tempo, tra cui una maggiore flessibilità nella progettazione e una migliore scalabilità tra dispositivi e piattaforme.

L'aggiornamento della tavolozza include già nuovi elementi di design che apporteranno miglioramenti a tutti gli utenti. Grazie soprattutto al team per il tempo dedicato a garantire che la nuova tavolozza sia navigabile da tastiera e che funzioni ragionevolmente bene con un lettore di schermo a beneficio degli utenti non vedenti o ipovedenti!

Tuttavia, ci sono ancora dei miglioramenti che possono essere apportati, sia all'accessibilità per gli utenti di tastiera, sia al design visivo per gli utenti di mouse vedenti. Riassumerò il nuovo design seguito dai miei punti e suggerimenti.

Design corrente
Modello

Come le precedenti tavolozze C+++, le recenti tavolozze QML offrono un "albero" di simboli musicali. I rami dell'albero sono le diverse categorie di tavolozza (Chiavi, Indicazione metrica, Dinamiche, ecc.). Le foglie dell'albero sono i simboli (o "elementi della tavolozza") che rientrano in ogni categoria (ad esempio Re maggiore è nella tavolozza Indicazione metrica). Le tavolozze sono inizialmente collassate, ma possono essere espanse per rivelare i simboli che contengono.

Visualizzazione

Per gli utenti vedenti, i simboli all'interno di ogni tavolozza sono visualizzati come una griglia, ma questo è solo un trucco visivo per inserire più elementi sullo schermo e ridurre la necessità di scorrimento. Non c'è un significato particolare per le diverse righe e colonne della griglia, che può essere visto dal modo in cui la disposizione cambia quando la larghezza della tavolozza viene modificata (tanti elementi sono disegnati su ogni riga come meglio si adattano). Questo è importante perché influisce sull'accessibilità per le persone che non possono vedere la griglia.

Ricerca

Come per le vecchie tavolozze, esiste una casella di ricerca per filtrare rapidamente gli elementi della tavolozza per nome. Tuttavia, la posizione della casella di ricerca è cambiata: ora è posizionata sopra l'albero delle tavolozze piuttosto che sotto. Questo ha senso perché si vuole cercare prima di accedere all'albero, non viceversa. Posizionarlo sopra ha anche rimosso la scomoda distanza che esisteva tra le tavolozze e la casella di ricerca quando le tavolozze sono collassate.

Pulsante Aggiungi tavolozze

Lo commutatore dello spazio di lavoro di base/avanzato è stato spostato nella barra degli strumenti principale, è ragionevole perché non riguarda solo le tavolozze. Invece, ora abbiamo un pulsante "Aggiungi tavolozze" che appare a sinistra della casella di ricerca. Premendo questo pulsante viene visualizzato un congegno a comparsa che elenca tutte le tavolozze che sono nascoste nell'area di lavoro corrente. L'utente può scegliere di riattivare alcune o tutte le tavolozze nascoste - un'abilità che mancava dalle versioni precedenti di MuseScore - o di crearne una nuova da zero tramite il pulsante "Crea tavolozze personalizzate" in fondo al congegno.

Pulsante "Più elementi

Invece dell'ultimo "???" elemento misterioso ("Mostra di più") che era presente in alcune delle vecchie tavolozze C+++, la cella della griglia in basso a destra in ogni tavolozza è ora occupata da un pulsante "Altro". Piuttosto che aprire l'intera tavolozza Master, premendo questo pulsante viene visualizzato un congegno a comparsa che elenca solo i simboli che sono stati nascosti nella tavolozza corrente. Come prima, l'utente può aggiungerli alla tavolozza o direttamente alla partitura.

In questo congegno vengono visualizzate opzioni aggiuntive per alcuni tipi di tavolozze:

Tavolozza Indicazione metrica - c'è l'opzione per creare una nuova Armatura di chiave. Questo apre una finestra di dialogo separata dove gli utenti possono trascinare le alterazioni nella posizione desiderata su un pentagramma fittizio.
Tavolozza Indicazione metrica - c'è la possibilità di creare una nuova armatura di chiave. Si apre una finestra di dialogo separata in cui gli utenti possono inserire un numeratore, un denominatore e un gruppo di travi personalizzate.
Tavolozze personalizzate - l'utente può aggiungere elementi da qualsiasi altra tavolozza (non personalizzata). In questo modo si apre la possibilità di tavolozze miste che contengono simboli di altre tavolozze multiple.

Menù contestuali

Come per le tavolozze C+++, facendo clic con il tasto destro del mouse su una tavolozza qualsiasi, viene visualizzato un menù contestuale con le opzioni per salvare, caricare, personalizzare o nascondere quella tavolozza, o per inserire una nuova tavolozza prima di essa. Gli utenti non sono sempre consapevoli della presenza di menù con il tasto destro del mouse e questi menù sono difficilmente accessibili tramite tastiera o dispositivo a schermo tattile. Le tavolozze QML risolvono questi problemi rendendo il menù disponibile tramite un pulsante a tre punti a destra del nome di ogni tavolozza.
Un menù simile esiste per gli elementi della tavolozza, anche se è disponibile solo facendo clic con il tasto destro del mouse. Tuttavia, l'opzione "Cancella" del menù è disponibile tramite un'icona del cestino che appare accanto al pulsante a tre punti della tavolozza quando si seleziona un elemento.

Navigazione da tastiera

L'accessibilità nella tavolozza C+++ è stata gestita esclusivamente attraverso la casella di ricerca. L'utente digitava alcune lettere di una tavolozza o nome di un simbolo e poi usava i tasti freccia su e giù per navigare nei risultati della ricerca. L'albero delle tavolozza non era accessibile, così come le funzioni di personalizzazione. Fortunatamente questa situazione è stata quasi completamente rettificata e quasi ogni parte della tavolozza QML è accessibile agli utenti della tastiera tramite il tasto Tab.

Purtroppo il problema inverso esiste ora per gli utenti da tastiera. Ora che praticamente tutti gli oggetti sono disponibili in tabulazione, comprese tutte le tavolozze, gli elementi della tavolozza, le frecce di espandibilità/chiusura, i pulsanti a tre punti, e così via, la navigazione nell'intero albero delle tavolozze può facilmente comportare la pressione del tasto Tab 50 volte o più. La funzione di ricerca può aiutare a ridurre notevolmente questo numero, ma la situazione è ancora lontana dall'ideale.

Aspetto

L'aspetto generale è molto simile a prima, anche se sembra più chiaro nei dettagli. QML ha permesso l'uso di animazioni, così le tavolozze si espandono e collassano in un movimento fluido piuttosto che in un salto istantaneo. Le tavolozze e gli elementi della tavolozza possono ora essere riorganizzati tramite trascinamento, e gli elementi rimanenti si mescolano durante l'operazione di trascinamento per creare spazio e dare un'anteprima dal vivo del risultato finale prima di rilasciare il pulsante del mouse.

In una nota più pratica, i nomi delle tavolette sono più distanziati rispetto a prima, il che rende più difficile cliccare per caso su quella sbagliata - particolarmente importante sui dispositivi tattili - anche se ciò significa che sullo schermo si adatta un minor numero di tavolozze contemporaneamente.

I miei suggerimenti
1a) Spostare il pulsante Aggiungi tavolozze sotto le tavolozze

Posizionando il pulsante Aggiungi tavolozze nell'angolo in alto a sinistra si ottiene un risalto eccessivo. Il pulsante fornisce funzionalità importanti, ma non è necessario tanto spesso quanto le tavolozze o la funzione di ricerca. Logicamente, è necessario guardare le tavolozze esistenti prima di poter decidere se è necessario aggiungerne un'altra, quindi ha senso posizionare il pulsante Aggiungi tavolozze sotto le altre tavolozze.

Il pulsante Aggiungi tavolozze può essere ancorato al piede dell'area di ancoraggio come una volta, oppure può prendere il posto di una tavolozza finale, come una tavolozza "Altre tavolozze".
1b) Fare in modo che il pulsante Aggiungi tavolozze sia più / meno attivabile

Supponiamo che il pulsante Aggiungi tavolozze sia sostituito da una tavolozza "Altre tavolozze" come descritto in (1a). Premerlo potrebbe avere l'effetto di aggiungere temporaneamente tutte le tavolozze nascoste sotto di esso. Il testo "Altre tavolozze" cambierebbe in "Meno tavolozze", e premendolo di nuovo si nascondono le tavolozze extra. Questo elimina la necessità di un congegno a comparsa separato per aggiungere tavolozze nascoste.

Anche se visibili, le tavolozze extra sarebbero pienamente funzionali. L'utente potrebbe espanderle per accedere ai simboli che contengono, o trascinarle sopra il divisore "Altre tavolozze" / "Meno tavolozze" per renderle visibili in modo permanente.

2) Rendere disponibili per il pulsante "Di più" un numero maggiore / minore di commutazioni

Analogamente a quanto sopra, il popup "più simboli" non è strettamente necessario perché i simboli extra possono essere visualizzati nella tavolozza sotto il pulsante "Più". Il testo del pulsante "Di più" cambierebbe in "Di meno", e premerlo nuovamente avrebbe l'effetto di nascondere i simboli sotto di esso.

Anche se visibili, i simboli aggiuntivi sarebbero pienamente funzionali. L'utente potrebbe aggiungerli direttamente alla partitura, o trascinarli sopra il divisore "Di più" / "Di meno" per renderli visibili in modo permanente.

3) I pulsanti a tre punti sono visivamente distraenti

Una soluzione semplice sarebbe quella di utilizzare una tonalità di grigio più chiaro per il "..." per renderlo meno distraente. In alternativa, il pulsante a tre punti potrebbe essere nascosto fino a quando l'utente seleziona una tavolozza, la espande, o sposta il cursore su di essa.

4) Il menù contestuale degli elementi ha bisogno di un pulsante

Un pulsante a tre punti potrebbe apparire nell'angolo in alto a destra degli elementi quando vengono selezionati. Potrebbe apparire anche quando il cursore è posizionato sopra un elemento, ma occorre fare attenzione a non premerlo accidentalmente. In alternativa, il pulsante del menù potrebbe apparire altrove nella tavolozza, come fa ora l'icona del cestino.

5a) L'intero albero della tavolozza dovrebbe essere un unico oggetto tabulabile.

La navigazione all'interno dell'albero deve essere effettuata esclusivamente con i tasti freccia. L'utente dovrebbe essere in grado di tornare alla casella di ricerca in qualsiasi momento semplicemente premendo Maiusc+Tab una volta. Premendo nuovamente Tab l'utente dovrebbe tornare nella struttura ad albero sullo stesso elemento in cui si trovava prima di premere Maiusc+Tab.

5b) Tasti Su e Giù per cambiare elemento, Destra e Sinistra per espandere/comprimere

Attualmente l'utente può navigare su e giù per le categorie di tavolozza con i tasti freccia Su e Giù, espanderle con il tasto freccia destra, e comprimerle nuovamente con il tasto freccia sinistra. Questo funziona già, ed è eccellente!

Tuttavia, una volta che una tavolozza è stata espansa, l'utente deve passare a usare i tasti freccia sinistra e destra per navigare tra gli elementi al suo interno. Sarebbe molto più familiare per gli utenti non vedenti se i tasti Su e Giù fossero usati esclusivamente per la navigazione, e i tasti Sinistra e Destra usati esclusivamente per espandersi e collassare.

Ricordate, gli utenti non vedenti non possono vedere il fatto che gli elementi sono disposti in una griglia. Per una persona non vedente, le tavolozze appariranno come una vista ad albero. Se la navigazione delle viste ad albero non vi è familiare, vi suggerisco di giocare con il selezionatore di modelli nell’Assistente Nuove partitura, in quanto si tratta di un classico esempio di vista ad albero.

Un ulteriore vantaggio di farlo in questo modo è che il tasto freccia sinistra può essere usato per uscire rapidamente da una tavolozza, allo stesso modo in cui Maiusc+Tab dovrebbe essere usato per uscire rapidamente dall'albero (vedi 5a).

5c) Accesso ai pulsanti all'interno della tavolozza

Come effetto collaterale dei tasti (5a) e (5b), il cestino e i pulsanti a tre punti non saranno più raggiungibili dalla tastiera. La ragione della convenzione è di mettere questi pulsanti al di fuori dell'albero in modo che l'utente possa farne una tabulazione. Ciò significa che i pulsanti sarebbero condivisi da tutte le tavolozze, piuttosto che ogni tavolozza abbia la propria, come avviene attualmente. I pulsanti influirebbero solo sull'elemento della tavolozza o della tavolozza selezionata.

Un esempio di ciò si trova nella finestra di dialogo Strumenti. Scegliere prima lo strumento dall'albero, quindi premere il pulsante "Aggiungi" (situato all'esterno dell'albero) per aggiungere lo strumento alla partitura. Si noti come ci sia un solo pulsante Aggiungi in quella finestra di dialogo, non uno per ogni strumento.

Naturalmente, spostare il cestino e i pulsanti degli alberi all'esterno dell'albero sarebbe un peccato per gli utenti vedenti. Fortunatamente è possibile ottenere il meglio di entrambi i mondi mantenendo i pulsanti nell'albero, ma disabilitando l'accesso tramite schede di tutti, eccetto quelli che appartengono alla voce dell'albero selezionata. Questo potrebbe andare di pari passo con (3).

6) Riordinare tavolozze e simboli con la tastiera

Abbiamo bisogno di un modo di riordinare gli elementi all'interno delle tavolozze che non si basi sul trascinamento. Spostamenti brevi possono essere facilitati dalle opzioni "Sposta su" / "Sposta giù" nei relativi menù contestuali, ma sarebbe noioso spostare un oggetto a lunga distanza con questo metodo. Un metodo migliore sarebbe quello di selezionare l'elemento da spostare e premere un collegamento "Inizia operazione di spostamento", quindi selezionare la destinazione e premere un collegamento "Conferma operazione di spostamento".

7a) Chiudere con Invio

Quando l'utente aggiunge un elemento alla partitura, il focus viene dato al punteggio, ma la tavolozza rimane aperta. Questo va bene per gli utenti del mouse, ma per gli utenti della tastiera significa che la scorciatoia F9 deve essere premuta due volte per tornare alla tavolozza. La soluzione è di chiudere la tavolozza quando si aggiunge un elemento alla partitura tramite la tastiera, ma di lasciarla aperta quando si aggiunge un elemento con il mouse.

7b) Mantieni la messa a fuoco dell'oggetto

Attualmente la scorciatoia F9 mette a fuoco la casella di ricerca. Questa è valida la prima volta che la tavolozza viene aperta, ma in occasioni future la messa a fuoco dovrebbe essere restituita a qualsiasi controllo si sia focalizzato quando la tavolozza è stata chiusa l'ultima volta. Questo vale anche all'interno dell'albero delle tavolozza: l'elemento selezionato non dovrebbe cambiare alla chiusura e all'apertura del congegno aggancio della tavolozza.

shoogle