Chapter 7

INTERFACES
 Overview
• Interface types
 Highlight the main design and research considerations for
each of the different interfaces
• Consider which interface is best for a given application
or activity

www.id-book.com 2
20 interface types covered
1. Command
2. Graphical
3. Multimedia
4. Virtual reality
5. Web
6. Mobile
7. Appliance
8. Voice
9. Pen
10. Touch
11. Gesture
12. Haptic
13. Multimodal
14. Shareable
15. Tangible
16. Augmented Reality
17. Wearables
18. Robots and drones
19. Brain–computer interaction

20. Smart
www.id-book.com 3
 Command line interfaces
• Commands such as abbreviations (for instance, ls) typed in at
the prompt to which the system responds (for example, by
listing current files)
• Some are hard wired at keyboard, while others can be assigned
to keys
• Efficient, precise, and fast
• Large overhead to learning set of commands

www.id-book.com 4
Second Life command line-based interface for
visually-impaired users

www.id-book.com 5
 Research and design considerations
• Form, name types and structure are key research questions
• Consistency is most important design principle
 For example, always use first letter of command

• Command interfaces popular for web scripting

www.id-book.com 6
 Graphical user interfaces (GUIs)
• Xerox Star first WIMP gave rise to GUIs
• Windows
 Sections of the screen that can be scrolled, stretched, overlapped,
opened, closed, and moved around the screen using the mouse
• Icons
 Pictograms that represent applications, objects, commands, and
tools that were opened when clicked on
• Menus
 Lists of options that can 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
Example of first generation GUI

www.id-book.com 8
Simple smartwatch menus
with 1, 2, or 3 options

www.id-book.com 9
 Window design
• Windows were invented to overcome the physical constraints
of a computer display
 They enable more information to be viewed and tasks to be
performed
• Scroll bars within windows enable more information to be
viewed
• Multiple windows can make it difficult to find desired one
 Listing, tabbing, and thumbnails are techniques that can help

www.id-book.com 10
Window design: Thumbnails of top websites
visited and suggested highlights

www.id-book.com 11
Selecting a country from a scrolling window

www.id-book.com 12
Is this method any better?

www.id-book.com 13
 Menu styles
Flat list: Good for showing large number of options at the same time
when display is small
Drop down: Shows more options on same screen (for example, cascading)
Pop-up: When pressed, command key for relevant options
Contextual: Provides access to often-used commands associated with a
particular item
Collapsible: Toggles between + and − icons on a header to expand or
contract its contents
Mega: All options shown using 2D drop-down layout
www.id-book.com 14
Template for a collapsible menu

www.id-book.com 15
A mega menu

www.id-book.com 16
 Research and design considerations
• Window management
 Enables users to move fluidly between different windows (and monitors)
• How to switch attention between windows without getting distracted
• Design principles of spacing, grouping, and simplicity should be used
• Which terms to use for menu options (for example, “front” versus
“bring to front”
• Mega menus easier to navigate than drop-down ones

www.id-book.com 17
 Icon design
• Icons are assumed to be easier to learn and remember than commands
• Icons can be designed to be compact and variably positioned on a
screen
• Now pervasive in every interface
 For example, they represent desktop objects, tools (for example, a paintbrush),
applications (for instance, a web browser), and operations (such as cut, paste,
next, accept, and change)

www.id-book.com 18
 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

www.id-book.com 19
 Icon forms
• The mapping between the representation and underlying
referent can be:
 Similar (for example, a picture of a file to represent the object file)
 Analogical (for instance, a picture of a pair of scissors to represent ‘cut’)
 Arbitrary (such as the use of an X to represent ‘delete’)
• The most effective icons are similar ones
• 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

www.id-book.com 20
2 types of icon styles

www.id-book.com 21
Flat 2D icons for a smartphone and
a smartwatch

www.id-book.com 22
 Activity
• Sketch simple icons to represent the following operations to
appear on a digital camera screen:
 Turn image 90-degrees sideways
 Auto-enhance the image
 Crop the image
 More options
• Show them to someone else and see if they can understand
what each represents

www.id-book.com 23
Basic edit icons that appear on
the iPhone app

www.id-book.com 24
 Research and design considerations
• There is a wealth of resources for creating icons
 Guidelines, style guides, icon builders, libraries, online tutorials
• Text labels can be used alongside icons to help identification
for small icon sets
• For large icon sets (for instance, photo editing or word
processing) can use the hover function

www.id-book.com 25