Human Computer Interaction

Graphical User-interface Design

o Choosing interaction styles and interaction techniques;
o HCI aspects of common widgets;
o HCI aspects of screen design; handling human failure; beyond simple screen design; multi-modal
interaction; 3D interaction and virtual reality

A Typical Computer System

Graphical User Interface, a GUI (pronounced as either G-U-I or gooey) Using a graphical approach,
through icons, menus, windows, etc. to interact with users.

The User Interface

o System users often judge a system by its interface rather than its functionality
o A poorly designed interface can cause a user to make catastrophic errors
o Poor user interface design is the reason why so many software systems are never used
o Most users of business systems interact with these systems through graphical user interfaces (GUIs)

The importance of the User Interface

o A well-designed interface and screen is terribly important to our users. It is their window to view the
capabilities of the system.
o It is also the vehicle through which many critical tasks are presented. These tasks often have a direct
impact on an organization's relations with its customers, and its profitability.
o A screen's layout and appearance affect a person in a variety of ways. If they are confusing and
inefficient, people will have greater difficulty in doing their jobs and will make more mistakes.
o Poor design may even chase some people away from a system permanently. It can also lead to
aggravation, frustration, and increased stress.

1
Compiled by: SHERILYN P. TOBIAS
Human Computer Interaction

The user interface is to – the part of a computer and its software that people can see, hear, touch, talk to, or
otherwise understand or direct.
The user interface has essentially two components: input and output.
• Input is how a person communicates his / her needs to the computer.
o Some common input components are the keyboard, mouse, trackball, one's finger, and one's
voice.
• Output is how the computer conveys the results of its computations and requirements to the user.
o Today, the most common computer output mechanism is the display screen, followed by
mechanisms that take advantage of a person's auditory capabilities: voice and sound.

GUI characteristics
Characteristic Description
Windows Multiple windows allow different information to be
displayed simultaneously on the user’s screen.
Icons Icons different types of information. On some systems,
icons represent files; on others, icons represent
processes.
Menus Commands are selected from a menu rather than typed
in a command language.
Pointing A pointing device such as a mouse is used for selecting
choices from a menu or indicating items of interest in a
window.
Graphics Graphical elements can be mixed with text on the same
display.

GUI advantages

o They are easy to learn and use.

o Users without experience can learn to use the system quickly.

o The user may switch quickly from one task to another and can interact with several different
applications.

o Information remains visible in its own window when attention is switched.

o Fast, full-screen interaction is possible with immediate access to anywhere on the screen

UI design principles

o User familiarity

o The interface should be based on user-oriented terms and concepts rather than computer
concepts E.g., an office system should use concepts such as letters, documents, folders etc.
rather than directories, file identifiers, etc.

o Consistency

2
Compiled by: SHERILYN P. TOBIAS
Human Computer Interaction

o The system should display an appropriate level of consistency

o Commands and menus should have the same format, command punctuation should be
similar, etc.

o Minimal surprise

o If a command operates in a known way, the user should be able to predict the operation of
comparable commands

o Recoverability

o The system should provide some resilience to user errors and allow the user to recover from
errors

o This might include an undo facility, confirmation of destructive actions, 'soft' deletes, etc.

o User guidance

o Some user guidance such as help systems, on-line manuals, etc. should be supplied

o User diversity

o Interaction facilities for different types of user should be supported

o E.g., some users have seeing difficulties and so larger text should be available

Interaction styles

Interaction can be seen as a dialog between the computer and the user. The choice of interface style can have
a profound effect on the nature of this dialog. Here we introduce the most common interface styles and note
the different effects these have on the interaction.

o Direct manipulation
o Menu selection
o Form fill-in
o Command language
o Natural language

DIRECT MANIPULATION

Direct manipulation advantages

o Users feel in control of the computer and are less likely to be intimidated by it
o User learning time is relatively short
o Users get immediate feedback on their actions so mistakes can be quickly detected and corrected

Direct manipulation problems

o Direct manipulation interfaces can be complex to program and make heavy demands on the
computer system
3
Compiled by: SHERILYN P. TOBIAS
Human Computer Interaction

o The derivation of an appropriate information space model can be very difficult

MENU SELECTION

Menu systems

o Users make a selection from a list of possibilities presented to them by the system
o The selection may be made by pointing and clicking with a mouse, using cursor keys or by typing
the name of the selection
o May make use of simple-to-use terminals such as touchscreens

Advantages of menu systems

o Users need not remember command names as they are always presented with a list of valid
commands
o Typing effort is minimal
o User errors are trapped by the interface
o Context-dependent help can be provided. The user’s context is indicated by the current menu
selection

Problems with menu systems

o Menu systems are best suited to presenting a small number of choices. If there are many choices,
some menu structuring facility must be used
o Experienced users find menus slower than command language

FORM FILL-IN

o Ease of use, simple data entry

o Dull, takes a lot of screen space

COMMAND LANGUAGE

Command interfaces

o User types commands to give instructions to the system

o Concise interfaces requiring minimal typing can be created
4
Compiled by: SHERILYN P. TOBIAS
Human Computer Interaction

Problems with command interfaces

o Users have to learn and remember a command language. Command interfaces are therefore
unsuitable for occasional users
o Users make errors in command. An error detection and recovery system is required
o System interaction is through a keyboard so typing ability is required

NATURAL LANGUAGE

o The user types a command in a natural language. Generally, the vocabulary is limited and these
systems are confined to specific application domains (e.g. timetable enquiries)
o NL processing technology is now good enough to make these interfaces effective for casual users but
experienced users find that they require too much typing

HCI aspects of common widgets

A control element (sometimes called a control or widget) in a graphical user interface is an element of
interaction, such as a button or a scroll bar. Each widget facilitates a specific type of user-computer
interaction, and appears as a visible part of the application’s GUI. Some widgets support interaction with the
user, for example labels, buttons and check boxes.

Selection Controls

o Radio Buttons
o Check Boxes
o Palettes
o List Boxes
o List View Controls
o Drop-down/Pop-up List Boxes

Radio Buttons

• A two-part control consisting of the following

– Small circles, diamonds, or rectangles
• When a choice is selected
– The option is highlighted
– Any existing choice is automatically un highlighted and deselected
• Purpose
– To set one item from a small set of option (2 to 8)
5
Compiled by: SHERILYN P. TOBIAS
Human Computer Interaction

• Most useful for data and choices that are

– Discrete
– Small and fixed in number
• Do not use
– For commands
Check Boxes

• Each option acts as a switch and can be either “on” or “off”

– When an option is selected, a mark (X) appears within the square box, or the box
is highlighted in some other manner
– Otherwise the square is unselected or empty (off)
• Each box can be
– Switched on or off independently
– Used alone or grouped in sets
Palettes

• A control consisting of a series of graphical alternatives. The choices themselves are

descriptive, being composed of colors, patterns, or images
• To set one of a series of mutually exclusive options presented graphically or pictorially
• Usually consume less screen space than textual equivalents
• Do not use
– Where the alternatives cannot be meaningfully and clearly represented
pictorially
– Where words are clearer than images
6
Compiled by: SHERILYN P. TOBIAS
Human Computer Interaction

• Create boxes of equal size

• Position the boxes adjacent to, or butted up against another
• A columnar orientation is the preferred manner
• Top to button, left to right ordering by expected order, frequency of occurrence,
sequence of use or alphabetically
• Display it less brightly than the other choices, if a choice is not available
• Highlight the choice in some visually distinctive way when the pointer is resting
• When a choice is selected, distinguish it visually from the unselected choices

List Boxes

• A permanently displayed box-shaped control containing a list of attributes or objects

from which
– A single selection is made, or
– Multiple selections are made
• Unlimited number of choices
• Good for data that are
– Best represented textually
– Large in number
– Fixed in list length
• Clearly and meaningfully describe the choices available
• Left-align into columns
• Require no more than 40 page-downs to search a list
– If more are required, provide a method for using criteria
• Must be long enough to display 6-8 choices
– If it is the major control within a window, the box may be larger
• Order in a logical and meaningful way to permit easy browsing (allow user to change
the sort order will be great)
• If a particular choices is not available in the current context, omit , gray or dim it
7
Compiled by: SHERILYN P. TOBIAS
Human Computer Interaction

• Enclose the choices in a box with a solid border

• Preferred position of the control caption is above upper-left
• When a list box is disabled, display its caption as gray out
• Highlight the selection choice when the pointer is resting on
Single-Selection List Boxes

Multiple-Selection List Boxes

Drop-Down/Pop-up List Boxes

ssss
• Unlimited number of choices
• When displayed, all choices may not always be visible, requiring scrolling • Use drop-
down/pop-up when
– Screen space or layout consideration makes radio buttons or single
selection list boxes impractical
– Do not use a drop-down list if it important that all options be seen
together.

8
Compiled by: SHERILYN P. TOBIAS
Human Computer Interaction

• Provide a visual cue that a box is hidden by including a downward pointing arrow, or
other meaningful image

HCI aspects of screen design; handling human failure; beyond simple screen design; multi-modal
interaction; 3D interaction and virtual reality

SCREEN DESIGNING

How to distract the screen user

• Unclear captions
• Improper type and graphic emphasis
• Misleading headings
• Irrelevant and unnecessary headings
• Clustered and cramped layout
• Poor quality of presentation
• Appearance
• Arrangement
• Visual inconsistency
• Lack of design features
• Over use of 3D presentations
• Overuse of too many bright colors
• Bad typography

Variety of distractions
• Numerous audio and visual interruptions
• Extensive visual clutter
• Poor information readability
• In comprehensible screen components
• Confusing and inefficient navigation
• Inefficient operations
• Excessive or inefficient page scrolling
• Information overload
• Design in consistency
• Outdated information

Design goals

• Reduce visual work

• Reduce intellectual work
• Reduce memory work
• Reduce mentor work
• Eliminate burdens or instructions.

VIRTUAL REALITY AND PHYSICAL INTERACTION (3 D)

9
Compiled by: SHERILYN P. TOBIAS
Human Computer Interaction

These require you to navigate and interact in a three-dimensional space. Sometimes these use the ordinary
controls and displays of a desktop computer system, but there are also special devices used both to move and
interact with 3D objects and to enable you to see a 3D environment.

Virtual reality is able to transpose the user. In other words, bring us someplace else. Through closed visors
or goggles, VR blocks out the room and puts our presence elsewhere. (Replaces the real world with a
simulated one)

VR Technology: Displays

– Head Mounted Displays: Tiny displays, mounted on the head, fully immersive, needs tracker
to track the position and orientation of user’s head.

Positioning in 3D space
Virtual reality systems present a 3D virtual world. Users need to navigate through these spaces and
manipulate the virtual objects they find there. Navigation is not simply a matter of moving to a particular
location, but also of choosing a particular orientation. In addition, when you grab an object in real space, you
don’t simply move it around, but also twist and turn it, for example when opening a door. Thus the move
from mice to 3D devices usually involves a change from two degrees of freedom to six degrees of freedom,
not just three.

Cockpit and virtual controls

Helicopter and aircraft pilots already have to navigate in real space. Many arcade games and also more
serious applications use controls modeled on an aircraft cockpit to ‘fly’ through virtual space. However,
helicopter pilots are very skilled and it takes a lot of practice for users to be able to work easily in such
environments. In many PC games and desktop virtual reality (where the output is shown on an ordinary
computer screen), the controls are themselves virtual. This may be a simulated form of the cockpit controls
or more prosaic up/down left/right buttons.

10
Compiled by: SHERILYN P. TOBIAS