Post on 26-Feb-2018
7/25/2019 Note - 04 - Dimensions of Interface Variability
1/120
Human Computer Interaction
Dimensions of Interface Variability
7/25/2019 Note - 04 - Dimensions of Interface Variability
2/120
Direct Manipulation &
Virtual Environments
PART 1
7/25/2019 Note - 04 - Dimensions of Interface Variability
3/120
Introduction
Positive feelings associated with good userinterfaces:
Mastery of the interface
Competence in performing tasks
Ease in learning the system originally and in assimilatingadvanced features
Confidence in the capacity to retain mastery over time
Enjoyment in using the system
Eagerness to show the system off to novices
Desire to explore more powerful aspects of the system
7/25/2019 Note - 04 - Dimensions of Interface Variability
4/120
Examples of
Direct-Manipulation Systems
Command line vs. display editors and word processors Training times with display editors are much less than line editors
Line editors are generally more flexible and powerful
The advances of WYSIWYG word processors:
Display a full page of text
Display of the document in the form that it will appear when the finalprinting is done
Show cursor action
Control cursor motion through physically obvious and intuitively
natural means Use of labeled icon for actions
Display of the results of an action immediately
Provide rapid response and display
Offer easily reversible actions
7/25/2019 Note - 04 - Dimensions of Interface Variability
5/120
Examples of
Direct-Manipulation Systems: WYSIWYG
word processing
7/25/2019 Note - 04 - Dimensions of Interface Variability
6/120
Examples of
Direct-Manipulation Systems (cont.)
Technologies that derive from the word processor:
Integration
Desktop publication software Slide-presentation software
Hypermedia environments
Improved macro facilities
Spell checker and thesaurus
Grammar checkers
7/25/2019 Note - 04 - Dimensions of Interface Variability
7/120
Examples of
Direct-Manipulation Systems (cont.)
The VisiCalc spreadsheet and its descendants
VisiCalc users delighted in watching the program propagate
changes across the screen.
In some cases, spatial representations provide a better model
of reality
Successful spatial data-management systems depend on
choosing appropriate:
Icons
Graphical representations
Natural and comprehensible data layouts
7/25/2019 Note - 04 - Dimensions of Interface Variability
8/120
Examples of
Direct-Manipulation Systems (cont.):
spreadsheet
7/25/2019 Note - 04 - Dimensions of Interface Variability
9/120
Examples of
Direct-Manipulation Systems (cont.)spatial data management
7/25/2019 Note - 04 - Dimensions of Interface Variability
10/120
Examples of
Direct-Manipulation Systems (cont.)
Video games
Nintendo Wii, Sony PlayStation, and Microsoft Xbox
Field of action is visual and compelling
Commands are physical actions whose results are immediately shown on
the screen
No syntax to remember
Most games continuously display a score
Direct manipulation in SimSity
Second Life virtual world Spore
Myst well received
DOOM and Quake controversial
7/25/2019 Note - 04 - Dimensions of Interface Variability
11/120
Examples of
Direct-Manipulation Systems (cont.)
Guitar Hero video game
7/25/2019 Note - 04 - Dimensions of Interface Variability
12/120
Examples of
Direct-Manipulation Systems (cont.)
Computer-aided design Computer-aided design (CAD) use direct manipulation
Manipulate the object of interest
Generate alternatives easily
Explain the impact
Problem solving by analogy to the real-world
Office automation Xerox Star was a pioneer with sophisticated formatting
Apple Lisa System
Rapid and continuous graphical interaction
Microsoft Windows is a descendant
7/25/2019 Note - 04 - Dimensions of Interface Variability
13/120
Continuing Evolution of
Direct-Manipulation SystemsDirect-Manipulation interfaces are being used in a wide range of applications,
e.g. management dashboard for a retail store
7/25/2019 Note - 04 - Dimensions of Interface Variability
14/120
Continuing evolution of
Direct-Manipulation Systems (cont.)
7/25/2019 Note - 04 - Dimensions of Interface Variability
15/120
Discussion of
Direct Manipulation
Problems with direct manipulation
Spatial or visual representations can be too spread out
High-level flowcharts and database-schema can become
confusing Designs may force valuable information off of the screen
Users must learn the graphical representations
The visual representation may be misleading
Typing commands with the keyboard may be faster
7/25/2019 Note - 04 - Dimensions of Interface Variability
16/120
Principles of
Direct Manipulation
1. Continuous representations of the objects and
actions of interest with meaningful visual
metaphors.
2. Physical actions or presses of labeled buttons,instead of complex syntax.
3. Rapid, incremental, reversible actions whose effects
on the objects of interest are visible immediately.
7/25/2019 Note - 04 - Dimensions of Interface Variability
17/120
Interface-Building Tools
Visual Thinking and Icons The visual nature of computers can challenge the first
generation of hackers
An icon is an image, picture, or symbol representing a
concept Icon-specific guidelines Represent the object or action in a familiar manner
Limit the number of different icons
Make icons stand out from the background
Consider three-dimensional icons Ensure a selected icon is visible from unselected icons
Design the movement animation
Add detailed information
Explore combinations of icons to create new objects or actions
7/25/2019 Note - 04 - Dimensions of Interface Variability
18/120
3D Interfaces
Pure 3D interfaces have strong utility in some contexts, e.g.,medical, product design. In other situations, moreconstrained interaction may actually be preferable to simplifyinteractions.
Enhanced interfaces, better than reality, can help reducethe limitations of the real-world, e.g., providing simultaneousviews.
Avatars in multiplayer 3-D worlds
First person games
7/25/2019 Note - 04 - Dimensions of Interface Variability
19/120
3D Interfaces (cont.)
7/25/2019 Note - 04 - Dimensions of Interface Variability
20/120
3D Interfaces (cont.)Features for effective 3D
Use occlusion, shadows, perspective, and other 3D techniques
carefully.
Minimize the number of navigation steps for users to accomplish
their tasks.
Keep text readable. Avoid unnecessary visual clutter, distraction, contrast shifts, and
reflections.
Simplify user movement.
Prevent errors.
Simplify object movement
Organize groups of items in aligned structures to allow rapid visual
search.
Enable users to construct visual groups to support spatial recall.
7/25/2019 Note - 04 - Dimensions of Interface Variability
21/120
3D Interfaces (cont.)
Guidelines for inclusion of enhanced 3D features:
Provide overviews so users can see the big picture
Allow teleoperation
Offer X-ray vision so users can see into or beyond objects.
Provide history keeping
Permit rich user actions on objects
Enable remote collaboration
Give users control over explanatory text and let usersselect for details on demand.
Offer tools to select, mark, and measure.
7/25/2019 Note - 04 - Dimensions of Interface Variability
22/120
3D Interfaces (cont.)
Guidelines for inclusion of enhanced 3D features(cont.):
Implement dynamic queries to rapidly filter out unneededitems.
Support semantic zooming and movement
Enable landmarks to show themselves even at a distance
Allow multiple coordinated views
Develop novel 3D icons to represent concepts that are
more recognizable and memorable.
7/25/2019 Note - 04 - Dimensions of Interface Variability
23/120
Teleoperation
Two parents: direct manipulation in personal computersand process control in complex environments
Physical operation is remote
Complicating factors in the architecture of remote
environments: Time delays
transmission delays
operation delays
Incomplete feedback Feedback from multiple sources
Unanticipated interferences
7/25/2019 Note - 04 - Dimensions of Interface Variability
24/120
Virtual and
Augmented Reality
Virtual reality breaks the physical limitations of space and
allow users to act as though they were somewhere else
Augmented reality shows the real world with an overlay of
additional overlay Situational awareness shows information about the real world
that surrounds you by tracking your movements in a computer
model
Augmented reality is an important variant Enables users to see the real world with an overlay of
additional interaction.
7/25/2019 Note - 04 - Dimensions of Interface Variability
25/120
Virtual and
Augmented Reality (cont.)
Successful virtual environments depend on thesmooth integration of:
Visual Display
Head position sensing
Hand-position sensing
Force feedback
Sound input and output
Other sensations
Cooperative and competitive virtual reality
7/25/2019 Note - 04 - Dimensions of Interface Variability
26/120
Impact of this
technology in our everyday lives
7/25/2019 Note - 04 - Dimensions of Interface Variability
27/120
Menu, Form & Dialogue Box
PART 2
7/25/2019 Note - 04 - Dimensions of Interface Variability
28/120
Task-Related
Organization
"The primary goal for menu, form fill-in, and
dialog-box designers is to create a sensible,
comprehensible, memorable, and convenientorganization relevant to the user's task."
7/25/2019 Note - 04 - Dimensions of Interface Variability
29/120
Single Menus
Binary Menus
Mnemonic letters
Radio Buttons
Button Choice
3. What is your marital status?o Single
o Married
o Widowed/divorced/separated
7/25/2019 Note - 04 - Dimensions of Interface Variability
30/120
Single Menus (cont.)
Multiple-item Menus
Multiple-selection menus or check boxes
7/25/2019 Note - 04 - Dimensions of Interface Variability
31/120
Single Menus (cont.)
Pull-down, pop-up, and toolbar menus Pull-down menus
Always available to the user by making selections on atop menu bar
Pull-down menus (cont.) Key board shortcuts
E.g., Ctrl-C important to support expert userefficiency
Toolbars, iconic menus, and palletes
Offers actions on a displayed object Pop-up menus
Appear on a display in response to a check or tapwith a pointing device.
7/25/2019 Note - 04 - Dimensions of Interface Variability
32/120
Single Menus (cont.)
7/25/2019 Note - 04 - Dimensions of Interface Variability
33/120
Single Menus (cont.)
To see updates from friends, photos and feeds, the Zumobi Ziibii interface
(http://www.zumobi.com) allows users to choose between two styles of presentation.
On the left is a static list of text/image items with a gestural swipe used to control
paging, and on the right is a dynamic scrolling ticker (called River) which
horizontally scrolls titles and images across the screen.
7/25/2019 Note - 04 - Dimensions of Interface Variability
34/120
Single Menus (cont.)
7/25/2019 Note - 04 - Dimensions of Interface Variability
35/120
Single Menus (cont.)
Menus for long lists Scrolling menus, combo boxes, and fisheye menus
Scrolling menus display the first portion of the menuand an additional menu item, typically an arrow thatleads to the next set of items in the menu sequence.
Combo boxes combine a scrolling menu with a text-entry filed.
Fisheye menus display all of the menu items on thescreen at once, but show only items near the cursor atfull size.
7/25/2019 Note - 04 - Dimensions of Interface Variability
36/120
Single Menus (cont.)
Menus for long lists (cont.)
Sliders and alphasliders
When items consist of ranges or numerical
values, a slider is a natural choice to allow the
selection of a value.
The alphaslider uses multiple levels of
granularity in moving the slider thumb and
therefore can support tens or hundreds ofthousand of items.
7/25/2019 Note - 04 - Dimensions of Interface Variability
37/120
Single Menus (cont.)
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.
7/25/2019 Note - 04 - Dimensions of Interface Variability
38/120
Single Menus (cont.)
7/25/2019 Note - 04 - Dimensions of Interface Variability
39/120
Single Menus (cont.)
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.
7/25/2019 Note - 04 - Dimensions of Interface Variability
40/120
Single Menus (cont.)
7/25/2019 Note - 04 - Dimensions of Interface Variability
41/120
Combination of
Multiple Menus
Linear menu sequences and simultaneous menus
Linear
Guide the user through complex decision-making
process.
E.g. cue cards or "Wizards"
Effective for novice users performing simple tasks
Simultaneous
Present multiple active menus at the same time andallows users to enter choices in any order
7/25/2019 Note - 04 - Dimensions of Interface Variability
42/120
Combination of
Multiple Menus (cont.)
Tree-structured menus
Designers can form categories of similar items to create a
tree structure
E.g., fonts, size style, spacing
Fast retrieved if natural and comprehensive
Use terminology from the task domain
Expanding menus maintain the full context of each choice
E.g., Windows Explorer
7/25/2019 Note - 04 - Dimensions of Interface Variability
43/120
Combination of
Multiple Menus (cont.)
Menu Maps
Menu maps can help users stay oriented in a large menutree
Effective for providing overviews to minimize userdisorientation.
Acyclic and Cyclic Networks
Useful for
social relationships transportation routing
scientific-journal citations
Can cause confusion and disorientation.
7/25/2019 Note - 04 - Dimensions of Interface Variability
44/120
Content Organization
Task-related grouping in tree organization
Create groups of logically similar items
Form groups that cover all possibilities
Make sure that items are nonoverlapping Use familiar terminology, but ensure that items are distinct
from one another
7/25/2019 Note - 04 - Dimensions of Interface Variability
45/120
Content Organization (cont.)
Item Presentation Sequence The order of items in the menu is important, and should
take natural sequence into account when possible:
Time
Numeric ordering Physical properties
When cases have no task-related orderings, the designermust choose from such possibilities as:
Alphabetic sequence of terms
Grouping of related items Most frequently used items first
Most important items first.
7/25/2019 Note - 04 - Dimensions of Interface Variability
46/120
Content Organization (cont.)
Adaptive menus in Microsoft Office.
A font-selection menu lists the
recently used fonts near the top ofthe menu (as well as in the full list),
making it easier to quickly select
the popular fonts.
7/25/2019 Note - 04 - Dimensions of Interface Variability
47/120
Content Organization (cont.)
Menu layout
7/25/2019 Note - 04 - Dimensions of Interface Variability
48/120
Content Organization (cont.)
Menu layout (cont.)
Titles
For single menus, use a simple descriptive title.
For tree-structured menus, use the exact same words in
the higher-level menu items as in the titles for the nextlower-level menu.
E.g. if a menu item is called Business and FinancialServices, the next screen should have that phrase asits title.
7/25/2019 Note - 04 - Dimensions of Interface Variability
49/120
Content Organization (cont.)
Menu layout
Titles (cont.)
Phrasing of menu items
Use familiar and consistent terminology
Ensure that items are distinct from one another
Use consistent and concise phrasing
Bring the keyword to the left
7/25/2019 Note - 04 - Dimensions of Interface Variability
50/120
Content Organization (cont.)
Menu layout (cont.)
Graphic layout and design
Constraints
screen width and length
display rate
character set
highlighting techniques
7/25/2019 Note - 04 - Dimensions of Interface Variability
51/120
Content Organization (cont.)
Menu layout (cont.)
Establish guidelines for consistency of at least these
menu components:
Titles
Item placement
Instructions
Error messages
Status reports
7/25/2019 Note - 04 - Dimensions of Interface Variability
52/120
Content Organization (cont.)
Menu layout (cont.)
Techniques
Indentation
Upper/lower case characters
Symbols such as * or - to create separators or outlines
Position markers
Cascading or walking menus
Magic lens
7/25/2019 Note - 04 - Dimensions of Interface Variability
53/120
Fast Movement Through Menus
Keyboard shortcuts
Supports expert use
Can make translation to a foreign language more difficult
Bookmarks in browsers
User configured toolbars
D E i h M F
7/25/2019 Note - 04 - Dimensions of Interface Variability
54/120
Data Entry with Menus: Form
Fill-in, Dialog Boxes, and Alternatives
Form Fill-in
Appropriate when many fields of data must be entered:
Full complement of information is visible to user.
Display resembles familiar paper forms. Few instructions are required for many types of entries.
Users must be familiar with:
Keyboards
Use of TAB key or mouse to move the cursor
Error correction methods
Field-label meanings
Permissible field contents
Use of the ENTER and/or RETURN key.
D E i h M F
7/25/2019 Note - 04 - Dimensions of Interface Variability
55/120
Data Entry with Menus: Form
Fill-in, Dialog Boxes, and Alternatives
D t E t ith M F
7/25/2019 Note - 04 - Dimensions of Interface Variability
56/120
Data Entry with Menus: Form
Fill-in, Dialog Boxes, and Alternatives
D t E t ith M F
7/25/2019 Note - 04 - Dimensions of Interface Variability
57/120
Format-specific field
Coded fields
Telephone numbers
Social-security numbers
Times
Dates
Dollar amounts (or other currency)
Data Entry with Menus: Form
Fill-in, Dialog Boxes, and Alternatives
D t E t ith M F
7/25/2019 Note - 04 - Dimensions of Interface Variability
58/120
Dialog Boxes
Combination of menu and form fill-in techniques.
Internal layout guidelines:
Meaningful title, consistent style
Top-left to bottom-right sequencing
Clustering and emphasis
Consistent layouts (margins, grid, white space, lines, boxes)
Consistent terminology, fonts, capitalization, justification
Standard buttons (OK, Cancel) Error prevention by direct manipulation
Data Entry with Menus: Form
Fill-in, Dialog Boxes, and Alternatives
D t E t ith M F
7/25/2019 Note - 04 - Dimensions of Interface Variability
59/120
Dialog Boxes (cont.)
External Relationship
Smooth appearance and disappearance
Distinguishable but small boundary
Size small enough to reduce overlap problems
Display close to appropriate items
No overlap of required items Easy to make disappear
Clear how to complete/cancel
Data Entry with Menus: Form
Fill-in, Dialog Boxes, and Alternatives
D t E t ith M F
7/25/2019 Note - 04 - Dimensions of Interface Variability
60/120
Novel design combining menus and direct manipulation
Pie menus (example here)
Control menus
Marking menus
Flow menus
Toolglass
Data Entry with Menus: Form
Fill-in, Dialog Boxes, and Alternatives
Audio Menus and
7/25/2019 Note - 04 - Dimensions of Interface Variability
61/120
Audio Menus and
Menus for Small Displays
Menu systems in small displays and situations where handsand eyes are busy are a challenge.
Audio menus Verbal prompts and option descriptions
Input is normally verbal or keypad
Not persistent, like a visual display, so memorization isrequired.
Request users can avoid listening to options
Audio Menus and
7/25/2019 Note - 04 - Dimensions of Interface Variability
62/120
Audio Menus and
Menus for Small Displays (cont.)
Menu for small displays
E.g., entertainment, communication services
Learnability is a key issue
Hardware buttons
Navigation, select
Expect interactions
Tap interface GPS and radio frequency identification provides same
automatic input
Audio Menus and
7/25/2019 Note - 04 - Dimensions of Interface Variability
63/120
Audio Menus and
Menus for Small Displays (cont.)
Telephone menus use soft keys to present context-dependent menu items. The
convention used here is to consistently place selections on the left side and back
or exit options on the right side. Hard buttons control the connect and disconnect
functions. Dedicated buttons facilitate scrolling through lists. The current position in
the list is indicated on the right side of the screen.
Audio Menus and
7/25/2019 Note - 04 - Dimensions of Interface Variability
64/120
Audio Menus and
Menus for Small Displays (cont.)
The Zumobi interface (http://www.zumobi.com) on a mobile phone starts with
four tiles using a two-level zoom interaction to see the tile details (left side).
The user can specify which tiles are in their zoomspace. Then, when they
become more familiar with the interface, they can add up to a total of 16 tiles
using a three-level zoom interaction to smoothly go between overview, zone
view, and detail view (right side). The application accommodates thumb use on
touchscreens, numeric key pads for zone-based zooming, 4-way D-Pads, and even
thumb-roller controllers.
7/25/2019 Note - 04 - Dimensions of Interface Variability
65/120
Command & Natural Languages
PART 3
Basic Goals
7/25/2019 Note - 04 - Dimensions of Interface Variability
66/120
Basic Goals
of Language Design
Precision
Compactness
Ease in writing and reading Speed in learning
Simplicity to reduce errors
Ease of retention over time
Higher Level
7/25/2019 Note - 04 - Dimensions of Interface Variability
67/120
Higher-Level
Goals of Language Design
Close correspondence between reality and the
notation
Convenience in carrying out manipulations relevant
to user's tasks
Compatibility with existing notations
Flexibility to accommodate novice and expert users
Expressiveness to encourage creativity
Visual appeal
Functionality to
7/25/2019 Note - 04 - Dimensions of Interface Variability
68/120
Functionality to
Support Users Tasks
Users do wide range of work:
text editing
electronic mail financial management
airline or hotel reservations
inventory manufacturing process control
gaming
Functionality to
7/25/2019 Note - 04 - Dimensions of Interface Variability
69/120
Functionality to
Support Users Tasks (cont.)
Designers should
determine functionality of the system by studying users' task domain
create a list of task actions and objects
abstract this list into a set of interface actions and objects
represent low-level interface syntax
create a table of user communities and tasks, with expected use frequency
determine hierarchy of importance of user communities (i.e. prime users)
evaluate destructive actions (e.g. deleting objects) to ensure reversibility
identify error conditions and prepare error messages
allow shortcuts for expert users, such as macros and customizing system
parameters
7/25/2019 Note - 04 - Dimensions of Interface Variability
70/120
Command-Organization
7/25/2019 Note - 04 - Dimensions of Interface Variability
71/120
Command-Organization
Strategies
A unifying interface concept or metaphor aids learning
problem solving
retention
Designers often err by choosing a metaphor closer to machinedomain than to the user's task domain.
Simple command set Each command is chosen to carry out a single task. The number of
commands match the number of tasks. For small number of tasks, this can produce a system easy to learn and
use.
E.g. the vi editor of Unix.
Command plus
7/25/2019 Note - 04 - Dimensions of Interface Variability
72/120
Command plus
arguments/options
Command plus arguments
Follow each command by one or more arguments that indicate objects to bemanipulated, 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.
Commands may also have options to indicate special cases, e.g.: PRINT/3,HQ FILEA
PRINT (3, HQ) FILEA
PRINT FILEA -3, HQ
to produce 3 copies of FILEA on the printer in the headquarters building.
Error rates and the need for extensive training increase with the number ofpossible options.
7/25/2019 Note - 04 - Dimensions of Interface Variability
73/120
Benefits of Structure
Human learning, problem solving, and memory are greatly facilitated bymeaningful structure.
Beneficial for task concepts
computer concepts
syntactic details of command languages
Consistent Argument Ordering
Inconsistent order of arguments Consistent order of argumentsSEARCHfile no, message id SEARCH message id, file no
TRIM message id, segment sizeTRIM message id, segment size
REPLACE message id, code no REPLACE message id, code no
INVERT group size, message id INVERT message id, group size
Hierarchical
7/25/2019 Note - 04 - Dimensions of Interface Variability
74/120
Hierarchical
command structure
The full set ofcommands is
organized into a
tree structure
5x3x4 = 60 taskswith 5 command
names and 1 rule of
formation
Action Object Destination
CREATE File File
DISPLAY Process Local printer
REMOVE Directory Screen
COPY Remote
printer
MOVE
7/25/2019 Note - 04 - Dimensions of Interface Variability
75/120
Symbols vs. Keywords
Command structure affects performance
Symbol Editor Keyword Editor
FIND:/TOOTH/;-1 BACKWARD TO "TOOTH"
LIST;10 LIST 10 LINES
RS:/KO/,/OK/;* CHANGE ALL "KO" TO "OK"
7/25/2019 Note - 04 - Dimensions of Interface Variability
76/120
Naming & Abbreviations
There is often a lack of consistency or obvious strategy for constructionof command abbreviations.
Specificity Versus Generality
Infrequent, discriminating words insert delete
Frequent, discriminating words add remove
Infrequent, nondiscriminating words amble perceive
Frequent, nondiscriminating words walk view
General words (frequent, nondiscriminating) alter correct
Nondiscriminating nonwords (nonsense) GAC MIK
Discriminating nonwords (icons) abc-adbc abc-ab
Six Potential
7/25/2019 Note - 04 - Dimensions of Interface Variability
77/120
Six Potential
Abbreviation Strategies
1. Simple truncation: The first, second, third, etc. letters of each
command.
2. Vowel drop with simple truncation: Eliminate vowels and use some of
what remains.
3. First and last letter: Since the first and last letters are highly visible,
use them.
4. First letter of each word in a phrase: Use with a hierarchical design
plan.
5. Standard abbreviations from other contexts: Use familiarabbreviations.
6. Phonics: Focus attention on the sound.
Guidelines for
7/25/2019 Note - 04 - Dimensions of Interface Variability
78/120
Guidelines for
using Abbreviations
Ehrenreich and Porcu (1982) offer this set of guidelines:
A simple primary rule should be used to generate abbreviations for most items; a simple
secondary rule should be used for those items where there is a conflict.
Abbreviations generated by the secondary rule should have a marker (for example, anasterisk) incorporated in them.
The number of words abbreviated by the secondary rule should be kept to a minimum.
Users should be familiar with the rules used to generate abbreviations.
Truncation should be used because it is an easy rule for users to comprehend and
remember. However, when it produces a large number of identical abbreviations for
different words, adjustments must be found. Fixed-length abbreviations should be used in preference to variable-length ones.
Abbreviations should not be designed to incorporate endings (ING, ED, S).
Unless there is a critical space problem, abbreviations should not be used in messages
generated by the computer and read by the user.
Command-language
7/25/2019 Note - 04 - Dimensions of Interface Variability
79/120
Command language
Guidelines
Natural Language
7/25/2019 Note - 04 - Dimensions of Interface Variability
80/120
Natural Language
in Computing
Natural-language interaction
Natural-language queries and question answering
Text-database searching Natural-language text generation
Adventure games and instructional systems
Natural Language
7/25/2019 Note - 04 - Dimensions of Interface Variability
81/120
Natural Language
in Education
CognitiveTutor traces student progress in mastering skills and
concepts, then assigns individually tuned problems
Communicating with students via Natural Language
7/25/2019 Note - 04 - Dimensions of Interface Variability
82/120
Interaction Devices
PART 4
K b d L
7/25/2019 Note - 04 - Dimensions of Interface Variability
83/120
Keyboard Layouts
QWERTY layout 1870 Christopher Latham Sholes
good mechanical design and a clever placement of the letters that sloweddown the users enough that key jamming was infrequent
put frequently used letter pairs far apart, thereby increasing finger traveldistances
Dvorak layout 1920
reduces finger travel distances by at least one order of magnitude
Acceptance has been slow despite the dedicated efforts of some devotees
it takes about 1 week of regular typing to make the switch, but most users
have been unwilling to invest the effort
K b d L
7/25/2019 Note - 04 - Dimensions of Interface Variability
84/120
Keyboard Layouts
K b d L ( )
7/25/2019 Note - 04 - Dimensions of Interface Variability
85/120
Keyboard Layouts (cont.)
ABCDE style 26 letters of the alphabet laid out in alphabetical order
nontypists will find it easier to locate the keys
Additional keyboard issues IBM PC keyboard was widely criticized because of the
placement of a few keys
backslash key where most typists expect SHIFT key
placement of several special characters near the ENTER key
Number pad layout
wrist and hand placement
K b d L t ( t )
7/25/2019 Note - 04 - Dimensions of Interface Variability
86/120
Keyboard Layouts (cont.)
Keys 1/2 inch square keys
1/4 inch spacing between keys
slight concave surface
matte finish to reduce glare finger slippage
40- to 125-gram force to activate 3 to 5 millimeters displacement
tactile and audible feedback important
certain keys should be larger (e.g. ENTER, SHIFT, CTRL)
some keys require state indicator, such as lowered position or lightindicator (e.g. CAPS LOCK)
key labels should be large, meaningful, permanent
some "home" keys may have additional features, such as deeper cavityor small raised dot, to help user locate their fingers properly (caution -no standard for this)
K b d L t ( t )
7/25/2019 Note - 04 - Dimensions of Interface Variability
87/120
Keyboard Layouts (cont.)
Function keys users must either remember each key's function, identify them from the screen's
display, or use a template over the keys in order to identify them properly
can reduce number of keystrokes and errors
meaning of each key can change with each application
placement on keyboard can affect efficient use
special-purpose displays often embed function keys in monitor bezel
lights next to keys used to indicate availability of the function, or on/off status
typically simply labeled F1, F2, etc, though some may also have meaningful labels, such
as CUT, COPY, etc.
frequent movement between keyboard home position and mouse or function keys can
be disruptive to use
alternative is to use closer keys (e.g. ALT or CTRL) and one letter to indicate special
function
K b d L t ( t )
7/25/2019 Note - 04 - Dimensions of Interface Variability
88/120
Keyboard Layouts (cont.)
Cursor movement keys up, down, left, right
some keyboards also provide diagonals
best layout is natural positions
inverted-T positioning allows users to place their middlethree fingers in a way that reduces hand and fingermovement
cross arrangement better for novices than linear or box
typically include typamatic (auto-repeat) feature
important for form-fillin and direct manipulation other movements may be performed with other keys, such
as TAB, ENTER, HOME, etc.
K b d L t ( t )
7/25/2019 Note - 04 - Dimensions of Interface Variability
89/120
Keyboard Layouts (cont.)
Keyboard and keypads for small devices
Wireless or foldable keyboards
Virtual keyboards
Cloth keyboards
Soft keys
Pens and touchscreens
K b d L t ( t )
7/25/2019 Note - 04 - Dimensions of Interface Variability
90/120
Keyboard Layouts (cont.)
The popular RIM Blackberry (http://www.blackberry.com) shown here on the left
demonstrated that many people could use a reduced-size keyboard on a regular basis;
users typically type with one finger or with both thumbs. The Nokia device in the middle
shows that non-English-speaking countries may use different keyboard layouts (here, a
French AZERTY keyboard). On the right, a larger keyboard uses the longer dimension of
the device and can be slid back into the device when not needed (http://www.nokia.com).
K b d L t ( t )
7/25/2019 Note - 04 - Dimensions of Interface Variability
91/120
Keyboard Layouts (cont.)
Dasher predicts probable characters and words as users make their selections
in a continuous two-dimensional stream of choices
Other text entry methods
7/25/2019 Note - 04 - Dimensions of Interface Variability
92/120
Other text entry methods
The virtual keyboard of
the Apple iPhone gainsprecision by allowing finger
repositioning and then
activates on lift-off
Other text
7/25/2019 Note - 04 - Dimensions of Interface Variability
93/120
entry methods (cont.)
Another method is to handwrite on a touch sensitive
surface, typically with a stylus using Graffiti on the Palm devices
Pointing Devices
7/25/2019 Note - 04 - Dimensions of Interface Variability
94/120
Pointing Devices
Pointing devices are applicable in six types of interaction tasks:
1. Select: user chooses from a set of items.
used for traditional menu selection, identification of a file in a directory, or marking of a part in an automobiledesign.
2. Position: user chooses a point in a one-, two-, three-, or higher-dimensional space
used to create a drawing, to place a new window, or to drag a block of text in a figure.
3. Orient:
user chooses a direction in a two-, three-, or higher-dimensional space. direction may simply rotate a symbol on the screen, indicate a direction of motion for a space ship, or control the
operation of a robot arm.
4. Path: user rapidly performs a series of position and orient operations.
may be realized as a curving line in a drawing program, the instructions for a cloth cutting machine, or the route ona map.
5. Quantify: user specifies a numeric value.
usually a one-dimensional selection of integer or real values to set parameters, such as the page number in adocument, the velocity of a ship, or the amplitude of a sound.
6. Text: user enters, moves, and edits text in a two-dimensional space. The
pointing device indicates the location of an insertion, deletion, or change.
more elaborate tasks, such as centering; margin setting; font sizes; highlighting, such as boldface or underscore;and page layout.
Pointing Devices
7/25/2019 Note - 04 - Dimensions of Interface Variability
95/120
Pointing Devices
Direct-Control
7/25/2019 Note - 04 - Dimensions of Interface Variability
96/120
Pointing Devices
Lightpen enabled users to point to a spot on a screen and to
perform a select, position, or other task
it allows direct control by pointing to a spot on the
display incorporates a button for the user to press when the
cursor is resting on the desired spot on the screen
lightpen has three disadvantages: users' hands
obscured part of the screen, users had to remove theirhands from the keyboard, and users had to pick up thelightpen
Direct-Control
7/25/2019 Note - 04 - Dimensions of Interface Variability
97/120
Pointing Devices (cont.)
Touchscreen
allows direct control touches on the screen using a finger
early designs were rightly criticized for causing fatigue, hand-
obscuring-the-screen, hand-off-keyboard, imprecise pointing, and the
eventual smudging of the display lift-off strategy enables users to point at a single pixel
the users touch the surface
then see a cursor that they can drag around on the display
when the users are satisfied with the position, they lift their fingers off
the display to activate
can produce varied displays to suit the task
are fabricated integrally with display surfaces
Direct-control
7/25/2019 Note - 04 - Dimensions of Interface Variability
98/120
pointing devices (cont.)
Tablet PCs and Mobile Devices:
Natural to point on the LCD surface
Stylus
Keep context in view
Pick up & put down stylus
Gestures and handwriting recognition
Indirect
7/25/2019 Note - 04 - Dimensions of Interface Variability
99/120
Pointing Devices
mouse the hand rests in a comfortable position, buttons
on the mouse are easily pressed, even longmotions can be rapid, and positioning can beprecise
trackball
usually implemented as a rotating ball 1 to 6inches in diameter that moves a cursor
joystick are appealing for tracking purposes
graphics tablet a touch-sensitive surface separate from the
screen
touchpad built-in near the keyboard offers the convenience
and precision of a touchscreen while keeping theuser's hand off the display surface
Comparison of
7/25/2019 Note - 04 - Dimensions of Interface Variability
100/120
Pointing Devices Human-factors variables
speed of motion for short and long distances
accuracy of positioning
error rates
learning time
user satisfaction
Other variables
cost
durability
space requirements weight
left- versus right-hand use
likelihood to cause repetitive-strain injury
compatibility with other systems
Comparison of
7/25/2019 Note - 04 - Dimensions of Interface Variability
101/120
Pointing Devices (cont.)
Some results
direct pointing devices faster, but less accurate
graphics tablets are appealing when user can remain with device for long periods
without switching to keyboard
mouse is faster than isometric joystick
for tasks that mix typing and pointing, cursor keys a faster and are preferred by users toa mouse
muscular strain is low for cursor keys
Fitts' Law
Index of difficulty = log2 (2D / W)
Time to point = C1 + C2 (index of difficulty)
C1 and C2 and constants that depend on the device
Index of difficulty is log2 (2*8/1) = log2(16) = 4 bits
A three-component equation was thus more suited for the high-precision pointing task:
Time for precision pointing = C1 + C2 (index of difficulty) + C3 log2 (C4 / W)
Novel Devices
7/25/2019 Note - 04 - Dimensions of Interface Variability
102/120
Novel Devices
1. Foot controls
2. Eye-tracking
3. Multiple-degrees-of-freedom devices
4. DataGlove
5. Haptic feedback6. Bimanual input
7. Ubiquitous computing and tangible user interfaces
8. Handheld devices
9. Smart pens10. Table top touch screens
11. Game controllers
Novel Devices (cont.)
7/25/2019 Note - 04 - Dimensions of Interface Variability
103/120
( )
Speech and
7/25/2019 Note - 04 - Dimensions of Interface Variability
104/120
Auditory Interfaces
Speech recognition still does not match thefantasy of science fiction:
demands of user's working memory background noise problematic
variations in user speech performance impactseffectiveness
most useful in specific applications, such as tobenefit handicapped users
Speech and
7/25/2019 Note - 04 - Dimensions of Interface Variability
105/120
Auditory Interfaces (cont.)
Speech and
7/25/2019 Note - 04 - Dimensions of Interface Variability
106/120
Auditory Interfaces (cont.)
Discrete word recognition recognize individual words spoken by a specific person; can work with 90- to 98-
percent reliability for 20 to 200 word vocabularies
Speaker-dependent training, in which the user repeats the full vocabulary once ortwice
Speaker-independent systems are beginning to be reliable enough for certaincommercial applications
been successful in enabling bedridden, paralyzed, or otherwise disabled people
also useful in applications with at least one of the following conditions: speaker's hands are occupied
mobility is required
speaker's eyes are occupied
harsh or cramped conditions preclude use of keyboard
voice-controlled editor versus keyboard editor lower task-completion rate
lower error rate
use can disrupt problem solving
Speech and
7/25/2019 Note - 04 - Dimensions of Interface Variability
107/120
Auditory Interfaces (cont.)
Continuous-speech recognition Not generally available:
difficulty in recognizing boundaries between spoken words
normal speech patterns blur boundaries
many potentially useful applications if perfected
Speech store and forward Voice mail users can
receive messages
replay messages
reply to caller
forward messages to other users, delete messages archive messages
Systems are low cost and reliable.
Speech and
7/25/2019 Note - 04 - Dimensions of Interface Variability
108/120
Auditory Interfaces (cont.)
Voice information systems Stored speech commonly used to provide information about tourist
sites, government services, after-hours messages for organizations
Low cost
Voice prompts Deep and complex menus frustrating
Slow pace of voice output, ephemeral nature of speech, scanningand searching problems
Voice mail
Handheld voice recorders
Audio books
Instructional systems
Speech and
7/25/2019 Note - 04 - Dimensions of Interface Variability
109/120
Auditory Interfaces (cont.)
Speech generation Michaelis and Wiggins (1982) suggest that speech generation is
"frequently preferable" under these circumstances:
The message is simple.
The message is short.
The message will not be referred to later.
The message deals with events in time.
The message requires an immediate response.
The visual channels of communication are overloaded.
The environment is too brightly lit, too poorly lit, subject to severevibration, or otherwise unsuitable for transmission of visualinformation.
The user must be free to move around.
The user is subjected to high G forces or anoxia
Speech and
7/25/2019 Note - 04 - Dimensions of Interface Variability
110/120
Auditory Interfaces (cont.)
Audio tones, audiolization, and music
Sound feedback can be important:
to confirm actions
offer warning
for visually-impaired users
music used to provide mood context, e.g. in games
can provide unique opportunities for user, e.g. with
simulating various musical instruments
Displays Small and Large
7/25/2019 Note - 04 - Dimensions of Interface Variability
111/120
Displays Small and Large
The display has become the primary source offeedback to the user from the computer The display has many important features, including:
Physical dimensions (usually the diagonal dimension anddepth)
Resolution (the number of pixels available) Number of available colors, color correctness
Luminance, contrast, and glare
Power consumption
Refresh rates (sufficient to allow animation and video)
Cost Reliability
Displays Small and Large (cont.)
7/25/2019 Note - 04 - Dimensions of Interface Variability
112/120
Displays Small and Large (cont.)
Usage characteristics distinguish displays:
Portability
Privacy
Saliency
Ubiquity
Simultaneity
Display technology
7/25/2019 Note - 04 - Dimensions of Interface Variability
113/120
Display technology
Monochrome displays are adequate, and are attractive because of their lower cost
RGB shadow-mask displays small dots of red, green, and blue phosphors packed closely
Raster-scan cathode-ray tube (CRT)
electron beam sweeping out lines of dots to form letters refresh rates 30 to 70 per second
Liquid-crystal displays (LCDs) voltage changes influence the polarization of tiny capsules of liquid crystals
flicker-free
size of the capsules limits the resolution
Plasma panel
rows of horizontal wires are slightly separated from vertical wires by small glass-enclosedcapsules of neon-based gases
Light-emitting diodes (LEDs) certain diodes emit light when a voltage is applied
arrays of these small diodes can be assembled to display characters
Display technology (cont.)
7/25/2019 Note - 04 - Dimensions of Interface Variability
114/120
Display technology (cont.)
Electronic ink
Paper like resolution
Tiny capsules with negatively and positivelycharged particles
Braille displays
Pins provide output for the blind
Displays Large and Small (cont.)
7/25/2019 Note - 04 - Dimensions of Interface Variability
115/120
Displays Large and Small (cont.)
Large displays
Informational wall
displays Interactive wall
displays
Multiple desktop
displays
Displays Large and Small (cont.)
7/25/2019 Note - 04 - Dimensions of Interface Variability
116/120
Displays Large and Small (cont.)
Heads-up and helmet mounted displays
A heads-up display can, for instance, project
information on a partially silvered widescreen of
an airplane or car
A helmet/head mounted display (HMD) moves
the image with the user
3D images
Mobile Device Displays
7/25/2019 Note - 04 - Dimensions of Interface Variability
117/120
Mobile Device Displays
Currently mobile devices used forbrief tasks, except for game playing
Optimize for repetitive tasks
Custom designs to take advantageof every pixel
DataLens allows compact overviews
Web browsing difficult
Okay for linear reading, but making
comparisons can be difficult
Animation, image, and video
7/25/2019 Note - 04 - Dimensions of Interface Variability
118/120
Animation, image, and video
Accelerated graphics hardware More information shared and downloaded on the
web
Scanning of images and OCR
Digital video
CD-ROMs and DVDs
Compression and decompression through MPEG
Computer-based video conferencing
Reference
7/25/2019 Note - 04 - Dimensions of Interface Variability
119/120
Reference
Shneiderman, B. andPlaisant, C. (2004).
Designing the User
Interface. 5th Edition,Pearson.
7/25/2019 Note - 04 - Dimensions of Interface Variability
120/120