Story Telling and Interaction Design<br />“A [good] story is worth a thousand pictures.” (Gershon & Page 2001)<br />Words ...
Playing with Words<br />“Without play, imagintion dies”<br />Challenges to imagination are the keys to creativity. The ski...
Stories...<br /><ul><li> memorable, people will remember and retell
have an informality that is well suited to the lack of certainty that characterizes much</li></ul>design-related knowledge...
Role-playing<br />Stories can be theatrical-another kind of play.<br />Interaction is about roles and their changing relat...
 Role of Product</li></ul>Role of the Product<br />Personal Analogies;<br />“The designer imagines what it would be like t...
Role of User;<br />the intent is not to test a product, but to use role playing to understand the experience that<br />it ...
 recognise the limitations of the product or user</li></li></ul><li>Theatrical Sketches<br />informance: theatrical perfor...
Asleep on the Job<br />the particular concern;<br />showing respect for the moral order of the<br />home. That is, the hom...
the DVD package which opens like a regular clam-shell laptop.<br />“What the plot revealed was that this seemingly unrelat...
Traditional sketching has an important place in experience design—they are just not<br />sufficient. Quick sketches with m...
“Conventional sketching has an important place in interaction design.Even those without a<br />greatdeal of natural talent...
Hybrid Photo-Graphic Composition: Abit of tracing and drawing can enable a well-crafted<br />photograph to serve as a sket...
Sequencing Images<br />Sketches of PDA Agenda Screens<br />comic strip type, multiple images to portray the state of the d...
<ul><li> These kind of sketches are not time consuming and they are easy to execute.
 Designer can perform a number of different approaches to the design, in terms ofgraphical</li></ul>style, functionality,a...
Storyboard of a pervasiveelectronic game. They capture more the spiritof the play than the details of the<br />technology ...
Transitions and use of arrows<br />These figurestell us about the state, but almost nothing about the transition;<br />   ...
it is an evacuation process thatis being<br />designed, not just an airplane door...<br />
“Why not just use video or animation to capture thedynamics? After all, are not still images,<br />storyboards, and comic ...
The distinction between traditional product design andinteraction design;<br /> the importance of considering the role tha...
Animated gifcan be done easily to show short animated sequences.<br />
Mixture of techniques;<br />The range of materials that can be used can be far richer, and can includephotographs,<br />pa...
picture-driven-animation;<br />Instead of drawing individual frames, using the notion of usinghand-drawn lines to define<b...
Shooting with the mime: <br />Projecting the animated sketch on a surface, then have a person mime along with the<br />ani...
Wizard of Oz Remote Cursor Control<br />The scenario was to make a video sketch of a large wall-mounted display whosecurso...
Upcoming SlideShare
Loading in...5
×

Sketching user experiences: Getting the design right and the right design

2,976

Published on

Published in: Design, Technology, Business
0 Comments
21 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,976
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
57
Comments
0
Likes
21
Embeds 0
No embeds

No notes for slide

Transcript of "Sketching user experiences: Getting the design right and the right design"

  1. 1.
  2. 2.
  3. 3. Story Telling and Interaction Design<br />“A [good] story is worth a thousand pictures.” (Gershon & Page 2001)<br />Words are more timely, cheap, and quick to produce. Stories help to discover, it is the<br />discursive element wherein the insights are found and where the value lies.<br />Sketch: invite, suggest and question<br />Scenerio: tell, show, explain and try to convince<br />
  4. 4. Playing with Words<br />“Without play, imagintion dies”<br />Challenges to imagination are the keys to creativity. The skill of retrieving imagination<br />resides in the mastery of play. Possibility incubates creativity.<br />Best ideas consistently come from verbal playing around with thoughtstriggered during<br />conversations with others.<br />
  5. 5. Stories...<br /><ul><li> memorable, people will remember and retell
  6. 6. have an informality that is well suited to the lack of certainty that characterizes much</li></ul>design-related knowledge. (Erickson 1996; p.35)<br />“Through their memorability and retelling;<br />they provide a means whereby your audience itself becomes an effective conduit for <br />spreading the debate and understanding reflected in your tale. In short, they are a form <br />of “viral marketing” for design ideas.”<br />
  7. 7. Role-playing<br />Stories can be theatrical-another kind of play.<br />Interaction is about roles and their changing relationships;<br /><ul><li> Role of User
  8. 8. Role of Product</li></ul>Role of the Product<br />Personal Analogies;<br />“The designer imagines what it would be like to use one’s body to produce the effect that<br />is being sought, e.g. what would it feel like to be a helicopter blade, what forces would act<br />on mefrom the air and from the hub; what would it feel like to be a bed?” (Jones 1992; p. 279)<br />
  9. 9. Role of User;<br />the intent is not to test a product, but to use role playing to understand the experience that<br />it engenders.<br />Black Like Me, by John Howard Griffin (1961)<br />Disguised: A True Story(Moore & Conn 1985)<br />The experience is not real of course, but it was a taste;<br />It was insights, which were more meaningful and and helpful<br />than any other ways<br />Role playing;<br /><ul><li> reel the story a little more
  10. 10. recognise the limitations of the product or user</li></li></ul><li>Theatrical Sketches<br />informance: theatrical performance that informs<br />bodystorming: the use of acting out as a means to generate new ideas and insights about<br />a particular question or problem <br />Simple Acting Out “On TV”<br />
  11. 11.
  12. 12.
  13. 13. Asleep on the Job<br />the particular concern;<br />showing respect for the moral order of the<br />home. That is, the home has certain social,<br />cultural and behavioural conventions that<br />distinguish it from school, the supermarket,<br />or the office.<br />being garbed violates the moral order of the workplace; <br />so, why is populating the home with technology designed for the office any more acceptable<br />than wearing pajamas(which are perfectly acceptable at home) at the office? <br />
  14. 14. the DVD package which opens like a regular clam-shell laptop.<br />“What the plot revealed was that this seemingly unrelated object was really a<br />novel representation of a new concept for an ultra-portable computer.”<br />
  15. 15.
  16. 16. Traditional sketching has an important place in experience design—they are just not<br />sufficient. Quick sketches with more visual story telling helps to menage and get your <br />ideas down.<br />Trace-like sketches are just so incongruous in that visual context. They catch your eye, and<br />despite thedetail being in the photo, your eye is drawn to the sketch. <br />
  17. 17. “Conventional sketching has an important place in interaction design.Even those without a<br />greatdeal of natural talent can improve their drawing skills with practice.There are a range<br />of techniques and technologies that can be used to create images that servesketch-like<br />purposes. The limiting factor is your imagination, not technology ortechnique.<br />There is always a way toexpress an idea appropriately within your means.”<br />“The main drawback of conventional sketching has to do with its limitations in capturing<br />time, dynamics, phrasing—thetemporal things that lie at the heart of experience.”<br />
  18. 18. Hybrid Photo-Graphic Composition: Abit of tracing and drawing can enable a well-crafted<br />photograph to serve as a sketch.<br />
  19. 19. Sequencing Images<br />Sketches of PDA Agenda Screens<br />comic strip type, multiple images to portray the state of the display as one goes through a particular<br />sequence of transactions.<br />state transition diagram, which can be usedto make a kind of map of the displays in an interface.<br />
  20. 20. <ul><li> These kind of sketches are not time consuming and they are easy to execute.
  21. 21. Designer can perform a number of different approaches to the design, in terms ofgraphical</li></ul>style, functionality,and the flow of the interaction.<br /><ul><li> At later stages, more realistic drawings can be done but at early exploring and trial stages</li></ul>realistic drawings can trick the designer as they could easily be mistaken for the real thing.<br />
  22. 22. Storyboard of a pervasiveelectronic game. They capture more the spiritof the play than the details of the<br />technology design.<br />Storyboardtechniques can be used explore, brainstorm, capture, and communicate ideas<br />about use and experience.<br />
  23. 23. Transitions and use of arrows<br />These figurestell us about the state, but almost nothing about the transition;<br /> where is the getting back and forth between home and work?<br />usage of the arrows in storyboards;<br />it shows you who or what is moving in the frame and where. But it also has the power to<br />graphicallycommunicate the nature of the movement itself: fast/slow, accelerating or slowing<br />down, smooth orwobbly, and so on. All these types of properties can be captured in how<br />the arrows are drawn, at leastwhen drawn by someone with appropriate technique.<br />
  24. 24. it is an evacuation process thatis being<br />designed, not just an airplane door...<br />
  25. 25. “Why not just use video or animation to capture thedynamics? After all, are not still images,<br />storyboards, and comic book techniques a poor substitutefor this aspect of the interface?”<br />It is faster, cheaper, and enables the designer toexplore more alternatives in a given<br />(limited) amount of time.<br />Hanged on a wall or placed on a table;it can be absorbed in a glance, and compared,<br />side-by-side, with other alternatives. Video can’tdo this. But then, video can do things that<br />storyboards can’t. Each has its place.<br />
  26. 26.
  27. 27. The distinction between traditional product design andinteraction design;<br /> the importance of considering the role that time and behaviorhave in shaping the<br />overall experience.<br />
  28. 28. Animated gifcan be done easily to show short animated sequences.<br />
  29. 29. Mixture of techniques;<br />The range of materials that can be used can be far richer, and can includephotographs,<br />paper cut-outs, or some combination of these.<br />
  30. 30. picture-driven-animation;<br />Instead of drawing individual frames, using the notion of usinghand-drawn lines to define<br />bothobjects that were seen, and motion paths along which those objects would move.<br />In the background, only partiallyvisible, is a representation of a virtual map of western Canada. Above that there is a<br />drawing of a hand holding a small PDA, on whose screen a portion of the map is clearlyvisible. Finally, there is<br />some hand-written text explaining things.<br />
  31. 31.
  32. 32. Shooting with the mime: <br />Projecting the animated sketch on a surface, then have a person mime along with the<br />animation playback.If the mime is good, it will appear to the viewer of the video that<br />the person is actually controlling the system.<br />Playing with Lego bricks: the purpose is to explore the concept of “graspable” or “tangible” user interfaces. (Director)<br />Realizing the video sketch is relatively simple. It is fast, inexpensive, extremely effective,<br />and enablesthe designer towork through a number of scenarios. And significantly, it does<br />not involve writing a line of code.<br />
  33. 33. Wizard of Oz Remote Cursor Control<br />The scenario was to make a video sketch of a large wall-mounted display whosecursor could be<br />manipulated by pointing with one’s hand, and whose cursor size would automatically<br />grow as the operator moved further away from the screen, thereby always remaining visible.<br />
  34. 34.
  35. 35. Sketch-a-Move Project<br />more info: http://vimeo.com/5125096<br />
  36. 36. Sketchs are;<br /><ul><li> quick
  37. 37. timely
  38. 38. inexpensive
  39. 39. Sufficent</li></ul>Rather than using an extremely skilled animator and time consuming, technology<br />requiring techniques; an experience can be performed or presented by sketch-like <br />video techniques.<br />The given example enables to change paths, and try various alternatives, very quickly.<br />And it includes sense of fun and dynamism – “play”<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×