Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Progettazione di interfaccie e tassonomia applicativa <ul><li>Milano, Gennaio 2010 </li></ul>
Daniela <ul><li>@TsoDa </li></ul><ul><li>tech.piyodesign.it </li></ul>
Di che cosa parliamo <ul><li>Sviluppare un design incentrato sull’utente </li></ul><ul><li>Regole con cui viene sviluppato...
PiyoTravel <ul><li>Prototipo di gestionale per agenzia viaggi </li></ul>
Step di progettazione <ul><li>Schizzo </li></ul><ul><li>Wireframes </li></ul><ul><li>Immagine statica (static comps) </li>...
Da dove iniziare <ul><li>Identificare il target:  gli operatori turistici che lavorano in agenzia </li></ul><ul><li>Identi...
Problematiche del progetto <ul><li>Come sono collegati gli elementi tra di loro </li></ul><ul><li>Come verranno percepiti ...
Schizzo: step 1
Come interviene la IA <ul><li>Strutturare le informazioni </li></ul><ul><li>Scelta del tone of voice e definizione del lab...
Usabilità <ul><li>Facilità di apprendimento </li></ul><ul><li>Efficienza d’uso </li></ul><ul><li>Memorizzazione </li></ul>...
Problematiche del progetto <ul><li>Come costruisco la navigazione? </li></ul><ul><li>Quale ordine di lettura dare? </li></...
Wireframes 1/3
Wireframes 2/3
Wireframes 3/3
Il Look&Feel della UI <ul><li>Come meglio valorizzare gli elementi? </li></ul><ul><li>Integrazione con il contesto </li></...
Il risultato: quello che l’utente vede
Regole tassonomiche La creativita’ ordinata
I motivi del design <ul><li>Quell’oggetto non sta li perche’ e’ carino </li></ul><ul><li>Pattern </li></ul><ul><li>Best pr...
Pattern: alcuni esempi <ul><li>Menu’ di navigazione </li></ul><ul><li>Login e registrazione </li></ul><ul><li>Search e pag...
Pattern References <ul><li>h ttp://quince.infragistics.com/ </li></ul><ul><li>http://interface.fh-potsdam.de/infodesignpat...
Best Practice: alcuni esempi <ul><li>Gestione dello spazio: all in one window, scrolling, ridimensionamento </li></ul><ul>...
Il contesto delle UI <ul><li>Ad ogni progetto la sua UI </li></ul><ul><li>Che cosa e’ la Brand Image </li></ul><ul><li>Il ...
Domande?
Upcoming SlideShare
Loading in …5
×

Progettazione di interfaccie e tassonomia

778 views

Published on

Presentation about UIX and its develoment (in italian) for UGIALT.net conference in Milan on 23.01.10

  • Be the first to comment

Progettazione di interfaccie e tassonomia

  1. 1. Progettazione di interfaccie e tassonomia applicativa <ul><li>Milano, Gennaio 2010 </li></ul>
  2. 2. Daniela <ul><li>@TsoDa </li></ul><ul><li>tech.piyodesign.it </li></ul>
  3. 3. Di che cosa parliamo <ul><li>Sviluppare un design incentrato sull’utente </li></ul><ul><li>Regole con cui viene sviluppato il design </li></ul>
  4. 4. PiyoTravel <ul><li>Prototipo di gestionale per agenzia viaggi </li></ul>
  5. 5. Step di progettazione <ul><li>Schizzo </li></ul><ul><li>Wireframes </li></ul><ul><li>Immagine statica (static comps) </li></ul><ul><li>Functional mockups </li></ul>
  6. 6. Da dove iniziare <ul><li>Identificare il target: gli operatori turistici che lavorano in agenzia </li></ul><ul><li>Identificare necessita’ e compiti : gestire clienti, viaggi, accompagnatori, location, mezzi e calendario viaggi </li></ul>
  7. 7. Problematiche del progetto <ul><li>Come sono collegati gli elementi tra di loro </li></ul><ul><li>Come verranno percepiti dall’utente </li></ul><ul><li>Che cosa deve avere visibilità immediata: meno click per raggiungere l’obiettivo </li></ul>
  8. 8. Schizzo: step 1
  9. 9. Come interviene la IA <ul><li>Strutturare le informazioni </li></ul><ul><li>Scelta del tone of voice e definizione del labelling </li></ul><ul><li>Costruire delle mappe di orientamento </li></ul>
  10. 10. Usabilità <ul><li>Facilità di apprendimento </li></ul><ul><li>Efficienza d’uso </li></ul><ul><li>Memorizzazione </li></ul><ul><li>Frequenza e gravità di errori </li></ul><ul><li>Soddisfazione </li></ul>
  11. 11. Problematiche del progetto <ul><li>Come costruisco la navigazione? </li></ul><ul><li>Quale ordine di lettura dare? </li></ul><ul><li>Che elementi visualizzare? </li></ul>
  12. 12. Wireframes 1/3
  13. 13. Wireframes 2/3
  14. 14. Wireframes 3/3
  15. 15. Il Look&Feel della UI <ul><li>Come meglio valorizzare gli elementi? </li></ul><ul><li>Integrazione con il contesto </li></ul><ul><li>Creazione del Look&Feel </li></ul>
  16. 16. Il risultato: quello che l’utente vede
  17. 17. Regole tassonomiche La creativita’ ordinata
  18. 18. I motivi del design <ul><li>Quell’oggetto non sta li perche’ e’ carino </li></ul><ul><li>Pattern </li></ul><ul><li>Best practice </li></ul>
  19. 19. Pattern: alcuni esempi <ul><li>Menu’ di navigazione </li></ul><ul><li>Login e registrazione </li></ul><ul><li>Search e pagine di risultati </li></ul><ul><li>Paging o scrolling </li></ul><ul><li>Date Picker o Compilazione </li></ul><ul><li>Call for action </li></ul>
  20. 20. Pattern References <ul><li>h ttp://quince.infragistics.com/ </li></ul><ul><li>http://interface.fh-potsdam.de/infodesignpatterns/patterns.php </li></ul><ul><li>http://www.welie.com/patterns/index.php </li></ul><ul><li>http://patterntap.com/ </li></ul>
  21. 21. Best Practice: alcuni esempi <ul><li>Gestione dello spazio: all in one window, scrolling, ridimensionamento </li></ul><ul><li>Selezione degli oggetti: selezioni multiple da liste, drag&drop, comandi da tastiera </li></ul><ul><li>Messaggi di errore </li></ul><ul><li>Pannelli: accordion, modal panel ( LightBox ) </li></ul><ul><li>Wizard </li></ul>
  22. 22. Il contesto delle UI <ul><li>Ad ogni progetto la sua UI </li></ul><ul><li>Che cosa e’ la Brand Image </li></ul><ul><li>Il manuale di stile e la tassonomia degli oggetti della UI </li></ul>
  23. 23. Domande?

×