SlideShare a Scribd company logo
1 of 32
Sketching
Struttura Pagina
Alexis Hill
Product & UX Designer
Quattro pilastri da memorizzare
Vision
Obiettivo
Bisogno
Perché
Promemoria · Tutto si parte dallo sketching
NO SI
Promemoria · Vogliamo qualcosa di veloce
Promemoria · Errore comune
Non si tratta di creare qualcosa di
bello bensì qualcosa di innocente e
veloce per arrivare subito al punto
che ci serve.
Promemoria
Voglio creare una landing per il mio
progetto, prodotto o azienda…
Promemoria · Questo NOP!
NO
Neanche questo
NO
Questo si!
SI
Lo sketching è vitale per
eliminare tutto ciò che non
serve e esiste soprattutto per
evitare la confusione in fase di
progettazione.
Sicuramente ancora lo strumento più utilizzato al mondo!
Promemoria · Tutto si parte dallo sketching
Promemoria · Analisi e investigazione · Prima noi / cliente, dopo gli altri
Quello che vogliamo che
l’utente ottenga da noi, solo
dipende da noi.
La prima domanda giusta da porsi
non è cosa deve fare l’utente nella
nostra piattaforma bensì come o
perché arriva l’utente a noi e cosa
vogliamo che lui faccia u ottenga
dalla nostra piattaforma.
Analisi e investigazione · Fai le domande giuste
…
Social, radio, tv…
Come arriva l’utente a noi?
Marketing?
A & I · Possibili scenari
Ricercatori? Pasa parola?
KeyWords, SEO… Amici, Concorrenza…
Sarà tramite Sarà tramite Sarà tramite
Come? Come? Come?
Cosa vogliamo che faccia?
…
Cosa vogliamo che veda?
…
Cosa vogliamo che pensi?
Può raggiungere facilmente
l’obiettivo?
Può raggiungere facilmente
l’obiettivo?
È chiaro quello che deve fare?
Perché ho messo questo e con
quale finalità precisa?
Il menù ha tutte le voci giuste o sono di troppo?
La sezione principale è veramente necessaria?
C'è una guida / video rapido di cosa fa?
Promemoria · Fai le domande giuste
L’utente vuole Noi vogliamo…
Trasformare
“fargli decidere” quello che può fare
in
PERCHÉ
La UX è anche la conseguenza di
ciò che NOI vogliamo che l’utente
faccia. Il “come” formerà parte
dell’apparenza in forma di
“esperienza”.
Promemoria
Scelta pagina da dove partire
VOBP
Vision
Obiettivo
Bisogno
Perché
Struttura
sequenziale da
maggiore a minore
di quello che noi
vogliamo che
l’utente faccia.
Molto importante
Importante
Servizio
Servizio 1
Servizio 2
Servizio 3
Servizio 4
Servizio 5
Servizio 6
Dettaglio
servizio
Home Form
Scelta pagina da dove partire · Diagramma della Home
Questo
VS
}
Scelta pagina da dove partire · Diagrama
Home
Servizio 1
Breve dettaglio
Servizio 2
Breve dettaglio
Servizio 3
Breve dettaglio
Servizio 4
Breve dettaglio
Servizio 5
Breve dettaglio
Servizio 6
Breve dettaglio
Dettaglio servizio
Form
Vantaggio 1
Descrizione
Vantaggio 2
Descrizione
Video
Claim / Imatto / CTA
DA EVITARE
Da evitare l’effetto revista / Copertine
L’utente già sa quello che vuole e
sa dove andare e cosa fare...
Da evitare assolutamente pensare in maniera superficiale
Perché
L’utente non ha nessuna
predisposizione.
Nessuna veramente!
L’utente naviga in
maniera completamente
disordinata…
L’utente è
imprevedibile
Noi dobbiamo
indirizzare, influenzare,
sedurre, motivare…
Ingaggiare, sedurre e motivare
Pocca info ma diretta “Less is More”
Informazione importante sopra
Inserire solo quello che è necessario
Informazione comprensibile
Pocca info ma diretta “Less is More”
Informazione importante sopra
Inserire solo quello che è necessario
Informazione comprensibile
Quale di queste voci non è giusta e perché?
Ingaggiare, sedurre e motivare
Pocca info ma diretta “Less is More”
Informazione importante sopra
Inserire solo quello che è necessario
Informazione comprensibile
Sopra o sotto non ha
importanza, quello che è
veramente importante è se
l’utente fa quello che noi
vogliamo.
Ingaggiare, sedurre e motivare
L’utente vuole Noi vogliamo…
Trasformare
“fargli decidere” quello che può fare
in
PERCHÉ
Lavora duro!
Grazie!

More Related Content

Similar to Sketching · Struttura pagina

Agile Experience Design & Development - IAD 2012
Agile Experience Design & Development - IAD 2012Agile Experience Design & Development - IAD 2012
Agile Experience Design & Development - IAD 2012Timothy Carniato
 
Come strutturare un design semplice ed efficace per WordPress
Come strutturare un design semplice ed efficace per WordPressCome strutturare un design semplice ed efficace per WordPress
Come strutturare un design semplice ed efficace per WordPressSiteGround.com
 
Dalla matita all’iPad: siete davvero responsive?
Dalla matita all’iPad: siete davvero responsive?Dalla matita all’iPad: siete davvero responsive?
Dalla matita all’iPad: siete davvero responsive?nois3
 
WordPress è arrivato alla frutta?
WordPress è arrivato alla frutta?WordPress è arrivato alla frutta?
WordPress è arrivato alla frutta?Laura Lonighi
 
Lean prototyping al servizio del designer
Lean prototyping al servizio del designerLean prototyping al servizio del designer
Lean prototyping al servizio del designerLuca Scarpa
 
Lean UX Development - Approach and toolkit
Lean UX Development - Approach and toolkitLean UX Development - Approach and toolkit
Lean UX Development - Approach and toolkitCodemotion
 
Lean UX Approach for developers
Lean UX Approach for developersLean UX Approach for developers
Lean UX Approach for developersFabio Fabbrucci
 
Come Nasce Un Sito Internet?
Come Nasce Un Sito Internet?Come Nasce Un Sito Internet?
Come Nasce Un Sito Internet?Davide Schioppa
 
Tool di ranking schedulazione automatica dei report ed invio e mail con wm
Tool di ranking schedulazione automatica dei report ed invio e mail con wmTool di ranking schedulazione automatica dei report ed invio e mail con wm
Tool di ranking schedulazione automatica dei report ed invio e mail con wmBusinessFinder by Interconsult
 
User Experience: teoria e pratica - UXFUN 05/09/2015 Cagliari
User Experience: teoria e pratica - UXFUN 05/09/2015 Cagliari User Experience: teoria e pratica - UXFUN 05/09/2015 Cagliari
User Experience: teoria e pratica - UXFUN 05/09/2015 Cagliari uxfun
 
Dml cro fundamentals-2014
Dml cro fundamentals-2014Dml cro fundamentals-2014
Dml cro fundamentals-2014DML Srl
 
UI/UX l' approccio giusto ad un progetto.
UI/UX l' approccio giusto ad un progetto.UI/UX l' approccio giusto ad un progetto.
UI/UX l' approccio giusto ad un progetto.Michele Riccio
 
Realizzazione sito web professionale e economico a Bologna
Realizzazione sito web professionale e economico a BolognaRealizzazione sito web professionale e economico a Bologna
Realizzazione sito web professionale e economico a BolognaWeb2Lab Studio
 
Creare app senza programmare
Creare app senza programmareCreare app senza programmare
Creare app senza programmareTommaso Tosi
 
Design & User Experience
Design & User ExperienceDesign & User Experience
Design & User ExperienceChiara Danese
 
Tool di ranking schedulazione automatica dei report ed invio email
Tool di ranking schedulazione automatica dei report ed invio emailTool di ranking schedulazione automatica dei report ed invio email
Tool di ranking schedulazione automatica dei report ed invio emailClaudio Fiorentino
 
Landing Page: la ricetta perfetta
Landing Page: la ricetta perfettaLanding Page: la ricetta perfetta
Landing Page: la ricetta perfettaAngelo Calabrò
 

Similar to Sketching · Struttura pagina (20)

Agile Experience Design & Development - IAD 2012
Agile Experience Design & Development - IAD 2012Agile Experience Design & Development - IAD 2012
Agile Experience Design & Development - IAD 2012
 
Come strutturare un design semplice ed efficace per WordPress
Come strutturare un design semplice ed efficace per WordPressCome strutturare un design semplice ed efficace per WordPress
Come strutturare un design semplice ed efficace per WordPress
 
Dalla matita all’iPad: siete davvero responsive?
Dalla matita all’iPad: siete davvero responsive?Dalla matita all’iPad: siete davvero responsive?
Dalla matita all’iPad: siete davvero responsive?
 
WordPress è arrivato alla frutta?
WordPress è arrivato alla frutta?WordPress è arrivato alla frutta?
WordPress è arrivato alla frutta?
 
Lean prototyping al servizio del designer
Lean prototyping al servizio del designerLean prototyping al servizio del designer
Lean prototyping al servizio del designer
 
MOOM_teaser
MOOM_teaserMOOM_teaser
MOOM_teaser
 
Lean UX Development - Approach and toolkit
Lean UX Development - Approach and toolkitLean UX Development - Approach and toolkit
Lean UX Development - Approach and toolkit
 
Lean UX Approach for developers
Lean UX Approach for developersLean UX Approach for developers
Lean UX Approach for developers
 
Come Nasce Un Sito Internet?
Come Nasce Un Sito Internet?Come Nasce Un Sito Internet?
Come Nasce Un Sito Internet?
 
Tool di ranking schedulazione automatica dei report ed invio e mail con wm
Tool di ranking schedulazione automatica dei report ed invio e mail con wmTool di ranking schedulazione automatica dei report ed invio e mail con wm
Tool di ranking schedulazione automatica dei report ed invio e mail con wm
 
User Experience: teoria e pratica - UXFUN 05/09/2015 Cagliari
User Experience: teoria e pratica - UXFUN 05/09/2015 Cagliari User Experience: teoria e pratica - UXFUN 05/09/2015 Cagliari
User Experience: teoria e pratica - UXFUN 05/09/2015 Cagliari
 
Dml cro fundamentals-2014
Dml cro fundamentals-2014Dml cro fundamentals-2014
Dml cro fundamentals-2014
 
UI/UX l' approccio giusto ad un progetto.
UI/UX l' approccio giusto ad un progetto.UI/UX l' approccio giusto ad un progetto.
UI/UX l' approccio giusto ad un progetto.
 
Realizzazione sito web professionale e economico a Bologna
Realizzazione sito web professionale e economico a BolognaRealizzazione sito web professionale e economico a Bologna
Realizzazione sito web professionale e economico a Bologna
 
Creare app senza programmare
Creare app senza programmareCreare app senza programmare
Creare app senza programmare
 
Design & User Experience
Design & User ExperienceDesign & User Experience
Design & User Experience
 
Exposure
ExposureExposure
Exposure
 
Tool di ranking schedulazione automatica dei report ed invio email
Tool di ranking schedulazione automatica dei report ed invio emailTool di ranking schedulazione automatica dei report ed invio email
Tool di ranking schedulazione automatica dei report ed invio email
 
Video marketing
Video marketingVideo marketing
Video marketing
 
Landing Page: la ricetta perfetta
Landing Page: la ricetta perfettaLanding Page: la ricetta perfetta
Landing Page: la ricetta perfetta
 

Sketching · Struttura pagina

  • 2. Quattro pilastri da memorizzare Vision Obiettivo Bisogno Perché
  • 3. Promemoria · Tutto si parte dallo sketching
  • 4. NO SI Promemoria · Vogliamo qualcosa di veloce
  • 5. Promemoria · Errore comune Non si tratta di creare qualcosa di bello bensì qualcosa di innocente e veloce per arrivare subito al punto che ci serve.
  • 6. Promemoria Voglio creare una landing per il mio progetto, prodotto o azienda…
  • 10. Lo sketching è vitale per eliminare tutto ciò che non serve e esiste soprattutto per evitare la confusione in fase di progettazione. Sicuramente ancora lo strumento più utilizzato al mondo! Promemoria · Tutto si parte dallo sketching
  • 11. Promemoria · Analisi e investigazione · Prima noi / cliente, dopo gli altri Quello che vogliamo che l’utente ottenga da noi, solo dipende da noi.
  • 12. La prima domanda giusta da porsi non è cosa deve fare l’utente nella nostra piattaforma bensì come o perché arriva l’utente a noi e cosa vogliamo che lui faccia u ottenga dalla nostra piattaforma. Analisi e investigazione · Fai le domande giuste
  • 13. … Social, radio, tv… Come arriva l’utente a noi? Marketing? A & I · Possibili scenari Ricercatori? Pasa parola? KeyWords, SEO… Amici, Concorrenza… Sarà tramite Sarà tramite Sarà tramite Come? Come? Come? Cosa vogliamo che faccia? … Cosa vogliamo che veda? … Cosa vogliamo che pensi? Può raggiungere facilmente l’obiettivo? Può raggiungere facilmente l’obiettivo? È chiaro quello che deve fare?
  • 14. Perché ho messo questo e con quale finalità precisa? Il menù ha tutte le voci giuste o sono di troppo? La sezione principale è veramente necessaria? C'è una guida / video rapido di cosa fa? Promemoria · Fai le domande giuste
  • 15. L’utente vuole Noi vogliamo… Trasformare “fargli decidere” quello che può fare in PERCHÉ
  • 16. La UX è anche la conseguenza di ciò che NOI vogliamo che l’utente faccia. Il “come” formerà parte dell’apparenza in forma di “esperienza”. Promemoria
  • 17. Scelta pagina da dove partire VOBP Vision Obiettivo Bisogno Perché Struttura sequenziale da maggiore a minore di quello che noi vogliamo che l’utente faccia. Molto importante Importante
  • 18. Servizio Servizio 1 Servizio 2 Servizio 3 Servizio 4 Servizio 5 Servizio 6 Dettaglio servizio Home Form Scelta pagina da dove partire · Diagramma della Home Questo VS }
  • 19. Scelta pagina da dove partire · Diagrama Home Servizio 1 Breve dettaglio Servizio 2 Breve dettaglio Servizio 3 Breve dettaglio Servizio 4 Breve dettaglio Servizio 5 Breve dettaglio Servizio 6 Breve dettaglio Dettaglio servizio Form Vantaggio 1 Descrizione Vantaggio 2 Descrizione Video Claim / Imatto / CTA DA EVITARE
  • 20. Da evitare l’effetto revista / Copertine
  • 21. L’utente già sa quello che vuole e sa dove andare e cosa fare... Da evitare assolutamente pensare in maniera superficiale Perché
  • 22. L’utente non ha nessuna predisposizione. Nessuna veramente!
  • 23. L’utente naviga in maniera completamente disordinata…
  • 26. Ingaggiare, sedurre e motivare Pocca info ma diretta “Less is More” Informazione importante sopra Inserire solo quello che è necessario Informazione comprensibile
  • 27. Pocca info ma diretta “Less is More” Informazione importante sopra Inserire solo quello che è necessario Informazione comprensibile Quale di queste voci non è giusta e perché?
  • 28. Ingaggiare, sedurre e motivare Pocca info ma diretta “Less is More” Informazione importante sopra Inserire solo quello che è necessario Informazione comprensibile
  • 29. Sopra o sotto non ha importanza, quello che è veramente importante è se l’utente fa quello che noi vogliamo. Ingaggiare, sedurre e motivare
  • 30. L’utente vuole Noi vogliamo… Trasformare “fargli decidere” quello che può fare in PERCHÉ