Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Design di app Android, introduzione

Le principali problematiche della progettazione delle interfacce e delle interazioni di un'app Android: frammentazione, coerenza, originalità e molto altro.
Le principali problematiche della progettazione delle interfacce e delle interazioni di un'app Android: frammentazione, coerenza, originalità e molto altro.
Link copiato negli appunti

Quando si parla di interfacce utente in ambito mobile, gli aspetti che si possono toccare sono molti. L'approccio più immediato è quello puramente tecnico. Si concentra sugli aspetti realizzativi dei componenti visuali e sulla gestione degli eventi: definizione del layout, attivazione di un menu, interpretazione dell'input utente e tante altre questioni.

Questo primo approccio è stato diffusamente trattato nella Guida ad Android pubblicata su HTML.it.

Un secondo punto di vista, più maturo, dal quale può essere affrontato il problema della progettazione delle interfacce, si concentra sull'interazione tra utente e applicazione. L'interesse in questo caso non si pone più esclusivamente sugli aspetti visuali, ma anche sulle modalità di dialogo tra l'applicazione e l'utente. Per garantire una buona user experience all'utilizzatore dell'app che vogliamo realizzare, è fondamentale progettarla seguendo questo approccio.

Questa guida tratterà elementi tecnici e di programmazione relativi alla realizzazione di un'app per Android, ma fornirà soprattutto alcune linee guida e metodologie pratiche di progettazione.

Le sfide della progettazione

Chi progetta l'interfaccia utente ha un compito molto più complesso del semplice design di un layout. Deve conoscere le necessità dell'utente tipico, le caratteristiche dei dispositivi più diffusi nel mercato e gestire, d'altro canto, la contestualizzazione dell'interfaccia utente nel resto del sistema.

Sono varie le problematiche maggiori da affrontare. Ne nominiamo alcune qui di seguito in attesa di una più ampia discussione nel resto della guida:

La frammentazione del panorama tecnologico

Ogni interfaccia utente viene visualizzata su un display, e quest'ultimo ha specifiche peculiarità: dimensione in pollici, risoluzione e densità dei pixel, oltre che una gamma di colori piuttosto variabile in relazione al dispositivo.

Gli ordini di grandezza di questi aspetti oscillano in range a volte ampi: si pensi alle differenze che possono esistere tra uno smartphone, un tablet e una TV. L'app Android, però, deve essere unica e sapersi adattare al dispositivo su cui viene eseguita. La duttilità di Android aiuta molto in questo senso, ma il progettista deve fare la sua parte imponendo le configurazioni più flessibili.

La coerenza dell'app nel sistema

Ogni applicazione è destinata a far parte dell'ecosistema Android, insieme alle altre installate. L'utente deve comprenderne intuitivamente il linguaggio visuale, senza doverla studiare da zero. Il primo passo per ottenere ciò è far sì che l'applicazione "assomigli" al resto del sistema, ed in questo senso svolgono un ruolo importante i temi. Per questo motivo, sarà importante volgere l'attenzione soprattutto al Material Design, su cui si basano l'ultima versione di Android e tutti gli altri prodotti Google.

L'integrazione nel sistema si realizza anche con l'utilizzo di icone comuni e conosciute, e di pattern di interazione appartenenti al framework (ActionBar, Menu, Navigation Drawer).

Utilizzando questi elementi e le risorse a disposizione della piattaforma, le funzionalità dell'app appariranno più familiari all'utente.

Le gesture

Quando si utilizza un dispositivo dotato di touchscreen, è possibile associare specifici comandi ad opportune combinazioni di movimenti delle dita sul display. Le gesture più comuni sono ormai ben note agli utenti che utilizzano smartphone e tablet, e rappresentano un linguaggio universale per l'interazione con i dispositivi mobile.

Si pensi ai vari touch, swipe e pinch (quest'ultimo usato comunemente per fare lo zoom delle immagini), ed a come essi siano diffusi anche su altre piattaforme, come iOS o Windows Phone. Con le API di sistema a disposizione, è comunque possibile introdurre nuove gesture, anche inedite, integrandole nella nostra app. Tuttavia esse rischierebbero di rendere complicata l'interazione, e per questo è necessaria una buona progettazione.

L'originalità dell'app

Abbiamo già evidenziato come l'app debba essere coerente con il resto del sistema. Ciò non deve significare, però, che essa ogni applicazione deve diventare una replica delle altre. Il progettista può (anzi, dovrebbe) permettersi di creare delle forme di interazione diverse, nella di sorprendere ed incuriosire l'utente.

Un elemento innovativo può essere realizzato immaginando una disposizione dei comandi diversa dal solito o una gesture personalizzata ma sensata. La maggiore difficoltà sta nel mantenere coerenti le innovazioni introdotte, finalizzandole a migliorare la user experience complessiva.

Un altro aspetto di personalizzazione è il cosiddetto branding: inserendo i colori "sociali" dell'azienda o del team di sviluppo, o apponendo un logo nell'Action Bar, possiamo rendere la nostra applicazione riconoscibile e meno anonima, contribuendo anche alla possibilità di diffusione tra gli utenti.

L'esempio

Nel corso della guida verrà presentato un esempio che mostrerà gli elementi moderni di un'interfaccia Android. Si assumerà una conoscenza di base della programmazione Android.

L'applicazione presentata sarà un lettore di notizie (o news reader, come più spesso lo si chiama). Nella realizzazione, ci concentreremo totalmente sull'interfaccia utente; a titolo di esempio, i contenuti verranno prelevati da un archivio interno all'app.

Il percorso che si compirà per realizzarla partirà dai contenuti che, mediante un approccio progettuale, verranno associati alle schermate dell'interfaccia.

Sarà importante curare la navigazione per fare in modo che l'utente non fatichi a muoversi da un contenuto all'altro. Gli elementi di design utilizzati seguiranno le attuali tendenze di programmazione Android: Action Bar, struttura a schede con swipe, Navigation Drawer e così via.

Ti consigliamo anche