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.

UX Genova 2016 - Dalla UX alla UI: interfacce grafiche

1,162 views

Published on

Intervento di "UX Genova 2016"
Realizzare una buona UI aiuta a migliorare UX? Progettare correttamente permette di creare interfacce funzionanti per vivere un’esperienza memorabile.
(versione aggiornata e dettagliata)

Published in: Design

UX Genova 2016 - Dalla UX alla UI: interfacce grafiche

  1. 1. Dalla UX alla UI: interfacce grafiche 16 dicembre UX Genova 2016
  2. 2. Francesco Acerbi chi sono visual designer ui designer fb / ln / g+ / tw / inst
  3. 3. parte 1 UX e UI: definizioni “Ripassiamo? Ovvio.”
  4. 4. definizione UX UX = User eXperience L'esperienza dell'utente può essere definita come l’insieme “delle percezioni e delle reazioni di un utente che derivano dall'uso o dall'aspettativa d'uso di un prodotto, sistema o servizio”. (cit. ISO 9241-210)
  5. 5. 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
  6. 6. 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)
  7. 7. 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
  8. 8. definizione UI Esistono diversi tipi di interface: CLI GUI NUI
  9. 9. definizione UI Command Line Interface interfaccia a riga di comando CLI photo by JRuben de Rijcke @Wikipedia
  10. 10. definizione UI Graphical User Interface interfaccia grafica utente GUI screen by Kosmos @Wikipedia
  11. 11. definizione UI Natural User Interface interfaccia utente naturale NUI screen by Kosmos @Wikipedia
  12. 12. Quindi UX e UI sono la stessa cosa? UX = UI ?
  13. 13. La risposta è… ?
  14. 14. La risposta è… NO UX != UI
  15. 15. La risposta è… NO UX != UI
  16. 16. UX != UI perchè NO ?
  17. 17. UX != UI interaction design content strategy user interface typography information architecture visual design functionality usability
  18. 18. 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
  19. 19. UX != UI Ed Lea, Interaction Designer @Google
  20. 20. UX != UI Ed Lea, Interaction Designer @Google
  21. 21. UX != UI Ed Lea, Interaction Designer @Google
  22. 22. parte 2 da UX a UI “Dove siamo? Come ci siamo arrivati?”
  23. 23. da UX a UI Dove siamo? Quando arriva la UI?
  24. 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. 25. da UX a UI Interviste - Personas - IA Mockup - Grafica - Layout
  26. 26. da UX a UI
  27. 27. da UX a UI by Julie Lungaro @Dribble by Adrian Pelletier by me
  28. 28. da UX a UI
  29. 29. parte 3 9 principi di UI design “Quando il gioco si fa duro…”
  30. 30. 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.
  31. 31. Conosci il tuo utente (know your user) I principi di UI design
  32. 32. Semplicità (semplicity) I principi di UI design
  33. 33. Chiarezza (clarity) I principi di UI design
  34. 34. Coerenza (consistency) I principi di UI design
  35. 35. Flessibilità (flexibility) I principi di UI design
  36. 36. Metafore (metaphors) I principi di UI design
  37. 37. Gerarchia (hierarchy) I principi di UI design
  38. 38. Controllo (user control) I principi di UI design
  39. 39. Feedback I principi di UI design
  40. 40. parte 4 grafica per tutti “E ora qualcosa di completamente diverso”
  41. 41. 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.
  42. 42. Grafica per tutti: colori Colori
  43. 43. Grafica per tutti: colori Tieni in considerazione: - Colori simili vanno usati per mostrare una somiglianza tra gli oggetti. - Una volta scelta una palette, questa va mantenuta. - Usate una palette di colori contenuta, massimo di 5. - Pensate alla leggibilità. Ad esempio ci sono alcuni colori che la retina vede meglio su aree periferiche (giallo, blu, bianco, nero) piuttosto che centrali (rosso, verde) dell’interfaccia. - In linea di massima i colori caldi sono più visibili dei colori freddi. - in caso di dubbio, chiedete a un visual designer.
  44. 44. 1 tip Utilizzate le combinazioni rosso/verde, blu/giallo, verde/blu, rosso/blu con attenzione. Si possono creare vibrazioni ottiche, illusioni di vedere ombre e immagini residue. AAAGH!
  45. 45. Grafica per tutti: colori colori caldi colori freddi Nel caso di dubbio, utilizza: - monocromia; - colori analoghi; - colori complementari; - colori triadici.
  46. 46. Grafica per tutti: tipografia Tipografia
  47. 47. 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.
  48. 48. 1 tip Usate pochi caratteri, massimo 3, con poche differenze di grandezza, sempre massimo 3. HO VISTO COSE…
  49. 49. Giustificato Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rhoncus dolor tellus, at mollis eros volutpat in. Quisque et pulvinar dui. Mauris lacinia elit felis, nec ornare dolor lobortis at. Vivamus accumsan ipsum non nibh luctus, eu volutpat dui imperdiet. Cras orci ipsum, porttitor sit amet ligula a, eleifend vestibulum risus. Aliquam in egestas nisi. Nulla risus purus, aliquet efficitur magna a, viverra commodo velit. Sed ultricies sodales semper. Ut porta commodo ullamcorper. Duis leo dolor, semper id nisi eget, tincidunt tincidunt arcu. Giustificato Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rhoncus dolor tellus, at mollis eros volutpat in. Quisque et pulvinar dui. Mauris lacinia elit felis, nec ornare dolor lobortis at. Vivamus accumsan ipsum non nibh luctus, eu volutpat dui imperdiet. Cras orci ipsum, porttitor sit amet ligula a, eleifend vestibulum risus. Aliquam in egestas nisi. Nulla risus purus, aliquet efficitur magna a, viverra commodo velit. Sed ultricies sodales semper. Ut porta commodo ullamcorper. Duis leo dolor, semper id nisi eget, tincidunt tincidunt arcu.
  50. 50. Bandiera a sinistra Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rhoncus dolor tellus, at mollis eros volutpat in. Quisque et pulvinar dui. Mauris lacinia elit felis, nec ornare dolor lobortis at. Vivamus accumsan ipsum non nibh luctus, eu volutpat dui imperdiet. Cras orci ipsum, porttitor sit amet ligula a, eleifend vestibulum risus. Aliquam in egestas nisi. Nulla risus purus, aliquet efficitur magna a, viverra commodo velit. Sed ultricies sodales semper. Ut porta commodo ullamcorper. Duis leo dolor, semper id nisi eget, tincidunt tincidunt arcu. Centrato Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rhoncus dolor tellus, at mollis eros volutpat in. Quisque et pulvinar dui. Mauris lacinia elit felis, nec ornare dolor lobortis at. Vivamus accumsan ipsum non nibh luctus, eu volutpat dui imperdiet. Cras orci ipsum, porttitor sit amet ligula a, eleifend vestibulum risus. Aliquam in egestas nisi. Nulla risus purus, aliquet efficitur magna a, viverra commodo velit. Sed ultricies sodales semper. Ut porta commodo ullamcorper. Duis leo dolor, semper id nisi eget, tincidunt tincidunt arcu.
  51. 51. Grafica per tutti: allineamenti Allineamenti
  52. 52. 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.
  53. 53. Allineamento creativo? Oggetti allineati
  54. 54. Grafica per tutti: contrasto Contrasto
  55. 55. 1 tip Utilizzate forti contrasti per attirare l'attenzione dell'utente sulle informazioni più importanti.
  56. 56. Grafica per tutti: immagini Immagini
  57. 57. 1 tip Nel prodotto finale adoperate immagini di cui avete il diritto d’utilizzo, cercandole sempre ad alta risoluzione. AGH ! GRATIS!
  58. 58. parte 5 alcuni casi “In soldoni, funziona? Investiamo?”
  59. 59. Casi di successo Investiamo? no? sì?
  60. 60. no?
  61. 61. no?
  62. 62. no?
  63. 63. no?
  64. 64. no? Usiamo la testa
  65. 65. sì? casi di successo WordPress - 27 Maggio 2003, pubblicazione 1^ release - oggi circa il 27.2% si basa su WordPress, cioè circa il 58% dei siti che si basa su un CMS conosciuto - grande supporto, facile da installare, facile da usare (funzionalità base)
  66. 66. sì? casi di successo www.wpbeginner.com
  67. 67. sì? casi di successo WordPress 4.7
  68. 68. sì? casi di successo Mailchimp - nata come prodotto di web agency - il develop team lavorava circa l’80% su UI e il 20% sull’infrastruttura (anno 2012) - azienda che punta al design, anticipando le esigenze dei clienti a cui offre ottimo supporto - freemium > premium
  69. 69. sì? casi di successo
  70. 70. sì? casi di successo
  71. 71. sì? casi di successo ux.mailchimp.com
  72. 72. parte 6 per concludere “Chiudiamo il cerchio?”
  73. 73. Una buona UI è ovvia Una grande UI è invisibile Per concludere
  74. 74. Come riconoscere una buona UI? Per concludere
  75. 75. USER? Sì, ok, ma esistono solo gli utenti finali?
  76. 76. La risposta è… ??
  77. 77. La risposta è… NO @!#*§ colpo di scena!
  78. 78. La risposta è… NO @!#*§ colpo di scena!
  79. 79. È importante quindi monitorare e analizzare sempre le fasi della progettazione. Per concludere Una buona UI è facile da usare e ha alti tassi di conversione.
  80. 80. parte 6+1 some tips “One more thing”
  81. 81. Website www.goodui.org 75 GoodUI ideas www.adhamdannaway.com/blog/ui-design/ui-design-books libri di UI design che dovresti leggere www.ui-patterns.com imparare ad essere un buon product designer Some tips
  82. 82. Website ux.mailchimp.com MailChimp Pattern Library www.uxisnotui.com UX is not UI :) www.unsplash.com + www.pexels.com immagini ad alta risoluzione (utilizzabili anche per uso commerciale) Some tips
  83. 83. Tools Adobe Photoshop, Adobe Illustrator, Adobe XD, Axure, Balsamiq Mockups, Boostrap, Flinto, Framer.js, InVision, Marvel, Sketch, … Emulatori (ios/androdi/OS) Google Immagini (non per scaricare!) Some tips
  84. 84. Take away: cosa abbiamo visto? -Differenza UX e UI -Principi UI design -Concetti di grafica -Utenti, ricerca, analisi: design
  85. 85. Fin. Francesco Acerbi francesco@shakemybrand.com Mobile: +340 30 65 967

×