HCI INTERFACE DESIGN

Initial Design

5/31/2020 1
 COPY INTERACTION TECHNIQUES
FROM
OTHER SYSTEMS
• look at what other applications are doing
• become familiar with leading
applications
• learn WHY things are done the way they
are.
– e.g. why tool palettes and not pull down
menus

5/31/2020 2
 INTERACTION (DIALOG)
DESIGN
Dialog between the computer and the user
• Supports work & task flow analysis
• Describes how the task will get done with
the computer
• Issues
– Freedom to choose or highly constrained
– Closure
– Modes
– Windows and Dialogs

5/31/2020 3
 TRADITIONAL INTERACTION
STYLES
• Command language (or command
entry)
• Form fill-in
• Menu Selection
• Direct Manipulations

5/31/2020 4
COMMAND LANGUAGE

5/31/2020 5
 COMMAND LANGUAGE
Advantages
• Flexible.
• Appeals to expert users.
• Supports creation of user-defined "scripts" or macros.
• Is suitable for interacting with networked computers even
with low bandwidth.
Disadvantages
• Retention of commands is generally very poor.
• Learnability of commands is very poor.
• Error rates are high.
• Error messages and assistance are hard to provide
because of the diversity of possibilities plus the complexity
of mapping from tasks to interface concepts and syntax.
• Not suitable for non-expert users.
5/31/2020 6
 FORM FILL-
IN
Advantages
• Simplifies data entry.
• Shortens learning in that
the fields are predefined
and need only be
'recognised'.
• Guides the user via the
predefined rules. Classic

Disadvantages
• Consumes screen space.
• Usually sets the scene for
rigid formalization of the
business processes. Modern
5/31/2020 7
 MENU SELECTION
A menu is a set of options displayed on the screen where the selection and
execution of one (or more) of the options results in a state change of the interface

Advantages
• Ideal for novice or intermittent users.
• Can appeal to expert users if display and selection mechanisms
are rapid and if appropriate "shortcuts" are implemented.
• Affords exploration (users can "look around" in the menus for the
appropriate command, unlike having to remember the name of
a command and its spelling when using command language.)
• Structures decision making.
• Allows easy support of error handling as the user's input does not
have to be parsed (as with command language).

Disadvantages
• Too many menus may lead to information overload or
complexity of discouraging proportions.
• May be slow for frequent users.
• May not be suited for small graphic displays.
5/31/2020 8
 DIRECT MANIPULATION
Direct manipulation captures
the idea of “direct
manipulation of the object of
interest” : which means that
objects of interest are
represented as
distinguishable objects in the
UI and are manipulated in a
direct fashion.

Characteristics:
• Visibility of the object of
interest.
• Rapid, reversible,
incremental actions.
• Replacement of complex
command language syntax
by direct manipulation of the
object of interest. Drag and drop files
5/31/2020 9
 DIRECT MANIPULATION

One of the earliest commercially available

direct manipulation interfaces was MacPaint
5/31/2020 10
 DIRECT MANIPULATION
• Advantages
• Visually presents task concepts.
• Easy to learn.
• Errors can be avoided more easily.
• Encourages exploration.
• High subjective satisfaction.
• Recognition memory (as opposed to cued or free recall
memory)

Disadvantages
• May be more difficult to program.
• Not suitable for small graphic displays.
• Spatial and visual representation is not always preferable.
• Metaphors can be misleading since the “the essence of
metaphor is understanding and experiencing one kind of thing in
terms of another”, which, by definition, makes a metaphor
different from what it represents or points to.
• Compact notations may better suit expert users.
5/31/2020 11
 WINDOWS
(HISTORY)
• Why do we have all those little rectangles
on the screen?
• Xerox Palo Alto Research Centre (PARC)
invented: mouse, rectangular window,
scrollbar, push-button, object-oriented
programming, pulldown menus…
• Steve Jobs and Bill Gates saw and
copied.
– Apple: graphics Microsoft: objects

5/31/2020 12
 PARC‟S PRINCIPLES

• Visual metaphor - pictures are used to

represent functions and commands
• Modeless – mode is a state of the
program that changes the effects of user
actions
– Considered extremely harmful (for command-
line ui‟sthat is case-sensitive)
• Overlapping Windows - clear way of
moving from different parts of a program
– But it actually gets in the way of usability when
there are too many windows and the5/31/2020
user 13
get lost (thus the task bar)
 “DON‟T MODE ME IN”
• UNIX „vi‟is an example of “evil” modes
– same actions have different meanings
depending on context
– „edit‟replaces your file with „t‟
• Paint programs are a good example of
“good” modes.
– Modes are visible

5/31/2020 14
 RULES FOR
MODES
• Use modes consistently
• Do not initiate modes unexpectedly
• Make modes visible
• Make it easy to escape modes
• … without consequences.

5/31/2020 15
 RULES FOR
MODES
• One of the most important reasons why
those first GUIs were better was that they
were the first user interfaces to restrict the
range of their vocabulary for
communication with the user.

5/31/2020 16
 APPLICATION TO INTERACTION
DESIGN
• Try to decide how many windows
(dialogs)
• Keep them to a minimum
• Be careful of data-centric designs
– This leads to interruption of task flow with data
integrity tasks
• Be careful of process-centric designs
– They may violate business rules
• Look for user-centric designs
Catalog number
nticipating not found!
errors and Create
likely item in the
situation
a
– Catalog
Catalog number not
number not found!
found! Do you
Dofirst want to add s
you want to add
stock catalog
ititto
tothe
thecatalog
catalog 5/31/2020 17

OK
Add Now Add Later Change Item
 INTERACTION DESIGN
ISSUES
• Minimum effort decision flow
– make the most common path easy
– may be contrary to keeping related things
together
– finding the common path is not easy and
again requires that we understand the user
• Decide what goes into each window
– identify a “base state” for main window
• main objects and functions
• build function controls in the window where they
are used
– Decision - Stack or sequence of modal
windows? 5/31/2020 18
 ALLOCATING CONTROLS TO
WINDOWS
• Good visibility -strong mapping implies:
– # of controls matches # of functions
– minimize # of controls keeping easy
appearance
• Guidelines
– present the minimum to complete the
common path
– provide clear cues for the exceptional cases

5/31/2020 19
 TERMINOLOG
Y
• Modal, zoomed, maximized
• iconized, minimized, closed
• MDI (multi-document interface) vs SDI
• Tabbed dialogs to reduce complexity
– also „fold-out‟ panes

5/31/2020 20
 MESSAGE BOXES

• Not as easy to program as they look

• Some rules
– message must be simple and use good
grammar
– the answers must make sense as responses
– the answers must be distinguishable
– the message must contain all relevant
information
– the message should identify which
application
5/31/2020 21
 WAYS OF CONTROLLING
TASKFLOW
• Guidance - installation wizards, coaches
– should go away easily and lead to learning –
this is the concept of scaffolding with fading
• Locks – to prevent action errors or
message prompts.
– Strict locks prevents actions (e.g. gray options)
– Interlocks prompt when another action is
taken (e.g. save prompts)
• Forcing via model dialogs.
– Avoid hard locks
5/31/2020 22
 PALETTES VS MENUS
• Palette selections can manage MODES
– Good for doing one thing multiple times
– Feedback through cursor change and palette
changes
– Easy to switch modes.
• Menu selections should not change modes
– Modes not as visible
– Hard to specify graphical parameters to show menu
selections
• So... use a tool palette in your application if:
– you have operations that are often repeated
consecutively
– you can think of good icons for them
– they require mouse interaction after the selection of
the operation to specify fully what the operation does.
5/31/2020 23
 TOOLBARS VS
MENUS
• Toolbars are visible and immediate while
menus are not
• Menus are for the newcomer - Toolbars
should be designed to provide fast
access to frequent commands for the
expert
• Toolbars use icons for compactness -
Menus use words for explanation.
• Therefore toolbars need explanation
(tooltips) but Menus do not.
5/31/2020 24
 TWO GUIDELINES FOR
DESIGN
• 1. Provide a good conceptual model
– allows user to predict the effects of our actions
– problem:

• designer‟s conceptual model communicated to user through

system image:
– appearance, written instructions, system behaviour through
interaction,
– transfer, idioms and stereotypes

• if system image does not make model clear and

consistent, user will develop wrong conceptual model
Des ign User's model
Model

Us er
Designer

System
5/31/2020 25

Sys tem
im age
 TWO GUIDELINES FOR DESIGN
(CONTINUED)
• 2. MAKE THINGS VISIBLE
– RELATIONS BETWEEN USER‟S INTENTIONS,
REQUIRED ACTIONS, AND RESULTS ARE
• SENSIBLE
• NON ARBITRARY
• MEANINGFUL

– VISIBLE AFFORDANCES, MAPPINGS, AND

CONSTRAINTS

– USE VISIBLE CULTURAL IDIOMS 5/31/2020 26

 INTERFACE METAPHORS
• Interface designed to be similar to a physical
entity but also has own properties
– e.g. desktop metaphor, web portals
• Can be based on activity, object or a
combination of both
• Exploit user‟s familiar knowledge, helping them
to understand „the unfamiliar‟
• Conjures up the essence of the unfamiliar
activity, enabling users to leverage of this to
understand more aspects of the unfamiliar
functionality
5/31/2020 27
 BENEFITS OF INTERFACE METAPHORS

• Makes learning new systems easier

• Helps users understand the underlying
conceptual model
• Can be very innovative and enable the
realm of computers and their
applications to be made more accessible
to a greater diversity of users

5/31/2020 28
 PROBLEMS WITH INTERFACE
• Break conventional and cultural rules
METAPHORS
– e.g. recycle bin placed on desktop
• Can constrain designers in the way they
conceptualize a problem space
• Conflict with design principles e.g. User placed
at locus of control
• Forces users to only understand the system in
terms of the metaphor
• Designers can inadvertently use bad existing
designs and transfer the bad parts over
• Limits designers‟ imagination in coming up with
new conceptual models 5/31/2020 29

http://www.cooper.com/articles/art_myth_of_metaphor.htm
5/31/2020 30
5/31/2020 31
5/31/2020 32
5/31/2020 33
5/31/2020 34
5/31/2020 35
 CONCEPTUAL MODELS: FROM
• Interaction mode:
INTERACTION MODE TO STYLE
– what the user is doing when interacting with a system,
e.g. instructing, talking, browsing or other
• Interaction style:
– the kind of interface used to support the mode, e.g.
speech, menu-based, gesture

5/31/2020 36
 TRADITIONAL INTERACTION
STYLES
• Command language (or command
entry)
• Form fill-in
• Menu Selection
• Direct Manipulations

5/31/2020 37
 MANY KINDS OF INTERACTION
STYLES AVAILABLE…
• Command
• Speech
• Data-entry
• Form fill-in
• Query
• Graphical
• Web
• Pen
• Augmented reality
• Gesture

5/31/2020 38
 WHICH INTERACTION STYLE TO
• Need to determine requirements
CHOOSE?and
user needs
• Take the budget and other constraints
into account
• Also will depend on suitability of
technology for activity being supported
• This topic will be covered more later
when discuss how to actually design
conceptual models

5/31/2020 39
 EXAMPLES OF NEW PARADIGMS
• Ubiquitous computing (mother of them all)
• Pervasive computing
• Wearable computing
• Tangible bits, augmented reality
• Attentive environments
• Transparent computing
– and many more….

5/31/2020 40
 TWO EXAMPLES: BLUEEYES (IBM) AND
COOLTOWN (HP)
• Visionary approaches for developing
novel conceptual paradigms

Almalden.ibm.com/cs/blueeyes/
cooltown.hp.com
5/31/2020 41
The real future?