Come: copiare negli appunti sul web
Poiché scriverò molte guide al codice e articoli contenenti snippet di codice su questa app Web progressiva, è essenziale che le seguenti attività vengano svolte dall'utente:
- ottima leggibilità del codice
- azione semplice e chiara per copiare il codice incapsulato
Questa è la linea di fondo richiesta per esempi di codice utili. Ma posso migliorarlo?
Migliorare il coinvolgimento
Per aumentare di livello la funzionalità di copia negli appunti della mia app, ho pensato a come rendere più divertente il clic sul pulsante di copia, poiché una piacevole esperienza utente (UX) ha il piacevole effetto collaterale di aumentare il coinvolgimento.
Ho scoperto quanto segue: cosa succede se l'app "risponde" in modo simile a una chat ogni volta che l'utente copia negli appunti? L'esperienza sarebbe stata immediatamente più personale. Usando un linguaggio arrogante e sarcastico, i messaggi forniti hanno anche un carattere unico per loro.
Diamo un'occhiata al risultato finale:
I'm a code example, sort of.
Click on the button in the bottom right corner to copy.
Come puoi vedere, la gerarchia è come tale dall'alto verso il basso:
- Imitazione di una finestra nativa con i controlli della finestra
- soddisfare
- azioni (al momento della scrittura, solo la copia negli appunti)
L'implemento
Ogni volta che l'utente copia il codice negli appunti, per un breve periodo di tempo viene visualizzata una selezione casuale da una serie predefinita di frammenti di testo. La selezione casuale viene generata per ogni esempio di codice. Per ridurre la complessità, non è garantito che il testo sia univoco nell'ambito dell'articolo. Eppure b/c ci sono un sacco di stringhe tra cui scegliere, le collisioni hanno una bassa probabilità.
E questo è tutto! Spero che ti piaccia questo piccolo miglioramento UX per le azioni di copia negli appunti, forse ti ha ispirato anche per i cambiamenti UX nella tua app!
- Tom
