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. 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 ?

11. La risposta è… ?

12. La risposta è…
NO
UX != UI

13. La risposta è…
NO
UX != UI

14. UX != UI
perchè NO ?

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

20. UX != UI
UI
speciale elezioni

21. UX != UI
UX
speciale elezioni

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

31. Semplicità (semplicity)
I principi di UI design

32. Chiarezza (clarity)
I principi di UI design

33. Coerenza (consistency)
I principi di UI design

34. Flessibilità (flexibility)
I principi di UI design

35. Metafore (metaphors)
I principi di UI design

36. Gerarchia (hierarchy)
I principi di UI design

37. Controllo (user control)
I principi di UI design

38. Feedback
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?

57. La risposta è… ??

58. La risposta è…
NO
@!#*§
colpo di scena!

59. La risposta è…
NO
@!#*§
colpo di scena!

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

64. Fin.
Francesco Acerbi
francesco@shakemybrand.com
Mobile: +340 30 65 967