Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Visualising the
User Experience
Grant Robinson
Senior Interaction Designer at Xero
grant@xero.com
Let’s talk about...
 1. Rapid prototyping
 2. Visualising the UX with screenflows
 3. Movement and transitions
Rapid prototyping
Is this rapid prototyping?
Is this rapid prototyping? Nope!
What is rapid prototyping?
• User-centered design methodology
• For designing, communicating and evaluating
  user interfa...
Prototyping life-cycle
Prototyping life-cycle




 The more cycles the better
Agile development mantra:

release early, release often
Agile design mantra:

fail early, fail often
"If you’re not failing now and again, it’s a sure sign
you’re not doing anyth...
No designer is an island
1. Fellow designers
2. Project team
3. Wider team
4. Users
5. Your mum
Common techniques
 • Paper prototyping
 • Wireframes and page schematics
 • HTML wireframes
 • Interactive prototypes
Paper prototypes...
Paper prototypes
Love:
• Quick & dirty
• No software needed
• Very inclusive

Hate:
• Not quick enough
• Too dirty (lack c...
Wireframes & page schematics...
http://gapingvoid.com/2007/05/15/random-thought/
Wireframes
Love:
• Good for defining content
• Good for documenting screens

Hate:
• Bad at showing interactivity / flow
• C...
HTML wireframes...
• Better success rate
• Much faster
• Less confusion
HTML wireframes
Love:
• Can show interactivity / flow
• Good for simple interaction (links, buttons etc)
• Experienced in t...
Other interactive prototypes...
Axure (www.axure.com)
Axure (www.axure.com)
SketchFlow (www.microsoft.com/expression)
Other interactive prototypes
Love:
• Good for testing moderately complex interactions
• Some support collecting feedback
•...
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
...
It’s like stop motion
From low to high fidelity
• 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
Screenflows
• Perfect fit for agile teams
• Very effective communication tool
• Easy to evaluate
• Ideal for explaining cha...
Getting serious about
movement & transitions
How did this...
...become this?
...become this?
How did this...
...become this?
How did this...
...become this?
"Unless you can show me where you've
fleshed out the character and aspects of the
transitions at the same level of thought,...
Movement: the new affordance
  • Use movement to orientate user and keep
    them in flow

  • Explain changes/transformat...
Yahoo Design Pattern Library
http://developer.yahoo.com/ypatterns/richinteraction/transition/
Yahoo Design Pattern Library
http://developer.yahoo.com/ypatterns/richinteraction/transition/
Transitions decreased task completion times
   Reduced error rates for reading tasks
   0.3 seconds - optimal transition s...
Some takeaways...
         {nom nom nom}
The timeline is your friend
   • Efficient digital sketching tool
   • Best way to manage changes over time
   • Supports ...
Visualising the experience
makes you a better designer
   • Puts you in the user’s shoes
   • Keeps you focussed on user f...
Any questions?
Please feel free to flick me an email: grant@xero.com



Photo credits:
http://www.flickr.com/photos/editor/3...
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
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
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
Visualising the User Experience
Visualising the User Experience
Visualising the User Experience
Upcoming SlideShare
Loading in …5
×

of

Visualising the User Experience Slide 1 Visualising the User Experience Slide 2 Visualising the User Experience Slide 3 Visualising the User Experience Slide 4 Visualising the User Experience Slide 5 Visualising the User Experience Slide 6 Visualising the User Experience Slide 7 Visualising the User Experience Slide 8 Visualising the User Experience Slide 9 Visualising the User Experience Slide 10 Visualising the User Experience Slide 11 Visualising the User Experience Slide 12 Visualising the User Experience Slide 13 Visualising the User Experience Slide 14 Visualising the User Experience Slide 15 Visualising the User Experience Slide 16 Visualising the User Experience Slide 17 Visualising the User Experience Slide 18 Visualising the User Experience Slide 19 Visualising the User Experience Slide 20 Visualising the User Experience Slide 21 Visualising the User Experience Slide 22 Visualising the User Experience Slide 23 Visualising the User Experience Slide 24 Visualising the User Experience Slide 25 Visualising the User Experience Slide 26 Visualising the User Experience Slide 27 Visualising the User Experience Slide 28 Visualising the User Experience Slide 29 Visualising the User Experience Slide 30 Visualising the User Experience Slide 31 Visualising the User Experience Slide 32 Visualising the User Experience Slide 33 Visualising the User Experience Slide 34 Visualising the User Experience Slide 35 Visualising the User Experience Slide 36 Visualising the User Experience Slide 37 Visualising the User Experience Slide 38 Visualising the User Experience Slide 39 Visualising the User Experience Slide 40 Visualising the User Experience Slide 41 Visualising the User Experience Slide 42 Visualising the User Experience Slide 43 Visualising the User Experience Slide 44 Visualising the User Experience Slide 45 Visualising the User Experience Slide 46 Visualising the User Experience Slide 47 Visualising the User Experience Slide 48 Visualising the User Experience Slide 49 Visualising the User Experience Slide 50 Visualising the User Experience Slide 51 Visualising the User Experience Slide 52 Visualising the User Experience Slide 53 Visualising the User Experience Slide 54 Visualising the User Experience Slide 55 Visualising the User Experience Slide 56 Visualising the User Experience Slide 57 Visualising the User Experience Slide 58 Visualising the User Experience Slide 59 Visualising the User Experience Slide 60 Visualising the User Experience Slide 61 Visualising the User Experience Slide 62 Visualising the User Experience Slide 63 Visualising the User Experience Slide 64 Visualising the User Experience Slide 65 Visualising the User Experience Slide 66 Visualising the User Experience Slide 67 Visualising the User Experience Slide 68 Visualising the User Experience Slide 69 Visualising the User Experience Slide 70 Visualising the User Experience Slide 71 Visualising the User Experience Slide 72 Visualising the User Experience Slide 73 Visualising the User Experience Slide 74 Visualising the User Experience Slide 75 Visualising the User Experience Slide 76 Visualising the User Experience Slide 77 Visualising the User Experience Slide 78 Visualising the User Experience Slide 79 Visualising the User Experience Slide 80 Visualising the User Experience Slide 81 Visualising the User Experience Slide 82 Visualising the User Experience Slide 83 Visualising the User Experience Slide 84 Visualising the User Experience Slide 85 Visualising the User Experience Slide 86 Visualising the User Experience Slide 87 Visualising the User Experience Slide 88 Visualising the User Experience Slide 89 Visualising the User Experience Slide 90 Visualising the User Experience Slide 91 Visualising the User Experience Slide 92 Visualising the User Experience Slide 93 Visualising the User Experience Slide 94 Visualising the User Experience Slide 95 Visualising the User Experience Slide 96 Visualising the User Experience Slide 97 Visualising the User Experience Slide 98 Visualising the User Experience Slide 99 Visualising the User Experience Slide 100 Visualising the User Experience Slide 101 Visualising the User Experience Slide 102 Visualising the User Experience Slide 103 Visualising the User Experience Slide 104 Visualising the User Experience Slide 105 Visualising the User Experience Slide 106 Visualising the User Experience Slide 107 Visualising the User Experience Slide 108 Visualising the User Experience Slide 109 Visualising the User Experience Slide 110 Visualising the User Experience Slide 111 Visualising the User Experience Slide 112 Visualising the User Experience Slide 113 Visualising the User Experience Slide 114 Visualising the User Experience Slide 115 Visualising the User Experience Slide 116 Visualising the User Experience Slide 117 Visualising the User Experience Slide 118 Visualising the User Experience Slide 119 Visualising the User Experience Slide 120 Visualising the User Experience Slide 121 Visualising the User Experience Slide 122 Visualising the User Experience Slide 123 Visualising the User Experience Slide 124 Visualising the User Experience Slide 125 Visualising the User Experience Slide 126
Upcoming SlideShare
Rapid prototyping technology
Next
Download to read offline and view in fullscreen.

377 Likes

Share

Download to read offline

Visualising the User Experience

Download to read offline

Slides from a talk I did at Web Directions South in Sydney Oct 2009.

Outline:
Designing for dynamic web applications and mobile devices poses a new set of challenges. Web designers are increasingly being asked to apply their skills to where the page model no longer applies. We need new ways of exploring the user experience and communicating behaviours involving sub-page changes and movement.

Enter rapid prototyping. Widely acclaimed as one of the best ways to create great user experiences, it isn't without it's own pitfalls. This session will discuss the pros and cons of different prototyping techniques, and introduce a new technique called "screenflows" that focuses on visualising the user experience.

Discover how to combine the best of paper prototyping, wireframes and HTML prototyping into one simple and effective prototyping technique. Learn how using this method can dramatically decrease the need for documentation, while increasing the speed and agility of the development process.

Visualising the User Experience

  1. Visualising the User Experience Grant Robinson Senior Interaction Designer at Xero grant@xero.com
  2. Let’s talk about... 1. Rapid prototyping 2. Visualising the UX with screenflows 3. Movement and transitions
  3. Rapid prototyping
  4. Is this rapid prototyping?
  5. Is this rapid prototyping? Nope!
  6. What is rapid prototyping? • User-centered design methodology • For designing, communicating and evaluating user interfaces • Getting feedback as early as possible • Fast
  7. Prototyping life-cycle
  8. Prototyping life-cycle The more cycles the better
  9. Agile development mantra: release early, release often
  10. Agile design mantra: fail early, fail often "If you’re not failing now and again, it’s a sure sign you’re not doing anything very innovative." Woody Allen
  11. No designer is an island 1. Fellow designers 2. Project team 3. Wider team 4. Users 5. Your mum
  12. Common techniques • Paper prototyping • Wireframes and page schematics • HTML wireframes • Interactive prototypes
  13. Paper prototypes...
  14. 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
  15. Wireframes & page schematics...
  16. http://gapingvoid.com/2007/05/15/random-thought/
  17. 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.
  18. HTML wireframes...
  19. • Better success rate • Much faster • Less confusion
  20. 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
  21. Other interactive prototypes...
  22. Axure (www.axure.com)
  23. Axure (www.axure.com)
  24. SketchFlow (www.microsoft.com/expression)
  25. 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
  26. Choosing a prototype technique What a dilemma!
  27. Visualising the UX with screenflows
  28. http://gapingvoid.com/2007/05/15/random-thought/
  29. 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
  30. It’s like stop motion
  31. From low to high fidelity
  32. • 32 iterations • 5 released
  33. Using Flash as a design tool {eh, what?}
  34. Flash: Not just a development tool
  35. Flash: Not just for video
  36. Flash: History in drawing & animation
  37. FutureSplash Animator
  38. FutureSplash Animator
  39. Anatomy of a screenflow
  40. 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
  41. Getting serious about movement & transitions
  42. How did this...
  43. ...become this?
  44. ...become this?
  45. How did this...
  46. ...become this?
  47. How did this...
  48. ...become this?
  49. "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
  50. 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
  51. Yahoo Design Pattern Library http://developer.yahoo.com/ypatterns/richinteraction/transition/
  52. Yahoo Design Pattern Library http://developer.yahoo.com/ypatterns/richinteraction/transition/
  53. Transitions decreased task completion times Reduced error rates for reading tasks 0.3 seconds - optimal transition speed
  54. Some takeaways... {nom nom nom}
  55. 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
  56. 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
  57. Any questions? Please feel free to flick me an email: grant@xero.com 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/
  • CarlaConiglio

    Nov. 27, 2021
  • Jujuyou

    Jun. 16, 2020
  • aalseri

    Feb. 17, 2020
  • SmRt2

    Oct. 3, 2019
  • ChristianPolanski

    Oct. 3, 2019
  • SantoshBharti1

    Apr. 1, 2019
  • Emrezolu4

    Feb. 27, 2019
  • nMamdouh

    Dec. 8, 2018
  • ParthaBarman

    Jul. 25, 2018
  • PrasadKarmarkar3

    May. 16, 2018
  • NaaKaiSowateyAdjei

    Feb. 12, 2018
  • CruisEnsenada

    Jan. 29, 2018
  • VeronicaVitale1

    Nov. 21, 2017
  • ajeshks1

    Sep. 27, 2017
  • dshayo

    Sep. 21, 2017
  • SarahJaneDoctor

    Aug. 18, 2017
  • userbull

    Jul. 7, 2017
  • Yanivsela

    Jun. 15, 2017
  • judyyunyun

    May. 11, 2017
  • UXPALA

    May. 5, 2017

Slides from a talk I did at Web Directions South in Sydney Oct 2009. Outline: Designing for dynamic web applications and mobile devices poses a new set of challenges. Web designers are increasingly being asked to apply their skills to where the page model no longer applies. We need new ways of exploring the user experience and communicating behaviours involving sub-page changes and movement. Enter rapid prototyping. Widely acclaimed as one of the best ways to create great user experiences, it isn't without it's own pitfalls. This session will discuss the pros and cons of different prototyping techniques, and introduce a new technique called "screenflows" that focuses on visualising the user experience. Discover how to combine the best of paper prototyping, wireframes and HTML prototyping into one simple and effective prototyping technique. Learn how using this method can dramatically decrease the need for documentation, while increasing the speed and agility of the development process.

Views

Total views

90,276

On Slideshare

0

From embeds

0

Number of embeds

8,199

Actions

Downloads

1,729

Shares

0

Comments

0

Likes

377

×