Transcript Prototyping - Bowling Green State University

Prototyping and Development Tools
laua leventhal
Why Discuss Prototyping Here?
• Iteration is an integral part of the UI
lifecycle
– Prototyping is our mechanism for iteration
• GUI builders can be used as prototyping
tools
Introduction
• Many in the software industry have discovered that building the
system the user really wants and needs is tricky.
• Often users are not sure of exactly what functions they would like the
system to perform.
• Many times users have difficulty communicating their needs to the
system developers.
• In addition, users may have faulty expectations regarding automation.
• Users may be unaware of some of the power, flexibility and features
computer systems can offer. Alternatively, they may overestimate the
functionality they can obtain for their projected investment.
What is Rapid Prototyping
• Rapid prototyping facilitates the
development of software projects and
especially UI's
Traditional Non-Prototyped
Approach
• In the traditional Waterfall Model of
software engineering, each phase of the
software development cycle occurs in
linear, non-iterative order.
Prototyping Approach
• Rapid prototyping is a technique which
directly addresses these user problems.
• A prototype is a model and is not a refined
and finished product.
• But both artifacts which are primitive and
those close to a finished product can both be
“prototypes”.
Steps in the Prototyping
Lifecycle
• Understanding and developing a prototype is a kind of
engineering task SO there is a lifecycle model for the
process.
• Is the prototype feasible and affordable? (understanding
context)
• What features and how sophisticated is the prototype to
be? (understanding problem)
• Designing and implementing the prototype (design)
• Evaluating the prototype against its requirements
• Using the prototype to evaluate usability, design features,
risk, user response and so on..
• Even the prototyping lifecycle can be iterative.
What to Prototype?
• During the prototyping process the developer must decide
whether to build a full prototype of the target system or
only a portion of the system.
– global vs. local prototype
• Developers must also decide whether the prototype will be
incorporated into the final system or if it is to be a "throwaway" effort.
• Additionally, developers must schedule and integrate
prototyping into the development cycle. Prototypes
require time and resources which must be included in the
cost and time schedule of the project.
Advantages of Prototyping
– Developers may only truly understand the
system requirements when they can see some
form of implementation in action.
– Prototypes can lead to improved functional
requirements, improved interaction
requirements, and easier evolution of
requirements.
– Some studies suggest that prototyping can lead
to improvements in products and
communication among developers.
More potential advantages
• the user interface is carefully designed and
tailored to the users' needs
• the user becomes involved more
completely in the evolution of the product
• the low cost and ready availability of at
least some prototyping tools make their
acquisition feasible even on a low budget
and less productive.
Approaches to Prototyping
• One approach is to distinguish the type of prototype by detail and goals
of prototype. Prototypes of different levels of detail may then be
appropriate at different types in the Usability Engineering Lifecycle.
– One categorization
• Scenario/storyboard.
• Demonstration.
• Version 0.
– A second categorization. “High fidelity” prototypes are detailed and close
to a final product where “low fidelity” prototypes are more crude.
• Another approach is to only prototype only some aspects of a design
(say some problematic dialog boxes). These are called “vertical” and
“horizontal” prototypes
• A final strategy focuses on the “Wizard of Oz”
Scenario and Storyboard
Prototypes
• The user is presented an example on paper or on a
computer screen of the proposed layout of control objects
(specific interactions) or of the proposed template for the
interaction as a whole.
• Each frame of the storyboard or scenario represents one
page or screen the user might see output from the system.
• Goal is to show the user the visual layouts of the proposed
UI.
– However, the system only simulates the processing of
fixed user data or queries.
Demonstration Prototypes
• Users are allowed to enter their own
restricted set of data or to perform some
limited set of functions.
• Goal is for users to see the visual
appearance of the interface *PLUS* some
sense of how the interaction will go.
Version 0
• Version 0
– a working release of the system
– lacks full functionality
• Advantages
– evolves into the final product
– user sees progress being made on the product.
• The main disadvantage
– reluctant to throw out a bad design
Which of These Types of
Prototypes to Use
• Remember that prototyping is work and so has a cost (we
hope that we eventually save money and resources
though).
• So we need to choose and schedule our prototyping
carefully.
• Use Storyboards for
– Initial brainstorming
– When there is one piece that you can’t figure out.
Which of These Types of
Prototypes to Use? (2)
• Use Demonstrations for
– Sessions to get feedback from users on both visual
appearance and interaction
– Users will get a much better idea of your proposal from
demonstrations than from storyboards.
– Note that users may be confused if they type their own
data and get weird results. Your sessions with users
should be well planned and orchestrated.
Which of These Types of
Prototypes to Use (3)
• Use V0
– You are pretty sure of the general look and interaction
patterns
– You wish to test for confirmation.
– You wish to test for completeness and accuracy of
function.
– You are committed to developing good enough quality
code in the prototype for the final product.
A Second Categorization Based on Degree of
Detail in the Prototype
• Some authors prefer to simply distinguish
between “low fidelity” and “high fidelity”
prototypes
– Low Fidelity = little actual implementation (eg.
Storyboards, demonstrations)
– High Fidelity = major amounts of
implementation (eg. V0)
Horizontal and Vertical
Prototypes
• Vertical prototypes
– high-fidelity on only a portion of the final product, leaving the rest
of the product as a low-fidelity prototype.
• Horizontal prototypes m
– highly detailed and interactive at a high level but have minimal
details at lower levels.
• Rudd, Stern and Isensee (1996) suggest that these
prototypes may be used when the developer needs the
advantages of a high-fidelity prototype but only has the
time or resources to develop a low-fidelity prototype.
“Wizard of Oz” Prototypes
•
•
•
Remember the Great Oz?
Story setup “... A girl named Dorothy is transported from her house along with her dog
Toto by a tornado and sent to the magical land of Oz. All is fine and well in Oz except
Dorothy just wishes to go home. …” In the Land of Oz, Dorothy is told to find the great
Wizard of Oz to help her. She makes friends with others who need help from the Great
Oz including the Scarecrow, the Tin Man and the Cowardly Lion.
The Great Oz “...Just then, the doors to the Wizard's chamber open, with the booming,
intimidating words: "Come forward." They grab each other for strength and creep
forward. The Lion covers his eyes and begs: "Tell me when it's over...I wanna go home!"
In a spectacular, dazzling confrontation with the Wizard, appearing as an enlarged,
monstrous, disembodied head suspended above a throne/altar with roaring plumes of
fire, his stentorian voice booms: "I am Oz, the Great and Powerful. Who are you?" He
repeats again even louder: "Who are you?" Trembling, Dorothy tiptoes up to speak for
the group, stammering: "If you please, I am Dorothy. The small and meek. We've come
to ask..." The Wizard's thundering voice interrupts - he already knows why each of them
has come to him as they each step forward…”
The Great and Powerful Oz
“Wizard of Oz” Prototypes (2)
• Unknown to the person experiencing the prototype, the
developer actually runs the prototype; he or she receives
input from the user and simulates output.
• An advantage of this style of prototyping is that the
developer can observe the user in their interactions, even
though the real system has not been finished.
• The primary difficulty of this approach is that the wizard
must provide a compelling simulation in order for the user
to interact with the system in a meaningful way.
Tools for Storyboard prototypes
• drawing software
Tools for Demonstration
Prototypes
• programming languages
• hypermedia
Tools for Version 0 (1)
• Specific Prototyping Software
– These tools often generate the code to drive the
UI
Tools for Version 0 - UIMS
– User Interface Management Systems.
• originally conceived of as tools to allow the user to
customize the interface of a software package while
maintaining the functionality.
• The tool facilitates the structuring of the screen, the
handling of the dialogue between the human and the
computer, and the sequencing of events.
UIMS (2)
• Good UIMS handles all aspects of UI:
–
–
–
–
–
–
Handles mouse, keyboard
Validates user inputs
Handles input errors
Process “un-do”
Update display when data changes
Manage screen
UIMS (3)
• Goals of UIMS
– Put UI processing that is common across
applications in separate module to promote
code reuse.
– Code reuse leads to consistent UI’s across
applications
– Encourage designers to separate design of
presentation and design of code
UIMS (4)
– Advantages
• code that is created is separate from the functional
parts of the system.
• enforce style consistency among the user interfaces
created using that particular UIMS.
– evolving towards graphical programming
languages
– Disadvantages
• high cost, limited availability and special hardware.
Examples
• Show components of UIMS
• Show example of Foley’s IDL
Tools for Version 0
• GUI builders and 4gl’s
– spreadsheet packages and database packages
may have screen generators
– Visual Basic.
– rapidApp
– TCL/TK
Show X
Show RapidApp