Categorie
Ux Blog

#CX

Oggi vi parlerò di qualcosa che non riguarda né la User Experience né la User Interface, ma di Customer Experience o CX. Vi parlerò del modo in cui il cliente percepisce l’interazione con un determinato brand a livello sia conscio che inconscio. E’ un modo intuitivo di misurare l’emozioni evocate nel cliente dopo un’azione razionalmente pianificata dall’azienda.

Si tratta di qualcosa che sia più legata a come il cliente si sente dopo aver interagito con il marchio. La CX è più legata al come che al cosa, ed è come il cliente valuta in modo cosciente o meno la sua esperienza.

I nuovi customers (clienti) potenziali per le aziende di oggi sono abituati ad utilizzare i device nella ricerca di contenuti in modo impaziente ma mai in modo indipendente. Questi comportamenti influiscono sulle nuove dinamiche decisionali, anche se i fondamenti della fiducia e della percezione di valore sono sempre più i fautori fondamentali nelle decisioni di un acquisto o nella scelta del Brand a cui essere fedeli.

Le aziende di conseguenza stanno diventando sempre più “cliente-centriche”, mettendo alla base delle loro strategie la customer experience.

Questo vuol dire che le aziende stanno cercando di “Umanizzarsi” canalizzando i loro sforzi per diversificarsi dai propri competitors. Così facendo quando un consumatore si troverà soddisfatto della propria CX su un determinato sito, sarà più propenso ad acquistare prodotti di quel brand e di sicuro lo sosterrà con il passa parola. I feedback (vedesi TripAdvisor) influiscono, oggi giorno, tutte le nostre decisioni. Costruiamo così una relazione con il brand in tempo reale, con i nostri post o feedback (è l’esempio di booking.com che ci permette di vedere le recensioni di un hotel da parte dei clienti che vi hanno pernottato).

Cosa occorre per costruire una CX positiva

  1. Ascoltare il consumatore: ogni relazione richiede ascolto. Le aziende devono oggi prestare ascolto ai sogni, agli obiettivi, alle passioni dei loro clienti. Dare ai clienti l’opportunità di parlare ed essere ascoltati è un’esperienza memorabile che molto conta nel definire il valore della propria customer experience.
  2. Differenziare il proprio prodotto e/o servizio. Un’esperienza memorabile è sperimentare qualcosa che esce dalla norma. Le aziende devono essere capaci di sottolineare ciò che le rende uniche e differenti dai propri competitors. Se il brand non si distingue dalla massa, nessuna relazione verrà costruita.
  3. Dimostrare il valore della propria offerta. Scoprire cosa ricerca il proprio target. Far percepire ai clienti che il brand sta cercando di risolvere le loro esigenze, permetterà di stabilire una relazione che attribuirà al marchio un valore che va oltre il prezzo o la qualità del prodotto che offre. Creerà una clientela fedele che non solo continuerà ad acquistare nel tempo, ma che raccomanderà ad altri i prodotti del brand.
  4. Dimostrare passione e creatività.
  5. Dimostrare impegno personale.

 

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

Esportare immagini, questo sconosciuto!

Esportare immagini per le diverse piattaforme e densità degli schermi, è una pratica articolata ed ancora poco chiara ai designer.

Anche in questo caso una cattiva gestione delle immagini influisce sulla user experience. In che modo? Semplice, vedere un pulsante su uno schermo grande, in modo totalmente sgranato è poco ergonomico. Sembra qualcosa di poco professionale.

Nel mondo di chi sviluppa app Android ed iOs esistono vari formati che sono LDPI, MDPI, HDPI, XDPI, XXDPI, XXXDPI, @1x, @2x, @3x, Retina… Una sorta di minestrone di lettere e numeri.

Giustamente lo sviluppatore iOs ci chiederà: “Voglio le immagini @1x, @2x e @3x (che si legge 1 per ecc…) e le voglio in PNG”. Da designer (si sono anche un designer) potrei rispondere: “Beh ti passo un SVG vettoriale e hai tutte le dimensioni che vuoi”. Ma questa non sarebbe una soluzione ottimale perchè sia Android che iOs impongono certe restrizioni di formato file. Per essere quindi amati dagli sviluppatori bisogna passargli le immagini delle interfacce nel modo più corretto e scalabile (scalabile significa che abbiamo immagini in ottima risoluzione ottimizzate per tutte le dimensioni di schermo dei dispositivi).

Per avere immagini scalabili, bisogna disegnare obbligatoriamente in vettoriale con file SVG (cosa che molti grafici, derivati dalla grafica editoriale o dalla carta stampata, non riescono ancora a comprendere). Questo tipo di progettazione grafica significa disegnare elementi con curve matematiche. Cosa comporta però questo tipo di scelta? Semplice, molte bes**+** da parte degli sviluppatori, ogni qual volta debbano usare un’immagine vettoriale, perchè devono scrivere righe di codice per gestire immagini vettoriali. Questo processo non rende le immagini performanti, anche perchè un’immagine vettoriale è difficile da gestire da parte di dispositivi con Hardware non potenti.

Quindi la Perfomance è quel che importa!

Schema delle risoluzioni degli schermi e display

Perchè abbiamo ancora bisogno di immagini bitmap?

In primis, perchè come detto, i dispositivi (e quindi i software di sviluppo app) non gestiscono i file vettoriali nativamente. Sono file che eseguono equazioni matematiche per essere rappresentati su uno schermo. Difatti sono matematica allo stato puro che viene visualizzata su un display e anche se Android ha una suite di librerie native per gestire questi file, non è così semplice lavorarli.

Schematizzazione delle differenze delle risoluzioni degli schermi
Densità dei dispositivi

Le risoluzioni degli schermi

In base alla tecnologia di schermo montata su un dispositivo, le immagini vengono rappresentate in un certo modo. E’ ovvio che su un display retina di apple (che ha il doppio dei pixel luminosi per pollice quadrato, di altri schermi) non possiamo passare un’immagine se pure in alta definizione progettata per un display meno evoluto. Pertanto vanno esportate dai software di disegno (qualsiasi esso sia: Photoshop, Illustrator, Gimp ecc…) nel modo più opportuno in base alla risoluzione dello schermo.

La regoletta

Come diceva la mia professoressa di matematica: <<Ecco la regoletta!>>. Per converitre le misure tra Pixel e Punti si può usare questo calcolo:

iOS pixels= (Points* DPI)/163
Android pixels= ( DP * DPI)/160

In questo modo il designer può calcolare le dimensioni di un elemento (pulsante, immagine ecc…) per i vari display android o apple che hanno delle densità di pixel (numero di pixel per pollice quadrato) differenti a seconda del display montato sullo smartphone o il tablet.

 

Il concetto finale è progettare un design che sia flessibile in base ai dispositivi, e che sia performante a differenza di densità e misura del display. Pertanto è prassi lavorare in versione bitmap con un impianto grafico studiato per la risoluzione più alta, ed avvalersi poi di script (ne trovate di gratuiti in giro) per esportare le immagini nelle varie risoluzioni in modo tale da automatizzare il flusso di lavoro.

Script che esportano in automatico varie dimensioni di file

Ho reperito questo script che è facilmente installabile con questa procedura (esiste anche questo script alternativo):

Scarica lo script qui

sposta il file  .jsx nella tua cartella script di Photoshop:

Mac: /Applications/Adobe Photoshop…/Presets/Scripts/

PC 64bit: *C:Program FilesAdobeAdobe Photoshop… (64 Bit)PresetsScripts*

PC 32bit: *C:Program FilesAdobeAdobe Photoshop…PresetsScripts*

Una volta installato, selezionate l’elemento da esportare nelle varie risoluzioni e lanciate lo script da File>Scripts>Browse>Nome dello script.

A questo punto vi ritroverete in una cartella le immagini suddivise in sottocartelle per ogni risoluzione così come rappresentato in figura 1

Potete usare queste immagini anche per iOs, qui i riferimenti delle misure

MDPI = (@1x)

XHDPI = (@2x)

XXHDPI = (@3x)

Il Barbatrucco

Un “barbatrucco” per vedere se abbiamo disegnato con le giuste proporzioni una UI è quello di utilizzare il sito material.

  1. Scegliete un’icona qualsiasi
  2. Selezionate in basso la risoluzione che volete
  3. Scaricate i PNG

Vi verrà inviato un file zip contenente le icone per i vari dispositivi e risoluzioni, comparateli con quelle che avete realizzato voi ed il gioco è fatto!

Spero che l’articolo vi sia stato utile e per feedback scrivetemi qui.

 

Walter Fantauzzi

 

Categorie
Ux Blog

40 icone per le festività

Se siete dei patiti come me di icon con design essenziale, queste regalate da InVision sono meravigliose. Sono state realizzate 40 icone totalmente gratuite scaricabili qui  .

40 icone in EPS, PNG, PDF, e SVG che potete liberamente  modifica ed utilizzare ai fini commerciali.

 

Qui ne trovate anche altre:

 

 

Walter Fantauzzi

 

Categorie
Ux Blog

Happy 2017 video message

Categorie
Ux Blog

5 predizioni sulle UX del 2017

Agli inizi del 2016 un articolo pubblicato su  Most Important Design Jobs Of The Future annunciava che nel prossimo futuro sarà la AR ( Augment Reality – Realtà Aumentata) a cambiare la vita delle persone tramite una mappa di operazioni astratte in un mondo psichico. Tra le varie aziende della Silicon Vallery ci sono compagnie che si occupano di AR e che potrebbero influenzare il mondo della realtà aumentata nei prossimi anni.

Tra l’altro stanno nascendo molte aziende che si occupano di AI (Artificial Intelligence – Intelligenza Artificiale) con nuovi tipi di interazione al di fuori da quelli dei tradizionali schermi. Questi permetteranno una interazione uomo-macchina sempre più naturale che mai, magari tramite una semplice chat con un linguaggio umano e naturale. Saranno forse possibili discorsi non solo via testo o chat ma anche con voce a parole o con gesti, con entità digitali che potranno comprendere cosa diciamo e/o cosa vogliamo. E qui che dovremmo capire, in primis Io stesso, come bisognerà modulare in modo naturale le nuove User Experience.

Sarà il tempo la chiave fondamentale di questa evoluzione, che ad oggi non riusciamo a stimare per questo tipo di andamento evolutivo. Dovremmo pertanto costantemente monitorare lo sviluppo delle AI, per essere pronti al cambiamento e spero nel prevenire ciò che avverrà.

Lo stesso UX Magazine aveva predetto che sarebbe stato difficile prevedere la differenza tra UX e Service Design datosi che la UX non è prettamente solo la progettazione di interfacce di App, ma anche lo studio a supporto di piattaforme diverse tra loro. Personalmente sfrutterò il grande potere dei BIG DATA che mi permetterà di valutare o addirittura prevedere cosa potrebbe accadere in questo mondo mistico.

Sarà quindi una grande sfida per il mondo UX!

 

Walter Fantauzzi

Categorie
Ux Blog

Scrivere o Svanire!

Scrivere, scrivere e scrivere è il mio impegno da qualche mese a questa parte. Ho notato che molti siti di web application o di ambienti UX /UI hanno delle sezioni blog dove scrivono migliaia di articoli. Io lo sto facendo per fissare le conoscenze che acquisisco giorno per giorno, e spero siano utili a chi in Italia sta cercando di “divenire” ( termine preso da Herbert Ballerina ) un vero User Experience Designer e non un “usciere” (con tutto rispetto per la classe lavorativa degli uscieri).

Sembra che tutti gli articoli ti dicano che devi diventare un designer esperto anche di codice, perchè presto le intelligenze artificiali faranno parte del nostro mondo… per cui impara questo, impara quello e impara subito o sarai tagliato fuori dal mondo del lavoro… E quindi cosa fai? Impari perchè pensi che incasserai più soldi e che sarai più sicuro sul lavoro.

 

Ma in realtà la cosa da fare veramente è fissare le idee, e l’unico modo è “scrivere”<!>

Non ci credete? Andate a vedervi i top 5 designer cosa fanno… Io ho scovato Eyal Zuri che pubblica circa 16 articoli al mese (quasi quanto me 😀 ) per far crescere Muzli che è un portale di design inspiration. In sintesi lui non usa le parole, crea vignette dinamiche divertenti e leggere… che creano un buzz incredibile nella rete dandogli una visibilità immensa!

Poi c’è Paul Jarvis che nei suoi 20 anni ha passato la maggior parte del tempo a scrivere articoli e insegnare con l’incremento di un fatturato di $400,000 in 18 mesi. Ha passato molti anni a trovare giustificazioni per non scrivere blog, ma alla fine ha iniziato a confezionare articoli per acquisire nuovi clienti.

La scrittura offre grandi possibilità secondo Nick Babich che crea dei mini post ricchi di contenuti non più lunghi di tot parole e studiati per non far spendere più di 7 minuti al lettore affinchè non perda l’interesse nell’articolo stesso. Anche lui come Jarvis hanno partecipato alle Push Conference ricevendo un grandissimo riscontro lavorativo e di immagine.

Scrivere su ciò che ci appassiona è il vadevecum per Matt West autore di HTML5 foundation che oltre a scrivere 3/4 articoli al mese per questo sito, ne scrive tantissimi altri su qualsiasi cosa, dopo un periodo di allontanamento dal mondo della scrittura.

Infine ho trovato Andrew Graunke designer e direttore di Toptal che collega i top designers del mondo con le aziende. La sua passione nella scrittura è quella di realizzare articoli che mettano in contatto tra loro le persone.

 

Adesso è il tuo turno, scrivi un articoloe magari postalo sulla mia pagina facebook

 

Walter Fantauzzi

Categorie
Ux Blog

I designer sono speciali?

Sento spesso affermare, nel mondo dell’industria del design, che i “Designer, non sono speciali o preziosi”.  Questa cosa sinceramente all’inizio mi faceva arrabbiare, sentivo come se la mia professionalità non fosse valutata al meglio, poi nel tempo vedendo le applicazioni che uscivano da grandi aziende… ho iniziato a sorridere.

Proprio così, vedo applicazioni realizzate da fantomatiche aziende informatiche che sono totalmente inutilizzabili ed hanno dei bug assurdi tanto da farmi sorridere e dire: “così imparano a non investire nel design”. Questo non vuol dire che è stata sviluppata male, perchè il povero developer segue solo quello che gli si dice. Spetta quindi alla fase di progettazione definire l’ergonomia e le funzionalità dell’app.

Nel tempo, tra un’arrabbiatura ed un’altra, ho capito che forse siamo noi ad essere percepiti male da persone che ci conoscono solo per sentito dire, che non sanno quindi cosa facciamo veramente, e quale sia il valore aggiunto che possiamo dare ai loro prodotti.

 

I designer realizzano soluzioni eleganti a problemi che nessun altro potrebbe risolvere

Essere parte del mondo di professionisti nel design, significa che tu hai la capacità di realizzare “cose” che esistono solo nella tua mente e traslare questa tua visione nel mondo reale in qualcosa di tangibile.

Significa, inoltre, che sai osservare il mondo intorno a te, capirne le problematiche ed avere la capacità di risolvere problemi che resterebbero altrimenti irrisolte.

 

Image from Inside Design: Weebly

 

Sei in grado, quindi, di ascoltare problemi e trovare delle soluzioni senza fermarsi alla prima teoria incontrata. I designer, vengono pagati per indagare e valutare ciò di cui un cliente ha davvero bisogno.

Avete mai visto qualcuno che non faccia il designer progettare un’interfaccia UI ?

Penso che di sicuro abbiate avuto a che fare con molti clienti che hanno provato a fare una UI da soli, con un bel bozzetto presentatovi sotto il naso. Siete in grado, quindi, di sviluppare questo bozzetto per loro? Certo che SI!

I designer però non buttano fuori esattamente quello che gli viene chiesto. Infatti devono identificare la migliore soluzione alla bozza richiesta dal cliente, trovando strade che altri non potrebbero percorrere, risolvendo i problemi con soluzioni eleganti e funzionali.

Quindi si, Designer siete speciali!

Per cui attenti a chi vi dice che i designer non sono importanti, spesso lo fanno per abbassare le offerte economiche fatte o per sminuire il lavoro altrui.

Non fatevei fregare!

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