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

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

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