ux genova 2016 - dalla ux alla ui: interfacce grafiche

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 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)

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

definizione UI

Command Line Interfaceinterfaccia a riga di comando

CLI

photo by JRuben de Rijcke @Wikipedia

definizione UI

Graphical User Interfaceinterfaccia grafica utente

GUI

screen by Kosmos @Wikipedia

definizione UI

Natural User Interfaceinterfaccia utente naturale

NUI

screen by Kosmos @Wikipedia

Quindi UX e UI sono la stessa cosa?

UX = UI ?

La risposta è… ?

La risposta è…

NO UX != UI

La risposta è…

NOUX != UI

UX != UI

perchè NO ?

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

http://www.uxisnotui.com

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 - Grafica - Layout

da UX a UI

da UX a UI

by Julie Lungaro @Dribble by Adrian Pelletier by me

da UX a UI

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à (flexibility)


Metafore (metaphors)


Gerarchia (hierarchy)


Controllo (user control)


Feedback


parte 4

grafica per tutti

“E ora qualcosa di completamente diverso”

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


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.

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…

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.

Bandiera a sinistra






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.




Centrato






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.




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? sì?

no?

Usiamo la testa

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)


www.wpbeginner.com

http://www.wpbeginner.com/showcase/evolution-of-wordpress-user-interface-2003-2009/


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 offre ottimo supporto

- freemium > premium


ux.mailchimp.com

http://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 è… ??

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

http://www.ui-patterns.com

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

http://www.unsplash.com

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?

-Differenza UX e UI

-Principi UI design

-Concetti di grafica

-Utenti, ricerca, analisi: design

Fin.

Francesco Acerbi

[email protected]

Mobile: +340 30 65 967

mailto:[email protected]