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
×

Ugi Alt.Net Conf0110

537

Published on

presentation about UIX and its development (in italian) for UGIALT.net Conference in Milano on 23.01.10

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
537
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Ugi Alt.Net Conf0110"

  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?

×