Successfully reported this slideshow.

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

20

Share

1 of 74
1 of 74

More Related Content

Related Audiobooks

Free with a 14 day trial from Scribd

See all

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

×