1. SE365 Human Computer Interaction Week 8
Basit Qureshi

2. About! Types of Prototypes Prototype Fidelity
Course Specs & assessments
What is expected from you
Preamble!

3. Acknowledgements Dr. James Landay (Stanford University)
Dr. Jeff Huang (Brown University)

4. Types of Prototypes

5. Language Caveat There is no universal vocabulary for prototyping
When you’re out in the “real world”, you will probably find that any one of these words can refer to many things
And that one sort of prototype can have many names even within the same team
It’s a good idea to double-check that you and your coworkers are on the same page

6. Wireframes
Visual representations of an interface’s intended layout, typically without its actual content
Good for evaluating content placement

7. Compositions (“Comps”)
Static prototypes which focus on graphic design decisions, including colors, fonts, layouts, logos, media, etc.
Good for evaluating aesthetic choices

8. Storyboards Inspired by storyboards used by animators
Series of images which represent how an interface would be used to accomplish a task
Could be a FSM or a narrative
Good for evaluating workflow

9. Paper Prototypes
Paper representations of an interface used to simulate interaction
Good for evaluating general concept, specific workflows, and usability

10. Digital Prototypes
Interactive—but not necessarily functional—user interfaces created with any of a number of platforms
E.g. Adobe Flash, HTML/CSS, etc.
Good for evaluating a working design which has been derived from a few rounds of less costly prototypes

11. Native Prototypes
Interactive—and functional—user interfaces created with any of a number of platforms
E.g. Adobe Flash, HTML/CSS, etc.
Good for evaluating a working design which has been derived from a few rounds of less costly prototypes
Use of SDKs to write a low quality / throw-away code.

12. Prototype Fidelity

13. Lo-Fi vs. Hi-Fi
Traditionally, prototypes are categorized as either lo-fi (low fidelity) or hi-fi (high fidelity)
Fidelity can be thought of as how close of an approximation of the final product is being attempted
In this class, we will be using lo-fi as a synonym for paper prototyping and hi-fi as a synonym for digital prototyping
But as you are about to see, it’s actually more complicated than that!

14. Dimensions of Fidelity
Fidelity can be broken down into four basic dimensions:
Breadth
Depth
Look
Interaction

15. Breadth
The “breadth” of a prototype refers to how much of the product’s functionality is represented in the prototype
A very narrow prototype only represents a single feature
A broad prototype represents all intended functionality
Prototypes should generally be as broad as needed to cover basic tasks, but not much more

16. Depth
The “depth” of a prototype refers to how much of the prototype’s backend is functional, and how robust it is
A very shallow prototype has no backend at all and is hard-coded to respond as though the user had provided ideal input
A deep prototype has some logic and error-handling capabilities
At first glance, depth may seem unimportant, but it affects the amount of exploration a user can do
Thus depth can actually have a profound influence on user testing!

17. Look
“Look” is probably what most people think of when they think of prototype fidelity
It refers to how accurately a prototype represents the product’s intended appearance, including fonts, colors, and graphics
It’s generally a good idea to hold off on something which has a high fidelity look until later in the design process

18. Interaction
“Interaction” refers to how the prototype handles input and output
For example, you might create a digital prototype for an iPad application which runs on your desktop and responds to traditional a traditional mouse and keyboard
Do not confuse interaction with depth!

19. In Practice

20. Gathering Data
Who are your users? What tasks are they trying to accomplish?
Don’t guess—do your research!
Observe users in their natural habitats
Check out solutions that already exist (even hacky ones)
Make sure you are focusing on a problem at the right level of detail
At this stage, don’t think “bicycle cup holders”
Think “helping cyclists stay hydrated without getting hit by a car”

21. Brainstorming Warm-Up
It can be helpful to do some sort of warm-up before you start brainstorming
You could allot ~5 minutes to free-form chatter about related products or tasks
Or you could encourage your team to start thinking creatively and feeling comfortable sharing their thoughts with an associations game
Examples: “Songs David Hasselhoff should cover”, “Mythological animal which would be most lucrative to own”

22. Brainstorming: IDEO Rules
One conversation at a time
Stay focused
Encourage wild ideas
Defer judgment
Build on ideas from other brainstormers
None of this.

23. Sorting ideas Affinity diagramming is one way to sort ideas
It can be used to identify and group desired functionality
The steps:
Solicit ideas; write each of them on a Post-It note
Stick Post-It notes on a wall
Have participants get up and rearrange notes into relational clusters without speaking to one another
As a group, discuss what the clusters represent (you might want to give them catchy names)
Affinity diagramming is like card sorting, but will produce nonhierarchical results.

24. Valuing Ideas Define the importance of each idea:
Does it address the problem?
Will target users like it?
Are the technical requirements available?
Is it affordable to implement?
Rank ideas by importance
Pick the top N ideas

25. Lo-Fi
Now that you’ve got some ideas, you can start making a paper prototype
It may seem difficult to represent something as complicated as a modern software interface with something as old school as paper
But the good news is, a lot of metaphors common to UI design were inspired by paper!

26. Images from: http://www.alistapart.com/articles/paperprototyping/
Example: Tabbed Panel
Images from:

27. Example: Drop-down Menu

28. Example: Dynamic Web Content

29. Example: Pop-Up Windows

30. Why Go lo-fi?
Lo-fi prototypes don’t require any technical skill, so anyone can participate in creating them
You can get user feedback early on in the design process
Paper prototypes can seem less intimidating than digital prototypes
They can also result in more creative feedback
…and less nitpicky feedback

31. Critique
Critique is a method of soliciting feedback which was developed by studio art educators
You display whatever lo-fi prototype(s) you have developed for your product to a small group of peers
They share their immediate reactions to your ideas and weigh in on whatever open questions you have identified

32. How to Get the Most from a Critique
Be clear about what sort of feedback you’re looking for
Overall idea?
Specific workflows or interactions?
Usability?
Technical feasibility?
Graphic design?
Answer questions and correct misconceptions, but do not argue in favor of your design
Show alternative designs if possible

33. How to Give a Good Critique
Talk about the design, not the designer
NO: “You are really bad at handling accessibility.”
YES: “If you implement this as is, a visually impaired user will not be able to use the secondary navigation.”
Point out positive aspects and be specific
NO: “It looks good.”
YES: “The layout makes finding information on the page very easy.”
Ask for alternatives rather than offering solutions
NO: “You should do this instead of that.”
YES: “Have you considered any other input methods?”

34. Hi-Fi
Once you have developed a lo-fi prototype and solicited feedback on it through peer critique and user testing:
You may wish to create another lo-fi prototype (isn’t iterative design fun?)
Or you may be ready to move on to a hi-fi prototype
Which choice you make will be a function of how much of your original design you feel needs to change
Remember, a high fidelity prototype is a non-trivial time investment
Depending on how you build it, it may end up being the first code your write for your final product

35. Video prototyping

36. Types of Prototypes
Prototypes are concrete representations of a design
Prototype dimensions
representation: form of the prototype
off-line (paper) or on-line (software)
precision: level of detail (e.g., informal or polished)
interactivity: watch-only vs. fully interactive
fixed prototype (video clips)
fixed-path prototype (each step triggered by specified actions)
at extreme could be 1 path or possibly more open (e.g., Denim)
open prototype (real, but limited error handling or performance)
evolution: expected life cycle of prototype
e.g., throw away or iterative

37. Video Brainstorming
Participants act ideas out in front of a video camera
Goal is to create as many new ideas as possible
each should take 2-5 minutes to generate & capture
run standard brainstorming session first for ideas
Advantages
video easier to understand later than notes
participants actively experience interaction & preserve record of the idea
Video brainstorming of an animated character in Prototyping Tools & Techniques by Beaudouin-Lafon & Mackay. Character follows user with its eyes.

38. Video Prototyping Illustrate how users will interact w/ system
Unlike brainstorming, video prototyping contracts the design space
Quick to build
Inexpensive
Forces designers to consider details of how users will react to the design
May better illustrate context of use

39. Video Prototype Characteristics
Paper Protoypes, Exisiting Software or Projected Images as a background
Optional Narration, Conversation preferred
narrator explains events & others move images/illustrate interaction while actors perform movements –
viewer expected to understand w/o voice-over
Usually fixed prototypes, but can also use in open prototypes
e.g., live video as Wizard of Oz tool & 2nd camera to capture
With good storyboards, a good short film can be shot in 1 hour

40. Wizard of Oz Video Prototype
Air traffic control UI design
Projection used to see another controlling on screen
Plastic strips allow moving plane images on overhead projector
Image from Beaudouin-Lafon & Mackay

41. Video Prototype Examples

42. greenBean GreenBean (6 minutes)
Make it easier to shop for green products
TOO long (shows both CONCEPT and USER INTERFACE -> Video Prototype)
greenBean

43. Carbon Shopper Carbon Shopper (2:30) Be greener in your shopping
Conversation stilted. Could cut that entire opening scene.
Carbon Shopper

44. Concept + Vision Videos
Concept videos are similar to Video Prototypes but focus even MORE on the STORY and Context and LESS on the UI.
Fine line about what is a concept video and WHAT is a video prototype
In your assignment I’d like you to veer more in the direction of a Concept Video
How to capture an early concept and tell a story

45. It’s About Details They make sure you see the key things…
The house behind & the driveway set the scene – upper middle class
The VW logo is prominent
The hands and helmet tell us what the boy is doing
These are things the viewer might not notice, but are important to setting the scene
Helps to think about these things in the storyboarding process

46. Key Pieces of Successful Concept Videos
People
Context
The Solution
3 key pieces: People, the Context, and the Solution
1 Kid & his parents
2 He wants to use the force, but is failing at it (upper middle class – VW appropriate product)
3 Dad has a cool car that let’s you remotely turn it on. The Force is alive!

47. Keep it Simple

48. Use what you know and what you have
If you have to create a lot of new materials, it will take too long
Use what you know and what you have

49. Concept Video Examples

50. The Goal of any good conceptual film…

51. Making a Concept Video
Define
What is the message of the film? Can you describe it in a few lines?
Make a basic plot
Discuss plot ideas until you get a few that really make sense, decide characters
Define: Make a statement about your project, refer back to it throughout the entire process.
Make a Plot: Create several plotlines, mix and match and decide on a few to storyboard
Storyboarding: Draw pictures, label the kind of shot you might have and what the actor should do.
Storyboard
Turn these into multiple storyboards of scenes to plan how you will film it
* note: not UI storyboards!

52. Storyboarding Use appropriate angles
Use sticky notes so scenes can be moved
Include lines to be spoken if necessary
Storyboarding: Draw pictures, label the kind of shot you might have and what the actor should do.
Show scenes, characters, camera angles & zoom (dialog)
Use appropriate angles

53. If you choose to use music
Now might be a good time to pick some songs. Music can be very powerful if chosen well. (see Vimeo for music you can use free)
Shoot your Film
Get as many shots as you can! you never know what might be useful later.
Edit your Film
Use your storyboard! This part should be simple if you have storyboarded correctly.

54. Lighting
really important to get right

55. This is the right way to do it, but REALLY hard for amateurs… so film somewhere with LOTS OF NATURAL light!

56. High Fidelity Video Examples
Sometimes at the end of the process (no time in this course), we will produce a high quality, high-fidelity video prototype
Can still learn from these

57. Use the right person for the role-ask friends
Use Close-Up shots
Capture emotion
Avoid conversation
(This is the hardest to get right and ends up distracting)
Use the right person for the role-ask friends
People

58. Plan your story – Storyboard it.
Is the story believable?
Film multiple angles
Film longer than the shot needs (you can always cut down)
Context

59. Wow Effect Show your solution at it’s best, save the best for last
Subtlety Show how the solution makes the user feel – subtly
Don’t ‘Sell’ it Don’t tell people to use your solution, show them why
The Solution

60. Summary
Video prototypes allow us to quickly communicate how a user will use a design
Concept videos set up more of the story of use
Both techniques are useful
your projects are at the concept video stage