Requirements Analysis and Design Engineering - PowerPoint PPT Presentation


PPT – Requirements Analysis and Design Engineering PowerPoint presentation | free to download - id: 207a0b-OGVkO


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation

Requirements Analysis and Design Engineering


... Tips. Everyone on the development team can stay closely ... some designers will use new technologies only because it looks cool. Paper Prototyping Tips ... – PowerPoint PPT presentation

Number of Views:68
Avg rating:3.0/5.0
Slides: 77
Provided by: frankp1
Learn more at:


Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Requirements Analysis and Design Engineering

Requirements Analysis and Design Engineering
  • Southern Methodist University
  • CSE 7313

Module 11 Prototyping Part 2
  • Paper prototyping
  • Local prototyping
  • Wizard of Oz prototyping
  • Low fidelity prototyping

Producing Fast Prototypes
  • 1. Place less emphasis on the efficiency of the
  • does not matter how much disk space the prototype
    uses because it will only be used for a short
    period of time
  • slow response times for test users may be ok (too
    slow may cause errors!)
  • efficiency measures will be invalid
  • better for early evaluation than measurement

Producing Fast Prototypes
  • 2. Accept less reliable or poorer quality code
  • but try to reduce bugs and crashes
  • 3. Use simplified algorithms that cannot handle
    all the special cases (such as leap years)
  • normally require a disproportionate amount of
    effort to get right

Producing Fast Prototypes
  • 4. Use a human expert operating behind the scenes
    to take over certain computer operations that
    will be too difficult to program
  • wizard of oz
  • User interacts normally with the computer
  • Input goes to the wizard instead of the computer

Producing Fast Prototypes
  • Wizard transforms the user input into appropriate
  • listening typewriter
  • experience with previously implemented systems is
    helpful in order to place realistic bounds on the
    wizards abilities

Producing Fast Prototypes
  • 5. Use a different computer system than the
    eventual target platform
  • faster, more advanced computer can be used to
    supports more flexible prototyping tools
  • 6. Use low fidelity media
  • not as elaborate as the final system
  • still represent the essential nature of the
  • scanned images instead of live video

Producing Fast Prototypes
  • 7. Use fake data and other content
  • prototype of a hypermedia system using video can
    use exiting video material, even if it is not an
    exact match
  • ripomatics in the advertising industry
  • used to demonstrate concepts to clients before
    they commit to pay for the shooting of new footage

Producing Fast Prototypes
  • 8. Use paper mock-ups instead of running a
    computer program
  • based on printouts of screen designs, dialog
    boxes, pop ups, etc
  • drawn using some standard package
  • user indicates the action
  • human plays the computer
  • needs to be an expert in the way the system is
    going to work in order to keep the state of the
    system in mind

Producing Fast Prototypes
  • Can be shown to large audiences on an overhead
  • used when computers are not available (some
    conference rooms)

Producing Fast Prototypes
  • 9. Rely on a completely imaginary prototype
  • experimenter describes a possible interface to
    the user orally
  • pose a set of what-if questions as the user
    steps through an example task
  • called forward scenario simulation
  • more like interviewing and brainstorming rather
    than prototyping

Combining Techniques
  • Several techniques could be combined to explore
    different aspects of usability of the total
  • still images to test the integration of text and
    images to support learning
  • live video to test interaction mechanisms for
    controlling the data

Paper Prototyping Tips
  • Prototyping is a quick way to incorporate direct
    feedback from real users into a design
  • Bypasses times to create a working coded user
  • Paper, scissors, and stickies
  • Maximum speed and flexibility

Paper Prototyping Tips
  • Everyone on the development team can stay closely
    involved and productive
  • Even if you can create a prototype fairly quickly
    in HTML or VB, must consider if the right people
    have the proficiency in the tool
  • How well can the design team stay involved?

Paper Prototyping Tips
  • Many usability problems come from someone on the
    design team with key information not being
    involved at the right level
  • With paper, all can gather around the same table
    and contribute
  • Changes can also be made on the fly without
    waiting for more development

Paper Prototyping Tips
  • Users feel more comfortable being critical of
    paper prototypes because it doesnt have a
    polished look
  • with a polished prototype users are more likely
    to blame themselves or their lack of experience
  • Remember goal is to measure the function and flow
    of the interface, NOT the look

Paper Prototyping Tips
  • After doing several iteration with paper, then
    transfer to a more polished look
  • Sometimes the inability to create a fancy effect
    on paper may be a warning that the effect is not
  • example - a rollover
  • some designers will use new technologies only
    because it looks cool

Paper Prototyping Tips
  • Paper mock ups are intended to capture the sites
    functionality, not to demonstrate technology
  • For existing products, create screen shots and
    annotate with stickies, whiteout, or other
  • Screen shots with hand drawn annotations is fine

Paper Prototyping Tips
  • But be careful to not disrupt the entire screen
    with a hand drawn annotation

More on Rapid Prototyping
  • Rapid Prototyping facilitates iterative design
    and formative evaluation
  • Defined as "a form of simple, rapidly produced
    prototyping in which the prototype is used to
    collect information about both requirements and
    the adequacy of possible designs..
  • Not developed into the final product

  • Traditional techniques push evaluation to late in
    the cycle
  • Prototyping involves building a system early that
    simulates the final system
  • Rapid prototyping accelerates the construction,
    allowing for multiple iterations and more
    substantial changes

Artillery approach to rapid prototyping
design/ redesign
prototyping/ implementation
evaluation and analysis
  • Prototypes also encourage user participation and
  • Early evaluation helps solve problem of how one
    tests a design without investing a large amount
    of effort into its construction.

Prototyping as Technique
  • Prototyping is a technique, not a tool
  • Effective very early in the process
  • A process of synthesis, working towards the
  • Provides perspective and insight for both
    developers and interaction designers

Dimensions of Prototyping
  • Representation
  • How interaction designs are represented (e.g.
  • More visual and user-task oriented are easier to
  • Tend to avoid programming language styles

Dimensions of Prototyping
  • Scope
  • The amount of the system included in the
  • Prototypes that do not include the underlying
    system limit the functionality that can be
    tested, making integration more difficult
  • As system gets implemented, add to prototype

  • When can the prototype be run?
  • When compiled as part of the implementation,
    turnaround is slow
  • In addition, it may only be available
  • Continuously available prototypes are not tied to
    the implementation
  • Typically interpreted, they allow fast update for
    quick iteration cycles

  • How the prototype transitions to product.
  • System usually moves from prototype to
    implementation to final product
  • If prototypes are discarded the process is
  • If prototypes grow into final product it is

  • Revolutionary processes useful in conjunction
    with very early prototyping
  • Evolutionary allows code to be re-used

Characterizing Prototypes
  • Global vs. Local
  • A global prototype is representative of the whole
    system. It has breadth, and maybe depth.
  • A local prototype concentrates on one aspect.
  • Local prototypes are most useful in answering
    specific questions or debates

Local prototyping
Should arc line selection require precise picking
with a mouse?
Should grab handle be used to aid arc selection
Local prototyping
Weighing Prototypes
  • Advantages
  • Promotes iterative design, leading to overall
    shorter development, better products, etc.
  • Begins the paradigm shift in the user

Weighing Prototypes
  • Pitfalls
  • Might not fit in with established procedures
  • May lead to reduction in discipline
  • Perception that prototype means project is
  • Accuracy in the prototype
  • Need to ensure prototype is indeed like final
  • Overdesign

Styles and approaches to prototyping
  • Horizontal Prototyping
  • Very broad in number of features, but shallow in
    the implementation of each feature.
  • Vertical Prototyping
  • Few features, but each feature is done in

Styles and approaches to prototyping
  • High Fidelity Prototyping
  • Uses media which resembles the final interface
    (ex using hypercard to prototype a computer

Styles and approaches to prototyping
  • Low Fidelity Prototyping
  • Uses materials further away from the actual
    product interface (ex using pencil paper to
    prototype a computer interface).
  • Chauffered Prototyping
  • A third party walks the user through the
    prototype. This may be used with vertical
    prototyping, when only a select few paths have
    been implemented.

Styles and approaches to prototyping
  • Wizard of Oz Prototyping
  • A third party behind the scenes is running things
    responding to user actions without the user
    knowing about him/her
  • This may be used in conjunction with low
    fidelity prototyping or horizontal prototyping
    (cases where the prototype has low executability).

Wizard of Oz Prototyping
Wizard of OZ - Advantages
  • Allows users to help design an interface even
    when they themselves are very good designers
  • Elicit knowledge from experts that later may be
    incorporated into the system
  • Find out how people are likely to interact with a

Wizard of Oz - Issues
  • The actual response of the system can be slow as
    there is now a human in the loop.
  • Allowing the wizard to observe the subject and
    to second guess the user's intention
  • Have prepared responses that can be at issue

Wizard of Oz - Issues
  • More than one wizard (assuming that the wizards
    don't discuss much)
  • Warning the user that it is an experimental
    system and can be a bit slow at times

Wizard of Oz - Issues
  • Setting up a Wizard of Oz experiment can be
    difficult, especially on some platforms where it
    would be difficult to hide the wizard
  • Some time must spent training the wizard,
    ensuring that he/she
  • is consistent, responds quickly
  • responds effectively to the users inputs
  • limits the chances that they are unmasked

Prototype Content
  • Early Prototypes
  • Testing conceptual model, broader scope
  • Accuracy to final product can be lower
  • Should provide depth on most common user
  • Late Prototypes
  • Accuracy to final product is more more critical
  • More detail oriented

Rapid Prototyping Tools
  • Motivation
  • Tools not required by useful for dealing with
  • Also good for configuration management/history
  • Aid in the fast iterative cycle

Rapid Prototyping Tools
  • Desired Features
  • Easy to develop and modify screens
  • Supports the type of interface you are developing
  • Supports a variety of I/O devices
  • Easy to link screens and modify links
  • Allows calling external procedures and programs
  • Allows importing of text, graphics, etc
  • Easy to learn and use
  • Good support from the vendor

Low-fidelity Prototyping
James Landay Cal Berkeley
UI Design Cycle
Rapid Prototyping
  • Build a mock-up of design
  • Low fidelity techniques
  • paper sketches
  • cut, copy, paste
  • video segments
  • Interactive prototyping tools
  • Visual Basic, HyperCard, Director, etc.
  • UI builders
  • NeXT

The Model Human Processor
Working Memory
Visual Image Store
Fingers, etc.
The Model Human Processor
Cognitive Processor
Motor Processor
Perceptual Processor
Fingers, etc.
MHP Basics
  • Based on empirical data
  • Three interacting subsystems
  • perceptual, motor, cognitive
  • Sometimes serial, sometimes parallel
  • Parameters
  • processors have cycle time (T)
  • memories have capacity, decay time, and type
  • Ten principles of operation

Why We Prototype
  • Get feedback on our design faster
  • saves money
  • Experiment with alternative designs
  • Fix problems before code is written
  • Keep the design centered on the user

Fidelity in Prototyping
  • Fidelity refers to the level of detail
  • High fidelity
  • prototypes look like the final product
  • Low fidelity
  • artists renditions with
  • many details missing

Why Use Low-fi Prototypes?
  • Traditional methods take too long
  • sketches -gt prototype -gt evaluate -gt iterate
  • Can simulate the prototype
  • sketches -gt evaluate -gt iterate
  • sketches act as prototypes
  • designer plays computer
  • other design team members observe record
  • Kindergarten implementation skills
  • allows non-programmers to participate

Hi-fi Prototypes Warp
  • Perceptions of the tester/reviewer
  • formal representation indicates finished nature
  • comments on color, fonts, and alignment
  • Time
  • encourage precision
  • specifying details takes more time
  • Creativity
  • lose track of the big picture

The Basic Materials
  • Large, heavy, white paper (11 x 17)
  • 5x8 in. index cards
  • Tape, stick glue, correction tape
  • Pens markers (many colors sizes)
  • Overhead transparencies
  • Scissors, X-acto knives, etc.

Constructing the Model
  • Set a deadline
  • dont think too long - build it!
  • Draw a window frame on large paper
  • Put different screen regions on cards
  • anything that moves, changes, appears/disappears
  • Ready response for any user action
  • e.g., have those pull-down menus already made
  • Use photocopier to make many versions

(No Transcript)
Preparing for a Test
  • Select your users
  • understand background of intended users
  • use a questionnaire to get the people you need
  • dont use friends or family
  • I think customers are OK (Rettig disagrees)
  • Prepare scenarios
  • describe the product during actual use
  • make prototype support these (small, yet broad)
  • Practice to avoid bugs

Conducting a Test
  • Four testers
  • greeter - puts users at ease gets data
  • facilitator - only team member who speaks
  • gives instructions encourages thoughts,
  • computer - knows application logic controls it
  • always simulates the response, w/o explanation

Conducting a Test
  • observers - take notes and recommendations
  • Typically session is 1 hour
  • preparation, the test, debriefing

Conduction a Test (cont.)
  • Greet
  • get forms filled, assure confidentiality, etc.
  • Test
  • facilitator hands written tasks to the user
  • must be clear detailed
  • What are you thinking right now?, Think aloud
  • observe -gt no a-ha, laugh, gape, etc.

Conduction a Test (cont.)
  • Debrief
  • ask questions, gather impressions, give thanks

Evaluating Results
  • Sort prioritize observations
  • what was important?
  • lots of problems in the same area?
  • Create a written report on findings
  • gives agenda for meeting on design changes
  • Make changes iterate

Advantages of Low-fi Prototyping
  • Take only a few hours
  • no expensive equipment needed
  • Can test multiple alternatives
  • fast iterations
  • number of iterations is tied to final quality
  • Almost all interaction can be faked

Wizard of Oz Technique
  • Faking the interaction
  • from the film The Wizard of OZ
  • the man behind the curtain
  • Long tradition in computer industry
  • prototype of a PC w/ a VAX behind the curtain
  • Much more important for hard to implement
  • Speech handwriting recognition

The Note Transcriber
  • low fidelity prototyping works well
  • I hope my chi paper gets in
  • Im very tired today
  • Love James

Informal Uis for Early Stage UI Design
  • Brainstorming
  • put designs in a tangible form
  • consider different ideas rapidly
  • Incomplete designs
  • do not need to cover all cases
  • illustrate important examples
  • Present several designs to client

Goal of Research
  • Allow designers to
  • quickly sketch interface ideas
  • test these ideas with users
  • transform to a more finished design without

Quickly Sketch this...
Add Behavior...
Transform it to this...
Drawbacks of Current Tools
  • Require specification of lots of detail
  • must give specific instance of a general idea
  • e.g., exact widgets, fonts, alignments, colors
  • designers led to focus on unimportant details
  • evaluators focus on wrong issues
  • Take too much time to use
  • poor support for iterative design
  • sketched interface took 5 times longer with
    traditional tool (no icons)

Paper Sketches
  • Advantages
  • support brainstorming
  • do not require specification of details
  • designers feel comfortable sketching
  • Drawbacks
  • do not evolve easily
  • lack support for design memory
  • force manual translation to electronic format
  • do not allow end-user interaction