L'aspetto dei blocchi fornisce indizi importanti su come devono essere utilizzati. Ecco alcuni aspetti da considerare quando stili i tuoi blocchi.
Utilizza bordi visibili
Negli anni 2000 era di moda il look "acqua" e ogni oggetto sullo schermo era decorato con effetti di illuminazione e ombre. Negli anni '10 è diventato di moda lo stile "Material Design" e ogni oggetto sullo schermo è stato semplificato in una forma pulita, piatta e senza bordi. La maggior parte degli ambienti di programmazione a blocchi ha evidenziazioni e ombre intorno a ogni blocco, quindi quando i grafici di oggi li vedono, li spogliano invariabilmente di queste decorazioni obsolete.
Come si può vedere nell'esempio precedente di cinque blocchi (da scriptr.io), queste "decorazioni obsolete" sono fondamentali per distinguere i blocchi collegati dello stesso colore.
Consiglio: se re-skinni Blockly, non lasciare che le mode di oggi danneggino la tua app.
Aggiungere frecce di direzione
I feedback dei bambini negli Stati Uniti (anche se, curiosamente, non in altre nazioni) hanno rivelato una confusione dilagante tra sinistra e destra. Il problema è stato risolto con l'aggiunta di frecce. Se la direzione è relativa (ad esempio a un avatar), lo stile della freccia è importante. Una freccia dritta → o una freccia di svolta ↱ è fuorviante quando l'avatar è rivolto nella direzione opposta. La più utile è una freccia circolare ⟳, anche nei casi in cui l'angolo di rotazione sia inferiore a quello indicato dalla freccia.
Consiglio: se possibile, aggiungi al testo icone Unicode.
Utilizzare connettori orizzontali e verticali diversi
Blockly ha due diversi tipi di connessioni: le forme del puzzle orizzontali e i nottolini di impilamento verticale. Una buona interfaccia utente dovrebbe cercare di ridurre al minimo il numero di elementi di design. Di conseguenza, molti designer cercano di rendere uguali entrambi i tipi di collegamento (come mostrato di seguito).
Il risultato è che i nuovi utenti si confondono quando cercano modi per ruotare i blocchi in modo che possano adattarsi a connessioni incompatibili. Blockly rende gli elementi di programmazione visibili e tangibili, quindi bisogna fare attenzione a non suggerire inavvertitamente interazioni utente non supportate.
Di conseguenza, Blockly utilizza una forma di puzzle aderente per le connessioni dei valori e una tacca di allineamento visivamente distinta per l'accatastamento delle istruzioni.
Consiglio: se esegui il reskin di Blockly, assicurati che i collegamenti orizzontali e verticali abbiano un aspetto diverso.
Mostra che le istruzioni nidificate possono essere impilate
I blocchi a forma di C hanno sempre un connettore sulla parte superiore interna, ma alcuni ambienti hanno anche un connettore sulla parte inferiore interna (ad es. Wonder Workshop), mentre altri no (ad es. Blockly e Scratch). Poiché la maggior parte dei blocchi di istruzioni ha un connettore superiore e uno inferiore, alcuni utenti non si rendono subito conto che le istruzioni possono essere inserite in una "C" che non ha un connettore inferiore.
Una volta che gli utenti capiscono che un blocco di istruzioni si inserisce in un "C", devono capire che può essere inserito anche più di un'istruzione. Alcuni ambienti nidificano la connessione inferiore della prima istruzione nella parte inferiore della "C" (ad es. Wonder Workshop e Scratch), mentre altri lasciano un piccolo spazio (ad es. Blockly). L'accodamento stretto non lascia intendere che è possibile impilare altri blocchi.
Questi due problemi interagiscono male tra loro. Se esiste un connettore interno inferiore (Wonder Workshop), la connessione dell'istruzione iniziale è più evidente, ma a spese della possibilità di rilevare l'impilamento. Se non esiste un connettore interno inferiore (Blockly), la connessione dell'istruzione iniziale non è evidente, ma l'impilamento è rilevabile. L'assenza di un connettore inferiore interno e il nidificazione del connettore inferiore dell'istruzione (Scratch) hanno ottenuto il peggior risultato in termini di rilevabilità durante il test con Blockly.
La nostra esperienza ci ha dimostrato che la connessione della dichiarazione iniziale è un compito meno impegnativo per gli utenti rispetto alla scoperta dell'accatastamento. Una volta scoperte, le prime non vengono mai dimenticate, mentre le seconde richiedono un sollecito. Blockly ha provato sia l'approccio Wonder Workshop sia quello di Scratch finché un giorno non si è verificato un bug di rendering che ha aggiunto il piccolo intervallo. Abbiamo registrato un netto miglioramento negli studi sugli utenti con Blockly a causa di questo bug (ora una "funzionalità" di cui siamo orgogliosi).
Consiglio: se esegui il reskin di Blockly, lascia l'interfaccia utente di impilamento esistente.