Prototyping

CMPT 363

“If Ernest Hemingway, James Mitchener, Neil Simon, Frank Lloyd Wright, and Pablo Picasso could not get it right the first time, what makes you think that you will?”
— Paul Heckel

How to explore and communicate possible design solutions?

Topics to Explore

  1. Forms and Methods
  2. Design Scenarios
  3. Sketching and Storyboarding

Prototyping

Forms and Methods

What is a Prototype?

What is a Prototype?

A physical model of a particular design

What is a Prototype?

A method of communication

What is a Prototype?

A means of low-risk design exploration

What is a Prototype?

A learning process!

Why Prototype?

  • Maintain focus on user
  • Encourages exploration and reflection
  • More easily understood than requirements
  • User evaluation and feedback is possible

Four Types of Prototypes

  • Low-fidelity
  • Mid-fidelity
  • High-fidelity
  • Super-fidelity

Start with Why?

Before you choose a prototyping method, consider what you are trying to achieve by prototyping?

  • Test
    • Usability testing designs (i.e. reducing risk)
  • Engage
    • Engaging users
    • Engaging stakeholders
  • Explore
    • Exploring possible designs
    • Exploring real content and data

Example Interactive Prototyping Apps

Dimensions of Prototyping

  • Vertical
  • Horizontal

Time for More Questions & Discussion

  • What we’ve covered so far
    • What is a prototype?
    • Why prototype?
    • Types of prototypes
    • Dimensions of prototyping
  • Coming up
    • Design Scenarios

Prototyping

Design Scenarios

What are Design Scenarios?

  • Descriptions of people and their activities
  • Series of events that results in reaching a goal
  • Can be described textually or visually

Example Design Scenario

“Emma, a sales manager, needs to arrange a meeting with her 5-member sales team (Becker, Kim, Taylor, Olsen and Singh) to work out the details of an upcoming promotion for their newest product ReadBetter. Using the meeting room booking system from her office computer she determines when they can all meet this week and reserves a room with a projector for the meeting.”

Why Use Design Scenarios?

  • Focus on (high-level) user goals
  • Excellent way to share a vision (without requiring visuals)
  • Highlights missing specifics early
  • Provides a workflow-based viewpoint
  • Establishes a shared understanding

Choosing Design Scenarios to Create

  1. Create an inventory of user tasks (moderate granularity) for the system/product you will be creating
  2. Determine frequency and importance for all tasks to help with scenario creation, prioritization and UI structure decisions

How to Create Good Design Scenarios

  • Describe what, not how
  • Be very specific
  • Describe reaching a user goal (or solving a problem)
  • Include underlying motivation
  • Describe who the user(s) are
  • Include the context of use

Describe What, Not How

“Emma, a sales manager, needs to arrange a meeting with her 5-member sales team (Becker, Kim, Taylor, Olsen and Singh) to work out the details of an upcoming promotion for their newest product ReadBetter. Using the meeting room booking system from her office computer she determines when they can all meet this week and reserves a room with a projector for the meeting.”

Be Very Specific

“Emma, a sales manager, needs to arrange a meeting with her 5-member sales team (Becker, Kim, Taylor, Olsen and Singh) to work out the details of an upcoming promotion for their newest product ReadBetter. Using the meeting room booking system from her office computer she determines when they can all meet this week and reserves a room with a projector for the meeting.”

Describes Reaching a Goal

“Emma, a sales manager, needs to arrange a meeting with her 5-member sales team (Becker, Kim, Taylor, Olsen and Singh) to work out the details of an upcoming promotion for their newest product ReadBetter. Using the meeting room booking system from her office computer she determines when they can all meet this week and reserves a room with a projector for the meeting.”

Include Underlying Motivation

“Emma, a sales manager, needs to arrange a meeting with her 5-member sales team (Becker, Kim, Taylor, Olsen and Singh) to work out the details of an upcoming promotion for their newest product ReadBetter. Using the meeting room booking system from her office computer she determines when they can all meet this week and reserves a room with a projector for the meeting.”

Describe Who the User(s) Are

Emma, a sales manager, needs to arrange a meeting with her 5-member sales team (Becker, Kim, Taylor, Olsen and Singh) to work out the details of an upcoming promotion for their newest product ReadBetter. Using the meeting room booking system from her office computer she determines when they can all meet this week and reserves a room with a projector for the meeting.”

Include the Context of Use

“Emma, a sales manager, needs to arrange a meeting with her 5-member sales team (Becker, Kim, Taylor, Olsen and Singh) to work out the details of an upcoming promotion for their newest product ReadBetter. Using the meeting room booking system from her smartphone she determines when they can all meet this week and reserves a room with a projector for the meeting.”

Tips About Creating Design Scenarios

Start with a brief goal-oriented scenario including trigger (motivation) or alternatively create a process flow diagram

Tips About Creating Design Scenarios

Evaluate with real users whenever possible, to check for omissions, corrections, etc.

Identify Potential Features

Once design scenarios have been created, review them to start identifying potential features of the system

Good Design Scenarios

✓ Describe what, not how
✓ Be very specific
✓ Describe reaching a user goal (or solving a problem)
✓ Include underlying motivation
✓ Describe who the user(s) are
✓ Include the context of use

Time for More Questions & Discussion

  • What we’ve covered so far
    • Design Scenarios
  • Coming up
    • Sketching

Prototyping

Sketching and Storyboarding

Sketching

  • Critical during the early phase of design
  • Must be quick, cheap, and disposable
  • Focus on design concepts rather than details (intended roughness)
  • Cross-team contribution possible and valuable

Sketching vs. Wireframes

Sketching with Paper

  • Fine black Sharpie (start with this)
  • Medium black Sharpie (to add emphasis)
  • Thick grey marker (to add depth)
  • Yellow highlighter (to bring attention)

Sketching Tips

  • We can all draw adequately to sketch!
  • Think of sketching simply as a means to communicate ideas
  • Strive to explore an idea from multiple perspectives, not just one sketch per idea
  • Consider the element of task-flow (narrative)
  • Freely combine words and drawings

Divergent Sketching

Use sketches to quickly explore a range of divergent designs for key screens or concepts

Sketching for Requirements

With the quick and disposable nature of sketches, they are also an effective tool to help identify requirements with users (and existing assumptions)

A Few Drawing Tips

  • Choose a thicker marker to sketch with
  • Start with a base using a light grey marker
  • Draw corners with two intersecting lines
  • Use shadows to add depth or highlight items
  • Practice, practice, practice!

Sketching Storyboards

  • A sequence of drawings representing a specific period of time
  • Can illustrate various levels of detail (fidelity)

Effective Storyboards

  • Initially black and white
  • Simple shapes and text blocks
  • Unique name/number for each page
  • Segment storyboards by user tasks
  • Must be able to speak for themselves

Design Scenario Storyboards

  • Visually represents a user’s main success path within a design scenario
  • Each step has a one sentence description of the required user action

Pre-test User Feedback

You can share the storyboards with potential users before conducting usability tests and ask questions such as what they like/dislike (with follow-up questions), is anything missing, and could you see yourself in the story shown?

Example Sketching Apps

Summary

  • Forms and Methods
  • Design Scenarios
  • Sketching and Storyboarding

Image Credits (for images without source URL or note)

https://revisionlab.wordpress.com/that-squiggle-of-the-design-process/
https://medium.com/fold-line-gold/four-common-types-of-software-prototypes-8fa275c0602f
https://www.umsl.edu/~sauterv/analysis/Fall2013Papers/Boutaugh/elementspage.html
https://www.leemunroe.com/designing-with-pen-paper/
https://www.smashingmagazine.com/2013/06/sketching-for-better-mobile-experiences/
http://ferhatsen.com/design-fest.html
https://msdn.microsoft.com/en-us/library/windows/desktop/ff800706.aspx
http://sneakpeekit.com/
https://blog.rangle.io/master-ui-wireframes-with-only-three-shapes/
http://uxmovement.com/wireframes/why-its-important-to-sketch-before-you-wireframe/
http://johnnyholland.org/2011/10/storyboarding-ux-part-2-creating-your-own/
https://noelbyrne.wordpress.com/2010/01/16/balsamiq-mockups/
Reload?