2013 DIDATTICA - Projectwork: UX DESIGN, corso di Digital Marketing

Palestra delle Professioni Digitali Elementi di UX Design Milano, 5 Dicembre 2013

2

Indice

q   IL DESIGN

q   IL DESIGNER

q   IL DESIGNER DELL’ESPERIENZA UTENTE

q   DESIGN PROCESS light version

q   DESIGN PROCESS expanded version

q   DREAM TEAM

q   UNA STRATEGIA WIN-WIN

q   LINK UTILI

q   ESERCITAZIONE

q   CREDITI

q   CONTATTI

3

IL DESIGN

q  COS’È IL DESIGN?

Nell’ambito della produzione industriale, attività di progettazione che attraverso strumenti specifici/di

settore si prefigge di creare artefatti conciliando diverse componenti:

• Componenti di business

• Componenti tecniche

• Componenti esperienziali

• Componenti emozionali

4

IL DESIGNER

q  COSA FA UN DESIGNER?

Il designer è un problem solver: attraverso il suo sapere multidisciplinare e gli strumenti del mestiere

garantisce che il prodotto finale integri tutte le componenti in modo coerente

5

IL DESIGNER DELL’ESPERIENZA UTENTE

q  COSA FA UNO UX DESIGNER?

•   Qual’è il prodotto/servizio tecnologico che preferite? Quello che non volete nemmeno provare a immaginare come sarebbe vivere senza? L’iPhone? La Playstation? Google? Facebook? La TV? Il Kindle?

•   Trovato? Bene: un ingegnere (o un programmatore) è la figura che si occupa materialmente della struttura e degli ingranaggi interni (acceso/spento). Uno user experience designer riesce a far funzionare il prodotto/servizio in oggetto come le persone vogliono, e si aspettano che funzioni (interazione uomo/macchina)

q  Il focus dell’approccio UCD (User Centred Design) è sulla persona

6

AMBITI DISCIPLINARI E STRUMENTI DI LAVORO

q   QUALI SONO LE DISCIPLINE COINVOLTE?

•   Psicologia analisi dei modelli mentali dell’utente

• Linguistica analisi del linguaggio naturale

• Sociologia analisi dei comportamenti sociali

• Ergonomia interazione uomo/oggetto (o uomo/macchina)

• Marketing studio delle logiche di mercato (micro/macro)

• Informatica conoscenza degli strumenti tecnologici abilitanti

q   QUALI SONO GLI STRUMENTI NECESSARI?

1. User research & Content analysis

2. Benchmark dei competitors

3. Information Architecture & Task flow design

4. Wireframing

5. Look & Feel Proposal & Templates design

6. Testing

7. Specifiche di design

7

DESIGN PROCESS light version

8

DESIGN PROCESS expanded version

9

DESIGN PROCESS expanded version - INTERVIEWS

10

DESIGN PROCESS expanded version - PERSONAS

11

DESIGN PROCESS expanded version - STORYBOARD SKETCH

12

DESIGN PROCESS expanded version - PAPER PROTOTYPE

13

DESIGN PROCESS expanded version - USABILITY TESTING

14

DESIGN PROCESS expanded version - HI FIDELITY PROTOTYPE

15

DREAM TEAM

q  COSA SUCCEDE DOPO

•   Una volta approvata la proposta, i prototipi passano nelle mani di graphic designer, web developer, app developer e, all’occorrenza, video makers

•   Il project manager è colui che si preoccupa di supervisionare il lavoro svolto, in un processo di revisione continua che dipende dai feedback del cliente o, nel caso di progetti onerosi, dal cambiamento dello scenario di riferimento

•   E lo user experience designer? Il suo lavoro non è finito: deve infatti lavorare a stretto contatto con i colleghi, prestando attenzione ai dettagli, in modo che vengano rispettate le specifiche del prototipo e si possa reagire prontamente nel caso (molto probabile) di modifiche da apportare in fieri

q  ATTITUDINE

Sulla base di questo, per essere dei bravi user experience designer le competenze teoriche e la padronanza degli strumenti tecnici non sono sufficienti. Servono anche:

• Capacità di lavorare in team

• Capacità comunicative/empatia

• Attenzione al dettaglio

16

UNA STRATEGIA WIN-WIN

q  PERCHÉ L’APPROCCIO USER CENTRED RAPPRESENTA UN MODELLO VINCENTE?

• Garantisce la qualità del prodotto finale in processi di produzione dove sono coinvolti molti attori

• Tramite le fasi di testing, viene assicurata la soddisfazione dell’utente finale

• Favorisce la fidelizzazione dell’utente (gli utenti acquistano esperienze non prodotti!)

• Utilizza strategie di progettazione che abbassano i costi di sviluppo (prototyping & agile development)

• Semplifica la produzione di servizi cross-device

17

UNA STRATEGIA WIN-WIN

18

LINK UTILI

Per iniziare…

q  HOW DO YOU EXPLAIN USER EXPERIENCE DESIGN TO A LAYMAN?

http://www.quora.com/User-Experience/How-do-you-explain-user-experience-design-to-a-layman?

srid=OSFR&share=1

q  WHAT ARE SOME MEANINGFUL AND NOTABLE QUOTES ABOUT USER EXPERIENCE?

http://www.quora.com/What-are-some-meaningful-and-notable-quotations-about-user-experience-UX?

share=1

q  WHAT YOU WILL FIND ON DESIGN RESEARCHER’S BOOKSHELF

http://designmind.frogdesign.com/blog/what-you-will-find-on-a-design-researchers-bookshelf.html

q  NIELSEN NORMAN GROUP

http://www.nngroup.com/

q   INTERACTION DESIGN FOUNDATION

http://www.interaction-design.org/

19

ESERCITAZIONE

q  OBIETTIVO FASE 1: Progettare la mappa di un mini-sito web FASE 2: Disegnare un prototipo quanto più fedele possibile della home page FASE 3: Review q  STRUMENTI FASE 1: Carta e penna oppure un tool dedicato Mindnode http://mindnode.com/ FREE & EASY DOWNLOAD FASE 2: Balsamiq http://balsamiq.com/download/ FREE & EASY DOWNLOAD, 7 days DEMO version q  USECASES Personal website ESEMPI: http://vandelaydesign.com/blog/galleries/personal-websites/ App website ESEMPI: http://www.awwwards.com/30-beautiful-app-websites.html q  TIMING FASE 1: 25’ FASE 2: 25’ FASE 3: 10’ BUON LAVORO!

20

CREDITI

q   IMMAGINI

•   p.2 - http://inndesign.fr/wp-content/uploads/2013/09/Heinz_Design_UX.png •   p.3 - non disponibili

•   p.4 - http://danielebresciani.files.wordpress.com/2011/12/schema-munari-01.jpg •   p.5 - http://24.media.tumblr.com/tumblr_m5mgprIcnT1r8ezlho1_1280.png •   p.6/1 - http://studiofirenze.com/public/foto_news/librisociali.gif •   p.6/2 - http://vidacupblog.com/wp-content/uploads/2013/05/Tools.jpg •   pp.7-8-9 non disponibili •   p.11 - http://asset-6.soup.io/asset/0644/8137_6fbc.jpeg

•   p.12 - http://jasonfurnell.files.wordpress.com/2010/12/strategy_ux_layout_sketch.png •   p.13 - http://jennycham.co.uk/wp-content/uploads/2011/08/200911221250225481.jpg •   p.14 - http://phoenixdezains.files.wordpress.com/2013/03/balsamiq-mockups.jpg •   p.15 - http://letlifehappen.com/wp-content/uploads/2010/08/Teamwork.jpg •   p.16 - http://assets.uxbooth.com/uploads/2012/05/ux_man.jpg

•   p.17 - http://liferay.com/it/web/juan.hidalgo/blog/-/blogs/user-experience-ux-descriptions.18/ •   p.18 - http://grasshopperherder.com/wp-content/uploads/2012/06/the-job-of-user-experience.png •   p.19 - http://support.mybalsamiq.com/projects/examples/Boogle.png •   Tutte le altre immagini, e i loghi, sono proprietà di chi scrive/dei partner del corso

21

CONTATTI

Se avete curiosità/domande:

@vspeziale

vanessa.speziale at yahoo.it

http://linkedin.com/in/vanessaspeziale

22