Requirements Analysis and Design Engineering - PowerPoint PPT Presentation

Loading...

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



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Requirements Analysis and Design Engineering

Description:

... 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: http://lyle.smu.edu
Category:

less

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

Title: Requirements Analysis and Design Engineering


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

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

4
Producing Fast Prototypes
  • 1. Place less emphasis on the efficiency of the
    implementation
  • 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

5
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

6
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

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

8
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
    interaction
  • scanned images instead of live video

9
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

10
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

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

12
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

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

14
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
    interface
  • Paper, scissors, and stickies
  • Maximum speed and flexibility

15
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?

16
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

17
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

18
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
    usable
  • example - a rollover
  • some designers will use new technologies only
    because it looks cool

19
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
    supplies
  • Screen shots with hand drawn annotations is fine

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

21
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

22
Introduction
  • 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

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

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

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

27
Dimensions of Prototyping
  • Scope
  • The amount of the system included in the
    prototype
  • 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

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

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

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

31
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

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

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

36
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
    detail/depth.

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

38
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.

39
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).

40
Wizard of Oz Prototyping
41
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
    system

42
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

43
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

44
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

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

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

47
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

48
Low-fidelity Prototyping
James Landay Cal Berkeley
49
UI Design Cycle
50
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

51
The Model Human Processor
?
Working Memory
Visual Image Store
?
Eyes
?
?
?
Ears
Fingers, etc.
52
The Model Human Processor
Eyes
Cognitive Processor
Motor Processor
Perceptual Processor
Ears
Fingers, etc.
53
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

54
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

55
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

56
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

57
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

58
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.

59
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

60
(No Transcript)
61
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

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

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

64
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.

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

66
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

67
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

68
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
    features
  • Speech handwriting recognition

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

70
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

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

72
Quickly Sketch this...
73
Add Behavior...
74
Transform it to this...
75
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)

76
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
About PowerShow.com