Prototyping & User Manuals

“It is often said that users can't tell you what they want, but when they see

something and get to use it, they soon know what they don't want.”

Prototyping

What is a Prototype?

• When you hear the term prototype, you may imagine something like a scale model of a building or a bridge, or maybe a piece of software that crashes every few minutes

• But a prototype can also be– a paper-based outline of a screen or set of screens– an electronic 'picture'– a video simulation of a task– a three-dimensional paper and cardboard mockup of a

whole workstation– a simple stack of hyperlinked screen shots

What is a Prototype?

• A prototype allows stakeholders to interact with an envisioned product, to gain some experience of using it in a realistic setting. and to explore imagined uses

What is a Prototype?

• When the idea for the PalmPilot was being developed, Jeff Hawkin (founder of the company) carved up a piece of wood about the size and shape of the device he had imagined

• He carried this piece of wood around with him for a week

• Is this as crazy as it sounds?

What is a Prototype?

• It allowed him to simulate scenarios of use– What does the size of the device feel like?– Putting it in a pocket and taking it out many times

a day – does it fit? Is the process quick and easy?– At what points during the day would he want to

use its features? In which environments?

What is a Prototype?

• A prototype is a limited representation of a design that allows users to interact with it and to explore its suitability– Not designed to replicate full functionality– Acts as an interim step between conception of a

design and full implementation of it– Answer questions about the design and helps

designers to choose between alternative designs

What is a Prototype?

• Prototypes can serve different purposes– test out the technical feasibility of an idea– clarify some vague requirements– do some user testing and evaluation, using

empirical research methods or a more qualitative approach

Types of Prototypes: Low Fidelity

• Low fidelity prototyping– A low-fidelity prototype is one that does not look

very much like the final product• For example, it might use materials that are very

different from the intended final version, such as paper and cardboard rather than electronic screens and metal

– Low-fidelity prototypes are useful because they tend to be simple, cheap, and quick to produce

Types of Prototypes: Low Fidelity

• Because they’re cheap and quick to produce, they’re also easy and fast to modify– Especially useful during early development!

Types of Prototypes: Low Fidelity

• Storyboarding– Consists of a series of sketches or screenshots

showing how a user might progress through a task using the product under development

• The purpose for doing this is two-fold:– First, to produce a storyboard that can be used

to get feedback from users and colleagues– Second, to prompt the design team to consider the

scenario and the use of the system in more detail

Types of Prototypes: Low Fidelity

• “But I’m not an artist!”

Types of Prototypes: Low Fidelity

• That’s OK! In fact, it can be an advantage– More “sketch-like” art can actually help remind

people that they’re working with an early prototype

– If your prototype looks too “slick,” people may expect full functionality

Types of Prototypes: Low Fidelity

• You can devise your own symbols and icons for elements you might want to sketch, and practice using them– They don't have to be anything more than simple boxes,

stick figures, and symbols– Elements you might require in a storyboard sketch, for

example, include 'things' such as people, parts of a computer, desks, books, etc., and actions such as give, find, transfer, and write

– If you are sketching an interface design, then you might need to draw various icons, dialog boxes, and so on

Types of Prototypes: Low Fidelity

• So that covers prototypes of interfaces and interaction design… what about lower fidelity prototypes of physical designs?

• You can draw those too!– Level of detail can vary

Types of Prototypes: High Fidelity

• High-fidelity prototyping– A high-fidelity prototype looks a lot more like the

finished product• Uses materials that you would expect to be in the final

product• May use software tools like Flash, Visual Basic,

PowerPoint, or specialized prototyping software to prototype interfaces

– Useful for selling ideas to people and for testing out technical issues

Types of Prototypes: High Fidelity

• Prototyping in PowerPoint…yes, it actually works!

Prototypes: Downsides & Compromises

• Downsides of low fidelity prototypes:– The device usually doesn’t actually work!– Could accidentally design something that is not

technologically feasible• One reason it’s important to have technical knowledge

in a design team

Prototypes: Downsides & Compromises

• Downsides of high fidelity prototypes:– Take a longer time to build– Reviewers and testers tend to comment on

superficial aspects rather than content– Developers are reluctant to change something

they have crafted for hours

Prototypes: Downsides & Compromises

• Two common compromises that often must be traded against each other are breadth of functionality provided vs. depth of functionality– These two kinds of prototyping are called

horizontal prototyping (providing a wide range of functions but with little detail, i.e. breadth) and vertical prototyping (providing a lot of detail for only a few functions, i.e. depth)

Horizontal vs. Vertical Prototypes

More Info

• Rapid prototyping Google Glass• Wireframing & prototyping tools list

User Manuals

User Manuals• General guidelines

– Make sure the instructions actually map on to the product in all respects

– Include a one-page quick start guide– Present instructions as step-by-step procedures– Tell the user what functions there are, and what they are for, not

just how to use them– Avoid marketing waffle - they already bought the product!– Write the user manual in sync with the product's development

timeline, not under pressure of shipping deadlines– Consider the needs of disabled users and provide alternative

manuals in Braille, large print, audio etc.– User-test the product and the user manual with real users

User Manuals: First Impressions

• First impressions are important– Many users never actually get as far as the user

manual unless they have a problem– When they do use the manual, it can be tossed

aside as just too difficult to deal with– When this happens the user’s capacity to interact

successfully with your device or system suffers

User Manuals: First Impressions

• In order to get past this point, the user manual must make a strong and positive first impression:– Avoid a text-book look– Make purposeful and effective use of color– Make effective use of pictures and diagrams– Provide lots of white space– Use a clean, readable font

User Manuals: Instructions

• It is critical that the instructions are easy to read and are understandable by all users

• Many user manuals have instructions that are incomplete, incorrect, or simply have no bearing on the actual product– Issues with translation

User Manuals: Instructions• Instruction guidelines:

– Provide step-by-step sequences in the correct order– Provide visual stepping stones (e.g. Step 1, Step 2 etc.)– Avoid lengthy paragraphs– Use everyday words and terms– Explain what a function or feature is for (in basic practical terms) as

well as "How to" instructions– Check that the instructions match the actual product– Explain symbols, icons and codes early– Do not assume the user has prior experience or product knowledge– Usability test the instructions alongside the product using novice

users (not designers or product experts)– Write in the present tense and the active voice

User Manuals: Designing Individual Pages

• In addition to effective instructing, the use of color, the text and fonts used, and the icons and graphics can all either make for an easy experience or can derail the user

User Manuals: Designing Individual Pages

• Ensure that font size is adequate (use at least 12 point font)• Ensure high text-to-background contrast (black on white is best)• Avoid using multiple font styles• Font weight can be used sparingly to denote importance• Use color coding consistently• Provide plenty of white space between sections and around images

and paragraphs• Provide a section (or margins) for the users to make their own notes• Use consistent layout from page to page• Consider colorblind users when using color• Avoid using saturated blue for text and small detail

– never use blue on a red background