Chapter 6 Interfaces
Chapter 6 Interfaces
Overview
✖ Interface types
○ highlight the main design and research issues for
each of the different interfaces
www.id-book.com 2
1. Command-based
✖ Commands such as abbreviations (e.g. ls) typed in at the
prompt to which the system responds (e.g. listing current
files)
www.id-book.com 3
Second Life command-based interface for
visually impaired users
www.id-book.com 4
Research and design issues
✖ Form, name types and structure are key research questions
www.id-book.com 5
2. WIMP and GUI
✖ Xerox Star first WIMP -> rise to GUIs
✖ 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
www.id-book.com 6
2. WIMP and GUI
✖ 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 7
GUIs
✖ Same basic building blocks as WIMPs but more varied
○ Color, 3D, sound, animation,
www.id-book.com 9
www.id-book.com 10
Apple’s shrinking windows
www.id-book.com 11
Safari Panorama Window View
www.id-book.com 12
Selecting a country from a scrolling
window
www.id-book.com 13
Is this method any better?
www.id-book.com 14
Research And Design Issues
✖ Window management
○ enables users to move fluidly between different
windows (and monitors)
○ but have to nest the lists of options within each other, requiring several
steps to get to the list with the desired option
www.id-book.com 16
Expanding Menus
✖ Enables more options to be shown on a single screen than
is possible with a single flat menu
www.id-book.com 17
Cascading Menu
www.id-book.com 18
Contextual Menus
✖ Provide access to often-used commands that make sense in
the context of a current task
✖ Appear when the user presses the Control key while clicking
on an interface element
○ e.g., clicking on a photo in a website together with holding down the
Control key results in options ‘open it in a new window,’ ‘save it,’ or
‘copy it’
www.id-book.com 19
Windows Jump List Menu
www.id-book.com 20
Research And Design Issues
✖ What are best names/labels/phrases to use?
✖ Placement in list is critical
○ Quit and save need to be far apart
www.id-book.com 21
Icon Design
✖ Icons are assumed to be easier to learn and remember than
commands
www.id-book.com 22
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
www.id-book.com 23
Icon Forms
✖ The mapping between the representation and
underlying referent can be:
○ similar (e.g., a picture of a file to represent the object file)
www.id-book.com 24
Icon Forms
✖ Most effective icons are similar ones
www.id-book.com 25
Early icons
www.id-book.com 26
Newer Icons
www.id-book.com 27
Simple Flat 2D Icons
www.id-book.com 28
Activity
✖ Sketch simple icons to represent the following operations to
appear on a digital camera screen:
○ Turn image 90 degrees sideways
○ Fix red-eye
www.id-book.com 30
Research And Design Issues
✖ There is a wealth of resources now so do not have to draw or
invent new icons from scratch
○ guidelines, style guides, icon builders, libraries
www.id-book.com 31
3. Multimedia
✖ Combines different media within a single interface with
various forms of interactivity
○ graphics, text, video, sound, and animations
www.id-book.com 32
BioBlast Multimedia Learning Environment
www.id-book.com 33
Pros and cons
✖ Facilitates rapid access to multiple representations of information
✖ Can provide better ways of presenting information than can any media
alone
www.id-book.com 34
Research And Design Issues
✖ How to design multimedia to help users explore, keep track of,
and integrate the multiple representations
○ provide hands-on interactivities and simulations that the user has to
complete to solve a task
www.id-book.com 35
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 36
Pros And Cons
✖ Can have a higher level of fidelity with objects they represent compared to
multimedia
www.id-book.com 37
Research And Design Issues
✖ Much research on how to design safe and realistic VRs to facilitate training
○ e.g. flying simulators
✖ Design issues
○ how best to navigate through them (e.g. first versus third person)
○ how to control interactions and movements (e.g. use of head and body movements)
○ how best to interact with information (e.g. use of keypads, pointing, joystick buttons);
www.id-book.com 39
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 40
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
www.id-book.com 41
Which dashboard is best?
www.id-book.com 42
Which dashboard is best?
www.id-book.com 43
Research And Design Issues
✖ Whether to use animation and/or interactivity
www.id-book.com 44
6. Web
✖ Early websites were largely text-based, providing hyperlinks
www.id-book.com 45
Usability versus attractive?
✖ Vanilla or multi-flavor design?
○ Ease of finding something versus aesthetic and enjoyable experience
www.id-book.com 46
In Your Face Ads
✖ Web advertising is often intrusive and pervasive
www.id-book.com 47
Research and design issues
✖ Need to consider how best to design, present, and structure
information and system behavior
www.id-book.com 48
Design Principles
Veen’s (2001)
(1) Where am I?
(2) Where can I go?
(3) What’s here?
www.id-book.com 49
Activity
✖ Look at the Nike.com website
✖ Does it matter?
www.id-book.com 50
7. Consumer electronics and appliances
✖ Everyday devices in home, public place, or car
○ e.g. washing machines, remotes, photocopiers, printers and navigation systems)
www.id-book.com 52
Research And Design Issues
✖ Need to design as transient interfaces with short interactions
✖ Simple interfaces
www.id-book.com 53
8. Mobile
✖ Handheld devices intended to be used while on the move
www.id-book.com 54
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
www.id-book.com 55
iBeer app
www.id-book.com 56
QR codes and cell phones
www.id-book.com 57
Mobile challenges
✖ Smaller screens, small number of physical keys and restricted
number of controls
www.id-book.com 58
Research and design issues
✖ Mobile interfaces can be tricky and cumbersome to use for those
with poor manual dexterity or ‘fat’ fingers
www.id-book.com 59
9. Speech
✖ Where a person talks with a system that has a spoken language
application, e.g. timetable, travel planner
✖ Used most for inquiring about very specific information, e.g. flight
times or to perform a transaction, e.g. buy a ticket
www.id-book.com 60
Have speech interfaces come of age?
www.id-book.com 61
Get me a human operator!
✖ Most popular use of speech interfaces currently is for call routing
www.id-book.com 62
Format
✖ Directed dialogs are where the system is in control of the conversation
✖ More chance of error, since caller might assume that the system is like a
human
www.id-book.com 63
Research And Design Issues
✖ How to design systems that can keep conversation on track
○ help people navigate efficiently through a menu system
www.id-book.com 64
10. Pen
✖ Enable people to write, draw, select, and move objects at an
interface using lightpens or styluses
www.id-book.com 65
Pros and Cons
✖ Allows users to quickly and easily annotate existing
documents
www.id-book.com 66
11. Touch
✖ Touch screens, such as walk-up kiosks, detect the
presence and location of a person’s touch on the display
www.id-book.com 67
Research and design issues
✖ More fluid and direct styles of interaction involving freehand and
pen-based gestures
www.id-book.com 68
Research and design issues
✖ Will finger-flicking,
swiping, stroking and
touching a screen result
in new ways of
consuming, reading,
creating and searching
digital content?
www.id-book.com 69
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 70
Home Entertainment
✖Universal appeal
young children, grandparents,
professional gamers,
technophobes
www.id-book.com 71
Gestures In The
Operating Theatre
www.id-book.com 74
13. Haptic
✖ Tactile feedback
○ applying vibration and forces to a person’s body, using actuators that
are embedded in their clothing or a device they are carrying, such as a
smartphone
www.id-book.com 75
Realtime Vibrotactile Feedback
www.id-book.com 76
Research And Design Issues
✖ Where best to place actuators on body
www.id-book.com 78
Research And Design Issues
✖ Need to recognize and analyse speech, gesture, and eye gaze
www.id-book.com 79
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
www.id-book.com 81
DiamondTouch Tabletop
www.id-book.com 82
Advantages
✖ Provide a large interactional space that can support flexible
group working
www.id-book.com 83
Research and Design Issues
✖ More fluid and direct styles of interaction involving freehand and pen-
based gestures
✖ Core design concerns include whether size, orientation, and shape of the
display have an effect on collaboration
www.id-book.com 84
16. Tangible
✖ Type of sensor-based interaction, where physical objects, e.g.,
bricks, are coupled with digital representations
www.id-book.com 85
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 86
Benefits
✖ Can be held in both hands and combined and manipulated in ways not
possible using other interfaces
○ allows for more than one person to explore the interface together
○ objects can be placed on top of each other, beside each other, and inside
each other
www.id-book.com 87
VoxBox
✖ A tangible system that gathers opinions at events through playful and
engaging interaction (Goldsteijn et al, 2015)
www.id-book.com 88
Research And Design Issues
✖ Develop new conceptual frameworks that identify novel and specific
features
✖ The kind of coupling to use between the physical action and digital effect
○ If it is to support learning then an explicit mapping between action and effect is critical
○ If it is for entertainment then can be better to design it to be more implicit and unexpected
○ Bricks, cubes, and other component sets are most commonly used because of flexibility and
simplicity
○ Stickies and cardboard tokens can also be used for placing material onto a surface
www.id-book.com 89
17. Augmented and mixed reality
✖ Augmented reality - virtual representations are
superimposed on physical devices and objects
www.id-book.com 90
Examples
✖ In medicine
○ virtual objects, e.g. X-rays and scans, are overlaid on part of a patient’s
body
www.id-book.com 92
Top Gear James May in AR
✖ Appears as a 3D character to act as personal tour guide at Science Museum
www.id-book.com 93
Research and design issues
✖ What kind of digital augmentation?
www.id-book.com 94
18.Wearables
✖ First developments were head- and eyewear-mounted cameras
that enabled user to record what was seen and to access digital
information
www.id-book.com 95
Google Glass: short-lived
✖ What were the pros and cons?
www.id-book.com 96
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 98
19. Robots and drones
✖ Four types of robot
○ remote robots used in hazardous settings
www.id-book.com 99
Advantages
✖ Pet robots are assumed to have therapeutic qualities, helping
to reduce stress and loneliness
✖ Remote robots can be controlled to investigate bombs and
other dangerous materials
www.id-book.com 100
Drones
✖ Unmanned aircraft that are controlled remotely and used in a number of
contexts
○ e.g. entertainment, such as carrying drinks and food to people at festivals and
parties;
✖ Can fly low and and stream photos to a ground station, where images can be
stitched together into maps
✖ Can be used to determine the health of a crop or when it is the best time to
www.id-book.com harvest the crop 101
Drone in vineyard
www.id-book.com 102
Research and design issues
✖ How do humans react to physical robots designed to exhibit behaviors (e.g. making
facial expressions) compared with virtual ones?
✖ Should robots be designed to be human-like or look like and behave like robots that
serve a clearly defined purpose?
✖ Should the interaction be designed to enable people to interact with the robot as if it
was another human being or more human-computer-like (e.g. pressing buttons to issue
commands)?
www.id-book.com 106
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
✖ BCIs apps:
○ Games
○ enable people who are paralysed to control robots
www.id-book.com 107
Brainball Game
www.id-book.com 108
Which Interface?
✖ Is multimedia better than tangible interfaces for learning?
✖ Will wearable interfaces be better than mobile interfaces for helping people find
information in foreign cities?
www.id-book.com 109
Which Interface?
✖ Will depend on task, users, context, cost, robustness, etc.
✖ Speech interfaces also being used much more for a variety of commercial
services
www.id-book.com 110
Summary
✖ Many innovative interfaces have emerged post the WIMP/GUI era,
including speech, wearable, mobile, brain and tangible
www.id-book.com 111
game of Snake on a PC
We want you to consider the pros and cons of playing
the Snake Game using different interfaces. Select
three interfaces, other than the GUI and mobile ones
(e.g. tangible, wearable, and shareable) and describe
how the game could b e redesigned for each of these,
taking into account the user group being targeted.