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