1. CS 321: Human-Computer Interaction Design
Lesson Seven
Prototyping
Wireframing
High-Fidelity Prototyping
Chapter 11
Chapter 5

2. Specifications and Models
Communicating a proposed design with a diagrammed model or textual specifications has several drawbacks:
Features tend to be presented in isolation (e.g., bullet items), inhibiting the achievement of a global vision.
Text and work models tend to be abstract, making them difficult for users to relate to their actual work experience.
These approaches are not event-driven, which can prevent users from envisioning the planned dynamics of the proposed system.
A preferred approach for communicating the design is prototyping, modeling a reasonably close facsimile of the final product.
CS 321
Lesson Seven
Prototyping
Page 85

3. The Advantages of Prototyping
Prototyping provides a tool with which designers can validate the usability of their proposed system.
Prototyping provides an effective means of communication between designers and users, ensuring a common understanding of what will and will not be accomplished with the proposed system.
Prototyping affords opportunities to clarify misconceptions between designers and users before the investment in time and resources becomes too great.
CS 321
Lesson Seven
Prototyping
Page 86

4. Low-Fidelity Prototyping
A low-fidelity prototype is sketchy and incomplete, and has some characteristics of the target product but is otherwise simple, usually in order to quickly produce the prototype and test broad concepts.
Advantages
Fast - no coding required
Quickly IDs basic design flaws
Focuses on overall functionality and layout
Refines GUI pre-implementation
Allows multidisciplinary participation
Encourages ideas from designers & users
Disadvantages
Produces no code, no algorithms, no databases, and no images – just a rough layout demonstrating the main functionality
Doesn’t find all GUI problems
Ignores issues with interface style
Incompatible with mere upgrades
May seem unprofessional to users
May be overwhelming for large systems
CS 321
Lesson Seven
Prototyping
Page 87

5. Wireframing
The modern approach to low fidelity prototyping is wireframing, in which static versions of digital controls are laid out, with simple hyperlinks connecting the various versions of the interface’s appearance.
With a more professional appearance and without the distraction of the “human computer”, wireframing has supplanted paper prototyping as the low-fidelity platform of choice with many HCI developers.
CS 321
Lesson Seven
Prototyping
Page 88

6. Running a Low-Fidelity Prototyping Session
After Each Prototyping Session...
Hold a post-mortem meeting to discuss the areas where the user had problems or made suggestions.
Review what happened in chronological order, objectively gathering observations, identifying the larger design issues and then prioritizing.
Facilitator
The interviewer who leads the user through the walkthroughs, answering questions but not actually helping the user traverse the interface!
Observer
The note-taker & video recording monitor.
After identifying and prioritizing the design issues, discuss possible changes, but use a rat-hole watcher to circumvent overdoing the debate.
CS 321
Lesson Seven
Prototyping
Page 89

7. Design Changes After The Session
Use iterative refinement, making design changes or changes to the walkthrough scenarios prior to the next interview session.
After early sessions, err on the side of making broad changes from which more can be learned. Your team can always revert to an earlier design.
After later sessions, err on the side of making changes of smaller scope, since it may be impractical to pursue solutions to large problems at this stage.
CS 321
Lesson Seven
Prototyping
Page 90

8. High-Fidelity Prototyping
A high-fidelity prototype is quite close (in appearance and interaction) to the final product, with lots of detail and functionality.
Advantages
Enables fine-tuning of GUI
Superior control over what the user can see
Resetting or undoing actions is possible & easy
Particularly useful for upgrading existing software
Disadvantages
Curtails major changes
Not conducive to large design teams
Tends to make users feel that design is complete
Produces code that needs to be discarded
Produces no algorithms, no databases – just a refined interface with some proposed control widgets and images (all subject to change during testing)
Requires all designers to have technical backgrounds
CS 321
Lesson Seven
Prototyping
Page 91

9. Prototype Iterations
As the development team iterates through the prototypes, the structure and flow of the design are refined and the level of commitment to the design increases.
The low-fidelity prototype uses a sketchy wireframe to establish the basic structure of the interface and the overall flow of its interactions.
The high-fidelity prototype uses ad hoc software to refine the interface’s structure and to fill in the details of the interactions’ flow.
CS 321
Lesson Seven
Prototyping
Page 92

10. HIGH-FIDELITY PROTOTYPE
Advanced interface of design to finalize components and interactions
WIREFRAME
Preliminary design of interface to determine whether overall design is viable and whether planned interactions are effective
PERSONAS
Model representative user templates who will be considered when contemplating design decisions and their effects
AFFINITY DIAGRAM
Brainstorm ideas regarding what the user does and doesn’t want and need
WORK MODELS
Document your team’s understanding of the who, how, when, what, and where of the user’s current practices
CONTEXTUAL INQUIRY
Acquaint yourself with actual users to determine their current practices and future needs
Summary: Contextual Inquiry to Prototyping
CS 321
Lesson Seven
Prototyping
Page 93