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

30.
SITO (VERSIONE MOBILE) APPLICAZIONE
21 maggio 2010 • Monthly.info • Ilaria Mauric

31.
SITO (VERSIONE MOBILE) APPLICAZIONE
21 maggio 2010 • Monthly.info • Ilaria Mauric

32.
SITO (VERSIONE MOBILE) APPLICAZIONE
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

52.
21 maggio 2010 • Monthly.info • Ilaria Mauric

53.
21 maggio 2010 • Monthly.info • Ilaria Mauric

54.
21 maggio 2010 • Monthly.info • Ilaria Mauric

55.
21 maggio 2010 • Monthly.info • Ilaria Mauric

56.
21 maggio 2010 • Monthly.info • Ilaria Mauric

57.
21 maggio 2010 • Monthly.info • Ilaria Mauric

58.
... più altre eventuali
21 maggio 2010 • Monthly.info • Ilaria Mauric

59.
SITO (LANDSCAPE) 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

74.
DOMANDE?
RISPOSTE?
CORREZIONI?
VOSTRE ESPERIENZE?
ilariamauric.it
21 maggio 2010 • Monthly.info • Ilaria Mauric