狠狠撸

Dalla UX alla UI:
interfacce grafiche
16 dicembre
UX Genova 2016

Francesco Acerbi
chi sono
visual designer ui designer
fb / ln / g+ / tw / inst

parte 1
UX e UI: definizioni
“Ripassiamo? Ovvio.”

definizione UX
UX = User eXperience
L'esperienza dell'utente può essere de?nita 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)

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 gra?ca che compare in uno schermo.
definizione UI

definizione UI
Esistono diversi tipi di interface:
CLI GUI NUI

definizione UI
Command Line Interface
interfaccia a riga di comando
CLI
photo by JRuben de Rijcke @Wikipedia

definizione UI
Graphical User Interface
interfaccia gra?ca utente
GUI
screen by Kosmos @Wikipedia

definizione UI
Natural User Interface
interfaccia utente naturale
NUI
screen by Kosmos @Wikipedia

Quindi UX e UI
sono la stessa cosa?
UX = UI ?

UX != UI
interaction design
content strategy
user interface
typography
information architecture
visual design
functionality
usability

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

parte 2
da UX a UI
“Dove siamo? Come ci siamo arrivati?”

da UX a UI
Dove siamo?
Quando arriva la UI?

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
Interviste - Personas - IA
Mockup - Gra?ca - Layout

da UX a UI
by Julie Lungaro @Dribble by Adrian Pelletier by me

parte 3
9 principi di UI design
“Quando il gioco si fa duro…”

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)

Semplicità (semplicity)

Chiarezza (clarity)

Coerenza (consistency)

Flessibilità (?exibility)

Metafore (metaphors)

Gerarchia (hierarchy)

Controllo (user control)

Feedback

parte 4
grafica per tutti
“E ora qualcosa di completamente diverso”

Grafica per tutti
Tipogra?a, 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

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.

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!

colori caldi
colori freddi
Nel caso di dubbio, utilizza:
- monocromia;
- colori analoghi;
- colori complementari;
- colori triadici.

UX Genova 2016 - Dalla UX alla UI: interfacce grafiche

Grafica per tutti: tipografia
Tipogra?a

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…

Giusti?cato
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 e?citur magna a, viverra commodo velit.
Sed ultricies sodales semper. Ut porta
commodo ullamcorper. Duis leo dolor, semper
id nisi eget, tincidunt tincidunt arcu.
Giusti?cato
eu volutpat dui imperdiet.
Cras orci ipsum, porttitor sit amet ligula a,
eleifend vestibulum risus. Aliquam in egestas
nisi. Nulla risus purus, aliquet e?citur magna a,
viverra commodo velit.

Bandiera a sinistra
Centrato

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.

Allineamento creativo? Oggetti allineati

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
alcuni casi
“In soldoni, funziona? Investiamo?”

Casi di successo
Investiamo?
no? 蝉ì?

蝉ì? 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)

www.wpbeginner.com

WordPress 4.7

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 o?re ottimo supporto
- freemium > premium

ux.mailchimp.com

parte 6
per concludere
“Chiudiamo il cerchio?”

Una buona UI è ovvia
Una grande UI è invisibile
Per concludere

Come riconoscere una buona UI?
Per concludere

USER?
Sì, ok, ma esistono
solo gli utenti finali?

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 6+1
some tips
“One more thing”

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

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

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

Take away:
cosa abbiamo visto?
-Di?erenza UX e UI
-Principi UI design
-Concetti di gra?ca
-Utenti, ricerca, analisi: design

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

狠狠撸

UX Genova 2016 - Dalla UX alla UI: interfacce grafiche

More Related Content

UX Genova 2016 - Dalla UX alla UI: interfacce grafiche