Prototyping _ Storyboarding by pengxuebo



Sketches, storyboards, and other prototypes

   Questions?
   Finish Pen Input
   Prototyping
   Storyboards
   Interface Prototypes
   Exercise if we have time
   Next time: Design of Everyday Things
Free-form Ink

   Ink is the data, take as is

   Human is responsible for
    understanding and
   Often time-stamped
   Applications
    –   Signature verification
    –   Notetaking
    –   Electronic whiteboards
    –   Sketching
Electronic whiteboards

   Smartboard and Mimio
   Can integrate with projection
   Large surface to interact with
    –   Issues?

Touch tables

   Which techniques
    might be similar to
    smaller touchscreens?
   Which would differ?

   How similar and
    different from
    interactive white

                            Microsoft Surface
Real paper

   Anoto digital paper and pen technology
   Other pens available:
   Issues?
General Issues – Pen input

   Initial training required
   Learning time to become proficient
   Speed of use
   Generality/flexibility/power
   Special skills - typing
   Screen space required
   Computational resources required
Other interesting interactions

   Gesture input
    –   Wii
    –   Lots of other specialized hardware for tracking
   3D interaction
    –   Stereoscopic displays
    –   Virtual reality
            Immersive displays such as glasses, caves
   Augmented reality
    –   Head trackers and vision based tracking
   Tangible interaction
    –   Use physical objects to express input

   You can’t evaluate a design until it’s built
    –   But…
   After building, changes to the design are

   Simulate the design, in low-cost manner
Design Artifacts

   Expressing design ideas:
    –   Make it fast!!!
    –   Allow lots of flexibility for radically different
    –   Make it cheap
    –   Promote valuable feedback
   Facilitate iterative design and evaluation
Prototype representation

   How to represent the prototype?
    –   Mockup
    –   Storyboard
    –   Sketches
    –   Scenarios
    –   Screenshots
    –   Functional interface
Example project
Next steps: interactive prototype
Prototype scope

   How much to represent?
    –   Horizontal - “Broad” prototyping
            Show much of the interface, but in a shallow manner

    –   Vertical - “Deep” prototyping
            Show only portion of interface, but large amount of those
Prototype maturation

   Low fidelity vs. High fidelity

   Amount of polish should reflect maturity of
    the prototype
   Why?
Design Description

   Can simply have a textual description of a
    system design
    –   Obvious weakness is that it’s so far from eventual
    –   Doesn’t do a good job representing visual aspects
        of interface

    –   Good for accompanying visual description in
        report (*hint hint*)

   Fictional stories with characters, products, events
    and environments.
   Typically narratives, but can be videos,

Jane likes to take walks every morning. This
  morning, as she places her hand on the door, she
  hears “75% chance of rain, better bring your
  umbrella.” Thankful for the notice, she grabs her
  umbrella and heads out for her morning walk.
More detailed scenario

   Jane’s class just got out and she wants to know
    whether to take the shuttle or walk back to her dorm.
    She opens her cell phone and starts the web
    browser. She opens her bookmarks and clicks on
    the bus location page. The page displays a list of the
    shuttle lines on campus. She selects the Nugget.
    The next page is a list of bus stops. She scrolls
    down and selects Woodward Hall. The page then
    displays that the next shuttle should arrive in 2
    minutes. Jane leaves the building to head down to
    the bus stop to wait for the shuttle.
Scenario Utility

   Engaging and interesting
   Another person’s shoes
   Present to different people
   Facilitates feedback and opinions
   Explore errors or mistakes

   Good for accompanying sketches, mockups,
    etc. (*hint, hint*)

   A story with visuals
   Visuals can be almost anything:
    –   Hand drawn with people and environment
    –   Screenshots of a system
    –   Combination…

   Advantages:
    –   Provides additional details over scenario
    –   Can be easier to digest
   Disadvantages:
    –   Story must be concise and clear
    –   Visuals must be developed

   Determine the story
    –   A very iterative process through a lot of initial
    –   Includes a lot of brainstorming
   Sketch on pen + paper
   Generate more polished art for
   Develop
Use taglines / captions

   Keep it short: show as much as necessary
    but not more
Drawing is hard…

   But it doesn’t have to be
Drawing is hard…

   It doesn’t have to be drawings..

   Different presentation format means you can
    do more!

   Think about how long you have a captive
   Think about how much you want to tell
   Think about options for presenting
    sequences of drawing

   Generally for
    physical aspects
    of system

                       Taken from Builder Bobs team project Summer 04
Mockups / Wireframes

   Good for brainstorming
   Focuses people on high-level design notions
   Not so good for illustrating flow and the
Paper prototyping

   “Paper prototyping is a variation of usability testing where
    representative users perform realistic tasks by interacting
    with a paper version of the interface that is manipulated by a
    person ‘playing computer,’ who doesn’t explain how the
    interface is intended to work.”

Taken from Paper Prototyping
by Carolyn Snyder

                                   The "Computer" highlights the item the user has just selected. A member of the
                                   development team observes and takes notes. (Photo courtesy of Timo Jokela.)
Draw/Paint programs

Draw each screen, good for look

   IP Address

        OK         Cancel

                              PhotoShop, Paint,...
Thin, horizontal prototype

   Put storyboard-like views down with
    (animated) transitions between them
   Can give user very specific script to follow
   Often called chauffeured prototyping

   Examples: PowerPoint, Hypercard,
    Macromedia Director, HTML
Interface Builders

   Tools for laying out windows, controls, etc. of
    –   Easy to develop & modify screens
    –   Supports type of interface you are developing
    –   Good look and feel
    –   Can add back-end functionality

   Examples: Visual Basic, .NET, many apps for
    various languages
        Visual Basic

UI Controls

Design area
Macromedia Director

   Combines various media with script written in
    Lingo language
   Concerned with place and time
    –   Objects positioned in space on “stage”
    –   Objects positioned in time on “score”
   Easy to transition between screens
   Can export as executable or as Web
    Shockwave file

   SILK (Sketching Interfaces Like Krazy) /
    –   Sketch-based GUI builder

   by James Landay’s and his former group at UC
Prototyping Technique

   Wizard of Oz - Person simulates and controls
    system from “behind the scenes”
    –   Use mock interface and
        interact with users
    –   Good for simulating
        system that would be
        difficult to build

         Can be either computer-based or not
Wizard of Oz

   Method:
    –   Behavior should be algorithmic
    –   Good for voice recognition systems

   Advantages:
    –   Allows designer to immerse oneself in situation
    –   See how people respond, how specify tasks

 Low-fidelity                Medium-fidelity               High-fidelity

Sketches, mock-ups               Slide shows           System prototypes



    For more: take ITIS 3150
    Rapid Prototyping and Interface Building
    Offered next fall
Assignment: Storyboard

   Due Oct. 15
   Create a storyboard for your project
    –   This CAN be about a potential design
    –   4 to 6 panels is sufficient

   Bring to class on paper if you do not have
    access to a scanner
Crazy design time
Remember all the ways of doing interaction? Voice, pen,
  gesture, and even ways we didn’t talk about

Come up with a design idea for a system at bus or train stops.
  Should allow you to do useful or entertaining things –
  perhaps buy tickets, check on schedules, get maps, tell you
  about the area, etc...

Be a little crazy – think of the user, but don’t just do the plain
  and expected kiosk.

Express your design ideas with low fidelity prototypes. Sketch.
  Storyboard. Scenario.

To top