Chapter 4

Interface
 Outline

● Interaction styles

● Elements of the WIMP interface

 Common interaction styles

• Command line interface

• Menus
• Natural language
• Question/answer and query dialogue
• Form-fills and spreadsheets
• WIMP
• Point and click
• Three–dimensional interfaces
 Command line interface

• Way of expressing instructions to the computer

directly
– function keys, single characters, short abbreviations,
whole words, or a combination

• suitable for repetitive tasks

• better for expert users than novices
• offers direct access to system functionality
• command names/abbreviations should be
meaningful!

Typical example: the Unix system

Command line interface

• Commands such as abbreviations (for

instance, ls) typed in at the prompt to
which the system responds (for example,
by listing current files)
• Efficient, precise, and fast

• Consistency is most important design

principle
– For example, always use first letter of command
Command line interface
Menus

• Set of options displayed on the screen

• Options visible
– less recall - easier to use
– rely on recognition so names should be meaningful
• Selection by:
– numbers, letters, arrow keys, mouse
– combination (e.g. mouse plus accelerators)
• Often options hierarchically grouped
– sensible grouping is needed
• Restricted form of full WIMP system
Natural language

• Familiar to user
• speech recognition or typed natural language
• Problems
– vague
– ambiguous
– hard to do well!
• Solutions
– try to understand a subset
– pick on key words
Query interfaces

• Question/answer interfaces
– user led through interaction via series of questions
– suitable for novice users but restricted functionality
– often used in information systems

• Query languages (e.g. SQL)

– used to retrieve information from database
– requires understanding of database structure and
language syntax, hence requires some expertise
Form-fills

• Primarily for data entry or data retrieval

• Screen like paper form.
• Data put in relevant place
• Requires
– good design
– obvious correction
facilities
 Form-fills

● Frame each field

● Do not frame fields used only for displays
● Indicate the necessary fields
● Indicate the format of the field
● Use the length of the frame to show the length
of the field
● Use the same length when possible
● Align and chunk the fields
Fields’ labels
● Place the label on the left of the field
● The first letter only of the label is uppercase
● Align them on the left
● Place the ‘:’ after each label
Spreadsheets

• first spreadsheet VISICALC, followed by

Lotus 1-2-3
MS Excel most common today
• sophisticated variation of form-filling.
– grid of cells contain a value or a formula
– formula can involve values of other cells
e.g. sum of all cells in this column
– user can enter and alter data spreadsheet
maintains consistency
WIMP Interface

Windows
Icons
Menus
Pointers
… or windows, icons, mice, and pull-down menus!

• default style for majority of interactive

computer systems, especially PCs and desktop
machines
WIMP Interface
• Xerox Star first WIMP gave rise to GUIs
• Windows
▪ Sections of the screen that can be scrolled, stretched,
overlapped, opened, closed, and moved around the screen
using the mouse
• Icons
▪ Pictograms that represent applications, objects, commands,
and tools that were opened when clicked on
• Menus
▪ Lists of options that can be scrolled through and selected
• Pointing device
▪ A mouse controlling the cursor as a point of entry to the
windows, menus, and icons on the screen
15
Example of first generation GUI

16
Point and click interfaces

• used in ..
– multimedia
– web browsers
– hypertext

• just click something!

– icons, text links or location on map

• minimal typing
• the 3-click rule
Three dimensional interfaces

• virtual reality
• ‘ordinary’ window systems
– highlighting
flat buttons
– visual affordance …
– indiscriminate use click
just confusing!
me!
• 3D workspaces
– use for extra virtual space … or
– light and occlusion give depth sculptured
– distance effects
 Which interface?
Which interface to use will depend on:
● task,

● users,

● context,

● cost,

● robustness,

● and so on
Elements of the wimp interface

windows, icons, menus, pointers

+++
buttons, toolbars,
palettes, dialog boxes

also see supplementary

material
on choosing wimp elements
Windows

• Areas of the screen that behave as if they were

independent
– can contain text or graphics
– can be moved or resized
– can overlap and obscure each other, or can be laid
out next to one another (tiled)

• scrollbars
– allow the user to move the contents of the window
up and down or from side to side
• title bars
– describe the name of the window
 Window design
• Windows were invented to overcome the
physical constraints of a computer display
▪ They enable more information to be viewed and
tasks to be performed
• Scroll bars within windows enable more
information to be viewed
• Multiple windows can make it difficult to find
desired one
▪ Listing, tabbing, and thumbnails are techniques
that can help

22
Window design

Thumbnails

23
Icons

• small picture or image

• represents some object in the interface
– often a window or action
• windows can be closed down (iconised)
– small representation of many accessible
windows
• icons can be many and various
– highly stylized
– realistic representations.
 Icon design
• Icons are assumed to be easier to learn and
remember than commands
• Icons can be designed to be compact and variably
positioned on a screen
• Now pervasive in every interface
▪ For example, they represent desktop objects, tools (for
example, a paintbrush), applications (for instance, a web
browser), and operations (such as cut, paste, next, accept,
and change)

25
 Icons
• Since the Xerox Star days, icons have changed in
their look and feel:
▪ black and white
Color, shadowing, photorealistic images, 3D rendering,
and animation

• Many designed to be very detailed and animated

making them both visually attractive and informative
• Can be highly inviting, emotionally appealing, and
feel alive

26
 Icons
● 3 kinds of icons: application icons, button icons, and message icons

27
Flat 2D icons for a smartphone
and a smartwatch

28
Pointers

• Important component
– WIMP style relies on pointing and selecting things
• Uses mouse, trackpad, joystick, trackball,
cursor keys or keyboard shortcuts
• Wide variety of graphical images
Menus

• Choice of operations or services offered on the screen

• Required option selected with pointer

problem – take a lot of screen space

solution – pop-up: menu appears when needed
Kinds of Menus

• Menu Bar at top of screen (normally), menu

drags down
– pull-down menu - mouse hold and drag down menu
– drop-down menu - mouse click reveals menu
– fall-down menus - mouse just moves over bar!

• Contextual menu appears where you are

– pop-up menus - actions for selected object
– pie menus - arranged in a circle
• easier to select item (larger target area)
• quicker (same distance to any option)
… but not widely used!
Menus extras

• Cascading menus
– Hierarchical menu structure
– Menu selection opens new menu

• Keyboard accelerators
– Key combinations - same effect as menu item
– Two kinds
• active when menu open – usually first letter
• active when menu closed – usually Ctrl + letter
usually different !!!
Menus design issues

• Which kind to use

• What to include in menus at all
• Words to use (action or description)
• How to group items
• Choice of keyboard accelerators
Items of Menu
Menu Bars
Pull-Down Menus
Palettes and tear-off menus

• Problem
menu not there when you want it
• Solution
– palettes – little windows of actions
shown/hidden via menu option
e.g. available shapes in drawing package
– Tear-off menu is a menu that a user can
detach from the menu bar by pressing the
mouse button while the cursor is over the
menu title and dragging beyond the menu's
edge.
• These menus are usually called
palettes.
Palettes and tear-off menus
● Example
Menu - Activity 1 – scrolling menu
Is there any improvement over this scrolling pop-up menu?
Menu - Activity 1

Is this method any better?

Buttons

• individual and isolated regions within a

display that can be selected to invoke an
action

• Special kinds
– radio buttons
– set of mutually exclusive choices
– check boxes
– set of non-exclusive choices
Buttons
Buttons
Radio Buttons
Check box
List box
Toolbars

• long lines of icons …

… but what do they do?

• fast access to common actions

Toolbars

● Be coherent
● Use a tool bar for the more frequent tasks
● Use a tool bar as a complement of menus
● Allow the user to activate or deactivate the
toolbar
● Allow them to move it
• Allow them to customize their toolbars:
– choose which toolbars to see
– choose what options are on it
● Use spaces (or lines) to chunk icons inside
a toolbar
Dialogue boxes (DB)
• Information windows that pop up to
inform of an important event or request
information.
e.g: when saving a file, a dialogue box is
displayed to allow the user to specify the
filename and location. Once the file is
saved, the box disappears.
Messages - General rules
Information Messages
Error messages
Feedback messages
Error and repair

can’t always avoid errors …

… but we can put them right
make it easy to detect errors
… then the user can repair them

hello, this is the Go Faster booking system

what would you like?
(user) I want to fly from New York to London
you want a ticket from New York to Boston
(user) no
sorry, please confirm one at a time
do you want to fly from New York
(user) yes
………
Warning messages
Colors
Colors
Font

● Sans-serif fonts are easier

to read:
● Arial, Helvetica, Geneva, ..
● Lowercase letters are
easier to read than upper
letters

LOWERCASE LETTERS ARE EASIER TO

READ THAN UPPER LETTERS
General lesson …

if you want someone to do something …

• make it easy for them!

• understand their values

Exercise

Some use cases for a Personal Expense Management

Application:
a) Track Income and Expenses
b) Budget Management
c) Visual Reports and Analytics
d) Debt Management

1. Distinguish the UX and UI components of the use case

'Track Income and Expenses‘
2. Design an interface that allows users to perform Track
Income and Expenses, considering both UX and UI.