ݺߣ

ݺߣShare a Scribd company logo

Dalla UX alla UI: interfacce grafiche

•
•
Francesco Acerbi
Francesco Acerbi

Realizzare una buona UI aiuta a migliorare UX (oppure è il contrario)? Applicare la grafica non si riduce ad un insieme di forme e colori: progettare correttamente permette di creare interfacce funzionanti per vivere un’esperienza memorabile.

1 of 64
Downloaded 42 times
Dalla UX alla UI: interfacce grafiche 9 novembre 2016 Our Digital Experience FEVR + UX Book Club Verona Vicenza
Francesco Acerbi chi sono visual designer ui + ux designer fb / ln / g+ / tw / inst
Ux Book Club Verona Vicenza L'UX Book Club è un'occasione periodica per parlare di User Experience e di molti altri argomenti, per confrontarci e scambiarci opinioni. Partecipano non solo professionisti del settore, ma anche chi per la prima volta si avvicina a questi temi perché li trova stimolanti e interessanti. Chi partecipa cambia il proprio punto di vista! Seguici su Facebook: http://bit.ly/ubcvrvi-fb Iscriviti alla nostra newsletter
parte 1 UX e UI: definizioni a.k.a. siamo sicuri sicuri di saperle?
definizione UX UX = User eXperience L'esperienza dell'utente può essere definita come “le percezioni e le reazioni di un utente che derivano dall'uso o dall'aspettativa d'uso di un prodotto, sistema o servizio”. (cit. ISO 9241-210)
Con il termine UX design, parliamo del processo per migliorare (e/o creare) la soddisfazione dell’esperienza di un utente nel relazionarsi con un brand, con i suoi prodotti o servizi (cit. Donald Norman) definizione UX
definizione UI UI = User Interface L'interfaccia utente è ciò che si frappone tra una macchina e un utente, consentendo l'interazione tra i due. (cit. Wikipedia)
Solitamente con il termine UI design intendiamo l’attività di progettazione dell’interfaccia utente nell’ambito informatico; più in particolare la progettazione dell’interfaccia grafica che compare in uno schermo. definizione UI
definizione UI Esistono diversi tipi di interface: CLI GUI NUI Command Line Interface Graphical User Interface interfaccia a riga di comando Natural User Interface interfaccia grafica utente interfaccia utente naturale
Quindi UX e UI sono la stessa cosa? UX = UI ?
La risposta è… ?
La risposta è… NO UX != UI
La risposta è… NO UX != UI
UX != UI perchè NO ?
UX != UI interaction design content strategy user interface typography information architecture visual design functionality usability UX
UX != UI Per comprendere meglio: www.uxisnotui.com by Erik Flowers How UX wants to be seen VS How UX is typically seen UX IS NOT UIUX IS NOT UIWhat does UX actually mean? The various UX roles that a person can fulfill are plentiful. Some are whole jobs, some whole careers; others are tactical roles we all move in and out of. What so many UX designers would like you to remember is that UX is not just UI design. Field research Face to face interviewing Creation of user tests Gathering and organizing statistics Creating personas Product design Feature writing Requirement writing Graphic arts Interaction design Information architecture Usability Prototyping Interface layout Interface design Visual design Taxonomy creation Terminology creation Copywriting Presenting and speaking Working tightly with programmers Brainstorm coordination Design culture evangelism Field research Face to face interviewing Creation of user tests Gathering and organizing statistics Creating personas Product design Feature writing Requirement writing Graphic arts Interaction design Information architecture Usability Prototyping Interface layout Interface design Visual design Taxonomy creation Terminology creation Copywriting Presenting and speaking Working tightly with programmers Brainstorm coordination Design culture evangelism HOW UX WANTS TO BE SEEN HOW UX IS TYPICALLY SEEN “UX is the intangible design of a strategy that brings us to a solution.” Get your print or web copy of this poster at www.uxisnotui.com helloerik.com/ux-is-not-uiAn offshoot of @Erik_UX elisabethhubert.com/2012/12/interaction-design-beyond-the-interface/Inspired by @lishubert
UX != UI Ed Lea, Interaction Designer @Google
UX != UI Ed Lea, Interaction Designer @Google
UX != UI Ed Lea, Interaction Designer @Google
UX != UI UI speciale elezioni
UX != UI UX speciale elezioni
parte 2 da UX a UI a.k.a. dove sono e come ci sono arrivato?
da UX a UI Dove sono?
da UX a UI DISCOVER DEFINE DESIGN IMPLEMENT VALIDATE ricerca e analisi design vision costruzione sviluppo e test consegna es. interviste utente ricerca qualitativa e quantitativa es. personas scenari ia es. mockup wireframe style guide es. user test survey es. user test interviste UX UI
da UX a UI Ricerca - Wireframes - Prototipi Mockup - Grafica - Layout
da UX a UI
da UX a UI by Julie Lungaro @Dribble by Adrian Pelletier by me
parte 3 Principi di UI design a.k.a. quando il gioco si fa duro i duri cominciano a giocare
I principi di UI design Lo User Interface design si propone di anticipare ciò che gli utenti hanno bisogno di fare e garantisce che l'interfaccia realizzata abbia elementi di facile accesso, comprensione e uso, per facilitare le azioni degli utenti stessi.
Conosci il tuo utente (know your user) I principi di UI design
Semplicità (semplicity) I principi di UI design
Chiarezza (clarity) I principi di UI design
Coerenza (consistency) I principi di UI design
Flessibilità (flexibility) I principi di UI design
Metafore (metaphors) I principi di UI design
Gerarchia (hierarchy) I principi di UI design
Controllo (user control) I principi di UI design
Feedback I principi di UI design
parte 4 Grafica per tutti a.k.a. è davvero necessario?
Grafica per tutti Tipografia, colori, spazi, etc. sono utilizzati in un’interfaccia per permettere una migliore interazione tra l’utente e il sistema: è possibile veicolare informazioni, concetti ed emozioni, permettendo di far compiere azioni complesse in modo semplice.
Grafica per tutti: colori Colori
Grafica per tutti: colori Tieni in considerazione: - Colori simili vanno usati per mostrare una somiglianza tra gli oggetti. - Una volta scelti una palette, questa va mantenuta. - Usate una palette di colori contenuta, massimo di 5. - Pensate alla leggibilità. Ci sono alcuni colori che la retina vede meglio su aree periferiche (giallo, blu, bianco, nero) piuttosto che centrali dell’interfaccia (rosso, verde). - in linea di massima i colori caldi sono più visibili dei colori freddi. - in caso di dubbio, chiedete a un visual designer.
1 tip Evitate le combinazioni rosso/verde, blu/giallo, verde/blu, rosso/blu se non strettamente necessario. Si possono creare vibrazioni ottiche, illusioni di vedere ombre e immagini residue. AAAGH!
Grafica per tutti: tipografia Tipografia
Grafica per tutti: tipografia Tieni in considerazione: - Utilizzate font che siano scalabili. - Cercate font che abbiano forme riconoscibili, in ogni grandezza. - Cercate anche font con diversi pesi. - Evitate generalmente i testi centrati. - I font permettono di costruire una gerarchia e il ritmo di un’interfaccia. - in caso di dubbio, chiedete a un visual designer.
1 tip Usate pochi caratteri, massimo 3, con poche differenze di grandezza, sempre massimo 3. HO VISTO COSE…
Grafica per tutti: allineamenti Allineamenti
1 tip Usate una griglia (o un grid system), permette di risparmiare tempo e fatica, costruendo una struttura e una forma in modo più facile.
Grafica per tutti: contrasto Contrasto
1 tip Utilizzate forti contrasti per attirare l'attenzione dell'utente sulle informazioni più importanti.
Grafica per tutti: immagini Immagini
1 tip Nel prodotto finale adoperate immagini di cui avete il diritto d’utilizzo, cercandole sempre ad alta risoluzione. AGH ! GRATIS!
parte 5 Per concludere a.k.a. chiudiamo il cerchio (cit. Giotto)
Una buona UI è ovvia Una grande UI è invisibile Per concludere
Come riconoscere una buona UI? Per concludere
USER? Sì, beh, ma esistono solo gli utenti finali?
La risposta è… ??
La risposta è… NO @!#*§ colpo di scena!
La risposta è… NO @!#*§ colpo di scena!
È importante quindi monitorare e analizzare sempre le fasi della progettazione. Per concludere Una buona UI è facile da usare e ha alti tassi di conversione.
parte 5+1 Some Tips a.k.a. one more thing
Website www.goodui.org: 75 GoodUI ideas www.adhamdannaway.com/blog/ui-design/ui-design-books UI design books you should read www.ui-patterns.com learn to become awesome product designers. Some tips
Tools Adobe Photoshop, Adobe Illustrator, Adobe XD, Axure, Balsamiq Mockups, Boostrap, Flinto, Framer.js,GitHub, InVision, Marvel, Sketch, … Some tips
Fin. Francesco Acerbi francesco@shakemybrand.com Mobile: +340 30 65 967

More Related Content

Dalla UX alla UI: interfacce grafiche

  • 1. Dalla UX alla UI: interfacce grafiche 9 novembre 2016 Our Digital Experience FEVR + UX Book Club Verona Vicenza
  • 2. Francesco Acerbi chi sono visual designer ui + ux designer fb / ln / g+ / tw / inst
  • 3. Ux Book Club Verona Vicenza L'UX Book Club è un'occasione periodica per parlare di User Experience e di molti altri argomenti, per confrontarci e scambiarci opinioni. Partecipano non solo professionisti del settore, ma anche chi per la prima volta si avvicina a questi temi perché li trova stimolanti e interessanti. Chi partecipa cambia il proprio punto di vista! Seguici su Facebook: http://bit.ly/ubcvrvi-fb Iscriviti alla nostra newsletter
  • 4. parte 1 UX e UI: definizioni a.k.a. siamo sicuri sicuri di saperle?
  • 5. definizione UX UX = User eXperience L'esperienza dell'utente può essere definita come “le percezioni e le reazioni di un utente che derivano dall'uso o dall'aspettativa d'uso di un prodotto, sistema o servizio”. (cit. ISO 9241-210)
  • 6. Con il termine UX design, parliamo del processo per migliorare (e/o creare) la soddisfazione dell’esperienza di un utente nel relazionarsi con un brand, con i suoi prodotti o servizi (cit. Donald Norman) definizione UX
  • 7. definizione UI UI = User Interface L'interfaccia utente è ciò che si frappone tra una macchina e un utente, consentendo l'interazione tra i due. (cit. Wikipedia)
  • 8. Solitamente con il termine UI design intendiamo l’attività di progettazione dell’interfaccia utente nell’ambito informatico; più in particolare la progettazione dell’interfaccia grafica che compare in uno schermo. definizione UI
  • 9. definizione UI Esistono diversi tipi di interface: CLI GUI NUI Command Line Interface Graphical User Interface interfaccia a riga di comando Natural User Interface interfaccia grafica utente interfaccia utente naturale
  • 10. Quindi UX e UI sono la stessa cosa? UX = UI ?
  • 15. UX != UI interaction design content strategy user interface typography information architecture visual design functionality usability UX
  • 16. UX != UI Per comprendere meglio: www.uxisnotui.com by Erik Flowers How UX wants to be seen VS How UX is typically seen UX IS NOT UIUX IS NOT UIWhat does UX actually mean? The various UX roles that a person can fulfill are plentiful. Some are whole jobs, some whole careers; others are tactical roles we all move in and out of. What so many UX designers would like you to remember is that UX is not just UI design. Field research Face to face interviewing Creation of user tests Gathering and organizing statistics Creating personas Product design Feature writing Requirement writing Graphic arts Interaction design Information architecture Usability Prototyping Interface layout Interface design Visual design Taxonomy creation Terminology creation Copywriting Presenting and speaking Working tightly with programmers Brainstorm coordination Design culture evangelism Field research Face to face interviewing Creation of user tests Gathering and organizing statistics Creating personas Product design Feature writing Requirement writing Graphic arts Interaction design Information architecture Usability Prototyping Interface layout Interface design Visual design Taxonomy creation Terminology creation Copywriting Presenting and speaking Working tightly with programmers Brainstorm coordination Design culture evangelism HOW UX WANTS TO BE SEEN HOW UX IS TYPICALLY SEEN “UX is the intangible design of a strategy that brings us to a solution.” Get your print or web copy of this poster at www.uxisnotui.com helloerik.com/ux-is-not-uiAn offshoot of @Erik_UX elisabethhubert.com/2012/12/interaction-design-beyond-the-interface/Inspired by @lishubert
  • 17. UX != UI Ed Lea, Interaction Designer @Google
  • 18. UX != UI Ed Lea, Interaction Designer @Google
  • 19. UX != UI Ed Lea, Interaction Designer @Google
  • 22. parte 2 da UX a UI a.k.a. dove sono e come ci sono arrivato?
  • 23. da UX a UI Dove sono?
  • 24. da UX a UI DISCOVER DEFINE DESIGN IMPLEMENT VALIDATE ricerca e analisi design vision costruzione sviluppo e test consegna es. interviste utente ricerca qualitativa e quantitativa es. personas scenari ia es. mockup wireframe style guide es. user test survey es. user test interviste UX UI
  • 25. da UX a UI Ricerca - Wireframes - Prototipi Mockup - Grafica - Layout
  • 26. da UX a UI
  • 27. da UX a UI by Julie Lungaro @Dribble by Adrian Pelletier by me
  • 28. parte 3 Principi di UI design a.k.a. quando il gioco si fa duro i duri cominciano a giocare
  • 29. I principi di UI design Lo User Interface design si propone di anticipare ciò che gli utenti hanno bisogno di fare e garantisce che l'interfaccia realizzata abbia elementi di facile accesso, comprensione e uso, per facilitare le azioni degli utenti stessi.
  • 30. Conosci il tuo utente (know your user) I principi di UI design
  • 37. Controllo (user control) I principi di UI design
  • 39. parte 4 Grafica per tutti a.k.a. è davvero necessario?
  • 40. Grafica per tutti Tipografia, colori, spazi, etc. sono utilizzati in un’interfaccia per permettere una migliore interazione tra l’utente e il sistema: è possibile veicolare informazioni, concetti ed emozioni, permettendo di far compiere azioni complesse in modo semplice.
  • 41. Grafica per tutti: colori Colori
  • 42. Grafica per tutti: colori Tieni in considerazione: - Colori simili vanno usati per mostrare una somiglianza tra gli oggetti. - Una volta scelti una palette, questa va mantenuta. - Usate una palette di colori contenuta, massimo di 5. - Pensate alla leggibilità. Ci sono alcuni colori che la retina vede meglio su aree periferiche (giallo, blu, bianco, nero) piuttosto che centrali dell’interfaccia (rosso, verde). - in linea di massima i colori caldi sono più visibili dei colori freddi. - in caso di dubbio, chiedete a un visual designer.
  • 43. 1 tip Evitate le combinazioni rosso/verde, blu/giallo, verde/blu, rosso/blu se non strettamente necessario. Si possono creare vibrazioni ottiche, illusioni di vedere ombre e immagini residue. AAAGH!
  • 44. Grafica per tutti: tipografia Tipografia
  • 45. Grafica per tutti: tipografia Tieni in considerazione: - Utilizzate font che siano scalabili. - Cercate font che abbiano forme riconoscibili, in ogni grandezza. - Cercate anche font con diversi pesi. - Evitate generalmente i testi centrati. - I font permettono di costruire una gerarchia e il ritmo di un’interfaccia. - in caso di dubbio, chiedete a un visual designer.
  • 46. 1 tip Usate pochi caratteri, massimo 3, con poche differenze di grandezza, sempre massimo 3. HO VISTO COSE…
  • 47. Grafica per tutti: allineamenti Allineamenti
  • 48. 1 tip Usate una griglia (o un grid system), permette di risparmiare tempo e fatica, costruendo una struttura e una forma in modo più facile.
  • 49. Grafica per tutti: contrasto Contrasto
  • 50. 1 tip Utilizzate forti contrasti per attirare l'attenzione dell'utente sulle informazioni più importanti.
  • 51. Grafica per tutti: immagini Immagini
  • 52. 1 tip Nel prodotto finale adoperate immagini di cui avete il diritto d’utilizzo, cercandole sempre ad alta risoluzione. AGH ! GRATIS!
  • 53. parte 5 Per concludere a.k.a. chiudiamo il cerchio (cit. Giotto)
  • 54. Una buona UI è ovvia Una grande UI è invisibile Per concludere
  • 55. Come riconoscere una buona UI? Per concludere
  • 56. USER? Sì, beh, ma esistono solo gli utenti finali?
  • 60. È importante quindi monitorare e analizzare sempre le fasi della progettazione. Per concludere Una buona UI è facile da usare e ha alti tassi di conversione.
  • 61. parte 5+1 Some Tips a.k.a. one more thing
  • 62. Website www.goodui.org: 75 GoodUI ideas www.adhamdannaway.com/blog/ui-design/ui-design-books UI design books you should read www.ui-patterns.com learn to become awesome product designers. Some tips
  • 63. Tools Adobe Photoshop, Adobe Illustrator, Adobe XD, Axure, Balsamiq Mockups, Boostrap, Flinto, Framer.js,GitHub, InVision, Marvel, Sketch, … Some tips