10.

Interaction Design

Contents

INTERACTION STYLES..................................................................................................................... 2

COMMAND ................................................................................................................................................................ 2

MENUS ........................................................................................................................................................................ 3

QUESTION AND ANSWER DIALOGUES ............................................................................................................ 7

FORM-FILL................................................................................................................................................................ 7

DIRECT MANIPULATION...................................................................................................................................... 8

JP 11/11/2004
BSc Applied Computing Human Computer Interaction: 10. Interaction
Designs

Interaction Styles

Computers are used to process information. Since the information is needed by people, people
and computers have to interact. Different computer applications (programs) follow different styles
of the interaction, even for the same operations. The following examples show how you can
replace all occurrences of the word "apple" with the word "orange" in a text file, using:
a) UNIX standard stream text editor "sed"
$sed “s/apple/orange/gw new_file” fruits_file
$mv New_File Fruits_File

b) MS Word

It is obvious, that the interaction style influences the overall usability of a program. On the other
hand, there are no good or bad interaction styles by default - each of them could suit a particular
user group. Moreover, there are specific requirements for each interaction style to make it
expressive and usable.

Command
Early applications were command-driven. Users were expert, knowledgeable and not afraid of
computers. They could be expected to overcome any obstacles by sheer perseverance.
Commands provide a way of expressing instructions to the computer directly. Communication
between user and computer is purely textual.
Commands can take the form of function keys, single characters, short abbreviations, whole
words, or combination of the first two. An issue with command interface is the number of
keystrokes required to complete a command.
Commands must be remembered, so care must be taken in choosing the commands for the
system.

Command-entry remains popular in applications where the users are experts and become very
familiar with the commands they can use, for example:
• System administrators, particularly on Unix and Linux systems

Page 2
BSc Applied Computing Human Computer Interaction: 10. Interaction
Designs

• Network administrators – Cisco devices (routers, switches, etc) use a command entry
interface
In the hands of an expert, command entry can be much more efficient than any other interaction
style.

Menus

A list of options is presented to the user and the appropriate decision is selected by typing some
code or selecting the option required. Unlike command-driven systems, menus do not require the
user to remember the item they want; they only need to recognize it. Menus favour recognition
over recall. This is often described by cognitive psychologists as favouring ‘knowledge in the
world’ over ‘knowledge in the head’. The majority of user interfaces are now designed to make
use of knowledge in the world.
Menus are used extensively in GUI systems such as Windows, and are also widely used to
provide navigation systems in web sites. Horizontally oriented menus in web pages are often
referred to as navigation bars.
Menus were used before GUI systems were common. Many DOS applications used menus, and
Windows systems still use non-GUI menus for start-up options

Menus like this can take up a lot of screen space. For this reason most GUI systems use drop-
down menus or pop-up menus. Web pages often use these types of menu for the same reason.

Fitts’ Law

Fitts' law is a model of human psychomotor behaviour developed in 1954. Fitts discovered a
formal relationship that models speed/accuracy tradeoffs in rapid, aimed movement (not drawing
or writing). Fitts’ Law calculates the time to move and point to a target of a certain width at a
certain distance1

1 Mathematically, Fitts' law is stated as follows: MT = a + b log2(2A/W) , where MT = movement time , a,b =
regression
coefficients A = distance of movement from start to target centre and W = width of the target

Page 3
BSc Applied Computing Human Computer Interaction: 10. Interaction
Designs

Essentially, Fitts’ Law states that big targets at close distance are reached faster than small
targets at long range. Theoretically, the following principles exist when applying Fitts’ Law to
interface designs:

• Things done more often should be assigned a larger button. This seems an intuitive
principle, but it needs to be used very carefully, since it harms the consistency of the
interface.
• Things done more often should be closer to the average position of the user's cursor.
• The top, bottom, and sides of the screen are infinitely targetable because of the boundary
created by the edges of the screen. They should be fully utilized.
There are tradeoffs when applying Fitts' Law to interface designs. Fitts' Law suggests that
interface components should be made larger and positioned closer to the average cursor
position. These suggestions may act in opposition to other factors that make an efficient interface,
such as organization and use of available screen space.
An interesting example of the third bullet point above is the menus on the Apple Macintosh
interface. In MacOS, there is one menu bar at the very top of the screen, and it changes to
reflect the currently active application. In Windows, every application has a separate menu bar.
Compare the ease with which the File menu can be targeted in these examples – the top of the
screen is at the top of the figure in both cases:

Fitts' law predicts that Macintosh pull-down menu targeting should be approximately five times
faster than Windows menu targeting.

Page 4
BSc Applied Computing Human Computer Interaction: 10. Interaction
Designs

Pie Menus and Mouse Gestures

Pie menus are a naturally efficient user-interface technique. A pie menu is a directional selection
of pie slice-shaped targets. The cursor starts out in the inactive centre region of a pie, and all
target slices are large, nearby, and in different directions.
Pie menus are quite easy for new users. You simple fol ow the pop-up directions to use them.
They are also extremely efficient for experienced users. Once you know the directions, you can
quickly and reliably 'mouse ahead' without looking.
Fitts' Law explains the pie menu advantage - their fast selection speed and low error rate is due
to their large target size and the small distance between each item

Pie menu in The Sims game

‘Radial Context’ pie menu in the Mozilla web browser

Mouse gestures are mouse movements in combination with a click-hold that execute some
functions. You press mouse button, draw a gesture, and release mouse button (you can choose

Page 5
BSc Applied Computing Human Computer Interaction: 10. Interaction
Designs

which button to use in advanced preferences). This gesture is recognized and appropriate action
is triggered. Pie menus and mouse gestures extensions to the Mozilla family of web browsers
have been developed under the Optimoz project. Pie menus can be considered to be essentially
mouse gestures with feedback.

Summary of mouse gestures available in the Mozilla web browser

Page 6
BSc Applied Computing Human Computer Interaction: 10. Interaction
Designs

Question and answer dialogues

In this kind of interaction questions are asked one at a time and the next question may depend on
the previous answer. Question and answer dialogues are often used in tasks where information is
elecited from users in a prescribed and limited form, such as a bank ATM. They are now widely
used in PC software, in the form of ‘Wizards’ to guide novice users through tasks. Wizards can be
very frustrating for experienced users who know what they want to do.

A Wizard in Windows XP

Form-fill

The user type the data in specific fields, similar to the fields on a paper fill-in form. Many office
and database applications use this style. Form-fill is also widely used in web pages, to obtain
feedback or to elicit customer details in transactions.
Some of the issues which should be considered when designing forms include:
• Clarity of layout
• Types of fields – the users should be able to tel what kinds of data are permissible in
each field.
• Help text (for the form and for each field)
• Automatic advancement (tabbing from field to field) – this can be very helpful as long as it
done in the correct order.
• Cancel option (what does it mean in the situation)
• Corrections – how can the user correct data once entered
• Corresponding paper-form (for example order entry)
• Pre-filled fields – it may save the user time if some fields contain commonly used initial
values
• Use of list boxes to select from predetermined list of optional values.
The spreadsheet is a variation on the form-fill interaction style.

Page 7
BSc Applied Computing Human Computer Interaction: 10. Interaction
Designs
Direct Manipulation

Direct manipulation is a style of interaction which features a natural representation of task objects
and actions promoting the notion of people performing a task themselves (directly) not through an
intermediary like a computer. A direct manipulation system has the following features:
• Visibility of the objects of interest
• Rapid, reversible, incremental actions
• Replacement of complex command syntax by direct manipulation of the object of interest
The visual representation usually takes the form of a metaphor related to the actual task being
performed.
Well-designed direct manipulation systems tend to make the interaction enjoyable for the users.
Shneiderman (1983) believes this owes to factors including the fol owing:

• Novices can learn the basic functionality quickly

• Users can immediately see if their actions are furthering their goals
• Users experience less anxiety because the system is comprehensible and because
actions are reversible
• Users gain confidence because they fell in control and can predict system responses

Common examples of direct manipulation include:

• File managers, such as Windows Explorer (drag-and-drop copying)
• Graphics software (drawing tools such as Photoshop and Fireworks)
• Games
• Industrial process control systems (e.g. powerplant - sensors on plant schematic indicate
non-normal conditions, single click zoom allows detailed inspection of troubling
component, eliminates need for complex commands unlikely to be recalled during
emergency conditions)

Macromedia Fireworks

Direct manipulation is currently not commonly used in web pages as it is difficult to implement
using the main client technologies (HTML, JavaScript). Direct manipulation interfaces are used

Page 8
 BSc Applied Computing Human Computer Interaction: 10. Interaction
Designs

for certain features on web pages, such as interactive games, and require other technologies
such as Flash and Java applets.
A well-designed direct manipulation interface can help to bridge the gulf of execution and the
gulf of evaluation, described in chapter 5.

In computer science, direct manipulation is a human–computer interaction style which involves continuous representation of
objects of interest and rapid, reversible, and incremental actions and feedback. [1] The intention is to allow a user to directly
manipulate objects presented to them, using actions that correspond at least loosely to the physical world. An example of direct-
manipulation is resizing a graphical shape, such as a rectangle, by dragging its corners or edges with a mouse.

Having real-world metaphors for objects and actions can make it easier for a user to learn and use an interface (some might say
that the interface is more natural or intuitive), and rapid, incremental feedback allows a user to make fewer errors and complete
tasks in less time, because they can see the results of an action before completing the action, thus evaluating the output and
compensating for mistakes.

The term was introduced by Ben Shneiderman in 1982 within the context of office applications and the desktop metaphor
Page 9