Designing iPhone User Experience A User-Centered Approach to Sketching and Prototyping iPhone Apps.
Sketching the user experience
-
Upload
antonio-de-pasquale -
Category
Design
-
view
53.388 -
download
1
Transcript of Sketching the user experience
Sketchingthe UX Experience
Antonio De PasqualeSenior Interaction Designer at frog
@myinteraction
My name is Antonio De PasqualeI'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
Sketchingthe UX Experience
Introduction
A different design approachThe responsive ageVisualizing the UX
Design prototype
Levels of fidelityThe right toolMake 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
YesterdayDesktop 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
TodaySmart 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 workflowThings 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 workflowThings 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 functionDIETER 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 apphttps://vimeo.com/51690799
Video
Introduction
Sketching the user experience
The responsive age
Sketching the user experience
The responsive age
Same contents, different shapesWeb 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 ageWe 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 visionShaping 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
LoveQuick and dirtyEasy to doFast feedbackVery inclusive
HateNot quick enoughToo dirtyHard to shareNot self explaining
LoveDetailed and solidGood for defining content & explain behaviours
HateHard for user tesCngTo funcConal with lessexperience of the flow
The good and the bad
LoveEmoConalHigh quality feedbackTesCng dynamic behaviours
HateTime to build themSoHware knowledgeWork beJer in an advanced state
LoveTest interacCvityPerfect for tesCng process & flowExperience in contest
HateSoHware knowledgeTime for building the prototypeLimiCng 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 OftenAlways 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 OftenIt'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 testConcept 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
prototypeFull funcConal prototype
Levels of fidelityDesign prototype
The right tool
2
Give me a lever andI 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 cycleLong &
progressive
A prototype life cycleThe 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
CommunicateThat'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 youin 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 Buxton2007
Designing interactions
Bill Moggridge2007
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 wireframesare concerned
http://uxmag.com/articles/where-wireframes-are-concerned
Design beJer & fasterwith 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!