Interfaces
Interfaces
INTERFACES
Road Map
• Chapter 6 INTERFACES
– 6.1 Introduction
– 6.2 Interface Types
– 6.4 Which Interface?
www.id-book.com 2
Objectives
• Provide an overview of the many different
kinds of interfaces.
• Consider which interface is best for given
application or activity.
www.id-book.com 3
Overview
• Interface types
www.id-book.com 4
INTERFACES
Introduction
• Until mid 1990s interaction designers concerned
themselves to develop efficient and effective user interfaces
for desktop computers aimed at a single user. This include
determining how to structure menus to make options easy
to navigate, designing icons and other graphical elements to
be easily recognized and distinguished from one another,
and developing logical dialog boxes that are easy to fill.
Advances in graphical interfaces, speech, gesture and
handwriting recognition, together with the internet,
smartphones, wireless network, sensor technologies.
• The goal of this chapter is how to design interfaces for
different environments, people, places, and activities.
www.id-book.com 5
Interfaces Types
• There are numerous types of interfaces:
1- 5-Information 9-Speech 13-Haptic 17-
Command- Visualization Augmented
based and Reality
dashboards
2-WIMP 6-Web 10-Pen 14- 18-Wearable
and GUI Multimodal
3- 7-Consumer 11-Touch 15- 19-Robots
Multimedia electronics Shareable
and
appliances
4-Virtual 8-Mobile 12-Air-based 16-Tangible 20-Brain
Reality gesture Computer
Interaction
www.id-book.com 6
Interfaces Categories
• Some of the types are primarily concerned
with :
– A Function (intelligent, adaptive, smart)
– Interaction style (command, graphical,
multimedia)
– Input/output device used (pen-based, speech-
based, gesture-based)
– Platform being designed for (PC, mobile,
tablet, wearable)
www.id-book.com 7
1. Command-based
www.id-book.com 8
1. Command-based
• Require the user to type in Commands were
abbreviations (e.g. ls or dir) typed in at the
prompt to which the system responds (e.g.
listing current files)
• Some are hard wired at keyboard, others can be
assigned to keys
• Efficient, precise, and fast
• Large overhead to learning set of commands
www.id-book.com 9
Command-Organization Strategies
A unifying interface concept or metaphor aids
– learning
– problem solving
– retention
7-10
Command plus arguments/options
Command plus arguments
• Follow each command by one or more arguments that indicate objects to be
manipulated, e.g.
– COPY FILEA, FILEB
– DELETE FILEA
– PRINT FILEA, FILEB, FILEC
• Keyword labels for arguments are helpful for some users, e.g. COPY
FROM=FILEA TO=FILEB.
7-11
1. Command-based
• Examples:
– Command Prompt in Windows
– Ctrl+C for copy in Windows
– Cmd+C for copy in Mac
www.id-book.com 13
2. WIMP and GUI
www.id-book.com 14
2. WIMP and GUI
• Xerox Star first WIMP -> rise to GUIs
• WIMP stands for “Windows, Icons, Menus, Pointer "
• Windows
– could be scrolled, stretched, overlapped, opened, closed, and moved around the screen
using the mouse
• Icons
– represented applications, objects, commands, and tools that were opened when clicked on
• Menus
– offering lists of options that could 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
www.id-book.com 15
GUIs
• Same basic building blocks as WIMPs but more
varied
– Color, 3D, sound, animation,
www.id-book.com 16
Windows
• Windows were invented to overcome physical
constraints of a computer display
– enable more information to be viewed and tasks to be
performed
www.id-book.com 17
www.id-book.com 18
Apple’s shrinking windows
www.id-book.com 19
Safari panorama window view
www.id-book.com 20
Task-Related Organization
6-21
Binary Menus
• Binary Menus
– Mnemonic letters
– Radio Buttons
– Button Choice
6-22
Multiple-item Menus
• Multiple-item Menus
• Multiple-selection menus or check boxes
6-23
Pull-down, pop-up, and toolbar menus
• Pull-down menus
• Always available to the user by making selections
on a top menu bar
• Key board shortcuts
– E.g., Ctrl-C important to support expert user
efficiency
• Toolbars, iconic menus, and palletes
– Offers actions on a displayed object
• Pop-up menus
– Appear on a display in response to a check or
tap with a pointing device.
6-24
Pull-down, pop-up, and toolbar menus
• Pull-down, pop-up, and toolbar menus
– Pull-down menus
• Always available to the user by making selections
on a top menu bar
• Key board shortcuts
– E.g., Ctrl-C important to support expert user
efficiency
• Toolbars, iconic menus, and palletes
– Offers actions on a displayed object
• Pop-up menus
– Appear on a display in response to a check or
tap with a pointing device.
6-25
Pull-down, pop-up, and toolbar menus
• Pull-down, pop-up, and toolbar menus
– Pull-down menus
• Always available to the user by making selections
on a top menu bar
• Key board shortcuts
– E.g., Ctrl-C important to support expert user
efficiency
• Toolbars, iconic menus, and palletes
– Offers actions on a displayed object
• Pop-up menus
– Appear on a display in response to a check or
tap with a pointing device.
6-26
Cascading Pull-down Menu
6-27
Cascading menu
www.id-book.com 28
Pie Menu
6-29
Pie Menu
6-30
Menus for long lists
Selecting a country from a scrolling menu
www.id-book.com 31
Is this method any better?
www.id-book.com 32
Menus for long lists
• Menus for long lists
– Sometimes the list of menu items may be longer than 30 to 40
lines that can not reasonably fit on a display.
– One solution is to create a tree structure menu but some times
the desire is to limit the interface to one conceptual menu is
strong.
– Example: list of countries that can be categorized by alphabet
order or to be kept on a scrolling menu as one list.
6-33
Menus for long lists
• Scrolling menus
– Scrolling menus display the
first portion of the menu
and an additional menu
item, typically an arrow that
leads to the next set of
items in the menu
sequence.
6-34
Menus for long lists
• Menus for long lists
– Combo boxes
• Combo boxes
combine a
scrolling menu
with a text-entry
filed. Users can
type leading
characters to scroll
quickly through the
list.
6-35
Menus for long lists
• Fisheye menus
– Fisheye menus display all of the menu items
on the screen at once, but show only items
near the cursor at full size, items further
away are displayed at a smaller size.
– Fisheye menus have been made popular by
Apple’s Mac OS X.
6-36
Menus for long lists
• Menus for long lists
– Sliders and alpha-sliders
• When items consist of ranges or numerical
values, a slider is a natural choice to allow
the selection of a value.
• The alph-aslider uses multiple levels of
granularity in moving the slider thumb and
therefore can support tens or hundreds of
thousand of items.
6-37
Menus for long lists
• Menus for long lists (cont.)
– Two-dimensional menus
• “Fast and vast” two-dimensional menus give users
a good overview of the choices, reduce the
number of required actions, and allow rapid
selection.
• Multiple-column menus are useful in web-page
design to minimize the scrolling needed to see a
long list and to give users a single screen overview
of the full set of choices using icons or text
6-38
Two- Dimensional Menus
contains icons
6-39
Two- Dimensional Menus
contains Text
6-40
Menus for long lists
• Embedded menus and hotlinks
– Embedded menus are an alternative to explicit menus
– It is natural to allow users reading about people,
events, and places to retrieve detailed information by
selecting menus in context.
6-41
Embedded Menus
6-42
3. Multimedia
www.id-book.com 43
3. Multimedia
• Combines different media within a single
interface with various forms of interactivity
– graphics, text, video, sound, and animations
www.id-book.com 44
Multimedia Examples
• Fisher-price
The ABC's Zoo Learning Game :
http://www.fisher-price.com/en_US/games
andactivities/onlinegames/theabcszoolear
ninggame.html
www.id-book.com 45
Multimedia - Activity
• Watch Donald Norman in his first multimedia
CD-ROM book (1994):
https://vimeo.com/channels/1057867
www.id-book.com 46
Multimedia - Activity
• What do you think should be included in a modern day e-
textbook?
• Users who interact with educational multimedia usually
play video and animations while skimming through text or
static diagrams.
• The former are dynamic, easy and enjoyable to watch
while the latter are static, boring, and difficult to read from
the screen.
• One way to encourage more systematic and extensive
interactions (interact with dynamic and static components)
is to require certain activities to be completed that require
reading the text before the user move to the next part.
www.id-book.com 47
4. Virtual reality
www.id-book.com 48
4. Virtual reality
• Computer-generated graphical simulations
providing:
– “the illusion of participation in a synthetic environment
rather than external observation of such an
environment” (Gigante, 1993)
www.id-book.com 49
Microsoft unleashes virtual reality in
latest Minecraft
• http://nypost.com/2015/06/15/microsoft-unl
eashes-virtual-reality-in-latest-minecraft/
www.id-book.com 50
4. Virtual reality
• VR places users in an immersive (engross
in ) environment that blocks out the world.
– Users see an artificial world inside their
stereoscopic (image that has depth and
solidness) goggles, which is updated as they
turn their heads.
• Video : Comcept technology 3D HMD (Head mounted display)
PERIPHERAL AND STEREOSCOPIC VISION GOGGLES.mp4
www.id-book.com 51
4. Virtual reality
• VR places users in an immersive (engross
in ) environment that blocks out the world.
– Users control an activity by hand gestures
inside a data glove which allows them to
point, select, grasp, and navigate.
www.id-book.com 52
Data Glove
www.id-book.com 53
4. Virtual reality
• VR places users in an immersive (engross
in ) environment that blocks out the world.
– Handheld controllers allow users to have six-
degree-of-freedom pointer (3 dimensions of
position, 3 dimensions of orientation).
www.id-book.com 54
4. Virtual reality
• VR places users in an immersive (engross
in ) environment that blocks out the world.
– Virtual worlds allow users to travel through the
human body, swim through oceans,
participate in fantasy worlds with other distant
internet-connected collaborators.
www.id-book.com 55
Which is the most engaging game of
Snake?
www.id-book.com 56
Realism versus abstraction?
• One of the challenges facing interaction designers is whether to use realism or abstraction
when designing an interface. This means designing objects either to (i) give the illusion of
behaving and looking like real-world counterparts or (ii) appear as abstractions of the objects
being represented. This concern is particularly relevant when implementing conceptual models
that are deliberately based on an analogy with some aspect of the real world. For example, is it
preferable to design a desktop to look like a real desktop, a virtual house to look like a real
house, or a virtual terrain to look like a real terrain? Or, alternatively, is it more effective to
design representations as simple abstract renditions, depicting only a few salient features?
• One of the main benefits of using realism at the interface is that it can enable people to feel
more comfortable when first learning an application. The rationale behind this is that such
representations can readily tap into people’s understanding of the physical world. Hence,
realistic interfaces can help users initially understand the underlying conceptual model. In
contrast, overly schematic and abstract representations can appear to be too computer-like and
may be off-putting to the newcomer. The advantage of more abstract interfaces, however, is
that they can be more efficient to use. Furthermore, the more experienced users become, the
more they may find comfortable interfaces no longer to their liking. A dilemma facing designers,
therefore, is deciding between creating interfaces to make novice users feel comfortable (but
more experienced users less comfortable) and designing interfaces to be effective for more
experienced users (but maybe harder to learn by novices).
www.id-book.com 57
Virtual reality
• Virtual Technology can be through:
– Headsets that have head tracking that allows
developers to create more compelling games,
movies, and virtual environment.
– 3D Software toolkits to program desktops
virtual environments to use mice, keyboard,
joystick.
– 3D Movies in IMAX require wearing pair of
glasses.
www.id-book.com 58
17. Augmented and Mixed Reality
• In which users see the real world with an overlay
of additional information.
• Augmented reality - virtual representations are
superimposed on physical devices and objects
• Mixed reality - views of the real world are
combined with views of a virtual environment
• Many applications including medicine, games,
learning, museums, and everyday exploring
www.id-book.com 59
Augmented Reality Applications
– Users are looking at the walls of a building,
their semitransparent eyeglasses may show
the location of electrical wires.
www.id-book.com 60
Augmented Reality Applications
• In medicine
– virtual objects, e.g. X-rays and scans, are overlaid on part of a
patient’s body
www.id-book.com 61
• Guide visitors through tourist attractions, tourist-
guide eyeglasses could allow visitors to view
labels about architectural features in the historic
town.
www.id-book.com 62
An augmented map
www.id-book.com 63
Top Gear James May in AR
• Appears as a 3D character to act as personal tour
guide at Science Museum
www.id-book.com 64
5. Information visualization and
dashboards
• Computer-generated interactive graphics of complex data
• Techniques include:
– 3D interactive maps that can be zoomed in and out of and which
present data via webs, trees, clusters, scatterplot diagrams, and
interconnected nodes
www.id-book.com 65
Information visualization
• http://www.oecdbetterlifeindex.org
• http://hint.fm/wind/
• http://www.scientificamerican.com/article/w
ater-in-water-out/
• http://www.cs.umd.edu/hcil/
www.id-book.com 66
Dashboards
• Show screenshots of data updated over periods of
time - to be read at a glance
• Usually not interactive - slices of data that depict
current state of a system or process
• Need to provide digestible and legible information for
users
– design its spatial layout so intuitive to read when first
looking at it
www.id-book.com 68
Activity -Which dashboard is best?
www.id-book.com 69
Activity-Which dashboard is best?
www.id-book.com 70
Activity-Which dashboard is best?
• Much thought has gone into the visual design of BA
dashboard – the pictograms are simple and colorful and
draws the reader’s attention. The first thing that grabs the
attention is that the flier has flown an enormous number of
miles that is equivalent to three weeks in the air. The
information in the lower right-hand corner adds a bit of
humor.
• The London dashboard is incredibly busy, visually, and
requires the viewer to spend time scanning it to find some
relevant information. the individual graphics and text are
relatively simple and easy to understand. It provides much
more information than the British Airways dashboard about
transport, the level of service, the weather, news, headlines,
cycle hire capacity, weather forecast, and air pollution. After
a few times glancing at it, the viewer can learn where to look
to see feeds that interest them.
www.id-book.com 71
Situated Displays
http://www.hcibook.com/e3/casestudy/hermes/ 72
7. Consumer electronics and appliances
www.id-book.com 74
Activity - A toaster
• Look at the controls on the toaster and
describe what each does. Consider how
these might be replaced with an LCD
screen. What would be gained and lost
from changing the interface in this way?
www.id-book.com 75
Activity - A toaster
• To design the controls to appear on an LCD screen
would enable more information and options to be
provided. For example: only toast one slice, keep
the toast warm, automatically pop up when the toast
is burning. It will allow precise timing of the toasting
in terms of minutes and seconds. However, as has
happened with the design evolution of microwave
ovens, a downside is that it is likely to increase the
complexity of what previously was a set of logical
and very simple actions to make it more difficult to
use.
www.id-book.com 76
Research and design issues
• Need to design as transient interfaces with
short interactions
• Simple interfaces
• Consider trade-off between soft and hard
controls
– e.g. buttons or keys, dials or scrolling
www.id-book.com 77
8. Mobile
• Handheld devices intended to be used while on the
move
• Have become pervasive, increasingly used in all
aspects of everyday and working life
• Apps running on mobiles have greatly expanded, e.g.
– used in restaurants to take orders
– car rentals to check in car returns
– supermarkets for checking stock
– in the streets for multi-user gaming
– in education to support life-long learning
www.id-book.com 78
The advent of the iPhone app
• A whole new user experience that was
designed primarily for people to enjoy
– many apps not designed for any need, want or use
but purely for idle moments to have some fun
– e.g. games
www.id-book.com 79
QR codes and cell phones
www.id-book.com 80
Mobile challenges
• Smaller screens, small number of physical keys and
restricted number of controls
• Innovative physical designs including:
– roller wheels, rocker dials, up/down on the face of phones, 2-
way and 4-way directional keypads, softkeys, silk-screened
buttons
www.id-book.com 83
Mouse
Standard Mouse
85
Mouse
• Mouse : is a small, palm sized box housing a
weighted ball, as the box is moved over the
tabletop, the ball is rolled by the table and
rotates inside the housing. This rotation is
detected by small rollers that are in contact
with the ball, and these adjust the values of
potentiometers. The changing values of
these potentiometers can be directly related
to changes in position of the ball.
86
10. Pen
• Enable people to write, draw, select, and move objects at
an interface using lightpens or styluses
www.id-book.com 87
11. Touch
• Touch pads are touch-sensitive tablets usually around 3-
4 inches square. Used extensively with apple lap tops.
• Touch screens, such as walk-up kiosks, detect the
presence and location of a person’s touch on the display
www.id-book.com 88
12. Air-based gestures
• Uses camera recognition, sensor and computer vision
techniques
– can recognize people’s body, arm and hand gestures in a room
www.id-book.com 89
Home entertainment
• Universal appeal
– young children,
grandparents,
professional
gamers,
technophobes
• A touch less
system that
recognizes
gestures
• surgeons can
interact with and
manipulate MRI or
CT images
www.id-book.com 90
14. Multi-modal
• Meant to provide enriched and complex
user experiences
– multiplying how information is experienced and
detected using different modalities, i.e. touch, sight,
sound, speech
www.id-book.com 91
15. Shareable
• Shareable interfaces are designed for more than
one person to use
– provide multiple inputs and sometimes allow
simultaneous input by co-located groups
Chapter 6
INTERFACES
www.id-book.com 93
16. Tangible
• Type of sensor-based interaction, where
physical objects, e.g., bricks, are coupled with
digital representations
• When a person manipulates the physical
object/s it causes a digital effect to occur, e.g. an
animation
• Digital effects can take place in a number of
media and places or can be embedded in the
physical object
www.id-book.com 94
Example
• A simple example of tangible UI is the computer mouse. Dragging the
mouse over a flat surface and having a pointer moving on the screen
accordingly. There is a very clear relationship about the behaviors
shown by a system with the movements of a mouse.Another example of
a tangible UI is the Marble Answering Machine by Durrell Bishop (1992).
• Another example of a tangible UI is the Marble Answering Machine by
Durrell Bishop (1992). A marble represents a single message left on the
answering machine. Dropping a marble into a dish plays back the
associated message or calls back the caller.
• Another example is the Topobo system. The blocks in Topobo are like
LEGO blocks which can be snapped together, but can also move by
themselves using motorized components. A person can push, pull, and
twist these blocks, and the blocks can memorize these movements and
replay them.
www.id-book.com 95
Examples
• Chromarium cubes
– when turned over digital animations of color are mixed on an adjacent wall
• Flow Blocks
– depict changing numbers and lights embedded in the blocks
• Urp
– physical models of buildings moved around on tabletop
– used in combination with tokens for wind and shadows -> digital shadows
surrounding them to change over time
www.id-book.com 96
18.Wearables
• First developments were head- and eyewear-mounted
cameras that enabled user to record what was seen and
to access digital information
• Since, jewellery, head-mounted caps, smart fabrics,
glasses, shoes, and jackets have all been used
– provide the user with a means of interacting with digital
information while on the move
www.id-book.com 97
Google Glass: short-lived
www.id-book.com 98
Research and design issues
• Comfort
– needs to be light, small, not get in the way, fashionable, and preferably hidden in
the clothing
• Hygiene
• Ease of wear
– how easy is it to remove the electronic gadgetry and replace it?
• Usability
– how does the user control the devices that are embedded in the clothing?
www.id-book.com 99
19. Robots and drones
• Four types of robot
– remote robots used in hazardous settings
www.id-book.com 100
20. Brain-computer interfaces
• Brain–computer interfaces (BCI) provide a communication
pathway between a person’s brain waves and an external
device, such as a cursor on a screen
• Person is trained to concentrate on the task, e.g. moving the
cursor
• BCIs work through detecting changes in the neural
functioning in the brain
• BCIs apps:
– Games
– enable people who are paralysed to control robots
www.id-book.com 101
Which interface?
• Is multimedia better than tangible interfaces for learning?
www.id-book.com 102
Which interface?
• Will depend on task, users, context, cost,
robustness, etc.
• Mobile platforms taking over from PCs
• Speech interfaces also being used much
more for a variety of commercial services
• Appliance and vehicle interfaces becoming
more important
• Shareable and tangible interfaces entering
our homes, schools, public places, and
workplaces
www.id-book.com 103
Summary
• Many innovative interfaces have emerged post the
WIMP/GUI era, including speech, wearable, mobile,
brain and tangible
• Raises many design and research questions to
decide which to use
– e.g. how best to represent information to the user so they
can carry out ongoing activity or task