Prototyping and Development Tools

laua leventhal

Reference

• Chapter 13 in protobook

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 "throw-away" 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