Human Computer Interaction: Prototyping

HUMAN COMPUTER INTERACTION
Prototyping
Prototyping
• What is a prototype?
• Why prototype?
• Evolutionary vs. throwaway prototype
• Low vs. high fidelity prototyping
Prototype
 A prototype is an early sample,
model, or release of a product
built to test a concept or process
or to act as a thing to be
replicated or learned from
What is a prototype?
Limited representation of a product
design
• Scale models, etc.
• In interaction design it can be (among other
things):
• a series of screen sketches
• a storyboard, i.e. a cartoon-like series of
scenes
• a piece of software with limited functionality
Why prototype?
 People cannot describe what they want, but they are

quick to recognize what they do not like!
 Makes requirements, designs and specifications into

concrete tangible objects for evaluation
Why prototype?
Why prototype?
Why prototype?
 Evaluation and feedback are central to interaction design
 Stakeholders can see, hold, interact with a prototype more easily
than with a document
 Clarifies vague requirements with concrete communication
between stakeholders
 Team members can communicate effectively
 You can test out ideas for yourself
 It encourages reflection
 Prototypes answer questions, and support designers in choosing
between alternatives
 Sells product ideas
What to prototype?
 Work flow, task design, sequence i.e. in the order
they happen
 Screen layouts and information display i.e. icons,
home buttons, back buttons, colors etc.
 Critical areas i.e. Undo button, help, exit, stop etc.
 Every thing you need to convey the product
experience (but no more)
Prototyping Techniques
 Throw away prototyping (rapid prototyping)
 Prototype developed as part of a throw-away approach
 Evolutionary prototyping ( Rapid Application

Development (RAD))
 as for incremental prototyping but with evolving
design
Throw-away / Rapid Prototyping
 Prototype developed as part of a throw-away
approach.
 It will not form part of the final solution.
 It is a useful way of exploring ideas, and gaining
feedback from user.
Evolutionary Prototyping
 An initial prototype is presented to user.
 They provide feedback and suggestion for improvement.
 Each stage of this prototype evolves toward the final
system hence it is called as evolutionary prototype.
Prototype fidelity
Low fidelity High fidelity
 Quick, cheap, easily  Is usually computer based

changed
 Prototype looks more like
 Paper based
the final system than a
 Sketches of screens low-fidelity version.
with post-it notes (task
sequences)  Usually include
 Card-based mouse/keyboard
 Storyboards interaction
Prototype fidelity
Low fidelity: An Example
Menu Bar
Scroll
Bar
Opening Secondary
Contents Menu
High fidelity: An Example
Why lo-fi is often better than hi-fi
 At least in the early stages of design…
 Hi-fi prototypes can be problematic
 users can often think it’s the real thing
 users tend to focus on small details (e.g. font size) rather than the bigger picture
 developers get over-attached having done the programming
 Lo-fi prototypes avoid these issues...

 easy to change
 users concentrate on big picture (e.g. structure and function)
 it’s disposable
 So before investing in hi-fi, we need to get lo-fi versions right

Sketching
 Sketching is important to low-fidelity prototyping
 Don’t be self-conscious about drawing ability.
Practice simple symbols
Paper prototyping
Resources
 https://www.youtube.com/watch?v=dt1bQsZ68iw
 https://www.youtube.com/watch?v=B7M0fVXdov
M
 https://www.youtube.com/watch?v=EHCX1rt02Co
Eight Golden Rules of Interface Design
 1 Strive for consistency.

Consistent sequences of actions should be required in similar
situations; identical terminology should be used in prompts,
menus, and help screens; and consistent colors should be used
throughout
 2 Enable frequent users to use shortcuts.

As the frequency of use increases, so do the user's desires to
reduce the number of interactions and to increase the pace of
interaction. Abbreviations, function keys, shortcuts are very
helpful to an expert user.
•3 Offer informative feedback.

For every operator action, there should be some system feedback.
•4 Design dialog to yield closure.

Sequences of actions should be organized into groups with a beginning,
middle, and end.
 5 Offer simple error handling.

As much as possible, design the system so the user cannot
make a serious error. If an error is made, the system should
be able to detect the error and offer simple, comprehensible
mechanisms for handling the error.
 6 Permit easy reversal of actions.

This feature relieves anxiety, since the user knows that errors
can be undone; it thus encourages exploration of unfamiliar
options.
 7 Support internal locus of control.
Experienced operators strongly desire the sense that they are in
charge of the system and that the system responds to their actions.
Design the system to make users the initiators of actions rather
than the responders.
 Navigation & task activation should always be clear and well-marked.
 Things as simple as adding an extra keystroke or button press can make
a great difference when looking at tasks that are life critical.
 8 Reduce short-term memory load.

The limitation of human information processing in short-term
memory requires that displays be kept simple and helpful.
Example of feedback & communication
Example: Easy use of reversal
Example: internal locus of control
Tips
 Keep the interface simple. The best interfaces are
almost invisible to the user. They avoid unnecessary
elements and are clear in the language they use on
labels and in messaging
 Strategically use color and texture. You can direct
attention toward or redirect attention away from items
using color, light, contrast, and texture to your advantage
 Add default values to help lessen user burden
 Carefully choose font style and size so that it is
readable.
Some useful resources to choose color
 https://www.smashingmagazine.com/2010/02/color
-theory-for-designer-part-3-creating-your-own-colo
r-palettes/
 https://www.smashingmagazine.com/2016/04/web-
developer-guide-color/
There’s no need to reinvent the wheel. What
interfaces do your users spend the majority of
their time on? Considering using popular
interfaces, such as Facebook, Instagram,
Google and Gmail as UI design examples to
help solve similar issues on your interface.
Users will appreciate the familiarity and
simplicity of those UI patterns
How to start – make lo-fi
Technique: Sketching
1. Design a simple logo

2. Design sign up Page
3. Design Sign in Page
4. Design Main/Home page
5. Design Menu/Side pane
1. Add main tasks in it
2. Add log out button
3. Add help
4. Add feed back
5. Design profile page
6. Design task pages (Divide this evenly in all group members)
1. Add default values (if some input is being taken)
2. Add navigation where necessary
3. Design error message screens
4. Design confirmation message screens
Lo fidelity technique 2: Storyboarding.
 It is about conveying an idea.
 Often used with scenarios, bringing more detail,

and a chance to role play
 It is a series of sketches showing how a user might

progress through a task using the device
Storyboards should convey -
setting
•People involved
•Environment
•Task being accomplished
Sample scenario
 “The Thomson family enjoy outdoor activity holidays and want to
try their hand at sailing this year. There are four members of the
family: Sky who is 10 years old, Eamonn who is 15 years old, Claire
who is 35, and Will who is 40. While out on a shopping trip they call by
at the travel agents in their local town to start exploring the possibilities.
The travel organizer is located in a quiet corner of the agents’ office,
where there are comfortable seats and play things for young children.
They all gather around the organizer and enter their initial set of
requirements—a sailing holiday for four novices. The stand-alone
console is designed so that all members of the family can interact easily
and comfortably with it. The system’s initial suggestion is that they
should consider a flotilla holiday, where several novice crews go sailing
together and provide mutual support for first-time sailors…”
Hi Fi Prototype
 Many prototyping tools are available
 You can use any of your choice
 Adobe xd
 Just in mind
 proto.io
 protopie
Just in Mind
Getting started tutorials
 https://www.justinmind.com/support/start-prototypi
ng-web-and-mobile-apps/
 https://www.justinmind.com/support/scrolling-cont
ent/
 https://www.youtube.com/watch?v=xuSXeOIjkMc
&list=PLy_5EGmtPAJwXZ-bEVp8posn7tAl8CUX
P&index=2
 https://www.youtube.com/watch?v=bTXc95jvwss
&list=PLy_5EGmtPAJwXZ-bEVp8posn7tAl8CUX
P&index=7

Human Computer Interaction: Prototyping

Uploaded by

Copyright:

Available Formats

Human Computer Interaction: Prototyping

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Human Computer Interaction: Prototyping

Uploaded by

Copyright:

Available Formats

HUMAN COMPUTER INTERACTION

 People cannot describe what they want, but they are

 Makes requirements, designs and specifications into

 Evolutionary prototyping ( Rapid Application

Low fidelity High fidelity

 Quick, cheap, easily  Is usually computer based

 Lo-fi prototypes avoid these issues...

 So before investing in hi-fi, we need to get lo-fi versions right

 1 Strive for consistency.

 2 Enable frequent users to use shortcuts.

•3 Offer informative feedback.​

•4 Design dialog to yield closure.​

 5 Offer simple error handling.

 6 Permit easy reversal of actions.

 8 Reduce short-term memory load.

1. Design a simple logo

 It is about conveying an idea.​

 Often used with scenarios, bringing more detail,

 It is a series of sketches showing how a user might

You might also like

•3 Offer informative feedback.

•4 Design dialog to yield closure.

 It is about conveying an idea.