Categorie
Ux Blog

8 regole del Fight Club applicate alla UX design

Negli anni 90, il mitico David Fincher realizzava lo straordinario film cult intitolato Fight Club dall’omonimo romanzo di Chuck Palahniuk. Un film che ha aumentato la sua fama negli anni fino a diventare un’icona speciale per una filosofia di pensiero unica ed identificabile con “Fight Club” come insegnamento di vita. Tyler Durden (il personaggio interpretato da Brad Pitt) parlava direttamente a me, quando il film veniva proiettato sullo schermo, come se fosse un docente in realtà virtuale, pertanto potrei traslare quelle filosofie in una Fight Club per UX in 8 utili regole.

 

1. Solo quando avrai perso ogni cosa sarai libero di poter realizzare di tutto

Tyler ci dava questa pillola di saggezza mentre una sostanza chimica divampava tra le sue mani. C’era una soerta di filosofia illuministica nello spiegare che perdere tutto è essere liberi per poter ricominciare da zero. Era qualcosa di eccitante che allo stesso tempo spaventava. E’ la possibilità di ripartire da zero!

 

Applicando alla UX la filosofia di Tyler potrei dire che è obbligatorio rimuovere tutto quello che non è necessario, superfluo o semplicemente inutile. Abbandonare tutti i relitti che ci rallentano verso la via del successo. Ogni elemento nella progettazione dovrebbe essere funzionale e avere uno scopo.

Così come diceva Antoine De Saint-Exupery

“La perfezione viene raggiunta, non quando non c’è più nulla da aggiungere, ma quando non c’è più nulla da togliere.”

 

2. Attaccare delle piume sul tuo culo, non fa di te un pollo

Questo è essenzialmente quello che Tyler ci dice per credere in noi stessi e renderci conto di chi siamo senza cercare di essere qualcosa che non sei. E’ importante però attuare anche questa regola nella UX e potrei enunciare che è bene si valutare le soluzioni messe in altro da altri, capirne i segreti ma non certo cercare di imitarli. Noi non siamo loro, quelle regole potrebbero non valere per il nostro mercato o per il nostro progetto ma potrebbe essere un riferimento o un case study da valutare. Che si tratti di una certa interazione paradigma o una struttura di navigazione, ponetevi le domande vitali:  perché, chi, come e quando si sta utilizzato questo oggetto nella vostra UX.

3. Le cose che possiedi finiscono per possederti

Ok, se qualcuno ama davvero quello che facciamo e spende ogni loro momento nella giornata ad interagire con esso allora va tutto alla grande. Ma nella realtà non aspettatevi questo. Dopotutto anche i nostri users hanno una vita da vivere e di certo non la passeranno al 99% sulle nostre app o sui nostri siti.

 

4. Rifiuta gli assunti di base della civiltà, in particolare l’importanza dei beni materiali.

In questa frase Tyler si scontra con un problema, che oggi credo sia più catastrofico di 20 anni fa quando uscì il film. Si tratta di non dare totale importanza ai beni materiali. Vorrei tanto sapere, oggi, quali sarebbero state le reazioni di Tyler a Facebook, Snapchat, Instagram e compagnia bella. Ovviamente Tyler va abbastanza in estremo per definire il suo punto di vista, ma in sostanza ci sta dicendo di essere consapevoli su ciò che abbiamo effettivamente bisogno rispetto a quello che vogliamo.

Ecco perché è molto importante che noi creiamo esperienze che contano veramente per le persone.

Che si tratti di risolvere un problema, rendendo la loro vita più facile in qualche modo, o semplicemente intrattenendoli dobbiamo realizzare applicazioni utili. Fate attenzione nel vostro lavoro, e se renderete la vita di una sola persona migliore, siatene orgogliosi.

 

5. Questa è la tua vita, e sta finendo un minuto alla volta.

Ok, questo è piuttosto un sentimento deprimente, così possiamo dargli un’occhiata in un modo un pòdiverso. La vita è fugace e il nostro tempo è breve, per cui dobbiamo fare i conti con ogni momento che viviamo. Possiamo applicare questa filosofia UX in due modi diversi. In primo luogo, capire abbastanza rapidamente la mente del nostro utente e sulle sue necessità o meno, in modo che continui ad utilizzare il nostro prodotto o servizio. Un’app difficile da usare o frustrante, farà scappare il nostro user.

Perché? Perché la vita è troppo breve per sprecare su roba scadente.

In secondo luogo, è troppo breve anche per noi nello sprecare il nostro tempo nella creazione di qualcosa che non sia diverso ed che sia un’eccellenza. Se siamo in grado di rendere la vita dei nostri utenti solo un pò migliore durante il loro breve tempo su questa Terra, non sarà altro che tempo speso bene, giusto no?

 

6. Non sei un unico e bel fiocco di neve

Filosofia interessante. Tyler ci ricorda che siamo tutti fatti della stessa materia organica in decomposizione, quindi in definitiva ciò che conta è solo l’individualità! Questo è anche un po ‘un aspetto negativo, quindi cercherò di rigirare in modo più utile il concetto.

Come UX designer, dovremmo cercare di reinventare la ruota ogni volta che iniziamo un nuovo progetto?

Probabilmente no, sarebbe stupido. Va bene però appoggiarsi sugli esempi di altri che sono arrivati ad un obiettivo, prima di noi. Utilizzare soluzioni di successo che sono già là fuori (per il web) per aumentare le informazioni sul proprio lavoro (ma ricordatevi di non attaccare le piume fino il culo, ovvero di non essere superbi) è essenziale. Se le persone godono utilizzando un certo paradigma, potete cavalcare l’onda e utilizzarlo per aiutare le interazioni dei vostri utenti con la vostra app. Sì, l’originalità è fondamentale, ma fate attenzione a non creare frustrazione e porre ostacoli tra lo user e l’interfaccia dell’app.

7. Potrò mai essere complete. Potrò mai essere soddisfatto. Potrò mai essere perfetto.

Vogliamo che il nostro lavoro sia ottimo, ma se si raggiunge quel punto, dobbiamo fermarci? Io non credo. Dobbiamo spingere costantemente noi stessi e il nostro lavoro al meglio, sempre più avanti.

Uno dei fattori che ci permette di spingere noi stessi ulteriormente è la prova. Provare costantemente!!!

 

8. Io dico di smettere ad essere perfetto, dico di cercare di evolverci, e lasciare che i trucioli cadano dove possono.

Tyler ci sta dicendo che va bene anche non essere, o anche non sforzarsi di essere, perfetto. Se le cose non sono esattamente perfette, va bene lo stesso – tanto non rimarrà così per sempre.

Sfruttate al meglio la situazione, apprezzare e godere di ciò che si ha.

Qualunque cosa tu stia facendo in questo momento potrebbe non essere perfetta. E va bene così! Qualunque cosa stai facendo può evolvere, non è finita ancora. E questo è esattamente ciò che un buon UX dovrebbe fare.

Dobbiamo sempre essere la risposta ai desideri dei nostri utenti, ai loro bisogni creando continuamente un prodotto o servizio che possano amare.

Come UX designer, dico di abbracciare la filosofia del Fight Club UX, osservare le sue filosofie e i suoi messaggi nascosti, perché in realtà può aiutarci a creare esperienze migliori.

 

Categorie
Ux Blog

Le Aziende Italiane amano le pezze!

Loading Perpetuo!

“Alla faccia della User Experience” dopo ore ed ore di offline per il sito di un noto servizio italiano, scopro che il tutto era per lanciare il nuovo portale dove c’è stata la morte della UX.

Simpaticamente ho fatto notare su Twitter che il sito era offline

Beh, “che che se ne dica” come al solito la solita pecionata (definizione di: pezza, toppa, artefatto, barbatrucco, mpiccio o ‘mbroglio) all’Italiana, magari da un sacco (molti ma molti) di euro. Ebbene si, sono veramente affranto da quanto accade per la UX nei portali istituzionali in Italia e come al solito questa ne è la dimostrazione. In pratica hanno lasciato un portale con il solito cruscotto (una sorta di escamotage informatica) messo tra lo strato del vecchio sito e una bella grafichetta nuova. Il risultato? Un casino estetico che disorienta lo user. Figuratevi che mi sono perso anche io nel cercare l’estratto conto online del conto bancario.

Eccolo qua, nell’immagine sottostante il portale in tutto il suo splendore.

Resta il fatto che… dove cavolo lo avete messo il conto corrente? Forse una delle operazioni che lo user utilizza di più visto che non vuole fare mega-file negli uffici fisici. Ed inoltre, il valore aggiunto del portale è proprio quello di permettere operazioni bancarie “al volo”, senza fila e senza code, comodamente da casa. Ma allora io dico, se il vostro core business per fare introiti monetari sono operazioni bancarie, perchè cavolo le mettete fuori dalla schermata visiva principale? Cioè io (user) devo scorrere la vista per andarmi a cercare la sezione del conto bancario. Allora il designer che ha progettato il sito potrebbe dirmi: Walter, sei un coj**ne perchè nel menù in alto c’è… si ma dove sta? Quale tra le due informazioni che mi indichi del conto bancario è quello corretto?

Nella schermata successiva, ecco il menu a tendina che si apre quando cliccate su CONTI CARTE E FINANZIAMENTI. Beh che dire si evidenzia in azzurro la voce selezionata ma resta evidente anche SERVIZI ONLINE che è un’altra sezione ammucchiata con le voci di menu. E’ tutto n’ammischio (un miscuglio), dicono in ciociaria (la mia patria). Tornando a bomba, visto che sono su di giri e colmo di rabbia perchè non si investe negli UX designer… Io dico a chi ha progettato il tutto: << hai tenuto conto che siamo in europa?>> ovvero noi leggiamo da sinistra verso destra per cui il nostro cervello si aspetta di trovare le informazioni più importanti su di un sito a sinistra…

 

…E il designer (magari poverino, è stato costretto a fare porcate sotto minaccia o moneta) mi potrebbe dire: <<si Walter, il boss mi ha detto di mettere li le informazioni pubblicitarie dei servizi e non i servizi online>>. Ed io gli direi:<< Ti dovevi impuntare e dire al tuo boss o al dirigente dell’azienda: NON CAPISCI UN CA***o>> come farebbe Steve Jobs, spiegandogli con mappe di calore, con analisi di UX che la scelta è una pura ed emerita cazz***ta.

Avete disorientato l’utilizzatore, come al solito facendo un casino epocale!!!! 

La zona Rossa che dovrebbe essere la parte principale, quella che dovrebbe contenere (per logica) i servizi che potrei avere online, subito!, Al volo! li ho messi in una zona che non mi sarei mai aspettato. Confido a contraddirmi ad ognuno di voi… vi aspettereste dei servizi nella zona verde? Siete abituati a trovarli li in altri siti?

Se fosse così scrivetemi pure, con tanto di capture screen!

E la cosa più bella, dopo che hai usato il 99% del tuo cervello, aver trovato dove devi cliccare per un cavolo di estratto conto… ti compare questo: TA DA”””!

IL SITO VECCHIO!

 

 

Che dire? Io, come ho detto in vari video post, veramente vorrei andare a zappare la terra… almeno ho una dignità professionale. Ma qui siamo al paradosso del paradosso. Portali istituzionali che non rispettano una ben che minima regola di UX, di accessibilità di ergonomia… E se ho fatto fatica io che sono “informatizzato” in un certo senso, uno come mio padre o mia madre come cavolo può usufruire dei servizi?

 

Utile o non utile? Questo il dilemma!

 

Walter Fantauzzi

Categorie
Ux Blog

La UI non è un cartone della Disney

Nel mio articolo Migliorare la UX con le “Functional Animation” vi ho parlato di come rendere più gradevole l’esperienza d’uso di un utente con delle animazioni funzionali. Ciò non toglie che si esageri con animazioni che possano frustrare l’utilizzatore e che siano superflue.

Su di un bellissimo articolo che ho scovato in rete (ma su cui non è riportato l’autore che vorrei ringraziare) viene usato il termine Disneyfication (ed è bellissimo). Difatti l’autore, indica che questo esempio dimostra come sia troppo sofisticata un’animazione funzionale. Qui l’elasticità delle animazioni dei rimbalzi e il ridondare delle visual interaction sono troppo Disneyane.

Le animazioni, sono come delle maledizioni… se ne si abusa possono perdere il loro impatto

Ed è proprio per questo che molti designer stanno confondendo l’interazione con la UI grazie alle funzioni animate con l’intrattenimento o i videogame. Cosa vuol dire questo? Vuol dire che un’animazione, come ho ribadito già nell’altro articolo, non deve essere esagerata… percettibile ma non invasiva. Nell’esempio in basso, potete vedere come in 100ms (millisecondi) tutte le informazioni da inviare all’utente sono pienamente soddisfatte.

 

In questa demo invece una piccola vibrazione della notifica farà capire all’utente che qualcosa non è andato a buon fine.

E’ quindi utile usufruire di queste animazioni funzionali solo per gli elementi più importanti, o per dare a loro una sorta di priorità di importanza tra l’uno e l’altro.

 

Walter Fantauzzi

Categorie
Ux Blog

Micro Interactions UI

Se avete seguito gli ultimi trends del mondo grafico per le UI di questo periodo, probabilmente vi siete imbattuti nel crescendo popolare delle micro interactions. Articoli su articoli parlano di questi artefatti per incrementare l’attenzione dell’utilizzatori ed acquisire nuovi utenti per la vostra app.

Ma perchè tutto questo trambusto?

Perchè le micro interaction sono una sorta di innesco – dopo un’azione dell’utente – che riceve un feedback visivo o sonoro per far capire all’utilizzatore che l’interfaccia sta interagendo con lui nel modo opportuno (faccio l’esempio di quando inserite in alcune app la password errata e gli asterischi tremano tra loro).

E’ opportuno quindi anche in fase di progettazione e prototipazione, inserire questi meccanismi per rendere l’app più performante. Infatti, sono parti fondamentali della User Experience, anche se non avete tempo di integrarle nei vostri mockup, dovete assolutamente tentare di inserirli nei vostri mock-up.

Un piccolo trucco può aiutarvi

Un trucco è quello di usare delle GIF animate, facilmente realizzabili anche in Photoshop. Per voi ho scovato questo bellissimo link  di Sanne de Vries, che vi regala una libreria di GIF già confezionate, che vi faranno risparmiare tempo.

Micro Animations  e UI animate in una libreria di GIF.

 

Spero che ora i vostri prototipi saranno più dinamici e più veloci da creare.

Per qualsiasi domanda e/o commento potete lasciare una nota alla mia email: info@ux360.it – Buona UX

 

 

Walter Fantauzzi

 

 

 

Categorie
Ux Blog

Capire cosa stimola i tuoi utenti

Per far innamorare gli users dei nostri prodotti, abbiamo bisogno dei loro feedback. Potremmo utilizzare un questionario per sapere dagli users cosa li motiva ad utilizzare la nostra app, ma questo sarebbe un approccio poco flessibile e non creerebbe una Human Emotion!

 

L’unica soluzione è: La ricerca generativa

 

Come è ben noto, gli esercizi pratici sbloccano la creatività dell’individuo perchè c’è sempre un gradino di separazione tra quello che una persona dice, e quello che fa. La ricerca generativa oltrepassa i filtri  cognitivi e mette in evidenza i livelli più profondi dell’esperienza umana.

Elizabeth B.-N. Sanders dice (in questo PDF) “Quando tutti e 3 le prospettive (quello che le persone fanno, quello che dicono e quello che creano) sono esplorate simultaneamente, l’empatia umana si stabilisce più radicalmente con le persone che usano i prodotti e i sistemi informativi”.

Il seguente schema, mostra il processo cognitivo di uno user.

 

Immagine by Invision

 

Benefici degli esercizi pratici per le interviste

  1. Diventare un ottimo ascoltatore per una visione condivisa
  2. Effettua una conversazione in modo naturale che produca rapporti forti
  3. Ottenere informazioni importanti per le motivazioni e le aspettative degli users
  4. Scoprire nuovi modi per ottenere storie piene di emozioni e di dettaglio
  5. Imparare dalle proprie intuizioni  e quelle dei partecipanti
  6. Creare una forte empatia per generare soluzioni

 Tipologie di esercizio

La cosa bella del sistema a ricerca generativa è che una sorta di framework. Un luogo in cui esistono modi di pensare per una ricerca circondata una svariata serie di esercitazioni che ripoterò qui di seguito.

 

Elenchi

Questo tipo di esercizio richiede ai partecipanti di riordinare le idee per avere un concetto finito di ciò che vogliono. Si otterranno delle idee al primo strato di livello mentale, quelle che di solito diciamo “io la butto lì”. Gli elenchi, o liste, richiedono il minimo sforzo ma creano un grande ordinamento di idee.

Risposte da completare

In questo esercizio, darete ai partecipanti una serie di risposte incomplete che loro devono finire. E’ un ottimo trucco per fargli esternare le loro idee interiori con i concetti che loro vogliono esplorare. Sono facili da completare ed un ottimo metodo di conversazione.

Ordinamento

Il riordino delle carte da ai partecipanti la possibilità di riordinare le idee. Usando delle carte con su scritto contenuti e funzionalità, chiediamo ai partecipanti di raggruppare le carte in gruppi e dargli una priorità dando loro un senso motivato.

Creare

Si tratta di una vasta gamma di esercizi, ma tutte incentrate attorno all’idea di dare ai partecipanti il modo di raccondare una loro storia. E’ un modo per farci spiegare idee complesse ed articolate.

Alcune attività da considerare in questa fase:

  1. Disegnare
  2. Collage
  3. Scolpire e modellare
  4. Costruire

 

Per creare soluzioni significative dobbiamo capire la gamma emotiva del nostro pubblico.

 

Progettare intorno alle persone

I clienti non sono utenti passivi, e per poter creare magnifiche soluzioni dobbiamo capire il range di emozioni intorno all’audience che loro creano.

 

Come disse Steve Jobs: “Non è compito dei consumatori di capire cosa vogliono.”

 

Walter Fantauzzi

Categorie
Ux Blog

Capire i tuoi clienti: 7 domande da porgli

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

 

Walter Fantauzzi

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

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