Progettare UX funzionali non basta! I prodotti software ed le applicazioni web che danno valore tramite il loro uso all’utente finale sono quelle che scalano prima i gradini della scala al successo, solo se sono gradevoli e di facile utilizzo.
Ho visto un webinar di Ward Andrews per il DesignTalk dove ha spiegato i modi per migliorare la UX dei software e dei siti web.
Video by Invision blog
Tutte le aziende stanno iniziando a capire che devono offrire una grande esperienza d’uso ai loro clienti. Tuttavia, solo recentemente, molte aziende hanno acquisito una mentalità più smart basata anche su ottime UXd. Ora le aziende, in competizione tra loro, devono essere ancora più efficenti. Ward ha creato quindi uno schema per la scalata al successo condivisibile con le aziende per definire ottime UX. Nello schema di Ward vengono mostrati i livelli di qualità e i livelli a cui bisogna ambire.
Img by Invision
I gradini
Il primo gradino lo si sale quando l’applicazione è funzionale, ovvero che il prodotto è valido e viene utilizzato continuamente. Il secondo gradino indicato da Ward è l’usabilità. Infatti lui dice che un applicazione usabile è 100% volte meglio di una funzionale, per cui se non stressi lo user con un app frustrante, puoi salire il prossimo gradino. Il terzo gradino è il comfort, l’app quindi deve essere confortevole ovvero intuitiva. Deliziosa è il quarto gradino, l’app deve essere accativante con sorprese che rendono felice l’utilizzatore. Deve essere significativa, questo è il santo gral di tutti i punti cardine della scalata. L’app deve avere un senso o deve dare un senso alla vita dello user, deve darci poteri da poter sfruttare.
Vi consiglio di guardare il video sopra indicato cliccando sull’immagine.
Congratulazioni, dopo tanto faticare avete preso un nuovo lavoro di UX!
Ma la parte difficile, deve ancora arrivare!
Finchè sarete dei freelancer o lavorate per un’agenzia, non è detto che avrete tutte le informazioni di cui avete bisogno, sul vostro cliente e su ciò che vuole farsi realizzare. Ci sentiamo quindi un pò allo sbando e sopratutto alla cieca mentre camminiamo, su una bella autostrada!
Immagine: Capital One
Dovete quindi battervi, una seconda volta, per avere un primo contatto con il cliente finalizzato a reperire totalmente le informazioni necessarie per iniziare a lavorare. Dovete pretenderlo, dovete imporvi… e dimenticare il modus operandi all’Italiana che recita: “TU INTANTO FAMMI UNA PROPOSTA”! Dovete rispondere: “IO NON TI PROPONGO NIENTE, IO TI DO UNA SOLUZIONE AD UN TUO PROBLEMA”, mi raccomando ne va della Nazione stessa, ne va di tutti noi Italiani!
Cambiamo il modo di lavorare! Cerchiamo di essere al massimo della professionalità, perchè noi a differenza del resto del mondo… Siamo i più gandi!
Intervistate, programmate, definite! Con queste 7 domande.
In cosa siete diversi dai competitors?
Cosa vi distingue rispetto le migliaia di altre persone che offrono la stessa cosa?
Una domanda volta a capire la cultura aziendale, i loro servizi e prodotti, il loro spazio di lavoro e il loro approccio lavorativo.
Perché si vuole un nuovo marchio / logo / sito web / applicazione?
Assicuratevi sempre che il vostro cliente inizia questo processo con motivate ragioni. Chiedetegli di preciso cosa vogliono migliorare o cambiare. Mettete in discussione le loro richieste di interventi rapidi e brevi per incrementare al massimo il loro Business, non esiste! Tutto va studiato e programmato.
Come pensi che migliorerà l’immagine aziendale?
Chiedete sempre cosa pensano di ricevere in cambio di un buon progetto di design. Dovete sempre tener conto come un nuovo restyling possa far vedere agli occhi dei clienti, la nuova azienda. Dovete fargli avere la visione di come risulteranno agli occhi degli altri.
Quanto pensate di investire?
Non evitate il problema più urgente: quanto c’è da spendere? Da qui capirete moltissime cose sul vostro cliente. Fate domande dirette e precise senza divagare, siate FERREI! E’ una regola speciale nel primo approccio con i clienti, prima di instaurare un rapporto di lavoro.
Quali sono gli obiettivi a lungo termine?
Questo legame nelle domande precedenti vi da un quadro di come saranno i tempi e i modi per sviluppare il vostro progetto di rebrending. Queste domande sono la spina dorsale di una compagnia, da qui capirete come si vedono e come si vedranno. Siate sicuri di aver chiesto tutto sul design esistente prima di iniziare. Molte aziende hanno già delle strutture grafiche esistente e spesso vi troverete a lavorare con loro.
Qual è la timeline per questi progetti?
Una chiara idea di timeline deve essere stabilita con tutto il team. E’ facile buttarsi a capofitto nel lavoro, essere eccitati all’idea di creare qualcosa, ma al cliente gli interessa quando lo consegnerai. Spacchetta tutti i processi e definisci una scadenza per ogni problematica da risolvere in vari step. Cerca di essere realista sui tempi, e creati un timeframe (un calendario con scadenze ben definite) e comunicalo al team e al cliente.
Chi sono i principali stakeholders e coloro che decidono?
Non è una domanda difficile, ma va fatta e deve essere subito definita. Ti occorro parlare con le persone giuste, senza divagare e senza cadere in situazioni che ti portino fuori pista.
Domande e risposte definitive devono essere alla base della vostra intervista, non date possibilità ai ma e ai se, che come dice un detto Italiano: non portano a nessuna parte. In uno scenario perfetto queste domande e risposte ti porterebbero a delle soluzioni rapide e giuste, ma purtroppo non sono mai la realtà, sopratutto nel nostro paese… dove vivono clienti indecisi e “ignoranti” in materia.
Educhiamoli, facciamoli sentire parte del progetto… diamogli la soluzione giusta!
E’ tempo di pensare a rendere le applicazioni mobile e le app intuitive per gli users. Se l’applicazione non è usabile è praticamente inutile. Allo stesso tempo se l’app è utile ma ha un effort difficile da acquisire, le persone potrebbero scegliere di non imparare ad utilizzarla. Creare un design funzionale non è un task semplice per questo vi metto a disposizione 12 mosse per un “scacco matto”da campioni.
Elimina il superfluo
Un enorme fattore che influisce sulla realizzazione delle app mobile affinchè brilli la UX sono le user interface.
La user attention è una risorsa preziosa, ed deve essere posizionata sapientemente. E’ quindi di vitale importanza togliere il superfluo dalle interfacce.
Finchè i display mobile avranno una dimensione limitata, qualsiasi bottone, testo o linea renderanno la lettura dello schermo complicata.
Dovete quindi focalizzarvi nel comunicare in modo chiaro e coinciso tramite una UI che sia il più possibile invisibile, in modo da far focalizzare l’attenzione sui contenuti essenziali.
Progettare per interruzioni
Personalmente quando progetto un’applicazione che prevede acquisti o il check di nuovi messaggi e/o informazioni (tipo orari dei treni), penso allo user come ad una persona “in movimento”.
Questo flusso di operazioni critiche da eseguire, vanno frammentate in alcune operazioni più piccole senza sovraccaricare lo user.
Una semplice regola empirica: one primary action per screen (una sola opzione primaria per vista).
Ogni singola vista della tua app dovrebbe supportare una singola action che sia di valore reale per lo user.
Sessioni corte (o short mobile sessions) significano anche che bisogna progettare per interruzioni, dando possibilità allo user di salvare lo stato in cui si trova e riutilizzarla successivamente.
Creare una navigazione auto-evidente
Conosci il tuo user ed aiutalo nelle sue necessità.
Come già scritto in un altro articolo, vanno usate funzioni riconoscibili dallo user inerenti al layout dell’app.
Rendete ovvie queste funzioni e rendetele chiare ed intuitive. La navigazione, difatti, dovrebbe aiutare lo user a scoprire ed usare queste funzioni.
Una buona navigazione potrebbe far sentire l’interfaccia invisibile, senza stancare le sue dita nell’utilizzo dell’app giornaliera.
Dopo tutto, anche la più bella featuring o contenuto diventa inutile se l’utente non riesce a trovarlo.
Fare subito una buona impressione
Non è una novità che la prima impressione è quello che rende un’app vincente. Così come nella vita quotidiana, la vostra app non ha una seconda chance.
C’è solo un’opportunità per influenzare qualcuno affinchè sia il vostro user, e se deludi alla prima volta puoi scommetere che loro non torneranno indietro sulla loro scelta.
Nell’azione di onboarding (di salita a bordo) non dobbiamo creare interruzioni, e deve essere solo un insieme di benefici per lo user.
In questa operazione va soddisfatto nello user il senso di conoscenza di quei fattori per iniziare ad utilizzare l’app, niente di più niente di meno.
Se riesci a “far salire a bordo” lo user in modo semplice e pulito, di sicuro sarà il tuo utilizzatore modello.
Allineare con le convenzioni del dispositivo
Nel progettare le app in modalità cross-platform tra Android e iOs, non bisogna utilizzare un comportamento unico basato solo su una tecnologia.
Personalmente utilizzo la UX nativa di ogni dispositivo in modo da rendere le operazioni familiari allo user.
Sembrerà banale, ma spesso utilizzo gli elementi nativi di ogni ambiente come gli input fields, le check boxes ecc… perchè le persone sanno già usarli.
Progettare elementi tappabili
Come già detto in un altro mio articolo, oggetti tappabili piccoli sono difficili da “toccare”.
Vanno quindi progettati oggetti tappabili abbastanza grandi da poter esser utilizzati dagli users.
Sia Android che iOs hanno delle linee guida per le misure da utilizzare. Inoltre deve essere sempre visibile il bordo dell’oggetto tappato.
Posizionare gli elementi sullo schermo
Progettare i controlli in base alla posizione della mano e al grip deve essere il “must” quando si progetta un’app. Vanno valutate le zone facilmente raggiungibili, per posizionare i migliori elementi di interesse come per esempio un pulsante “acquista subito”.
Rappresentazione di una posizione della mano confortevole. Image Source: uxmatters
Continuare il flusso dell’experience
Gli utilizzatori possono usare l’app su un telefono, un tablet o un pc desktop e non va mai lasciato solo e sperduto durante tutto il flusso. Le operazioni iniziate su un dispositivo devono poter essere riprese e proseguite da un altro device. Una User experience senza interruzioni è una dei requisiti più importanti per una criss-device experience.
Animazioni dedicate e microfunzionalità
La User Experience non è solo usabilità. Deve essere qualcosa che susciti anche del sensazioni. Sono le piccole cose che possono rendere la tua UX piacevolmente memorabile. Iniettando delle animazioni dedicate – come microinteractions animate, feedback animati o dei suoni in-app – nel design dell’aplicazione, potrete far sentire gli users più a loro agio e facenti parti dell’interazione stessa con qualcosa che abbia della personalità propria. Il tutto serve ad enfatizzare l’audience dei vostri utilizzatori.
Attenti alla leggibilità
Quando compariamo i computer desktop a quelli mobile, che hanno uno schermo relativamente piccolo, ci imbattiamo nella problematica di dover far entrare la stessa quantità di contenuti in uno spazio molto ridotto. La tentazione è di comprimere il tutto il più possibile, ma vi prego di non cadere in tentazione! Tenete sempre a mente che i contenuti devono essere leggibili il più possibile. Una regola empirica dimostra che il font minimo non deve essere inferiore agli 11 punti, e che utilizzando un’interlinea maggiore renderà il tutto più visibile.
Non interrompere i tuoi Users
nessuno, in realtà, vuole mai essere interrotto, figuratevi qualcuno che sta usando la vostra applicazione. Pertanto interruzioni del tipo “vota e/o recensisci la nostra app” è quel che più di sbagliato si possa fare in situazioni ed operazioni cruciali sull’app. Mentre sono utili in situazioni di stasi sull’app o in punti cardine in cui al culmine di una procedura che abbia soddisfatto l’utente, venga richiesto un feedback sulla nostra esperienza d’uso dell’applicazione.
Perfezionate il design sulla base dei test per l’utente
Non fatevi ingannare dal design visto sullo schermo del vostro PC o Mac, provate sempre sul dispositivo reale, perchè le regole della UX e UI cambiano drasticamente. Nonsolo, le regole della UX teorica e in fase di progettazione spesso si dimostrano poco performanti nella vita reale. Ed qui che è importante far testare le app ai vostri utilizzatori. Personalemente faccio eseguire dei task reali di operazioni finite, misurando ed analizzando cosa accade in modo da capire come veramente la mia UX lavori a regime. Tengo inoltre ben presente che la mia app è constantemente in evoluzione, è qualcosa di vivo…
Nel seguente articolo vi indicherò 6 tipici comportamenti degli utenti da tener presente per migliorare la UX in modo di avere un migliore Engagement del tuo sito web.
Gli indizi
Appena un nuovo visitatore arriva sulla nostra pagina web, per prima cosa cerca di capire se è atterrato nel posto giusto.
Tramite la tecnica di Information Foraging, l’utente valuta il nostro sito alla ricerca di indizi per muoversi al meglio e raggiungere il suo obiettivo.
Nelle immagini seguenti, possiamo osservare questo comportamento nei tracciati di test di movimento oculare e delle fissazioni in cui notiamo come gli utenti guardano lo schermo e individuano il percorso che devono fare, di solito osservano le parole chiavi collegate al percoso per raggiungere il proprio obiettivo.
Per avere quindi maggiori probabilità che gli utenti continuino ad esplorare il nostro sito, bisogna utilizzare un linguaggio che coincide con il modello concettuale dei tuoi visitatori.
Gli utenti cercano indizi leggendo con un Modello a F – Credits Nielsen Norman Group www.nngroup.com
Un consiglio che posso darvi per migliorare la UX del vostro sito è quella di dare agli utenti dei preziosi indizi come:
1. Usa titoli, intestazioni, immagini e link descrittivi
2. Usa i termini che le persone sono abituate ad utilizzare
3. Contestualizza le immagini attraverso le didascalie
4. Evidenzia con il grassetto le parole significative
5. Spazia i paragrafi: ottimizzando gli spazi faciliterai la user experience
6. Riduci al minimo gli elementi di distrazione
7. Usa chiamate all’azione che dicano chiaramente all’utente cosa deve aspettarsi quando le eseguirà
8. Fai in modo che tutti i tuoi link dicano esattamente in quale pagina atterrerà l’utente quando li clicca
Gli Utenti non leggono tutto
Pensate che gli utenti che raggiungeranno il vostro sito legeranno tutti i vostri contenuti?
Non è detto, se non curate in modo maniacale questi fattori:
1. la leggibilità
2. il grado di coinvolgimento
3. il contesto della lettura
4. la fretta
5. gli elementi di distrazione
Joshua Porter in “Principles of User Interface Design” ha scritto che noi viviamo in un mondo di interruzioni. Tenetelo sempre a mente e lavorate sulla user experience design per impedire le interruzioni.
I mie suggerimenti a riguardo sono:
1. Fai in modo di guidare l’occhio dell’utente attraverso forti gerarchie visive
2. Facilita la scansione delle pagine attraverso la distribuzione degli spazi e i raggruppamenti degli elementi
3. Usa i contrasti per mettere in evidenza le chiamate all’azione
4. DÏ sempre allíutente dove si trova e come può fare per tornare indietro
5. Fai in modo che gli utenti possano controllare il livello di dettaglio delle informazioni e che possano approfondire quando vogliono loro
6. Crea i contenuti perchè siano perfettamente leggibili
7. Semplifica le cose con elenchi puntati e brevi paragrafi
8. Utilizza le introduzioni
9. Illustra i contenuti con immagini e video
10. Fa capire subito lo scopo di ogni pagina
11. Fornisci tutti i passaggi, anche i più ovvi, per aiutare gli utenti a raggiungere i loro obiettivi
12. Metti una sola chiamata allíazione chiaramente identificabile per azione su ogni pagina
13. Assicurati che le chiamate secondarie all’azione non siano troppo concorrenziali, sia in modo visivo che sequenziale
Sono degli imitatori
Si, gli utenti imitano il comportamento di altri utenti. Se pensate che l’utente sia in grado di orientarsi da solo in una situazione poco familiare, vi sbagliate di grosso. Saranno incerti sulla strada da prendere proprio perchè il nostro cervello guarda le azioni degli altri per poi guidarci nelle nostre decisioni.
Più gli altri sono simili a noi e più è forte l’effetto di imitazione. Con il termine Validazione Sociale si intende proprio l’effetto di prestare attenzione al comportamento di altri per influenzare il nostro giudizio, così come quando nei locali ci fanno sedere vicino le vetrate per invogliare altra gente ad entrare.
Nel web è proprio questa Validazione Socialeche fa muovere il motore di internet, basta vedere cosa succede appena pubblichiamo un post o quando seguiamo recensioni di altri per decire se acquistare un prodotto o meno.
Amazon stesso, sfrutta questo elemento per la UX design del proprio sito, infatti la scheda prodotto ha una sezione dedicata proprio a quello che altri utenti recensiscono. Seppur non conosciamo questi utenti, ci fidiamo in modo quasi cieco perchè sono un incredibile motivatore alle nostre scelte.
I fattori da tenere, quindi, in considerazione sono:
1. Mostrare gli articoli più visti, commentati, condivisi, etc.
2. Mostrare le statistiche sugli accessi
3. Dare spazio alla voce degli altri utenti con le Recensioni o il voto o i sondaggi
4. Usare l’influenza di altri utenti o personaggi famosi attraverso citazioni, testimonianze, storie di successo
5. Rendere più facile per gli utenti condividere il tuo contenuto
Perdita vs Guadagno
Gli utenti, ma in generale tutte le persone, sono più predisposte a decisioni che minimizzano la perdita piuttosto che il massimo guadagno. Da alcune analisi le perdite vengono percepite come 2 volte più forti rispetto ai guadagni.
Con meccanismi basati sulla “Paura di subire una perdita” molte campagne di vendita sfruttano il famoso fenomeno delle frasi a tempo tipo “50% di sconto solo per oggi“, frasi e metodi che inducono ad una risposta emotiva che ci fa agire in un certo modo all’interno di un determinato contesto.
I fattori da considerare:
1. Impostare come opzione predefinita quella migliore per l’utente, ad esempio dandogli la possibilità di provare versioni software pienamente funzionali per un periodo limitato di tempo
2. Crea un senso di urgenza nel tuo copywriting
Possibilità di scegliere, odiando le decisioni
La possibilità di scegliere ci fa sentire autonomi, ma non è detto che dare molte possibilità di scelta sia un bene. Anzi diventa un problema così come darne troppo poche.
In molti supermercati, fare la spesa diventa uno stress a causa del carico cognitivo necessario per confrontare tra loro molti prodotti, creando in noi il timore di prendere una decisione sbagliata.
Comportamento utenti di fronte alle scelte e paralisi decisionale – credits to www.tangledom.com
La paralisi decisionale avviene anche negli shop online o nei siti con molte opzioni. Un vero UXd lo sa bene.
Per confortare gli utenti, bisogna semplificare il processo di scelta:
1. Prepara un massimale di 3 o 4 scelte
2. Se non puoi dare poche scelte, usa filtri e tag per restringere il campo
3. Usa opzioni predefinite basandoti ad esempio sulle scelte più popolari
4. Suddividi le decisioni complesse in passi più semplici
Porta di servizio
Gli utenti che arrivano sul sito, raramente lo fanno passando per la porta principale, ma di solito arrivano tramite rimbalzi tra siti vari, post, forum ecc…
Pertanto spendere totalmente le energie solo per la homepage del sito, potrebbe essere controproducente. Va valutata un’opportuna campagna di marketing sui social network in modo da incanalare le visite dai motori di ricerca atraverso pagine interne.
Analizzando con le statistiche sul sito, potete capire in quali pagine gli utenti atterrano e quindi porti le seguenti domande:
1. Quale prima impressione danno le pagine di atterraggio?
2. Fanno capire in modo esplicito di cosa parla il sito?
3. Danno indizi su come muoversi sul sito web?
4. Ci sono chiamate all’azione chiare e convincenti?
5. Incoraggiano l’utente a continuare líesplorazione?
6. Fanno capire all’utente dove si trova esattamente?
7. Dicono all’utente dove deve andare dopo, ad esempio con le chiamate ad azioni e contenuti correlati?
Offire una navigazione piacevole all’utente è fondamentale, ed una navigazione ben costruita è un tesoro:
1. Fai in modo che l’utente possa sempre ritornare sui suoi passi, cosa che capita sicuramente in un sito che non conosce.
2. Non dare nulla per scontato quando si tratta di navigazionetra le pagine: l’utente non è nella tua testa e non sa niente di comè fatto il sito.
3. Integra una funzionalità di ricerca interna al sito.
Tu non sei i tuoi utenti
Anche se nell’articolo ci sono dei capisaldi per definire la UXd di un sito, i comportamenti degli utenti sono tanti ed imprevedibili ma possono essere influenzati con dei tecnicismi.
Comprendere le caratteristiche dei tuoi visitatori, è l’unico modo per ottimizzare il tuo sito.
Gli utenti non pensano come te, non sono te… hanno obiettivi e comportamenti diversi dai tuoi… e loro sono tanti!
La potenza del colore nella progettazione di applicazioni mobile è il secondo aspetto importante nella realizzazione di un app. Le interazioni Human-Computer sono fortemente basate sulla interazione con gli elementi grafici della UI (User Interface), dove i colori ricoprono un ruolo critico. Essi aiutano a interpretare i contenuti dell’applicazione, e permettono di far interagire lo user con i giusti elementi. Nella progettazione di un app, definisco uno schema colore primario per le aree principali, utilizzando le logiche della teoria del colore.
Definire una giusta palette colori (o schema colore) è un’operazione molto delicata. I fattori in gioco possono essere il colore del brand o del logo, il contrasto visivo, il mood ecc…
Solitamente non supero mai una palette colori di 3 / 5 soluzioni cromatiche, questo per non rendere l’interfaccia UI di difficile lettura. Partendo dalla ruota colore classica, definisco il mio colore principale dal quale declinerò i restanti 2 o 4 colori.
Ruota a 12 colori, molto utile nella definizione del colore base.
Progettare con colori monocromatici
Lo schema più semplice è quello della scelta di una palette monocromatica, con sfumature che partono dal colore principale. Come potete vedere dall’immagine che segue, partendo dal colore blu della ruota colore, definisco una scala di 6 cromie di blu.
I colori monocromatici sono derivazioni del tono colore principale.
Un esempio che può rappresentare una interfaccia UI con questo schema colore è mostrato nella prossima immagine. Difatti ogni elemento non ha tinte o colori al di fuori di questo schema.
I colori analoghi
Con i colori prossimi a quello principale, possiamo definire uno schema colore di tonalità analoghe al principale. Nella seguente immagine, potete capire come individuare i colori vicini a quello principale.
Un’interfaccia UI basata su questo schema colori è la soluzione riportata nella immagine seguente, in cui con una mappa di calore definita con i colori, viene descritto il peso di ogni informazione.
Complementari
I colori complementari sono i colori opposti a quello principale. Il grande contrasto che ne deriva, attrae l’attenzione visiva dello user. La scelta dei colori, deve essere ponderata sulla fisica della luce e su come essa interagisce sul nostro cervello. Essendo noi umani molto più sensibili al verde, possiamo sfruttare queste caratteristiche visive per accentuare l’importanza di un elemento e magari focalizzare l’attenzione ad un particolare(Verde), usando un colore di contrasto (Rosso). E’ il caso dell’icona di iMessage che vedete in figura.
L’impatto del contrasto nei colori
Tipicamente i colori degli oggetti, dei testi e delle aree nelle UI non sono isolati ma bensì mescolati o sovrapposti tra loro. E’ quindi necessario un giusto contrasto per enfatizzare o meno, l’attenzione all’elemento di interfaccia. Pensiamo ad un pulsante che si attivi solo dopo aver inserito nel campo username e password i dati, il pulsante si attiverà solo dopo aver popolato i text field (i campi) con nome e password.
Progettare per il daltonismo
Personalmente non mi era mai capitato di progettare un app o un sito web per user che soffrissero di daltonismo, fin quando non ho avuto nel mio team di sviluppo un programmatore affetto da daltonismo. Da quel momento in poi, nella mia mente c’è sempre una forma di attenzione a chi ha problematiche cognitive di qualsiasi genere. Nel caso del daltonismo, si parla della incapacità da parte del cervello di percepire alcuni colori. Il rosso e il verde sono combinazioni di colori che danno maggiori problemi, difatti il daltonico è “cieco” davanti a queste situazioni.
In questa immagine, la simulazione di due possibili ruote colore percepite dai daltoniciE’ importante, quindi, definire nella nostra app visuali multiple per comunicare degli status importanti dell’app. Mai fare affidamento su un colore solo per indicare qualche status importante di sistema, ma sfruttare anche animazioni e contrasti così come nella grafica seguente.
Grazie a Photoshop, possiamo disporre di strumenti per simulare cosa visiona una persona affetta da daltonismo, ne è un caso l’immagine seguente.
In conclusione, abbiamo affrontato i principali fondamenti della teoria del colore applicata alla progettazione di UI e di UX. Affinare le abilità all’uso dei colori deve essere uno sforzo continuo!
Nell’immaginario collettivo attuale, quando parliamo di touch screen, pensiamo al mondo dei tablet e smartphone, ma in realtà esistono altri mondi. Il problema principale di avere un solo design, è quello che ogni schermo ha una sua misura, larghezza, distanza e risoluzione che impatta sull’usabilità del dispositivo e la sua UI (User Interface).
I touch screen sono sempre più presenti nel mondo informatico tanto da essere incorporati in laptop, desktop e più recentemente nell’impiego più disparato (tipo taglia code, bancomat ecc…). Da qualche anno a questa parte, infatti, McDonald’s ha sperimentato una tipologia di ordinazione self-service per abbattere i tempi di attesa dei clienti.
Display taglia-coda di McDonald’sOgni giorno, ognuno di noi interagisce quotidianamente con dispositivi di varia natura. Ogni dispositivo ha la sua capacità di risolvere problemi. Un approccio di tipo adaptive/progressive soddisfa il sempre più crescente bisogno di interactive experience per ogni users (utilizzatore) in base al suo contesto d’uso. Questa esperienza d’uso quotidiana, in tutti i suoi casi, cresce dinamicamente influenzata dai cambiamenti tecnologici e demografici.
La distanza visiva è lo spazio che intercorre tra lo user e l’informazione riportata su un dispositivo ( o la sua interazione mediante UI). Generalmente la distanza per i device maneggiabili (tablet, smartphone ecc…) è di circa 15 / 20 cm, mentre per la TV la distanza inizia ad essere oltre il metro. Nei due casi i rispettivi sistemi di input sono le dita per i maneggiabili e il telecomando per la TV, elementi fondamentali a rompere la distanza tra user e device. Quest’ultima influisce fortemente sulle misure dei Font ( testi, titoli ecc…), in modo esponenziale in funzione della distanza visiva, affinchè sia mantenuta la leggibilità dei contenuti.
Detto ciò, come possiamo adattare i contenuti in funzione della distanza visiva, e al suo cambiamento nelle varie situazioni d’uso? Marko Dugonjic ha sperimentato con un sistema di riconoscimento facciale come la distanza user-display, influenzava i contenuti tipografici in modo responsive (dinamico), usando delle “media queries” (delle richieste di contenuti opportuni a seconda del caso) in base alla distanza tra lo user e lo schermo. Più lo user si avvicinava allo schermo, più la grandezza dei caratteri (Fonts) diminuiva e vice versa. Con questa analisi possiamo identificare che la distanza visiva fa parte della user experience e che non è un limite per essa. Immaginandola come elemento tridimensionale del responsive design, la distanza è parte di ciò che crea le relazioni con i contenuti e lo user.
Touch Area
La touch area è la zona presa in considerazione in base alla misura dello schermo che la contiene. Questo ne determina le zone dello schermo più facili o più difficili da raggiungere.
Determinando come gli users (utilizzatori), usano queste aree sui differenti device, possiamo capire in quali zone posizionare i touch targets (ovvero i contenuti più importanti), i menu, e gli elementi di navigazione. Grazie a questa mappatura delle gesture (azioni dell’utente) sui display e/o schermi, è possibile valutare casistiche di utilizzo e relative problematiche. Pensiamo ad un utente in carrozzina che debba accedere al menu, sull’angolo in alto del display di McDonald’s, la UX sarebbe del tutto difficoltosa. Quindi potremmo pensare di inserire il menu di scelta nell’angolo in basso e renderlo accessibile all’utente in carrozzina ma difficoltoso per un utente di alta statura. Quindi potremmo pensare ad una telecamera aggiuntiva al display che riconosca l’altezza dello user e che risponda in modo interattivo posizionando il menu di selezione nella touch area migliore per lui.
Touch Target e Interazioni
Il touch target è la minima e massima misura di un elemento di interfaccia, tipo un bottone che deve intercettare il click di un dito. Creare misure sbagliate per questi target, comporterebbe un incapacità di funzionare. Pensiamo ad un pulsante troppo piccolo da cliccare, sarebbe impossibile interagire con l’app o addirittura essere tediosa, frustrando lo user a tal punto da abbandonare l’app. Al contrario un pulsante troppo grande, taglierebbe fuori informazioni necessarie all’interfaccia UI. Va quindi pensata una progettazione di tipo design for touch (design per l’area sensibile al tocco), e design for thumb (design per le dita o il tap).
Credtis: Steven Hoober
Abbiamo capito, grazie a questi elementi che si può quindi intercettare le operazioni eseguite dagli users sulle nostre app attraverso gesture o click sul display. Questo ci permetterà di creare applicazioni sempre più a favore degli user, anche quelli con disabilità. E’ quindi una sfida constante alla user experience adattabile, pertanto dobbiamo approcciarci in modo Olistico a questo tipo di design.
Finchè gli esseri umani saranno creature guidate dalla vista, l’impatto significativo delle immagini non potrà che aumentare grazie all’aiuto degli help animati.
I nostri occhi prestano subito attenzione agli oggetti in movimento, così come se fossero delle caramelle per gli occhi, occorre creare elementi accattivanti e vivaci che richiamano l’attenzione per creare applicazioni differenziate da quelle concorrenti.
Inoltre quest’ultimi elementi migliorano la UX. Occorrono animazioni rapide e corte per essere efficaci.
Con il supporto delle User Interface, vedremo come migliorare la UX nel seguente articolo grazie alle functional animation che ho trovato in giro per la rete, realizzate da Designer incredibili.
Cos’è una Functional Animation?
Si tratta di delicate animazioni incorporate nalla User Interface come parte di funzionalità del design estetico. Rafforzano il design nella sua funzionalità e rendono le operazioni più chiare:
1. Riducono il carico cognitivo.
2. Prevengono i cambiamenti di stato anonimi (indicano lo status di un elemento, tipo un loading con la clessidra).
3. Stabiliscono richiami alle relazioni spaziale degli elementi sullo schermo.
Negli approcci di design human-centered oriented, dove lo user è il principale punto di interesse, una UI deve essere intuitiva, responsive ed umana! Pertanto le Functional Animation permettono di colmare questi goals.
Il ruodo delle Functional Animation nella UId
Se ben cognegnata e testata la Funtional Animation (da qui in poi F.A.) ha il potenziale per soddisfare molteplici funzioni.
Visual Feedback nelle user action
Ottime interaction design producono feedback che ti fanno sentire parte integrante con gli elementi visivi dell’interfaccia, producendo dei risultati tangibili.
In questo caso un esempio sono i bottoni o i controlli che appaino nelle UI come elementi tangibili dientro un vetro. Questo vetro è l’unico ostacolo mentale tra noi e quell’elemento pertanto le Functional Animation creano un ponte, un tramite per superare questo scalino facendoci apprezzare immediatamente il sistema di imputo e i suoi modi di lavorare con un look and feel manipolabile.
E’ il caso dell’immagini seguenti scovate su Behance.
Buttons and other active controls should respond to user actions with visual feedback. Image credit: Behance
I visual feedback, non tengono lo user in uno stato di dubbio sullo status di un elemento o di alcune azioni. Difatti in casi di operazioni non andate a buon fine, un’animazione ci farà capire che c’è un problema in modo semplice ed intuitivo. Di solito, troviamo in molte app, l’effetto shake del campo password nel caso in cui l’avessimo inserita male. Lo users viene immediatamente avvisato tramite un’animazione che c’è un problema. Image credit: thekineticui
Possiamo definire quindi gli scopi finali della F.A. in:
1. Far riconoscere al sistema che c’è stata un’azione da parte dell’utente
2. Confermare o negare l’azione dell’utente.
Visibilità dello status del sistema
Come ci indica Nielsen’s nelle heuristics for usability, la visibilità dello status di sistema rimane il principio più importante nella UId. Lo user ha bisogno di sapere il suo attuale nel contesto del sistema senza avere dubbi su che cosa l’app stia facendo. Con una appropriata F.A. visuale, va comunicato allo user lo stato attuale dell’operazione richiesta o eseguita.
Nel caso di un upload di dati, possiamo sfruttare un’animazione che ci permetta di capire a che punto sia il caricamento dei dati, così come mostrato nell’animazione seguente.
Una simpatica animazione ci permette di distrarre lo user da un caricamento lungo e noioso.
A concludere l’articolo posso dirvi che, in qualsiasi posto si voglia piazzare una F.A., tenete sempre conto che deve dare supporto allo user nel farlo orientare su cosa sta accadendo durante l’uso dell’applicazione.
Le Experience Map (da qui in poi XM) è una delle documentazioni essenziali per i processi UXd. Sono un insieme di informazioni sull’esperienza degli users verso un prodotto o un servizio. Queste mappe documentano risultati, tecniche e processi della UXd in modo complesso ed articolato ma di vitale importanza.
Anatomia di una Experience Map
Possiamo definire la XM come una mappa dello user che descrive una strategia sugli obiettivi da raggiungere, i metodi da utilizzare, gli strumenti più consoni e una pianificazione dei processi o eventi.
Le fondamenta della mappa sono prodotte dalla ricerca che contiene le proprietà qualitative, quantitative, i feedback delle interviste, i log, i responsi dei questionari, l’osservazione etnografica ed altro ancora.
Tutto questo insieme di informazioni da vita ai veri protagonisti, le personas, e alle loro azioni in base agli scenari e casi d’uso.
Definito questo gruppo di dati e di users (personas) analizziamo le loro sessioni corali e partecipative, per poi avere deduzioni e riflessioni analitiche per progettare strategie UXd e semplificare i flussi di uso.
E’ una sorta di bussola per orientarci all’interno del mondo degli users, di come vivono e usano le nostre applicazioni, e di come esse rispondono alle loro esigenze.
Tra l’altro, non sono mai dei documenti fini a se stessi ma, bensì, raccolgono le informazioni utili per la nostra ricerca di soluzioni al problem solving evidenziandone le criticità. Sono dei documenti, aperti e dinamici, che ci fanno da ponte con le vere necessità dello user.
La loro natura non definita e non definitiva, ma dinamica ed aperta le rende meravigliosamente “vive”.
A noi UXd non resta che individuarne i punti migliori, per sbrogliare la matassa delle criticità.
Oggi prendo spunto da questo video per sensibilizzare gli UXD (da ora in poi UX Designer) alla progettazione delle Notifications nel rispetto degli users. Le best practices, in parole povere, sono “il miglior modo” per fare qualcosa.
E’ fantastico come Chirs Crutchfield abbia, in questo corto, miscelato il suono delle notifiche in un’armonia di frustrazione. Ebbene si è di frustrazione che si parla, e l’incapacità di focalizzare l’utente sulle effettive notifiche che lo interessano. Di fatti quest’ultime possono avere un effetto distruttivo sullo “user” tanto da farlo cadere in trappole a mò di loops.
ESISTONO SOLO DUE TIPI DI PERSONE IN QUESTO MONDO:
CHI LEGGE LE NOTIFICHE E CHI NO
People types by notification @EliLanger on TwitterDefinito questo panorama possiamo considerare 3 Best Practices chiave per il Notification Design.
Dare allo user il controllo
La possibilità di accettare le notifiche crea una sorta di fiducia nei confronti dell’applicazione.
Approvando le notifiche, diamo allo user la possibilità di filtrare quelle che preferisce, sperando nel tempo che lo user presti attenzione a quelle da noi proposte per la nostra app. Dando quindi il controllo allo user di selezionare le notifiche più frequenti senza creargli troppa frustrazione.
Actionable notifications/Sapere quando fermarle
Una notifica di solito è qualcosa che richiama l’attenzione dell’utilizzatore (un tweet da visionare, un allarme da spegnere, domande a cui rispondere sui forum).
Queste devono essere “actionable” e “transactional” ovvero evidenziare l’importanza della notifica ed essere funzionali all’occorrenza dello user secondo tre parametri fondamentali:
Abilitazione alla human-to-human interaction
Migliorare le funzionalità quotidiane
Controllare gli stati transitori del dispositivo
Un modo ottimale di rendere utilizzabili e funzionali le notification è quello di permettere delle direct action (azioni in tempo reale) alle notifiche stesse.
Nell’immagine seguente vediamo il caso di una notifica a cui è possibile rispondere direttamente dal blocco schermo, senza avviare l’applicazione nativa rendendo quindi la notifica iper-funzionale.
Un altro modo, molto intelligente, per risolvere il problema delle notifiche invasive è quello di fermare il sending di nuove notifiche in caso in cui l’utilizzatore non eseguito nessun tipo di action verso quella famiglia di notifiche ignorandole. Esse quindi restano in coda e verranno notificate solo dopo che lo user applicherà qualche sorta di action verso di loro (magari aprendo la prima notifica inviata o la più recente).
Duolingo riconosce quando i reminders sono ignorati dallo user per evitare frustrazioni.
Personalizza il contenuto
La notifica è una sorta di microcopia del messaggio originale, inviato sotto forma di snippets (parte) di testo o di contenuto del messaggio originale.
Esso deve contenere le informazioni ottimali per essere considerato dallo user, in modo da dargli la possibilità di decidere al meglio cosa fare.
Netflix, in questo, è stato uno dei pochi che ha fatto un buon lavoro sulle notifiche, tenendo presente le abitudini dello user e le sue scelte cinematografiche, gli notifica i giusti contenuti in modo creativo, semplice e non invasivo.
Fermati quando voglio, o ti cancello!
Le notifiche e gli alerts sono parti fondamentali per la UX, anche se c’è da bilanciare il peso tra la soddisfazione dell’utente e l’irritazione. Con il futuro dell’innovazione dei device, come i wearables e gli smartwatches
le notifiche saranno sempre più sensitive e vicine agli users pertanto una cattiva UX potrebbe essere rischiosa, al punto che l’utente la disattivi definitivamente o addirittura far rimuovere l’applicazione sul dispositivo.
Le notifiche vanno trattate con il rispetto che meritano!
Questo sito utilizza i cookie per migliroare la tua esperienza. Puoi leggere qui la nostre Policy.Accetta
Privacy & Cookies Policy
Privacy Overview
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
Lo users viene immediatamente avvisato tramite un’animazione che c’è un problema. Image credit: 
