Diario di un’Applicazione Android – Design UI, UX e features

Di - 7 February 2013 - in

Nell’articolo precedente ho parlato del bundle Android che ha una versione “strana”. Il bundle infatti dichiara di essere versione 21.xx, ma verificando poi nelle sources per gli update di eclipse, si capisce che si tratta della versione 4.2 juno, per cui sono disponibili tutti gli strumenti Google.

Dove eravamo rimasti

L’ultimo articolo era finito con il codice del tutorial da lanciare, non dovreste aver avuto particolari problemi, nel caso ricontrollate tutti gli step del blog post ufficiale

Progettazione

Ok, il tutorial funziona, ma quando inizio la mia App?

Ora bisogna fermarsi un attimo e pensare a quello che ancora non abbiamo fatto: progettare in dettaglio la nostra app.

Partiamo da quali devono essere le caratteristiche della nostra App:
1. Semplice, Intuitiva, funzionale (questo tutte le app dovrebbero esserlo)
2. Un click e l’app deve essere pronta (200ms non di più! vedere le Responsiveness Guidelines)
3. Devo scrivere una nota, la tastiera deve essere già pronta a video
4. “Chiudo” l’app e la nota deve essere creata da sola su Drive
5. Devo fare sapere all’utente che la nota è stata creata (e se non è stata creata? Ci penseremo dopo)

Ora prendiamo il tutorial e vediamo cosa possiamo tenere:
1. Chiamata alla Drive API al 50% (non abbiamo un file da caricare, vogliamo che sia in formato Google Docs,etc…)
2. Utilizzo dei PlayService per la gestione degli Account
3. Qualche cosina riguardo al caricamento Asincrono

Non molto ma il succo dell’applicazione è li, e questo è l’importante.

Design UI

Keep it Simple and clean

Quando parliamo di Design, oltre che essere “bello da vedere” (non è il mio campo, non sono un designer, ma vedremo presto come ci sono venuti in aiuto), l’applicazione deve essere semplice da usare, altrimenti gli utenti cercano alternative, e con un numero sempre crescente di app nel Play Store…

Quando faccio il design tendo sempre a farmi la seguente domanda:
“Se fossi mia madre/cuginetto di 6 anni, capirei a prima vista cosa devo/posso fare?”

Ecco quindi un Mockup iniziale:

La UI (User Interface) é molto semplice; da questo solitamente ne consegue una buona UX (User eXperience) perché l’applicazione risulta facile da usare, fluida e veloce.

Per il momento implementeremo solo la prima activity, i Settings li implementeremo più avanti.

Note sui Mockup

Sono molto favorevole al Paperless, ma per i Mockup preferisco comunque usare la carta perché è molto più veloce.

Nel caso in cui debba discutere un design con colleghi, o il design deve essere poi presentato al cliente, allora utilizzo altri strumenti per farlo.

Personalmente utilizzo Google Drawing perché supporta il multi Editing collaborativo, i commenti, il versioning, ecc… c’è da dire che non sono presenti i componenti di UI Android, quindi sono da disegnare ogni volta.

Strumenti professionali per la UI di cui sono a conoscenza, sono Omigraffe (Mac Only) e Pencil (CrossPlatform).

Nel momento che scrivo questo articolo mi sono accorto che Pencil si è evoluto molto dall’ultima versione che avevo visto mesi fa, ora sembra molto più maturo e completo.

Se trovate qualche altra applicazione per il design delle UI, vi prego di condividerla nei commenti dell’articolo o dei post su Google Plus.

Linee guida sul design

Abbiamo la completa libertá di sviluppare delle applicazioni con interfacce grafiche personalizzate, temi stravaganti, pulsanti e logiche personalizzate, ma é bene seguire le linee guida di design dell’Android team.
Negli ultimi due anni ci sono state molte discussioni a riguardo, tanto che il team di design ha deciso di tenere 2 appuntamenti settimanali in cui fa Hangout pubblici sul Design chiamati Android design in action, li potete trovare sul canale di youtube di Android Developers; vi consiglio di seguirli anche in differita perché si può imparare molto anche se il design non é nelle nostre corde.

Chi segue l’evoluzione di Android, sa del grosso cambiamento apportato alla UI dalla versione 4.0 e potrebbe pensare che a breve potremmo incappare in un altro cambiamento di UI. Fortunatamente non è nell’idea di Google di fare cambiamenti drastici, considera la nuova UI matura e consistente (Fonte – App Clinic , un’altra serie interessante di HOA che consiglio di seguire) e cerca di aiutare e guidare gli sviluppatori nello sviluppo di applicazioni che sfruttino a pieno il potenziale di Android, e la consistenza di UX tra le app.

La versione Pre-Alpha

Dobbiamo creare una nuovo progetto, creare il layout e cominciare a scrivere il codice.

Come da Mockup, abbiamo deciso di fare un’applicazione che utilizza uno dei layout attualmente consigliati, la Action Bar.

Sfortunatamente la Action Bar è supportata da HoneyComb in poi (API Level11) nonostante la support library; per ora creiamo un’applicazione per 3.0+ poi vedremo come possiamo semplicemente supportare tutte le altre versioni dalla 2.2

Lo scopo di questa serie di articoli non è guidarvi passo passo in come fare un’applicazione, quindi potete trovare già l’applicazione Bare Bone sul GitHub di Engenee.

Voglio però parlare velocemente delle modifiche che ho apportato rispetto al tutorial.

Il layout è stato modificato aggiungendo una textbox, la MainActivity ora viene visualizzata, la textbox per l’immissione del testo, e i due action button per pulire il testo o salvarlo.

Il menu dei settings è presente ma non ancora implementato.

Al salvataggio viene creata una notifica per segnalare all’utente che il file è stato caricato correttamente … o meno.

In questa versione, molto del codice è ancora quello del tutorial e non è codice ottimale (Es. l’utilizzo di un thread al posto di un AsyncTask, poco o niente controllo dell’errore, etc..), faremo di meglio poco alla volta, ma l’applicazione è utilizzabile, non sembra avere grossi problemi… Possiamo pubblicarla!

 

Nella prossima puntata vedremo cosa bisogna fare per pubblicare un’app, quali sono i consigli da seguire durante le pubblicazione per renderla il più appetibile possibile, e qualche consiglio personale di Customer care and engagement

 

Leave a Reply

Articolo scritto da

Techy, sviluppatore .Net per professione, sviluppatore Android per passione. All Around Android Lover e Google Enthusiast

Contatta l'autore

Previous post:

Next post: