dalla ux alla ui: interfacce grafiche
TRANSCRIPT
![Page 1: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/1.jpg)
Dalla UX alla UI: interfacce grafiche
9 novembre 2016 Our Digital Experience
FEVR + UX Book Club Verona Vicenza
![Page 2: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/2.jpg)
Francesco Acerbi
chi sono
visual designer ui + ux designer
fb / ln / g+ / tw / inst
![Page 3: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/3.jpg)
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
![Page 4: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/4.jpg)
parte 1 UX e UI: definizioni
a.k.a. siamo sicuri sicuri di saperle?
![Page 5: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/5.jpg)
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)
![Page 6: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/6.jpg)
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
![Page 7: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/7.jpg)
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)
![Page 8: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/8.jpg)
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
![Page 9: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/9.jpg)
definizione UI
Esistono diversi tipi di interface:
CLI GUI NUICommand Line Interface Graphical User Interface
interfaccia a riga di comando
Natural User Interface
interfaccia grafica utente interfaccia utente naturale
![Page 10: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/10.jpg)
Quindi UX e UI sono la stessa cosa?
UX = UI ?
![Page 11: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/11.jpg)
La risposta è… ?
![Page 12: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/12.jpg)
La risposta è…
NO UX != UI
![Page 13: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/13.jpg)
La risposta è…
NOUX != UI
![Page 14: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/14.jpg)
UX != UI
perchè NO ?
![Page 15: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/15.jpg)
UX != UI
interaction design
content strategy
user interface
typography
information architecture
visual design
functionality
usability
UX
![Page 16: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/16.jpg)
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 researchFace to face interviewingCreation of user testsGathering and organizing statisticsCreating personasProduct designFeature writingRequirement writingGraphic artsInteraction designInformation architectureUsabilityPrototypingInterface layoutInterface designVisual designTaxonomy creationTerminology creationCopywritingPresenting and speakingWorking tightly with programmersBrainstorm coordinationDesign culture evangelism
Field researchFace to face interviewingCreation of user testsGathering and organizing statisticsCreating personasProduct designFeature writingRequirement writingGraphic artsInteraction designInformation architectureUsabilityPrototypingInterface layoutInterface designVisual designTaxonomy creationTerminology creationCopywritingPresenting and speakingWorking tightly with programmersBrainstorm coordinationDesign 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.comhelloerik.com/ux-is-not-uiAn offshoot of @Erik_UX
elisabethhubert.com/2012/12/interaction-design-beyond-the-interface/Inspired by @lishubert
![Page 17: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/17.jpg)
UX != UI
Ed Lea, Interaction Designer @Google
![Page 18: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/18.jpg)
UX != UI
Ed Lea, Interaction Designer @Google
![Page 19: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/19.jpg)
UX != UI
Ed Lea, Interaction Designer @Google
![Page 20: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/20.jpg)
UX != UI
UI
speciale elezioni
![Page 21: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/21.jpg)
UX != UI
UX
speciale elezioni
![Page 22: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/22.jpg)
parte 2 da UX a UI
a.k.a. dove sono e come ci sono arrivato?
![Page 23: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/23.jpg)
da UX a UI
Dove sono?
![Page 24: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/24.jpg)
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
![Page 25: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/25.jpg)
da UX a UI
Ricerca - Wireframes - Prototipi
Mockup - Grafica - Layout
![Page 26: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/26.jpg)
da UX a UI
![Page 27: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/27.jpg)
da UX a UI
by Julie Lungaro @Dribble by Adrian Pelletier by me
![Page 28: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/28.jpg)
parte 3 Principi di UI design
a.k.a. quando il gioco si fa duro i duri cominciano a giocare
![Page 29: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/29.jpg)
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.
![Page 30: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/30.jpg)
Conosci il tuo utente (know your user)
I principi di UI design
![Page 31: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/31.jpg)
Semplicità (semplicity)
I principi di UI design
![Page 32: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/32.jpg)
Chiarezza (clarity)
I principi di UI design
![Page 33: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/33.jpg)
Coerenza (consistency)
I principi di UI design
![Page 34: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/34.jpg)
Flessibilità (flexibility)
I principi di UI design
![Page 35: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/35.jpg)
Metafore (metaphors)
I principi di UI design
![Page 36: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/36.jpg)
Gerarchia (hierarchy)
I principi di UI design
![Page 37: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/37.jpg)
Controllo (user control)
I principi di UI design
![Page 38: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/38.jpg)
Feedback
I principi di UI design
![Page 39: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/39.jpg)
parte 4 Grafica per tutti
a.k.a. è davvero necessario?
![Page 40: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/40.jpg)
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.
![Page 41: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/41.jpg)
Grafica per tutti: colori
Colori
![Page 42: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/42.jpg)
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.
![Page 43: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/43.jpg)
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!
![Page 44: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/44.jpg)
Grafica per tutti: tipografia
Tipografia
![Page 45: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/45.jpg)
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.
![Page 46: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/46.jpg)
1 tip
Usate pochi caratteri, massimo 3, con poche differenze di grandezza, sempre massimo 3.
HO VISTO COSE…
![Page 47: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/47.jpg)
Grafica per tutti: allineamenti
Allineamenti
![Page 48: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/48.jpg)
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.
![Page 49: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/49.jpg)
Grafica per tutti: contrasto
Contrasto
![Page 50: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/50.jpg)
1 tip
Utilizzate forti contrasti per attirare l'attenzione dell'utente sulle informazioni più importanti.
![Page 51: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/51.jpg)
Grafica per tutti: immagini
Immagini
![Page 52: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/52.jpg)
1 tip
Nel prodotto finale adoperate immagini di cui avete il diritto d’utilizzo, cercandole sempre ad alta risoluzione.
AGH !
GRATIS!
![Page 53: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/53.jpg)
parte 5 Per concludere
a.k.a. chiudiamo il cerchio (cit. Giotto)
![Page 54: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/54.jpg)
Una buona UI è ovvia Una grande UI è invisibile
Per concludere
![Page 55: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/55.jpg)
Come riconoscere una buona UI?
Per concludere
![Page 56: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/56.jpg)
USER?
Sì, beh, ma esistono solo gli utenti finali?
![Page 57: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/57.jpg)
La risposta è… ??
![Page 58: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/58.jpg)
La risposta è…
NO @!#*§
colpo di scena!
![Page 59: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/59.jpg)
La risposta è…
NO@!#*§
colpo di scena!
![Page 60: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/60.jpg)
È importante quindi monitorare e analizzare sempre le fasi della progettazione.
Per concludere
Una buona UI è facile da usare e ha alti tassi di conversione.
![Page 61: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/61.jpg)
parte 5+1 Some Tips
a.k.a. one more thing
![Page 62: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/62.jpg)
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
![Page 63: Dalla UX alla UI: interfacce grafiche](https://reader035.vdocument.in/reader035/viewer/2022070520/58f234f91a28abde578b45b7/html5/thumbnails/63.jpg)
Tools
Adobe Photoshop, Adobe Illustrator, Adobe XD, Axure,
Balsamiq Mockups, Boostrap, Flinto, Framer.js,GitHub, InVision,
Marvel, Sketch, …
Some tips