Human Computer

Interaction
Visual Interface Design
Sadaf Anwar
[email protected]
Department of Software Engineering
COMMAND LANGUAGES
• A command language is simply a set of
words with an associated syntax,
• Command languages have been criticized
because people have to recall the name of
a particular command and to recall the
syntax of the command.
GRAPHICAL USER INTERFACES
• Graphical user interfaces (GUIs), which are found on every
personal computer, on smart phones, on touch screen
displays and so on, have had an interesting though brief
history.
• The Microsoft range of Windows GUIs were influenced by
those on the Macintosh, which in turn was inspired by work
at Xerox PARC, During the 1980s and 1990s a number of
different designs of GUIs were produced, but gradually
Windows and Apple Macintosh came to dominate the GUI
operating system market.
 WIMPS
• WIMP stands for windows, icons, menu and pointer.

• A window is a means of sharing a device’s graphical display

resources among multiple applications at the same time.

• An icon is an image or symbol used to represent a file,

folder, application or device, such as a printer.

• A menu is a list of commands or options from which one can

choose.

• The last component is pointing device of which the mouse is

the most widespread, but fingers are also used as is the stylus.
 DIRECT MANIPULATION
• A direct manipulation interface is one where graphical
objects on the screen are directly manipulated with a
pointing device.
1. Continuous representation of the object of interest.
2. Physical actions or labeled button presses instead of
complex syntax.
3. Rapid incremental reversible operations whose impact on
the object of interest is immediately visible. (Shneiderman,
1982, p. 251)
 WINDOWS
• Windows allow a workstation’s screen to be divided
into areas which act like separate input and output
channels that can be placed under the control of
different applications.
• This allows people to see the output of several
processes at the same time and to choose which one
will receive input by selecting its window, using a
pointing device such by clicking on it with a mouse,
or touching a touch screen.
• This is referred to as changing the focus.
ICONS
• Icons are used to represent features and functions on
everything from software applications, DVD players and
public information kiosks to clothing.

• Icons are generally regarded as being useful in helping

people to recognize which feature they need to access.

• Icons make use of three principle types of representation -

metaphor, direct mapping and convention.

• Metaphor relies on people transferring knowledge from one

domain and applying to another.

• The use of direct mapping involves creating a more or less

direct image of what the icon is intended to represent.
HORTON’S ICON CHECKLIST
 MENUS
• When creating menus, commands should be grouped into menu topics, which
are a list of menu items.

• When a command or option (menu item) is selected from the list, an action is
performed.

• Menus are also used extensively on web sites to structure information and to
provide the main method of navigation of the site’s content.

• Hierarchical menus are also called cascading menus. In a cascading menu,

the sub-menu appears to cascade out when a choice is made from the higher-
level menu.

• A pop-up menu is distinguished from a standard menu in that it is not attached

to a menu bar in a fixed location.
POINTERS
• The final part of the WIMP interface is the pointer.
• The most common is the mouse, but joysticks are also
common, for example in game controllers.
• On mobile phones and PDAs, a stylus is often provided as the
pointer and on touchscreen system the finger used.
• Remote pointers include the Wii wand and other infra-red
pointers, for example for doing presentations.
• The arrival of multi touch surfaces has enabled a wide range
of gestures to be recognized in addition to a simple point and
select operation.
INTERFACE DESIGN GUIDELINES
• Designers need to know about graphic design such as what
shape, size colour, orientation and texture
screen objects should be.
• Designs should have a clear and consistent style.
• The design language will be learnt and adopted by
people, so they will expect things that look the same to
behave the same and, conversely if things behave different
make sure they look different.
 A MISCELLANY OF WIDGETS
• Radio buttons Use a series of radio buttons to allow the user make
exclusive choices.

• Checkboxes - Checkboxes should be used to display individual

settings that can be switched (checked) on and off.

• Toolbars - A toolbar is a collection of buttons grouped according to

function (in this respect they are conceptually identical to menus).
Passing the mouse pointer over an icon will usually trigger the
associated ‘tool tip’ which is a short textual label describing the
function of the button.

• List boxes List boxes take a variety of forms and within these forms
they offer different ways of viewing the contents – as lists (with more
or less detail), as icons or as thumbnails (little pictures of the files’
contents

• Sliders - A slider is a widget which can return analogue values. Sliders

are ideally suited to controlling or setting such things as volume or
FORM FILL INTERFACES
WIZARDS
Wizard is the name given to a style of
interaction that leads people by the
metaphorical hand (or pointer) step-by-step
through a series of questions and answers,
picklists and other kinds of widgets to
achieve a task. In MS Windows wizards are
used to install hardware and applications.
This style of interaction is widely used by all
windowing systems.
PSYCHOLOGICAL PRINCIPLES
AND INTERFACE DESIGN
GESTALT LAWS
1. One of the gestalt principles of perception is the
objects appearing
observation that

close together in space or time tend

to be perceived together.
2. A second Gestalt law we consider is that of
similarity.
3. A third Gestalt law is continuity.
1. USING PROXIMITY TO
ORGANIZE BUTTONS
2. USING SIMILARITY TO
ORGANIZE FILES
3. USING CONTINUITY TO
CONNECT DISCONNECTED
ELEMENTS
 PRINCIPLES FROM MEMORY
AND ATTENTION
1. There is a widely quoted design guideline based on Miller and his magic
number. George Miller (1956) found that short-term memory is limited to
only 7 ± 2 ‘chunks’ of information. The central observation, however,
that you should not expect people to remember lots of detail is well made.

2. Chunking is the process of grouping information into larger, more

meaningful units, thus minimizing the demands on working memory.

3. Memories, particularly those in short-term or working memory are

surprisingly short-lived, and even in ideal conditions they will persist for
only 30 seconds. So, it is essential to make important information
presented persist

4. Another guideline derived from our knowledge of memory is to design for

recognition rather than recall.
CHUNKING
TIME LIMITATION
RECOGNITION OVER RECALL
DESIGNING WITH COLOUR
ERROR AVOIDANCE DESIGN
GUIDELINES
ERROR MESSAGE DESIGN
GUIDELINES
SUMMARY
• The design of visual interfaces is a central skill for interactive
system designers.

• There are principles of aesthetics to consider but mostly

designers need to concentrate on understanding the range of
widgets that they have available and how they can be best
deployed. It is how the overall interaction works as a whole that
is important.
• Graphical user interfaces use a combination of WIMP features and other graphical objects as the
basis of their design
• Design guidelines are available from work in psychology, perception and from principles of graphic
design.
• Information design interactive visualizations need to be considered when there is a large amount
of data to be displayed