Design for Interaction

Introduction
1. Introduction to Interaction Design
2. Starting Points
Interaction Design Basics
3. Laws of Interaction Design
4. Design Research
5. Craft of Interaction Design
Interface Design
6. Elements of Visual Interface Design
7. Branding
8. Best Practices
Epilogue
9. A look into the not-so-distance future
Designing for Interaction

What is interaction design?
By interaction design, we mean
designing interactive products to
support the way people
communicate and interact in their
everyday lives. (Foley, 2007)
References:
Foley., J., “Interaction Design
beyond human-computer
interaction 2nd Edition,” 2007
John Wiley & Sons Ltd, pp.8
Introduction ::

Introduction ::
The process of interaction design
Developing alternative
design that meet
those requirements
Evaluating what is being built
throughout the process and
the user experience it offers.
Identifying needs and
Establishing requirements
for user experience
Building interactive
Versions of the designs
so that they can be
communicated and accessed.

Introduction ::
2. Starting Points
Defining the Project
Business Goals
Constraints
Gathering Background Information
Creating a Design Strategy

Introduction ::
2. Starting Points
Value of a Design Strategy
Fosters cross department communication
 Pulls together all goals for all to see
 Documents any consistencies or inconsistencies
 Allows goals, priority, scope to be discussed
 Allows objectives for reaching goals to be discussed
Specifies description of problem and definition of good solution
 First step towards interface requirement
 Ties all together by identifying critical aspect of solution
Communications positives message to team
 Including others’ point of view and concerns
 Valuing and trusting previous work
 Not reinventing the wheel
 Working as efficiently as possible
Incorporate existing documentation if possible to increase efficiency

Introduction ::
2. Starting Points
Example: e-Commerce Site Business Goals
Convert new clients
“Up sell” current customers
Target User
Everyone with internet access
General Tasks
Learn, Select, Buy
Constraints
Browser based (Multiple)
Interfacing layer integration with ERP
Marketing/Branding Goals
Economical, reliable, consumer oriented
Critical Success Factors
The right information to help customers
Smooth selection to purchase
% increase in sales

Interaction Design Basis ::
Interaction design, being a new field, doesn’t have many hard
and fast rules, or “laws”.
However, there are a handful of laws that interaction designers
have used repeatedly with success.
These laws should guide the work, not dictate it.
1. Moore’s Law
2. Fitts’ Law
3. Hick’s Law
4. The Magical Number Seven
5. Tesler’s Law of the Conservation of Complexity
6. The Poka-Yoke Principle
7. Direct and Indirect Manipulation
8. Feedback and Feedforward

Moore’s Law
In 1965, Gordon Moore, a co-founder of microchip maker
Intel, predicted that in every two years, the number of
transistors on integrated circuits will double.
Amazingly, this is exactly what has occurred and is still
occurring, with staggering results. In regards to this law,
designers need only to understand that devices, will be faster,
smaller and more powerful still.
Interesting fact:
The modern laptop or even your mobile Smartphone now has more processing power then NASA’s
Mission Control Center when the space agency send a man to the moon in 1969.

Fitt’s Law
Published in 1954 by psychologist Paul Fitts, Fitts’ Law
simply states that the time it takes to move from a starting
position to a final target is determined by 2 factors:
Distance to the target
Size of the target
This law model the acts of pointing, either by mouse-like device or fingers.
The larger the target, the faster it can be pointed to.
Likewise, the closer the target, the faster it can be pointed to.

Hick’s Law
The Hick-Hyman Law, says that time it takes for users to
make decisions is determined by the number of possible
choices they have.
The time it takes to make a decision is also affected by:
 repeated use
 the format of choices (sound, words, videos, or buttons)
Hick’s Law claims that a user will more quickly make choices from one menu
of 10 items than from 2 menus of 5 items each.
Implications
It is better for products to provide users many choice simultaneously instead of organizing the choices
into hierarchical groups, ie drop down menus.
Designers should engage in a depth vs breath information display approach in this manner.

The Magical Number Sever
1956, Miller, a Princeton University psychology professor,
determined that the human mind is best able to remember
information in chucks of seven items, “plus or minus two”.
After five to nine piece of information (navigation labels,
features, or set of numbers), the human mind starts
making errors.
Implications
This laws run counter to Hick’s Law, however designers should also note that as long as information
is displayed on screen, users don’t have to keep them in their short term memory; they can always
refer to them.
Designer should take care not to design a product that causes cognitive overload. For example, a
CRM product should never force call center users to type a new phone number information on three
separate screens in the system.

Tesler’s Law of the Conservation of Complexity
Larry Tesler coined Tesler’s Law of the Conservation of
Complexity, which states that some complexity is inherent to
every process.
There is a point beyond which you can’t simplify a process any
further; you can only move the inherent complexity from one
place to another.
Implications
Designers need to acknowledge that all processes have elements which cannot be made simpler, no
matter how we tinker them.
Designers need to look for reasonable places to move this complexity into the products they make.

The Poka-Yoke Principal
Examples
Examples include are cords (USB, Firewire, power and others) that fit into electronic devices only in a
particular way and place.
Japanese industrial engineer and quality guru Shigeo Shingo
created the Poka-Yoke Principle in 1961 while working in
Toyota.
Poka-yoke roughly translates in English to mistake proofing:
avoiding (yokeru) inadvertent errors (poka).
Designers use poka-yoke when they put constraints on products to
prevent errors, forcing users to adjust their behavior and correctly execute
an operation.

Direct and Indirect Manipulation
Considerations
Designers need to decide how digital objects in their products can be manipulated: directly, indirectly,
or (more and more frequently) in both ways.
Direct Manipulation is a term coined by University of
Maryland professor Ben Shneiderman in the early 1980s.
It refers to the process in which, by selecting a digital object
with a finger or with a mouse or other extension of the hand,
we can then do something DIRECTLY to the object: move it,
turn it, drag it, scale it.
In indirect manipulation, we use a command or menu or other means that
isn’t directly a part of the digital object to alter that object.

Feedback and Feedforward
Feedback is some indication that something has happened.
Every action by a user, no matter how slightly, should be
accompanied by some acknowledgement of the action:
Moving a mouse should move the cursor.
We know that feedback is essential; therefore design
appropriate feedback is the designer’s task. The designer
need to determine how quickly the product or service will
response and in what matter.
Feedforward, related to feedback, is knowing what happen before you perform
an action. Feedforward can be a straightforward message (“Pushing this button
will submit your order”) or simple cues such as hyperlinks with descriptive name
instead of “Here”.
Feedforward allows users to perfrom an action with confidence because they
have an idea of what will happen next.

4. Design Research
There are four approaches to design:
 User-centered design (UCD)
 Activity-centered design
 System design
 Genius design

4. Design Research
Approach Overview Users Designer
User-Centered Design Focuses on user needs and
goals
Guide the design Translates user needs and
goals
Activity-Centered Design Focuses on the task and
activities that need to be
accomplished
Perform the activities Creates tools for actions
Systems Design Focuses on the components
of a system
Set the goals of the
system
Makes sure all the parts of
the system as in place
Genius Design Relies on the skill and
wisdom of designers used to
make products
Source of validation Is the source of inspiration
Four Approaches to Design

4. Design Research
Data Gathering Methods
Technique Good for Kind of Data Advantages Disadvantages
Interviews Exploring issues. Some quantitative but
mostly qualitative.
Interviewer can guide
interviewee if
necessary.
Encourages contact
between developers
and users.
Time consuming.
Artificial environment
may intimidate
interviewee.
Focus groups Collecting multiple
viewpoints
Some quantitative but
mostly qualitative.
Highlights areas of
consensus and
conflict. Encourages
contact between
developers and users.
Possibility of dominant
characters.
Questionnaires Answering specific
questions.
Quantitative and
qualitative.
Can reach many
people with low
resource.
Makes sure all the parts
of the system as in
place
(continued)

4. Design Research
Data Gathering Methods (continued)
Technique Good for Kind of Data Advantages Disadvantages
Direct observation
in the field
Understanding
context of user
activity.
Mostly qualitative. Observing actual work
gives insights that other
techniques can’t give.
Very time-consuming.
Huge amount of data.
Direct observation
in a controlled
environment
Learning about
procedures,
regulations and
standards.
Quantitative and
qualitative.
Can focus on the details
of a task without
interruption.
Results may have
limited use in the
normal environment
because the conditions
were artificial.
Indirect
observation
Observing users
without disturbing
their activity; data
captured
automatically
Quantitative
(logging) and
qualitative (diary).
User doesn’t get
distracted by the data
gathering; automatic
recording means that it
can extend over long
periods of time.
A large amount of
quantitative data
needs tool to support
to analyze (logging);
participants’ memories
may exaggerate (diary).

4. Design Research
Data Gathering Issues
Data gathering sessions need to be planned and executed carefully. These are the 4 key
issues for a data gathering session to be successful.
 Setting goals
 The relationship with participants
 Triangulation
 Pilot studies

5. Craft of Design Interaction
Persona
 User Group and User Profiles
 Environment Profiles
 Task Profiles
Scenarios and Task Analysis
 Storyboards
 Task Analysis
 Task Flows
 Use Case
Prototyping
 Information Architecture
 Wireframe
 Testing

Persona
Personas are a documented set of archetype people who are involved with a product
or service. They’re supposed to give designers a sense that they are designing for
specific people, not just “users”, who, if ill-defined, can be twisted to serve any
purpose.
 Specific target audience group
 Focuses on probabilities, not possibilities
 Target on major user group
 Design up to three persona, rarely more

Persona >> User Group/Profile
Products and services have some target users; a user group. Focusing on many user
groups creates design challenges. Selecting the important user groups to focus on is a
business decision.
Characteristic Roles
Frontline Call Centers Contributor/
Approvers
Age/Gender 75% Female, Median Age
32
75% Female, Median Age 27 80% Males, Median Age
35
Education Diploma-Degree Diploma Degree-Grad School
Language English, Mother Tongue English, Mother Tongue English
Computer/Web
Experience
Med to High Med Low to Med
Domain Expertise Low to High Low to Med High
Task Knowledge Initial: Low to Med
After one week: High
Initial: Low to Med
After one week: High
Low to Med
Expectations Ease of use,
comprehensiveness,
speed of task
Speed of Task, ease of use Ease of use,
comprehensive
functionality

Persona >> Task Profile
One way to select which tasks to analyze and redesign, is to examine which tasks are
performed by which type of users.
Tasks Roles
Customer
Service
Representative
Outside Sales Customer Administrator
Request New User Name &
Password
X
Find Customer (Search Browse) X X X
View Customer X X
Edit/Enter Customer data X X
View Product Comparison X X
View Buying History X X
View Reports X X

Persona >> Environment Profile
Different environments call for different interface design. There are several factors designer
need to evaluate to know their implications.
Characteristic Variable Design Implications
Location Indoor/outdoor
Weather exposure
Equipment Options
Position entry
Workspace Cramped/spacious Display size
Position entry
Lighting Bright to dim Color
Contrast
Fonts
Hardware Monitor size/resolution
Color system
Sound card
Video card
Legibility
Presentation Options
Color palette
Compatibility
Software OS
Browser
Technology constraints
HTML/script support
Response Time
Detail design
Compatibility

Example: Persona
Janice Tan, Customer Relationship Manager
Work Profile
1. Janice is on her break time and relaxed. There is a new loan product with KLIBOR interest rates
being launch recently from the bank. Janice is interested in this product and wishes to understand
more about this product and its additional information, so she can recommend this product to
suitable customers.
1. A regular customer walks into the bank branch. The customer wish to know more about Time
Deposits and its promotions. Janice wants to get the information on time deposits quick.
28 years old
Works for Consumer Banking, join the bank 3 years ago
Has completed her accounting degree
Currently doing her CPA (Australia)
Planning to get married
Uses the internet to chat with friends
Fun-loving, risk adverse, smart, charming and loves to talk.
Love dinning and drinks
Handles customers with complex requirements
Delicate to her role and will try to please customers
“Information is nothing, if it’s not there when I need it”

Scenarios and Task Analysis
Scenarios provide a fast and effective way to imagine the design concepts in use. In a
sense, scenarios are prototypes built of words.
 Simple Stories – about what it will be like to use the product
 Protagonists of these stories are personas
 Scenarios can be and should be used across different personas
 1st time use scenarios works for almost every product
Scenarios Key points

Storyboards
Once a scenario have been created, designers can create a storyboard to help illustrate
the product or service in use.
 Technique from filmmaking and advertising
 Used narrative with images display features in a context manner
 Used in conjunction with wireframes (later) to illustrate the details of
complicated process/functions
Storyboards Key Points

Task Analyses
A task analysis is a raw list of activities
that the final design will have to support.
Scenarios will consist and span across
different individual tasks.
Task Analyses Key Points
 Documented in
spreadsheet/word
document/wireframes
 Categorized by
 As a checkpoint on whether design
fulfills all task required
1. Function
2. Level of access
3. Personas

User visits
ShareOne
User has
Information to
share?
Goes Information
Discovery flow
Choose domain (VS)
Fill in details
Needs to mass
notify?
Fill in recipients
details
End process
No
No
Yes
Yes
Task Flows
Once tasks have been established,
putting those task into sensible order, or
flow, is an important step.
Putting tasks into flows helps the
designer begin to see the product take
shape.
Task Flows shows logical connections
that will be built into wireframes. You
can’t, for instance, use the Back button
on the web browser to go back until
you’ve been to more than one page.

Use Cases
Development team have used use cases in the design of software for years.
Use case for designers help in bridging requirement and functionality to both development
teams and business analysts.

Information architecture
This realize all the individual task flows in the product. It organizes all the tasks and
information into group and levels, focusing on users on high priority tasks.
Categorical Schemes
 Alphabetical, Chronological, and Geographical
schemes are distinct and effective for limited
products
 Audience based schemes may not always work,
since the categories may not be distinct, or users
may not know which category they fall into
 Topical schemes are typical (and good) for contact
site, but hardest to design appropriately
Task-based schemes are used mainly for
applications and transaction site
 Hybrid schemes – any mixture of the above, but
might cause users confusion.

Alphabetical Chronological
Geographical

Audience
Topical
Task
Hybrid

Hierarchical Organization
Our cognition is tuned to hierarchical
structures; they are familiar and easy to learn.
A broad and shallow structure is easier to
user than a narrow and deep structure.
Promote the content in the hierarchy:
 Bring frequently-used or critical information to the
top
 Provide summary tables to limit the need to drill
down
 Always aim to reduce clicks and paging

Hierarchical Organization
Easy to Access
Faster, Efficient
For Power Users
Shallower
Easy to learn
Accurate
For Novice users
Deeper

Wireframe
The wireframe itself is a detailed view of a particular
product.
Wireframes should rough out the form of a product.
Form is shaped by three factors:
Thus wireframes need to include placeholders for contents functions as well as elements
for navigating them (buttons, switches, menus, keystrokes, and so on).
Content
Include texts, movies, images, other media. Text, unless known or proposed by
designer (button labels: Save), is typically dummy text.
Functionality (“form follows functions”)
Consist of control – buttons, sliders, input boxes, etc. As well as feedback to
those controls.
Means of accessing or navigating to those two things
Consist of various navigational methods – hyperlinks, dropdowns menu, complex
manipulations.

Wireframe - Annotations
Annotation are brief notes that describe non obvious
items on the wireframe.
Here’s a partial list of wireframe object that should be
annotated:
Controls
What happens what a button is pushed (on top of feedback)
Conditional items
Object that change based on context. (Items dimmed depending on
what users is doing)
Constraint
Anything with a business, legal, logical, or technical constraint
(length of password)
Anything, due to space, could not be shown in the wireframe
itself (every item on the long dropdown menu)

Example: Wireframe

Example: Wireframe 2

Prototyping and Testing
Paper prototype
 Fastest to create and demonstrate
 Walkthrough of the system on paper
 Pages capture on paper is one moment of the design
 Will not confuse viewers that it’s the final product
Digital prototype
 Varies functionality complexity
 User more prone to comment on visual design than function
 Might think that it’s the final product
 Easily distributed

Testing
User/Product Testing
 You go to them
 You talk to them
 You write things down
Truism:
You seldom get it right the first time.
Testing will reveal flaws, both know and unknown. Designer look for patterns.
Example: users keep stumbling while attempting to complete a form.

Interface Design ::
 Layout
 Typography
 Color
 Controls and Widgets
 Icons
 Sound
 Standards
Visual Interface Design

Interface Design ::
Visual Interface Design >> Layout
At the core of all screen visual design is layout: where and how the features, controls,
and content are placed.
Layout is particularly important for small screens, since screen real estate is at a
premium.
Grid Systems
Helps designer organize information into coherent pattern.
Dividing the screen into basic, rational chucks, including gutter, which are blank
space that separate rows and columns.

Interface Design ::
Typical Screen Resolutions

Interface Design ::
Typical Grids

Interface Design ::
Typical Grids (continue)

Interface Design ::
Visual Interface Design >> Visual Flow
Visual Flow can be achieve in a number of ways, including by the use of the gutters-whitespace. In the
western world, the eye generally travels left to right, top to bottom, as though the page design as gravity
-“Diagonal Balance”.
The Gutenberg Diagram created by typographer named Edmund Arnold in the 1950s illustrate this.
The top-left corner of a Gutenberg Diagram is the primary optical area
(POA) and the bottom-right is the terminal anchor (TA). Because a
Westerner’s eye moves naturally in this direction, layouts that support
this diagonal balance are generally considered good design.
Other Key Points
Objects that are aligned appear to be related
Objects that are indented beneath appear to be subordinated
Objects near the top will generally seem more important than those farther down
POA
TA

Interface Design ::
Visual Interface Design >> Typography
Typefaces (fonts)
Generally categorized into two groups:
serif
have details – serifs – on the end of the strokes that make up the letterforms. Easy to read
and excellent for long passage for text, as in books.
sans-serif
no or less prominent details at the end of the strokes. Used for shorter passages
of text which are meant to be scanned.

Interface Design ::
Typography Placeholder Example

Interface Design ::
Typography Key Points
Size
 Screen 9-12 pts
 Mobile 6-10 pts
 Anything below 6 is extremely difficult to read
 Common is 6-9 for small size devices
Alignment
Flush left and ragged right alignment is more legible than flush
right/justified. Justify only text that has long line text and use flush
right sparingly and never for long passages
Rivers
Formed when the whites spaces between words seemingly line up
and form a “river”. Avoid these.
Line Length
Goldilocks principle: not too long, not too short, but just right.
Strive for line lengths of 55 to 75 characters
Leading
Vertical space between lines.
Typically +2pts. Example 10pt font should have 12pt lead.
More leading generally required for – small fonts (below 8pts), long
and short line lengths

Interface Design ::
Visual Interface Design >> Color
Color has a number of functions in
visual interface design. While color
are used to create personality and
tone, color is a fantastic way to draw
the eye to specific elements as well,
particularly when the color contrasts
the other elements on a page.
We are all hardwired to notice
differences, not sameness(es). So a
little dab of color can go a long way
toward drawing eyes straight to very
specific things on a page.

Interface Design ::
Color Basics
All colors have three main properties:
Hue
The color itself, the color within the optical
spectrum of light
Value (Brightness)
How much black it has, how dark or light it is
Intensity (Saturation)
Brightness or dullness of the color

Interface Design ::
Color Wheel and Relationships
Primary Colors
Red, Blue, Yellow
Secondary Colors – Created by mixing 2 primary
colors
Purple, Green, Orange
Analogous Colors – Colors Adjacent to each
other
Example: Blue, Green, Yellow
Complementary Colors – Colors across each
other
Example: Red and Green

Interface Design ::
Color Key Points
Complementary colors should be used with care. Although such colors make each other
vivid, used together they can also be difficult to focus on.
Chromostereopsis
This is an effect which occurs when two colors side by side seem to cause both color to
vibrate. In general, colored text on a colored background are hard to execute well.
This is giving me a headache.

Interface Design ::
Visual Interface Design >> Controls and Widget
Controls provide both the affordances needed to understand what the product is capable
of and the power to realize that capability.
We’ll talk about the basic controls that designers used. Almost all these controls have
their own standard feedback mechanisms that designers have to consider.
Switch
It moves from one state(“on”) to another (“off”) and stays there until changed.
Button
Buttons are the designer’s best friend. Once you start to look for them, it’s apparent that they are
everywhere, all over our interfaces. In MS Word alone, there are about 30 buttons visible at any given time.

Interface Design ::
Knob/Dials
Knob provide more control than a button. Knob can move freely
or simple turn from an establish point to another on a wheel.
Slider
Sliders, like Knobs, are used for subtle control of a feature, often
to control amount of data displayed. Sliders with more than one
handle can be used to set a range with a range.
Handle
A handle is simple a protruding part of an object that allows it to
be moved, or in some case resized.
Menu
Drop-down menus allow designer to cluster navigation, functionality
or even content together without having to display it all at once.

Interface Design ::
Tree Navigation/Twist
Twist turn up or down, either revealing or hiding content or a menu in a panel.

Interface Design ::
From Elements

Interface Design ::
Mobile Controls

Interface Design ::
iPhone Controls

Interface Design ::
Visual Interface Design >> Icons
Many digital products use icons. Icons are visual metaphors representing features or
actions. They act as both shortcuts and visual reminders for users.
However the choice is crucial. A confusing image can obscure much more than it can
illuminate. For example, the disk icon have come to mean “save”, even though,
increasingly, many young people have never seen a floppy disk!
Use icons wisely, whenever possible have accompany text to go together with the icons.

Interface Design ::
Visual Interface Design >> Sound
Sounds is both over – and underused in
interaction design. Nearly everyone has
had the experience of going to a Web
site only to have it blast music, sending
you to turn the thing off. But sound, done
well, can subtly enhance an interface.
Sounds are generally cues and usually
used as feedback that something has
happened.
Sound test
How can you tell if a sound will, over
time, become an annoyance? Record it.
Test it on others. Listen to it frequently.
Use the application yourself and see if
you become annoyed. If you are,
chances are other will be as well.

Interface Design ::
Visual Interface Design >> Standards
Over years, industrial, interaction designers
have came out with the standard way of
how interface elements will behave and
should behave.
Do we break them? Should Ctrl-C or
Command-C always copy whatever is
selected?
A design that ignores these standards
means that your users will have to learn
something different, something that
doesn’t work like their other application
work. A deviation from such can cause
frustration and annoyance.
Obey standard unless there is a
truly superior alternative.

Interface Design ::
8. Best Practices
Best Practices >> Login Syndrome
Login is not an action, in the same way that shoe is not an action. It’s a noun – as “the
login interface”.
You don’t want users to “login.” That makes no sense. You want users to “log in”.
It’s not a noun you want.
Most people may never give a single conscious thought to whether this is displayed
as one word or two. But even without conscious attention, the incorrect use of the
term can make an application less professional.

Interface Design ::
8. Best Practices
Best Practices >> Login Syndrome (continue)
The difference is so simple, but so important. Ensuring that every last
detail is correct communicates to users that
“I care. 100 percent. All the way.”
“We care, but not 100 percent.”

Interface Design ::
8. Best Practices
Best Practices >> Information Architecture
(Telling the software What to Do)
Information
Primary Tasks users will
perform.

Interface Design ::
8. Best Practices
Best Practices >> Information Architecture (continue)

Interface Design ::
8. Best Practices
Best Practices >> Information
Architecture (continue)
Software doesn’t exist just so we can click buttons
and play with controls. It exists so we can
accomplish tasks. So we can do things.
We want to tell it what to do, not the other way
round. If you notice, a lot of software navigation is
designed to make us feel like we’re in charge.
Menus in everything from MS Word to Adobe
Photoshop include options to do things like Edit
and View.
Use Task Based Label for Navigation.
Verb-Noun Pair.
This enables us to feel like we’re directing the
software.

Interface Design ::
8. Best Practices
Best Practices >> Aging Links
How do you show age on WebPages? Tea
strains? Fading text? Rugged Edges?
Use search engine, you are able to retrieve
articles from 3 years ago with ease. Without
timestamp, how do you know it was not
created yesterday?

Interface Design ::
8. Best Practices
Best Practices >> Aging Links (continue)
Most recent headlines
Title of most recent story (…)
Title of slightly less recent story (…)
1. Title of most recent story (…)
2. Title of slightly less recent story (…)
Default list
Ambient Signifier
as Navigation Cue
Numbered list; however
list is still flat.
Ambient Signifier as
Navigation Cue –
With Age

Interface Design ::
8. Best Practices
Best Practices >> Aging Links (continue)
The notion of ambient signifier is almost
completely untapped on the Web yet,
(exception: Tags Clouds) and there are likely
many ways that it can be applied.
Note
This practice should only be use if it makes sense.
Do not force it.

Interface Design ::
8. Best Practices
Best Practices >> Labeling the interface
There are loads of input fields, check boxes, radio buttons, controls on the Web that lack
context. They ask user to do things with explaining what those things mean.
Never assume that users know you meant when labeling your form.
Look at each and every label in your application and ask yourself if someone who has
never seen the app before will know what it means.
Change all the “no”s and show the “yes”es to 3 people who never saw you app before.
Likely, there will be more labels to change.

Interface Design ::
8. Best Practices
Best Practices >> Labeling the interface (continue)
(Feedforward / Poka-yoke)
Provide instructional text if possible.
Always provide field helps wherever necessary
(eg: fields which are domain specific)

Interface Design ::
8. Best Practices
Best Practices >> Auto-complete
The auto-complete design pattern is an example of a poka-yoke prevention device.
Auto-complete can help users prevent typographical errors and ensure their search are
more effective.
(Poka-yoke)
Auto-Complete dropdown
Caveats
 Users who stared a keyboard often fail to notice those suggestions.
 User often choose a suggested term over their own, even when theirs would have been more effective.
 Logics of suggestions might not be correct, avoiding showing suggestion until enough data is provided.
 Users read screen from left top to right bottom, so anything that appears magically after a page has been
loaded needs enough feedback to users, so user can “read” it.

Interface Design ::
8. Best Practices
Best Practices >> Navigation Searches
Thanks to Google, pagination interfaces now all fall into a certain standard. Below are the
some of the basic examples.
Offering a method to return to search results is also a good practice.
Item Pagination
Search
Pagination
Alphanumeric
Filter Pagination
Back to results

Interface Design ::
8. Best Practices
Best Practices >> Perfecting Ok / Cancel
Having meaning labels instead of “Ok” can go a long way towards user’s expectations
about the result of clicking the button. (Feedforward)
Differentiate between Primary and Secondary buttons. By giving both button equal visual
importance, users have to actually read both labels – on both buttons – to decide which
to click. Apply Fitts’ Law, take away some of the focus from the secondary action.
This way, the Continue button is more
prominent and easier to click. If users
want to continue, they doesn’t even
need to brother reading the label.
The “Go Back”
action loses focus

Interface Design ::
8. Best Practices
Best Practices >> Task Wizard
While in a task, always communicate where user has been, where they are now, and
where they are going, and when it’s going to end. (Feedforward)
“There are only 3 steps required and
I’m at step 1.”
Allows user a quick access method to trackback and review without the application
prompting.

Interface Design ::
8. Best Practices
Best Practices >> Communicating Error
When we make mistakes, we blame ourselves, just as our users do. And although we may
be generally consider ourselves rather smart, for some reason we think it’s our fault when
mistakes occur instead of blaming the design of the application.
With AJAX and basic Java scripting, on the fly checking is now accessible to all
developers however it is still up to the designers to convert the context and the message.
Always provide suitable and
understandable feedback.

Interface Design ::
8. Best Practices
Best Practices >> Limits on Text Inputs
Every so often a form filed requires a character limit. This can happen with passwords,
comments. This can easily frustrated the users if not carefully designed. A few examples
below.
Title
You can enter no more than 50 characters.
Title
Error appear after submission of form.
“OK, Let me count. 1…2…3”
“My ‘l’ is not
working…broken keyboard?”

Interface Design ::
8. Best Practices
Best Practices >> Limits on Text Inputs (continue)
Solutions on text inputs using Poka-yoke.
Title
Title
You can enter up to 33 more characters.
You can enter up to 0 more characters.
Feedback number will turned red as
attention cue to users once it reach 20
or less character.

Interface Design ::
8. Best Practices
Best Practices >> Change Design
Always feedback to users (all users) that
an interface revamp will be taking place.
Make good use of white space
Notification Areas, Pop Up modular
windows within the apps to announce the
change.
Whatever happens, don’t surprise users
with a major overhaul on some random
Tuesday morning. Let them know what’s
going to happen so they can prepare for
the change, get excited about them, and
start talking about your application again.

Epilogue ::
9. A look into the not-so-distance
future
Everyware
The era of ubiquitous computing already started; it
just isn’t widespread yet.
As microprocessors and sensors grow ever cheaper
and also more powerful, it’s easy to imagine that the
ratio of human to computers becoming one to
thousand. And we wouldn’t be controlling more of
these computers via a keyboard or mouse.
These interfaces have no faces; we’ll engage with
them using voice, touch, and gestures.

Epilogue ::
Voice
Voice controlled interfaces are already with us,
particularly on phones. People can call their banks
and perform transactions or dial their mobile phone
with just their voice.
What are different to create, from both technical and
design perspectives, are voice-controlled interfaces
in public space, when a device or system is always
listening for a command. How will the system know
whether it’s a command?

Epilogue ::
Gestures
You stand before a semitransparent screen and
simple by gesturing with your hands, you move
things around the screen, zooming documents and
video in and out.
Think Minority Report. MS Surface on a wall. iTable.
To most computers, people consist of two things:
hands and eyes. The rest of the body is ignored.
However as our devices gain more awareness of
movement of our body through GPS (Global
positioning System) and SMS (sudden-motion
senors), they will become better able to response to
the complete human body including gestures.

Epilogue ::
While you get ready in the morning, your bathroom
mirror shows you your calendar, the weather report,
or even an email from your friend.
The bus stop might indicate when the next bus will
arrive and how pack it is.
At office, a wall might be your monitor, turning on
when you tell it to.
Any room you are in throughout the day might play
music of your choice and adjust to the temperature
you like based on the clothes you are wearing.
Interaction designers have a major part to play in the design
of ubicomp systems, and it will be an exciting and interesting
time.
The possibilities for interactions are simple astounding.
Far fetched? Some of these
are already happening and
it’s up to interaction
designers to break through.

Epilogue ::
Interaction design isn’t only about making a device or application look attracting. It’s about finding the
appropriate representation - visual, audible, physical – that inspires user input and guides system output.
"Design is not just what it looks like and feels like. Design is how it works."
- Steve Jobs

Research ::
References
 Designing the Moment, Robert Hoekman, jr. 2008, New Riders
 Designing for Interaction, Dan Saffer, 2008, New Riders
 Interaction Design beyond human-computer interaction, 2007, J. Foley. 2007, John Wiley & Sons
 User-Centered Analysis and Conceptual Design, Human Factors International
Designing for Interaction

Design for Interaction

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to Design for Interaction

Similar to Design for Interaction (20)

Recently uploaded

Recently uploaded (20)

Design for Interaction