SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0
Le slide che hanno accompagnato il mio intervento al Whymca di Milano (21 maggio 2010). Dopo l'intervento ho ricevuto diversi suggerimenti che approfondirò nel mio blog.
Le slide che hanno accompagnato il mio intervento al Whymca di Milano (21 maggio 2010). Dopo l'intervento ho ricevuto diversi suggerimenti che approfondirò nel mio blog.
Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0
1.
MONTHLY.INFO
DALL’IDEA
AL DESIGN
DELL’INTERFACCIA
MOBILE,
STEP BY STEP
21 maggio 2010 • Monthly.info • Ilaria Mauric
2.
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
21 maggio 2010 • Monthly.info • Ilaria Mauric
3.
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
21 maggio 2010 • Monthly.info • Ilaria Mauric
4.
CHE COS’È
MONTHLY.INFO
monthlyinfo.com
È un servizio online
che permette
di monitorare
il ciclo.
21 maggio 2010 • Monthly.info • Ilaria Mauric
5.
COME
FUNZIONA
Bisogna registrarsi
oppure loggarsi
21 maggio 2010 • Monthly.info • Ilaria Mauric
6.
COME
FUNZIONA
Homepage:
Da qui si vede
la previsione
del prossimo
ciclo
21 maggio 2010 • Monthly.info • Ilaria Mauric
7.
COME
FUNZIONA
Homepage:
Si può selezionare
un giorno come
data di inizio
del ciclo
21 maggio 2010 • Monthly.info • Ilaria Mauric
8.
COME
FUNZIONA
Homepage:
Si possono vedere
e cambiare
le date
precedenti
21 maggio 2010 • Monthly.info • Ilaria Mauric
9.
COME
FUNZIONA
Homepage:
Si può vedere
a che punto del
ciclo ci si trova
al momento della
visita al sito
21 maggio 2010 • Monthly.info • Ilaria Mauric
10.
COME
FUNZIONA
Homepage:
Informazioni
generali in base
alla media
dei cicli
precedenti
21 maggio 2010 • Monthly.info • Ilaria Mauric
11.
COME
FUNZIONA
Homepage:
Grafico
con le statistiche
21 maggio 2010 • Monthly.info • Ilaria Mauric
12.
COME
FUNZIONA
Calendario:
ripropone in
grande il pannello
a sinistra
in homepage
21 maggio 2010 • Monthly.info • Ilaria Mauric
13.
COME
FUNZIONA
Data:
quando si aggiunge
o si edita una data
si possono inserire
note.
Una data può essere
taggata come
“inizio ciclo”
21 maggio 2010 • Monthly.info • Ilaria Mauric
14.
COME
FUNZIONA
Reminders:
se ne possono
impostare n
e arriverà un avviso
via mail
21 maggio 2010 • Monthly.info • Ilaria Mauric
15.
COME
FUNZIONA
Settings:
per aggiornare
le impostazioni
personali
21 maggio 2010 • Monthly.info • Ilaria Mauric
16.
ALTRI
CONTENUTI
About
Donate
News
Terms
Contact
21 maggio 2010 • Monthly.info • Ilaria Mauric
17.
VERSIONE
MOBILE
DEL SITO
Non esiste,
ma la grafica
si adatta bene.
Finché...
21 maggio 2010 • Monthly.info • Ilaria Mauric
18.
VERSIONE
MOBILE
DEL SITO
...non proviamo
a usarla.
21 maggio 2010 • Monthly.info • Ilaria Mauric
19.
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
21 maggio 2010 • Monthly.info • Ilaria Mauric
20.
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)
21 maggio 2010 • Monthly.info • Ilaria Mauric
21.
METODO
Ux + interface design Sviluppo
Ma gli attori potrebbero essere di più... anzi, lo sono quasi sempre.
21 maggio 2010 • Monthly.info • Ilaria Mauric
22.
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
21 maggio 2010 • Monthly.info • Ilaria Mauric
23.
WEB APPLICAZIONE
• content is king • context is king
(contenuto, divertimento/curiosità (funzionalità, utilità, servizio)
comunicazione)
• accesso • accesso
- quando abbiamo un pc - quando il nostro smartphone
- quando siamo connessi è con noi (sempre)
- a prescindere dalla copertura
di rete
• oggetto non personale • oggetto personale
21 maggio 2010 • Monthly.info • Ilaria Mauric
24.
WEB APPLICAZIONE
• risposta “relativamente” • risposta veloce
lenta
• le funzioni disponibili • possibilità di ristudiare il servizio
sono molte a discapito della in modo che semplifichi
funzionalità di maggiore al massimo le operazioni
interesse (inizia ciclo oggi) più probabili
• vantaggio per sviluppatori: • svantaggio per sviluppatori:
rimanendo su web, basta su mobile, piattaforme diverse
creare un foglio stile ad hoc e codice da riscrivere da capo.
per la visualizzazione
mobile
21 maggio 2010 • Monthly.info • Ilaria Mauric
25.
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
21 maggio 2010 • Monthly.info • Ilaria Mauric
26.
MONTHLY.INFO
DA WEB AD APPLICAZIONE
- calendario - calendario
per aggiungere date per aggiungere date
- date modificabili - date modificabili
- aggiungi note - aggiungi note
- situazione generale - situazione generale
- statistiche - statistiche
- reminders - reminders
- settings - settings
- about - about
- donate - donate
- news - news
- terms - terms
- contact - contact
21 maggio 2010 • Monthly.info • Ilaria Mauric
27.
MONTHLY.INFO
APPLICAZIONE: PRIORITÀ
1) situazione odierna
2) aggiungi data
3) aggiungi nota
4) reminders
5) settings
6) situazione generale
7) about
21 maggio 2010 • Monthly.info • Ilaria Mauric
28.
MONTHLY.INFO
APPLICAZIONE: OLTRE IL WEB
1) situazione odierna
2) aggiungi data
3) aggiungi nota
4) reminders push notifications
5) settings
6) situazione generale eventi passati e futuri
7) about credits
21 maggio 2010 • Monthly.info • Ilaria Mauric
29.
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
21 maggio 2010 • Monthly.info • Ilaria Mauric
33.
INIZIO CON I WIREFRAME
Con Balsamiq, Flairbuilder, Omnigraffle, MockFlow, Axure...
Ma anche con Illustrator, Google Drawings, Corel Draw...
Oppure...
21 maggio 2010 • Monthly.info • Ilaria Mauric
34.
WIREFRAME
21 maggio 2010 • Monthly.info • Ilaria Mauric
35.
WIREFRAME
21 maggio 2010 • Monthly.info • Ilaria Mauric
36.
WIREFRAME
21 maggio 2010 • Monthly.info • Ilaria Mauric
37.
WIREFRAME
21 maggio 2010 • Monthly.info • Ilaria Mauric
38.
WIREFRAME
21 maggio 2010 • Monthly.info • Ilaria Mauric
39.
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...
21 maggio 2010 • Monthly.info • Ilaria Mauric
40.
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...
21 maggio 2010 • Monthly.info • Ilaria Mauric
41.
IMPOSTA IL FILE DI BASE
Da 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.
21 maggio 2010 • Monthly.info • Ilaria Mauric
42.
RISORSE PER LA GUI
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/
21 maggio 2010 • Monthly.info • Ilaria Mauric
43.
RISORSE
PER LA GUI
Per questa presentazione,
ho scelto iPhone
e gli elementi contenuti
nel kit di Teehan+Lax
(molto completi
e dettagliati)
21 maggio 2010 • Monthly.info • Ilaria Mauric
44.
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
21 maggio 2010 • Monthly.info • Ilaria Mauric
45.
APPLICAZIONE
top bar
nav bar
tab bar
21 maggio 2010 • Monthly.info • Ilaria Mauric
46.
APPLICAZIONE
21 maggio 2010 • Monthly.info • Ilaria Mauric
47.
APPLICAZIONE
21 maggio 2010 • Monthly.info • Ilaria Mauric
48.
APPLICAZIONE
21 maggio 2010 • Monthly.info • Ilaria Mauric
49.
APPLICAZIONE
21 maggio 2010 • Monthly.info • Ilaria Mauric
50.
APPLICAZIONE
21 maggio 2010 • Monthly.info • Ilaria Mauric
51.
APPLICAZIONE
21 maggio 2010 • Monthly.info • Ilaria Mauric
60.
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
21 maggio 2010 • Monthly.info • Ilaria Mauric
61.
DUBBIO 1:
LA COMPLICHIAMO?
21 maggio 2010 • Monthly.info • Ilaria Mauric
62.
DUBBIO 1:
LA COMPLICHIAMO?
Più si aggiungono
funzionalità,
più è necessario eseguire
degli user test accurati
Nel dubbio, non famolo strano.
21 maggio 2010 • Monthly.info • Ilaria Mauric
63.
DUBBIO 2:
I COLORI
AIUTANO DAVVERO?
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).
21 maggio 2010 • Monthly.info • Ilaria Mauric
64.
DUBBIO 2:
I COLORI
AIUTANO DAVVERO?
Meglio tenere un unico
colore?
21 maggio 2010 • Monthly.info • Ilaria Mauric
65.
DUBBIO 2:
I COLORI
AIUTANO DAVVERO?
Rivalutare uso delle icone
e possibile funzionamento
“intelligente” dello slider
Sì/No.
21 maggio 2010 • Monthly.info • Ilaria Mauric
66.
DUBBIO 3:
A CHE RISOLUZIONE
?
LAVORIAMO?
Siamo sicuri
che 72 dpi e 8 bit
sia la risoluzione corretta?
21 maggio 2010 • Monthly.info • Ilaria Mauric
67.
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
21 maggio 2010 • Monthly.info • Ilaria Mauric
68.
LAVORIAMO IN SQUADRA
Ma gli attori potrebbero essere di più...
anzi, lo sono quasi sempre.
21 maggio 2010 • Monthly.info • Ilaria Mauric
69.
LAVORIAMO IN SQUADRA
Ma gli attori potrebbero essere di più...
anzi, lo sono quasi sempre.
Nuovi dispositivi
=
Nuovi scenari
=
Nuovi contesti
NUOVE INTERFACCE
21 maggio 2010 • Monthly.info • Ilaria Mauric
70.
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)
21 maggio 2010 • Monthly.info • Ilaria Mauric
71.
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)
21 maggio 2010 • Monthly.info • Ilaria Mauric
72.
ARTICOLI UTILI
Introduzione alla progettazione grafica per iPhone
(di Sharon Sala)
• http://www.girlgeekdinnersitalia.com/2010/04/
creare-la-grafica-per-una-applicazione-iphone/
Differenze tra web e software (di Maurizio Boscarol)
• http://usabile.it/092001.htm
(articolo del 2001, con fondamenti ancora validi)
21 maggio 2010 • Monthly.info • Ilaria Mauric
73.
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.
21 maggio 2010 • Monthly.info • Ilaria Mauric