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