User Interface Design

Dr. M.GARGI
Introduction

Ñ In any software product,

y user interface portion is responsible for
all interactions with the user.
Ñ Almost every software product has a
user interface:
y can you think of any software product
that does not have any user interface?
Introduction
Ñ In the early days of computer, no software
product had any user interface:
y all computers were batch systems
y no interactions with users were supported.
Ñ We know that things are very different
now:
y almost every software product is highly
interactive.
Introduction
Ñ Users interact with a software product
through its user interface:
y user-interface portion of any software is
directly relevant to the users.
y many users judge a software from its
user interface.
Ñ User interface design:
y a practical and important problem.
 Introduction
Ñ Aesthetics apart, a difficult to use
interface:
y leads to higher levels of user errors
y leads to user dissatisfaction.
Ñ Users become particularly irritated when a
system behaves in unexpected ways,
y issued commands do not carry out actions
according to intuitive expectations of users.
Introduction

Ñ A significant portion of the total

development effort:
y spent in developing the user interface.
Ñ For many interactive applications:
y as much as 50% of the total
development effort is spent on the user
interface part.
Introduction

ÑIf the user interface is not

developed systematically:
y effort required to develop the
interface would increase
tremendously :
x leading to customer dissatisfaction.
Introduction

Ñ It is important to carefully study

y user interface design concepts.
Ñ Let us examine what a good interface
is:
y Unless we know what a good user
interface really is,
x we cannot possibly design one.
Characteristics of Good User
Interfaces

ÑSpeed of learning:
y A good user interface should be
simple to learn.
y Most users are put off by complex
syntax and semantics of the
command issue procedures.
Speed of learning

Ñ A good user interface should not require

y users to memorize commands.
Ñ An important factor affecting the speed of
learning is consistency:
y Once, a user learns about a command,
y should be able to use similar commands
x even in different circumstances for carrying out
similar actions.
Speed of learning

ÑUsers can learn about an interface

faster, if it is based on:
y day-to-day real life examples (aka
metaphors)
y use concepts with which users are
already familiar.
Speed of learning

Ñ For example, interface of a text editor:

y can use concepts similar to writing on paper:
x such as cutting lines and paragraphs and pasting it
at other places,
x users can immediately relate to it.
Ñ Also, learning is facilitated by:
y intuitive command names
y symbolic command issue procedures.
Speed of use

ÑSpeed of use is determined by:

y the time and effort necessary to
initiate and execute different
commands.
y The time and user effort necessary
to execute different commands
should be minimal.
Speed of use

Ñ Examples of bad interfaces:

y users required to type in lengthy
commands
y command issue involves moving the
mouse to widely different areas of the
screen
y can slow down the operating speed of
users.
Speed of recall

Ñ Once users learn how to use an interface:

y their speed of recall about using the interface
should be maximized.
Ñ The speed of recall is improved if the
interface is based on:
y metaphors (user interface visuals, actions and
procedures)
y symbolic command issue procedures
y intuitive command names.(immediate feedback
given to users after an action)
Error rate

ÑA good user interface should

y minimize the scope of committing
errors.
Ñ Error rate can be easily measured:
y count the errors committed by
different users.
Error rate

Ñ Error monitoring can be automated:

y instrument user interface with
monitoring code
y record the frequency and types of errors
committed by different users
y later display statistics of various kinds of
user errors.
How to reduce error
possibilities?

Ñ Consistency of command names,

Ñ Consistency of command issue
procedures,
Ñ Consistency in behavior of similar
commands
Ñ Simplicity of command issue
procedure, etc.
Attractiveness

Ñ A good user interface should be

attractive:
y An attractive user interface catches user
attention and fancy.
y In this respect,
x graphics-based user interfaces have a
definite advantage over text-based
interfaces.
Consistency

Ñ Consistency of commands is very

desirable.
y allow users to generalize the knowledge about
one aspect of the interface to another.
Ñ Consistency helps in:
y speed of learning,
y speed of recall,
y also helps in reduction of error rate.
Feedback
Ñ A good user interface must provide
constant feedback to user actions:
y For example, if any user request takes more
than few seconds to process,
x the user must be informed that his/her request is
still being processed.
y If possible, the user should be periodically
informed about the progress made in
processing the command.
Feedback

ÑIn the absence of any response

from the computer for a long
time:
y a novice user might even start
recovery/shutdown procedures
in panic.
Support for multiple skill
levels

Ñ A good user interface:

y should support different levels of
sophistication in command issue procedures:
y users with different experience levels prefer
different types of interfaces.
Ñ Experienced users are more concerned
about speed of command issue:
y whereas novice users pay prime importance to
usability aspects.
Support for multiple skill
levels

ÑNovice users discouraged by:

y cryptic command names
y complex command issue procedures.
ÑElaborate commands:
y slow down command issue
procedure
y put off experienced users.
Support for multiple skill
levels

ÑAs users become familiar

with an interface:
ylook for faster command
issue procedures such as
"hot-keys", "macros",
etc.(Ex:keyboard shortcuts, filters)
Error Recovery (Undo
facility)

Ñ All categories of users commit errors.

y A good interface should allow users to
undo mistakes..
Ñ Users are inconvenienced:
y if they can not recover from even simple
errors.
User Guidance and On-line
Help

Ñ Users might need guidance

y or seek help from the system.
Ñ User Guidance is provided through
two broad category of methods:
y On-line help system
y Guidance and error messages produced
x in response to user actions.
On-line Help System

ÑGeneric help messages are

not very useful:
yon-line help messages should
be tailored to the context in
which help is invoked.
On-line Help

Ñ A good on-line help should:

y provide messages in context-dependent way.
x keep track of what a user is doing
y help messages should be tailored to user's
experience level.
y should take advantage of graphics capabilities
of the screen
x not just be a copy of the user manual.
Guidance Messages

Ñ The guidance messages should be

carefully designed:
y prompt the user:
x next actions he/she might take,
x current status of the system,
x progress made so far in processing the
command
Guidance Messages

ÑA good guidance system

should have:
y different levels of sophistication
for different categories of users.
y users should have an option to turn
off detailed messages.
Error Messages

Ñ Error messages should be polite.

Ñ Error messages should not be
associated with noise:
y might embarrass the user.
Ñ The messages should suggest how a
given error can be rectified.
Error Messages

ÑIf appropriate,
y the user should be given the
option of invoking on-line help
y to find out more about the error
situation.
Improper Error Message

File not found!

Mode-Based versus Modeless
Interface

Ñ A mode is a state or collection of states:

y in each state (or mode) different types of commands
are available.
Ñ Modeless interface:
y same set of commands are available at all times.
Ñ Mode-based interface:
y different sets of commands are available depending on
the mode in which the system is, i.e.
y based on the past sequence of the user commands.
Mode-Based versus Modeless
Interface

Ñ A mode-based interface can be

represented using a state transition
diagram:
y each node (state) of the state transition
diagram represents a mode.
y Every state (node) of the diagram
x annotated with command names meaningful in that
state.
Graphical User Interface (GUI) versus
Text-Based User Interface

Ñ In a GUI:
y several windows with different information can
be simultaneously displayed on user’s screen.
y This is perhaps the biggest advantage of GUI
y user can simultaneously interact with several
related items at any time
y can even run many unrelated applications
Graphical User Interface (GUI) versus
Text-Based User Interface

Ñ Iconic information representation and

symbolic information manipulation is
possible in a GUI.
Ñ Symbolic information manipulation:
y such as pulling an icon representing a
file into a trash can for deleting
y intuitively very appealing
x user can instantly remember it.
Graphical User Interface (GUI) versus
Text-Based User Interface

Ñ A GUI can support command selection:

y using an attractive and user-friendly menu
selection system.
Ñ In a GUI, a pointing device can be used:
y a mouse or a light pen to issue commands.
y The use of a pointing device
x makes command issue procedure simpler.
Graphical User Interface (GUI) versus
Text-Based User Interface

Ñ On the flip side, a GUI requires:

y special terminals with graphics capabilities
y requires special input devices such a mouse.
Ñ In contrast, a text-based interface:
y can run even on cheap alphanumeric
terminals:
y Graphics terminals are usually much more
expensive than alphanumeric terminals.
Graphical User Interface (GUI) versus
Text-Based User Interface

ÑIncreasing availability of:

y terminals with graphics capability
y bit-mapped high-resolution displays
y significant amount of local processing power.
ÑWe will concentrate our attention
to GUIs
Types of User Interfaces

ÑUser interfaces can be classified

into three categories:
y Command language-based interface
y Menu-based interface
y Direct manipulation interface
Types of User Interfaces

ÑEach category of interface has

its advantages and
disadvantages:
y Modern applications sport a
combination of all the three
types of interfaces.
Choice of Interface

Ñ Which parts of the interface should be

implemented using what type of interface?
y No simple guidelines available
y to a large extent depends on the experience
and discretion of the designer.
y a study of characteristics of the different
interfaces would give us some idea.
Command Language-Based
Interface

ÑAs the name itself suggests:

y incorporates some language to form
commands.
ÑUsers frame the required
commands in the language:
y type them in whenever required.
Design of command language
interface

ÑSimple command language

interface:
y determine all the commands
needed to be supported
y assign unique names to the
different commands.
Design of command language
interface

ÑA more sophisticated command

language interface:
y allow users to compose primitive
commands to form more complex
commands.
xConsider cat x.dat|grep 123
y Like a programming language.
Command Language-Based
Interface

Ñ The facility to compose commands:

y dramatically reduces the number of command
names users would have to remember.
y Commands can be made concise
x requiring minimal typing by the user.
y allow faster interaction with the computer
y simplify input of complex commands.
Advantages of Command Language
Interfaces

ÑEasy to develop:
y compiler writing techniques are
well developed.
ÑCan be implemented even on cheap
alphanumeric terminals.
Ñ Much more efficient:
y compared to other types of
interfaces.
Disadvantages of Command
Language Interfaces

Ñ Difficult to learn:
y Require the user to memorize primitive
commands.
Ñ Require the user to type in commands.
Ñ Users make errors while:
y formulating commands in the command
language
y typing them in.
Disadvantages of Command
Language Interfaces

Ñ All interactions are through key-

board:
y cannot take advantage of effective
interaction devices such as a mouse.
y For casual and inexperienced users,
x command language interfaces are not
suitable.
Issues in Designing a Command
Language Interface

Ñ Design of a command language interface:

y involves several issues.
Ñ The designer has to decide
y what mnemonics are to be used for the
commands.
y mnemonics should be meaningful
x yet be concise to minimize the amount of typing
required.
Issues in Designing a Command
Language Interface

Ñ The designer has to decide:

y whether users will be allowed to redefine
command names to suit their own
preferences.
x Letting a user define his own mnemonics for
various commands is a useful feature,
x but increases complexity of user interface
development.
Issues in Designing a Command
Language Interface

ÑDesigner has to decide:

y whether it should be possible to
compose primitive commands to
create more complex commands.
y syntax and semantics of command
composition options has to be
clearly and unambiguously decided.
Issues in Designing a Command
Language Interface

ÑThe ability to combine

commands is a powerful facility
for experienced users:
ybut quite unnecessary for
inexperienced users.
Menu-Based Interface

Ñ Advantages of a menu-based interface

over a command language interface:
y users are not required to remember
exact command names.
y typing effort is minimal:
x menu selections using a pointing device.
x This factor becomes very important for the
occasional users who can not type fast.
Menu-Based Interface
ÑFor experienced users:
y menu-based interfaces is slower
than command language interfaces
y experienced users can type fast
y also get speed advantage by
composing simple commands into
complex commands.
Menu-Based Interface

ÑComposition of commands in a
menu-based interface is not
possible.
y actions involving logical connectives
(and, or, all, etc.)
x awkward to specify in a menu-based
system.
Menu-Based Interface

Ñ If the number of choices is large,

y it is difficult to design a menu-based
interface.
y Even moderate sized software needs
hundreds or thousands of menu choices.
Ñ A major problem with the menu-based
interface:
y structuring large number of menu
choices into manageable forms.
Structuring Menu Interface

ÑAny one of the following options

is adopted to structure menu
items.
y Walking menu
y Scrolling menu
y Hierarchical menu
Scrolling Menu

y Used when the menu options are

highly related.
x For example text height selection in a
word processing software.
y Scrolling of menu items
x lets the user to view and select the
menu items that can not be
accommodated on one screen.
Walking Menu

ÑWalking menu is commonly used

to structure large menu lists:
y when a menu item is selected,
y it causes further menu items to be
displayed adjacent to it in a
submenu.
Walking Menu

Ñ A walking menu can successfully

structure commands only if:
y there are tens rather than hundreds of
choices
y each adjacently displayed menu does
take up some screen space
x the total screen area is after all limited.
Hierarchical menu

Ñ Menu items are organized in a

hierarchy or tree structure.
y Selecting a menu item causes the
current menu display to be replaced by
an appropriate submenu.
y One can consider the menu and its
various submenu to form a hierarchical
tree-like structure.
Hierarchical menu

ÑWalking menu are a form of

hierarchical menu:
y practicable when the tree is shallow.
ÑHierarchical menu can be used to
manage large number of choices,
y but, users face navigational
problems
x lose track of where they are in the
menu tree.
Direct Manipulation Interface

Ñ Present information to the user

y as visual models or objects.
Ñ Actions are performed on the visual
representations of the objects, e.g.
y pull an icon representing a file into an icon
representing a trash box, for deleting the file.
Ñ Direct manipulation interfaces are
sometimes called as iconic interfaces.
Direct Manipulation (Iconic)
Interface

Ñ Important advantages of iconic

interfaces:
y icons can be recognized by users very easily,
y icons are language-independent.
Ñ However, experienced users consider
direct manipulation interfaces too
slow.
Direct Manipulation (Iconic)
Interface

Ñ It is difficult to form complex commands

using a direct manipulation interface.
Ñ For example, if one has to drag a file icon
into a trash box icon for deleting a file:
y to delete all files in a directory one has to
perform this operation again and again
y very easily done in a command language-
interface by issuing a command delete *.*
Windowing Systems

Ñ Most modern GUIs are developed using

some windowing system.
Ñ A windowing system can generate displays
through a set of windows.
Ñ Since a window is a basic entity in such a
graphical user interface:
y we need to first discuss what exactly a window
is.
Window

Ñ A window is a rectangular area on the screen.

Ñ A window is a is a virtual screen:
y it provides an interface to the user for carrying out
independent activities,
y one window can be used for editing a program and
another for drawing pictures, etc.
Ñ A window can be divided into two parts:
y client part,
y non-client part.
Window

Ñ The client area makes up the whole of

the window,
y except for the borders and scroll bars.
Ñ The client area is available to the
programmer.
Ñ Non-client area:
y under the control of window manager.
Window management system
(WMS)

ÑA graphical interface might consist

of a large number of windows,
y necessary to have some systematic
way to manage the windows.
y Window Management System
(WMS)
Window management system
(WMS)

Ñ GUIs are developed using a window

management system (WMS):
y A window management system is
primarily a resource manager.
y keeps track of screen area resource
y allocates it to the different windows
which are using the screen.
Window management system
(WMS)

Ñ From a broader perspective, a WMS can be

considered as a user interface
management system (UIMS) ---
y not only does resource management,
y also provides the basic behavior to windows
y provides several utility routines to the
application programmer for user interface
development.
Window management system
(WMS)

Ñ A WMS simplifies the task of a GUI

designer to a great extent:
y provides the basic behavior to the various
windows such as move, resize, iconify, etc.
y provides routines to manipulate windows such
as:
x creating, destroying, changing attributes of the
windows, and drawing text, lines, etc.
Window management system
(WMS)

Ñ A WMS consists of two part:

y a window manager
y a window system.

Window Manager Application Program

WMS
Window
System
Window Manager and Window
System

Ñ User interacts with window manager to do

various window-related operations such as:
y window repositioning,
y window resizing,
y iconification, etc.
Ñ Window manager also controls the
screen’s real estate policy.
Window manager

Ñ The window manager is built on the top of

the window system:
y makes use of the basic services provided by
the window system.
Ñ The window manager determines how the
windows look and behave.
y several kinds of window managers can be
based on the same window system.
Window manager

Ñ Window manager can be considered

as a special program:
y makes use of the services (function
calls) of the window system.
Ñ Application programs
y invoke the window system for user
interface-related functions.
Window System

ÑProvides a large number of

routines for the programmer
ÑIt is very cumbersome to use
these large set of routines:
y most WMS provide a higher-level
abstraction called widgets.
Window Management System

Ñ A widget is the short form for a window

object.
Ñ Widgets are the building blocks in interface
design.
Ñ We know that an object is essentially a
collection of:
y related data with several operations defined
on these data.
Widgets

Ñ The data of an window object are:

y the geometric attributes (such as size,
location etc.)
y other attributes such as its background
and foreground color, etc.
Ñ The operations defined on these data
include, resize, move, draw, etc.
Advantages of Widgets

Ñ One of the most important reasons to

use widgets as building blocks:
y provide consistency.
Ñ Consistent user interfaces
y improve the user's productivity and
y lead to higher performance with fewer
errors.
Advantages of Widgets

Ñ Widgets make users familiar with standard

ways of using an interface ---
y users can easily extend their knowledge of
interface of one application to another
y the learning time for users is reduced to a
great extent.
Ñ Next lecture we will identify standard
widgets used to design GUIs.
Summary

Ñ User interface is an important

component of any software product.
Ñ We first discussed some important
concepts associated with user
interface design.
Ñ We discussed some desirable
properties of a good user interface.
Summary

Ñ There are 3 main types of interfaces:

y command language interface
y menu-based interface
y iconic interface
Ñ Each type of interface has its own
advantages and disadvantages:
y most modern interfaces use a combination of
all the three types.
Summary

Ñ We finally discussed concepts

associated with a window
management system (WMS):
y consists of a window manager and a
window system.
y we discussed the use of widgets as the
basic building blocks in GUI design.