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

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

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

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

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

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

45. APPLICAZIONE top bar nav bar tab bar 21 maggio 2010 • Monthly.info • Ilaria Mauric

46. APPLICAZIONE 21 maggio 2010 • Monthly.info • Ilaria Mauric

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

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

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