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


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


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


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...


http://tuvix.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html



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



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)


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

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

http://www.slideshare.net/nickf/contextual-web-ii

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)


http://www.slideshare.net/nickf/mobile-ux

http://www.slideshare.net/OpenRoad/mobile-ui-design-user-centered-design-and-ui-best-practices

http://www.slideshare.net/OpenRoad/mobile-ui-design-user-centered-design-and-ui-best-practices

http://www.usabile.it/492010.htm

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)


http://www.girlgeekdinnersitalia.com/2010/04/creare-la-grafica-per-una-applicazione-iphone/

http://www.girlgeekdinnersitalia.com/2010/04/creare-la-grafica-per-una-applicazione-iphone/

http://usabile.it/092001.htm

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.


http://www.monthlyinfo.com

http://it.linkedin.com/in/adrianogasparri

http://it.linkedin.com/in/alfredomorresi

http://it.linkedin.com/in/lorenzomassacci

http://it.linkedin.com/in/michelefocanti

http://it.linkedin.com/in/sergiosarnari

http://it.linkedin.com/in/andreabalducci

DOMANDE?RISPOSTE? CORREZIONI? VOSTRE ESPERIENZE?

ilariamauric.it


Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0

Design

Transcript of Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0