Magazine Tecnologia

Tutti gli errori più comuni nella progettazione di interfacce grafiche per dispositivi mobili

Creato il 15 giugno 2010 da Malcommac

Tutti gli errori più comuni nella progettazione di interfacce grafiche per dispositivi mobiliIl mercato delle applicazioni mobili sta crescendo a ritmi vertiginosi; da uno studio recente di JuniperResearch sembra che da qui a 5 anni il fatturato arriverà a toccare i 32 miliardi di dollari, ovvero tre volte il valore di oggi.

E’ chiaro che in un mercato del genere si sia fatta strada anche una disperata corsa per emergere creando nuove strade e copiando percorsi già illuminati dal successo.

Purtroppo però molte di queste applicazioni, pur essendo funzionali allo scopo, peccano di errori di design macroscopici che possono essere ricondotti ad insieme di cause che fortunatamente è limitato:

  • Chi progetta l’applicazione non ha mai usato il device nel quale dovrebbe girare (o lo farà nel momento di iniziare la realizzazione del prodotto). E’ un errore che, come è ovvio, deriva da una superificiale conoscenza della piattaforma; spesso durante la fase di progettazione vengono applicate regole generiche o incongruenti (non ricordo neanche più quante volte mi hanno chiesto di realizzare checkbox e popup stile desktop); un errore del genere lo fanno tutte quelle aziende che pretendono di salire sul carrozzone dorato del momento alla ricerca del proprio gruzzolo.Un errore del genere lo fanno anche tutti quei piccoli sviluppatori che cercano di arrivare al successo bruciando tutte le tappe.
  • Complicarsi inutilmente la vita. Mano mano che il mercato si espande è necessario trovare modi diversi per riuscire a distinguersi dalla massa. Si tenta allora di battere nuove strade attraverso un maniacale (quasi disperato) lavoro volto ad implementare nuovi dettagli funzionali e grafici. Il più delle volte quello che si ottiene è un pauroso declino nell’usabilità generale.Il discorso è sempre lo stesso: l’ossessiva ricerca di elementi distintivi non paga quasi mai. Meglio lavorare lentamente e affinare il design lungo i diversi cicli produttivi del prodotto.
  • Approssimazione nella fase di realizzazione. Un buon prodotto deve essere testato, controllato e testato ancora. La fase di testing non deve essere ricondotta ad una nicchia di tempo limitata che segue alla completa realizzazione funzionale, ma deve accompagnare la progettazione durante tutto il ciclo di produzione. Non si tratta semplicemente di verificare il blando funzionamento dell’applicativo: è necessario sperimentare e, a volte, disfare più volte prima di ottenere qualcosa che sia un equilibrio tra funzionalità e chiarezza. L’utente non dovrebbe mai chiedersi a cosa serve quell’icona o in quale sequenza cliccare quei pulsanti. Per quanto sia possibile il software dovrebbe parlare da solo; i popup con i tip riserviamoli ad AutoCAD e compagnia.

Per capire quanto sia importante la ricerca di un equilibro tra funzioni e design torniamo nella parte degli utenti: “sono solo 99cent; chi se ne importa se fa schifo, proviamola!”. Quante volte avete pensato o detto questa frase prima di scaricare la nuova promessa su AppStore? Quante schermi pieni di queste app avete ora sul vostro iPhone? E quand’è l’ultima volta che ne avete usato una?

Mediamente soltanto il 3% delle persone che hanno scaricato un’app continuano ad usarla dopo un mese. Perchè? Semplicemente la maggior parte di esse non hanno alcun senso. A ben pensarci si tratta di un discorso dal sapore antico, che affonda le proprie radici nei primi anni dell’epoca dei PC.

Abbiamo imparato dai nostri errori?

In realtà molti sviluppatori non sembrano curarsi di come le proprie applicazioni vengono realizzate. Quando un’applicazione entra dentro il telefono dei vostri utenti tutto il bellissimo codice che avete scritto o la spettacolare grafica che avete disegnato devono riempire una esigenza reale (o al più crearne una). Il risultato è che ci sono centinaia di applicazioni totalmente inutili che vengono scaricate, usate una volta e poi, nei casi migliori dimenticate.

L’interazione con l’utente è in questo senso un elemento indispensabile.

Il grafico qui sotto (Pinch Media) mostra in maniera imbarazzante il declino, quasi logaritmico cui gli utenti abbandonano questo genere di applicazioni (già dopo il secondo giorno lo sviluppatori ha perso 2 utenti su 10).

Percentuale di abbandono app mobili dopo il 30esimo giorno dall'installazione

La percentuale di abbandono di un programma dopo il 30esimo giorno arriva al 97% e l'andamento è molto simile sia per applicazioni free che a pagamento.

Una sorte piuttosto simile ce l’hanno anche le applicazioni a pagamento; ulteriore conferma di come – in linea generale – non sia il prezzo ad affondare un prodotto di questo tipo.

La progettazione di una applicazione è allora un aspetto fondamentale che in linea di massima va ben oltre la stesura di un codice altamente ottimizzato.E’ possibile che la prima Multipla di Fiat avesse uno splendido motore (in tutta onestà non mi occupo di motori per auto) ma questo nulla ha potuto fare con un design così contorto.

La vostra prossima creatura potrebbe essere uno splendido capolavoro di ingegneria ma non sarà certamente il fattore chiave per rendervi ricchi.

In linea di massima possiamo individuare cinque errori fondamentali:

  • La grafica è visivamente pesante, colma di inutili dettagli.
  • Si sono ignorati, più o meno consapevolmente, i limiti tecnologici della piattaforma (velocità di rete limitata, risorse hardware limitate etc.)
  • Navigazione nelle schermate confusa e pasticciata
  • Si sono applicate regole incongruenti, spesso tipiche di una progettazione per ambienti desktop classici. Se Microsoft è riuscita a capire, dopo parecchi anni, che non è possibile portare Windows in scala su un palmare, sono fiducioso che potrete farlo anche voi (e con molto meno tempo).
  • Contesti sbagliati. Non ha alcun senso progettare un programma CAD per iPhone.

Cerchiamo allora di analizzarli uno ad uno, iniziando proprio dal problema dell’overdesign.

Si tratta di un errore piuttosto comune che non riguarda soltanto l’ambiente mobile ma che si estende a troppe altre situazioni.

Ci si imbatte in errori simili quando si è alla ricerca di nuovi modi per visualizzare le informazioni. Si cercano nuovi modi di visualizzare le informazioni quando si vuole disperatamente avere successo (e ovviamente non c’è nulla di sbagliato nel volere il successo).

Per capire meglio diamo un occhiata alle schermate a lato.

Tutti gli errori più comuni nella progettazione di interfacce grafiche per dispositivi mobili

Essere originali non significa rivoluzione a prescindere. L'applicazione Mobile GPS è un ottimo esempio di come è possibile rendere una interfaccia meno chiara cercando di essere originali.

A sinistra c’è Motion GPS, a destra una comune schermata iPhone. Dov’è il problema? Pur potendo considerare la prima schermata particolarmente curata e bella (o se non altro originale), la decisione di creare un nuovo approccio ha portato il prodotto incontro a due tipi di problemi:

  1. Il programma è diventato meno intuitivo. Controlli troppo particolari forzano l’utente a imparare un nuovo approccio volto a risolvere un problema che tutto sommato è circoscritto. A meno di motivi particolari (è l’unico programma di questo tipo in commercio a fare …) in pochi saranno disposti a seguirci soltanto per un capriccio di forma o per la nostra assurda volontà di distinguerci. Spesso in questo ambiente si additano i clienti come “stupidi beoni ignoranti”; la verità è che nessuno è così masochista nel provare piacere a dover reimpare ogni volta un modo diverso per fare la stessa cosa senza che ci sia un motivo valido. Pensate se se ogni modello di auto avesse un suo modo di essere guidato…
  2. E’ una perdita di tempo e denaro. Investire in interfaccie complesse è spesso un ottimo modo per buttare al vento risorse senza ottenere un reale vantaggio, ne per gli utenti, ne sulla concorrenza.

Quindi le parti più utilizzate di una applicazione dovrebbero essere sempre quelle più intuitive. E’ come imparare la lettura: conoscere l’alfabeto ci permette di ‘decodificare’ anche libri che non abbiamo mai visto prima.

Proviamo a guardare il mondo reale. Il cartello di STOP ha la stessa forma e colore in tutto il mondo e sappiamo riconoscerne il significato anche senza sapere la lingua del posto. Potremmo dire lo stesso per una cosa del genere?

Una sola lingua

Spesso la ricerca ossessiva per nuovi modi di visualizzare una informazione porta soltanto ad un aumento della confusione per l'utente.

Nel 1994 in un articolo intitolato Intuitive Equals Familiar di ACM Jeff Raskin, noto esperto di interfaccie uomo-macchina (e mente dietro la progettazione di Macintosh nel 1970) scriveva:

Con la frase “questa interfaccia è intuitiva” si intende qualcosa che ci si aspetta possa funzionare in maniera naturale e trasparente all’utente, senza che sia quindi indispensabule dover leggere un manuale di istruzuioni o seguire un training dedicato.

[...] E’ tuttavia chiaro che il termine “intuitivo” sia oggi assimilabile anche a “familiare”, ovvero qualcosa con cui l’utente ha già imparato a conoscere e con cui riesce ad interagire.

Quindi spesso un re-design drastico è fonte di innumerevoli problemi il cui fine ultimo  determina l’abbandono del programma da parte dell’utente.

Torniamo ad analizzare l’interfaccia di Mobile GPS:

Tutti gli errori più comuni nella progettazione di interfacce grafiche per dispositivi mobili

Il design non è solo una grafica curata, ma è un ausilio indispensabile nella comprensione rapida del funzionamento del programma.

Molte volte si commette l’errore di un over design quando si cerca la soluzione ad un problema che non si conosce. Per risolvere questo apparente paradosso è indispensabilie instaurare un dialogo con i propri clienti al fine di individuarne le esigenze e sfoltire le funzionalità in eccesso (sia logiche che grafiche).

Se fino ad ora abbiamo parlato di iPhone, concentriamoci per un momento su alcune applicazioni disegnate per iPad e vediamo come eccedere con la voglia di “bello” può essere

Tutti gli errori più comuni nella progettazione di interfacce grafiche per dispositivi mobili

The Weather Channel è un'app che ha sacrificato ad una interfaccia appariscente la sua natura, quella di fornire un accesso rapido alle informazioni metereologiche.

deleteria per l’usabilità di una applicazione. Quella qui a fianco è ‘The Weather Channel’ e nelle intenzioni dovrebbe essere un’app utile per dare uno sguardo alle previsioni metereologiche. Il fatto di avere a disposizione un ampio schermo rispetto a quanto accade su iPhone non deve aver fatto presa sui programmatori, che hanno invece deciso di riempire il vuoto con dei bei sfondi (e fin li…) e optando per delle scelte quanto mai deleterie all’immediatezza del programma.

La schermata iniziale è un gigantesco sfondo in cui compaiono una serie di menu. Affinchè all’utente sia concesso accedere a qualsivoglia informazione si richiede di dover fare una scelta tra le 6 previste. Il risultato, oltre l’apparenza grafica, è quello di avere introdotto una forzatura stancante e soprattutto non necessaria. Il fatto che poi ad ogni avvio si riparta da questo menu (anzichè memorizzare lo stato precedente l’ultima uscita) è un ulteriore nota negativa.

In generale le schermate iniziali dovrebbero sempre fornire un accesso rapido alle informazioni richieste: in questo caso il comportamento corretto sarebbe stato quello di visualizzare fin subito le previsioni meteo nelle località di interesse (e solo in seguito, tramite controlli laterali, fornire l’accesso alle funzionalità extra).
Un altro grossolano errore riguarda l’avvio: TWC si avvia mostrando prima di tutto uno splash screen statico con il logo, e solo successivamente una barra di caricamento; il risultato è quello di rendere una normale attesa una inutile sequenza di frustranti passi.

L’ultimo esempio della lista riguarda GoodReader nella sua versione HD per iPad. E’ sicuramente tra i pdf reader migliori su iPhone e in quanto a funzionalità anche la versione maggiore non è da meno. Purtroppo però sono state fatte alcune scelte piuttosto infelici, probabilmente dovute alla fretta di avere un prodotto pronto prima della concorrenza.

Tutti gli errori più comuni nella progettazione di interfacce grafiche per dispositivi mobili

Una buona interfaccia non ha bisogno di spiegazioni, ne tanto meno di 'trattati'.

Cosa c’è di sbagliato in questo pannello delle opzioni? E’ lampante il fatto che sia estremamente prolisso: ogni opzione è stata accompagnata da una dettagliata spiegazione che arriva a sfiorare le 5 righe! Come abbiamo già accennato sopra, una buona interfaccia dovrebbe parlare da se; se si lavora nella giusta maniera non è necessario accompagnare con stralci di manuale ogni parte di programma.

Il fatto che neanche il programmatore fosse poi molto convinto delle scelte fatte viene ulteriormente ribadito dagli altri “tip d’uso” messi qua e la praticamente in ogni parte di programma: ad esempio nel pannello che raccoglie la lista dei file locali e remoti troviamo come titolo di una sezione “Tap To Download”.

Tutti gli errori più comuni nella progettazione di interfacce grafiche per dispositivi mobili

I titoli delle sezioni non dovrebbero spiegare come utilizzare gli elementi in esse contenute.

Alcune funzionalità poi sono replicate più volte: l’abilitazione del Preview di un documento ad esempio:

Tutti gli errori più comuni nella progettazione di interfacce grafiche per dispositivi mobili

Difficile capire quali assurdi motivi hanno portato al parto di questi due pulsanti...

Perchè questa schermata ha due pulsanti che concettualmente hanno lo stesso fine? Si tratta di uno switch in alto al documento e un pulsante (tra l’altro orrendamente fuori standard) in basso? Non sarebbe stato meglio prevedere una opzione nel pannello delle preferenze? L’ultima nota riguarda la gestion dei PDF; qui la schermata parla da se, purtroppo:

Tutti gli errori più comuni nella progettazione di interfacce grafiche per dispositivi mobiliSe è vero che GoodReader ha una completa libreria di funzioni per gestire i PDF è anche vero che la loro presentazione all’utente è quanto meno discutibile…. non so voi ma a me ricorda alcuni bei programmi per Windows.

Concludiamo questa lunga carrellata nel mondo delle interfacce riassumendo i punti critici ai quali prestare attenzione durante il design di UI:

  • Ogni device ha le proprie caratteristiche che vanno rispettate: un iPhone non è un computer, un iPad non è un iPhone e in generale un dispositivo mobile non necessariamente deve fare le veci di una completa workstation. Molto meglio concentrarsi su poche feature chiave che implementare senza senso un completo set di funzionalità spesso inutili.
  • Una buona interfaccia è una interfaccia che non ha bisogno di parole. Nel momento in cui siamo costretti ad allegare ad un pulsante un poema per spiegarne il senso forse è molto fermarsi un attimo e pensare: dove ho sbagliato?
  • La ricerca ossessiva dell’originalità spesso porta a realizzare prodotti mediocri sul punto di vista dell’usabilità. Se non riusciamo a trovare un compromesso tra estetica e funzionalità è molto meglio attenersi agli standard della piattaforma.
  • Un buon programma dovrebbe visualizzare sempre le informazioni principali all’avvio. Come abbiamo visto anche con una semplice applicazione meteo si può perdere facilmente l’obiettivo.
  • Non usciamo fuori dal contesto: un programma per editare le foto su iPhone non dovrebbe avere tutte le funzionalità di Photoshop. Ignorare i limiti tecnologici e quelli fisici del proprio target porta a prodotti scadenti.

Potrebbero interessarti anche :

Ritornare alla prima pagina di Logo Paperblog

Possono interessarti anche questi articoli :