MONTHLY.INFO
 DALL’IDEA
 AL DESIGN
 DELL’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: stu...
ARGOMENTI

1. Che cos’è Monthly.Info
2. Da web ad applicazione: perché
3. Da web ad applicazione: come
4. Applicazione: st...
CHE COS’È
MONTHLY.INFO
monthlyinfo.com


È un servizio online
che permette
di monitorare
il ciclo.




21 maggio 2010 • Mo...
COME
FUNZIONA




Bisogna registrarsi
oppure loggarsi



21 maggio 2010 • Monthly.info • Ilaria Mauric
COME
FUNZIONA




Homepage:
Da qui si vede
la previsione
del prossimo
ciclo


21 maggio 2010 • Monthly.info • Ilaria Mauric
COME
FUNZIONA




Homepage:
Si può selezionare
un giorno come
data di inizio
del ciclo

21 maggio 2010 • Monthly.info • Il...
COME
FUNZIONA
Homepage:
Si possono vedere
e cambiare
le date
precedenti




21 maggio 2010 • Monthly.info • Ilaria Mauric
COME
FUNZIONA



Homepage:
Si può vedere
a che punto del
ciclo ci si trova
al momento della
visita al sito


21 maggio 201...
COME
FUNZIONA



Homepage:
Informazioni
generali in base
alla media
dei cicli
precedenti

21 maggio 2010 • Monthly.info • ...
COME
FUNZIONA




Homepage:
Grafico
con le statistiche




21 maggio 2010 • Monthly.info • Ilaria Mauric
COME
FUNZIONA




Calendario:
ripropone in
grande il pannello
a sinistra
in homepage

21 maggio 2010 • Monthly.info • Ilar...
COME
FUNZIONA


Data:
quando si aggiunge
o si edita una data
si possono inserire
note.
Una data può essere
taggata come
“i...
COME
FUNZIONA




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

21 maggio 2010 • Monthly.info • Ilar...
COME
FUNZIONA




Settings:
per aggiornare
le impostazioni
personali


21 maggio 2010 • Monthly.info • Ilaria Mauric
ALTRI
CONTENUTI


About
Donate
News
Terms
Contact




21 maggio 2010 • Monthly.info • Ilaria Mauric
VERSIONE
MOBILE
DEL SITO
Non esiste,
ma la grafica
si adatta bene.
Finché...




21 maggio 2010 • Monthly.info • Ilaria Ma...
VERSIONE
MOBILE
DEL SITO
...non proviamo
a usarla.




21 maggio 2010 • Monthly.info • Ilaria Mauric
CHI SONO

Ilaria Mauric

• freelance art director e designer delle interfacce
• mi interesso di user experience e informat...
COSA VORREI PER MONTHLY.INFO

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

• previsioni future, non limitate al ...
METODO




         Ux + interface design                  Sviluppo




Ma gli attori potrebbero essere di più... anzi, lo...
ARGOMENTI
1. Che cos’è Monthly.Info
2. Da web ad applicazione: perché
3. Da web ad applicazione: come
4. Applicazione: stu...
WEB                                        APPLICAZIONE
• content is king                          • context is king
   (c...
WEB                                        APPLICAZIONE
• risposta “relativamente”                 • risposta veloce
  len...
ARGOMENTI
1. Che cos’è Monthly.Info
2. Da web ad applicazione: perché
3. Da web ad applicazione: come
4. Applicazione: stu...
MONTHLY.INFO


DA WEB                                     AD APPLICAZIONE
- calendario                               - cal...
MONTHLY.INFO


APPLICAZIONE: PRIORITÀ
1) situazione odierna
2) aggiungi data
3) aggiungi nota
4) reminders
5) settings

6)...
MONTHLY.INFO


APPLICAZIONE: OLTRE IL WEB
1) situazione odierna
2) aggiungi data
3) aggiungi nota
4) reminders push notifi...
ARGOMENTI
1. Che cos’è Monthly.Info
2. Da web ad applicazione: perché
3. Da web ad applicazione: come
4. Applicazione: stu...
SITO (VERSIONE MOBILE)                          APPLICAZIONE
21 maggio 2010 • Monthly.info • Ilaria Mauric
SITO (VERSIONE MOBILE)                          APPLICAZIONE
21 maggio 2010 • Monthly.info • Ilaria Mauric
SITO (VERSIONE MOBILE)                          APPLICAZIONE
21 maggio 2010 • Monthly.info • Ilaria Mauric
INIZIO CON I WIREFRAME
Con Balsamiq, Flairbuilder, Omnigraffle, MockFlow, Axure...
Ma anche con Illustrator, Google Drawin...
WIREFRAME




21 maggio 2010 • Monthly.info • Ilaria Mauric
WIREFRAME




21 maggio 2010 • Monthly.info • Ilaria Mauric
WIREFRAME




21 maggio 2010 • Monthly.info • Ilaria Mauric
WIREFRAME




21 maggio 2010 • Monthly.info • Ilaria Mauric
WIREFRAME




21 maggio 2010 • Monthly.info • Ilaria Mauric
WIREFRAME: ALCUNI LINK PER DISEGNARE
Per Android:
http://www.tomhume.org/2010/01/android-wireframe-templates.
html

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

Per Android:
http://developer.android.com/guide...
IMPOSTA IL FILE DI BASE
Da un programma di elaborazione immagini (Photoshop,
Fireworks, Gimp, Pixelmator...), il file dovr...
RISORSE PER LA GUI
Online si trovano file grafici su livelli che contengono i principali
elementi dell’interfaccia di uno ...
RISORSE
PER LA GUI

Per questa presentazione,
ho scelto iPhone
e gli elementi contenuti
nel kit di Teehan+Lax
(molto compl...
ARGOMENTI

1. Che cos’è Monthly.Info
2. Da web ad applicazione: perché
3. Da web ad applicazione: come
4. Applicazione: st...
APPLICAZIONE

top bar

nav bar


tab bar




21 maggio 2010 • Monthly.info • Ilaria Mauric
APPLICAZIONE




21 maggio 2010 • Monthly.info • Ilaria Mauric
APPLICAZIONE




21 maggio 2010 • Monthly.info • Ilaria Mauric
APPLICAZIONE




21 maggio 2010 • Monthly.info • Ilaria Mauric
APPLICAZIONE




21 maggio 2010 • Monthly.info • Ilaria Mauric
APPLICAZIONE




21 maggio 2010 • Monthly.info • Ilaria Mauric
APPLICAZIONE




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




21 maggio 2010 • Monthly.info • Ilaria Mauric
SITO (LANDSCAPE)                                APPLICAZIONE

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: st...
DUBBIO 1:
LA COMPLICHIAMO?




21 maggio 2010 • Monthly.info • Ilaria Mauric
DUBBIO 1:
LA COMPLICHIAMO?
Più si aggiungono
funzionalità,
più è necessario eseguire
degli user test accurati


Nel dubbio...
DUBBIO 2:
I COLORI
AIUTANO DAVVERO?

Le date e le note hanno
la stessa funzione: creare
un evento nel calendario.
L’evento...
DUBBIO 2:
I COLORI
AIUTANO DAVVERO?

 Meglio tenere un unico
 colore?




21 maggio 2010 • Monthly.info • Ilaria Mauric
DUBBIO 2:
I COLORI
AIUTANO DAVVERO?
 Rivalutare uso delle icone
 e possibile funzionamento
 “intelligente” dello slider
 S...
DUBBIO 3:
A CHE RISOLUZIONE



                                                ?
LAVORIAMO?
 Siamo sicuri
 che 72 dpi e 8 ...
ARGOMENTI

1. Che cos’è Monthly.Info
2. Da web ad applicazione: perché
3. Da web ad applicazione: come
4. Applicazione: st...
LAVORIAMO IN SQUADRA

                                         Ma gli attori potrebbero essere di più...
                 ...
LAVORIAMO IN SQUADRA

                                         Ma gli attori potrebbero essere di più...
                 ...
COSA C’È DIETRO

   Design contestuale:
• http://www.slideshare.net/lucamascaro/verso-la-
  mobilita
• http://www.slidesha...
COSA C’È DIETRO

   Design comportamentale e ux:
• http://www.slideshare.net/nickf/mobile-ux
• http://www.slideshare.net/O...
ARTICOLI UTILI

   Introduzione alla progettazione grafica per iPhone
   (di Sharon Sala)
• http://www.girlgeekdinnersital...
GRAZIE A
• Heather di Monthly.Info che mi ha autorizzato
  a partire dal suo sito web;
• Adriano Gasparri, che mi ha fatto...
DOMANDE?
RISPOSTE?
CORREZIONI?
VOSTRE ESPERIENZE?




 ilariamauric.it



21 maggio 2010 • Monthly.info • Ilaria Mauric
Upcoming SlideShare
Loading in …5
×

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

3,945
-1

Published on

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.

Published in: Design
7 Comments
21 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,945
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
60
Comments
7
Likes
21
Embeds 0
No embeds

No notes for slide

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

  1. 1. MONTHLY.INFO DALL’IDEA AL DESIGN DELL’INTERFACCIA MOBILE, STEP BY STEP 21 maggio 2010 • Monthly.info • Ilaria Mauric
  2. 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. 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. 4. CHE COS’È MONTHLY.INFO monthlyinfo.com È un servizio online che permette di monitorare il ciclo. 21 maggio 2010 • Monthly.info • Ilaria Mauric
  5. 5. COME FUNZIONA Bisogna registrarsi oppure loggarsi 21 maggio 2010 • Monthly.info • Ilaria Mauric
  6. 6. COME FUNZIONA Homepage: Da qui si vede la previsione del prossimo ciclo 21 maggio 2010 • Monthly.info • Ilaria Mauric
  7. 7. COME FUNZIONA Homepage: Si può selezionare un giorno come data di inizio del ciclo 21 maggio 2010 • Monthly.info • Ilaria Mauric
  8. 8. COME FUNZIONA Homepage: Si possono vedere e cambiare le date precedenti 21 maggio 2010 • Monthly.info • Ilaria Mauric
  9. 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. 10. COME FUNZIONA Homepage: Informazioni generali in base alla media dei cicli precedenti 21 maggio 2010 • Monthly.info • Ilaria Mauric
  11. 11. COME FUNZIONA Homepage: Grafico con le statistiche 21 maggio 2010 • Monthly.info • Ilaria Mauric
  12. 12. COME FUNZIONA Calendario: ripropone in grande il pannello a sinistra in homepage 21 maggio 2010 • Monthly.info • Ilaria Mauric
  13. 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. 14. COME FUNZIONA Reminders: se ne possono impostare n e arriverà un avviso via mail 21 maggio 2010 • Monthly.info • Ilaria Mauric
  15. 15. COME FUNZIONA Settings: per aggiornare le impostazioni personali 21 maggio 2010 • Monthly.info • Ilaria Mauric
  16. 16. ALTRI CONTENUTI About Donate News Terms Contact 21 maggio 2010 • Monthly.info • Ilaria Mauric
  17. 17. VERSIONE MOBILE DEL SITO Non esiste, ma la grafica si adatta bene. Finché... 21 maggio 2010 • Monthly.info • Ilaria Mauric
  18. 18. VERSIONE MOBILE DEL SITO ...non proviamo a usarla. 21 maggio 2010 • Monthly.info • Ilaria Mauric
  19. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 30. SITO (VERSIONE MOBILE) APPLICAZIONE 21 maggio 2010 • Monthly.info • Ilaria Mauric
  31. 31. SITO (VERSIONE MOBILE) APPLICAZIONE 21 maggio 2010 • Monthly.info • Ilaria Mauric
  32. 32. SITO (VERSIONE MOBILE) APPLICAZIONE 21 maggio 2010 • Monthly.info • Ilaria Mauric
  33. 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. 34. WIREFRAME 21 maggio 2010 • Monthly.info • Ilaria Mauric
  35. 35. WIREFRAME 21 maggio 2010 • Monthly.info • Ilaria Mauric
  36. 36. WIREFRAME 21 maggio 2010 • Monthly.info • Ilaria Mauric
  37. 37. WIREFRAME 21 maggio 2010 • Monthly.info • Ilaria Mauric
  38. 38. WIREFRAME 21 maggio 2010 • Monthly.info • Ilaria Mauric
  39. 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. 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. 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. 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. 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. 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. 45. APPLICAZIONE top bar nav bar tab bar 21 maggio 2010 • Monthly.info • Ilaria Mauric
  46. 46. APPLICAZIONE 21 maggio 2010 • Monthly.info • Ilaria Mauric
  47. 47. APPLICAZIONE 21 maggio 2010 • Monthly.info • Ilaria Mauric
  48. 48. APPLICAZIONE 21 maggio 2010 • Monthly.info • Ilaria Mauric
  49. 49. APPLICAZIONE 21 maggio 2010 • Monthly.info • Ilaria Mauric
  50. 50. APPLICAZIONE 21 maggio 2010 • Monthly.info • Ilaria Mauric
  51. 51. APPLICAZIONE 21 maggio 2010 • Monthly.info • Ilaria Mauric
  52. 52. 21 maggio 2010 • Monthly.info • Ilaria Mauric
  53. 53. 21 maggio 2010 • Monthly.info • Ilaria Mauric
  54. 54. 21 maggio 2010 • Monthly.info • Ilaria Mauric
  55. 55. 21 maggio 2010 • Monthly.info • Ilaria Mauric
  56. 56. 21 maggio 2010 • Monthly.info • Ilaria Mauric
  57. 57. 21 maggio 2010 • Monthly.info • Ilaria Mauric
  58. 58. ... più altre eventuali 21 maggio 2010 • Monthly.info • Ilaria Mauric
  59. 59. SITO (LANDSCAPE) APPLICAZIONE 21 maggio 2010 • Monthly.info • Ilaria Mauric
  60. 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. 61. DUBBIO 1: LA COMPLICHIAMO? 21 maggio 2010 • Monthly.info • Ilaria Mauric
  62. 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. 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. 64. DUBBIO 2: I COLORI AIUTANO DAVVERO? Meglio tenere un unico colore? 21 maggio 2010 • Monthly.info • Ilaria Mauric
  65. 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. 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. 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. 68. LAVORIAMO IN SQUADRA Ma gli attori potrebbero essere di più... anzi, lo sono quasi sempre. 21 maggio 2010 • Monthly.info • Ilaria Mauric
  69. 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. 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. 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. 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. 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. 74. DOMANDE? RISPOSTE? CORREZIONI? VOSTRE ESPERIENZE? ilariamauric.it 21 maggio 2010 • Monthly.info • Ilaria Mauric
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×