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

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

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

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

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

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

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

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

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

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