Sketching the user experience. Learning the basic of UX design and understand a new design workflow for the responsive age with a more design-to-prototype approach. Understanding the value of design prototype at different levels & stage of the design process to test and validate the user experience.
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
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
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
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
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
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
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
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/