Come ci aveva annunciato il nostro docente Nicola Di Cosmo durante la prima lezione, la User Interface è un campo molto vasto; è composto da tanti elementi che ne determinano il successo e sono riassumibili in un metodo chiamato Design Process. Questo può essere considerato come un vero e proprio modus operandi e si articola in cinque semplici fasi:
Analisi;
Definizione;
Design;
Developement;
Delivery.
Tool per UI Design
Alla terza lezione del nostro corso siamo finalmente giunti al cuore dell’argomento iniziando a parlare di design elements, aspetto peculiare della User Interface che la distingue nettamente dalla User Experience. Con lo scopo di dare subito ai Dolabber la concezione reale dell’argomento, Nicola suggerisce tre siti web aggiornati ed al passo con i tempi in materia di UI Design; si tratta di 3 siti fondamentali per prendere ispirazione, per verificare l’effetto visivo o la fattibilità di un’idea:
mobile-patterns.com;
inspired-ui.com;
pttrns.com.
Su queste pagine si trovano innumerevoli raccolte di design pattern e, una volta selezionato preventivamente il dispositivo desiderato, è possibile scegliere tra un elenco infinito di schermate di riferimento. I pattern sono organizzati in base a determinate esigenze di interfacce grafiche per rendere la ricerca e la successiva realizzazione più immediate:
• Calendar;
• Lists;
• Feed;
• Settings;
• Coach marks;
• Comment compose.
Mobile Interaction Principles
Per costruire una User Interface efficiente e che non disturbi l’utente durante l’utilizzo abbiamo tre must: velocità, chiarezza, immediatezza. Il rispetto di questi presupposti base ci aiuterà a regalare all’utente un’esperienza immersiva all’interno della NUI (Natural User Interface). In questo caso l’interazione con il touch screen è totale e le gestures (zoom, refresh, tap, press&tap, slide), che rispetto ai bottoni hanno avuto molto più successo per la loro naturalezza, sono l’elemento da tenere sempre presente per permettere la reciprocità con l’app.
Per questo ecco una guida degli elementi di interazione del mondo mobile da tenere sempre a mente:
• scroll;
• tamb: l’area bassa della app è quella di massima prossimità con i bottoni che inducono a gesti più veloci e consueti. L’uso della tamb zone sta cambiando di pari passo con il progresso tecnologico, che tende a progettare smartphone sempre più grandi a discapito dell’ergonometria. È ipotizzabile che nel prossimo futuro si inizieranno a spostare tutti i controlli in basso proprio per renderli più raggiungibili;
• 44 pixel touch target: è la zona occupata dal nostro polpastrello nel momento in cui tappiamo sul display;
• navigation: comprende diverse tipologie di navigazione: single page, utilizzata ad esempio dalla app del meteo; a pannello; a lista, con schermate dei settings; per tab bar, la più classica, individuabile ad esempio in Instagram. Quest’ultima permette di organizzare gli elementi per finestre parallele, utile perché entrando nel dettaglio e poi tornando indietro si rimane sempre nella stessa posizione. Le tab tengono memoria della navigazione parallela; in senso orizzontale si usa la tab bar, in senso verticale la navigation bar.
#DOMOMENT: Dall’idea al layout – design preliminare delle schermate
Nell’ultima lezione avevamo imparato ad usare Balsamiq per disegnare i nostri prototipi di MockUp, così Nicola prima di procedere con il design ha dato ad ognuno di noi dei consigli e dei suggerimenti su come organizzare la Site Map o la struttura dell’app in maniera funzionale.
Ed ecco le otto idee ingegnose sulle quali stanno lavorando i Dolabber:
• app che aiuterà i turisti romani a cercare guide nelle loro vicinanze;
• app per trovare il ristorante in base a quello che si vuole mangiare;
• app per organizzazione eventi di comunicazione;
• app per il baratto di vestiti ed accessori;
• app per allenare la vista, contro la cecità;
• app per far accoppiare gatti;
• app della startup Tutored.
Nella prossima lezione inizieremo ad inserire elementi di design e le interazioni sui MockUp definitivi con Marvel App.
La nostra App prende forma e dalla prossima lezione oltre ad essere più bella sarà anche interattiva!
Alice Valle