SlideShare una empresa de Scribd logo
1 de 126
Descargar para leer sin conexión
Visualising the
User Experience
Grant Robinson
Senior Interaction Designer at Xero
grant@xero.com
1.
2.
3.
Let’s talk about...
Rapid prototyping
Visualising the UX with screenflows
Movement and transitions
Rapidprototyping
Is this rapid prototyping?
Is this rapid prototyping? Nope!
What is rapid prototyping?
• User-centered design methodology
• For designing, communicating and evaluating
user interfaces
• Getting feedback as early as possible
• Fast
Prototyping life-cycle
Prototyping life-cycle
The more cycles the better
release early, release often
Agile development mantra:
fail early, fail often
Agile design mantra:
"If you’re not failing now and again, it’s a sure sign
you’re not doing anything very innovative."
Woody Allen
1. Fellow designers
2. Project team
3. Wider team
4. Users
5. Your mum
No designer is an island
Common techniques
• Paper prototyping
• Wireframes and page schematics
• HTML wireframes
• Interactive prototypes
Paper prototypes...
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Paper prototypes
Love:
• Quick & dirty
• No software needed
• Very inclusive
Hate:
• Not quick enough
• Too dirty (lack context & scale)
• Hard to share amongst team
• Still needs a separate documentation step
Wireframes & page schematics...
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
http://gapingvoid.com/2007/05/15/random-thought/
Wireframes
Love:
• Good for defining content
• Good for documenting screens
Hate:
• Bad at showing interactivity / flow
• Can’t really use them for testing
• Slow. Too much time spent describing.
HTML wireframes...
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
• Better success rate
• Much faster
• Less confusion
Visualising the User Experience
HTML wireframes
Love:
• Can show interactivity / flow
• Good for simple interaction (links, buttons etc)
• Experienced in the browser (correct context & scale)
Hate:
• HTML, CSS (and JS) knowledge necessary
• Time wasted on hacking layout & advanced functionality
• Design only what you can build
• Can’t throw away, but should
Other interactive prototypes...
Axure(www.axure.com)
Axure(www.axure.com)
SketchFlow(www.microsoft.com/expression)
Visualising the User Experience
Other interactive prototypes
Love:
• Good for testing moderately complex interactions
• Some support collecting feedback
• Some can generate specs
Hate:
• Difficult to get custom interactions working
• Can require expertise in proprietary languages
• Often not cross-platform (no love for Mac users)
• Often low-fidelity only
• Make me think like a developer, not a designer
Choosing a prototype technique
What a dilemma!
Visualising the UX
with screenflows
http://gapingvoid.com/2007/05/15/random-thought/
So how do we describe what users do?
Visualise the experience...
• Show every step to complete a task
• Show every click
• Preview the experience - see and feel how
everything flows together
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
It’s like stop motion
From low to high fidelity
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
• 32 iterations
• 5 released
Using Flash as a design tool
{eh, what?}
Flash: Not just a development tool
Flash: Not just for video
Flash: History in drawing & animation
FutureSplash Animator
FutureSplash Animator
Anatomy of a screenflow
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Screenflows
• Perfect fit for agile teams
• Very effective communication tool
• Easy to evaluate
• Ideal for explaining changes over time
• Easy to share. Experienced in the browser.
• Obvious focus & limits
• Significantly reduces documentation
• Support low to high fidelity
• No coding necessary
Getting serious about
movement &transitions
How did this...
...become this?
Visualising the User Experience
...become this?
How did this...
...become this?
How did this...
...become this?
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
"Unless you can show me where you've
fleshed out the character and aspects of the
transitions at the same level of thought,
rational, exploration and fidelity as you have
the states - you're fired."
Bill Buxton
HCI pioneer
Currently Principal Researcher, Microsoft Research
Movement: the new affordance
• Use movement to orientate user and keep
them in flow
• Explain changes/transformations
• Use physical metaphors to describe the
action: zoom, slide, reveal
• Not just for fun: Research on the importance
of movement is just starting to come in
Yahoo Design Pattern Library
http://developer.yahoo.com/ypatterns/richinteraction/transition/
Yahoo Design Pattern Library
http://developer.yahoo.com/ypatterns/richinteraction/transition/
Visualising the User Experience
Transitions decreased task completion times
Reduced error rates for reading tasks
0.3 seconds - optimal transition speed
Some takeaways...
{nom nom nom}
The timeline is your friend
• Efficient digital sketching tool
• Best way to manage changes over time
• Supports low to high fidelity
• Natural starting point for exploring
movement and transitions
Visualising the experience
makes you a better designer
• Puts you in the user’s shoes
• Keeps you focussed on user flow
• Best way to communicate your designs to
team and stakeholders
• Cuts documentation in half. Less time
describing = more time designing
Please feel free to flick me an email: grant@xero.com
Any questions?
Photo credits:
http://www.flickr.com/photos/editor/3370897686/
http://www.flickr.com/photos/fuyoh/748118128/
http://www.flickr.com/photos/celloc/3145987130/
http://www.flickr.com/photos/eraphernalia_vintage/3777808203/
http://www.flickr.com/photos/rcourtie/3500123702/
http://www.flickr.com/photos/rcourtie/3500124362/
http://www.flickr.com/photos/21218849@N03/3902295700/
http://www.flickr.com/photos/21218849@N03/3901459255/
http://www.flickr.com/photos/21218849@N03/3902296466/
http://www.flickr.com/photos/21218849@N03/3901509379/

Más contenido relacionado

La actualidad más candente

User Experience Basics for Product Management
User Experience Basics for Product ManagementUser Experience Basics for Product Management
User Experience Basics for Product ManagementRoger Hart
 
TC UX Tools and Technologies
TC UX Tools and TechnologiesTC UX Tools and Technologies
TC UX Tools and TechnologiesMargaret Bossen
 
Designing a Cohesive Customer Experience
Designing a Cohesive Customer ExperienceDesigning a Cohesive Customer Experience
Designing a Cohesive Customer ExperienceUsabilitySciences
 
Creating an Online Community for User Research
Creating an Online Community for User ResearchCreating an Online Community for User Research
Creating an Online Community for User ResearchTom Vollaro
 
Why UX is Important
Why UX is Important Why UX is Important
Why UX is Important Chris Becker
 
User Experience Design Fundamentals - Part 1: Users & Goals
User Experience Design Fundamentals - Part 1: Users & GoalsUser Experience Design Fundamentals - Part 1: Users & Goals
User Experience Design Fundamentals - Part 1: Users & GoalsLaura B
 
Designing user experience (ux) for digital products
Designing user experience (ux) for digital productsDesigning user experience (ux) for digital products
Designing user experience (ux) for digital productsVijay Morampudi
 
User Experience: Research, Design, Process, and Workflow
User Experience: Research, Design, Process, and WorkflowUser Experience: Research, Design, Process, and Workflow
User Experience: Research, Design, Process, and Workflowsollitaire
 
Usability and User Experience Training Seminar
Usability and User Experience Training SeminarUsability and User Experience Training Seminar
Usability and User Experience Training Seminarlabecvar
 
Basic Principles of Interface design
Basic Principles of Interface designBasic Principles of Interface design
Basic Principles of Interface designZdeněk Lanc
 
General UX activities & process overview
General UX activities & process overviewGeneral UX activities & process overview
General UX activities & process overviewBen Melbourne
 
Massuel Louis portfolio 2017
Massuel Louis portfolio 2017Massuel Louis portfolio 2017
Massuel Louis portfolio 2017Louis Massuel
 
UXPA Lean UX Bridging the gap between UX and Developers
UXPA Lean UX Bridging the gap between UX and DevelopersUXPA Lean UX Bridging the gap between UX and Developers
UXPA Lean UX Bridging the gap between UX and DevelopersAndrew Mottaz
 

La actualidad más candente (20)

User Experience Basics for Product Management
User Experience Basics for Product ManagementUser Experience Basics for Product Management
User Experience Basics for Product Management
 
TC UX Tools and Technologies
TC UX Tools and TechnologiesTC UX Tools and Technologies
TC UX Tools and Technologies
 
Designing a Cohesive Customer Experience
Designing a Cohesive Customer ExperienceDesigning a Cohesive Customer Experience
Designing a Cohesive Customer Experience
 
Creating an Online Community for User Research
Creating an Online Community for User ResearchCreating an Online Community for User Research
Creating an Online Community for User Research
 
Why UX is Important
Why UX is Important Why UX is Important
Why UX is Important
 
Ux team organization
Ux team organizationUx team organization
Ux team organization
 
User Experience Design Fundamentals - Part 1: Users & Goals
User Experience Design Fundamentals - Part 1: Users & GoalsUser Experience Design Fundamentals - Part 1: Users & Goals
User Experience Design Fundamentals - Part 1: Users & Goals
 
Designing user experience (ux) for digital products
Designing user experience (ux) for digital productsDesigning user experience (ux) for digital products
Designing user experience (ux) for digital products
 
User Experience: Research, Design, Process, and Workflow
User Experience: Research, Design, Process, and WorkflowUser Experience: Research, Design, Process, and Workflow
User Experience: Research, Design, Process, and Workflow
 
Fundamentals of UX Design
Fundamentals of UX DesignFundamentals of UX Design
Fundamentals of UX Design
 
UX for Dummies
UX for DummiesUX for Dummies
UX for Dummies
 
Usability and User Experience Training Seminar
Usability and User Experience Training SeminarUsability and User Experience Training Seminar
Usability and User Experience Training Seminar
 
Basic Principles of Interface design
Basic Principles of Interface designBasic Principles of Interface design
Basic Principles of Interface design
 
What is UX?
What is UX?What is UX?
What is UX?
 
UX workshop
UX workshopUX workshop
UX workshop
 
General UX activities & process overview
General UX activities & process overviewGeneral UX activities & process overview
General UX activities & process overview
 
UI / UX Design Presentation
UI / UX Design PresentationUI / UX Design Presentation
UI / UX Design Presentation
 
Ux design process
Ux design processUx design process
Ux design process
 
Massuel Louis portfolio 2017
Massuel Louis portfolio 2017Massuel Louis portfolio 2017
Massuel Louis portfolio 2017
 
UXPA Lean UX Bridging the gap between UX and Developers
UXPA Lean UX Bridging the gap between UX and DevelopersUXPA Lean UX Bridging the gap between UX and Developers
UXPA Lean UX Bridging the gap between UX and Developers
 

Destacado

Rapid prototyping technology
Rapid prototyping technologyRapid prototyping technology
Rapid prototyping technologyanil mangalan
 
Best Practice For UX Deliverables - Eventhandler, London, 22 Oct 2013
Best Practice For UX Deliverables - Eventhandler, London, 22 Oct 2013Best Practice For UX Deliverables - Eventhandler, London, 22 Oct 2013
Best Practice For UX Deliverables - Eventhandler, London, 22 Oct 2013Anna Dahlström
 
UX Strategy - the secret sauce that defines the pixie dust
UX Strategy - the secret sauce that defines the pixie dustUX Strategy - the secret sauce that defines the pixie dust
UX Strategy - the secret sauce that defines the pixie dustEric Reiss
 
UX Research by Lisandra Maioli
UX Research by Lisandra MaioliUX Research by Lisandra Maioli
UX Research by Lisandra MaioliLisandra Maioli
 
AI eats UX Opening Talk 20170422
AI eats UX Opening Talk 20170422AI eats UX Opening Talk 20170422
AI eats UX Opening Talk 20170422Nozomu Tannaka
 
Digitale Transformation: Treiber des Wandels in einer exponentiellen Welt
Digitale Transformation: Treiber des Wandels in einer exponentiellen WeltDigitale Transformation: Treiber des Wandels in einer exponentiellen Welt
Digitale Transformation: Treiber des Wandels in einer exponentiellen WeltCREATIVE CONSTRUCTION HEROES GMBH
 
What mobile technology is becoming
What mobile technology is becomingWhat mobile technology is becoming
What mobile technology is becomingRaimo Van Der Klein
 
Laminated object manufacturing
Laminated object manufacturingLaminated object manufacturing
Laminated object manufacturingAnkit Raghuwanshi
 
The role of UX design in AI by Tom Woodel
The role of UX design in AI by Tom WoodelThe role of UX design in AI by Tom Woodel
The role of UX design in AI by Tom WoodelUXPA UK
 
TYPES OF RAPID PROTOTYPING - ADDITIVE PROCESS
TYPES OF RAPID PROTOTYPING - ADDITIVE PROCESSTYPES OF RAPID PROTOTYPING - ADDITIVE PROCESS
TYPES OF RAPID PROTOTYPING - ADDITIVE PROCESSNurhuda Hayati
 
Rapid Prototyping and its Applications
Rapid Prototyping and its ApplicationsRapid Prototyping and its Applications
Rapid Prototyping and its Applicationsmalikusman
 
Rapid prototyping seminar
Rapid prototyping seminarRapid prototyping seminar
Rapid prototyping seminaravwhysoserious
 
Design Thinking With Persona
Design Thinking With PersonaDesign Thinking With Persona
Design Thinking With PersonaFranki Chamaki
 
Concurrent Engineering
Concurrent EngineeringConcurrent Engineering
Concurrent Engineeringajithsrc
 

Destacado (19)

Rapid prototyping technology
Rapid prototyping technologyRapid prototyping technology
Rapid prototyping technology
 
Rapid Prototyping
Rapid PrototypingRapid Prototyping
Rapid Prototyping
 
Best Practice For UX Deliverables - Eventhandler, London, 22 Oct 2013
Best Practice For UX Deliverables - Eventhandler, London, 22 Oct 2013Best Practice For UX Deliverables - Eventhandler, London, 22 Oct 2013
Best Practice For UX Deliverables - Eventhandler, London, 22 Oct 2013
 
UX Strategy - the secret sauce that defines the pixie dust
UX Strategy - the secret sauce that defines the pixie dustUX Strategy - the secret sauce that defines the pixie dust
UX Strategy - the secret sauce that defines the pixie dust
 
UX Research by Lisandra Maioli
UX Research by Lisandra MaioliUX Research by Lisandra Maioli
UX Research by Lisandra Maioli
 
AI eats UX Opening Talk 20170422
AI eats UX Opening Talk 20170422AI eats UX Opening Talk 20170422
AI eats UX Opening Talk 20170422
 
Artificially Intelligent Designer
Artificially Intelligent DesignerArtificially Intelligent Designer
Artificially Intelligent Designer
 
Digitale Transformation: Treiber des Wandels in einer exponentiellen Welt
Digitale Transformation: Treiber des Wandels in einer exponentiellen WeltDigitale Transformation: Treiber des Wandels in einer exponentiellen Welt
Digitale Transformation: Treiber des Wandels in einer exponentiellen Welt
 
What mobile technology is becoming
What mobile technology is becomingWhat mobile technology is becoming
What mobile technology is becoming
 
Laminated object manufacturing
Laminated object manufacturingLaminated object manufacturing
Laminated object manufacturing
 
The role of UX design in AI by Tom Woodel
The role of UX design in AI by Tom WoodelThe role of UX design in AI by Tom Woodel
The role of UX design in AI by Tom Woodel
 
TYPES OF RAPID PROTOTYPING - ADDITIVE PROCESS
TYPES OF RAPID PROTOTYPING - ADDITIVE PROCESSTYPES OF RAPID PROTOTYPING - ADDITIVE PROCESS
TYPES OF RAPID PROTOTYPING - ADDITIVE PROCESS
 
Rapid Prototyping and its Applications
Rapid Prototyping and its ApplicationsRapid Prototyping and its Applications
Rapid Prototyping and its Applications
 
Rapid prototyping seminar
Rapid prototyping seminarRapid prototyping seminar
Rapid prototyping seminar
 
UX IN AN AI WORLD
UX IN AN AI WORLDUX IN AN AI WORLD
UX IN AN AI WORLD
 
Design Thinking With Persona
Design Thinking With PersonaDesign Thinking With Persona
Design Thinking With Persona
 
Concurrent Engineering
Concurrent EngineeringConcurrent Engineering
Concurrent Engineering
 
Creativity & Innovation
Creativity & InnovationCreativity & Innovation
Creativity & Innovation
 
Creativity & innovation
Creativity & innovationCreativity & innovation
Creativity & innovation
 

Visualising the User Experience