UNIT 10-12:

Principles of Good
Interface Design
Ms. Sherilene B. Pamintuan, MIT
INTRODUCTION
This unit discusses the different kinds of interfaces with
their examples. It also emphasizes the importance of
research and design issues to deepen your knowledge in
interfaces.

ESSENTIAL QUESTION
• What are the Research and Design Issues of
Design Interfaces?
INTENDED LEARNING OUTCOMES
1. Learn the different kinds of interfaces.
2. Determine the main design and research
considerations for each of the interfaces.
 UNIT 10-12
PRINCIPLES OF GOOD
INTERFACE DESIGN
 ACTIVITY 1: Diagnostic
Assessment

Direction: Identify the following Kinds of Interfaces and

write your answers on the blanks. Refer to the choices
from the table below.
Touchscreen 3D model Drones Virtual Reality

Augmented Smart watch Icons Air-based

Reality gesture
smartboard DOS menu Robot
command
 ACTIVITY 1: Diagnostic
Assessment

1 2 3 4

5 6 7 8

9 10 11 12
 COMPUTER
 When considering how to solve a user problem, the default
solution that many developers choose to design is an app that
can run on a smartphone.
 Making this easier still are many easy-to-use app developer
tools that can be freely downloaded.
 It is hardly surprising, therefore, to see just how many apps
there are in the world.
 COMPUTER
 Despite the ubiquity (everywhere) of the smartphone app industry, the
web continues to proliferate in offering services, content, resources, and
information.
 A central concern is how to design them to be interoperable across
different devices and browsers, which considers the varying form factors,
size, and shape of smart watches, smartphones, laptops, smart TVs, and
computer screens.
 Besides the app and the web, many other kinds of interfaces have been
developed, including voice interfaces, touch interfaces, gesture interfaces,
and multimodal interfaces.
 COMPUTER
 The proliferation of technological developments has
encouraged different ways of thinking about
interaction design and UX.
For example, input can be via mice, touchpads,
pens, remote controllers, joysticks, RFID readers,
gestures, and even brain-computer interaction.
 COMPUTER
 Output is equally diverse, appearing in the form of
graphical interfaces, speech, mixed realities,
augmented realities, tangible interfaces, wearable
computing, and more.
 COMPUTER
 Numerous adjectives have been used to describe the different
types of interfaces that have been developed, including
graphical, command, speech, multimodal, invisible, ambient,
affective, mobile, intelligent, adaptive, smart, tangible,
touchless, and natural.
 COMPUTER
 Some of the interface types are primarily concerned with a function (for
example,
 to be intelligent, to be adaptive, to be ambient, or to be smart),
 while others focus on the interaction style used (such as command,
graphical, or multimedia),
 the input/output device used (for instance, pen-based, speech-based, or
gesture-based), or
the platform being designed for (for example, tablet, mobile, PC, or
wearable).
 COMPUTER
 The interface types are loosely ordered in terms of when they
were developed.
 They are numbered to make it easier to find a particular one.
(See the following list for the complete set.)
•  
 COMPUTER
The Types of Interfaces covered in these units • Pen
include the following: • Touch
• Command-Based • Air-based Gestures
• WIMP and GUI • Haptic
• Multimedia • Multi-Modal
• Virtual Reality • Shareable
• Information Visualization & Dashboard • Tangible
• Web • Augmented & Mixed Reality
• Consumer Electronics & Appliances • Wearables
• Mobile • Robots and Drones
• Speech • Brain-Computer Interfaces
 1. COMMAND-BASED
• Early interfaces required the user to type in commands that were
typically abbreviations (for example, ls) at the prompt symbol appearing
on the computer display, to which the system responded (for example, by
listing current files).
• Another way of issuing command is by pressing certain combinations of
keys (such as shift+Alt+Ctrl).
• Some commands are also a fixed part of the keyboard, such as delete,
enter, and undo, while other function keys can be programmed by the
user as specific commands (for instance, F11 commanding print action).
 1. COMMAND-BASED

Figure 10.1 Second Life command-based interface for visually impaired users
Source: http://www.eelke.com/images/textsl.jpg
 1. COMMAND-BASED

Research and Design Issues

• Form name types and structure are key research
questions
• Consistency is most important design principle
– E.g. always use first letter of command
• Command interfaces popular for web scripting
 2. WIMP AND GUI

The Xerox Star interface led to the birth of the graphical

user interface (GUI), opening new possibilities for users to
interact with a system and for information to be presented
and represented within a graphical interface.
Specifically, new ways of visually designing the interface
became possible, which included the use of color, typography,
and imagery (Mullet and Sano, 1995).
 2. WIMP AND GUI
The original GUI was called a WIMP (Windows, Icons, Menus, Pointer) and
consists of the following:
• Windows: Sections of the screen that can be scrolled, stretched, overlapped,
opened, closed, and moved using a mouse.
• Icons: Pictograms that represent applications, objects, commands, and tools
that are opened or activated when clicked on.
• Menus: Lists of options that can be scrolled through and selected in the way
a menu is used in a restaurant.
• Pointing device: A mouse controlling the cursor as a point of entry to the
windows, menus, and icons on the screen.
 2. WIMP AND GUI
The first generation of WIMP interfaces were primarily boxy in design; 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 (see Figure 10.2). 
A. GUIs
• Same basic building blocks as WIMPs but more varied
– Color, 3D, sound, animation
– Many types of menus, icons, windows
• New graphical elements, e.g.
– Toolbars, docks, rollovers
• Challenge now is to design GUIs that are best suited for tablet, smartphone, and smartwatch
interfaces.
 2. WIMP AND GUI
B. Windows
• Windows were invented to overcome physical constraints of a computer display
– Enable more information to be viewed and tasks to be performed
– Scroll bars within windows also enable more information to be viewed
– Multiple windows can make it difficult to find desired one.
• Apple Shrinking Windows
• Safari Panorama Window View
• Selecting a country from a scrolling window
• Is this method any better?
 2. WIMP AND GUI

Figure 10.2 The boxy look of the first generation of GUIs

Source: https://en.wikipedia.org/wiki/History_of_the_graphical_user_interface
 2. WIMP AND GUI
Research and Design Issues
• Windows Management
– Enables users to move fluidly between different windows
(and monitors)
– How to switch attention between windows between getting
distracted
– Design principles of spacing, grouping, and simplicity should
be used.
 2. WIMP AND GUI
C. Menus
• Several Menu Interface Styles
– Flat-lists, drop-down, pop-up, contextual, and expanding ones, e.g. scrolling and
cascading
– Flat menus
• Good at displaying a small number of options at the same time where the
size of the display is small, e.g. iPods
• But must nest the lists of options within each other, requiring several steps to
get the list with the desired option.
• Moving through previous screens can be tedious
 2. WIMP AND GUI
• Expanding Menus
– Enables more options to be shown on a single screen than is possible
with a single flat menu.
– More flexible navigation, allowing for selection of options to be done in
the same window.
– Most popular are cascading ones
• Primary, secondary, and even tertiary menus
• Downside is that they require precise mouse control
• Can result in overshooting or selecting wrong options
 2. WIMP AND GUI
• Cascading Menu
• 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,’
– Helps overcome some of the navigation of the navigation problems associated
with cascading menu.
• Windows Jump List Menu
2. WIMP AND GUI
 2. WIMP AND GUI
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
• Choice of menu to use determined by application and type of system
– Flat menu is best for displaying a small number of options at one
time.
– Expanding menus are good for showing many options.
 2. WIMP AND GUI
D. Icon Design
• Icon Design
– Icons are assumed to be easier to learn and remember than
commands
– Can be designed to be compact and variably positioned on a screen
– Now pervasive in every interface
• E.g. represent desktop objects, tools (e.g. paintbrush),
applications (e.g. web browser), and operations (e.g. cut, paste,
next, accept, change)
 2. WIMP AND GUI
D. Icon Design
• 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.
– GUI is now highly inviting, emotionally appealing, and feel alive.
 2. WIMP AND GUI
D. Icon Design
• Icon Forms
– The mapping between representation and underlying referent can
be:
• Similar (e.g. a picture of a file to represent the object file)
• Analogical (e.g. a picture of pair of scissors to represent ‘cut)
• Arbitrary (e.g. the use of an X to represent ‘delete’)
• Most effective icons are similar ones
 2. WIMP AND GUI
D. Icon Design
• Icon Forms
• Many operations are actions making it more difficult to represent
them
– Use a combination of objects and symbols that capture the
salient part of an action
• Early Icons
• Newer Icons
• Simple Flat 2D Icons
 2. WIMP AND GUI

• Basic Edit Icons on iPhone

– Which is which?
– Are they easy to understand?
– Are they distinguishable?
– What representation forms are used?
– How do yours compare?
 2. WIMP AND GUI
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
• Text labels can be used alongside icons to help identification for
small icon sets
• For large icon sets (e.g. photo and editing or word processing)
use rollovers
 Asynchronous Activity 10.1

• Sketch simple icons to represent the following operations to

appear on a digital camera screen:
– Turn image 90 degrees sideways
– Auto-enhance the image
– Fix red eye
– Crop the image
• Show them to someone else and see if they can understand
what each represents
 3. MULTIMEDIA
• Combines different media within a single
interface with various forms of interactivity
– Graphics, texts, video, sound, and
animations.
• Users click on links in an image or text
– Another part of the program
– An animation of a video clip is played
– Can return to where they were or move
on to another place
 3. MULTIMEDIA

A. BioBlast Multimedia Learning

Environment
• Figure 10.3 show photo BioBLAST: A Multimedia
Learning Environment to Support Student Inquiry in the
Biological Science.
 3. MULTIMEDIA
B. Pros and Cons
– Facilitates rapid access to multiple representations of information
– Can provide better ways of presenting information than can any media
alone
– Can enable easier learning, better understanding, more engagement, and
more pleasure
– Can encourage users to explore different parts of a game or story
– Tendency to play video clips and animations, while skimming through
accompanying text or diagrams.
 3. MULTIMEDIA
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.
– Use ‘dynalinking,’ where information depicted in one window explicitly
changes in relation to what happens in another (Scaife and Rogers, 1996).
• Several guidelines that recommend how to combine multiple media for
different kinds of task.
 4. VIRTUAL REALITY
• Computer-generated graphical simulations
providing:
– “the illusion of participation in synthetic
environment rather than external
observation of such an environment”
(Gigante, 1993)
• Provide new kinds of experience, enabling
users to interact with objects and navigate in Figure 10.3 What is Virtual Reality?
3D space Source: https://learn.g2.com/virtual-reality

• Create highly engaging user experiences.

 4. VIRTUAL REALITY
• Pros and Cons
– Can have a higher level of fidelity with objects they represent compared
to multimedia.
– Induces a sense of presence where someone is totally engrossed by the
experience.
• “a state of consciousness, the (psychological) sense of being in the
virtual environment” (Slater and Wilbur, 1999)
– Provide different viewpoints: 1st and 3rd person
– Head-mounted displays are uncomfortable to wear and can cause motion
sickness and disorientation.
 4. VIRTUAL REALITY
Research and Design Issues
• Much research on how to design safe and realistic VRs to facilitate training
– E.g. flying simulators
– Help people overcome phobias (e.g. spiders, talking in public)
• 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)
– How best to interact with information (e.g. use of keypad, pointing, joystick buttons)
– Level of realism to aim for to engender a sense of presence
• Which is the most engaging Game of Snake?
 5. INFORMATION VISUALIZATION
AND DASHBOARDS

• Computer-generated interactive graphics of complex data

• Amplify human cognition, enabling users to see patterns, trends, and
anomalies in the visualization (Card et al, 1999)
• Aim is to enhance discovery, decision-making, and explanation of
phenomena
• 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.
 5. INFORMATION VISUALIZATION
AND DASHBOARDS

A. Dashboards
– Show screenshots of date 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
• Should also direct a user’s attention to anomalies or unexpected
deviations
 5. INFORMATION VISUALIZATION
AND DASHBOARDS

B. Which Dashboard is the best?

Figure 10.4 Dashboard Examples and Templates

Source:
https://www.klipfolio.com/resources/dashboard-examples,
https://www.clicdata.com/examples/project-management/
 5. INFORMATION VISUALIZATION
AND DASHBOARDS

Research and Design Issues

• Whether to use animation and/or interactivity.
• What form of coding to use, e.g. color or text labels?
• Whether to use a 2D or 3D representational format.
• What forms of navigation, e.g. zooming or panning?
• What kinds and how much additional information to provide, e.g.
rollovers or tables of text?
• What navigational metaphor to use?
6. WEB
 6. WEB
• Early websites were largely text-based, providing hyperlinks
• Concern was with how best to structure information to enable
users to navigate and access it easily ang quickly.
• Nowadays, more emphasis on making pages distinctive, striking,
and pleasurable.
• Need to think of how to design information for multi-platforms –
keyboard or touch?
– E.g. smartphones, tablets, PCs.
 6. WEB

Figure 10.5 A breadcrumb on the BestBuy website showing three choices made by the user
to get to Smart Lights
Source: https://www.bestbuy.ca
 6. WEB
A. Usability versus Attractive?
• Vanilla or multi-flavor design?
– Ease of finding something versus aesthetic and enjoyable experience
• web designers are:
• “thinking great literature”
• Users read the web like a:
• “billboard going by at 60 miles an hour” (Krug, 2000)
• Need to determine how to brand a web page to catch and keep ‘eyeballs’.
 6. WEB
B. In your Face Ads
• Web advertising is often intrusive and pervasive
• Flashing, aggressive, persistent, annoying
• Often need to be ‘actioned’ to get rid of
• What is the alternative?
 6. WEB
Research and Design Issues
• Need to consider how best to design, present, and structure
information and system behavior
• But also, content and navigation are central 
• Design Principles Veen’s (2001)
– Where am I?
– Where can I go?
– What’s here?
 Asynchronous Activity 10.2
Direction: Look at the Nike.com website
Answer the following:
• What kind of website is it?
• How does it contravene the design principles outlines by Veen?
• Does it matter?
• What kind of user experience is it providing for?
• What was your experience of engaging with it?

Tips on designing websites for tablets versus mobile phones can be found here:
https://css-tricks.com/a-couple-of-best-practices-for-tablet-friendly-design/
 
 7. CONSUMER ELECTRONICS
AND APPLIANCES

• Everyday devices in home, public place, or car

– E.g. washing machine, remotes, photocopiers,
printers, and navigation systems)
• And personal devices
– E.g. MP3 player, digital clock, and digital camera
• Used for short periods
– E.g. putting the washing on, watching a program,
buying a ticket, changing the time, taking a
snapshot.
• Need to be usable with minimal if any learning.
• A toaster
 7. CONSUMER ELECTRONICS
AND APPLIANCES

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
 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.
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
 8. MOBILE
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. iBeer developed by magician Steve
Sheraton
– Ingenious use of the accelerometer that is Figure 10.6 this photo shows iBeer
App, the iBeer smartphone app
inside the phone Source: iBeerTM Photo 2010 HOTRIX
 8. MOBILE
QR Code and Cell Phones
• QR code is also known as Quick
Response code. It is a machine-
readable code consisting of an array of
black and white squares, typically used
for storing URLs or other information
for reading by the camera on a
smartphone. Figure 10.7 QR Code appearing on a calling card
Source:
https://www.youtube.com/watch?v=VEuX23iy2A4
 8. MOBILE
Mobile Challenges
• Smaller screens, small number of physical keys and restricted number of
controls
• Innovative physical designs including:
– Roller wheels, rocker dials, up/down ‘lips’ on the face of phones, 2-way
and 4-way directional keypads, softkeys, silk-screened buttons
• Usability and preference vary
– depends on the dexterity and commitment of the user
• Smartphones overcome mobile physical constraints through using multi-
touch displays
 8. MOBILE
Research and Design Issues
• Mobile interfaces can be tricky and cumbersome to use for those with
poor manual dexterity or ‘fat’ fingers.
• Key concern is hit area:
– Area on the phone display that the user touches to make
something happen, such as a key, an icon, a button, or an app.
– Space needs to be big enough for fat fingers to accurately press.
– If too small the user may accidentally press the wrong key.
 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
• Also used by people with disabilities:
– E.g. speech recognition word processors, page scanners, web
readers, home control systems.
 9. SPEECH
• Directed dialogs are where the system is in
control of the conversation.
• Ask specific questions and require specific
responses.
• More flexible systems allow the user to take
the initiative:
– More chance of error, since caller might
assume that the system is like a human.
• Guided prompts can help callers back on
track.
 9. SPEECH
Get me a human operator!
• Most popular use of speech interfaces currently is for call routing
• Caller-led speech where users state their needs in their own words
– E.g. “I’m having problems with my voice mail”
• Idea is they are automatically forwarded to the appropriate
service.
• What is your experience of speech systems?
 9. SPEECH
Format
• Directed dialogs are where the system is in control of the conversation.
• Ask specific questions and require specific responses
• More flexible systems allow the user to take the initiative:
– E.g. “I’d like to go to Paris next Monday for two weeks.”
• More chance of error, since caller might assume that the system is like a
human
• Guided prompts can help callers back on track
– E.g. “sorry I did not get that. Did you say wanted to fly next Monday?”
 9. SPPECH
Research and Design Issues
• How to design systems that can keep conversation on track
– Help people navigate efficiently through a menu system
– Enable them to easily recover from errors
– Guide those who are vague or ambiguous in their requests for
information or services
• Type of voice actor (e.g. male, female, neutral, or dialect)
– Do people prefer to listen to and are more patient with a female or male
voice, a northern or southern accent?
 10. PEN
• Enable people to write, draw, select, and
move objects at an interface using light-
pens or styluses.
– Capitalize on the well-honed drawing
skills developed from childhood.
• Digital pens, e.g. Anoto, use a combination
of ordinary ink pen with digital camera that
digitally records everything written with the
pen on special paper.
 10. PEN
Pros and Cons
• Allows users to annotate existing
documents quickly and easily.
• Can be difficult to see options on
the screen because a user’s hand
can occlude part of it when writing.
• Can have lag and feel clunky.
 11. TOUCH
• Touch screens, such as walk-up kiosks,
detect the presence and location of a
person’s touch on the display.
• Multi-touch supports a range of more
dynamic fingertip actions, e.g. swiping,
flicking, pinching, pushing, and tapping.
• Now used for many kinds of displays,
such as Smartphones, iPods, tablets,
and tabletops
 11. TOUCH
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 touch displays
effect collaboration.
– Much faster to scroll through wheels, carousels and bars of thumbnail images
or lists of options by finger flicking.
– More cumbersome, error-prone, and slower to type using a virtual keyboard on
a touch display than using a physical keyboard.
• Will finger-flicking, swiping, stroking, and touching a screen result in new ways of
consuming, reading, creating, and searching digital content?
 12. AIR-BASED
GESTURES

• Uses camera recognition, sensor, and

computer vision techniques.
– Can recognize people’s body, arm and
hand gestures in a room.
– System include Kinect
• Movements are mapped onto a variety of
gaming motions, such as swinging, bowling,
hitting and punching.
• Players represented on the screen as avatars
doing same actions.
 12. AIR-BASED
GESTURES

Research and Design Issues

• How does computer recognize and delineate user’s gestures?
– Deictic and hand waving
• Does holding a control device feel more intuitive than controller free
gestures?
– For gaming, exercising, dancing
Gestures in the Home Entertainment
• Universal appeal young children, grandparents, professional gamers,
technophobes
 12. AIR-BASED
GESTURES

Research and Design Issues

Gestures in the Operating Theatre
• A touchless system that recognizes gestures
• Surgeons can interact with and manipulate MRI or CT images
– E.g. two-handed gestures for zooming and panning
 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.
• Can enrich user experience or nudge them
to correct error.
• Can also be used to simulate the sense of
touch between remote people who want to Figure 10.7 The Music Jacket with embedded
actuators that nudge the player to move their

communicate. arm up to be in the correct position.

Source: Helen Sharp
 13. HAPTIC

• Realtime Vibrotactile
Feedback
• Provides nudges when
playing incorrectly
• Uses motion capture
• Nudges are vibrations on
arms and hands
Figure 10.7 The Music Jacket with embedded
actuators that nudge the player to move their
arm up to be in the correct position.
Source: Helen Sharp
 13. HAPTIC
Research and Design Issues
• Where best to place actuators on body
• Whether to use single or sequence of ‘touches’
• When to buzz and how intense
• How does the wearer feel it in different contexts?
• What kind of new smartphones/smart-watches apps can use vibrotactile
creatively?
– E.g. slow tapping to feel like water dropping that is meant to indicate it is
about to rain and heavy tapping to indicate a thunderstorm is looming.
 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
– Support more flexible, efficient, and
expressive means of human–
computer interaction Figure 10.8 show a Multimodal Technologies Expert Witnesses
Source:

– Most common is speech and vision

https://www.forensisgroup.com/expert-witness/multimodal-
technologies/
 14. MULTI - MODAL
Research and Design Issues
• Need to recognize and analyse
speech, gesture, and eye gaze.
• What is gained from combining
different input and outputs?
• Is talking and gesturing, as humans do
with other humans, a natural way of
interacting with a computer? Figure 10.8 show a Multimodal Technologies Expert Witnesses
Source:
https://www.forensisgroup.com/expert-witness/multimodal-
technologies/
 14. MULTI - MODAL
Types of Multi-Modal
• Fusion-based Multimodal Interfaces
• Alternative-Mode Multimodal Interfaces
• Multimodal Interfaces for Content Creation
• Multimodal Interfaces for Controlling the System Display
• Active Input Modes 6.
• Passive Input Modes
• Temporally Cascaded Multimodal Interfaces
• Multimodal-Multisensor Interfaces
• Visemes
 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.
• Large wall displays where people use their
own pens or gestures.
• Interactive tabletops where small groups
interact with information using their fingertips
e.g. DiamondTouch, Smart Table and Surface
 15. SHAREABLE
Kinds of Shareable Interfaces
– Gestured-based walls
• This interactive wall is a very large, high resolution
display which can be sensitive to touch or gesture.
– Multi-touch tabletops
• base on a research, this type of shareable interface
is more comfortable to use together with other
people compared with sitting in front of a personal
computer or standing in front of a vertical display.
 15. SHAREABLE

– Smartboard
• It is a large touch-sensitive
whiteboard that uses a sensor for
detecting user input (e.g. scrolling
interaction) that are equivalent to
normal PC input devices, such as Source:

mice or keyboards. https://deaftechcompendium.wordpress.com/

2014/12/03/smartboard-interactive-whiteboar
d/
 15. SHAREABLE
• Advantages:
– Useful for group work rather than single user interfaces.
– Provide equal and flexible form of collaboration.
• Disadvantages
– Delicate
– Prone to breaking because a lot of people is using it
– Can get more dent or scratches
 15. SHAREABLE
– Diamond Touch Tabletop
• Advantages:
• Provide a large interactional space that can support
flexible group working
• Can be used by multiple users
– Can point to and touch information being
displayed
– Simultaneously view the interactions and have
some shared point of reference as others.
• Can support more equitable participation compared
with groups using single PC.
Source: https://personal.vu.nl/e.simaodagracadias/dtworkshop.htm
 15. SHAREABLE
Research and Design Issues
• Information space. the user needs information to help him to know where
he has been, to know where he is and to know where he can go from here.
• Subsystem or Tool Space. In workshops containing many tools and
commands, the user needs to know which tool or tools are active, which
ones he was in previously and their order, and which ones he can enter from
here.
• Command Syntax Space. During the specifications of a command, the user
may need to know what he can or is expected to do next and how to back up
to a previous point.
 15. SHAREABLE
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 influence collaboration.
• Horizontal surfaces compared with vertical ones support more turn-taking
and collaborative working in co-located groups.
• Providing larger-sized tabletops does not improve group working but
encourages more division of labor.
 16. TANGIBLE
• Is a user interface in which a person interacts with digital
information through the physical environment.
• 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 several media and places or
can be embedded in the physical object.
 16. TANGIBLE
Examples:
• Chromarium Cubes
– When turned over digital
animations of color are mixed
on an adjacent wall.
– Facilitates creativity and
collaborative exploration
 16. TANGIBLE
Examples:
• Flow Blocks
– Depict changing numbers and lights embedded in the blocks
– Vary depending on how they are connected together
• Urp
– Physical models of building moved around on tabletop
– Used in combination with tokens for wind and shadows – digital
shadows surrounding them to change over time.
 16. TANGIBLE
Examples:
• Reactables
– is an electronic musical
instrument with a tabletop
tangible user interface that was
developed within the Music
Technology Group at the
Universitat Pompeu Fabra in
Barcelona, Spain.
 16. TANGIBLE
Examples:
• Sandscape
– Is a tangible interface for designing
and understanding landscapes
through a variety of computational
simulations using sand. Users view
these simulations as they are
projected on the surface of a sand
model that represents the terrain.
 16. TANGIBLE
Examples:
• Topobo System
– Is a 3D constructive assembly
system with kinetic memory, the
ability to record and playback
physical motion? Unique among
modeling systems is Topobo's
coincident physical input and
output behaviors.
 16. TANGIBLE
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.
– Encourage different ways of representing and exploring a problem space.
• People can see and understand situations differently
– Can lead to greater insight, learning, and problem-solving than with other kinds
of interfaces.
– Can facilitate creativity and reflection
 16. TANGIBLE
• VoxBox
– A tangible system that gathers opinions at events
through playful and engaging interaction (Goldsteijn
et al, 2015).
 16. TANGIBLE
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.
 16. TANGIBLE

Research and Design Issues

• What kind of physical artifact to use?
– Bricks, cubes, and other component sets are most used
because of flexibility and simplicity.
– Stickies and cardboard tokens can also be used for placing
material onto a surface.
 17. AUGMENTED AND
MIXED REALITY

• 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, flying, and everyday exploring
Figure 10.11 James May appearing in 3D
Augmented Reality
Source: https://www.pinterest.ph/pin/1697294
79676773819/?nic_v2=1a5RyJyjd
 
 17. AUGMENTED AND
MIXED REALITY

Examples
• In medicine
– Virtual objects, e.g. X-rays and scans, are overlaid on part of a patient’s
body.
– Aid the physician’s understanding of what is being examined or operated.
• In traffic control
– Dynamic information about aircraft overlaid on a video screen showing
the real planes, etc. landing, taking off, and taxiing.
• Helps identify planes difficult to make out
 17. AUGMENTED AND
MIXED REALITY

Augmented Maps (Photo)

 Top Gear James May in AR

 Appears as a 3D character to act as a
personal tour guide at Science Museum

Figure 10.9 An augmented map show the California

firefighters use Augmented Reality in battle against
record infernos.
Source:
https://www.zdnet.com/article/california-firefighter
s-use-augmented-reality-in-battle-against-record-br
eaking-infernos
/
 17. AUGMENTED AND
MIXED REALITY

Research and Design Issues

• What kind of digital augmentation?
– When and where in physical environment?
– Needs to stand out but not distract from ongoing task
– Need to be able to align with real world objects
• What kind of device?
– Smartphone, head up display or other?
 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
• Applications include automatic diaries, tour guides, cycle indicators
and fashion clothing.
 18. WEARABLES

Google Glass (photos)

Figure 10.12 Google Glass

Source: https://en.wikipedia.org/wiki/Google_Glass
 
 18. WEARABLES
Research and Design Issues
• Comfort
– needs to be light, small, not get in the way, fashionable, and preferably hidden in
the clothing
• Hygiene
– is it possible to wash or clean the clothing once worn?
• 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?
 19. ROBOTS AND
DRONES

ROBOTS
• Four Types of Robot
– Remote robots used in hazardous settings
– Domestic robots helping around the house
– Pet robots as human companions
– Sociable robots that work collaboratively
with humans, and communicate and
socialize with them – as if they were our
peers.
 19. ROBOTS AND
DRONES

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
 19. ROBOTS AND
DRONES

Drones
• Unmanned aircraft that are controlled remotely
and used in several contexts.
– E.g. entertainment, such as carrying drinks
and food to people at festivals and parties.
– Agricultural applications, such as flying them
over vineyards and fields to collect data that
is useful to farmers.
– Helping to track poachers in wildlife parks in
Africa.
Figure 10.13 shows California Vineyard is using drones to make better wine.
Source: https://www.pinterest.ph/pin/106186503693218984/?nic_v2=1a5RyJyjd
 19. ROBOTS AND
DRONES

Drones
• Can fly low 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 harvest
the crop.

Figure 10.13 shows California Vineyard is using drones to make better wine.
Source: https://www.pinterest.ph/pin/106186503693218984/?nic_v2=1a5RyJyjd
 19. ROBOTS AND
DRONES

Research and Design Issues

• How do humans react to physical robots designed to exhibit
behaviours (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?
 19. ROBOTS AND
DRONES

Research and Design Issues

• Should the interaction be designed to enable people to interact
with the robot as if it were another human being or more
human-computer-like (e.g. pressing buttons to issue
commands)?
• Is it acceptable to use unmanned drones to take a series of
images or videos of fields, towns, and private property without
permission or people knowing what is happening?
 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: Figure 10.8 The Brainball game using a Mindball
Source: https://www.youtube.com/watch?v=7OJVZVd2q8I
– Games
– enable people who are paralysed to control
robots
 Performance
Task

DIRECTIONS:
• Choose a game that you or someone you know plays a lot on a smartphone (for
example, Candy Crush Saga, Fortnite, or Minecraft).
• Consider how the game could be played using different interfaces other than the
smartphones.
• Select three different interfaces (for instance, tangible, wearable, and shareable)
and describe how the game could be redesigned for each of these, considering the
user group being targeted.
• For example, the tangible game could be designed for children, the wearable
interface for young adults, and the shareable interface for older people.
 Asynchronous Activity 10.3

Direction: Look at a fashion brand’s website, such as Nike, and describe

the kind of interface used.
Answer the following questions:
• How does it contravene the design principles outlined by Jeffrey
Veen?
• Does it matter?
• For what type of user experience is it providing?
• What was your experience in engaging with it?
 Asynchronous Activity

Perform the following:

• Go through the research and design considerations for
each interface and consider whether they are relevant
for the game setting and what considerations they raise.
• Describe a hypothetical scenario of how the game would
be played for each of the three interfaces.
 Asynchronous Activity

Perform the following:

• Consider specific design issues that will need to be addressed. For
example, for the shareable surface would it be best to have a tabletop or a
wall-based surface? How will the users interact with the game elements
for each of the different interfaces—by using a pen, fingertips, voice, or
other input device? How do you turn a single-player game into a multiple
player one? What rules would you need to add?
• Compare the pros and cons of designing the game using the three
different interfaces with respect to how it is played on the smartphone.
 Quiz

Answer the following:

• Is multimedia better than tangible interfaces for learning?
• Is speech as effective as a command-based interface?
• Is a multimodal interface more effective than a monomodal interface?
• Will wearable interfaces be better than mobile interfaces for helping
people find information in foreign cities?
• Are virtual environments the ultimate interface for playing games?
• Will shareable interfaces be better at supporting communication and
collaboration compared with using networked desktop PCs?
 References

Sharp, H., Preece, J., & Rogers, Y. (2019). Interaction Design: Beyond human-computer interaction.
John Wiley & Sons.

Dix, A., Finaly, J., Abowd, G., Beale, R. Human-computer interaction 3rd Edition. Pearson Education
Limited.
THANK YOU!