monthly.info: dall'idea al design dell'interfaccia mobile, step by step. versione 1.0

MONTHLY.INFODALL’IDEA AL DESIGNDELL’INTERFACCIA MOBILE,STEP BY STEP

21 maggio 2010 • Monthly.info • Ilaria Mauric

ARGOMENTI

1. Che cos’è Monthly.Info

2. Da web ad applicazione: perché

3. Da web ad applicazione: come

4. Applicazione: studio dell’interfaccia

5. Applicazione: progetto dell’interfaccia

6. 3 dubbi

7. Risorse e conclusioni

ARGOMENTI

6. 3 dubbi

CHE COS’ÈMONTHLY.INFOmonthlyinfo.com

È un servizio onlineche permette di monitorareil ciclo.

Bisogna registrarsioppure loggarsi

COMEFUNZIONA

Homepage:Da qui si vede la previsione del prossimociclo

COMEFUNZIONA

Homepage:Si può selezionareun giorno comedata di iniziodel ciclo

COMEFUNZIONA

Homepage:Si possono vederee cambiarele dateprecedenti

COMEFUNZIONA

Homepage:Si può vederea che punto del ciclo ci si trovaal momento della visita al sito

COMEFUNZIONA

Homepage:Informazionigenerali in basealla mediadei cicliprecedenti

COMEFUNZIONA

Homepage:Graficocon le statistiche

COMEFUNZIONA

Calendario:ripropone in grande il pannelloa sinistra in homepage

COMEFUNZIONA

Data:quando si aggiungeo si edita una datasi possono inserire note.Una data può essere taggata come“inizio ciclo”

Reminders:se ne possono impostare n e arriverà un avviso via mail

COMEFUNZIONA

Settings:per aggiornarele impostazionipersonali

COMEFUNZIONA

AboutDonateNewsTermsContact

ALTRI CONTENUTI

VERSIONE MOBILEDEL SITO

Non esiste, ma la grafica si adatta bene.Finché...

VERSIONE MOBILEDEL SITO

...non proviamoa usarla.

CHI SONO

Ilaria Mauric

• freelance art director e designer delle interfacce• mi interesso di user experience e information architecture• mi interesso di nuove tecnologie• amo leggere fumetti

COSA VORREI PER MONTHLY.INFO

• ux più comoda per chi usa il servizio da smartphone

• previsioni future, non limitate al solo “prossimo ciclo”

• quando c’è connessione, i dati vengono aggiornati online. Non devo preoccuparmi della copertura di rete (stile Dropbox)

METODO

Ux + interface design Sviluppo

Ma gli attori potrebbero essere di più... anzi, lo sono quasi sempre.

ARGOMENTI

6. 3 dubbi

WEB APPLICAZIONE• content is king (contenuto, divertimento/curiosità

comunicazione)

• accesso - quando abbiamo un pc - quando siamo connessi

• oggetto non personale

• context is king (funzionalità, utilità, servizio)

• accesso - quando il nostro smartphone è con noi (sempre) - a prescindere dalla copertura di rete

• oggetto personale

WEB APPLICAZIONE• risposta “relativamente” lenta

• le funzioni disponibili sono molte a discapito della funzionalità di maggiore interesse (inizia ciclo oggi)

• vantaggio per sviluppatori: rimanendo su web, basta creare un foglio stile ad hoc per la visualizzazione mobile

• risposta veloce

• possibilità di ristudiare il servizio in modo che semplifichi al massimo le operazioni più probabili

• svantaggio per sviluppatori: su mobile, piattaforme diverse e codice da riscrivere da capo.

ARGOMENTI

6. 3 dubbi

MONTHLY.INFO

DA WEB AD APPLICAZIONE- calendario per aggiungere date- date modificabili- aggiungi note- situazione generale- statistiche- reminders- settings- about- donate- news- terms- contact

- calendario per aggiungere date- date modificabili- aggiungi note- situazione generale- statistiche- reminders- settings- about- donate- news- terms- contact

APPLICAZIONE: PRIORITÀ1) situazione odierna2) aggiungi data3) aggiungi nota4) reminders5) settings

6) situazione generale

7) about

MONTHLY.INFO

APPLICAZIONE: OLTRE IL WEB1) situazione odierna2) aggiungi data3) aggiungi nota4) reminders push notifications5) settings

6) situazione generale eventi passati e futuri

7) about credits

ARGOMENTI

6. 3 dubbi

SITO (VERSIONE MOBILE) APPLICAZIONE

INIZIO CON I WIREFRAME

Con Balsamiq, Flairbuilder, Omnigraffle, MockFlow, Axure...Ma anche con Illustrator, Google Drawings, Corel Draw...

Oppure...

WIREFRAME

WIREFRAME: ALCUNI LINK PER DISEGNARE

Per Android:http://www.tomhume.org/2010/01/android-wireframe-templates.html

Per iPhone:http://iphoneized.com/2009/11/21-prototyping-mockup-wireframing-tools-iphone-app-development/

Ma ci sarebbero anche Palm, Blackberry, Nokia, Samsung...

SCEGLI LA PIATTAFORMA DI SVILUPPO... e leggi le UI guidelines sugli SDK:

Per Android:http://developer.android.com/guide/practices/ui_guidelines/index.html

Per iPhone OS X:http://tuvix.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html

Ma ci sarebbero anche Windows Mobile, Palm OS, Symbian...

IMPOSTA IL FILE DI BASEDa un programma di elaborazione immagini (Photoshop, Fireworks, Gimp, Pixelmator...), il file dovrà avere queste specifiche:

• schermo a 320 x 480 pixel *• doppio formato (portrait e landscape) **• risoluzione: 72 dpi ***• profondità: 8 bit ***• metodo colore: RGB

* Molti OS girano su device con risoluzioni diverse.** La grafica dovrà essere adattabile (fluida).*** Continuo ad avere qualche dubbio su questi due dati.

Online si trovano file grafici su livelli che contengono i principali elementi dell’interfaccia di uno smartphone: top bar, nav bar, tab bar, sliders, alert, bottoni, tastiere...

Per Android:http://www.matcheck.cz/androidguipsd/

Per iPhone:http://www.teehanlax.com/blog/2009/06/18/iphone-gui-psd-30/

RISORSE PER LA GUI

RISORSEPER LA GUI

Per questa presentazione, ho scelto iPhone e gli elementi contenutinel kit di Teehan+Lax (molto completi e dettagliati)

ARGOMENTI

6. 3 dubbi

APPLICAZIONE

top bar

nav bar

tab bar

APPLICAZIONE

... più altre eventuali

SITO (LANDSCAPE) APPLICAZIONE

ARGOMENTI

6. 3 dubbi

DUBBIO 1:LA COMPLICHIAMO?

Più si aggiungonofunzionalità, più è necessario eseguire degli user test accurati

Nel dubbio, non famolo strano.

DUBBIO 1:LA COMPLICHIAMO?

Le date e le note hanno la stessa funzione: creare un evento nel calendario. L’evento potrà avere una nota o un tag (inizio ciclo).

DUBBIO 2:I COLORI AIUTANO DAVVERO?

Meglio tenere un unico colore?

Rivalutare uso delle icone e possibile funzionamento “intelligente” dello sliderSì/No.

Siamo sicuri che 72 dpi e 8 bitsia la risoluzione corretta?

DUBBIO 3:A CHE RISOLUZIONELAVORIAMO? ?

ARGOMENTI

6. 3 dubbi

LAVORIAMO IN SQUADRA

NUOVE INTERFACCE

Nuovi dispositivi =

Nuovi scenari=

Nuovi contesti

COSA C’È DIETRO

Design contestuale:

• http://www.slideshare.net/lucamascaro/verso-la-mobilita

• http://www.slideshare.net/nickf/contextual-web-ii (per web, ma linee guida ok anche per applicazioni)

COSA C’È DIETRO

Design comportamentale e ux:

• http://www.slideshare.net/nickf/mobile-ux• http://www.slideshare.net/OpenRoad/mobile-ui-

design-user-centered-design-and-ui-best-practices• http://www.usabile.it/492010.htm (per web, ma linee guida ok anche per applicazioni)

ARTICOLI UTILI

Introduzione alla progettazione grafica per iPhone (di Sharon Sala)

Differenze tra web e software (di Maurizio Boscarol)

• http://www.girlgeekdinnersitalia.com/2010/04/

creare-la-grafica-per-una-applicazione-iphone/

• http://usabile.it/092001.htm (articolo del 2001, con fondamenti ancora validi)

GRAZIE A• Heather di Monthly.Info che mi ha autorizzato a partire dal suo sito web;• Adriano Gasparri, che mi ha fatto scoprire Monthly.Info e per il continuo confronto professionale;• Il gruppo di Dolcevita Android, che mi ha aperto le porte sul mobile: Alfredo Morresi, Lorenzo Massacci,

Michele Focanti, Sergio Sarnari, Andrea Balducci.

...e a tutti quelli che mi hanno dato un parere su queste slide.

DOMANDE?RISPOSTE? CORREZIONI? VOSTRE ESPERIENZE?

ilariamauric.it

monthly.info: dall'idea al design dell'interfaccia mobile, step by step. versione 1.0

Design

dall'idea al prototipo: i documenti nelle varie fasi del...

dall'idea all'exit - augusto coppola

crowdfunding: dall'idea alla community

progetto e realizzazione del controllo dell'interfaccia...

ticonsiglio...versione enterprise edition e, in particolare,...

manuale dell'utente€¦ · > manuale di rete: consente di...

strategie di link baiting. dall'idea al link

elementi dell'interfaccia

dall'idea all'avvio di un'impresa per la biodiversità...

l'evoluzione dell'interfaccia grafica di facebook dal 2007...

dall'idea al progetto alla realtà

guida dell'interfaccia audio 192...

dall'idea al business model la cassetta degli attrezzi -...

fragilita' e vulnerabilita' in sanita': dall'idea al...

miglioramento dell'interfaccia utente (smartboard...

rinnovo dei mestieri -...

dall'idea all'oggetto: i nuovi paradigmi di progettazione...

dall'idea al business plan

dall'idea all'analisi: le fasi che precedono la...

il trattamento in carcere. dall'idea riabilitativa al...