Spesso dimenticati o trascurati per mancanza di tempo, ecco un elenco di piccoli elementi dell'interfaccia utente che migliorano l'esperienza dell'utente.
E come diceva un certo Leonardo da Vinci:
“I dettagli fanno la perfezione e la perfezione non è un dettaglio”
#1 Scheletri di scheletro
Siamo tutti giunti a un sito con un tempo di caricamento anormalmente lungo, con un caricatore irritante, chiedendoci se non sarebbe meglio andarsene. Bug e altre latenze di caricamento si verificano quotidianamente e non c'è nulla che possiamo fare al riguardo. Tuttavia, ci sono ancora alcune soluzioni che possono permetterti di superare questo passaggio con la massima tranquillità e non spaventare l'utente.
Schermata dello scheletro dal sito Web di Unsplash
Cosa sono gli schermi scheletrici?
Gli schermi dello scheletro sono pagine semplificate, senza testo o immagine, che riflettono la struttura della pagina da visualizzare. Mostrano all'utente che la pagina sta caricando.
Rispetto ai caricatori tradizionali che non danno una reale indicazione del tempo di caricamento e spesso vengono guardati troppo, consentono una prima lettura veloce la struttura della pagina e rimuovere questa sensazione di perdita tempo per l'utente. Concentrano la sua attenzione sui progressi piuttosto che sul tempo di attesa.
Come è fatto uno schermo scheletro?
Il più delle volte, le schermate dello scheletro spesso passano inosservate, specialmente se utilizzate per caricare il contenuto della pagina mentre procedi. Possono essere composti in diversi modi. O con blocchi di contenuto, sia con blocchi di colore o immagini.
Ad esempio, aziende come Youtube, Medium o Facebook utilizzano blocchi di contenuti.
Mentre Pinterest o Unsplash usano blocchi di colore.
Schermo scheletro da Youtube e Pinterest
Sebbene uno schermo scheletrico non abbia contenuto reale, dà l'impressione e sembra più veloce. In team con il tuo sviluppatore Frontend, è quindi essenziale pensare in anticipo a queste schermate che miglioreranno ulteriormente la tua esperienza utente.
#2 – Micro-interazioni
Per mancanza di tempo, le micro-interazioni spesso non vengono prese in considerazione nel processo di progettazione. Mancanza di tempo, budget o ignoranza delle loro possibilità, offrono comunque molti vantaggi all'esperienza dell'utente.
Andrew Tanchuk – Dribbling
Che cos'è una microinterazione?
È il risultato delazione dell'utente su un elemento. Che si tratti di fare clic su un pulsante, scorrere una pagina, inviare un messaggio...
Presenti quotidianamente, loro migliorare notevolmente l'esperienza dell'utente mentre trasmette informazioni che non si possono dire. Come scorrere una pagina sul dispositivo mobile per aggiornare il contenuto.
Coinvolgente, educativo, identitario, a volte umoristico, giocano sulle emozioni dell'utente a vantaggio della sua esperienza e rendono l'interfaccia più viva e umana.
Emoji Facebook
Come utilizzare una micro-interazione?
Come per gli schermi a scheletro, una microinterazione non dovrebbe dare all'utente l'impressione di perdere tempo. Non deve essere utilizzato in modo eccessivo e deveessere semplificato per essere sottile.
Anche la questione della sua durata nel tempo è essenziale. Dopo 100 visualizzazioni, non sarà fastidioso? Un punto essenziale da sollevare al momento della progettazione affinché non diventi dannoso per l'esperienza dell'utente.
Fonte: magazineduwebdesign.com
Per saperne di più sulle micro-interazioni, scopri qui il nostro articolo dedicato sull'argomento !
#link all'articolo sulle micro-interazioni
#3 – Modalità oscura
La "modalità oscura" o "modalità oscura" in francese è ancorata alle abitudini degli utenti. Abituati ad avere la possibilità di alternare tra temi chiari o scuri, che adattano la colorimetria dell'intera interfaccia. Porsi la domanda su questo cambio di modalità al momento della progettazione è ora essenziale.
Unsplash in modalità oscura
Cos'è la modalità oscura?
Negli ultimi anni, sempre più siti e applicazioni hanno sviluppato una versione alternativa in modalità oscura. Questa modalità permette di modificare l'intera colorimetria di un'interfaccia, in particolare invertendo il colore dello sfondo e del testo. Questa scelta del tema può essere nativa tramite il sistema operativo o facoltativa tramite il browser o le preferenze di un'applicazione o di un sito.
Meno luminoso e più comodo per la lettura, ha anche l'enorme vantaggio di far risaltare i contenuti. Contenuto che deve quindi essere progettato nell'interfaccia utente per queste due possibilità di interfaccia.
Le modalità chiare e scure native del sito Medium
Come progettare componenti per la modalità oscura?
Anche se la maggior parte dei siti non è ancora progettata per la modalità oscura, le estensioni del browser come Dark reader su Chrome consentono all'utente di passare in qualsiasi momento.
Componenti IOS in modalità chiara e scura
E per non spaventare l'utente quando appare un'interfaccia inadatta con immagini tagliate male o icone invisibili, ecco le principali domande da porsi:
- Immagini e loghi si adattano a uno sfondo scuro?
- Le icone sono chiaramente visibili, ritagliate in formato png o vettoriale?
- I colori del mio sistema di progettazione sono leggibili su uno sfondo scuro?
- Tutti i pulsanti, i testi, le regole e le ombre sono leggibili su uno sfondo scuro?
Per evitare il caso di un cambio di modalità da parte dell'utente, è meglio pensare ai componenti del suo sistema di progettazione in entrambe le modalità.
Verificare la leggibilità in entrambe le modalità
- Imposta i colori di sfondo per queste due modalità.
- Verifica la leggibilità del colore tramite uno strumento di accessibilità.
- Adatta le tue icone secondo necessità, creando due versioni.
Prendersi del tempo extra per progettare questi elementi non sarà mai una perdita di tempo, ma in definitiva un vero vantaggio per la tua esperienza utente.
Prima di partire
Trascorrere più tempo a progettare una vera modalità oscura, micro-interazioni e uno schermo scheletro sono tutti elementi che aiutano a migliorare l'esperienza dell'utente. Quindi non esitate a pianificare più tempo a monte di un progetto per la realizzazione di questi dettagli. E ricorda che questi sono i dettagli che fanno la differenza!
Domitille D'ERSU, UI Designer @UX-Republic
