Tag: ux

Categorie
Ux Blog

Come si comportano gli utenti in 6 mosse

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.

download
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 Sociale che 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
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!

Walter Fantauzzi

Categorie
Ux Blog

The Power of Color

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.
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.

colorapp
I colori monocromatici sono derivazioni del tono colore principale.
colorapp-12

 

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.

coreapp

 

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.

colorapp-2

redscheme

 

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.

 

colorapp-10

 

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.

colorapp-2

 

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.

colorapp-7

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.

colorapp-4
In questa immagine, la simulazione di due possibili ruote colore percepite dai daltonici
E’ 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.

colorapp-6

 

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!

 

Walter Fantauzzi

 

Categorie
Ux Blog

Holistic Adaptive Design: Fattori da considerare in un mondo multi-schermo

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's
Display taglia-coda di McDonald’s
Ogni 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.

When designing in a multi-screen world, the three major factors to consider at minimum are: viewing distance, touch area, and touch targets and interactions.

 

Distanza Visiva

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.

maxheighttouch

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
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.

 

Walter Fantauzzi

Categorie
Ux Blog

Migliorare la UX con le “Functional Animation”

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

 


Image credit: Ramotion on 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.

Image credit: tympanus

 

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.

Rendete le app funzionali! Buona UXd

Walter Fantauzzi

Categorie
Ux Blog

Experience Map

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
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à.

Walter Fantauzzi

Categorie
Ux Blog

Design Patterns

In Ux design si considerano diversi aspetti progettuali, di  analisi e strategia. Lo ux designer ha il compito di progettare ed avere strategie. Identificando i problemi legati al progetto ne trova le soluzioni ottimali. Con l’ausilio dei design patterns si possono trovare soluzione rapide alle varie problematiche che nascono nella progettazione di un’interfaccia e quindi nella UX dell’utente.

2de1jquery-carousel-evolution_thumbI design patterns sono essenzialmente delle librerie di oggetti per l’esperienza d’uso riutilizzabili. Lo UX se ne avvale o si crea le proprie librerie design pattern. Vista la rapida evoluzione della società digitale è essenziale capire come migliorare l’utilizzo di questi elementi (spesso nativi) per farli diventare degli standard. Cito per esempio il design pattern per il carousel che permette di far ruotare i contenuti in un singolo spazio orizzontale, oppure gli accordion che si estendono per mostrare il contenuti una volta cliccato dall’utente. Lo spazio è di vitale importanza soprattutto in interfacce che contengono molteplici contenuti annidati, ed è per questo che si utilizzano delle escamotage per sfruttarlo al meglio. Lo ux designer quindi deve creare la giusta ergonomia e deve disporre gli elementi grafici e i contenuti in modo opportuno, per una migliore usufruibilità dell’applicazione.

Come può lo ux designer definire il design pattern necessario?

Immaginiamo che serva una funzionalità dove l’utente puo’ aggiornare in real time i contenuti di un social e stiliamo i seguenti punti:

  1. Definiamo il nome
  2. Descrizione
  3. Soluzione

Dopo averne definito il nome  del design pattern lo ux designer descrive la funzionalità con le operazione che l’utente deve compiere.  Viene poi definito il contesto: Social networks o altre situazioni di contenuti aggiornabili manualmente o attraverso intervalli di tempo.

Si definisce quindi la soluzione: Quando l’utente all’inizio della pagina tocca e dragga lo schermo all’interno dell’area dei contenuti verso il basso lo schermo fa apparire il messaggio  “pull to refresh” ed inizia l’aggiornamento dei dati dal server.

In questo modo lo UX designer ha definito un proprio elemento di design pattern da poter integrare mano a mano, con altri elementi fino a creare una libreria personale. Possiamo fare il paragone con una borsa da carpentiere in cui dentro vi sono cacciaviti, martelli, trapani ecc… Tutti questi attrezzi o tools sono i nostri items (elementi) che costituiscono il contenuto della nostra libreria. Sono quindi riutilizzabili e modulabili a seconda delle necessità per raggiungere determinati scopi (in questo caso le UX per l’utente).

 

Walter Fantauzzi

Categorie
Ux Blog

UX E PERSONAS

Photo by Amy Cotton on Behance
Photo by Amy Cotton on Behance

Le “Personas” sono gli utilizzatori finali della nostra app o sito web. Pertanto lo UX si pone di solito queste due domande: Per chi stiamo realizzando il progetto? Chi sono i nostri utenti? Nel caso di un e-commerce possiamo immaginare che la peronas sia un’acquirente curioso, interessato solo da prodotti tecnologici, amante dei particolari del prodotto (foto, recensioni, domande).  Queste sue caratteristiche danno al team di design delle informazioni specifiche sul tipo di user che usufruirà dei servizi dell’app o del sito che stanno realizzando.

Con queste informazioni in nostro possesso, possiamo definire i requisiti essenziali: Quali sono le prime 3 operazioni che questi profili vorrebbero  poter fare?

In un foglio excel  si potrebbero elencare tutte le funzioni principali degli attuali competitor, aggiungendo in una colonna le funzionalità in piu’ che daranno valore aggiunto al nostro prodotto. Poi aggiungendo una colonna relativa ai vari profili (personas) stabiliremo l’importanza di ogni funzionalità per tipologia (necessaria, interessante, potenzialmente utile, non necessaria etc.).

La UX è proporzionale alle informazioni che recuperiamo dai nostri personas

Le caratterisitche dei profili devono contenere: abitudini, obiettivi, comportamenti e bisogni. Va assolutamente creato una versione narrativa umanizzata della personas, piuttosto che descrizioni segmentate. E’ necessaria quindi la sua foto, il nome ed una frase o idea che lo rappresenti. Bisogna inoltre dare priorità a determinati profili definiti come target primari.

Tabelle Pivot
Tabelle Pivot

Una volta raccolte tutte le informazioni possiamo utilizzare le  tabelle pivot per filtrare i profili in base alle loro caratteristiche. Un ottimo metodo è la Cluster Analisys che attraverso l’algoritmo di raggruppamento K-means e dato un insieme di informazioni (variabili) relativo agli utenti e di cluster (gruppi) possiamo ottenere, sempre attraverso lo stesso algoritmo K i centroidi (gli utenti più importanti).

 

Relativamente ai siti web possiamo raccogliere moltissime informazioni attraverso google analytics che grazie ai report ci permetto di vedere che tipo di devices utilizzano gli utenti,  il browser, le chiavi di ricerca e tutti i comportamenti che fluiscono sulle nostre app o siti web.

 

E’ quindi la personas il nostro utente da soddisfare!

 

Walter Fantauzzi

 

Categorie
Ux Blog

User Flow vs Manuale d’uso

Tutti voi ricordate di sicuro i manuali d’uso che c’erano (e a volte ancora ci sono) nella scatola di ogni apparecchio domestico che abbiamo e/o che acquistiamo ancora. Bene, lo UX designer in teoria (e spesso in pratica) fa si che non ci sia bisogno di questo “manuale” per utilizzare un’applicazione mobile o un sito web.

telefunken manual

Con user flow (flusso dell’utente) viene definito il percorso che l’utente deve intraprende quando usa le nostre app o siti web. Che questo viaggio sia onirico o un incubo, dipende proprio da come lo UX realizza lo user flow. Alcuni case study dimostrano che creare un buon user flow permette di avere un forte impatto sul business in termini di raggiungimento degli obiettivi. Per definire questo viaggio dobbiamo conoscere 3 aspetti molto importanti.

e8f38723700f65a08fd20e5c86d3ec01

Conoscere i tuoi utenti

Prima ancora di progettare si dovrebbero comprendere gli utenti (personas) e le loro esigenze e quali obiettivi intendono raggiungere con il serfvizio offerto dall’app o dal sito web. Cosa li spinge ad usare il nostro prodotto? Attraverso questa “comprensione” si possono poi definire delle sequenze (o step) da percorrere fino al raggiungimento dell’obiettivo prefissato. Maggiore è la semplicità del percorso, maggiore sarà il viaggio intrapreso dall’utente…cio’ si traduce in “motivazione” a continuare, migliorando ulteriormente l’esprerienza utente (ux).

 

Obiettivi e business

Un giusto approccio non è domandare agli utenti di come va l’applicazione, è preferibile scaturire in lui curiosità e motivazione lungo il percorso mettendoli in condizione di “imparare navigando“. Concentrarsi solo sul raggiungimento degli obiettivi è sbagliato, chiedere ad esempio di inserire la propria mail per la newsletter prima ancora che l’utente capisca di cosa si tratti si perde di “valore”, peggio ancora pubblicità invasive che occupano rilevanti parte dell’interfaccia disturbando l’attenzione dell’utente. Il tasso medio di conversione di un banner è dello 0,1%. Pertanto non ha senso rovinare il nostro lavoro in questo modo!

 

Gli obiettivi

Quando un’ utente raggiunge l’obiettivo in poco tempo, grazie alla semplicità dell’interfaccia è sicuramente pronto al prossimo step. Se carichiamo troppo in richieste di informazioni, campi obbligatori con disordine si può creare nell’utente una frustrazione anche per una semplice registrazione, che potrebbe essere un deterrente nell’operazione stessa. Se per raggiungere l’obiettivo di “registrarsi” per poi completare un’acquisto in modo difficoltoso tutto il nostro lavoro di ottimizzazione in termini di conversione decade. E’ d’obbligo quindi creare una mappa degli obiettivi e dare una priorità, una gerarchia ai percorsi di logica. Pensando ad un’e-commerce si possono definire questi 3 obiettivi:

  1. Far registrare l’utente
  2. Far acquistare all’utente
  3. Creare loyally (fidelizzarlo)

Se abbiamo chiaro questo percorso potremmo concentrarci nella progettazione di ogni singolo obiettivo per step ed avere un flusso dell’utente ottimale.

 

Walter Fantauzzi

Categorie
Ux Blog

Invision e la UX

Ad ogni ux designer il suo software di progettazione. I più famosi sono omniegraffle ed axure, programmi completi che permetto di creare design e interazioni per la prototipazione ad altra fedeltà. Padroneggiarli pero’ richiede esperienza e studio. Inoltre molti visual designer e user experience preferiscono photoshop, illustator o sketch per creare il visual per poi importare ogni singolo elemento nelle librerie del programma.

Invision

Ho provato personalmente invision e mi ha lasciato molto sorpreso in quanto le sue performance cambiano le regole del gioco. Lo UX progetta con ciò che preferisce utilizzando invision per creare interazione. Basta importare le varie “schermate” disegnate (magari in photoshop o sketch) per creare le pagine del nostro progetto. Attraverso una semplicissima interfaccia potremo creare transazioni, overlay, menu interattivi e tutto quello che occorre per realizzare un prototipo molto fedele a quello che sarà nella realtà. Possiamo tenere online i nostri progetti ed in maniera semplice ricevere feedback dal nostro team o dai clienti permettendoci, quindi, di gestire in un unico contenitore: commenti, preview ed eventuali notifiche di azioni da parte del team. Con il “live share” possiamo interagire con i nostri collaboratori in modo diretto. Vengono, di fatti, visualizzati i puntatori del mouse di ogni utente con relativo nome in modo che ognuno di essi portrà interagire con le funzionalità e l’interfaccia dell’applicazione online invision. Ogni modifica effettuata può essere spostata di stato; ad esempio se stiamo lavorando ad una schermata di login e necessitiamo dell’approvazione del cliente possiamo metterla “in progress” in modalità temporanea. Dopodichè una volta ricevuta l’approvazione possiamo spostarla in “approved” il tutto come un vero e proprio workflow.

0049ea6894f68b30bcac68f1bd84f027

Invision mette quindi a disposizione fantastici strumenti per creare presentazioni da urlo che faranno felici i nostri clienti. Ci permette inoltre di definire e creare tutte le linee giuda relative al design, colori, tipografia etc. per rendere ogni progetto completo in tutte le sue parti. Fantastica è la possibilità di visionare i prototipi direttamente dai devices interessati per renderli ulteriormente fedeli al prodotto finale. Nel caso in cui si utilizzasse un dispositivo mobile per visionare il prototipo, “entreranno” in campo tutte le funzionalità touch (tap, doppio tap, swiper sinistro e destro, sopra e sotto etc.).

Resta per me il modo migliore per sottoporre al cliente un prototipo più o meno realistico.

 

Walter Fantauzzi

Categorie
Ux Blog

Il metodo Star per il portfolio

Spesso sui forum di UX leggo richieste e indicazioni su come realizzare un portfolio dei lavori personali. Personalmente suggerisco il metodo STAR. Si tratta principalmente di una tecnica usata nelle interviste e colloqui conoscitivi e/o di lavoro, che possiamo comunque applicare alla realizzazione del nostro portfolio.

banner_sm

Viene definito, in inglese, secondo 4 punti cardine:

  • Situation: The interviewer wants you to present a recent challenge and situation in which you found yourself.
  • Task: What did you have to achieve? The interviewer will be looking to see what you were trying to achieve from the situation.
  • Action: What did you do? The interviewer will be looking for information on what you did, why you did it and what the alternatives were.
  • Results: What was the outcome of your actions? What did you achieve through your actions and did you meet your objectives? What did you learn from this experience and have you used this learning since?

Possiamo applicare questo metodo per definire quindi un portfolio dei nostri lavori utilizzando i 4 punti:

  1. La Situation, ovvero la condizione in cui ci siamo trovati dopo le richieste del cliente
  2. Task,  descriviamo gli step eseguiti per risolvere tutte le problematiche ed affrontare l’analisi della UX
  3. Action, In parole povere: Che cosa abbiamo fatto! quale sono state le operazioni che hai eseguito per realizzare la tua UX?
  4. Results, infine i risultati. Se e come hai raggiunto gli obiettivi prefissati dal cliente, le problematiche risolte e l’esperienza che ne hai acquisito. E’ stato quindi un risultato vincente?

In base a questa metodologia, io propongo sempre un’analisi di ogni lavoro eseguito.

Possiamo quindi utilizzare questo metodo per realizzare il nostro portfolio lavori, descrivendo le condizioni in cui ci siamo trovati, come abbiamo affrontato l’analisi, cosa abbiamo fatto per realizzare il tutto ed infine, mostriamo i risultati.

Consiglio questo approccio anche quando si lavora a braccio con il cliente. Per avere un modus operandi ben consolidato. 

Walter Fantauzzi