Chapter 5

Interfaces
 Objectives

• 1. Enumerate and discuss

principles that influence a system’s
interface design before writing any
code.
 Introduction
• Till the mid-1990s, interaction designers were mainly concerned with the
development of effective and convenient desktop pc user interfaces targeted
at single users. This meant working out that how best to deliver information
on a screen so that users can carry out their tasks, such as assessing how
menus can be structured to make options easy to navigate, designing icons
and other graphical elements that can be instantly recognizable and identified
from each other, and creating easy-to-fill logical dialog boxes. The face of
human-computer interaction has been altered by breakthroughs in graphical
interfaces, speech, gesture and handwriting recognition, along with the
emergence of the Internet, smartphones, wireless networks, sensor
technologies, and a variety of other technological advances that provide small
and large displays.
• Designers have had far more possibilities for
designing user experiences during the last
decade. Various points of view about interaction
design and an extension of research in the field
have been empowered by the range of
technological developments. Effective
interventions of regulating and interacting with
digital information, such as gesture-based, touch-
based, and even brain-computer interaction, have
been developed, for example.
 Interface Types
• Various adjectives, such as graphical, command, speech, multimodal,
invisible, ambient, affective, mobile, intelligent, adaptive, smart,
tangible, touchless, and natural, were used to describe the various
types of interfaces which have been created. Some of the types of
interfaces are mainly concerned with a feature (e.g. to be
perceptive, being flexible and adaptable, being ambient, being
clever), whereas others concentrate on the aesthetic of interaction
used (e.g. command, graphic, multimedia), the input/output device
used (e.g. penbased, speech-based, gesture-based), or the platform
designed for (e.g. tablet, mobile, PC, wearable).
• 1. The Sketchpad – Ivan Sutherland (1963) describes the
first interactive graphical interface
http://youtu.be/USyoT_Ha_bA
• 2. The Mother of All Demos – Douglas Engelbart (1968)
describes the first WIMP. http://youtu.be/yJDvzdhzMY \
• 3. Put that there (1979) – A short video from MIT
demonstrating the first speech and gesture interface
http://youtu.be/RyBEUyEtxQo
• 4. Unveiling the genius of multi-touch interface design – Jeff
Han's TED talk (2007) http://youtu.be/ac0E6deG4AU
• 5. Intel's Future Technology Vision (2012)
http://youtu.be/g_cauM3kccI
Command based InterfacesCommand
based Interfaces
• Beginning interfaces requires a user to enter
commands all of which were usually abbreviated
(e.g. ls) to the prompt symbol on the computer
display which the system responded (e.g. by
listing current files using a keyboard). Pressing
certain combinations of keys (e.g. Shift+Alt+Ctrl)
is another way of issuing commands. Some
instructions, such as erase, enter, and undo, are
also a fixed part of the keyboard, whereas other
function keys can be coded as specific commands
• Graphical interfaces which integrate commands like
menus, icons, keyboard shortcuts, and
popup/predictable text commands as part of an
application have largely replaced command line
interfaces. The advantage of command line
interfaces is that users find them easier and faster
to use than equivalent menu-based systems (Raskin,
2000) and to perform certain operations as part of a
complex software package, such as CAD
environments (e.g. Rhino3D and AutoCAD), so that
professional designers can interact with the
software quickly and accurately. They also provide
scripting for batch operations and are increasingly
being used on web, in which the search feature
 WIMP & GUI
• The layout of the very first transition of WIMP
interfaces has shared common visuals, usually
has a boxsy GUI ; user interaction took place
through a combination of windows, scroll bars,
checkboxes, panels, palettes and dialog boxes
that appeared on the screen in various forms.
 Window design
• Windows were invented to overcome the physical
constraints of a computer display, enabling more
information to be viewed and tasks to be performed at
the same screen. Multiple windows can be opened at
any one time, e.g. web pages and word processor
documents, enabling the user to switch between them
when needing to look or work on different documents,
files, and applications. Scrolling bars within windows
also enable more information to be viewed than is
possible on one screen. Scroll bars can be placed
vertically and horizontally in windows to enable
 Menu design
Interface menus offer users an organized
method of selecting from readily accessible
array of choices, just the same as restaurant
menus. Headings can be used to make it
easier for the user to scan through them and
find what they want as part of the menu.
• A • B
• The Italian restaurant • The Japanese restaurant is
displayed in synchronous
Jamie, is divided into a classifications: sushi and
number of classifications, sashimi, sushi entrée, Japanese
such as antipasti and entrée platters, and specialty
sides, pasta, main courses, Asian fusion chef
and appetizers. • For various choices, the
Japanese menu represents a
• Jamie's menu utilizes collection of text information
visual content to represent and one picture of a sample dish
each type. for each category.
• To represent every other • All necessary data about the
dishes are readily available for
type, Jamie's menu uses
users have, to understand and
visual content.. help them choose what they will
order.
 There are numerous
menu interface styles,
including :
1. flat lists, drop-down
 2. pop-up, contextual

• The pop-up menu is also regarded to as the

"Context menu," or the "Shortcut menu" is a
form of graphical user interface menu that
appears at the right click of the user
interaction. It provides the user with a
constrained set of options available. And
preferences are selected related to the options.
 3. expanding ones, e.g. scrolling
and cascading
• refers to menus that can be
displayed/hidden by having to click
on them or a portion of the menu