Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 4,915 views

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.

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.

Statistics

Views

Total Views
4,915
Views on SlideShare
4,625
Embed Views
290

Actions

Likes
21
Downloads
57
Comments
7

7 Embeds 290

http://www.ilariamauric.it 151
http://www.slideshare.net 89
http://www.whymca.org 22
http://www.linkedin.com 22
http://facebook.slideshare.com 2
http://www.lmodules.com 2
http://conference2010.whymca.org 2
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

15 of 7 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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: studio dell’interfaccia 5. Applicazione: progetto dell’interfaccia 6. 3 dubbi 7. Risorse e conclusioni 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: studio dell’interfaccia 5. Applicazione: progetto dell’interfaccia 6. 3 dubbi 7. Risorse e conclusioni 21 maggio 2010 • Monthly.info • Ilaria Mauric
  • CHE COS’È MONTHLY.INFO monthlyinfo.com È un servizio online che permette di monitorare il ciclo. 21 maggio 2010 • Monthly.info • Ilaria Mauric
  • 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 • Ilaria Mauric
  • 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 2010 • Monthly.info • Ilaria Mauric
  • COME FUNZIONA Homepage: Informazioni generali in base alla media dei cicli precedenti 21 maggio 2010 • Monthly.info • Ilaria Mauric
  • 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 • Ilaria Mauric
  • 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
  • COME FUNZIONA Reminders: se ne possono impostare n e arriverà un avviso via mail 21 maggio 2010 • Monthly.info • Ilaria Mauric
  • 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 Mauric
  • 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 information architecture • mi interesso di nuove tecnologie • amo leggere fumetti 21 maggio 2010 • Monthly.info • Ilaria Mauric
  • 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
  • METODO Ux + interface design Sviluppo Ma gli attori potrebbero essere di più... anzi, lo sono quasi sempre. 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: studio dell’interfaccia 5. Applicazione: progetto dell’interfaccia 6. 3 dubbi 7. Risorse e conclusioni 21 maggio 2010 • Monthly.info • Ilaria Mauric
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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 Drawings, Corel Draw... Oppure... 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 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 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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: studio dell’interfaccia 5. Applicazione: progetto dell’interfaccia 6. 3 dubbi 7. Risorse e conclusioni 21 maggio 2010 • Monthly.info • Ilaria Mauric
  • 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, non famolo strano. 21 maggio 2010 • Monthly.info • Ilaria Mauric
  • 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
  • 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ì/No. 21 maggio 2010 • Monthly.info • Ilaria Mauric
  • 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
  • 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
  • LAVORIAMO IN SQUADRA Ma gli attori potrebbero essere di più... anzi, lo sono quasi sempre. 21 maggio 2010 • Monthly.info • Ilaria Mauric
  • 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
  • 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
  • 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
  • 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
  • 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
  • DOMANDE? RISPOSTE? CORREZIONI? VOSTRE ESPERIENZE? ilariamauric.it 21 maggio 2010 • Monthly.info • Ilaria Mauric