Luca Manara*
Dopo molte ore, riunioni, email e documenti di progetto scambiati siete quindi arrivati al momento di partire con il design e lo sviluppo della nuova App o del nuovo servizio di Mobile Banking. Avete fatto le vostre ricerche, identificato una piccola nicchia scoperta e siete convinti di dare molto valore ai vostri clienti, vecchi e nuovi. Siete quindi ai blocchi di partenza. Bene.
Ma. Con milioni di App sullo store e con l’economia delle start up che spinge con nuovi e innovativi servizi, ti troverai di fronte una grande battaglia per differenziare il tuo prodotto con tutti gli altri. Ed è proprio in questo momento che il design porta realmente il suo valore aggiunto. L’App Design per il Mobile Banking è assolutamente determinante per migliorare i risultati di ingaggio con gli utenti.
Alla fine, quello che vuoi è che il tuo design sia differente e che catturi l’attenzione delle persone, vecchi e nuovi utenti, ma non vuoi neanche trascurare il fatto di rimanere nei pattern progettuali più comuni così che i nuovi utenti troveranno facile l’utilizzo dell’App stessa. Inoltre non dovrai dimenticare di sfruttare le nuove tendenze e innovazioni nel mondo della User Interaction & Desing (per esempio l’introduzione del “force touch”).
Anche per questi motivi la fase di design è difficile e complessa. Per questo motivo è importante seguire 10 suggerimenti findamentali per semplificare il processo di design e aiutarti a creare la tua prossima App o Mobile Website.
1. Focalizzati sull’eliminare gli sforzi per i tuoi utenti
Il mobile è tutto concentrato su attività in movimento, per definizione. Ci sono elevate probabilità che i tuoi utenti useranno la tua App mentre stanno facendo altro oppure mentre si spostano da casa all’ufficio per andare a lavoro. Magari proprio in quel momento troveranno il tempo di fare un bonifico o vorranno pagare una bolletta.
E in quel momento, questo è certo, cercheranno la massima semplicità. Questo aspetto è fondamentale e da non dimenticare.
Marissa Mayer, CEO Yahoo aveva creato una regola di design per le App Yahoo. La regola dei “2 tap” è semplice: una volta che sei nell’App, se sei più lontano di 2 tap nel raggiungere qualsiasi cosa che vuoi ottenere, allora è necessario semplificare. Ogni volta che approcci il design cerca sempre di porti l’obiettivo di ridurre la quantità di sforzo che gli utenti dovranno metterci per far sì che essi diano un senso effettivo alla tua App o alle sue funzionalità.
2. Il Design deve essere guidato da obiettivi
Il Design non dovrebbe essere fine a se stesso ma dovrebbe essere “funzionale”, specialmente quando devi lavorare su schermi di dimensioni ridotte, come quelli degli smartphone.
Per esempio, il design dell’interfaccia grafica deve assicurare che ogni volta che la tua App mostra un messaggio (per esempio un pop-up) chiedendo input all’utente (come per esempio la richiesta di inserire il proprio numero di telefono) è necessario fornire tutte le informazioni necessarie per far sì che l’utente stesso possa prendere una decisione su cosa deve o vuole fare.
In caso contrario l’utente rimarrà spaesato e non saprà prendere una decisione rapida. E questo è indubbiamente una frizione in termini di Usability. Questo aspetto o è determinante soprattutto per App di mobile banking dove le azioni dispositive e i form da riempire sono innumerevoli.
Non dimenticate che il Design non è semplicemente apparire speciali o unici. Design vuol dire rendere l’”esperienza dell’utente” fantastica. E questo significa che la chiarezza in quello che l’utente deve fare è condizione necessaria.
Per Saperne di più e per verificare subito come ottimizzare le tue App
3. Crea la tua App “thumb-friendly”
Molta gente maneggia il proprio smartphone in uno di questi 3 modi:
- Usano una sola mano e navigano con il proprio pollice
- Usano 2 mani e navigano con entrambi i pollici
- Usano una sola mano per tenere lo smartphone e usano l’indice della mano opposta
Inoltre aggiungiamo che qualche utente tocca lo schermo con la sola punta del dito, altri invece utilizzano tutto il polpastrello.
Di conseguenza è praticamente impossibile definire a priori esattamente quanti pixel dovrebbero essere dedicati per rendere il tuo pulsante “cliccabile”, ma, in ogni caso, Apple raccomanda di creare pulsanti di una dimensione minima: 44×44 pixel. Questa misura non è una legge fondamentale e non derogabile, anzi. Ma la dimensione delle aree cliccabili è da tenere sempre in considerazione dato che il dito è necessariamente più largo di un puntatore mouse. Di conseguenza è necessario quindi costruire i punti di contatto in accordo con questo aspetto.
4. Dai dei feedback agli utenti, non abbandonarli alle tue necessità
Non dimenticare gli utenti quando la tua App sta eseguendo qualche operazione in background.
Un classico esempio è quando il tuo sistema deve caricare dei dati o eseguire operazioni complesse. Il Mobile non è il desktop, l’utente tende a non voler aspettare, usa quindi il tempo che ti serve intelligentemente e rendilo interessante per gli utenti. Sbarazzati di quelle noiose e inutili schermate bianche.
Quando un utente tappa, fa uno swipe o clicca un pulsante fisico, dovrebbe esserci una risposta immediata. Se qualcosa deve necessariamente prendere un po’ di tempo per essere caricata, mostra agli utenti una barra di caricamento (o qualcosa anche di più interessante) in modo che essi sappiano che stanno per ottenere qualcosa (velocemente). In alternativa, puoi utilizzare un’animazione che tiene gli utenti “ingaggiati” in intrattenimenti extra. Qualsiasi soluzione tu scelga, in ogni caso, assicurati che ogni interazione con gli utenti abbia una risposta.
5. Non riempire lo schermo di informazioni
Solo perché i pixel sono sempre più piccoli non significa che puoi rimpicciolire il font a piacere e riempire lo schermo di testo. Più contenuto non significa necessariamente più informazione. Anzi.
Questo ci riporta ai fondamentali: capisci il tuo obiettivo, orienta lo sviluppo e il design per soddisfarlo, riduci ogni altra frizione.
Nel mondo del Mobile Banking questo aspetto è particolarmente critico. Date tutte le normative e le policy che bisogna pubblicare spesso si invade lo schermo con testi inutili. Questo aspetto può essere gestito a livelli, sarà lo stesso utente che approfondirà tutta la normativa o la policy se avrà tempo e lo riterrà necessario. Partire con poco testo e pochi contenuti anche in questo caso è più fattibile.
Inoltre testa la tua App sui device reali per i quali l’hai sviluppata per essere sicuro che gli aspetti critici sono molto semplici da visualizzare. Device reali per capire come scala il contenuto su diversi device con diverse risoluzioni (con tecniche di Crowd Testing è possibile eseguire questi test velocemente e efficacemente). Il testo dovrebbe essere almeno di 11 points, dovresti avere il giusto spazio tra le lettere e linee, e l’utente non dovrebbe mai zoomare per capire cosa dovrebbe fare o per comprendere cosa sta leggendo (lo zoom con 2 dita è un’operazione molto onerosa per l’utente, tipicamente deve cambiare la presa dello smartphone e usare necessariamente 2 mani mentre è in movimento).
6. Usa le gesture saggiamente
Le gesture ti aiutano a mantenere la confusione al livello minimo, sono intuitive per gli utenti degli smartphone più evoluti e rendono l’esperienza degli utenti più dinamica e divertente. Studia le interfacce più popolari e i pattern UI più comuni in modo che tu possa apprendere quali sono le gesture che il tuo target di utenti apprezza normalmente.
Ovviamente le gesture che per cui sono famigliari i millennials sono differenti da quelle a cui sono abituati gli utilizzatori più giovani e smaliziati.
Quando state decidendo quale gesture utilizzare, pensa al tuo target di utenti, studia bene il tuo prodotto e a quel punto scegli la gesture (o le gesture) che hanno più senso per la tua App.
7. Usa immagini ad alta risoluzione
Il numero di risoluzioni degli schermi disponibili sul mercato degli smartphone è in continua espansione. Oramai è un continuo da pochi pollici fino a dimensioni enormi. Di conseguenza, parti sempre con un Design per dispositive retina, ovvero schermi con alta risoluzione e con una densità di pixel molto alta e quindi scala di conseguenza. Ancora meglio, usa immagini vettoriali che scaleranno automaticamente su ogni schermo e assicurati quindi di avere sempre immagini di qualità.
Anche in questo caso un test multidevice può essere molto utile.
8. Consistenza
Se stai cambiando il colore o il font di una schermata o di un paragrafo, fallo coscientemente e con una buona ragione. I colori sono uno strumento molto potente in termini di organizzazione del design: ti aiuta a direzionare l’attenzione dell’utente e a stabilire una gerarchia visuale.
Per esempio, se presenti al tuo utente una scelta su 3 pulsanti da premere, il primo di un arancione molto acceso, il secondo di un colore un po’ più soft, come per esempio lo stesso arancione, ma un pò meno splendente, e il terzo di un color soft-pesca, stai segnalando che la prima scelta è la più estrema mentre l’ultima è la più mite.
Troppi cambiamenti sui colori o sui font e diluirai l’impatto di ogni azione e confonderai l’utente. Di conseguenza, fai pochi cambiamenti e assicurati che quei cambiamenti abbiamo un impatto significativo in termini visivi.
9. Organizza in maniera opportune le Call To Action
Se non l’hai ancora fatto, tutto quello che ti viene in mente in un buon design può essere ricondotto a una buona user experience. La stessa cosa vale in questo caso: fai in modo che cliccare sul bottone giusto sia il più facile possibile. Specialmente per quegli utenti che usano il loro pollice per tappare sullo schermo la parte inferiore del loro schermo è più accessibile. Metti i bottoni per le azioni più comuni in quell’area mentre assicurati che i controlli che fanno riferimento a uno specifico contenuto siano localizzati molto vicino a quel contenuto.
10. Il giusto ordine negli allineamenti
Questo può magari essere il consiglio più semplice di tutti questi 10 ma necessita di essere menzionato perché scelte forti in termini di allineamenti trasformeranno il design della tua App.
Gli allineamenti sono nati per creare organizzazione e aiutare i tuoi utenti nel fare le giuste connessioni all’interno dell’App. Quando stai formattando dei contenuti, pensa a come le immagini e i testi sono connessi l’un con l’altro e quindi usa gli allineamenti come uno strumento per mostrare quelle connessioni ai tuoi utenti.
Usa delle griglie “ben formattate” per aiutarti a definire il tuo layout, creare ordine, e aiutarti a controllare il modo con cui i tuoi utenti gestiscono le connessioni per fruire del tuo prodotto o servizio.
Conclusioni
Certo la strada dall’idea all’App con un Design di successo è molto lunga. E potrebbe essere ancora più lunga se studiamo il Design come funzionale, appealing e intuitivo a tutti gli utenti sia che essi siano nuovi e giovani utenti sia che siano utenti con più esperienza.
Ma con questi 10 suggerimenti, potresti essere già a metà strada.
In caso di dubbi, la cosa positiva è che c’è modo di gestire anche questi aspetti. Negli ultimi anni, sono emersi diversi servizi che possono aiutare qualsiasi designer, sviluppatore o project manager nel gestire il processo di Design dell’App.
Una delle tecniche più interessanti è per esempio quella derivante da concetti di design di Nielsen Norman Group chiamata Speak Aloud Usability Video.
Con questa tecnica è infatti possibile studiare i comportamenti dei tuoi utenti in target e vedere le loro reazioni nell’utilizzo dell’app. E’ possibile infatti osservare gli utenti mentre registrano le loro azioni tramite un video e, contemporaneamente, raccontano quello che vorrebbero fare (una sorta di story telling visuale realizzato su persone vere).
In questo modo si possono identificare le frizioni in termini di usability, cosa l’utente sta cerando di fare e cosa non riesce a concludere, cosa trova intuitivo e cosa invece no.
L’aspetto interessante di questa attività è che può essere inserita in qualsiasi punto dello sviluppo software con particolari tecniche a un costo accessibile anche per team di piccole dimensioni.
A questo proposito vedi subito i servizi di App Quality .
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Helvetica; color: #606060; -webkit-text-stroke: #606060; background-color: #ffffff} span.s1 {font-kerning: none}
*Luca Manara, co founder App Quality
Credits: James Richman former CEO and Co-Founder of 1stWebDesigner.
Se hai trovato interessante questo articolo ti suggeriamo la lettura di questi servizi, sempre di Luca Manara:
Perché il test su diversi browser è importante per sviluppare il business nei pagamenti digitali
Nuovo iOS 10: sviluppatori nel panico? ecco come ridurre i problemi e aumentare le opportunità
Come fare per controllare la qualitù delle vostre App
