prototyping & user manuals “it is often said that users can't tell you what they want,...
TRANSCRIPT
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.”
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
• 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
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)
More Info
• Rapid prototyping Google Glass• Wireframing & prototyping tools list
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