SlideShare a Scribd company logo
1 of 60
Download to read offline
Sketching
the UX Experience
Antonio De Pasquale
Senior Interaction Designer at frog
@myinteraction
My name is Antonio De Pasquale
I'm a Senior Interaction Designer at frog Milan
A little about me
I'm specialized in digital interfaces & user experience
I'm passioned about the "aesthetics" of movement
I'm from Sicily and I love the sea.
@myinteraction
Interaction Vs Visual
Concept
Design research
Benchmark
Wireframe
Information architecture
User Requirements
User testing
User experience flow
Motion prototype
Prototype
...
Concept
Visual research
Moodboard
Grid design
Iconography
Typography
UI Elements
Screen design
Motion design
Prototype
...
Most people think like this
Interaction & Visual
In reality is like this
Sketching
the UX Experience
Introduction
A different design approach
The responsive age
Visualizing the UX
Design prototype
Levels of fidelity
The right tool
Make it real!
INTRODUCTION
A different
design approach
1
Perfection is achieved, not
when there is nothing more to add,
but when there is nothing left to take away.
ANTOINE	
  DE	
  SAINT	
  EXUPÉRY
What is the User Experience?
Introduction A different design approach
Sketching the user experience
User Experience encompasses all aspects of the
end-user's interaction with the company, its
services, and its products.
Research Concept Wireframe Visual Develop User testDocument
A typical
waterfall UX design process
From concept design to the final
product on the market
Introduction A different design approach
Sketching the user experience
Waterfall model doesn’t make that much sense
in the responsive age.
That model worked 3/4 years ago when we lived
in a different context with different devices
It's over
Introduction A different design approach
Sketching the user experience
Yesterday
Desktop app, fixed grid, mobile interfaces
Introduction A different design approach
Sketching the user experience
Introduction A different design approach
Sketching the user experience
N95 first release to the market in Italy: March 2007 - 700€
http://www.youtube.com/watch?v=U-PxHUdur9Q
Introduction A different design approach
Sketching the user experience
Today
Smart Tv, Web App, Mobile, Console, Responsive design
Amazon Kindle Fire HD - 150€
http://www.youtube.com/watch?v=ryYPduoGNjc
Introduction A different design approach
Sketching the user experience
A different design workflow
Things are changing.
We need to evolve the process
Introduction A different design approach
Sketching the user experience
Wireframe Visual
Develop
User test
PrototypeSketch
Review
Research Concept
Research Concept
A different design workflow
Things are changing.
We need to evolve the process
Introduction A different design approach
Sketching the user experience
Wireframe Visual
Develop
User test
PrototypeSketch
Review
The responsive age
2
Form follows function
DIETER	
  RAMS
The responsive age
Sketching the user experience
Introduction
The responsive age
Sketching the user experience
What is the shape of digital experiences?
The evolution of technology is changing the
boundaries of design
Introduction
Clear, iphone & Mac app
https://vimeo.com/51690799
Video
Introduction
Sketching the user experience
The responsive age
Sketching the user experience
The responsive age
Same contents, different shapes
Web site, application, digital software is not anymore a static template.
It's a frame in an extended fluid experience
Introduction
Sketching the user experience
The responsive age
1920 px
1440 px
1024 px
320 px
Design for the responsive age
We need to sketch, visualize, test, prototype and understand the dynamic
behaviors on different devices with different proportions & resolutions
Our job now is to create future friendly design ecosystems
Introduction
From templates to the experience
Sketching the user experience
The responsive ageIntroduction
Consistent
Signature
Continuos
Transferable
Shareable
Augmented
Context Users
Patterns to help understand and define strategies
for the multiscreen world
Sketching the user experience
The responsive ageIntroduction
Unified design language system across
products & services
Sketching the user experience
The responsive age
Consistent
Introduction
Sketching the user experience
The responsive age
Tailored unique brand experience that makes the products
distinguishable with a consistent interaction model
Signature
Introduction
Continuos
Synchronize your data, creating a continuos
multiscreen experience
Sketching the user experience
The responsive ageIntroduction
Enable content shifting across multiple devices,
sharing screens or in case of simultaneous use
Sketching the user experience
The responsive age
Transferable
Introduction
Shareable
Allow multiple actors to have a simultaneous
interaction, or share and customize the same device
The responsive age
Sketching the user experience
Introduction
Augmented
Physical interactions go far beyond the
digital screens
The responsive age
Sketching the user experience
Introduction
Visualizing the UX
3
We like design to be visually powerful,
intellectually elegant, and above all timeless.
MASSIMO	
  VIGNELLI
Introduction Visualizing the UX
Sketching the user experience
Setting a vision
Shaping an idea is a continuous process that needs
many iterations cycles for making it in focus
Introduction Visualizing the UX
Sketching the user experience
Analyze problems & constrains. Refine ideas and
explore all the details to make it possible
Explore the details
Introduction Visualizing the UX
Sketching the user experience
Visualize & prototype your concept. Get the feel of
the real impact in a physical way
Feel the experience
Paper prototyping
Interactive wireframe
Motion wireframe
HTML Design
Our tools
How we can sketch & prototype
the user experience?
Introduction Visualizing the UX
Sketching the user experience
Introduction Visualizing the UX
Sketching the user experience
Low fidelity / No interactive
Paper prototyping
Introduction Visualizing the UX
Sketching the user experience
Low fidelity / Low interaction
Introduction Visualizing the UX
Sketching the user experience
Introduction Visualizing the UX
Sketching the user experience
Medium fidelity / Low interaction
Interactive wireframes
Interactive wireframes
Introduction Visualizing the UX
Sketching the user experience
Medium fidelity / Medium interaction
Motion prototype
Introduction Visualizing the UX
Sketching the user experience
Medium fidelity / Low interaction
Keynote Animated Prototype
http://www.lukew.com/ff/entry.asp?1171
Introduction Visualizing the UX
Sketching the user experience
High fidelity / Low interaction
Motion prototype
Redefining Android (Frog)
http://www.frogdesign.com/work/sharp-aquos.html - https://vimeo.com/43224490
HTML Design
Introduction Visualizing the UX
Sketching the user experience
High fidelity / High interaction
Paper prototyping Interactive wireframes Motion wireframes HTML Design
Introduction Visualizing the UX
Sketching the user experience
Love
Quick	
  and	
  dirty
Easy	
  to	
  do
Fast	
  feedback
Very	
  inclusive	
  
Hate
Not	
  quick	
  enough
Too	
  dirty
Hard	
  to	
  share
Not	
  self	
  explaining
Love
Detailed	
  and	
  solid
Good	
  for	
  defining	
  
content	
  &	
  explain	
  
behaviours
Hate
Hard	
  for	
  user	
  tesCng
To	
  funcConal	
  with	
  less
experience	
  of	
  the	
  flow
The good and the bad
Love
EmoConal
High	
  quality	
  feedback
TesCng	
  dynamic	
  
behaviours
Hate
Time	
  to	
  build	
  them
SoHware	
  knowledge
Work	
  beJer	
  in	
  an	
  
advanced	
  state
Love
Test	
  interacCvity
Perfect	
  for	
  tesCng	
  
process	
  &	
  flow
Experience	
  in	
  contest
Hate
SoHware	
  knowledge
Time	
  for	
  building	
  the	
  
prototype
LimiCng	
  the	
  design	
  
process
DESIGN PROTOTYPE
Levels of fidelity
1
It’s the little details that are vital.
Little things make big things happen.
COACH	
  JOHN	
  WOODEN
Levels of fidelity
Sketching the user experience
It's a User centered design methodology for designing,
communicating ad evaluating user interfaces but also for getting
feedback as soon as possible and validating the interaction model
What is Rapid prototyping?
Design prototype
Sketching the user experience
Release Early, Release Often
Always test, to verify all the different aspects of your design
with different levels of fidelity according to the stage of the project
Levels of fidelityDesign prototype
Sketching the user experience
Fail Early, Fail Often
It's not important to close everything for testing our design concept.
Every stage is a possible entry point to verify, discuss, iterate, design.
Levels of fidelityDesign prototype
High fidelityLow fidelity
User test
Concept
evaluation
Sketching the user experience
There is no such thing as high or low fidelity,
only appropriate fidelity that allows you to achieve
the goals you've set for doing a prototype
Prototype archetype Vs Fidelity
	
  Hand	
  Sketch Linked	
  pdf
InteracCve	
  
Wireframe	
  
Video	
  simulaCon
Semi	
  funcConal	
  
prototype
Full	
  funcConal	
  
prototype
Levels of fidelityDesign prototype
The right tool
2
Give me a lever and
I can move the world.
ARCHIMEDE	
  DI	
  SIRACUSA
FunctionalExperience
TechnologistDesigner
What is the perfect tool?
It depends.
Depends on what you have to test, what is your audience, the stage
of the project and also your personal skills
?
Sketching the user experience
The right toolDesign prototype
Short cycle
Long &
progressive
A prototype life cycle
The life of a prototype is directly connected to the problem it has to solve
Design
Evaluate
CommunicateIterate
More cycles, more refinements: better results!
The right toolDesign prototype
Sketching the user experience
What is relevant is
Communicate
That's our job
The right toolDesign prototype
Sketching the user experience
FunctionalExperience
HTML/CodeAdobe	
  edgeFireworksAGer	
  effectsKeynotePaper	
  prototype Proto	
  UIInteracNve	
  pdf
The right tool is the one that helps you
in communicate your concept
We need to explain complex problems & big project in a simple way
and test if they're clear and meaningful to people.
There is no perfect tool
The right toolDesign prototype
Sketching the user experience
Make it real
3
What would life be if we had no
courage to attempt anything?
VINCENT	
  VAN	
  GOGH
FURTHER READING
Further readingSketching the user experience
Sketching the user experience
Sketching User Experiences: Getting the Design
Right and the Right Design
Bill Buxton
2007
Designing interactions
Bill Moggridge
2007
Further readingSketching the user experience
Sketching the user experience
Prototype toolsUX Culture Design Workflow Wireframing
Responsive	
  design	
  
workflow	
  on	
  mulCple	
  
touchpoints
http://viljamis.com/blog/2012/
responsive-workflow/
Reference & Insights
Design	
  process	
  
in	
  the	
  responsive	
  age
http://www.slideshare.net/
pkattera/design-process-for-
responsive-web-design
Does	
  form	
  follow	
  
funcCon?
http://www.smashingmagazine.com/
2010/03/23/does-form-follow-
function/
Embracing	
  
the	
  UX	
  Spectrum
http://uxmag.com/articles/
embracing-the-ux-spectrum
Visualizing	
  
the	
  user	
  experience
http://www.slideshare.net/
grantrobinson/visualising-the-
user-experience-2261349
Where	
  wireframes
are	
  concerned
http://uxmag.com/articles/where-
wireframes-are-concerned
Design	
  beJer	
  &	
  faster
with	
  rapid	
  prototyping
http://www.smashingmagazine.com/
2010/06/16/design-better-faster-with-
rapid-prototyping/
Proto.io	
  
http://proto.io/
Paper	
  stencil	
  &	
  prototype	
  
http://www.uistencils.com/
Thanks!
Follow me on twitter @myinteraction
to continue the discussion!

More Related Content

More from Antonio De Pasquale

User Experience & Mobile Innovation Strategy
User Experience & Mobile Innovation StrategyUser Experience & Mobile Innovation Strategy
User Experience & Mobile Innovation StrategyAntonio De Pasquale
 
Design in motion. The new frontier of interaction design
Design in motion. The new frontier of interaction designDesign in motion. The new frontier of interaction design
Design in motion. The new frontier of interaction designAntonio De Pasquale
 
Motion & Gesture Interactions in the digital age
Motion & Gesture Interactions in the digital ageMotion & Gesture Interactions in the digital age
Motion & Gesture Interactions in the digital ageAntonio De Pasquale
 

More from Antonio De Pasquale (6)

Fading Money
Fading MoneyFading Money
Fading Money
 
The age of Augmented Humanity
The age of Augmented Humanity The age of Augmented Humanity
The age of Augmented Humanity
 
Responsive Webdesign
Responsive WebdesignResponsive Webdesign
Responsive Webdesign
 
User Experience & Mobile Innovation Strategy
User Experience & Mobile Innovation StrategyUser Experience & Mobile Innovation Strategy
User Experience & Mobile Innovation Strategy
 
Design in motion. The new frontier of interaction design
Design in motion. The new frontier of interaction designDesign in motion. The new frontier of interaction design
Design in motion. The new frontier of interaction design
 
Motion & Gesture Interactions in the digital age
Motion & Gesture Interactions in the digital ageMotion & Gesture Interactions in the digital age
Motion & Gesture Interactions in the digital age
 

Recently uploaded

Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdfINTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdfphriedaoyigada
 
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...Yantram Animation Studio Corporation
 
Materi dasar prototype dan figma .pdf
Materi dasar prototype dan figma    .pdfMateri dasar prototype dan figma    .pdf
Materi dasar prototype dan figma .pdfardanaadam1
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...Pranav Subramanian
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Central-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposesCentral-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposesmilalabial
 

Recently uploaded (20)

Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdfINTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
 
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
 
Materi dasar prototype dan figma .pdf
Materi dasar prototype dan figma    .pdfMateri dasar prototype dan figma    .pdf
Materi dasar prototype dan figma .pdf
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Central-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposesCentral-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposes
 

Sketching the user experience

  • 1. Sketching the UX Experience Antonio De Pasquale Senior Interaction Designer at frog @myinteraction
  • 2. My name is Antonio De Pasquale I'm a Senior Interaction Designer at frog Milan A little about me I'm specialized in digital interfaces & user experience I'm passioned about the "aesthetics" of movement I'm from Sicily and I love the sea. @myinteraction
  • 3. Interaction Vs Visual Concept Design research Benchmark Wireframe Information architecture User Requirements User testing User experience flow Motion prototype Prototype ... Concept Visual research Moodboard Grid design Iconography Typography UI Elements Screen design Motion design Prototype ... Most people think like this
  • 4. Interaction & Visual In reality is like this
  • 5. Sketching the UX Experience Introduction A different design approach The responsive age Visualizing the UX Design prototype Levels of fidelity The right tool Make it real!
  • 7. A different design approach 1 Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away. ANTOINE  DE  SAINT  EXUPÉRY
  • 8. What is the User Experience? Introduction A different design approach Sketching the user experience User Experience encompasses all aspects of the end-user's interaction with the company, its services, and its products.
  • 9. Research Concept Wireframe Visual Develop User testDocument A typical waterfall UX design process From concept design to the final product on the market Introduction A different design approach Sketching the user experience
  • 10. Waterfall model doesn’t make that much sense in the responsive age. That model worked 3/4 years ago when we lived in a different context with different devices It's over Introduction A different design approach Sketching the user experience
  • 11. Yesterday Desktop app, fixed grid, mobile interfaces Introduction A different design approach Sketching the user experience
  • 12. Introduction A different design approach Sketching the user experience N95 first release to the market in Italy: March 2007 - 700€ http://www.youtube.com/watch?v=U-PxHUdur9Q
  • 13. Introduction A different design approach Sketching the user experience Today Smart Tv, Web App, Mobile, Console, Responsive design
  • 14. Amazon Kindle Fire HD - 150€ http://www.youtube.com/watch?v=ryYPduoGNjc Introduction A different design approach Sketching the user experience
  • 15. A different design workflow Things are changing. We need to evolve the process Introduction A different design approach Sketching the user experience Wireframe Visual Develop User test PrototypeSketch Review Research Concept
  • 16. Research Concept A different design workflow Things are changing. We need to evolve the process Introduction A different design approach Sketching the user experience Wireframe Visual Develop User test PrototypeSketch Review
  • 17. The responsive age 2 Form follows function DIETER  RAMS
  • 18. The responsive age Sketching the user experience Introduction
  • 19. The responsive age Sketching the user experience What is the shape of digital experiences? The evolution of technology is changing the boundaries of design Introduction
  • 20. Clear, iphone & Mac app https://vimeo.com/51690799 Video Introduction Sketching the user experience The responsive age
  • 21. Sketching the user experience The responsive age Same contents, different shapes Web site, application, digital software is not anymore a static template. It's a frame in an extended fluid experience Introduction
  • 22. Sketching the user experience The responsive age 1920 px 1440 px 1024 px 320 px Design for the responsive age We need to sketch, visualize, test, prototype and understand the dynamic behaviors on different devices with different proportions & resolutions Our job now is to create future friendly design ecosystems Introduction
  • 23. From templates to the experience Sketching the user experience The responsive ageIntroduction
  • 24. Consistent Signature Continuos Transferable Shareable Augmented Context Users Patterns to help understand and define strategies for the multiscreen world Sketching the user experience The responsive ageIntroduction
  • 25. Unified design language system across products & services Sketching the user experience The responsive age Consistent Introduction
  • 26. Sketching the user experience The responsive age Tailored unique brand experience that makes the products distinguishable with a consistent interaction model Signature Introduction
  • 27. Continuos Synchronize your data, creating a continuos multiscreen experience Sketching the user experience The responsive ageIntroduction
  • 28. Enable content shifting across multiple devices, sharing screens or in case of simultaneous use Sketching the user experience The responsive age Transferable Introduction
  • 29. Shareable Allow multiple actors to have a simultaneous interaction, or share and customize the same device The responsive age Sketching the user experience Introduction
  • 30. Augmented Physical interactions go far beyond the digital screens The responsive age Sketching the user experience Introduction
  • 31. Visualizing the UX 3 We like design to be visually powerful, intellectually elegant, and above all timeless. MASSIMO  VIGNELLI
  • 32. Introduction Visualizing the UX Sketching the user experience Setting a vision Shaping an idea is a continuous process that needs many iterations cycles for making it in focus
  • 33. Introduction Visualizing the UX Sketching the user experience Analyze problems & constrains. Refine ideas and explore all the details to make it possible Explore the details
  • 34. Introduction Visualizing the UX Sketching the user experience Visualize & prototype your concept. Get the feel of the real impact in a physical way Feel the experience
  • 35. Paper prototyping Interactive wireframe Motion wireframe HTML Design Our tools How we can sketch & prototype the user experience? Introduction Visualizing the UX Sketching the user experience
  • 36. Introduction Visualizing the UX Sketching the user experience Low fidelity / No interactive
  • 37. Paper prototyping Introduction Visualizing the UX Sketching the user experience Low fidelity / Low interaction
  • 38. Introduction Visualizing the UX Sketching the user experience
  • 39. Introduction Visualizing the UX Sketching the user experience Medium fidelity / Low interaction Interactive wireframes
  • 40. Interactive wireframes Introduction Visualizing the UX Sketching the user experience Medium fidelity / Medium interaction
  • 41. Motion prototype Introduction Visualizing the UX Sketching the user experience Medium fidelity / Low interaction Keynote Animated Prototype http://www.lukew.com/ff/entry.asp?1171
  • 42. Introduction Visualizing the UX Sketching the user experience High fidelity / Low interaction Motion prototype Redefining Android (Frog) http://www.frogdesign.com/work/sharp-aquos.html - https://vimeo.com/43224490
  • 43. HTML Design Introduction Visualizing the UX Sketching the user experience High fidelity / High interaction
  • 44. Paper prototyping Interactive wireframes Motion wireframes HTML Design Introduction Visualizing the UX Sketching the user experience Love Quick  and  dirty Easy  to  do Fast  feedback Very  inclusive   Hate Not  quick  enough Too  dirty Hard  to  share Not  self  explaining Love Detailed  and  solid Good  for  defining   content  &  explain   behaviours Hate Hard  for  user  tesCng To  funcConal  with  less experience  of  the  flow The good and the bad Love EmoConal High  quality  feedback TesCng  dynamic   behaviours Hate Time  to  build  them SoHware  knowledge Work  beJer  in  an   advanced  state Love Test  interacCvity Perfect  for  tesCng   process  &  flow Experience  in  contest Hate SoHware  knowledge Time  for  building  the   prototype LimiCng  the  design   process
  • 46. Levels of fidelity 1 It’s the little details that are vital. Little things make big things happen. COACH  JOHN  WOODEN
  • 47. Levels of fidelity Sketching the user experience It's a User centered design methodology for designing, communicating ad evaluating user interfaces but also for getting feedback as soon as possible and validating the interaction model What is Rapid prototyping? Design prototype
  • 48. Sketching the user experience Release Early, Release Often Always test, to verify all the different aspects of your design with different levels of fidelity according to the stage of the project Levels of fidelityDesign prototype
  • 49. Sketching the user experience Fail Early, Fail Often It's not important to close everything for testing our design concept. Every stage is a possible entry point to verify, discuss, iterate, design. Levels of fidelityDesign prototype
  • 50. High fidelityLow fidelity User test Concept evaluation Sketching the user experience There is no such thing as high or low fidelity, only appropriate fidelity that allows you to achieve the goals you've set for doing a prototype Prototype archetype Vs Fidelity  Hand  Sketch Linked  pdf InteracCve   Wireframe   Video  simulaCon Semi  funcConal   prototype Full  funcConal   prototype Levels of fidelityDesign prototype
  • 51. The right tool 2 Give me a lever and I can move the world. ARCHIMEDE  DI  SIRACUSA
  • 52. FunctionalExperience TechnologistDesigner What is the perfect tool? It depends. Depends on what you have to test, what is your audience, the stage of the project and also your personal skills ? Sketching the user experience The right toolDesign prototype
  • 53. Short cycle Long & progressive A prototype life cycle The life of a prototype is directly connected to the problem it has to solve Design Evaluate CommunicateIterate More cycles, more refinements: better results! The right toolDesign prototype Sketching the user experience
  • 54. What is relevant is Communicate That's our job The right toolDesign prototype Sketching the user experience
  • 55. FunctionalExperience HTML/CodeAdobe  edgeFireworksAGer  effectsKeynotePaper  prototype Proto  UIInteracNve  pdf The right tool is the one that helps you in communicate your concept We need to explain complex problems & big project in a simple way and test if they're clear and meaningful to people. There is no perfect tool The right toolDesign prototype Sketching the user experience
  • 56. Make it real 3 What would life be if we had no courage to attempt anything? VINCENT  VAN  GOGH
  • 58. Further readingSketching the user experience Sketching the user experience Sketching User Experiences: Getting the Design Right and the Right Design Bill Buxton 2007 Designing interactions Bill Moggridge 2007
  • 59. Further readingSketching the user experience Sketching the user experience Prototype toolsUX Culture Design Workflow Wireframing Responsive  design   workflow  on  mulCple   touchpoints http://viljamis.com/blog/2012/ responsive-workflow/ Reference & Insights Design  process   in  the  responsive  age http://www.slideshare.net/ pkattera/design-process-for- responsive-web-design Does  form  follow   funcCon? http://www.smashingmagazine.com/ 2010/03/23/does-form-follow- function/ Embracing   the  UX  Spectrum http://uxmag.com/articles/ embracing-the-ux-spectrum Visualizing   the  user  experience http://www.slideshare.net/ grantrobinson/visualising-the- user-experience-2261349 Where  wireframes are  concerned http://uxmag.com/articles/where- wireframes-are-concerned Design  beJer  &  faster with  rapid  prototyping http://www.smashingmagazine.com/ 2010/06/16/design-better-faster-with- rapid-prototyping/ Proto.io   http://proto.io/ Paper  stencil  &  prototype   http://www.uistencils.com/
  • 60. Thanks! Follow me on twitter @myinteraction to continue the discussion!