Categorie
Ux Blog

12 mosse vincenti

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.

mobdestips

 

 

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.

mobdestips02

 

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.

mobdestips01

 

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.

mobdestips04

 

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.

mobdestips03

 

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

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

mobdestips05

 

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.

mobdestips07

 

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.

mobdestips09

 

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.

 

mobdestips10

 

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…

 

Walter Fantauzzi

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

SI RIPARTE

Approfitto dell’inizio del nuovo anno scolastico in questo 12 settembre per ricordarvi che proprio da qui, dalla scuola, dovrebbe iniziare il percorso nell’apprendimento della User Experience. Ebbene si l’esperienza d’uso è un pò come diceva Bruce Lee del Kung Fu, ovvero che va praticato ogni giorno, da quando infili i calzini la mattina a quando lavi i denti la sera. Credo che per apprendere al meglio la capacità di utilizzare qualcosa, sia proprio nell’esaminare i gesti della vita quotidiana. Personalmente odio gli oggetti poco funzionali che spesso trovo in casa, e rifletto sul perchè non li abbiano progettati con più criterio. A volte si pensa che i costi di produzione per rendere migliore un oggetto siano astronomici, ma forse con piccole accorgimenti potrebbero renderlo davvero utile. E’ bene quindi iniziare da subito ad apprendere quest’arte del migliorare, di rendere più utile un mezzo che serve ad estendere le nostre capacità e a facilitarne le operazioni d’uso.

In bocca al lupo ragazzi! Buona Scuola

W.F.

1468910588-scuola-convoca-politica

Categorie
Ux Blog

Modus Operandi UX

Nel seguente articolo, la descrizione del mio approccio al mondo della User Experience. Le fasi ed il workflow utilizzati nelle mie progettazioni di UX e UI.

Fase 1: Il Workflow
Prototipizzare, misurare e ascoltare.
Sono le tre fasi essenziali per la realizzazione di un buon prodotto.

Le distinguo in questi tre tempi:

1. Realizzare un prototipo
2. Misurare i risultati Analizzare i feedback
3. Progettare

L’immagine seguente mostra l’andamento della fase progettuale. Partendo dal basso della piramide trovate i punti cardine alla base del mio processo lavorativo.

piramide
Fase 2: Paper Prototype
Il “Modus operandi” che utilizzo nella realizzazioni delle UX è di tipo piramidale.
Dopo l’intervista con il cliente e la definizione dei “goal” da raggiungere, il primo step che vado ad affrontare è quello del “Paper Prototype” ovvero uno schizzo su carta. Sarà pertanto il Paper Prototype la guida per definire al meglio, con il cliente, le funzionalità  e la navigazione dell’applicazione (o sito web). Parto dall’unità di misura che si definisce in MVP (Minimum Viable Product = Minimo Prodotto Fattibile), ovvero  realizzo l’applicazione volta per volta, partendo da una versione iniziale che racchiude un set minimo di funzionalità. Quest’ultime sono le caratteristiche indispensabili che soddisfano le richieste del cliente.

8fcf8cf2d374808124fe967367c3b083
Fase 3: Wireframe
Definito il processo di navigazione e la collocazione dei contenuti procedo alla realizzazione di un wireframe digitale con il software “Sketch”. L’utilizzo delle librerie o design pattern mi permette, in tempi brevi, di realizzare un wireframe o un diagramma di flusso ottimale. In questo modo avremo un timone da seguire, senza possibilità di perdersi durante la fase di realizzazione dell’app. Utilizzando invision app, rendo disponibile la “definition on done” (ovvero il progress lavori) a tutto il team di sviluppo.
Mediante questa applicazione posso condividere con i developer ed il cliente, lo status di ogni vista secondo degli step (in fase di review, fermo, fatto ecc…).

46b4cf25048fc4c0076612d5195978c4
Fase 4: Lo studio di fattibilità
Lo step successivo sarà realizzare uno studio di fattibilità con gli sviluppatori, per valutare tempi di realizzazione e processi scrum. Quest’ultima fase permetterà di avere un preventivo di tempi e costi per la realizzazione del prodotto commissionato. Una volta raggiunti gli accordi tra lo strato “developer” e quello delle “funzionalità” da realizzare procedo con la realizzazione visual.

b915360f967d051aec3956367ae55bb7
Fase 5: Visual Design
In questa fase realizzo l’interfaccia grafica (o meglio la UI) dell’applicazione. Definisco quindi i placeholder dei contenuti, i pulsanti, le immagini ecc… da posizionare sullo schermo. La progettazione del linguaggio grafico a volte estende quello già esistente dell’azienda. Utilizzo quindi colori, loghi e simbologie tipiche del cliente. Non raramente c’è la necessità di rivalutare la palette colori, definire nuovi simbolismi o addirittura un restyling del linguaggio grafico del brand. Il tutto per rendere l’applicazione ergonomica nel migliore dei modi.

8d2c4d7dbd53bbe508d12cb4031687f9
Fase 6: Prototipazione 2.0
Principal per la prototipazione animata è uno dei software più rapidi e realistici. Utilizzo questo ambiente per rendere tangibile l’esperienza d’uso ( o UX) da mostrare al cliente. Posso quindi analizzare se la mia UX è user oriented (ovvero incentrata sull’utilizzatore) o meno, così da valutarne eventuali modifiche o migliorie. Valuto se il raggiungimento dei goal sia soddisfacente, e ne monitoro i feedback o eventuali problematiche da migliorare.

0cc760f670f48e454060d892afeb17dc

Fase 7: Asset
Una volta definita la veste grafica, lo studio di fattibilità con i developer e gli obbiettivi richiesti dall’utente, creo gli asset da passare allo sviluppatore. Lavorando in ambiente Creative Cloud, la funzione “collabora” da Photoshop CC mi permette di condividere tutti gli elementi grafici agli sviluppatori. Dai colori in esadecimale utilizzati, alle immagini o elementi grafici dell’interfaccia.
Bellissima ed utilissima è l’applicazione Slack, una sorta di chat collaborativa, con la quale posso condividere dettagliatamente un elemento grafico o non con il team di sviluppo. A volte propongo tramite reference visivi e porzioni di codice, animazioni dinamiche COCOA da poter applicare a gesture o eventi.

Noire_UI_Kit_web-user-interface

 

Fase 8: Dead Line o No?
Sinceramente non credo esista una dead line per un’applicazione mobile o web. O meglio esiste uno step nel quale l’app deve andare online ma di certo non può morire così.

Feature_Image_Mobile_Device_Management_BYOD_Evolution
Il mondo dell’informatica è in costante evoluzione pertanto anche le app ed i siti web, così come gli esseri viventi, devono avere un mutamento. Possiamo valutare molti case study da facebook a flipboard ed altri ancora.
Non credo che si possa definire un’applicazione “finita”, posso dire che è in constate mutamento.

 

Walter Fantauzzi

Categorie
Uncategorized

Minority Report UX

Ha del futuristico la user experience proposta da Insider in questo video.  

Categorie
Ux Blog

UX Jobs opportunity Tweet

Today my tricks abot UX jobs opportunity on tweeter.

The most famous UX JOBS ALL

Schermata 2016-06-27 alle 12.09.47
UX JOBS ALL

The young but no less effective, UX JOBS 247

Schermata 2016-06-27 alle 12.10.31

Categorie
Ux Blog

Why this Ux fails ?

I was very happy when I saw the Microsoft Flow app in the applestore. But what the fake at the login moment? Let’s see this screenshot… There isn’t a way to create an account on the fly… And so how I can use it on the rails?