Mese: Ottobre 2016

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

Best Practices per le notifiche nel rispetto degli users

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

image01-1
People types by notification @EliLanger on Twitter
Definito 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.

image11-657x675

 

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

with-768x512

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!

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