SlideShare a Scribd company logo
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

More Related Content

Viewers also liked

Getting Started With Raspberry Pi - UCSD 2013
Getting Started With Raspberry Pi - UCSD 2013Getting Started With Raspberry Pi - UCSD 2013
Getting Started With Raspberry Pi - UCSD 2013
Tom Paulus
 
The Real Cost of Offshoring
The Real Cost of OffshoringThe Real Cost of Offshoring
The Real Cost of Offshoring
Collaborative Consulting
 
Nereo Sciutto Iab Seminar 2008 Misurazione
Nereo Sciutto Iab Seminar 2008 MisurazioneNereo Sciutto Iab Seminar 2008 Misurazione
Nereo Sciutto Iab Seminar 2008 Misurazione
Nereo Sciutto
 
I periodici online
I periodici onlineI periodici online
I periodici online
Barbara Sgarzi
 
Dirty 30 report_finale
Dirty 30 report_finaleDirty 30 report_finale
Dirty 30 report_finale
ilfattoquotidiano.it
 
The State of Climate Change 2014
The State of Climate Change 2014The State of Climate Change 2014
The State of Climate Change 2014
Mashable
 
Euklid (1)
Euklid (1)Euklid (1)
Euklid (1)
Antonio Simeone
 
Uno, nessuno e centomila: come rendere adattabile il contenuto ad una realtà ...
Uno, nessuno e centomila: come rendere adattabile il contenuto ad una realtà ...Uno, nessuno e centomila: come rendere adattabile il contenuto ad una realtà ...
Uno, nessuno e centomila: come rendere adattabile il contenuto ad una realtà ...
Daniela Costantini
 
An Introduction to Using ICT in RE
An Introduction to Using ICT in REAn Introduction to Using ICT in RE
An Introduction to Using ICT in RE
Susan Kambalu
 
Research and design methods hxd2013
Research and design methods hxd2013Research and design methods hxd2013
Research and design methods hxd2013
Megan Grocki
 
Fallire è un po' morire e un po' no
Fallire è un po' morire e un po' noFallire è un po' morire e un po' no
Fallire è un po' morire e un po' no
Mentine
 
James Tate - DMUG 2014
James Tate -  DMUG 2014James Tate -  DMUG 2014
James Tate - DMUG 2014
IES / IAQM
 
Version Control Will Save Your (Product Design & UX) Life
Version Control Will Save Your (Product Design & UX) LifeVersion Control Will Save Your (Product Design & UX) Life
Version Control Will Save Your (Product Design & UX) Life
Jonathan Berger
 
PEOPLE DON’T LOOK FOR IMPORTANT NEWS, IMPORTANT CONTENT LOOKS FOR PEOPLE
PEOPLE DON’T LOOK FOR IMPORTANT NEWS, IMPORTANT CONTENT LOOKS FOR PEOPLEPEOPLE DON’T LOOK FOR IMPORTANT NEWS, IMPORTANT CONTENT LOOKS FOR PEOPLE
PEOPLE DON’T LOOK FOR IMPORTANT NEWS, IMPORTANT CONTENT LOOKS FOR PEOPLE
Luca Della Dora
 
I Non Che Aiutano A Crescere Corso Di Blog
I Non Che Aiutano A Crescere Corso Di BlogI Non Che Aiutano A Crescere Corso Di Blog
I Non Che Aiutano A Crescere Corso Di Blog
Gianluca Diegoli
 

Viewers also liked (15)

Getting Started With Raspberry Pi - UCSD 2013
Getting Started With Raspberry Pi - UCSD 2013Getting Started With Raspberry Pi - UCSD 2013
Getting Started With Raspberry Pi - UCSD 2013
 
The Real Cost of Offshoring
The Real Cost of OffshoringThe Real Cost of Offshoring
The Real Cost of Offshoring
 
Nereo Sciutto Iab Seminar 2008 Misurazione
Nereo Sciutto Iab Seminar 2008 MisurazioneNereo Sciutto Iab Seminar 2008 Misurazione
Nereo Sciutto Iab Seminar 2008 Misurazione
 
I periodici online
I periodici onlineI periodici online
I periodici online
 
Dirty 30 report_finale
Dirty 30 report_finaleDirty 30 report_finale
Dirty 30 report_finale
 
The State of Climate Change 2014
The State of Climate Change 2014The State of Climate Change 2014
The State of Climate Change 2014
 
Euklid (1)
Euklid (1)Euklid (1)
Euklid (1)
 
Uno, nessuno e centomila: come rendere adattabile il contenuto ad una realtà ...
Uno, nessuno e centomila: come rendere adattabile il contenuto ad una realtà ...Uno, nessuno e centomila: come rendere adattabile il contenuto ad una realtà ...
Uno, nessuno e centomila: come rendere adattabile il contenuto ad una realtà ...
 
An Introduction to Using ICT in RE
An Introduction to Using ICT in REAn Introduction to Using ICT in RE
An Introduction to Using ICT in RE
 
Research and design methods hxd2013
Research and design methods hxd2013Research and design methods hxd2013
Research and design methods hxd2013
 
Fallire è un po' morire e un po' no
Fallire è un po' morire e un po' noFallire è un po' morire e un po' no
Fallire è un po' morire e un po' no
 
James Tate - DMUG 2014
James Tate -  DMUG 2014James Tate -  DMUG 2014
James Tate - DMUG 2014
 
Version Control Will Save Your (Product Design & UX) Life
Version Control Will Save Your (Product Design & UX) LifeVersion Control Will Save Your (Product Design & UX) Life
Version Control Will Save Your (Product Design & UX) Life
 
PEOPLE DON’T LOOK FOR IMPORTANT NEWS, IMPORTANT CONTENT LOOKS FOR PEOPLE
PEOPLE DON’T LOOK FOR IMPORTANT NEWS, IMPORTANT CONTENT LOOKS FOR PEOPLEPEOPLE DON’T LOOK FOR IMPORTANT NEWS, IMPORTANT CONTENT LOOKS FOR PEOPLE
PEOPLE DON’T LOOK FOR IMPORTANT NEWS, IMPORTANT CONTENT LOOKS FOR PEOPLE
 
I Non Che Aiutano A Crescere Corso Di Blog
I Non Che Aiutano A Crescere Corso Di BlogI Non Che Aiutano A Crescere Corso Di Blog
I Non Che Aiutano A Crescere Corso Di Blog
 

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

Web 2.0 e Intelligenza Artificiale
Web 2.0 e Intelligenza ArtificialeWeb 2.0 e Intelligenza Artificiale
Web 2.0 e Intelligenza ArtificialeinfoFACTORY
 
10 - Evoluzione del Web: dal Web 1.0, al Web 2.0, al mobile web - 16/17
10 - Evoluzione del Web: dal Web 1.0, al Web 2.0, al mobile web - 16/1710 - Evoluzione del Web: dal Web 1.0, al Web 2.0, al mobile web - 16/17
10 - Evoluzione del Web: dal Web 1.0, al Web 2.0, al mobile web - 16/17
Giuseppe Vizzari
 
11 - Evoluzione del web
11 - Evoluzione del web11 - Evoluzione del web
11 - Evoluzione del web
Giuseppe Vizzari
 
Evoluzione del web
Evoluzione del webEvoluzione del web
Evoluzione del web
Giuseppe Vizzari
 
Introduzione al WEB 2.0
Introduzione al WEB 2.0Introduzione al WEB 2.0
Introduzione al WEB 2.0wmacorig
 
11 - Evoluzione del Web (19/20)
11 - Evoluzione del Web (19/20)11 - Evoluzione del Web (19/20)
11 - Evoluzione del Web (19/20)
Giuseppe Vizzari
 
L'evoluzione verso il web 2.0 e 3.0 e i nuovi processi di business
L'evoluzione verso il web 2.0 e 3.0 e i nuovi processi di businessL'evoluzione verso il web 2.0 e 3.0 e i nuovi processi di business
L'evoluzione verso il web 2.0 e 3.0 e i nuovi processi di businessinfoFACTORY
 
11 - L'evoluzione del web
11 - L'evoluzione del web11 - L'evoluzione del web
11 - L'evoluzione del web
Giuseppe Vizzari
 
Accessibile.it al EAVI camp
Accessibile.it al EAVI campAccessibile.it al EAVI camp
Accessibile.it al EAVI campMentine
 
Dal giornalaio a Facebook. Il giornalismo e le grandi piattaforme digitali
Dal giornalaio a Facebook. Il giornalismo e le grandi piattaforme digitaliDal giornalaio a Facebook. Il giornalismo e le grandi piattaforme digitali
Dal giornalaio a Facebook. Il giornalismo e le grandi piattaforme digitali
tedeschini
 
Drupal - LinuxDay 2010 (Pistoia)
Drupal - LinuxDay 2010 (Pistoia)Drupal - LinuxDay 2010 (Pistoia)
Drupal - LinuxDay 2010 (Pistoia)
Andrea Grandi
 
Drupal - LinuxDay 2010 (Pistoia)
Drupal - LinuxDay 2010 (Pistoia)Drupal - LinuxDay 2010 (Pistoia)
Drupal - LinuxDay 2010 (Pistoia)
Andrea Grandi
 
GIS, codice aperto e conoscenza condivisa, uno sguardo al futuro
GIS, codice aperto e conoscenza condivisa, uno sguardo al futuroGIS, codice aperto e conoscenza condivisa, uno sguardo al futuro
GIS, codice aperto e conoscenza condivisa, uno sguardo al futuro
Alessandro Sarretta
 
Fodd Florence Open Data Day. Api per Service Map
Fodd Florence Open Data Day. Api per Service MapFodd Florence Open Data Day. Api per Service Map
Fodd Florence Open Data Day. Api per Service Map
Marco Serena
 
Service Map API, Smart City API, Open Data API
Service Map API, Smart City API, Open Data APIService Map API, Smart City API, Open Data API
Service Map API, Smart City API, Open Data API
Paolo Nesi
 
Il progetto ODINet
Il progetto ODINetIl progetto ODINet
Il progetto ODINet
Alessandro Greco
 
Aggregatore di Open Data del territorio fiorentino e toscano
Aggregatore di Open Data del territorio fiorentino e toscano Aggregatore di Open Data del territorio fiorentino e toscano
Aggregatore di Open Data del territorio fiorentino e toscano
Paolo Nesi
 
Palermo in openstreetmap free and open data
Palermo in openstreetmap free and open dataPalermo in openstreetmap free and open data
Palermo in openstreetmap free and open data
Francesco Passantino
 
Internet in mobilità
Internet in mobilitàInternet in mobilità
Internet in mobilità
Luca Mascaro
 
Crowsourcing (anche) per le aziende del settore tessile e della moda
Crowsourcing (anche) per le aziende del settore tessile e della modaCrowsourcing (anche) per le aziende del settore tessile e della moda
Crowsourcing (anche) per le aziende del settore tessile e della moda
Piero Fraternali
 

Similar to Monthly.Info: dall'idea al design dell'interfaccia mobile, step by step. Versione 1.0 (20)

Web 2.0 e Intelligenza Artificiale
Web 2.0 e Intelligenza ArtificialeWeb 2.0 e Intelligenza Artificiale
Web 2.0 e Intelligenza Artificiale
 
10 - Evoluzione del Web: dal Web 1.0, al Web 2.0, al mobile web - 16/17
10 - Evoluzione del Web: dal Web 1.0, al Web 2.0, al mobile web - 16/1710 - Evoluzione del Web: dal Web 1.0, al Web 2.0, al mobile web - 16/17
10 - Evoluzione del Web: dal Web 1.0, al Web 2.0, al mobile web - 16/17
 
11 - Evoluzione del web
11 - Evoluzione del web11 - Evoluzione del web
11 - Evoluzione del web
 
Evoluzione del web
Evoluzione del webEvoluzione del web
Evoluzione del web
 
Introduzione al WEB 2.0
Introduzione al WEB 2.0Introduzione al WEB 2.0
Introduzione al WEB 2.0
 
11 - Evoluzione del Web (19/20)
11 - Evoluzione del Web (19/20)11 - Evoluzione del Web (19/20)
11 - Evoluzione del Web (19/20)
 
L'evoluzione verso il web 2.0 e 3.0 e i nuovi processi di business
L'evoluzione verso il web 2.0 e 3.0 e i nuovi processi di businessL'evoluzione verso il web 2.0 e 3.0 e i nuovi processi di business
L'evoluzione verso il web 2.0 e 3.0 e i nuovi processi di business
 
11 - L'evoluzione del web
11 - L'evoluzione del web11 - L'evoluzione del web
11 - L'evoluzione del web
 
Accessibile.it al EAVI camp
Accessibile.it al EAVI campAccessibile.it al EAVI camp
Accessibile.it al EAVI camp
 
Dal giornalaio a Facebook. Il giornalismo e le grandi piattaforme digitali
Dal giornalaio a Facebook. Il giornalismo e le grandi piattaforme digitaliDal giornalaio a Facebook. Il giornalismo e le grandi piattaforme digitali
Dal giornalaio a Facebook. Il giornalismo e le grandi piattaforme digitali
 
Drupal - LinuxDay 2010 (Pistoia)
Drupal - LinuxDay 2010 (Pistoia)Drupal - LinuxDay 2010 (Pistoia)
Drupal - LinuxDay 2010 (Pistoia)
 
Drupal - LinuxDay 2010 (Pistoia)
Drupal - LinuxDay 2010 (Pistoia)Drupal - LinuxDay 2010 (Pistoia)
Drupal - LinuxDay 2010 (Pistoia)
 
GIS, codice aperto e conoscenza condivisa, uno sguardo al futuro
GIS, codice aperto e conoscenza condivisa, uno sguardo al futuroGIS, codice aperto e conoscenza condivisa, uno sguardo al futuro
GIS, codice aperto e conoscenza condivisa, uno sguardo al futuro
 
Fodd Florence Open Data Day. Api per Service Map
Fodd Florence Open Data Day. Api per Service MapFodd Florence Open Data Day. Api per Service Map
Fodd Florence Open Data Day. Api per Service Map
 
Service Map API, Smart City API, Open Data API
Service Map API, Smart City API, Open Data APIService Map API, Smart City API, Open Data API
Service Map API, Smart City API, Open Data API
 
Il progetto ODINet
Il progetto ODINetIl progetto ODINet
Il progetto ODINet
 
Aggregatore di Open Data del territorio fiorentino e toscano
Aggregatore di Open Data del territorio fiorentino e toscano Aggregatore di Open Data del territorio fiorentino e toscano
Aggregatore di Open Data del territorio fiorentino e toscano
 
Palermo in openstreetmap free and open data
Palermo in openstreetmap free and open dataPalermo in openstreetmap free and open data
Palermo in openstreetmap free and open data
 
Internet in mobilità
Internet in mobilitàInternet in mobilità
Internet in mobilità
 
Crowsourcing (anche) per le aziende del settore tessile e della moda
Crowsourcing (anche) per le aziende del settore tessile e della modaCrowsourcing (anche) per le aziende del settore tessile e della moda
Crowsourcing (anche) per le aziende del settore tessile e della moda
 

More from Ilaria Mauric

Il grande disincanto
Il grande disincantoIl grande disincanto
Il grande disincanto
Ilaria Mauric
 
Società benefit: che cosa sono e perché lo siamo diventati
Società benefit: che cosa sono e perché lo siamo diventatiSocietà benefit: che cosa sono e perché lo siamo diventati
Società benefit: che cosa sono e perché lo siamo diventati
Ilaria Mauric
 
Design e futuro
Design e futuroDesign e futuro
Design e futuro
Ilaria Mauric
 
Measuring the user experience and the product value
Measuring the user experience and the product valueMeasuring the user experience and the product value
Measuring the user experience and the product value
Ilaria Mauric
 
How to measure the product value
How to measure the product valueHow to measure the product value
How to measure the product value
Ilaria Mauric
 
Design for building trust: 4 lessons learned working on an IoT product
Design for building trust: 4 lessons learned working on an IoT productDesign for building trust: 4 lessons learned working on an IoT product
Design for building trust: 4 lessons learned working on an IoT product
Ilaria Mauric
 
Design Thinking in an Agile process: why, how, what's the impact on business
Design Thinking in an Agile process: why, how, what's the impact on businessDesign Thinking in an Agile process: why, how, what's the impact on business
Design Thinking in an Agile process: why, how, what's the impact on business
Ilaria Mauric
 
Right here, right now: come capire e intercettare i momenti cruciali di un’es...
Right here, right now: come capire e intercettare i momenti cruciali di un’es...Right here, right now: come capire e intercettare i momenti cruciali di un’es...
Right here, right now: come capire e intercettare i momenti cruciali di un’es...
Ilaria Mauric
 
Esperienza d'acquisto e architettura dell'informazione: consigli pratici e qu...
Esperienza d'acquisto e architettura dell'informazione: consigli pratici e qu...Esperienza d'acquisto e architettura dell'informazione: consigli pratici e qu...
Esperienza d'acquisto e architettura dell'informazione: consigli pratici e qu...
Ilaria Mauric
 
Raccogliere feedback da Utenti e Clienti con sondaggi, interviste e test
Raccogliere feedback da Utenti e Clienti con sondaggi, interviste e testRaccogliere feedback da Utenti e Clienti con sondaggi, interviste e test
Raccogliere feedback da Utenti e Clienti con sondaggi, interviste e test
Ilaria Mauric
 
Cosa manca ad un brief
Cosa manca ad un briefCosa manca ad un brief
Cosa manca ad un brief
Ilaria Mauric
 

More from Ilaria Mauric (11)

Il grande disincanto
Il grande disincantoIl grande disincanto
Il grande disincanto
 
Società benefit: che cosa sono e perché lo siamo diventati
Società benefit: che cosa sono e perché lo siamo diventatiSocietà benefit: che cosa sono e perché lo siamo diventati
Società benefit: che cosa sono e perché lo siamo diventati
 
Design e futuro
Design e futuroDesign e futuro
Design e futuro
 
Measuring the user experience and the product value
Measuring the user experience and the product valueMeasuring the user experience and the product value
Measuring the user experience and the product value
 
How to measure the product value
How to measure the product valueHow to measure the product value
How to measure the product value
 
Design for building trust: 4 lessons learned working on an IoT product
Design for building trust: 4 lessons learned working on an IoT productDesign for building trust: 4 lessons learned working on an IoT product
Design for building trust: 4 lessons learned working on an IoT product
 
Design Thinking in an Agile process: why, how, what's the impact on business
Design Thinking in an Agile process: why, how, what's the impact on businessDesign Thinking in an Agile process: why, how, what's the impact on business
Design Thinking in an Agile process: why, how, what's the impact on business
 
Right here, right now: come capire e intercettare i momenti cruciali di un’es...
Right here, right now: come capire e intercettare i momenti cruciali di un’es...Right here, right now: come capire e intercettare i momenti cruciali di un’es...
Right here, right now: come capire e intercettare i momenti cruciali di un’es...
 
Esperienza d'acquisto e architettura dell'informazione: consigli pratici e qu...
Esperienza d'acquisto e architettura dell'informazione: consigli pratici e qu...Esperienza d'acquisto e architettura dell'informazione: consigli pratici e qu...
Esperienza d'acquisto e architettura dell'informazione: consigli pratici e qu...
 
Raccogliere feedback da Utenti e Clienti con sondaggi, interviste e test
Raccogliere feedback da Utenti e Clienti con sondaggi, interviste e testRaccogliere feedback da Utenti e Clienti con sondaggi, interviste e test
Raccogliere feedback da Utenti e Clienti con sondaggi, interviste e test
 
Cosa manca ad un brief
Cosa manca ad un briefCosa manca ad un brief
Cosa manca ad un brief
 

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
  • 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
  • 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
  • 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
  • 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
  • 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. SITO (VERSIONE MOBILE) APPLICAZIONE 21 maggio 2010 • Monthly.info • Ilaria Mauric
  • 31. SITO (VERSIONE MOBILE) APPLICAZIONE 21 maggio 2010 • Monthly.info • Ilaria Mauric
  • 32. 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
  • 35. WIREFRAME 21 maggio 2010 • Monthly.info • Ilaria Mauric
  • 36. WIREFRAME 21 maggio 2010 • Monthly.info • Ilaria Mauric
  • 37. WIREFRAME 21 maggio 2010 • Monthly.info • Ilaria Mauric
  • 38. 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
  • 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. APPLICAZIONE top bar nav bar tab bar 21 maggio 2010 • Monthly.info • Ilaria Mauric
  • 46. APPLICAZIONE 21 maggio 2010 • Monthly.info • Ilaria Mauric
  • 47. APPLICAZIONE 21 maggio 2010 • Monthly.info • Ilaria Mauric
  • 48. APPLICAZIONE 21 maggio 2010 • Monthly.info • Ilaria Mauric
  • 49. APPLICAZIONE 21 maggio 2010 • Monthly.info • Ilaria Mauric
  • 50. APPLICAZIONE 21 maggio 2010 • Monthly.info • Ilaria Mauric
  • 51. APPLICAZIONE 21 maggio 2010 • Monthly.info • Ilaria Mauric
  • 52. 21 maggio 2010 • Monthly.info • Ilaria Mauric
  • 53. 21 maggio 2010 • Monthly.info • Ilaria Mauric
  • 54. 21 maggio 2010 • Monthly.info • Ilaria Mauric
  • 55. 21 maggio 2010 • Monthly.info • Ilaria Mauric
  • 56. 21 maggio 2010 • Monthly.info • Ilaria Mauric
  • 57. 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
  • 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. 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
  • 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
  • 74. DOMANDE? RISPOSTE? CORREZIONI? VOSTRE ESPERIENZE? ilariamauric.it 21 maggio 2010 • Monthly.info • Ilaria Mauric