Engineering Notes
Created by admin on Sat, 07/01/2012 - 11:04
Sub Topic:
Designing the User Interface
Department:
Chapter Name:
User Interface Design
Description:
User Interfaces Are Products of Interdisciplinary Work,What are the Business Ramifications?,Individual User Level
Content:
<p>An Instructor’s Outline of</p>
<p align="center"><strong>Designing the User Interface, 3<sup>rd</sup> Edition</strong></p>
<p align="center">By Ben Shneiderman</p>
<p align="center"> </p>
<h6>
<strong>Outline Developed by</strong></h6>
<p align="center">Blaise W. Liffick</p>
<p align="center">Department of Computer Science</p>
<p align="center">Millersville University</p>
<p> </p>
<p> </p>
<p>The following pages provide an instructor’s outline of Ben Shneiderman’s <em>Designing the User Interface</em>. In addition to providing useful lecture notes for instructors who want to use this as a textbook, these pages can be used as transparencies and/or projected during lectures.</p>
<p> </p>
<p>These notes were originally developed just as html files so that they could be used directly from the booksite that supports <em>Designing the User Interface, 3<sup>rd</sup> Edition</em> (http://www.awl.com/dtui).</p>
<p> </p>
<p>Please direct comments about these notes to the booksite manager, Roger J. Chapman, at roger.chapman@acm.org</p>
<p align="center"> </p>
<p align="center"> </p>
<br clear="all" />
<h2 align="center">
Chapter 1: Human Factor of Interactive Software</h2>
<div align="center">
<hr align="center" size="2" width="100%" />
</div>
<h3>
1.1 Introduction</h3>
<ul>
<li>
User Interfaces Are Products of Interdisciplinary Work - Who is Involved?
<ul>
<li>
Psychologists</li>
<li>
Graphic Designers</li>
<li>
Technical Writers</li>
<li>
Human Ergonomical Engineers</li>
<li>
Anthropologists and Sociologists</li>
</ul>
</li>
<li>
What are the Business Ramifications?</li>
<li>
Overnight Success Stories - Netscape, America Online, Lycos</li>
<li>
Intense Competition - Everyone vs. Microsoft</li>
<li>
Copyright Infringement Suits - Apple vs. Microsoft (Windows )</li>
<li>
Mergers - Bell Atlantic and NYNEX</li>
<li>
Corporate Takeovers - IBM's seizure of Lotus</li>
<li>
International Liaisons - working relationship between MCI and British Telecom</li>
<li>
Children can learn more efficiently</li>
<li>
Pilots can learn to fly airplanes more effectively</li>
<li>
Association for Computing Machinery - Computer Human Interaction special interest group has 6000+ members as of 1996</li>
<li>
ESPRIT Project in Europe devotes 150 person-years per year to research of user interfaces</li>
<li>
Japan - Ministry of International Trade and Industry promotes commercial efforts among companies</li>
<li>
Individual User Level</li>
<li>
International Influences</li>
</ul>
<h3>
1.2 Goals of System Engineering</h3>
<h4>
Steps For User-interface Engineering</h4>
<ol>
<li>
<strong>Task analysis to ensure proper functionality</strong>
<ul>
<li>
Define what tasks and subtasks must be carried out</li>
<li>
Pay special attention to those tasks which are only performed occasionally, common tasks are easy to define.</li>
<li>
Functionality must complete, or else users will reject or underutilize the product.</li>
</ul>
</li>
<li>
<strong>Reliability, Availability, Security, and Data Integrity</strong></li>
<li>
Commands must function as specified</li>
<li>
Data displayed must reflect the actual database</li>
<li>
Appease the user's sense of mistrust</li>
<li>
System must be error free</li>
<li>
Ensure the user's privacy by protecting against unwarranted access, destruction of data, and malicious tampering</li>
<li>
<em>Standardization</em>: use pre-existing industry standards</li>
<li>
<em>Integration</em>: product should be able to run across different software tools and packages</li>
<li>
<em>Consistency</em>:
<ul>
<li>
compatibility across different product versions</li>
<li>
compatibility with related, non-computer based systems</li>
<li>
use common action sequences, terms, units, colors, etc. within the program</li>
</ul>
</li>
<li>
<em>Portability</em>: allow for the user to convert data across multiple software and hardware environments</li>
<li>
<strong>Standardization, Integration, Consistency, and Portability</strong></li>
<li>
<strong>Schedules and Budgets</strong><br />
Late products can make a company ineffective or uncompetitive</li>
</ol>
<h3>
1.3 System - User Interface Design Goals</h3>
<ul>
<li>
Define the target user community associated with the interface</li>
<li>
Communities evolve and change</li>
<li>
5 human factors central to community evaluation:
<ol>
<li>
<em>Time to learn</em><br />
How long does it take for typical members of the community to learn relevant task?</li>
<li>
<em>Speed of performance</em><br />
How long does it take to perform relevant benchmarks?</li>
<li>
<em>Rate of errors by users</em><br />
How many and what kinds of errors are commonly made during typical applications?</li>
<li>
<em>Retention over time</em><br />
Frequency of use and ease of learning help make for better user retention</li>
<li>
<em>Subjective satisfaction</em><br />
Allow for user feedback via interviews, free-form comments and satisfaction scales.</li>
</ol>
</li>
<li>
Trade-offs sometimes must be allowed in development, use tools such as macros and shortcuts to ease some burdens</li>
<li>
Test all design alternatives using a wide range of mock-ups</li>
</ul>
<h3>
1.4 Motivations for Human Factors in Design</h3>
<p>Most of today's systems are poorly designed from a human-interaction standpoint</p>
<ol>
<li>
Life-critical systems
<ul>
<li>
Air traffic control, nuclear reactors, power utilities, police & fire dispatch systems</li>
<li>
High costs, reliability and effectiveness are expected</li>
<li>
Length training periods are acceptable provide error-free performance</li>
<li>
Subject satisfaction is less an issue due to well motivated users Retention via frequent use and practice</li>
</ul>
</li>
<li>
Industrial and commercial uses</li>
<li>
Banking, insurance, order entry, inventory management, reservation, billing, and point-of-sales systems</li>
<li>
Lower cost may sacrifice reliability</li>
<li>
Training is expensive, learning must be easy</li>
<li>
Speed and error rates are relative to cost, however speed is the supreme concern Subject satisfaction is fairly important to limit operator burnout</li>
<li>
Word processing, electronic mail, computer conferencing, and video game systems</li>
<li>
Choosing functionality is difficult because the population has a wide range of both novice and expert users</li>
<li>
Competition cause the need for low cost</li>
<li>
Database, artist toolkits, statistical packages, and scientific modeling systems</li>
<li>
Benchmarks are hard to describe due to the wide array of tasks</li>
<li>
With these applications, the computer should "vanish" so that the user can be absorbed in their task domain</li>
<li>
Office, home, and entertainment applications</li>
<li>
Exploratory, creative, and cooperative systems</li>
</ol>
<h3>
1.5 Accommodation of Human Diversity</h3>
<h4>
Physical abilities and physical workplaces</h4>
<ul>
<li>
There is no average user, either compromises must be made or multiple versions of a system must be created</li>
<li>
Physical measurement of human dimensions are not enough, take into account dynamic measures such as reach, strength or speed</li>
<li>
Account for variances of the user population's sense perception</li>
<li>
Vision: depth, contrast, color blindness, and motion sensitivity</li>
<li>
Touch: keyboard and touchscreen sensitivity</li>
<li>
Hearing: audio clues must be distinct</li>
<li>
Workplace design can both help and hinder work performance</li>
</ul>
<h4>
Cognitive and perceptual abilities</h4>
<ul>
<li>
cognitive process
<ul>
<li>
short-term memory</li>
<li>
long-term memory and learning</li>
<li>
problem solving</li>
<li>
decision making</li>
<li>
attention and set (scope of concern)</li>
<li>
search and scanning</li>
<li>
time perception</li>
</ul>
</li>
<li>
factors affecting perceptual and motor performance</li>
<li>
arousal and vigilance</li>
<li>
fatigue</li>
<li>
perceptual (mental) load</li>
<li>
knowledge of results</li>
<li>
monotony and boredom</li>
<li>
sensory deprivation</li>
<li>
sleep deprivation</li>
<li>
anxiety and fear</li>
<li>
isolation</li>
<li>
aging</li>
<li>
drugs and alcohol</li>
<li>
circadian rhythms</li>
</ul>
<h3>
1.5 Accommodation of Human Diversity</h3>
<h4>
Personality differences</h4>
<ul>
<li>
There is no set taxonomy for identifying user personality types</li>
<li>
Designers must be aware that populations are subdivided and that these subdivisions have various responses to different stimuli</li>
<li>
Myers-Briggs Type Indicator (MBTI)
<ul>
<li>
extroversion versus introversion</li>
<li>
sensing versus intuition</li>
<li>
perceptive versus judging</li>
<li>
feeling versus thinking</li>
</ul>
</li>
</ul>
<h4>
Cultural and international diversity</h4>
<ul>
<li>
characters, numerals, special characters, and diacriticals</li>
<li>
Left-to-right versus right-to-left versus vertical input and reading</li>
<li>
Date and time formats</li>
<li>
Numeric and currency formats</li>
<li>
Weights and measures</li>
<li>
Telephone numbers and addresses</li>
<li>
Names and titles (Mr., Ms., Mme.)</li>
<li>
Social-security, national identification, and passport numbers</li>
<li>
Capitalization and punctuation</li>
<li>
Sorting sequences</li>
<li>
Icons, buttons, colors</li>
<li>
Pluralization, grammar, spelling</li>
<li>
Etiquette, policies, tone, formality, metaphors</li>
</ul>
<h4>
</h4>
<h4>
Users with disabilities</h4>
<ul>
<li>
Designers must plan early to accommodate users with disabilities</li>
<li>
Early planning is more cost efficient than adding on later</li>
<li>
Businesses must comply with the "Americans With Disabilities" Act for some applications</li>
</ul>
<h4>
Elderly Users</h4>
<ul>
<li>
Including the elderly is fairly ease, designers should allow for variability within their applications via settings for sound, color, brightness, font sizes, etc.</li>
</ul>
<h3>
1.6 Goals for Our Profession</h3>
<h4>
Influencing academic and industrial researchers</h4>
<h5>
Potential research topics</h5>
<ul>
<li>
Reducing anxiety and fear of computer usage</li>
<li>
Graceful Evolution</li>
<li>
Specification and implementation of interaction</li>
<li>
Direct manipulation</li>
<li>
Input devices</li>
<li>
Online assistance</li>
<li>
Information exploration</li>
</ul>
<h5>
Providing tools, techniques, and knowledge for system implementers</h5>
<ul>
<li>
Rapid prototyping is easy when using contemporary tools</li>
<li>
Use general or self-determined guideline documents written for specific audiences</li>
<li>
To refine systems, use feedback from individual or groups of users</li>
</ul>
<h5>
Raising the computer consciousness of the general public</h5>
<ul>
<li>
Many novice users are fearful due to experience with poor product design,</li>
<li>
Good designs help novices through these fears by being clear, competent, and nonthreatening</li>
</ul>
<br clear="all" />
<h2 align="center">
Chapter 2: Theories, Principles, and Guidelines</h2>
<div align="center">
<hr align="center" size="2" width="100%" />
</div>
<h2>
2.2 High-Level Theories</h2>
<h3>
Explanatory theories:</h3>
<ul>
<li>
Observing behavior</li>
<li>
Describing activity</li>
<li>
Conceiving of designs</li>
<li>
Comparing high-level concepts of two designs</li>
<li>
Training</li>
</ul>
<h3>
Predictive theories:</h3>
<ul>
<li>
Enable designers to compare proposed designs for execution time or error rates.</li>
</ul>
<h3>
Perceptual or Cognitive subtasks theories</h3>
<ul>
<li>
Predicting reading times for free text, lists, or formatted displays</li>
</ul>
<h3>
Motor-task performance times theories:</h3>
<ul>
<li>
Predicting keystroking or pointing times</li>
</ul>
<h3>
Taxonomy (Explanatory theory)</h3>
<ul>
<li>
Order on a complex set of phenomena</li>
<li>
Facilitate useful comparisons</li>
<li>
Organize a topic for newcomers</li>
<li>
Guide designers</li>
<li>
Indicate opportunities for novel products.</li>
</ul>
<h4>
2.2.1 Conceptual, semantic, syntactic, and lexical model</h4>
<p><strong>Foley and van Dam four-level approach</strong></p>
<ul>
<li>
<em>Conceptual level:</em> User's mental model of the interactive system</li>
<li>
<em>Semantic level:</em> Describes the meanings conveyed by the user's command input and by the computer's output display</li>
<li>
<em>Syntactic level:</em> Defines how the units (words) that convey semantics are assembled into a complete sentence that instructs the computer to perform a certain task</li>
<li>
<em>Lexical level:</em> Deals with device dependencies and with the precise mechanisms by which a user specifies the syntax</li>
</ul>
<h4>
Approach is convenient for designers</h4>
<ul>
<li>
Top-down nature is easy to explain</li>
<li>
Matches the software architecture</li>
<li>
Allows for useful modularity during design</li>
</ul>
<h3>
2.2.2 GOMS and the keystroke-level model</h3>
<h4>
Goals, operators, methods, and selection rules (GOMS) model</h4>
<ul>
<li>
Keystroke-level model: Predict performance times for error-free expert performance of tasks</li>
<li>
Transition diagrams</li>
<li>
Natural GOMS Language (NGOMSL)</li>
<li>
Several alternative methods to delete fields, e.g.
<ul>
<li>
Method 1 to accomplish the goal of deleting the field:
<ol>
<li>
Decide: If necessary, then accomplish the goal of selecting the field</li>
<li>
Accomplish the goal of using a specific field delete method</li>
<li>
Report goal accomplished</li>
</ol>
</li>
<li>
Method 2 to accomplish the goal of deleting the field:</li>
<li value="1">
Decide: If necessary, then use the Browse tool to go to the card with the field</li>
<li>
Choose the field tool in the Tools menu</li>
<li>
Note that the fields on the card background are displayed</li>
<li>
Click on the field to be selected</li>
<li>
Report goal accomplished</li>
<li>
Selection rule set for goal of using a specific field-delete method:
<ul>
<li>
If you want to past the field somewhere else, then choose "Cut Field" from the Edit menu.</li>
<li>
If you want to delete the field permanently, then choose "Clear Field" from the Edit menu.</li>
<li>
Report goal accomplished.</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3>
2.2.3 Stages of action models</h3>
<p><strong>Norman</strong><strong>'s seven stages of action</strong></p>
<ol>
<li>
Forming the goal</li>
<li>
Forming the intention</li>
<li>
Specifying the action</li>
<li>
Executing the action</li>
<li>
Perceiving the system state</li>
<li>
Interpreting the system state</li>
<li>
Evaluating the outcome</li>
</ol>
<p><strong>Norman</strong><strong>'s contributions</strong></p>
<ul>
<li>
Context of cycles of action and evaluation.</li>
<li>
<em>Gulf of execution:</em> Mismatch between the users's intentions and the allowable actions</li>
<li>
<em>Gulf of evaluation:</em> Mismatch between the system's representation and the users' expectations</li>
</ul>
<p><strong>Four principles of good design</strong></p>
<ul>
<li>
State and the action alternatives should be visible</li>
<li>
Should be a good conceptual model with a consistent system image</li>
<li>
Interface should include good mappings that reveal the relationships between stages</li>
<li>
User should receive continuous feedback</li>
</ul>
<p><strong>Four critical points where user failures can occur</strong></p>
<ul>
<li>
Users can form an inadequate goal</li>
<li>
Might not find the correct interface object because of an incomprehensible label or icon</li>
<li>
May not know how to specify or execute a desired action</li>
<li>
May receive inappropriate or misleading feedback</li>
</ul>
<h3>
2.2.4 Consistency through grammars</h3>
<p><strong>Consistent user interface goal</strong></p>
<ul>
<li>
Definition is elusive - multiple levels sometimes in conflict</li>
<li>
Sometimes advantageous to be inconsistent.</li>
</ul>
<table border="0" cellpadding="0">
<tbody>
<tr>
<td>
<p><strong>Consistent</strong></p>
</td>
<td>
<p><strong>Inconsistent A</strong></p>
</td>
<td>
<p><strong>Inconsistent B</strong></p>
</td>
</tr>
<tr>
<td>
<p>delete/insert character</p>
</td>
<td>
<p>delete/insert character</p>
</td>
<td>
<p>delete/insert character</p>
</td>
</tr>
<tr>
<td>
<p>delete/insert word</p>
</td>
<td>
<p>remove/bring word</p>
</td>
<td>
<p>remove/insert word</p>
</td>
</tr>
<tr>
<td>
<p>delete/insert line</p>
</td>
<td>
<p>destroy/create line</p>
</td>
<td>
<p>delete/insert line</p>
</td>
</tr>
<tr>
<td>
<p>delete/insert paragraph</p>
</td>
<td>
<p>kill/birth paragraph</p>
</td>
<td>
<p>delete/insert paragraph</p>
</td>
</tr>
</tbody>
</table>
<p><strong>Inconsistent action verbs</strong></p>
<ul>
<li>
Take longer to learn</li>
<li>
Cause more errors</li>
<li>
Slow down users</li>
<li>
Harder for users to remember</li>
</ul>
<h3>
2.2.4 Consistency through grammars</h3>
<h4>
Task-action grammars (TAGs) try to characterize a complete set of tasks.</h4>
<p>Example: TAG definition of cursor control</p>
<p><strong>Dictionary of tasks:</strong></p>
<table border="0" cellpadding="0">
<tbody>
<tr>
<td>
<p>move-cursor-one-character-forward</p>
</td>
<td>
<p>[Direction=forward,Unit=char]</p>
</td>
</tr>
<tr>
<td>
<p>move-cursor-one-character-backward</p>
</td>
<td>
<p>[Direction=backward,Unit=char]</p>
</td>
</tr>
<tr>
<td>
<p>move-cursor-one-word-forward</p>
</td>
<td>
<p>[Direction=forward,Unit=word]</p>
</td>
</tr>
<tr>
<td>
<p>move-cursor-one-word-backward</p>
</td>
<td>
<p>[Direction=backward,Unit=word]</p>
</td>
</tr>
</tbody>
</table>
<p><strong>High-level rule schemas describing command syntax:</strong></p>
<ol>
<li>
task [Direction,Unit -> symbol [Direction] + letter [Unit]</li>
<li>
symbol [Direction=forward] -> "CTRL"</li>
<li>
symbol [Direction=backward] -> "ESC"</li>
<li>
letter[Unit=word] -> "W"</li>
<li>
letter[Unit=char] -> "C"</li>
</ol>
<p><strong>Generates a consistent grammar:</strong></p>
<table border="0" cellpadding="0">
<tbody>
<tr>
<td>
<p>move cursor one character forward</p>
</td>
<td>
<p>CTRL-C</p>
</td>
</tr>
<tr>
<td>
<p>move cursor one character backward</p>
</td>
<td>
<p>ESC-C</p>
</td>
</tr>
<tr>
<td>
<p>move cursor one word forward</p>
</td>
<td>
<p>CTRL-W</p>
</td>
</tr>
<tr>
<td>
<p>move cursor one word backward</p>
</td>
<td>
<p>ESC-W</p>
</td>
</tr>
</tbody>
</table>
<h3>
2.2.5 Widget-level theories</h3>
<p>Follow simplifications made in higher-level, user-interface building tools.</p>
<p>Potential benefits:</p>
<ul>
<li>
Possible automatic generation of performance prediction</li>
<li>
A measure of layout appropriateness available as development guide</li>
<li>
Estimates generated automatically and amortized over many designers and projects
<ul>
<li>
perceptual complexity</li>
<li>
cognitive complexity</li>
<li>
motor load</li>
</ul>
</li>
<li>
Higher-level patterns of usage appear</li>
</ul>
<h2>
2.3 Object/Action Interface Model</h2>
<h4>
Syntactic-semantic model of human behavior</h4>
<ul>
<li>
used to describe
<ul>
<li>
programming</li>
<li>
database-manipulation facilities</li>
<li>
direct manipulation</li>
</ul>
</li>
<li>
Distinction made between meaningfully-acquired semantic concepts and rote-memorized syntactic details</li>
<li>
Semantic concepts of user's tasks well-organized and stable in memory</li>
<li>
Syntactic details of command languages arbitrary and required frequent rehearsal</li>
</ul>
<p>With introduction of GUIs, emphasis shifted to simple direct manipulations applied to visual representations of objects and actions.</p>
<p>Syntactic aspects not eliminated, but minimized.</p>
<h4>
Object-action design:</h4>
<ol>
<li>
understand the task.
<ul>
<li>
real-world objects</li>
<li>
actions applied to those object</li>
</ul>
</li>
<li>
create metaphoric representations of interface objects and actions<br />
</li>
<li>
designer makes interface actions visible to users</li>
</ol>
<h3>
2.3.1 Task hierarchies of objects and actions</h3>
<h4>
Decomposition of real-world complex systems natural</h4>
<ul>
<li>
human body</li>
<li>
buildings</li>
<li>
cities</li>
<li>
symphonies</li>
<li>
baseball game</li>
</ul>
<h4>
Computer system designers must generate a hierarchy of objects and actions to model users' tasks:</h4>
<ul>
<li>
Representations in pixels on a screen</li>
<li>
Representations in physical devices</li>
<li>
Representations in voice or other audio cue</li>
</ul>
<h3>
</h3>
<h3>
2.3.2 Interface hierarchies of objects and actions</h3>
<h3>
Interface includes hierarchies of objects and actions at high and low levels</h3>
<p>E.g. A computer system:</p>
<ul>
<li>
Interface Objects
<ul style="list-style-type:circle;">
<li>
directory
<ul>
<li>
name</li>
<li>
length</li>
<li>
date of creation</li>
<li>
owner</li>
<li>
access control</li>
</ul>
</li>
<li>
files of information
<ul>
<li>
lines</li>
<li>
fields</li>
<li>
characters</li>
<li>
fonts</li>
<li>
pointers</li>
<li>
binary numbers</li>
</ul>
</li>
</ul>
</li>
<li>
Interface Actions
<ul style="list-style-type:circle;">
<li>
load a text data file</li>
<li>
insert into the data file</li>
<li>
save the data file
<ul>
<li>
save the file</li>
<li>
save a backup of the file</li>
<li>
apply access-control rights</li>
<li>
overwrite previous version</li>
<li>
assign a name</li>
</ul>
</li>
</ul>
</li>
</ul>
<h4>
Interface objects and actions based on familiar examples.</h4>
<h4>
Users learn interface objects and actions by:</h4>
<ul>
<li>
seeing a demonstration</li>
<li>
hearing an explanation of features</li>
<li>
conducting trial-and-error sessions</li>
</ul>
<h3>
2.3.3 The disappearance of syntax</h3>
<ul>
<li>
Users must maintain a profusion of device-dependent details in their human memory.
<ul>
<li>
Which action erases a character</li>
<li>
Which action inserts a new line after the third line of a text file</li>
<li>
Which abbreviations are permissible</li>
<li>
Which of the numbered function keys produces the previous screen.</li>
</ul>
</li>
<li>
Learning, use, and retention of this knowledge is hampered by two problems</li>
<li>
Details vary across systems in an unpredictable manner</li>
<li>
Greatly reduces the effectiveness of paired-associate learning</li>
<li>
Syntactic knowledge conveyed by example and repeated usage<br />
</li>
<li>
Syntactic knowledge is system dependent<br />
</li>
<li>
Modern direct-manipulation systems</li>
<li>
Familiar objects and actions representing their task objects and actions.</li>
<li>
Modern user interface building tools</li>
<li>
Standard widgets</li>
<li>
Minimizing these burdens is the goal of most interface designers</li>
</ul>
<h3>
2.4 Principle 1: Recognize the Diversity</h3>
<h4>
Usage profiles</h4>
<ul>
<li>
Novice or first-time users</li>
<li>
Knowledgeable intermittent users</li>
<li>
Expert frequent users</li>
</ul>
<h4>
User characteristics</h4>
<ul>
<li>
Age</li>
<li>
Gender</li>
<li>
Physical abilities</li>
<li>
Education</li>
<li>
Cultural or ethnic background</li>
<li>
Training</li>
<li>
Motivation</li>
<li>
Goals</li>
<li>
Personality</li>
</ul>
<h4>
Task profiles</h4>
<ul>
<li>
Decomposition into multiple middle-level task actions, which are refined into atomic actions</li>
<li>
task frequencies of use</li>
<li>
matrix of users and tasks helpful</li>
</ul>
<h4>
Interaction styles</h4>
<ul>
<li>
Direct manipulation</li>
<li>
Menu selection</li>
<li>
Form fillin</li>
<li>
Command language</li>
<li>
Natural language</li>
</ul>
<h3>
2.5 Principle 2: Use the Eight Golden Rules of Interface Design</h3>
<ol>
<li>
Strive for consistency.
<ul>
<li>
Terminology</li>
<li>
Prompts</li>
<li>
Menus</li>
<li>
Help screens</li>
<li>
Color</li>
<li>
Layout</li>
<li>
Capitalization</li>
<li>
Fonts</li>
<li>
Most frequently violated</li>
</ul>
</li>
<li>
Enable frequent users to use shortcuts</li>
<li>
Abbreviations</li>
<li>
Special keys</li>
<li>
Hidden commands</li>
<li>
Macro facilities</li>
<li>
Offer informative feedback<br />
</li>
<li>
Sequences of actions should be organized into groups</li>
<li>
Beginning, middle, and an end</li>
<li>
Design dialogs to yield closure</li>
<li>
Offer error prevention and simple error handling<br />
</li>
<li>
Permit easy reversal of actions<br />
</li>
<li>
Support internal locus of control<br />
</li>
<li>
Reduce short-term memory load.</li>
</ol>
<h3>
2.6 Prevent Errors</h3>
<p>To reduce errors by ensuring complete and correct actions:</p>
<ul>
<li>
Correct matching pairs</li>
<li>
Complete sequences</li>
<li>
Correct commands.</li>
</ul>
<h3>
2.7 Guidelines for Data Display</h3>
<h4>
Organizing the display</h4>
<ol>
<li>
Consistency of data display</li>
<li>
Efficient information assimilation by the user</li>
<li>
Minimal memory load on user</li>
<li>
Compatibility of data display with data entry</li>
<li>
Flexibility for user control of data display</li>
</ol>
<p><strong>Example: electric-power utility control room</strong></p>
<ul>
<li>
Be consistent in labeling and graphic conventions</li>
<li>
Standardize abbreviations</li>
<li>
Use consistent format in all displays</li>
<li>
Present a page number on each display page</li>
<li>
Present data only if they assist the operator</li>
<li>
Present information graphically where appropriate</li>
<li>
Present digital values only when knowledge of numerical value is necessary and useful</li>
<li>
Use high-resolution monitors and provide maximum display quality</li>
<li>
Design a display in monochromatic form, then add color judiciously</li>
<li>
Involve users in development of new displays and procedures</li>
</ul>
<h4>
Getting the user's attention</h4>
<ul>
<li>
Intensity</li>
<li>
Marking</li>
<li>
Size</li>
<li>
Choice of fonts</li>
<li>
Inverse video</li>
<li>
Blinking</li>
<li>
Color</li>
<li>
Color blinking</li>
<li>
Audio</li>
</ul>
<h2>
2.8 Guidelines for Data Entry</h2>
<h4>
Five high-level objectives for data entry:</h4>
<ol>
<li>
Consistency of data-entry transactions</li>
<li>
Minimal input actions by user</li>
<li>
Minimal memory load on user</li>
<li>
Compatibility of data entry with data display</li>
<li>
flexibility for user control of data entry</li>
</ol>
<h3>
</h3>
<h3>
</h3>
<h3>
2.9 Balance of Automation and Human Control</h3>
<p><br />
<strong>Ultimate goal: simplify user's task - eliminating human actions when no judgment is required.</strong></p>
<p><strong>Issues:</strong></p>
<ul>
<li>
real world is open system</li>
<li>
computers constitute closed system</li>
<li>
human judgment necessary for unpredictable events
<ul>
<li>
unanticipated situations</li>
<li>
equipment failure</li>
<li>
improper human performance</li>
<li>
incomplete or erroneous data</li>
</ul>
</li>
</ul>
<p><strong>Knowbots or softbots: autonomous "agent"</strong></p>
<ul>
<li>
knows user's likes and dislikes</li>
<li>
makes proper inferences</li>
<li>
responds to novel situations</li>
<li>
performs competently with little guidance</li>
</ul>
<p><strong>User modeling:</strong></p>
<ul>
<li>
keeps track of user performance</li>
<li>
adapts behavior to suit user's needs</li>
<li>
allows for automatically adapting system
<ul>
<li>
response time</li>
<li>
length of messages</li>
<li>
density of feedback</li>
<li>
content of menus</li>
<li>
order of menu items</li>
<li>
type of feedback</li>
<li>
content of help screens</li>
</ul>
</li>
<li>
can be problematic</li>
<li>
system may make surprising changes</li>
<li>
user must pause to see what has happened</li>
<li>
user may not be able to
<ul>
<li>
predict next change</li>
<li>
interpret what has happened</li>
<li>
restore system to previous state</li>
</ul>
</li>
</ul>
<p><strong>Alternative to agents:</strong></p>
<ul>
<li>
user control, responsibility, accomplishment</li>
<li>
expand use of control panels
<ul>
<li>
style sheets for word processors</li>
<li>
specification boxes of query facilities</li>
<li>
information-visualization tools</li>
</ul>
</li>
</ul>
<br clear="all" />
<h2 align="center">
Chapter 3: Managing Design Processes</h2>
<div align="center">
<hr align="center" size="2" width="100%" />
</div>
<h3>
3.2 Organizational Design and Support Usability</h3>
<p>Design is inherently creative and unpredictable. Interactive system designers must blend knowledge of technical feasibility with a mystical esthetic sense of what attracts users.</p>
<p>Carroll and Rosson design characterization:</p>
<ul>
<li>
Design is a process, not a state.</li>
<li>
The design process is <em>nonhierarchical</em>.</li>
<li>
The process is <em>radically transformational</em>.</li>
<li>
Design intrinsically involves the <em>discovery of new goals.</em></li>
</ul>
<h3>
3.3 The Three Pillars of Design</h3>
<h4>
Guidelines documents and processes</h4>
<p>Each project has different needs, but guidelines should be considered for:</p>
<p><strong>Words and icons</strong></p>
<ul>
<li>
Terminology (objects and actions), abbreviations, and capitalization</li>
<li>
Character set, fonts, font sizes, and styles (bold, italic, underline)</li>
<li>
Icons, graphics, line thickness, and</li>
<li>
Use of color, backgrounds, highlighting, and blinking</li>
</ul>
<p><strong>Screen-layout issues</strong></p>
<ul>
<li>
Menu selection, form fill-in, and dialog-box formats</li>
<li>
Wording of prompts, feedback, and error messages</li>
<li>
Justification, white space, and margins</li>
<li>
Data entry and display formats for items and lists</li>
<li>
Use and contents of headers and footers</li>
</ul>
<h3>
3.3 The Three Pillars of Design</h3>
<p><strong>Input and output devices</strong></p>
<ul>
<li>
Keyboard, display, cursor control, and pointing devices</li>
<li>
Audible sounds, voice feedback, touch input, and other special devices</li>
<li>
Response time for a variety of tasks</li>
</ul>
<p><strong>Action sequences</strong></p>
<ul>
<li>
Direct-manipulation clicking, dragging, dropping, and gestures</li>
<li>
Command syntax, semantics, and sequences</li>
<li>
Programmed function keys</li>
<li>
Error handling and recovery procedures</li>
</ul>
<p><strong>Training</strong></p>
<ul>
<li>
Online help and tutorials</li>
<li>
Training and reference materials</li>
</ul>
<h3>
3.4 Developmental Methodologies</h3>
<p><strong>Six Stages of Logical User-Centered Design Methodology (Kreitzberg):</strong></p>
<p style="margin-left:.5in;">Stage 1: Develop Product Concept</p>
<p style="margin-left:.5in;">Stage 2: Research and Needs Analysis</p>
<p style="margin-left:.5in;">Stage 3: Design Concepts and Key Screen Prototype</p>
<p style="margin-left:.5in;">Stage 4: Iterative Design and Refinement</p>
<p style="margin-left:.5in;">Stage 5: Implement Software</p>
<p style="margin-left:.5in;">Stage 6: Provide Roll-Out Support</p>
<h3>
3.4 Developmental Methodologies</h3>
<h2>
The Twelve areas of the Lucid Management Strategy</h2>
<ol>
<li>
Product Definition</li>
<li>
Business Case</li>
<li>
Resources</li>
<li>
Physical Environment</li>
<li>
Technical Environment</li>
<li>
Users</li>
<li>
Functionality</li>
<li>
Prototype</li>
<li>
Usability</li>
<li>
Design Guidelines</li>
<li>
Content Materials</li>
<li>
Documentation, Training, and Help</li>
</ol>
<h3>
3.5 Ethnographic Observation</h3>
<h4>
Guidelines</h4>
<p style="margin-left:.5in;"><strong>Preparation</strong></p>
<ul>
<li>
Understand organization policies and work culture.</li>
<li>
Familiarize yourself with the system and its history.</li>
<li>
Set initial goals and prepare questions.</li>
<li>
Gain access and permission to observe/interview.</li>
</ul>
<p style="margin-left:.5in;"><strong>Field Study</strong></p>
<ul>
<li>
Establish rapport with managers and users.</li>
<li>
Observe/interview users in their workplace and collect subjective/objective quantitative/qualitative data.</li>
<li>
Follow any leads that emerge from the visits.</li>
</ul>
<p style="margin-left:.5in;"><strong>Analysis</strong></p>
<ul>
<li>
Compile the collected data in numerical, textual, and multimedia databases.</li>
<li>
Quantify data and compile statistics.</li>
<li>
Reduce and interpret the data.</li>
<li>
Refine the goals and the process used.</li>
</ul>
<p style="margin-left:.5in;"><strong>Reporting</strong></p>
<ul>
<li>
Consider multiple audiences and goals.</li>
<li>
Prepare a report and present the findings.</li>
</ul>
<h3>
3.6 Participatory Design</h3>
<p><strong>Controversial</strong></p>
<ul>
<li>
more user involvement brings
<ul>
<li>
more accurate information about tasks</li>
<li>
more opportunity for users to influence design decisions</li>
<li>
a sense of participation that builds users' ego investment in successful implementation</li>
<li>
potential for increased user acceptance of final system</li>
</ul>
</li>
<li>
on negative side, extensive user involvement may</li>
<li>
be more costly</li>
<li>
lengthen the implementation period</li>
<li>
build antagonism with people not involved or whose suggestions rejected</li>
<li>
force designers to compromise their design to satisfy incompetent participants</li>
<li>
build opposition to implementation</li>
<li>
exacerbate personality conflicts between design-team members and users</li>
<li>
show that organizational politics and preferences of certain individuals are more important than technical issues</li>
</ul>
<h3>
3.7 Scenario Development</h3>
<p><strong>Day-in-the-life scenarios:</strong></p>
<ul>
<li>
characterize what happens when users perform typical tasks</li>
<li>
can be acted out as a form of walkthrough</li>
<li>
may be used as basis for videotape</li>
<li>
useful tools
<ul>
<li>
table of user communities across top, tasks listed down the side</li>
<li>
table of task sequences</li>
<li>
flowchart or transition diagram</li>
</ul>
</li>
</ul>
<h3>
3.8 Social Impact Statement for Early Design Review</h3>
<p><strong>Describe the new system and its benefits.</strong></p>
<ul>
<li>
Convey the high level goals of the new system.</li>
<li>
Identify the stakeholders.</li>
<li>
Identify specific benefits</li>
</ul>
<p><strong>Address concerns and potential barriers.</strong></p>
<ul>
<li>
Anticipate changes in job functions and potential layoffs.</li>
<li>
Address security and privacy issues.</li>
<li>
Discuss accountability and responsibility for system misuse and failure.</li>
<li>
Avoid potential biases.</li>
<li>
Weigh individual rights vs. societal benefits.</li>
<li>
Assess trade-offs between centralization and decentralization.</li>
<li>
Preserve democratic principles.</li>
<li>
Ensure diverse access.</li>
<li>
promote simplicity and preserve what works.</li>
</ul>
<p><strong>Outline the development process.</strong></p>
<ul>
<li>
Present and estimated project schedule.</li>
<li>
Propose process for making decisions.</li>
<li>
Discuss expectations of how stakeholders will be involved.</li>
<li>
Recognize needs for more staff, training, and hardware.</li>
<li>
Propose plan for backups of data and equipment.</li>
<li>
Outline plan for migrating to the new system.</li>
</ul>
<h2>
3.9 Legal Issues</h2>
<h4>
Potential Controversies</h4>
<ul>
<li>
What material is eligible for copyright?<br />
</li>
<li>
Are copyrights or patents more appropriate for user interfaces?<br />
</li>
<li>
What constitutes copyright infringement?<br />
</li>
<li>
Should user interfaces be copyrighted?</li>
</ul>
<br clear="all" />
<h2 align="center">
Chapter 4: Expert Reviews, Usability Testing, Surveys, and Continuing Assessment</h2>
<div align="center">
<hr align="center" size="2" width="100%" />
</div>
<h3>
4.1 Introduction</h3>
<ul>
<li>
Designers can become so entranced with their creations that they may fail to evaluate them adequately.<br />
</li>
<li>
Experienced designers have attained the wisdom and humility to know that extensive testing is a necessity.<br />
</li>
<li>
The determinants of the evaluation plan include:
<ul>
<li>
stage of design (early, middle, late)</li>
<li>
novelty of project (well defined vs. exploratory)</li>
<li>
number of expected users</li>
<li>
criticality of the interface (life-critical medical system vs. museum exhibit support)</li>
<li>
costs of product and finances allocated for testing</li>
<li>
time available</li>
<li>
experience of the design and evaluation team</li>
</ul>
</li>
<li>
The range of evaluation plans might be from an ambitious two-year test to a few days test.<br />
</li>
<li>
The range of costs might be from 10% of a project down to 1%.</li>
</ul>
<h3>
4.2: Expert Reviews</h3>
<ul>
<li>
While informal demos to colleagues or customers can provide some useful feedback, more formal expert reviews have proven to be effective.<br />
</li>
<li>
Expert reviews entail one-half day to one week effort, although a lengthy training period may sometimes be required to explain the task domain or operational procedures.<br />
</li>
<li>
There are a variety of expert review methods to chose from:
<ul>
<li>
Heuristic evaluation</li>
<li>
Guidelines review</li>
<li>
Consistency inspection</li>
<li>
Cognitive walkthrough</li>
<li>
Formal usability inspection</li>
</ul>
</li>
<li>
Expert reviews can be scheduled at several points in the development process when experts are available and when the design team is ready for feedback.<br />
</li>
<li>
Different experts tend to find different problems in an interface, so 3-5 expert reviewers can be highly productive, as can complementary usability testing.<br />
</li>
<li>
The dangers with expert reviews are that the experts may not have an adequate understanding of the task domain or user communities.<br />
</li>
<li>
To strengthen the possibility of successful expert reviews it helps to chose knowledgeable experts who are familiar with the project situation and who have a longer term relationship with the organization.<br />
</li>
<li>
Moreover, even experienced expert reviewers have great difficulty knowing how typical users, especially first-time users will really behave.</li>
</ul>
<h3>
4.3: Usability Testing and Laboratories</h3>
<ul>
<li>
The emergence of usability testing and laboratories since the early 1980s is an indicator of the profound shift in attention to user needs.</li>
<li>
The remarkable surprise was that usability testing not only sped up many projects but that it produced dramatic cost savings.</li>
<li>
The movement towards usability testing stimulated the construction of usability laboratories.</li>
<li>
A typical modest usability lab would have two 10 by 10 foot areas, one for the participants to do their work and another, separated by a half-silvered mirror, for the testers and observers (designers, managers, and customers).</li>
<li>
Participants should be chosen to represent the intended user communities, with attention to background in computing, experience with the task, motivation, education, and ability with the natural language used in the interface.</li>
<li>
Participation should always be voluntary, and informed consent should be obtained. Professional practice is to ask all subjects to read and sign a statement like this one:
<ul>
<li>
I have freely volunteered to participate in this experiment.</li>
<li>
I have been informed in advance what my task(s) will be and what procedures will be followed.</li>
<li>
I have been given the opportunity to ask questions, and have had my questions answered to my satisfaction.</li>
<li>
I am aware that I have the right to withdraw consent and to discontinue participation at any time, without prejudice to my future treatment.</li>
<li>
My signature below may be taken as affirmation of all the above statements; it was given prior to my participation in this study.</li>
</ul>
</li>
<li>
Videotaping participants performing tasks is often valuable for later review and for showing designers or managers the problems that users encounter.</li>
<li>
Field tests attempt to put new interfaces to work in realistic environments for a fixed trial period. Field tests can be made more fruitful if logging software is used to capture error, command, and help frequencies plus productivity measures.</li>
<li>
Game designers pioneered the can-you-break-this approach to usability testing by providing energetic teenagers with the challenge of trying to beat new games. This destructive testing approach, in which the users try to find fatal flaws in the system, or otherwise to destroy it, has been used in other projects and should be considered seriously.</li>
<li>
For all its success, usability testing does have at least two serious limitations: it emphasizes first-time usage and has limited coverage of the interface features.</li>
<li>
These and other concerns have led design teams to supplement usability testing with the varied forms of expert reviews.</li>
</ul>
<h3>
4.4: Surveys</h3>
<ul>
<li>
Written user surveys are a familiar, inexpensive and generally acceptable companion for usability tests and expert reviews.</li>
<li>
The keys to successful surveys are clear goals in advance and then development of focused items that help attain the goals.</li>
<li>
Survey goals can be tied to the components of the Objects and Action Interface model of interface design. Users could be asked for their subjective impressions about specific aspects of the interface such as the representation of:
<ul>
<li>
task domain objects and actions</li>
<li>
syntax of inputs and design of displays.</li>
</ul>
</li>
<li>
Other goals would be to ascertain</li>
<li>
users background (age, gender, origins, education, income)</li>
<li>
experience with computers (specific applications or software packages, length of time, depth of knowledge)</li>
<li>
job responsibilities (decision-making influence, managerial roles, motivation)</li>
<li>
personality style (introvert vs. extrovert, risk taking vs. risk aversive, early vs. late adopter, systematic vs. opportunistic)</li>
<li>
reasons for not using an interface (inadequate services, too complex, too slow)</li>
<li>
familiarity with features (printing, macros, shortcuts, tutorials)</li>
<li>
their feeling state after using an interface (confused vs. clear, frustrated vs. in-control, bored vs. excited).</li>
<li>
Online surveys avoid the cost of printing and the extra effort needed for distribution and collection of paper forms.</li>
<li>
Many people prefer to answer a brief survey displayed on a screen, instead of filling in and returning a printed form, although there is a potential bias in the sample.</li>
</ul>
<h3>
4.5: Acceptance Tests</h3>
<ul>
<li>
For large implementation projects, the customer or manager usually sets objective and measurable goals for hardware and software performance.</li>
<li>
If the completed product fails to meet these acceptance criteria, the system must be reworked until success is demonstrated.</li>
<li>
Rather than the vague and misleading criterion of "user friendly," measurable criteria for the user interface can be established for the following:
<ul>
<li>
Time to learn specific functions</li>
<li>
Speed of task performance</li>
<li>
Rate of errors by users</li>
<li>
Human retention of commands over time</li>
<li>
Subjective user satisfaction</li>
</ul>
</li>
<li>
In a large system, there may be eight or 10 such tests to carry out on different components of the interface and with different user communities.</li>
<li>
Once acceptance testing has been successful, there may be a period of field testing before national or international distribution..</li>
<li>
The goal of early expert reviews, usability testing, surveys, acceptance testing, and field testing is to force as much of the evolutionary development as possible into the prerelease phase, when change is relatively easy and inexpensive to accomplish.</li>
</ul>
<h3>
4.6: Evaluation During Active Use</h3>
<ul>
<li>
A carefully designed and thoroughly tested system is a wonderful asset, but successful active use requires constant attention from dedicated managers, user-services personnel, and maintenance staff.</li>
<li>
Perfection is not attainable, but percentage improvements are possible and are worth pursuing.</li>
<li>
Interviews and focus group discussions
<ul>
<li>
Interviews with individual users can be productive because the interviewer can pursue specific issues of concern.</li>
<li>
After a series of individual discussions, group discussions are valuable to ascertain the universality of comments.</li>
</ul>
</li>
<li>
Continuous user-performance data logging</li>
<li>
The software architecture should make it easy for system managers to collect data about the patterns of system usage, speed of user performance, rate of errors, or frequency of request for online assistance.</li>
<li>
A major benefit of usage-frequency data is the guidance they provide to system maintainers in optimizing performance and reducing costs for all participants.</li>
<li>
Online or telephone consultants are an extremely effective and personal way to provide assistance to users who are experiencing difficulties.</li>
<li>
Many users feel reassured if they know there is a human being to whom they can turn when problems arise.</li>
<li>
On some network systems, the consultants can monitor the user's computer and see the same displays that the user sees while maintaining telephone voice contact.</li>
<li>
This service can be extremely reassuring; the users know that someone can walk them through the correct sequence of screens to complete their tasks.</li>
<li>
Electronic mail can be employed to allow users to send messages to the maintainers or designers.</li>
<li>
Such an online suggestion box encourages some users to make productive comments, since writing a letter may be seen as requiring too much effort.</li>
<li>
Many interface designers offer users an electronic bulletin board or newsgroups to permit posting of open messages and questions.</li>
<li>
Bulletin-board software systems usually offer a list of item headlines, allowing users the opportunity to select items for display.</li>
<li>
New items can be added by anyone, but usually someone monitors the bulletin board to ensure that offensive, useless, or repetitious items are removed.</li>
<li>
Newsletters that provide information about novel interface facilities, suggestions for improved productivity, requests for assistance, case studies of successful applications, or stories about individual users can promote user satisfaction and greater knowledge.</li>
<li>
Printed newsletters are more traditional and have the advantage that they can be carried away from the workstation.</li>
<li>
Online newsletters are less expensive and more rapidly disseminated</li>
<li>
Conferences allow workers to exchange experiences with colleagues, promote novel approaches, stimulate greater dedication, encourage higher productivity, and develop a deeper relationship of trust.</li>
<li>
Online or telephone consultants</li>
<li>
Online suggestion box or trouble reporting</li>
<li>
Online bulletin board or newsgroup</li>
<li>
User newsletters and conferences</li>
</ul>
<h3>
4.7: Controlled Psychologically-oriented Experiments</h3>
<ul>
<li>
Scientific and engineering progress is often stimulated by improved techniques for precise measurement.</li>
<li>
Rapid progress in the designs of interfaces will be stimulated as researchers and practitioners evolve suitable human-performance measures and techniques.</li>
<li>
The outline of the scientific method as applied to human-computer interaction might comprise these tasks:
<ul>
<li>
Deal with a practical problem and consider the theoretical framework</li>
<li>
State a lucid and testable hypothesis</li>
<li>
Identify a small number of independent variables that are to be manipulated</li>
<li>
Carefully choose the dependent variables that will be measured</li>
<li>
Judiciously select subjects and carefully or randomly assign subjects to groups</li>
<li>
Control for biasing factors (non-representative sample of subjects or selection of tasks, inconsistent testing procedures)</li>
<li>
Apply statistical methods to data analysis</li>
<li>
Resolve the practical problem, refine the theory, and give advice to future researchers</li>
</ul>
</li>
<li>
Managers of actively used systems are coming to recognize the power of controlled experiments in fine tuning the human-computer interface.</li>
<li>
limited time, and then performance could be compared with the control group. Dependent measures could include performance times, user-subjective satisfaction, error rates, and user retention over time.</li>
</ul>
<br clear="all" />
<h2 align="center">
Chapter 5: Software Tools</h2>
<div align="center">
<hr align="center" size="2" width="100%" />
</div>
<h3>
5.2: Specification Methods</h3>
<p><strong>First asset in making designs is a good notation and discuss alternate possibilities:</strong></p>
<ul>
<li>
default language for specifications in any field is the designer's natural language</li>
<li>
English, sketchpad, or blackboard</li>
</ul>
<p><strong>Natural-language specifications tend to be:</strong></p>
<ul>
<li>
lengthy</li>
<li>
vague</li>
<li>
ambiguous</li>
</ul>
<p><strong>Therefore often are difficult to prove:</strong></p>
<ul>
<li>
correct</li>
<li>
consistent</li>
<li>
complete</li>
</ul>
<h3>
5.2: Specification Methods</h3>
<p><strong>Backus-Naur Form (a.k.a. Backus Normal Form or BNF)</strong></p>
<ul>
<li>
high-level components are described as nonterminals</li>
<li>
specific strings are described as terminals</li>
</ul>
<p><strong>Grammars Example</strong></p>
<pre>
<Telephone book entry>::= <Name><Telephone number></pre>
<pre>
<Name> ::= <Last name>, <First name></pre>
<pre>
<Last name> ::= <string></pre>
<pre>
<First name> ::= <string></pre>
<pre>
<string> ::= <character>|<character><string></pre>
<pre>
<character> ::= A|B|C|D|E|F|G|H|I|J|K|L|M|N|O|P|Q|R|S|T|U|V|W|X|Y|Z</pre>
<pre>
<Telephone number>::= (<area code>) <exchange>-<local number></pre>
<pre>
<area code>::= <digit><digit><digit></pre>
<pre>
<exchange>::= <digit><digit><digit></pre>
<pre>
<local number>::= <digit><digit><digit><digit></pre>
<pre>
<digit>::= 0|1|2|3|4|5|6|7|8|9</pre>
<p> </p>
<p><strong>Examples of acceptable entries</strong></p>
<pre>
- WASHINGTON, GEORGE (301) 555-1234</pre>
<pre>
</pre>
<pre>
- BEEF, STU (726) 768-7878</pre>
<pre>
</pre>
<pre>
- A, Z (999) 111-111</pre>
<p> </p>
<p><strong>BNF Example for Unix Command For Copying Files (cp)</strong></p>
<p style="margin-left:.5in;">cp [ -ip ] filename1 filename2<br />
cp -rR [ -ip ] directory1 directory2<br />
cp [ -iprR ] filename ... directory</p>
<p> </p>
<p>The square brackets indicate that zero or more options can be included, and the -rR indicates that one of these options for recursive copying is required for copying directories.</p>
<p> </p>
<h3>
5.2: Specification Methods</h3>
<p><strong>Transition Diagram</strong></p>
<ul>
<li>
is a set of <em>nodes</em> that represents system states and a set of <em>links</em> between<br />
the nodes that represents possible transitions</li>
</ul>
<p><strong>State Charts</strong></p>
<p><strong>User Action Notation (UAN)</strong></p>
<p>Task : select an icon</p>
<p style="margin-left:.5in;"> </p>
<table border="0" cellpadding="0">
<tbody>
<tr>
<td style="width:200px;height:17px;">
<p><strong>User Actions</strong></p>
</td>
<td style="width:200px;height:17px;">
<p><strong>Interface Feedback</strong></p>
</td>
</tr>
<tr>
<td style="height:17px;">
<p>~[icon] Mv</p>
</td>
<td style="height:17px;">
<p>icon!</p>
</td>
</tr>
<tr>
<td style="height:17px;">
<p>M^</p>
</td>
<td style="height:17px;">
<p> </p>
</td>
</tr>
</tbody>
</table>
<p> </p>
<p>Task : select an icon</p>
<p style="margin-left:.5in;"> </p>
<table border="0" cellpadding="0" style="width:92.0%;" width="92%">
<tbody>
<tr>
<td style="width:108px;height:16px;">
<p><strong>User Actions</strong></p>
</td>
<td style="width:170px;height:16px;">
<p><strong>Interface Feedback</strong></p>
</td>
<td style="width:136px;height:16px;">
<p><strong>Interface</strong><strong> State</strong></p>
</td>
</tr>
<tr>
<td style="height:17px;">
<p>~[file] Mv</p>
</td>
<td style="height:17px;">
<p>file!, forall(file!): file-!</p>
</td>
<td style="height:17px;">
<p>selected = file</p>
</td>
</tr>
<tr>
<td style="height:17px;">
<p>~[x,y]*</p>
</td>
<td style="height:17px;">
<p>outline(file) > ~</p>
</td>
<td style="height:17px;">
<p> </p>
</td>
</tr>
<tr>
<td style="height:17px;">
<p>~[trash]</p>
</td>
<td style="height:17px;">
<p>outline(file) > ~ , trash!</p>
</td>
<td style="height:17px;">
<p> </p>
</td>
</tr>
<tr>
<td style="height:17px;">
<p>M^</p>
</td>
<td style="height:17px;">
<p>erase(file) , trash!!</p>
</td>
<td style="height:17px;">
<p>selected = null</p>
</td>
</tr>
</tbody>
</table>
<p> </p>
<h3>
5.3: Interface-Building Tools</h3>
<p><strong>Terminology varies depending on vendor. Popular terms include:</strong></p>
<ul>
<li>
Rapid Prototyper</li>
<li>
User Interface Builder</li>
<li>
User Interface Management System</li>
<li>
User Interface Development Environment</li>
<li>
Rapid Application Developer</li>
</ul>
<h3>
Box 5.1: Features of Interface-Building Tools.</h3>
<p> </p>
<p style="margin-left:.5in;">User Interface Independence</p>
<ul>
<li>
Separate interface design from internals</li>
<li>
Enable multiple user interface strategies</li>
<li>
Enable multiple platform support</li>
<li>
Establish user interface architect role</li>
<li>
Enforce standards</li>
</ul>
<p style="margin-left:.5in;"><br />
Methodology & Notation</p>
<ul>
<li>
Develop design procedures</li>
<li>
Find ways to talk about design</li>
<li>
Create project management</li>
</ul>
<p style="margin-left:.5in;"><br />
Rapid Prototyping</p>
<ul>
<li>
Try out ideas very early</li>
<li>
Test, revise, test, revise,...</li>
<li>
Engage end users, managers, and others</li>
</ul>
<p style="margin-left:.5in;">Software Support</p>
<ul>
<li>
Increase productivity</li>
<li>
Offer some constraint & consistency checks</li>
<li>
Facilitate team approaches</li>
<li>
Ease maintenance</li>
</ul>
<p> </p>
<p><strong>Designers can write programs with easy-to-understand terms:</strong></p>
<p style="margin-left:.5in;">on mouseUp</p>
<p style="margin-left:1.0in;">play "boing"<br />
wait for 3 seconds<br />
visual effect wipe left very fast to black<br />
click at 150,100<br />
type "goodbye"</p>
<p style="margin-left:.5in;">end mouseUp</p>
<p> </p>
<p><strong>Software engineering tools - Tcl / Tk</strong></p>
<pre>
#First make a menu button</pre>
<pre>
</pre>
<pre>
menubutton.menu1 -text "Unix Commands" -menu.menu1.m </pre>
<pre>
-underline 0</pre>
<pre>
</pre>
<pre>
#Now make the menu, and add the lines one at a time</pre>
<pre>
</pre>
<pre>
menu.menu1.m</pre>
<pre>
.menu1.m add command -label "List Files" -command {ls}</pre>
<pre>
.menu1.m add command -label "Get Date" -command {date}</pre>
<pre>
.menu1.m add command -label "Start Calendar" -command {xcalendar}</pre>
<pre>
</pre>
<pre>
pack.menu1</pre>
<p> </p>
<p><strong>Software engineering tools - Java</strong></p>
<pre>
Class Test { </pre>
<pre>
public static void main (String[] args) { </pre>
<pre>
for (int i = 0; i < args.length; i++) </pre>
<pre>
System.out.print(i == 0 ? args[i] : " " + args[i]); </pre>
<pre>
System.out.println(); </pre>
<pre>
</pre>
<pre>
}</pre>
<pre>
}</pre>
<p><strong>Software engineering tools - JavaScript</strong></p>
<p style="margin-left:.5in;"><HEAD></p>
<p style="margin-left:.5in;"><SCRIPT LANGUAGE="JavaScript"></p>
<p style="margin-left:.5in;"><!-- to hide script contents from old browsers</p>
<p style="margin-left:1.0in;">function square(i) {</p>
<p style="margin-left:1.5in;">document.write("The call passed ", i ," to</p>
<p style="margin-left:2.0in;">the function."<BR>")</p>
<p style="margin-left:1.5in;">return i * i</p>
<p style="margin-left:.5in;">}</p>
<p style="margin-left:.5in;">document.write("The function returned ", square(5),".")</p>
<p style="margin-left:.5in;">// end hiding contents from old browsers --></p>
<p style="margin-left:.5in;"></SCRIPT></p>
<p style="margin-left:.5in;"></HEAD></p>
<p style="margin-left:.5in;"><BODY></p>
<p style="margin-left:.5in;"><BR></p>
<p style="margin-left:.5in;">All Done.</p>
<p style="margin-left:.5in;"></BODY></p>
<p><strong>Upon loading the web page it produces this output:</strong></p>
<p style="margin-left:1.0in;">The call passed 5 to the function.</p>
<p style="margin-left:1.0in;">The function returned 25.</p>
<p style="margin-left:1.0in;">All Done.</p>
<h3>
Chapter 5.4 - Evaluation and Critiquing Tools</h3>
<p><strong>Tullis' Display Analysis Program, Version 4.0:</strong></p>
<p>Takes alphanumeric screen designs and produces display-complexity metrics plus some advice:</p>
<p style="margin-left:.5in;">Upper-case letters: 77% The percentage of upper-case letters is high.</p>
<p style="margin-left:1.0in;">Consider using more lower-case letters, since text printed in normal<br />
upper- and lower-case letters is read about 13% faster than text in<br />
all upper case. Reserve all upper-case for items that need to attract<br />
attention.</p>
<p style="margin-left:.5in;"><br />
Maximum local density = 89.9% at row 9, column 8.<br />
Average local density = 67.0%</p>
<p style="margin-left:1.0in;">The area with the highest local density is identified...you can<br />
reduce local density by distributing the characters as evenly as<br />
feasible over the entire screen.</p>
<p style="margin-left:.5in;"><br />
Total layout complexity = 8.02 bits<br />
Layout complexity is high.</p>
<p style="margin-left:1.0in;">This means that the display items (labels and data) are not well<br />
aligned with each other...Horizontal complexity can be reduced by<br />
starting items in fewer different columns on the screen (that is, by<br />
aligning them vertically).</p>
<p> </p>
<p><strong>Doctor HTML - Web Page Analyzer:</strong></p>
<p><a href="http://www2.imagiware.com/RxHTML/">http://imagiware.com/RxHTML</a></p>
<p style="margin-left:.5in;">Did not find the required open and close HEAD tag. You should open and close<br />
the HEAD tag in order to get consistent performance on all browsers.<br />
Found extra close STRONG tags in the document. Please remove them.</p>
<br clear="all" />
<h2 align="center">
Chapter 6: Direct Manipulation and Virtual Environments</h2>
<div align="center">
<hr align="center" size="2" width="100%" />
</div>
<h2>
6.1 Introduction</h2>
<p>Positive feelings associated with good user interfaces:</p>
<ul>
<li>
Mastery of the interface</li>
<li>
Competence in performing tasks</li>
<li>
Ease in learning the system originally and in assimilating advanced features</li>
<li>
Confidence in the capacity to retain mastery over time</li>
<li>
Enjoyment in using the system</li>
<li>
Eagerness to show the system off to novices</li>
<li>
Desire to explore more powerful aspects of the system</li>
</ul>
<h3>
6.2 Examples of Direct-Manipulation systems</h3>
<p><strong>Command line vs. display editors and word processors</strong></p>
<ul>
<li>
Training times with display editors are much less than line editors</li>
<li>
Line editors are generally more flexible and powerful</li>
<li>
The advances of WYSIWYG word processors:
<ul>
<li>
Display a full page of text</li>
<li>
Display of the document in the form that it will appear when the final printing is done</li>
<li>
Show cursor action</li>
<li>
Control cursor motion through physically obvious and intuitively natural means</li>
<li>
Use of labeled icon for actions</li>
<li>
Display of the results of an action immediately</li>
<li>
Provide rapid response and display</li>
<li>
Offer easily reversible actions</li>
</ul>
</li>
</ul>
<p>Technologies that derive from the word processor:</p>
<ul>
<li>
Integration</li>
<li>
Desktop publication software</li>
<li>
Slide-presentation software</li>
<li>
Hypermedia environments</li>
<li>
Improved macro facilities</li>
<li>
Spell checker and thesaurus</li>
<li>
Grammar checkers</li>
</ul>
<p><strong>The VISICALC spreadsheet and its descendants</strong> <strong>Spatial data management</strong></p>
<ul>
<li>
In some cases, spatial representations provide a better model of reality</li>
<li>
Successful spatial data-management systems depend on choosing appropriate:
<ul>
<li>
Icons</li>
<li>
Graphical representations</li>
<li>
Natural and comprehensible data layouts</li>
</ul>
</li>
</ul>
<p><strong>Video games</strong></p>
<ul>
<li>
Field of action is visual and compelling</li>
<li>
Commands are physical actions whose results are immediately shown on the screen</li>
<li>
No syntax to remember</li>
</ul>
<p><strong>Computer-aided design</strong> <strong>Office automation</strong> <strong>Further examples of direct manipulation</strong></p>
<ul>
<li>
HyperCard</li>
<li>
Quicken</li>
</ul>
<h3>
6.3 Explanations of Direct Manipulation</h3>
<p><strong>Problems with direct manipulation</strong></p>
<ul>
<li>
Spatial or visual representations can be too spread out</li>
<li>
High-level flowcharts and database-schema can become confusing</li>
<li>
Designs may force valuable information off of the screen</li>
<li>
Users must learn the graphical representations</li>
<li>
The visual representation may be misleading</li>
<li>
Typing commands with the keyboard my be faster</li>
</ul>
<p><strong>The OAI Model explanation of direct manipulation</strong></p>
<p>Portrait of direct manipulation:</p>
<ul>
<li>
Continuous representation of the objects and actions of interest</li>
<li>
Physical actions or presses of labeled buttons instead of complex syntax</li>
<li>
Rapid incremental reversible operations whose effect on the object of interest is immediately visible</li>
</ul>
<p>Beneficial attributes:</p>
<ul>
<li>
Novices learn quickly</li>
<li>
Experts work rapidly</li>
<li>
Intermittent users can retain concepts</li>
<li>
Error messages are rarely needed</li>
<li>
Users see if their actions are furthering their goals</li>
<li>
Users experience less anxiety</li>
<li>
Users gain confidence and mastery</li>
</ul>
<h3>
6.4 Visual Thinking and Icons</h3>
<ul>
<li>
The visual nature of computers can challenge the first generation of hackers</li>
<li>
An icon is an image, picture, or symbol representing a concept</li>
<li>
Icon-specific guidelines
<ul>
<li>
Represent the object or action in a familiar manner</li>
<li>
Limit the number of different icons</li>
<li>
Make icons stand out from the background</li>
<li>
Consider three-dimensional icons</li>
<li>
Ensure a selected icon is visible from unselected icons</li>
<li>
Design the movement animation</li>
<li>
Add detailed information</li>
<li>
Explore combinations of icons to create new objects or actions</li>
</ul>
</li>
</ul>
<p>Five levels of icon design:</p>
<ul>
<li>
Lexical qualities</li>
<li>
Syntactics</li>
<li>
Semantics</li>
<li>
Pragmatics</li>
<li>
Dynamics</li>
</ul>
<h3>
6.5 Direct-Manipulation Programming</h3>
<p>Visual representations of information make direct-manipulation programming possible in other domains</p>
<p>Demonstrational programming is when users create macros by simply doing their tasks</p>
<p>The five challenges of programming in the user interface:</p>
<ul>
<li>
Sufficient computational generality</li>
<li>
Access to the appropriate data structures and operators</li>
<li>
Ease in programming and editing programs</li>
<li>
Simplicity in invocation and assignment of arguments</li>
<li>
Low risk</li>
</ul>
<p>Cognitive dimensions framework may help analyzing design issues of visual programming environments.</p>
<p> </p>
<h3>
</h3>
<h3>
6.6 Home Automation</h3>
<p>Remote control of devices is being extended to:</p>
<ul>
<li>
Channel audio and video</li>
<li>
lawn watering</li>
<li>
video surveillance and burglar alarms</li>
<li>
Multiple-zone environmental controls</li>
<li>
Maintenance records</li>
</ul>
<p>Providing direct-manipulation with rich feedback is vital in these applications</p>
<p>Many direct-manipulation actions take place on a display of the floor plan</p>
<p>ON and OFF can have many representations and present problems with choosing the appropriate one</p>
<p>Controlling complex home equipment by direct manipulation reshapes how we think of homes and residents</p>
<h3>
6.7 Remote Direct Manipulation</h3>
<p>Complicating factors in the architecture of remote environments:</p>
<ul>
<li>
Time delays
<ul>
<li>
transmission delays</li>
<li>
operation delays</li>
</ul>
</li>
<li>
Incomplete feedback</li>
<li>
Feedback from multiple sources</li>
<li>
Unanticipated interferences</li>
</ul>
<h3>
6.8 Virtual Environments</h3>
<p>Virtual reality breaks the physical limitations of space and allow users to act as though they were somewhere else</p>
<p>Augmented reality shows the real world with an overlay of additional overlay</p>
<p>Situational awareness shows information about the real world that surrounds you by tracking your movements in a computer model</p>
<p>Successful virtual environments depend on the smooth integration of:</p>
<ul>
<li>
Visual Display</li>
<li>
Head position sensing</li>
<li>
Hand-position sensing</li>
<li>
Force feedback</li>
<li>
Sound input and output</li>
<li>
Other sensations</li>
<li>
Cooperative and competitive virtual reality</li>
</ul>
<br clear="all" />
<h2 align="center">
Chapter 7: Menu Selection, Form Fillin, and Dialog Boxes</h2>
<div align="center">
<hr align="center" size="2" width="100%" />
</div>
<h3>
7.2 Task-Related Organization</h3>
<p>"The primary goal for menu, form-fillin, and dialog-box designers is to create a sensible, comprehensible, memorable, and convenient organization relevant to the user's task."</p>
<h4>
Single Menus</h4>
<ul>
<li>
Binary Menus
<ul>
<li>
Mnemonic letters</li>
<li>
Radio Buttons</li>
<li>
Button Choice</li>
</ul>
</li>
<li>
Multiple-item Menus</li>
<li>
Multiple-selection menus or check boxes</li>
<li>
Pull-down or pop-up menus</li>
<li>
Scrolling and two-dimensional menus</li>
<li>
Alphasliders</li>
<li>
Embedded links</li>
<li>
Iconic Menus, toolbars, or palettes</li>
</ul>
<h3>
Linear Sequences and Multiple Menus</h3>
<ul>
<li>
Guide the user through complex decision-making process.</li>
<li>
E.g. cue cards or "Wizards"</li>
</ul>
<h3>
Tree-structured Menus</h3>
<p>E.g. familiar examples</p>
<ul>
<li>
Male, female</li>
<li>
Animal, vegetable, mineral</li>
<li>
Fonts, size, style, spacing</li>
</ul>
<h3>
Depth versus Breadth</h3>
<h3>
Task-related Grouping</h3>
<ul>
<li>
Create groups of logically similar items</li>
<li>
Form groups that cover all possibilities</li>
<li>
Make sure that items are nonoverlapping</li>
<li>
Use familiar terminology, but ensure that items are distinct from one another</li>
</ul>
<h3>
Menu Maps</h3>
<p>Effective for providing overviews to minimize user disorientation.</p>
<h3>
Acyclic and Cyclic Networks</h3>
<p>Useful for</p>
<ul>
<li>
social relationships</li>
<li>
transportation routing</li>
<li>
scientific-journal citations</li>
</ul>
<p>Can cause confusion and disorientation.</p>
<p> </p>
<h3>
7.3 Item Presentation Sequence</h3>
<p>The order of items in the menu is important, and should take natural sequence into account when possible:</p>
<ul>
<li>
Time</li>
<li>
Numeric ordering</li>
<li>
Physical properties</li>
</ul>
<p>When cases have no task-related orderings, the designer must choose from such possibilities as:</p>
<ul>
<li>
Alphabetic sequence of terms</li>
<li>
Grouping of related items</li>
<li>
Most frequently used items first</li>
<li>
Most important items first.</li>
</ul>
<h3>
7.4 Response Time and Display Rate</h3>
<p>The speed at which a user can move through menus may determine their attractiveness as an interface mechanism.</p>
<p style="margin-left:.5in;"> </p>
<p style="margin-left:.5in;"><strong>Response Time:</strong> the time it takes for the system to <em>begin</em> displaying information in response to a user selection.</p>
<p style="margin-left:.5in;"> </p>
<p style="margin-left:.5in;"><strong>Display Rate:</strong> the speed at which the menus are displayed.</p>
<p> </p>
<p>User performance and preference favors broader, shallower menus.</p>
<p> </p>
<h3>
7.5 Fast Movement Through Menus</h3>
<h4>
Menus with typeahead</h4>
<p>Important when</p>
<ul>
<li>
Menus are familiar</li>
<li>
Response time/display rates are slow</li>
</ul>
<p>BLT approach: single-letter menus with typeahead leads to concatenation of menu selections into mnemonics.</p>
<h4>
Menu names or bookmarks for direct access</h4>
<p>Simple naming scheme allows users to directly access pages.</p>
<p>Useful only if there is a small number of possible destinations that each user needs to remember.</p>
<p>WWW browsers provide bookmarks for quick access to specific pages.</p>
<h3>
7.6 Menu Layout</h3>
<h4>
Titles</h4>
<p>For single menus, use a simple descriptive title.</p>
<p>For tree-structured menus, use the exact same words in the higher-level menu items as in the titles for the next lower-level menu. E.g. if a menu item is called Business and Financial Services, the next screen should have that phrase as its title.</p>
<h4>
Phrasing of menu items</h4>
<ul>
<li>
Use familiar and consistent terminology</li>
<li>
Ensure that items are distinct from one another</li>
<li>
Use consistent and concise phrasing</li>
<li>
Bring the keyword to the left</li>
</ul>
<h4>
Graphic layout and design</h4>
<p>Constraints</p>
<ul>
<li>
screen width and length</li>
<li>
display rate</li>
<li>
character set</li>
<li>
highlighting techniques</li>
</ul>
<p>Establish guidelines for consistency of at least these menu components:</p>
<ul>
<li>
Titles</li>
<li>
Item placement</li>
<li>
Instructions</li>
<li>
Error messages</li>
<li>
Status reports</li>
</ul>
<p>Techniques</p>
<ul>
<li>
Indentation</li>
<li>
Upper/lower case characters</li>
<li>
Symbols such as * or - to create separators or outlines</li>
<li>
Position markers</li>
<li>
Cascading or walking menus</li>
<li>
Magic lens</li>
</ul>
<h3>
7.7 Form Fillin</h3>
<p>Appropriate when many fields of data must be entered:</p>
<ul>
<li>
Full complement of information is visible to user.</li>
<li>
Display resembles familiar paper forms.</li>
<li>
Few instructions are required for many types of entries.</li>
</ul>
<p>Users must be familiar with:</p>
<ul>
<li>
Keyboards</li>
<li>
Use of TAB key or mouse to move the cursor</li>
<li>
Error correction methods</li>
<li>
Field-label meanings</li>
<li>
Permissible field contents</li>
<li>
Use of the ENTER and/or RETURN key.</li>
</ul>
<h4>
Form-Fillin Design Guidelines</h4>
<ul>
<li>
Meaningful title</li>
<li>
Comprehensible instructions</li>
<li>
Logical grouping and sequencing of fields</li>
<li>
Visually appealing layout of the form</li>
<li>
Familiar field labels</li>
<li>
Consistent terminology and abbreviations</li>
<li>
Visible space and boundaries for data-entry fields</li>
<li>
Convenient cursor movement</li>
<li>
Error correction for individual characters and entire fields</li>
<li>
Error prevention</li>
<li>
Error messages for unacceptable values</li>
<li>
Optional fields clearly marked</li>
<li>
Explanatory messages for fields</li>
<li>
Completion signal</li>
</ul>
<h4>
List and combo boxes</h4>
<h4>
Coded fields</h4>
<ul>
<li>
Telephone numbers</li>
<li>
Social-security numbers</li>
<li>
Times</li>
<li>
Dates</li>
<li>
Dollar amounts (or other currency)</li>
</ul>
<h3>
7.8 Dialog Boxes</h3>
<p>Combination of menu and form-fillin techniques.</p>
<p>Related to a specific task.</p>
<p>Internal layout guidelines:</p>
<ul>
<li>
Meaningful title, consistent style</li>
<li>
Top-left to bottom-right sequencing</li>
<li>
Clustering and emphasis</li>
<li>
Consistent layouts (margins, grid, whitespace, lines, boxes)</li>
<li>
Consistent terminology, fonts, capitalization, justification</li>
<li>
Standard buttons (OK, Cancel)</li>
<li>
Error prevention by direct manipulation</li>
</ul>
<p>External Relationship</p>
<ul>
<li>
Smooth appearance and disappearance</li>
<li>
Distinguishable but small boundary</li>
<li>
Size small enough to reduce overlap problems</li>
<li>
Display close to appropriate items</li>
<li>
Easy to make disappear</li>
<li>
Clear how to complete/cancel</li>
</ul>
<br clear="all" />
<h2 align="center">
Chapter 8: Command and Natural Languages</h2>
<div align="center">
<hr align="center" size="2" width="100%" />
</div>
<h2>
8.1 Introduction</h2>
<h3>
The Basic Goals of Language Design</h3>
<ul>
<li>
Precision</li>
<li>
Compactness</li>
<li>
Ease in writing and reading</li>
<li>
Speed in learning</li>
<li>
Simplicity to reduce errors</li>
<li>
Ease of retention over time</li>
</ul>
<h3>
Higher-Level Goals of Language Design</h3>
<ul>
<li>
Close correspondence between reality and the notation</li>
<li>
Convenience in carrying out manipulations relevant to user's tasks</li>
<li>
Compatibility with existing notations</li>
<li>
Flexibility to accommodate novice and expert users</li>
<li>
Expressiveness to encourage creativity</li>
<li>
Visual appeal</li>
</ul>
<h3>
Constraints on a Language</h3>
<ul>
<li>
The capacity for human beings to record the notation</li>
<li>
The match between the recording and the display media (for example, clay tablets, paper, printing presses)</li>
<li>
The convenience in speaking (vocalizing)</li>
</ul>
<h3>
8.2 Functionality to Support User's Tasks</h3>
<h4>
Users do wide range of work:</h4>
<ul>
<li>
text editing</li>
<li>
electronic mail</li>
<li>
financial management</li>
<li>
airline or hotel reservations</li>
<li>
inventory</li>
<li>
manufacturing process control</li>
<li>
gaming</li>
</ul>
<h4>
</h4>
<h4>
Designer should</h4>
<ul>
<li>
determine functionality of the system by studying users' task domain</li>
<li>
create a list of task actions and objects</li>
<li>
abstract this list into a set of interface actions and objects</li>
<li>
represent low-level interface syntax</li>
<li>
create a table of user communities and tasks, with expected use frequency</li>
<li>
determine hierarchy of importance of user communities (i.e. prime users)</li>
<li>
evaluate destructive actions (e.g. deleting objects) to ensure reversibility</li>
<li>
identify error conditions and prepare error messages</li>
<li>
allow shortcuts for expert users, such as macros and customizing system parameters</li>
</ul>
<h2>
8.3 Command-Organization Strategies</h2>
<p>A unifying interface concept or metaphor aids</p>
<ul>
<li>
learning</li>
<li>
problem solving</li>
<li>
retention</li>
</ul>
<p>Designers often err by choosing a metaphor closer to machine domain than to the user's task domain.</p>
<h4>
Simple command set</h4>
<p>Each command is chosen to carry out a single task. The number of commands match the number of tasks.</p>
<p>For small number of tasks, this can produce a system easy to learn and use.</p>
<p>E.g. the vi editor of Unix (Figure 8.2).</p>
<h3>
8.3 Command-Organization Strategies</h3>
<h3>
Command plus arguments</h3>
<p>Follow each command by one or more arguments that indicate objects to be manipulated, e.g.</p>
<ul>
<li>
COPY FILEA, FILEB</li>
<li>
DELETE FILEA</li>
<li>
PRINT FILEA, FILEB, FILEC</li>
</ul>
<p>Keyword labels for arguments are helpful for some users, e.g. COPY FROM=FILEA TO=FILEB.</p>
<h3>
Command plus options and arguments</h3>
<p>Commands may also have options to indicate special cases, e.g.:</p>
<ul>
<li>
PRINT/3,HQ FILEA</li>
<li>
PRINT (3, HQ) FILEA</li>
<li>
PRINT FILEA -3, HQ</li>
</ul>
<p>to produce 3 copies of FILEA on the printer in the headquarters building.</p>
<p>Error rates and the need for extensive training increase with the number of possible options.</p>
<h3>
Hierarchical command structure</h3>
<p>The full set of commands is organized into a tree structure, e.g.:</p>
<table border="1" cellpadding="0" style="width:450px;" width="450">
<tbody>
<tr>
<td style="width:33.0%;height:17px;">
<p> <strong>Action</strong></p>
</td>
<td style="width:33.0%;height:17px;">
<p><strong>Object</strong></p>
</td>
<td style="width:34.0%;height:17px;">
<p><strong>Destination</strong></p>
</td>
</tr>
<tr>
<td style="width:33.0%;height:17px;">
<p> CREATE</p>
</td>
<td style="width:33.0%;height:17px;">
<p> File</p>
</td>
<td style="width:34.0%;height:17px;">
<p> File</p>
</td>
</tr>
<tr>
<td style="width:33.0%;height:17px;">
<p> DISPLAY</p>
</td>
<td style="width:33.0%;height:17px;">
<p> Process</p>
</td>
<td style="width:34.0%;height:17px;">
<p> Local printer</p>
</td>
</tr>
<tr>
<td style="width:33.0%;height:17px;">
<p> REMOVE</p>
</td>
<td style="width:33.0%;height:17px;">
<p> Directory</p>
</td>
<td style="width:34.0%;height:17px;">
<p> Screen</p>
</td>
</tr>
<tr>
<td style="width:33.0%;height:17px;">
<p> COPY</p>
</td>
<td style="width:33.0%;height:17px;">
<p> </p>
</td>
<td style="width:34.0%;height:17px;">
<p> Remote printer</p>
</td>
</tr>
<tr>
<td style="width:33.0%;height:17px;">
<p> MOVE</p>
</td>
<td style="width:33.0%;height:17px;">
<p> </p>
</td>
<td style="width:34.0%;height:17px;">
<p> </p>
</td>
</tr>
</tbody>
</table>
<p> </p>
<h3>
8.4 The Benefits of Structure</h3>
<p>Human learning, problem solving, and memory are greatly facilitated by meaningful structure.</p>
<p>Beneficial for</p>
<ul>
<li>
task concepts</li>
<li>
computer concepts</li>
<li>
syntactic details of command languages</li>
</ul>
<h3>
Consistent Argument Ordering</h3>
<table border="0" cellpadding="0" cellspacing="15">
<tbody>
<tr>
<td colspan="2">
<p align="center"><strong>Inconsistent order of arguments</strong></p>
</td>
<td colspan="2">
<p align="center"><strong>Consistent order of arguments</strong></p>
</td>
</tr>
<tr>
<td>
<p>SEARCH</p>
</td>
<td>
<p>file no, message id</p>
</td>
<td>
<p>SEARCH</p>
</td>
<td>
<p>message id, file no</p>
</td>
</tr>
<tr>
<td>
<p>TRIM</p>
</td>
<td>
<p>message id, segment size</p>
</td>
<td>
<p>TRIM</p>
</td>
<td>
<p>message id, segment size</p>
</td>
</tr>
<tr>
<td>
<p>REPLACE</p>
</td>
<td>
<p>message id, code no</p>
</td>
<td>
<p>REPLACE</p>
</td>
<td>
<p>message id, code no</p>
</td>
</tr>
<tr>
<td>
<p>INVERT</p>
</td>
<td>
<p>group size, message id</p>
</td>
<td>
<p>INVERT</p>
</td>
<td>
<p>message id, group size</p>
</td>
</tr>
</tbody>
</table>
<p> </p>
<h3>
8.4.2 Symbols Versus Keywords</h3>
<p>Command structure affects performance.</p>
<table border="0" cellpadding="0" cellspacing="20">
<tbody>
<tr>
<td>
<p align="center"><strong>Symbol Editor</strong></p>
</td>
<td>
<p align="center"><strong>Keyword Editor</strong></p>
</td>
</tr>
<tr>
<td>
<p><tt>FIND:/TOOTH/;-1</tt></p>
</td>
<td>
<p><tt>BACKWARD TO "TOOTH"</tt></p>
</td>
</tr>
<tr>
<td>
<p><tt>LIST;10</tt></p>
</td>
<td>
<p><tt>LIST 10 LINES</tt></p>
</td>
</tr>
<tr>
<td>
<p><tt>RS:/KO/,/OK/;*</tt></p>
</td>
<td>
<p><tt>CHANGE ALL "KO" TO "OK"</tt></p>
</td>
</tr>
</tbody>
</table>
<p> </p>
<h2>
8.4.3 Hierarchical Structure and Congruence</h2>
<ul>
<li>
Positional consistency</li>
<li>
Grammatical consistency</li>
<li>
Congruent pairing</li>
<li>
Hierarchical form</li>
</ul>
<h2>
8.5 Naming and Abbreviations</h2>
<p>There is often a lack of consistency or obvious strategy for construction of command abbreviations.</p>
<h3>
Specificity Versus Generality</h3>
<table border="0" cellpadding="0" cellspacing="20">
<tbody>
<tr>
<td>
<p>Infrequent, discriminating words</p>
</td>
<td>
<p>insert</p>
</td>
<td>
<p>delete</p>
</td>
</tr>
<tr>
<td>
<p>Frequent, discriminating words</p>
</td>
<td>
<p>add</p>
</td>
<td>
<p>remove</p>
</td>
</tr>
<tr>
<td>
<p>Infrequent, nondiscriminating words</p>
</td>
<td>
<p>amble</p>
</td>
<td>
<p>perceive</p>
</td>
</tr>
<tr>
<td>
<p>Frequent, nondiscriminating words</p>
</td>
<td>
<p>walk</p>
</td>
<td>
<p>view</p>
</td>
</tr>
<tr>
<td>
<p>General words (frequent, nondiscriminating)</p>
</td>
<td>
<p>alter</p>
</td>
<td>
<p>correct</p>
</td>
</tr>
<tr>
<td>
<p>Nondiscriminating nonwords (nonsense)</p>
</td>
<td>
<p>GAC</p>
</td>
<td>
<p>MIK</p>
</td>
</tr>
<tr>
<td>
<p>Discriminating nonwords (icons)</p>
</td>
<td>
<p>abc-adbc</p>
</td>
<td>
<p>abc-ab</p>
</td>
</tr>
</tbody>
</table>
<p> </p>
<h2>
8.5.2 Six Potential Abbreviation Strategies</h2>
<ol>
<li>
<strong>Simple truncation:</strong> The first, second, third, etc. letters of each command.</li>
<li>
<strong>Vowel drop with simple truncation:</strong> Eliminate vowels and use some of what remains.</li>
<li>
<strong>First and last letter:</strong> Since the first and last letters are highly visible, use them.</li>
<li>
<strong>First letter of each word in a phrase:</strong> Use with a hierarchical design plan.</li>
<li>
<strong>Standard abbreviations from other contexts:</strong> Use familiar abbreviations.</li>
<li>
<strong>Phonics:</strong> Focus attention on the sound.</li>
</ol>
<br clear="all" />
<h1 align="center">
Chapter 9: Interaction Devices</h1>
<div align="center">
<hr align="center" size="2" width="100%" />
</div>
<h2>
9.2 Keyboard Layouts</h2>
<h4>
QWERTY layout</h4>
<ul>
<li>
1870</li>
<li>
Christopher Latham Sholes</li>
<li>
good mechanical design and a clever placement of the letters that slowed down the users enough that key jamming was infrequent</li>
<li>
put frequently used letter pairs far apart, thereby increasing finger travel distances</li>
</ul>
<h4>
Dvorak layout</h4>
<ul>
<li>
1920</li>
<li>
reduces finger travel distances by at least one order of magnitude</li>
<li>
Acceptance has been slow despite the dedicated efforts of some devotees</li>
<li>
it takes about 1 week of regular typing to make the switch, but most users have been unwilling to invest the effort</li>
</ul>
<h4>
ABCDE style</h4>
<ul>
<li>
26 letters of the alphabet laid out in alphabetical order nontypists will find it easier to locate the keys</li>
</ul>
<h4>
Additional keyboard issues</h4>
<ul>
<li>
IBM PC keyboard was widely criticized because of the placement of a few keys
<ul>
<li>
backslash key where most typists expect SHIFT key</li>
<li>
placement of several special characters near the ENTER key</li>
</ul>
</li>
<li>
Number pad layout</li>
<li>
wrist and hand placement</li>
</ul>
<h4>
Keys</h4>
<ul>
<li>
1/2 inch square keys</li>
<li>
1/4 inch spacing between keys</li>
<li>
slight concave surface</li>
<li>
matte finish to reduce glare finger slippage</li>
<li>
40- to 125-gram force to activate</li>
<li>
3 to 5 millimeters displacement</li>
<li>
tactile and audible feedback important</li>
<li>
certain keys should be larger (e.g. ENTER, SHIFT, CTRL)</li>
<li>
some keys require state indicator, such as lowered position or light indicator (e.g. CAPS LOCK)</li>
<li>
key labels should be large, meaningful, permanent</li>
<li>
some "home" keys may have additional features, such as deeper cavity or small raised dot, to help user locate their fingers properly (caution - no standard for this)</li>
</ul>
<h4>
Function keys</h4>
<ul>
<li>
typically simply labeled F1, F2, etc, though some may also have meaningful labels, such as CUT, COPY, etc.</li>
<li>
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</li>
<li>
can reduce number of keystrokes and errors</li>
<li>
meaning of each key can change with each application</li>
<li>
placement on keyboard can affect efficient use</li>
<li>
special-purpose displays often embed function keys in monitor bezel</li>
<li>
lights next to keys used to indicate availability of the function, or on/off status</li>
<li>
frequent movement between keyboard home position and mouse or function keys can be disruptive to use</li>
<li>
alternative is to use closer keys (e.g. ALT or CTRL) and one letter to indicate special function</li>
</ul>
<h4>
Cursor movement keys</h4>
<ul>
<li>
up, down, left, right</li>
<li>
some keyboards also provide diagonals</li>
<li>
best layout is natural positions</li>
<li>
inverted-T positioning allows users to place their middle three fingers in a way that reduces hand and finger movement</li>
<li>
cross arrangement better for novices than linear or box</li>
<li>
typically include typamatic (auto-repeat) feature</li>
<li>
important for form-fillin and direct manipulation</li>
<li>
other movements may be performed with other keys, such as TAB, ENTER, HOME, etc.</li>
</ul>
<h2>
9.3 Pointing Devices</h2>
<p>Pointing devices are applicable in six types of interaction tasks:</p>
<p>1.<strong> Select:</strong></p>
<ul>
<li>
user chooses from a set of items.</li>
<li>
used for traditional menu selection, identification of a file in a directory, or marking of a part in an automobile design.</li>
</ul>
<p>2. <strong>Position:</strong></p>
<ul>
<li>
user chooses a point in a one-, two-, three-, or higher-dimensional space</li>
<li>
used to create a drawing, to place a new window, or to drag a block of text in a figure.</li>
</ul>
<p>3. <strong>Orient:</strong></p>
<ul>
<li>
user chooses a direction in a two-, three-, or higher-dimensional space.</li>
<li>
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.</li>
</ul>
<p>4.<strong> Path:</strong></p>
<ul>
<li>
user rapidly performs a series of position and orient operations.</li>
<li>
may be realized as a curving line in a drawing program, the instructions for a cloth cutting machine, or the route on a map.</li>
</ul>
<p>5. <strong>Quantify:</strong></p>
<ul>
<li>
user specifies a numeric value.</li>
<li>
usually a one-dimensional selection of integer or real values to set parameters, such as the page number in a document, the velocity of a ship, or the amplitude of a sound.</li>
</ul>
<p>6. <strong>Text:</strong></p>
<ul>
<li>
user enters, moves, and edits text in a two-dimensional space. The</li>
<li>
pointing device indicates the location of an insertion, deletion, or change.</li>
<li>
more elaborate tasks, such as centering; margin setting; font sizes; highlighting, such as boldface or underscore; and page layout.</li>
</ul>
<h3>
Direct-control pointing devices</h3>
<h4>
lightpen</h4>
<ul>
<li>
enabled users to point to a spot on a screen and to perform a select, position, or other task</li>
<li>
it allows direct control by pointing to a spot on the display</li>
<li>
incorporates a button for the user to press when the cursor is resting on the desired spot on the screen</li>
<li>
lightpen has three disadvantages: users' hands obscured part of the screen, users had to remove their hands from the keyboard, and users had to pick up the lightpen</li>
</ul>
<h4>
touchscreen</h4>
<ul>
<li>
allows direct control touches on the screen using a finger</li>
<li>
early designs were rightly criticized for causing fatigue, hand-obscuring-the-screen, hand-off-keyboard, imprecise pointing, and the eventual smudging of the display</li>
<li>
lift-off strategy enables users to point at a single pixel</li>
<li>
the users touch the surface</li>
<li>
then see a cursor that they can drag around on the display</li>
<li>
when the users are satisfied with the position, they lift their fingers off the display to activate</li>
<li>
can produce varied displays to suit the task</li>
<li>
are fabricated integrally with display surfaces</li>
</ul>
<h3>
Indirect pointing devices</h3>
<h4>
mouse</h4>
<ul>
<li>
the hand rests in a comfortable position, buttons on the mouse are easily pressed, even long motions can be rapid, and positioning can be precise</li>
</ul>
<h4>
trackball</h4>
<ul>
<li>
usually implemented as a rotating ball 1 to 6 inches in diameter that moves a cursor</li>
</ul>
<h4>
joystick</h4>
<ul>
<li>
are appealing for tracking purposes</li>
</ul>
<h4>
graphics tablet</h4>
<ul>
<li>
a touch-sensitive surface separate from the screen</li>
</ul>
<h4>
touchpad</h4>
<ul>
<li>
built-in near the keyboard offers the convenience and precision of a touchscreen while keeping the user's hand off the display surface</li>
</ul>
<h3>
Comparisons of pointing devices</h3>
<h4>
Human-factors variables</h4>
<ul>
<li>
speed of motion for short and long distances</li>
<li>
accuracy of positioning</li>
<li>
error rates</li>
<li>
learning time</li>
<li>
user satisfaction</li>
</ul>
<h4>
Other variables</h4>
<ul>
<li>
cost</li>
<li>
durability</li>
<li>
space requirements</li>
<li>
weight</li>
<li>
left- versus right-hand use</li>
<li>
likelihood to cause repetitive-strain injury</li>
<li>
compatibility with other systems</li>
</ul>
<h4>
Some results</h4>
<ul>
<li>
direct pointing devices faster, but less accurate</li>
<li>
graphics tablets are appealing when user can remain with device for long periods without switching to keyboard</li>
<li>
mouse is faster than isometric joystick</li>
<li>
for tasks that mix typing and pointing, cursor keys a faster and are preferred by users to a mouse</li>
<li>
muscular strain is low for cursor keys</li>
</ul>
<h3>
Fitts' Law</h3>
<ul>
<li>
Index of difficulty = log2 (2D / W)</li>
<li>
Time to point = C1 + C2 (index of difficulty)</li>
<li>
C1 and C2 and constants that depend on the device</li>
<li>
Index of difficulty is log2 (2*8/1) = log2(16) = 4 bits</li>
</ul>
<p>A three-component equation was thus more suited for the high-precision pointing task:</p>
<ul>
<li>
Time for precision pointing = C1 + C2 (index of difficulty) + C3 log2 (C4 / W)</li>
</ul>
<h2>
9.4 Speech Recognition, Digitization, and Generation</h2>
<p><br />
Speech recognition still does not match the fantasy of science fiction:</p>
<ul>
<li>
demands of user's working memory</li>
<li>
background noise problematic</li>
<li>
variations in user speech performance impacts effectiveness</li>
<li>
most useful in specific applications, such as to benefit handicapped users</li>
</ul>
<h3>
Discrete word recognition</h3>
<ul>
<li>
recognize individual words spoken by a specific person; can work with 90- to 98-percent reliability for 20 to 200 word vocabularies</li>
<li>
Speaker-dependent training, in which the user repeats the full vocabulary once or twice</li>
<li>
Speaker-independent systems are beginning to be reliable enough for certain commercial applications</li>
<li>
been successful in enabling bedridden, paralyzed, or otherwise disabled people to broaden the horizons of their life</li>
<li>
also useful in applications with at least one of the following conditions:
<ul>
<li>
speaker's hands are occupied</li>
<li>
mobility is required</li>
<li>
speaker's eyes are occupied</li>
<li>
harsh or cramped conditions preclude use of keyboard</li>
</ul>
</li>
<li>
voice-controlled editor versus keyboard editor</li>
<li>
lower task-completion rate</li>
<li>
lower error rate</li>
<li>
use can disrupt problem solving</li>
</ul>
<h2>
9.4 Speech Recognition, Digitization, and Generation</h2>
<p><br />
<strong>Continuous-speech recognition</strong></p>
<p>Not generally available:</p>
<ul>
<li>
difficulty in recognizing boundaries between spoken words</li>
<li>
normal speech patterns blur boundaries</li>
<li>
many potentially useful applications if perfected</li>
</ul>
<p><strong>Speech store and forward</strong></p>
<p>Voice mail users can</p>
<ul>
<li>
receive messages</li>
<li>
replay messages</li>
<li>
reply to caller</li>
<li>
forward messages to other users, delete messages</li>
<li>
archive messages</li>
</ul>
<p>Systems are low cost and reliable.</p>
<p> </p>
<h2>
9.4 Speech Recognition, Digitization, and Generation</h2>
<h4>
Speech Generation</h4>
<p>Michaelis and Wiggins (1982) suggest that speech generation is "frequently preferable" under these circumstances:</p>
<ul>
<li>
The message is simple.</li>
<li>
The message is short.</li>
<li>
The message will not be referred to later.</li>
<li>
The message deals with events in time.</li>
<li>
The message requires an immediate response.</li>
<li>
The visual channels of communication are overloaded.</li>
<li>
The environment is too brightly lit, too poorly lit, subject to severe vibration, or otherwise unsuitable for transmission of visual information.</li>
<li>
The user must be free to move around.</li>
<li>
The user is subjected to high G forces or anoxia</li>
</ul>
<h3>
Audio tones, audiolization, and music</h3>
<p>Sound feedback can important:</p>
<ul>
<li>
to confirm actions</li>
<li>
offer warning</li>
<li>
for visually-impaired users</li>
<li>
music used to provide mood context, e.g. in games</li>
<li>
can provide unique opportunities for user, e.g. with simulating various musical instruments</li>
</ul>
<h2>
9.5 Image and Video Displays</h2>
<p>The visual display unit (VDU) has become the primary source of feedback to the user from the computer.</p>
<p>The VDU has many important features, including:</p>
<ul>
<li>
Rapid operation</li>
<li>
Reasonable size</li>
<li>
Reasonable resolution</li>
<li>
Quiet operation</li>
<li>
No paper waste</li>
<li>
Relatively low cost</li>
<li>
Reliability</li>
<li>
Highlighting</li>
<li>
Graphics and animation</li>
</ul>
<p>Possible health concerns:</p>
<ul>
<li>
visual fatigue</li>
<li>
stress</li>
<li>
radiation exposure</li>
</ul>
<h2>
Display devices</h2>
<p>monochrome displays</p>
<ul>
<li>
are adequate, and are attractive because of their lower cost</li>
</ul>
<p>RGB shadow-mask displays</p>
<ul>
<li>
small dots of red, green, and blue phosphors packed closely</li>
</ul>
<p>Raster-scan cathode-ray tube (CRT)</p>
<ul>
<li>
electron beam sweeping out lines of dots to form letters</li>
<li>
refresh rates 30 to 70 per second</li>
</ul>
<p>Liquid-crystal displays (LCDs)</p>
<ul>
<li>
voltage changes influence the polarization of tiny capsules of liquid crystals</li>
<li>
flicker-free</li>
<li>
size of the capsules limits the resolution</li>
</ul>
<p>Plasma panel</p>
<ul>
<li>
rows of horizontal wires are slightly separated from vertical wires by small glass-enclosed capsules of neon-based gases</li>
</ul>
<p>Light-emitting diodes (LEDs)</p>
<ul>
<li>
certain diodes emit light when a voltage is applied</li>
<li>
arrays of these small diodes can be assembled to display characters</li>
</ul>
<h2>
Display devices</h2>
<p>The technology employed affects these display attributes:</p>
<ul>
<li>
Size</li>
<li>
Refresh rate</li>
<li>
Capacity to show animation</li>
<li>
Resolution</li>
<li>
Surface flatness</li>
<li>
Surface glare from reflected light</li>
<li>
Contrast between characters and background</li>
<li>
Brightness</li>
<li>
Flicker</li>
<li>
Line sharpness</li>
<li>
Character formation</li>
<li>
Tolerance for vibration</li>
</ul>
<h2>
Display devices</h2>
<p>Each display technology has advantages and disadvantages with respect to these attributes. Users should expect these features:</p>
<ul>
<li>
User control of contrast and brightness</li>
<li>
Software highlighting of characters by brightness</li>
<li>
Underscoring, reverse video, blinking (possibly at several rates)</li>
<li>
Character set (alphabetic, numeric, special and foreign characters)</li>
<li>
Multiple type styles (for example, italic, bold) and fonts</li>
<li>
Shape, size, and blinking rate of the cursor</li>
<li>
User control of cursor shape, blinking, and brightness</li>
<li>
Scrolling mechanism (smooth scrolling is preferred)</li>
<li>
User control of number of lines or characters per line displayed</li>
<li>
Support of negative and positive polarity (light on dark or dark on light)</li>
</ul>
<h3>
Digital photography and scanners</h3>
<ul>
<li>
Many name-brand suppliers (e.g. Sony, Kodak, Nikon, Canon)</li>
<li>
Downloadable to PCs</li>
<li>
Can obtain PhotoCD from standard 35-mm slides</li>
<li>
Scanners have dropped significantly in price</li>
<li>
High-resolution color scanners now available for reasonable price</li>
<li>
Optical Character Recognition (OCR) software also available</li>
</ul>
<h3>
Digital video</h3>
<ul>
<li>
12-inch videodisks store up to 54,000 still images or 30 minutes of motion video</li>
<li>
widely used for
<ul>
<li>
museums</li>
<li>
travel facilities</li>
<li>
education</li>
<li>
industrial training</li>
</ul>
</li>
<li>
CD-ROMs can provide up to</li>
<li>
600 megabytes of textual or numeric data</li>
<li>
6000 graphic images</li>
<li>
1 hour of music</li>
<li>
6 to 72 minutes of motion video (depending on quality)</li>
<li>
MPEG video cameras now available</li>
</ul>
<h3>
Projectors, heads-up displays, helmet-mounted displays</h3>
<h2>
9.6 Printers</h2>
<p>These are the important criteria for printers:</p>
<ul>
<li>
Speed</li>
<li>
Print quality</li>
<li>
Cost</li>
<li>
Compactness</li>
<li>
Quiet operation</li>
<li>
Use of ordinary paper (fanfolded or single sheet)</li>
<li>
Character set</li>
<li>
Variety of typefaces, fonts, and sizes</li>
<li>
Highlighting techniques (boldface, underscore, and so on)</li>
<li>
Support for special forms (printed forms, different lengths, and so on)</li>
<li>
Reliability</li>
</ul>
<h4>
dot-matrix printers</h4>
<ul>
<li>
print more than 200 characters per second, have multiple fonts, can print boldface, use variable width and size, and have graphics capabilities</li>
</ul>
<h4>
inkjet printers</h4>
<ul>
<li>
offer quiet operation and high-quality output</li>
</ul>
<h4>
thermal printers or fax machines</h4>
<ul>
<li>
offer quiet, compact, and inexpensive output on specially coated papers</li>
</ul>
<h4>
laser printers</h4>
<ul>
<li>
operate at 30,000 lines per minute</li>
</ul>
<h4>
color printers</h4>
<ul>
<li>
allow users to produce hardcopy output of color graphics, usually by an inkjet approach with three colored and black inks</li>
</ul>
<h4>
photographic printers</h4>
<ul>
<li>
allow the creation of 35-millimeter or larger slides (transparencies) and photographic prints</li>
</ul>
<br clear="all" />
<h2 align="center">
Chapter 10: Response Time and Display Rate</h2>
<div align="center">
<hr align="center" size="2" width="100%" />
</div>
<h3>
10.1 Introduction</h3>
<ul>
<li>
Time is precious
<ul>
<li>
Lengthy or unexpected system response time can produce:
<ul>
<li>
Frustration</li>
<li>
Annoyance</li>
<li>
Eventual anger</li>
</ul>
</li>
<li>
Speedy and quickly done work can result in users:</li>
<li>
learning less</li>
<li>
reading with lower comprehension</li>
<li>
making more ill-considered decisions</li>
<li>
committing more data-entry errors</li>
</ul>
</li>
</ul>
<p><strong>Response Time</strong></p>
<ul>
<li>
The number of seconds it takes from the moment users initiate an activity until the computer presents results on the display</li>
</ul>
<p><strong>User think time</strong></p>
<ul>
<li>
The number of seconds the user thinks before entering the next action</li>
</ul>
<p>Designers of response times and display rates in HCI must consider:</p>
<ul>
<li>
complex interaction of technical feasibility</li>
<li>
cost</li>
<li>
task complexity</li>
<li>
user expectations</li>
<li>
speed of task performance</li>
<li>
error rates</li>
<li>
error handling procedures</li>
</ul>
<p>Overall majority of users prefer rapid interactions</p>
<ul>
<li>
Lengthy response times (15 seconds) are detrimental to productivity</li>
<li>
Rapid response times (1 second or less) are preferable, but can increase errors for complex tasks</li>
</ul>
<p>Display Rate</p>
<ul>
<li>
Alphanumeric displays: The speed in characters per second at which characters appear for the user to read</li>
<li>
World Wide Web Applications: Display rate may be limited by network transmission speed or server performance</li>
</ul>
<p>Reading textual information from a screen is a challenging cognitive and perceptual task</p>
<ul>
<li>
Users relax when the screen fills instantly- beyond a speed where someone may feel compelled to keep up</li>
</ul>
<h3>
10.2 Theoretical foundations</h3>
<ul>
<li>
Cognitive model of the human performance would be useful for:
<ul>
<li>
making predictions</li>
<li>
designing systems</li>
<li>
formulating management policies</li>
</ul>
</li>
</ul>
<h3>
Limitations of short-term and working memory</h3>
<ul>
<li>
Any cognitive model must emerge from an understanding of human problem-solving abilities</li>
<li>
Magic number seven - plus or minus two
<ul>
<li>
The average person can rapidly recognize seven chunks of information at a time</li>
<li>
This information can be held for 15 to 30 seconds in short-term memory</li>
<li>
Size of the chunks depends on the person' s familiarity with the material</li>
</ul>
</li>
<li>
Short-term memory and working memory are used in conjunction for processing information and problem solving</li>
<li>
Short-term memory processes perceptual input</li>
<li>
Working memory generates and implements solutions</li>
<li>
People learn to cope with complex problems by developing higher-level concepts using several lower-level concepts brought together into a single chunk</li>
<li>
Disruptions cause loss of memory</li>
<li>
Delays require that memory be refreshed</li>
<li>
Short term and working memory are highly volatile</li>
</ul>
<h3>
Source of errors</h3>
<ul>
<li>
Solutions to problems must be recorded to memory or implemented
<ul>
<li>
Chance of error increases when solutions are recorded</li>
</ul>
</li>
<li>
When using an interactive computer system users may formulate plans and have to wait for execution time of each step</li>
<li>
Long (1976) found unskilled and skilled typists worked more slowly and made more errors with longer response times</li>
<li>
For a given user and task, there is a preferred response time</li>
</ul>
<p> </p>
<p> </p>
<p>Conditions for optimum problem solving</p>
<ul>
<li>
Longer response time causes uneasiness in the user because the penalty for error increases</li>
<li>
Shorter response time may cause the user to fail to comprehend the presented materials</li>
<li>
Progress indicators shorten perceived elapsed time and heighten satisfaction:
<ul>
<li>
graphical indicators</li>
<li>
Blinking messages</li>
<li>
numeric seconds left for completion</li>
</ul>
</li>
<li>
Rapid task performance, low error rates, and high satisfaction can come from:</li>
<li>
Users have adequate knowledge of the objects and actions necessary for the problem-solving task</li>
<li>
The solution plan can be carries out without delays</li>
<li>
Distractions are eliminated</li>
<li>
User anxiety is low</li>
<li>
There is feedback about progress toward solution</li>
<li>
Errors can be avoided or handled easily</li>
<li>
Novices may exhibit better performance with slower response time</li>
<li>
Novices prefer to work at slower speeds</li>
<li>
With little penalty for an error, users prefer to work more quickly</li>
<li>
When the task is familiar and easily comprehended, users prefer more rapid action</li>
<li>
If users have experienced rapid performance previously, they will expect in future situations</li>
<li>
Other conjectures in choosing the optimum interaction speed</li>
</ul>
<h3>
10.3 Expectations and Attitudes</h3>
<ul>
<li>
Related design issues may clarify the question of acceptance response time</li>
<li>
Users have adapted a working style and expectation based on responses within a fraction of a second</li>
</ul>
<p><strong>Response-time choke</strong></p>
<ul>
<li>
Allows a system to be slowed down when the load is light</li>
<li>
Makes the response time more uniform over time and across users</li>
</ul>
<p><strong>Three things influence response-time:</strong></p>
<ul>
<li>
Previous experiences</li>
<li>
The individual's tolerance for delays</li>
<li>
Task complexity</li>
</ul>
<h3>
10.4 User Productivity</h3>
<h3>
Repetitive tasks</h3>
<ul>
<li>
Nature of the task has a strong influence on whether changes in response time alter user productivity</li>
<li>
Goodman and Spence (1981)</li>
</ul>
<h3>
Problem solving tasks</h3>
<ul>
<li>
Users will adapt their work style to the response time</li>
<li>
Users will change their work habits as the response time changes</li>
<li>
Barber and Lucas (1983)</li>
</ul>
<h3>
Programming task</h3>
<ul>
<li>
Several studies have been conducted to measure the affect of response-time changes on programmer productivity</li>
<li>
Dannenbring (1983)</li>
</ul>
<h3>
Summary</h3>
<ul>
<li>
Users pick up the pace of the system to work more quickly with shorter response time</li>
<li>
Higher throughput of work demands more attention must be paid to minimizing the cost of delay of error recovery</li>
</ul>
<h3>
10.5 Variability</h3>
<ul>
<li>
People are willing to pay substantial amounts of money to reduce the variability in their life</li>
<li>
Users are capable of adapting to varying situations</li>
<li>
Goodman and Spence (1981)
<ul>
<li>
Subjects took more advantage of fast response time by making their subsequent commands immediately and balancing the time lost in waiting for slower responses</li>
</ul>
</li>
<li>
Modest variations in response time (plus or minus 50% of the mean) appear to be tolerable</li>
<li>
It may be useful to slow down unexpected fast responses</li>
</ul>
<br clear="all" />
<h2 align="center">
Chapter 11. Presentation Styles: Balancing Function and Fashion</h2>
<div align="center">
<hr align="center" size="2" width="100%" />
</div>
<h3>
11.2 Error Messages</h3>
<p>Phrasing of error messages or diagnostic warnings is critical, especially when dealing with novices.</p>
<h4>
Avoid</h4>
<ul>
<li>
imperious tone that condemns user</li>
<li>
messages that are too generic (e.g. WHAT? or SYNTAX ERROR)</li>
<li>
messages that are too obscure (e.g. FAC RJCT 004004400400)</li>
</ul>
<h4>
Specificity</h4>
<table border="1" cellpadding="0" style="width:450px;" width="450">
<tbody>
<tr>
<td style="width:50.0%;height:17px;">
<p> <strong>Poor</strong></p>
</td>
<td style="width:50.0%;height:17px;">
<p><strong>Better</strong></p>
</td>
</tr>
<tr>
<td style="width:50.0%;height:17px;">
<p> SYNTAX ERROR</p>
</td>
<td style="width:50.0%;height:17px;">
<p>Unmatched left parenthesis</p>
</td>
</tr>
<tr>
<td style="width:50.0%;height:17px;">
<p>ILLEGAL ENTRY</p>
</td>
<td style="width:50.0%;height:17px;">
<p> Type first letter: <strong>S</strong>end, <strong>R</strong>ead, or <strong>D</strong>rop</p>
</td>
</tr>
<tr>
<td style="width:50.0%;height:17px;">
<p> INVALID DATA</p>
</td>
<td style="width:50.0%;height:17px;">
<p> Days range from 1 to 31</p>
</td>
</tr>
<tr>
<td style="width:50.0%;height:17px;">
<p> BAD FILE NAME</p>
</td>
<td style="width:50.0%;height:17px;">
<p> File names must begin with a letter</p>
</td>
</tr>
</tbody>
</table>
<p> </p>
<h3>
11.2 Error Messages</h3>
<h4>
Constructive guidance and positive tone</h4>
<table border="1" cellpadding="0" style="width:450px;" width="450">
<tbody>
<tr>
<td style="width:50.0%;">
<p> <strong>Poor</strong></p>
</td>
<td style="width:50.0%;">
<p> <strong>Better</strong></p>
</td>
</tr>
<tr>
<td style="width:50.0%;">
<p> DISASTROUS STRING OVERFLOW. JOB ABANDONED.</p>
</td>
<td style="width:50.0%;">
<p> String space consumed. Revise program to use shorter strings or expand string space.</p>
</td>
</tr>
<tr>
<td style="width:50.0%;">
<p> UNDEFINED LABELS</p>
</td>
<td style="width:50.0%;">
<p> Define statement labels before use</p>
</td>
</tr>
<tr>
<td style="width:50.0%;">
<p> ILLEGAL STA. WRN.</p>
</td>
<td style="width:50.0%;">
<p> RETURN statement cannot be used in a FUNCTION subprogram.</p>
</td>
</tr>
</tbody>
</table>
<p>Unnecessarily hostile messages using violent terminology can disturb nontechnical users:</p>
<ul>
<li>
FATAL ERROR, RUN ABORTED</li>
<li>
CATASTROPHIC ERROR; LOGGED WITH OPERATOR</li>
<li>
negative terms such as ILLEGAL, ERROR, INVALID, BAD</li>
</ul>
<h4>
User-centered phrasing</h4>
<p>Suggests user controls system:</p>
<ul>
<li>
messages should avoid imperative forms, should focus on user control</li>
<li>
user should have control over amount of information system provides</li>
<li>
context-sensitive HELP important</li>
</ul>
<h3>
11.2 Error Messages</h3>
<h4>
Appropriate physical layout</h4>
<ul>
<li>
use uppercase-only messages for brief, serious warnings</li>
<li>
avoid code numbers; if required, include at end of message</li>
<li>
location of message could be
<ul>
<li>
near where problem arose</li>
<li>
placed in consistent position on bottom of screen</li>
<li>
pop-up dialog box in center of screen</li>
</ul>
</li>
<li>
audio signals useful, but can be embarrassing - place under user control</li>
</ul>
<h4>
Development of effective messages</h4>
<p>Recommendations</p>
<ul>
<li>
Increase attention to message design</li>
<li>
Establish quality control</li>
<li>
Develop guidelines
<ul>
<li>
Have a positive tone</li>
<li>
Be specific and address the problem in the user's terms</li>
<li>
Place the users in control of the situation</li>
<li>
Have a neat, consistent, and comprehensible format</li>
</ul>
</li>
<li>
Carry out usability test</li>
<li>
Collect user performance data</li>
</ul>
<h3>
11.3 Nonanthropomorphic Design</h3>
<p><strong>Concerns</strong></p>
<ul>
<li>
attributions of intelligence, autonomy, free will, etc can deceive, confuse, and mislead users</li>
<li>
important to clarify differences between people and computers</li>
<li>
although attractive to some people, an anthropomorphic interface can produce anxiety in others</li>
<li>
Mumford's obstacle of animism</li>
<li>
studies strongly suggest superiority of nonanthropomorphic systems</li>
</ul>
<h4>
Guidelines</h4>
<ul>
<li>
Avoid presenting computers as people.</li>
<li>
Choose appropriate humans for introductions or guides.</li>
<li>
Use caution in designing computer-generated human faces or cartoon characters.</li>
<li>
Design comprehensible, predictable, and controllable interfaces.</li>
<li>
Provide user-centered overviews for orientation and closure.</li>
<li>
Do not use 'I' pronouns when the computer responds to human actions.</li>
<li>
Use "you" to guide users, or just state facts.</li>
</ul>
<h3>
11.4 Display Design</h3>
<p>Mullet and Sano's categories of design principles:</p>
<ul>
<li>
Elegance and Simplicity: unity, refinement and fitness</li>
<li>
Scale, Contrast, and Proportion: clarity, harmony, activity, and restraint</li>
<li>
Organization and Visual Structure: grouping, hierarchy, relationship, and balance</li>
<li>
Module and Program: focus, flexibility, and consistent application</li>
<li>
Image and Representation: immediacy, generality, cohesiveness, and characterization</li>
<li>
Style: distinctiveness, integrity, comprehensiveness, and appropriateness</li>
</ul>
<h4>
Field layout</h4>
<ul>
<li>
Blanks and separate lines can distinguish fields.</li>
<li>
Names in chronological order, alignment of dates, familiar date separators.</li>
<li>
Labels are helpful for all but frequent users.</li>
<li>
Distinguish labels from data with case, boldfacing, etc.</li>
<li>
If boxes are available they can be used to make a more appealing display, but they consume screen space.</li>
</ul>
<h3>
11.4 Display Design</h3>
<h4>
Empirical results</h4>
<ul>
<li>
structured form superior to narrative form</li>
<li>
improving data labels, clustering related information, using appropriate indentation and underlining, aligning numeric values, and eliminating extraneous characters improves performance</li>
<li>
performance times improve with fewer, denser displays in expert users</li>
<li>
screen contents should contain only task-relevant information</li>
<li>
consistent location, structure, and terminology across displays important</li>
<li>
sequences of displays should be similar throughout the system for similar tasks</li>
</ul>
<h4>
Display-complexity metrics</h4>
<p>Tullis developed four task-independent metrics for alphanumeric displays:</p>
<ul>
<li>
Overall Density</li>
<li>
Local Density</li>
<li>
Grouping</li>
<li>
Layout Complexity</li>
</ul>
<p>Sears' <em>layout appropriateness</em> metric.</p>
<p> </p>
<h3>
11.5 Color</h3>
<p><strong>Color can</strong></p>
<ul>
<li>
Soothe or strike the eye</li>
<li>
Add accents to an uninteresting display</li>
<li>
Facilitate subtle discriminations in complex displays</li>
<li>
Emphasize the logical organization of information</li>
<li>
Draw attention to warnings</li>
<li>
Evoke string emotional reactions of joy, excitement, fear, or anger</li>
</ul>
<p><strong>Guidelines</strong></p>
<ul>
<li>
Use color conservatively</li>
<li>
Limit the number and amount of colors</li>
<li>
Recognize the power of color to speed or slow tasks</li>
<li>
Color coding should support the task</li>
<li>
Color coding should appear with minimal user effort</li>
<li>
Color coding should be under user control</li>
<li>
Design for monochrome first</li>
<li>
Color can help in formatting</li>
<li>
Be consistent in color coding</li>
<li>
Be alert to common expectations about color codes</li>
<li>
Use color changes to indicate status changes</li>
<li>
Use color in graphic displays for greater information density</li>
</ul>
<br clear="all" />
<h2 align="center">
Chapter 12. Printed Manuals, Online Help, and Tutorials</h2>
<div align="center">
<hr align="center" size="2" width="100%" />
</div>
<h3>
12.1 Introduction</h3>
<h4>
Forms of paper user manuals:</h4>
<ul>
<li>
Brief getting-started notes</li>
<li>
Introductory tutorial</li>
<li>
Thorough tutorial</li>
<li>
Quick reference card</li>
<li>
Conversation manual</li>
<li>
Detailed reference manual</li>
</ul>
<h4>
Online materials</h4>
<ul>
<li>
User manual</li>
<li>
Help facility</li>
<li>
Tutorials</li>
<li>
Demonstrations</li>
</ul>
<h4>
One way to classify paper and online materials (Duffy):</h4>
<table border="1" cellpadding="0" style="width:450px;" width="450">
<tbody>
<tr>
<td style="width:33.0%;">
<p><strong> User's Goal</strong></p>
</td>
<td style="width:67.0%;">
<p align="center"><strong>Medium of Delivery</strong></p>
</td>
</tr>
</tbody>
</table>
<p> </p>
<table border="1" cellpadding="0" style="width:450px;" width="450">
<tbody>
<tr>
<td style="width:33.0%;height:17px;">
<p> </p>
</td>
<td style="width:33.0%;height:17px;">
<p> <em>Paper</em></p>
</td>
<td style="width:34.0%;height:17px;">
<p> <em>Online</em></p>
</td>
</tr>
<tr>
<td style="width:33.0%;height:17px;">
<p> I want to <em>buy</em> it.</p>
</td>
<td style="width:33.0%;height:17px;">
<p> sales brochure, fact sheet</p>
</td>
<td style="width:34.0%;height:17px;">
<p>demonstration program</p>
</td>
</tr>
<tr>
<td style="width:33.0%;height:17px;">
<p> I want to <em>learn</em> it.</p>
</td>
<td style="width:33.0%;height:17px;">
<p> tutorial manual</p>
</td>
<td style="width:34.0%;height:17px;">
<p>guided tour</p>
</td>
</tr>
<tr>
<td style="width:33.0%;height:17px;">
<p> I want to <em>use</em> it.</p>
</td>
<td style="width:33.0%;height:17px;">
<p> user's manual</p>
</td>
<td style="width:34.0%;height:17px;">
<p>online help, online document</p>
</td>
</tr>
</tbody>
</table>
<p> </p>
<h3>
12.2 Reading from Paper versus from Displays</h3>
<h4>
Potential Disadvantages to Reading from Displays</h4>
<ul>
<li>
Poor fonts, especially on low resolution displays</li>
<li>
Low contrast between characters and the background</li>
<li>
Fuzzy character boundaries</li>
<li>
Emitted light from displays may be more difficult to read by than reflected light from paper</li>
<li>
Glare may be greater on displays</li>
<li>
Screen flicker can be a problem</li>
<li>
Curved display surface may be problem</li>
<li>
Small displays require more frequent page turning</li>
<li>
Reading distance can be greater than for paper</li>
<li>
Displays are fixed in place</li>
<li>
Display placement may be too high for comfortable reading</li>
<li>
Layout and formatting problems</li>
<li>
Reduced hand and body motions with displays as compared to paper may be fatiguing</li>
<li>
Rigid posture for displays may also be fatiguing</li>
<li>
Unfamiliarity of displays and the anxiety that the image may disappear can increase stress</li>
</ul>
<h3>
12.3 Preparation of Printed Manuals</h3>
<p>Traditionally, training and reference material often written by junior member of development team</p>
<ul>
<li>
manuals were often poorly written</li>
<li>
were not suited to the background of the users</li>
<li>
were delayed or incomplete</li>
<li>
were not tested adequately</li>
</ul>
<p>Foss, Rosson, Smith experiments on manuals:</p>
<table border="1" cellpadding="0" style="width:450px;" width="450">
<tbody>
<tr>
<td style="width:50.0%;">
<p align="center"><strong> Standard Manual</strong></p>
</td>
<td style="width:50.0%;">
<p align="center"><strong>Modified Manual</strong></p>
</td>
</tr>
<tr>
<td style="width:50.0%;">
<p> all command details presented at once</p>
</td>
<td style="width:50.0%;">
<p>spiral approach presenting subsets of concepts</p>
</td>
</tr>
<tr>
<td style="width:50.0%;">
<p> abstract formal notation to present syntax</p>
</td>
<td style="width:50.0%;">
<p>showed numerous examples of syntax</p>
</td>
</tr>
<tr>
<td style="width:50.0%;">
<p> used terse technical prose</p>
</td>
<td style="width:50.0%;">
<p>used readable explanations with little jargon</p>
</td>
</tr>
</tbody>
</table>
<p>Sullivan and Chapanis used iterative process for refining a manual:</p>
<ul>
<li>
rewrote original manual</li>
<li>
conducted walk-through test with colleagues</li>
<li>
performed tests with secretaries</li>
</ul>
<p>Allwood and Kalen realized improvements by</p>
<ul>
<li>
keeping sentences short</li>
<li>
avoiding jargon</li>
<li>
using a new paragraph for each command</li>
<li>
emphasizing tasks, not syntax</li>
</ul>
<h4>
Use of OAI Model to design manuals</h4>
<p><strong>Introductory tutorial</strong></p>
<ul>
<li>
task training first</li>
<li>
learn the hierarchy of objects, from high level down to the atomic</li>
<li>
recognize the range of high-level intentions down to specific action steps</li>
<li>
learn about the interface representations
<ul>
<li>
start with familiar objects and actions</li>
<li>
link these concepts to high-level interface objects and actions</li>
<li>
show syntax needed to accomplish each task</li>
</ul>
</li>
</ul>
<p><strong>Conversion manual</strong></p>
<ul>
<li>
users knowledgeable about task domain, but unfamiliar with specific software</li>
<li>
need presentation showing relationship between metaphors and already known plans and the new ones required by the new software</li>
</ul>
<p><strong>Quick reference</strong></p>
<ul>
<li>
user knowledgeable about task and interface objects and actions</li>
<li>
needs details to convert their plans into detailed actions</li>
</ul>
<p><strong>Sample sessions</strong> extremely helpful in giving portrait of system features and interaction styles.</p>
<p><strong>Flow diagram</strong> provides visual overview that orients users to transitions from one activity to another.</p>
<h4>
Organization and writing style</h4>
<ul>
<li>
Precise statement of educational objectives</li>
<li>
Present concepts in a logical sequence with increasing order of difficulty</li>
<li>
Ensure that each concept is used in subsequent sections</li>
<li>
Avoid forward references</li>
<li>
Construct sections with approximately equal amounts of new material</li>
<li>
Need sufficient examples and complete sample sessions</li>
<li>
Choice of words and phrases important</li>
<li>
Writing style should match users' reading ability</li>
<li>
Learners prefer trying out commands online rather than just reading manual</li>
<li>
Minimal manuals encourage active involvement with hands-on experiences</li>
<li>
Carroll's <em>guided exploration</em>
<ul>
<li>
choose an action-oriented approach</li>
<li>
anchor the tool in the task domain</li>
<li>
support error recognition and recovery</li>
<li>
support reading to do, study, and locate</li>
</ul>
</li>
<li>
Show numerous well-chosen screen prints that demonstrate typical uses (<em>predictive model</em>)</li>
<li>
Table of contents and index required</li>
<li>
Glossaries for clarifying technical terms</li>
<li>
Appendices for error messages</li>
</ul>
<h4>
Nonanthropomorphic descriptions</h4>
<p>Metaphors used in describing computer systems can influence users' reactions.</p>
<ul>
<li>
Emphasize user's role, especially in introductory sections</li>
<li>
Choice of verbs when referring to computer important
<ul>
<li>
Avoid verbs such as know, think, understand, and have memory</li>
<li>
Use verbs such as process, print, compute, sort, store, search, retrieve</li>
</ul>
</li>
<li>
When describing what a user does with a computer</li>
<li>
Avoid ask, tell, speak to, communicate with</li>
<li>
Use terms such as use, direct, operate, program, control</li>
<li>
Better to eliminate reference to the computer and concentrate on what user is doing</li>
<li>
Focus on user's initiative, process, goals, and accomplishments</li>
</ul>
<h4>
Development process</h4>
<p><strong>Start early!</strong></p>
<ul>
<li>
allows adequate time for review, testing, and refinement</li>
<li>
manual can act as a more complete and comprehensible alternative to formal specifications</li>
<li>
Manual writer becomes effective critic, reviewer, or question asker</li>
<li>
Enables pilot testing of software's learnability</li>
<li>
Allows for reviews and suggestions by designers, etc.</li>
<li>
Informal walkthroughs with users possible</li>
<li>
Field trials with moderate numbers of users facilitated</li>
</ul>
<p><strong>Brockman's process for writing user documentation:</strong></p>
<ol>
<li>
Develop the document specifications:
<ul>
<li>
Use task orientation</li>
<li>
Use minimalist design</li>
<li>
Handle diverse audiences</li>
<li>
State the purpose</li>
<li>
Organize information and develop visualizations</li>
<li>
Consider layout and color</li>
</ul>
</li>
<li>
Prototype</li>
<li>
Draft</li>
<li>
Edit</li>
<li>
Review</li>
<li>
Field test</li>
<li>
Publish</li>
<li>
Perform postproject review</li>
<li>
Maintain</li>
</ol>
<h3>
12.4 Preparation of Online Facilities</h3>
<p><strong>Positive reasons for making manuals available online:</strong></p>
<ul>
<li>
Information is available whenever the computer is available</li>
<li>
Users do not need to allocate work space to opening up manuals</li>
<li>
Information can be electronically updated rapidly and at low cost</li>
<li>
Specific information necessary for a task can be located rapidly if the online manual offers electronic indexing or text searching</li>
<li>
Authors can use graphics, sound, color, and animations that may be helpful in explaining complex actions and creating an engaging experience</li>
</ul>
<p><strong>Potentially negative aspects of online manuals:</strong></p>
<ul>
<li>
Displays may not be as readable as printed materials.</li>
<li>
Displays may contain substantially less information than a sheet of paper.</li>
<li>
The rate of paging is slow compared to the rate of paging through a manual.</li>
<li>
The display resolution is lower than that of paper, which is especially important when pictures or graphics are used.</li>
<li>
The command language of help systems may be novel and confusing to novices.</li>
<li>
The extra mental effort required for navigating through many screens may interfere with concentration and learning.</li>
<li>
Splitting the display between work and help or tutorial windows, reduces the space for work displays.</li>
<li>
If users must switch to a separate application then the burden on the user's short-term memory can be large.</li>
<li>
Users lose their context of work and have difficulty remembering what they read in the online manual.</li>
</ul>
<p><strong>Advantages of online help facilities (Relles and Price):</strong></p>
<ul>
<li>
Successively more detailed explanations of a displayed error message</li>
<li>
Successively more detailed explanations of a displayed question or prompt</li>
<li>
Successive examples of correct input or valid commands</li>
<li>
Explanation or definition of a specified term</li>
<li>
A description of the format of a specified command</li>
<li>
A list of allowable commands</li>
<li>
A display of specified sections of documentation</li>
<li>
A description of the current value of various system parameters</li>
<li>
Instruction on the use of the system</li>
<li>
News of interest to users of the system</li>
<li>
A list of available user aids</li>
</ul>
<p><strong>Kearsley's guidelines for online help systems:</strong></p>
<ul>
<li>
Make the help system easy to access and easy to return from.</li>
<li>
Make help as specific as possible.</li>
<li>
Collect data to determine what help is needed.</li>
<li>
Give users as much control as possible over the help system.</li>
<li>
Make help messages accurate and complete.</li>
<li>
Do not use help to compensate for poor interface design.</li>
</ul>
<h4>
Online Manuals</h4>
<ul>
<li>
Reproduction of printed manuals online
<ul>
<li>
paper page layouts may not convert well</li>
<li>
dealing with figures problematic</li>
<li>
attractive if users have large enough display (full page)</li>
<li>
close match between printed and online versions useful</li>
</ul>
</li>
<li>
Enhanced by special online features</li>
<li>
string search</li>
<li>
multiple indices</li>
<li>
multiple tables of contents</li>
<li>
tables of figures</li>
<li>
electronic bookmarks</li>
<li>
electronic annotations</li>
<li>
hypertext traversal</li>
<li>
automatic history keeping</li>
<li>
multiple windows</li>
<li>
text highlighting</li>
<li>
color</li>
<li>
sound</li>
<li>
animation</li>
<li>
string search with relevance feedback</li>
<li>
Most effective if manuals redesigned to fit electronic medium to take advantage of</li>
<li>
Properly designed table of contents that can remain visible to side of text page vital</li>
<li>
Novices need tutorials</li>
<li>
Intermittent knowledgeable users can handle concise descriptions of interface syntax and semantics</li>
<li>
Keyword lists improved by clustering into meaningful categories</li>
</ul>
<p><strong>Types of help systems:</strong></p>
<ul>
<li>
User can set level of detail and kind of information they obtain from system</li>
<li>
Lists of help keystrokes or menu items</li>
<li>
Context-sensitive help</li>
<li>
Balloon help</li>
</ul>
<h4>
Online tutorials, demonstrations, and animations</h4>
<p>Online tutorials can be effective because the user (Al-Awar et al)</p>
<ul>
<li>
Does not have to keep shifting attention between the terminal and the instructional material</li>
<li>
Practices the skills needed to use the system</li>
<li>
Can work alone at an individual pace and without the embarrassment of mistakes made before a human instructor or fellow students</li>
</ul>
<p>Demonstration systems:</p>
<ul>
<li>
Distributed on disk, CD-ROM, or over Internet</li>
<li>
Designed to attract potential users</li>
<li>
Typically show off system features using animation, color graphics, sound, etc.</li>
<li>
User-interface requirements are to
<ul>
<li>
capture and maintain user interest</li>
<li>
convey information</li>
<li>
build positive product image</li>
</ul>
</li>
<li>
Typical controls</li>
<li>
automatic or manual pacing</li>
<li>
length of demonstration (short versus in-depth)</li>
<li>
stop</li>
<li>
replay</li>
<li>
skip</li>
</ul>
<h3>
Helpful Guides</h3>
<ul>
<li>
May be well-known personalities or cartoon figures to lead user through information</li>
<li>
Help networks using email
<ul>
<li>
sent to designated help desk or staff person</li>
<li>
sent to general list within organization</li>
<li>
users must publicly expose their lack of knowledge</li>
<li>
risk of getting incorrect advice</li>
</ul>
</li>
<li>
Frequently asked questions (FAQ) lists for newcomers</li>
</ul>
<br clear="all" />
<h2 align="center">
Chapter 13: Multiple-Window Strategies</h2>
<div align="center">
<hr align="center" size="2" width="100%" />
</div>
<h3>
13.1 Introduction</h3>
<ul>
<li>
Users need to consult multiple sources rapidly</li>
<li>
must minimally disrupt user's task</li>
<li>
With large displays, eye-head movement and visibility are problems</li>
<li>
With small displays, windows too small to be effective</li>
<li>
Need to offer users sufficient information and flexibility to accomplish task, while reducing <em>window housekeeping</em> actions, distracting clutter, eye-head movement
<ul>
<li>
opening, closing, moving, changing size</li>
<li>
time spent manipulating windows instead of on task</li>
</ul>
</li>
<li>
Can apply direct-manipulation strategy to windows</li>
<li>
Rooms - a form of window macro that enables users to specify actions on several windows at once</li>
</ul>
<h3>
13.2 Individual-Window Design</h3>
<ul>
<li>
Titles</li>
<li>
Borders or frames</li>
<li>
Scroll bars</li>
<li>
Window interface actions include:
<ul>
<li>
Open action</li>
<li>
Open place and size</li>
<li>
Close action</li>
<li>
Resize action</li>
<li>
Move action</li>
<li>
Bring forward or activation</li>
</ul>
</li>
</ul>
<h3>
13.3 Multiple-Window Design</h3>
<ul>
<li>
Multiple monitors</li>
<li>
Rapid display flipping</li>
<li>
split displays</li>
<li>
Fixed number, size, and place, and space-filling tiling</li>
<li>
Variable size, place, and number, and space-filling tiling</li>
<li>
Non-space-filling tiling</li>
<li>
piles-of-tiles</li>
<li>
Window zooming</li>
<li>
Arbitrary overlaps</li>
<li>
Cascades</li>
</ul>
<h3>
</h3>
<h3>
13.4 Coordination by Tightly Coupled Windows</h3>
<ul>
<li>
Synchronized scrolling</li>
<li>
Hierarchical browsing</li>
<li>
Direct selection</li>
<li>
Two-dimensional browsing</li>
<li>
Dependent-windows opening</li>
<li>
Dependent-windows closing</li>
<li>
Save or open window state</li>
</ul>
<h3>
13.5 Image Browsing and Tightly-coupled Windows</h3>
<p>The design for image browsers should be governed by the user's tasks which can be classified into:</p>
<ul>
<li>
Image generation</li>
<li>
Open-ended exploration</li>
<li>
Diagnostic</li>
<li>
Navigation</li>
<li>
Monitoring</li>
</ul>
<h3>
13.6 Personal Role Management and Elastic Windows</h3>
<ul>
<li>
Vision statement</li>
<li>
Set of people</li>
<li>
Task hierarchy</li>
<li>
Schedule</li>
<li>
The requirements for personal role management include:
<ul>
<li>
Support a unified framework for information organization according to users' roles</li>
<li>
Provide a visual, spatial layout that matches tasks</li>
<li>
Support multi-window actions for fast arrangement of information</li>
<li>
Support information access with partial knowledge of its nominal, spatial, temporal, and visual attributes and relationships to other pieces of information.</li>
<li>
Allow fast switching and resumption among roles</li>
<li>
Free user's cognitive resources to work on task domain actions rather than interface domain actions.</li>
<li>
Use screen space efficiently and productively for tasks.</li>
</ul>
</li>
</ul>
<br clear="all" />
<h2 align="center">
Chapter 14: Computer-Supported Cooperative Work</h2>
<div align="center">
<hr align="center" size="2" width="100%" />
</div>
<h3>
14.2 Goals of Cooperation</h3>
<ul>
<li>
Focused partnerships.</li>
<li>
Lecture or demo.</li>
<li>
Conference.</li>
<li>
Structured word process.</li>
<li>
Meeting and decision support.</li>
<li>
Tele-democracy.</li>
</ul>
<p><strong>Time-space matrix of cooperative systems (Ellis et al):</strong><br />
</p>
<table border="0" cellpadding="0">
<tbody>
<tr>
<td>
<p> </p>
</td>
<td>
<p align="center"><strong>Same Time</strong></p>
</td>
<td>
<p align="center"><strong>Different Times</strong></p>
</td>
</tr>
<tr>
<td>
<p><strong><em>Same Place</em></strong></p>
</td>
<td>
<p>face to face (classrooms, meeting rooms)</p>
</td>
<td>
<p>asynchronous interaction (project scheduling, coordination tools)</p>
</td>
</tr>
<tr>
<td>
<p><strong><em>Different places</em></strong></p>
</td>
<td>
<p>synchronous distributed (shared editors, video windows)</p>
</td>
<td>
<p>asynchronous distributed (email, listservs, conferences)</p>
</td>
</tr>
</tbody>
</table>
<p> </p>
<h3>
14.3 Asynchronous Interactions: Different Time, Different Place</h3>
<h4>
Electronic mail:</h4>
<ul>
<li>
can be too loosely structured</li>
<li>
sometimes overwhelming</li>
<li>
transient</li>
<li>
tools
<ul>
<li>
filtering</li>
<li>
archiving</li>
<li>
mailing lists</li>
<li>
discussion groups</li>
</ul>
</li>
<li>
typically text-only but increasingly includes other structured objects</li>
<li>
graphics</li>
<li>
sounds</li>
<li>
animations</li>
<li>
web pointers</li>
<li>
video</li>
<li>
voice mail</li>
<li>
electronic mail</li>
<li>
newsgroups</li>
<li>
telephone-call tracking</li>
<li>
status reporting</li>
<li>
text-database searching</li>
<li>
document sharing</li>
<li>
meeting scheduling</li>
<li>
other cooperation tools</li>
<li>
increased simplification</li>
<li>
improved training</li>
<li>
easier filtering</li>
<li>
lower-cost hardware and network services</li>
<li>
Lotus Notes integrates</li>
<li>
making e-mail universal requires</li>
</ul>
<h3>
14.3 Asynchronous Interactions: Different Time, Different Place</h3>
<h4>
Newsgroups and network communities:</h4>
<ul>
<li>
focused electronic discussions by group of people</li>
<li>
USENET newsgroups
<ul>
<li>
each group dedicated (more or less) to one topic</li>
<li>
like ordered posting on bulletin board</li>
<li>
users read as many previous notes and related comments as they wish</li>
<li>
open to all</li>
</ul>
</li>
<li>
listserv</li>
<li>
individual must subscribe to receive e-mail notices</li>
<li>
may be moderated by a leader</li>
<li>
may be mail reflector</li>
<li>
users can get flooded with listserv e-mails</li>
<li>
server machine keeps searchable archive or past notes and subscriber list</li>
<li>
in addition to listserv tools, may also include additional facilities
<ul>
<li>
voting</li>
<li>
online directories of users</li>
<li>
online directories of documents</li>
</ul>
</li>
<li>
online conference</li>
<li>
hackers</li>
<li>
hate groups</li>
<li>
para-military groups</li>
<li>
online magazines and newsletters</li>
<li>
network communities can be controversial</li>
</ul>
<h3>
14.4 Synchronous Distributed: Different Place, Same Time</h3>
<ul>
<li>
Synchronous distributed applications
<ul>
<li>
group editing</li>
<li>
shared screens for customer assistance</li>
<li>
give demonstrations simultaneously at multiple sites</li>
<li>
allow sharing of information for various applications</li>
<li>
interactive games</li>
<li>
CHAT, Internet Relay Chat (IRC), and TALK</li>
<li>
MUDs</li>
<li>
videoconferencing
<ul>
<li>
slow response times for entering and leaving session</li>
<li>
distracting background audio</li>
<li>
difficulty in determining who is speaking</li>
<li>
inadequate lighting</li>
<li>
difficulty in making eye contact</li>
<li>
changed social status</li>
<li>
small image size</li>
<li>
potential invasion of privacy</li>
<li>
need for convenient turn taking</li>
<li>
need for document sharing</li>
</ul>
</li>
</ul>
</li>
<li>
issues of ownership and control</li>
<li>
private and public workspaces</li>
<li>
identity of participants</li>
<li>
location of actions</li>
<li>
care with updating</li>
</ul>
<h3>
14.5 Face to Face: Same Place, Same Time</h3>
<p>Innovative approaches to work and learning include:</p>
<ul>
<li>
Shared display from lecturer workstation</li>
<li>
Audience response units</li>
<li>
Text-submission workstations</li>
<li>
Brainstorming, voting, and ranking. Benefits of electronic meeting systems:
<ul>
<li>
Parallel communication promotes broader input into the meeting process and reduces the chance that a few people dominate the meeting.</li>
<li>
Anonymity mitigates evaluation apprehension and conformance pressure, so that issues are discussed more candidly.</li>
<li>
The group memory constructed by participants enables them to pause and reflect on information and opinions of others during the meeting and serves as a permanent record of what occurred.</li>
<li>
Process structure helps focus the group on key issues and discourages irrelevant digressions and unproductive behaviors.</li>
<li>
Task support and structure provides information and approaches to analyze it.</li>
</ul>
</li>
<li>
File sharing</li>
<li>
Shared workspace</li>
<li>
Group activities</li>
</ul>
<h3>
</h3>
<h3>
</h3>
<h3>
14.6 Applying CSCW to Education</h3>
<p>Active individual learning experiences include using software during class time to:</p>
<ul>
<li>
Write essays in English or poems in a foreign language</li>
<li>
Find antecedents of Impressionism in an art history library of 9000 images</li>
<li>
Run business simulations to increase product quality</li>
<li>
Perform psychological statistical analyses</li>
<li>
Do landscaping with computer-assisted design and graphics packages</li>
<li>
Compose computer programs and search the Internet</li>
</ul>
<br clear="all" />
<h2 align="center">
Chapter 15: Information Search and Visualization</h2>
<div align="center">
<hr align="center" size="2" width="100%" />
</div>
<h3>
15.1 Introduction</h3>
<ul>
<li>
Information overload and anxiety common</li>
<li>
Developing more powerful search and visualization methods, integration of technology with task</li>
<li>
Terms:
<ul>
<li>
Information gathering</li>
<li>
Seeking</li>
<li>
Filtering</li>
<li>
Visualization</li>
</ul>
</li>
<li>
Traditional interfaces have been difficult for novice users</li>
<li>
Complex commands</li>
<li>
Boolean operators</li>
<li>
Unwieldy concepts</li>
<li>
Difficulty in repeating searches across multiple databases</li>
<li>
Weak methods for discovering where to narrow broad searches</li>
<li>
Poor integration with other tools</li>
<li>
Traditional interfaces have been inadequate for expert users</li>
<li>
OAI (Objects / Actions Interface)</li>
<li>
contains relations and a schema to describe the relations</li>
<li>
relations have records</li>
<li>
records have fields, and fields have values</li>
<li>
set of items (10 to 100,000)</li>
<li>
Contains images, sound, video, animations, etc</li>
<li>
Browsing and Searching
<ul>
<li>
Scrolling</li>
<li>
Zooming</li>
<li>
Joining</li>
<li>
Linking</li>
</ul>
</li>
<li>
Specific fact finding</li>
<li>
Extended fact finding</li>
<li>
Open-ended browsing</li>
<li>
Exploration of availability</li>
<li>
Table of contents, Indexes, Key-Word-In-Context (KWIC)</li>
<li>
Customizable search options and displays using control panels</li>
<li>
Structured relational database</li>
<li>
Textual document libraries</li>
<li>
Multimedia document libraries</li>
<li>
Task Actions (fact-finding)</li>
<li>
Where to Search</li>
</ul>
<p style="margin-left:.75in;"> </p>
<h3>
15.2 Database Query and Phrase Search in Textual Documents</h3>
<ul>
<li>
Searching in structured relational database systems well established task using SQL language</li>
<li>
Users write queries that specify matches on attribute levels</li>
<li>
Example of SQL command
<ul>
<li>
SELECT DOCUMENT#</li>
<li>
FROM JOURNAL-DB</li>
<li>
WHERE (Date >= and Date<= 1998)</li>
<li>
and (Language = english or french)</li>
<li>
and (publisher = Asis or Hfes or ACM).</li>
</ul>
</li>
<li>
SQL has powerful features, but it requires 2 to 20 hours training</li>
<li>
While SQL is a standard, many fill-in variants</li>
<li>
Finding a way not to overwhelm novice users is a challenge</li>
<li>
Evidence shows that users perform better and have higher satisfaction when they can view and control the search</li>
</ul>
<p><strong>Improved designs and consistency across multiple platforms can:</strong></p>
<ul>
<li>
bring faster performance</li>
<li>
reduce mistaken assumptions</li>
<li>
increase success in finding items</li>
<li>
Example: AltaVista, Lycos, Infoseek
<ul>
<li>
'direct manipulation' could produce:
<ul>
<li>
search on the exact string 'direct manipulation'</li>
<li>
probabilistic search for 'direct' and 'manipulation'</li>
<li>
probabilistic search for 'direct' and 'manipulation' with some weighting if the terms are in close proximity</li>
<li>
boolean search on 'direct' and 'manipulation'</li>
<li>
boolean search on 'direct' or 'manipulation'</li>
<li>
error message indicating missing and/or operator or other delimiters</li>
</ul>
</li>
</ul>
</li>
</ul>
<p><strong>Framework to coordinate design practice:</strong></p>
<ul>
<li>
Formulation
<ul>
<li>
source of the information</li>
<li>
fields for limiting the source</li>
<li>
phrases</li>
<li>
variants</li>
</ul>
</li>
<li>
Action</li>
<li>
explicit or implicit</li>
<li>
most systems have a search button for explicit initiation, or for delayed or regularly scheduled initiation</li>
<li>
read messages</li>
<li>
view textual lists</li>
<li>
manipulate visualizations</li>
<li>
should provide meaningful messages to explain search outcomes</li>
<li>
should support progressive refinement
<ul>
<li>
The four-phase framework can be applied by designers to make the search process more visible, comprehensible and controllable by users.</li>
</ul>
</li>
<li>
Results</li>
<li>
Refinement</li>
</ul>
<h3>
15.3 - Multimedia Document Searches</h3>
<ul>
<li>
Searches for databases and textual documents are good, but multimedia searches are in a primitive stage</li>
<li>
Current multimedia searches require parallel database or document search</li>
<li>
Search by date, text captions, or media is possible</li>
<li>
Search by content such as a "video on sunsets" is next to impossible</li>
<li>
Some search engines have elaborate textual commands, but the move is towards a graphical environment</li>
<li>
Photo Search:
<ul>
<li>
Finding photos with images such as the Statue of Liberty is a challenge
<ul>
<li>
Query-by-Image-Content (QBIC)</li>
<li>
Search by profile (shape of lady), distinctive features (torch), colors (green copper)</li>
</ul>
</li>
<li>
Use simple drawing tools to build templates or profiles to search with</li>
<li>
More success is attainable by searching restricted collections</li>
<li>
Search a vase collection</li>
<li>
Find a vase with a long neck by drawing a profile of it</li>
<li>
Critical searches such as fingerprint matching requires a minimum of 20 distinct features</li>
</ul>
</li>
<li>
Map Search</li>
<li>
On-line maps are plentiful</li>
<li>
Current search method is latitude/longitude</li>
<li>
Today's maps are more structured and allow:
<ul>
<li>
City, state, and site searches</li>
<li>
Flight information searches</li>
<li>
Weather information searches</li>
<li>
Example: www.mapquest.com</li>
</ul>
</li>
<li>
Allows searches of diagrams, blueprints, newspapers, etc.</li>
<li>
You could search for a red circle in a blue square or a piston in an engine</li>
<li>
Possible to hum a few notes to find songs</li>
<li>
Search for phone conversations may be possible in future on speaker independent basis</li>
<li>
Find frames of a video and edit</li>
<li>
Store video info in textual documents for searching</li>
<li>
Possible to search for specific animations like a spinning globe</li>
<li>
Search for moving text on a black background</li>
<li>
Design/Diagram Searches</li>
<li>
Sound Search</li>
<li>
Video Search</li>
<li>
Animation Search</li>
</ul>
<h3>
15.4 - Information Visualization</h3>
<ul>
<li>
Visualization - Use graphical means to show complex data sets</li>
<li>
"A picture is worth a thousand words!"</li>
<li>
Example: USA Map, click a city to see more info</li>
<li>
Visual Information Seeking Mantra
<ul>
<li>
Overview first</li>
<li>
zoom and filter</li>
<li>
then details-on-demand</li>
</ul>
</li>
<li>
Data Types</li>
<li>
1 - Dimensional
<ul>
<li>
Linear data types include textual documents, program source code, lists of names in sequential order</li>
<li>
Examples of alps: bifocal display, SeeSoft, Hamlet, Document Lens, Information mural algorithms</li>
</ul>
</li>
<li>
2 - Dimensional</li>
<li>
Planar or map data includes geographic maps, floor plans, newspaper layouts</li>
<li>
Example: Geographic Information Systems, Spatial displays of document collections</li>
<li>
Real-world objects such as molecules, the human body, buildings</li>
<li>
Users must cope with understanding their position and orientation when viewing the objects</li>
<li>
Examples: Overviews, Landmarks, Stereo Displays, transparency, color coding</li>
<li>
Virtual Reality displays</li>
<li>
National Library of Medicine's Visible Human Project</li>
<li>
Time Lines are widely used and accepted</li>
<li>
Items have a start and finish time and items may overlap</li>
<li>
Tasks include finding all events before, after, or during some time period</li>
<li>
Most relational and statistical databases</li>
<li>
Interface representation could be a 2-D scattergram with each additional dimension controlled by a slider</li>
<li>
Collections of items with each item having a link to one parent item (except root)</li>
<li>
Most Common use - File Managers</li>
<li>
Sometimes data needs to be linked to an arbitrary number of other items</li>
<li>
Example: A graphical representation of the World Wide Web</li>
<li>
3 - Dimensional</li>
<li>
Temporal</li>
<li>
Multi-Dimensional</li>
<li>
Tree</li>
<li>
Networks</li>
</ul>
<h3>
15.4 - Information Visualization</h3>
<ul>
<li>
Tasks
<ul>
<li>
Overview
<ul>
<li>
Gain an overview of the entire collection</li>
<li>
The overview contains a movable field-of-view box to control the contents of the detail view, allowing zoom factors of 3 to 30</li>
</ul>
</li>
<li>
Zoom</li>
<li>
Zoom in on items of interest</li>
<li>
Allows a more detailed view</li>
<li>
Filter out uninteresting items</li>
<li>
Allows user to reduce size of search</li>
<li>
Select an item or group and get details when needed</li>
<li>
Useful to pinpoint a good item</li>
<li>
View relationships among items</li>
<li>
Example: Set directors name, and view all movies with that director</li>
<li>
Keep a history to allow undo, replay, and progressive refinement</li>
<li>
Allows a mistake to be undone, or a series of steps to be replayed</li>
<li>
Extract the items or data</li>
<li>
Save to file, print, or drag to another application</li>
<li>
Filter</li>
<li>
Details-on-Demand</li>
<li>
Relate</li>
<li>
History</li>
<li>
Extract</li>
</ul>
</li>
<li>
Visualizations</li>
<li>
Make use of the remarkable human perceptual ability</li>
<li>
Many ways to show relationships</li>
<li>
Pointing can allow rapid selection and feedback
<ul>
<li>
The eye, hand, and mind seem to work smoothly and rapidly</li>
</ul>
</li>
</ul>
<h3>
15.5 - Advanced Filtering</h3>
<ul>
<li>
Dynamic Queries - Adjusting sliders, buttons, etc and getting immediate feedback
<ul>
<li>
Also called direct-manipulation queries</li>
<li>
Use sliders and other related controls to adjust the query</li>
<li>
Get immediate (less than 100 msec) feedback with data</li>
<li>
Hard to update fast with large databases</li>
<li>
Need to accomplish the following:
<ul>
<li>
select a set of sliders from a large set of attributes</li>
<li>
specify greater than, less than, or greater than and less than</li>
<li>
deal with boolean combinations of slider settings</li>
<li>
choose among highlighting by color, points or light, regions, blinking, etc</li>
<li>
cope with tens of thousands of points</li>
<li>
permit weighting of criteria</li>
</ul>
</li>
</ul>
</li>
<li>
Commercial information-retrieval systems</li>
<li>
DIALOG and FirstSearch</li>
<li>
Use complex Boolean expressions - difficult to use</li>
<li>
Complexity has led to Venn diagrams and decision tables</li>
<li>
can use AND, OR, NOT</li>
<li>
easy to learn and helps novice users</li>
<li>
Users create their profiles and media is scanned</li>
<li>
Called: Selective Dissemination of Information (SDI)</li>
<li>
Set of keywords is used to filter out information</li>
<li>
Groups of users combine evaluations to help in finding items in a large database</li>
<li>
User "votes" and his info is used for rating the item on interest</li>
<li>
Water flow metaphor with filters</li>
<li>
User-Constructed set of Keywords</li>
<li>
Collaborative Filtering</li>
</ul>
<br clear="all" />
<h2 align="center">
Chapter 16: Hypermedia and the World Wide Web</h2>
<div align="center">
<hr align="center" size="2" width="100%" />
</div>
<h3>
16.2 Hypertext and Hypermedia</h3>
<p><strong>Golden Rules of Hypertext:</strong></p>
<ul>
<li>
There is a large body of information organized into numerous fragments.</li>
<li>
The fragments relate to one another.</li>
<li>
The user needs only a small fraction of the fragments at any time.</li>
</ul>
<p><strong>Poor design of hypertext is common: (Rivlin):</strong></p>
<ul>
<li>
Too many links</li>
<li>
Long chains of links to reach relevant material</li>
<li>
Too many long dull articles</li>
</ul>
<p>Authoring tools should support at least the following features:</p>
<table border="1" cellpadding="0" style="width:325px;" width="325">
<tbody>
<tr>
<td style="width:29.0%;height:17px;">
<p> <strong>Actions</strong></p>
</td>
<td style="width:71.0%;height:17px;">
<p align="center"><strong>Objects</strong></p>
</td>
</tr>
<tr>
<td style="height:17px;">
<p> import</p>
</td>
<td style="height:17px;">
<p align="center">am article or node</p>
</td>
</tr>
<tr>
<td style="height:17px;">
<p> edit</p>
</td>
<td style="height:17px;">
<p align="center"> a link</p>
</td>
</tr>
<tr>
<td style="height:17px;">
<p> export</p>
</td>
<td style="height:17px;">
<p align="center"> collections of articles or nodes</p>
</td>
</tr>
<tr>
<td style="height:17px;">
<p> print</p>
</td>
<td style="height:17px;">
<p align="center">webs of links</p>
</td>
</tr>
<tr>
<td style="height:17px;">
<p> search</p>
</td>
<td style="height:17px;">
<p align="center">entire hypertext</p>
</td>
</tr>
</tbody>
</table>
<p><strong>Features to consider in an authoring tool:</strong></p>
<ul>
<li>
Range of editing functions available</li>
<li>
Availability of lists of links</li>
<li>
Link verification</li>
<li>
Range of display-formatting commands</li>
<li>
Availability of search-and-replace functions</li>
<li>
Control of color</li>
<li>
Capability to switch easily between author and browser modes</li>
<li>
Availability of graphics and video facilities</li>
<li>
Possibility of collaboration</li>
<li>
Data compression</li>
<li>
Security control</li>
<li>
Encryption</li>
<li>
Reliability</li>
<li>
Possibility of integration</li>
<li>
Import and export of standard interchange formats</li>
</ul>
<h3>
16.2 Hypertext and Hypermedia</h3>
<p><strong>Additional considerations beyond the usual concerns of good writing:</strong></p>
<ul>
<li>
Know the users and their tasks</li>
<li>
Ensure that meaningful structure comes first</li>
<li>
Apply diverse skills</li>
<li>
Respect chunking</li>
<li>
Show interrelationships</li>
<li>
Ensure simplicity in traversal</li>
<li>
Design each screen carefully</li>
<li>
Require low cognitive load:</li>
</ul>
<p><strong>Authoring strategies for creating the introductory article include:</strong></p>
<ul>
<li>
Executive overview</li>
<li>
Top-down</li>
<li>
Menu</li>
<li>
Search strategy</li>
</ul>
<h3>
16.3 World Wide Web</h3>
<ul>
<li>
Dystopian versus utopian view of the flood of information</li>
<li>
Web page design guidelines
<ul>
<li>
parallel early user-interface writings</li>
<li>
advice is typically incomplete or lacks generalizability</li>
<li>
paucity of empirical data to validate or sharpen insights offered</li>
</ul>
</li>
<li>
Guidelines typically based on personal experience</li>
<li>
Nielsen's usability-testing approach</li>
<li>
Sun Microsystems web site design</li>
<li>
studied nine different designs</li>
<li>
revealed problems and highlighted key principles of design</li>
<li>
empirical testing needed to verify findings</li>
</ul>
<h3>
16.4 Genres and Goals for Designers</h3>
<p><strong>Categorizing Websites:</strong></p>
<ul>
<li>
By the originator's identity</li>
<li>
By the number of web pages or amount of information that is accessible</li>
<li>
By goals of the originators</li>
<li>
By measures of success.</li>
</ul>
<h3>
16.5 Users and Their Tasks</h3>
<h4>
Components of Objects/Actions Interface Model:</h4>
<ul>
<li>
Task
<ul>
<li>
Structured information objects (e.g. hierarchies, networks)</li>
<li>
Information actions (e.g. searching, linking)</li>
</ul>
</li>
<li>
Interface</li>
<li>
Metaphors for information objects (e.g. bookshelf, encyclopedia)</li>
<li>
Handles for actions (e.g. querying, zooming)</li>
</ul>
<h4>
Designing task objects and actions</h4>
<h5>
Strategies for aggregating information:</h5>
<ul>
<li>
Short unstructured lists</li>
<li>
City guide highlights, organizational divisions, current projects (and this list)</li>
<li>
Linear structures</li>
<li>
Calendar of events, alphabetic list, human body slice images from head to toe,</li>
<li>
Orbital swath</li>
<li>
Arrays or tables</li>
<li>
Departure city/arrival city/date, latitude/longitude/time</li>
<li>
Hierarchies, trees</li>
<li>
Continent - country - city (e.g. Africa, Nigeria, Lagos)</li>
<li>
Concepts (e.g. sciences - physics - semiconductors - gallium arsenide)</li>
<li>
Multi-trees, faceted retrieval</li>
<li>
Photos indexed by date, photographer, location, topic, film type</li>
<li>
Networks</li>
<li>
Journal citations, genealogies, World Wide Web</li>
</ul>
<h5>
Atomic information actions include:</h5>
<ul>
<li>
Looking for Hemingway's name in an alphabetical list</li>
<li>
Scanning a list of scientific article titles</li>
<li>
Reading a paragraph</li>
<li>
Following a reference link</li>
</ul>
<h5>
Aggregate information actions are composed of atomic actions:</h5>
<ul>
<li>
Browsing an almanac table of contents, jumping to a chapter on sports and scanning for skiing topics</li>
<li>
Locating a scientific term in an alphabetic index and reading articles containing the term</li>
<li>
Using a keyword search in a catalog to obtain a list of candidate book titles</li>
<li>
Following cross reference from one legal precedent to another, repeatedly, until no new relevant precedents appear</li>
<li>
Scanning a music catalog to locate classical symphonies by eighteenth century French composers</li>
</ul>
<h3>
</h3>
<h3>
16.6 Object-Action Interface Model for Web Site Design</h3>
<h4>
Components of Objects/Actions Interface Model:</h4>
<ul>
<li>
Task
<ul>
<li>
Structured information objects (e.g. hierarchies, networks)</li>
<li>
Information actions (e.g. searching, linking)</li>
</ul>
</li>
<li>
Interface</li>
<li>
Metaphors for information objects (e.g. bookshelf, encyclopedia)</li>
<li>
Handles for actions (e.g. querying, zooming)</li>
</ul>
<h4>
Designing task objects and actions</h4>
<h5>
Strategies for aggregating information:</h5>
<ul>
<li>
Short unstructured lists</li>
<li>
City guide highlights, organizational divisions, current projects (and this list)</li>
<li>
Linear structures</li>
<li>
Calendar of events, alphabetic list, human body slice images from head to toe,</li>
<li>
Orbital swath</li>
<li>
Arrays or tables</li>
<li>
Departure city/arrival city/date, latitude/longitude/time</li>
<li>
Hierarchies, trees</li>
<li>
Continent - country - city (e.g. Africa, Nigeria, Lagos)</li>
<li>
Concepts (e.g. sciences - physics - semiconductors - gallium arsenide)</li>
<li>
Multi-trees, faceted retrieval</li>
<li>
Photos indexed by date, photographer, location, topic, film type</li>
<li>
Networks</li>
<li>
Journal citations, genealogies, World Wide Web</li>
</ul>
<h5>
Atomic information actions include:</h5>
<ul>
<li>
Looking for Hemingway's name in an alphabetical list</li>
<li>
Scanning a list of scientific article titles</li>
<li>
Reading a paragraph</li>
<li>
Following a reference link</li>
</ul>
<h5>
Aggregate information actions are composed of atomic actions:</h5>
<ul>
<li>
Browsing an almanac table of contents, jumping to a chapter on sports and scanning for skiing topics</li>
<li>
Locating a scientific term in an alphabetic index and reading articles containing the term</li>
<li>
Using a keyword search in a catalog to obtain a list of candidate book titles</li>
<li>
Following cross reference from one legal precedent to another, repeatedly, until no new relevant precedents appear</li>
<li>
Scanning a music catalog to locate classical symphonies by eighteenth century French composers</li>
</ul>
<h3>
16.6 Object-Action Interface Model for Web Site Design</h3>
<h4>
Metaphors for interface objects</h4>
<ul>
<li>
File cabinets, folders, and documents</li>
<li>
Books with chapters</li>
<li>
Encyclopedia with articles</li>
<li>
Television with channels</li>
<li>
Shopping mall with stores</li>
<li>
Museum with exhibits</li>
</ul>
<h4>
Handles for interface actions</h4>
<ul>
<li>
labels</li>
<li>
icons</li>
<li>
buttons</li>
<li>
image regions</li>
</ul>
<h4>
Detailed design issues</h4>
<ul>
<li>
Query Previews
<ul>
<li>
rapid rough search</li>
<li>
query refinement to narrow search</li>
</ul>
</li>
<li>
Session Management</li>
</ul>
<h3>
16.6 Object-Action Interface Model for Web Site Design</h3>
<h4>
Webpage design</h4>
<ul>
<li>
Compactness and branching factors</li>
<li>
Sequencing, clustering, and emphasis</li>
<li>
Support for universal access</li>
<li>
Good graphical design</li>
<li>
Navigation support</li>
</ul>
<h4>
Testing and maintenance for websites</h4>
<ul>
<li>
Usability testing recommended</li>
<li>
Test in realistic settings</li>
<li>
Early in-house testing with limited numbers of users</li>
<li>
Extensive in-house testing</li>
<li>
Intensive field testing</li>
<li>
Phased roll-out process</li>
<li>
Usage logs helpful</li>
<li>
User feedback</li>
<li>
User expectations and organizational policy guide rate of change</li>
</ul>
<br clear="all" />
<h2 align="center">
Afterword: Societal and Individual Impact of User Interfaces</h2>
<div align="center">
<hr align="center" size="2" width="100%" />
</div>
<h3>
A.1 Between Hope and Fear</h3>
<ul>
<li>
Hopes can invigorate others to join in purposeful action</li>
<li>
Often hope must overcome resistance created by fear</li>
<li>
Fear can be a terrifying barrier to change,but also an energizer for action</li>
<li>
Computing is ubiquitous world wide</li>
<li>
Technology extrapolation posits that advances in technology are themselves beneficial to society</li>
</ul>
<h4>
Potential issues to shape the future:</h4>
<ul>
<li>
Universal access to computing technology
<ul>
<li>
convenient, low-cost</li>
<li>
electricity, software, hardware</li>
<li>
reengineered applications and services required</li>
<li>
simplify common tasks</li>
<li>
control panels to tailor interfaces for diverse users</li>
<li>
plasticity of information and services</li>
<li>
policy issue</li>
<li>
while not primary need in many communities, could be part of overall development plan</li>
</ul>
</li>
<li>
Universal medical records</li>
<li>
paper-based systems limit availability of medical information for clinical decision making, quality control, and research</li>
<li>
could be available world-wide, in local language and units of measure</li>
<li>
easy access to details</li>
<li>
convenient links for electronic consultation with other medical professionals</li>
<li>
standardized record formats could speed data entry and access</li>
<li>
could assist in development of treatment plans and in research</li>
<li>
privacy issues and cost must be addressed</li>
<li>
education is the hope of civilization</li>
<li>
can teach students how to participate in workgroups, political systems, and communities</li>
<li>
student projects can be real-world and service oriented</li>
<li>
relate-create-donate approach; could be improved with advanced technology
<ul>
<li>
reliable retrieval of existing knowledge relevant to team projects</li>
<li>
creative activities with brainstorming tools, simulation modeling, design exploration, and authoring tools</li>
<li>
consultation with peers and experts using convenient group-support tools</li>
<li>
dissemination of results through community-information tools</li>
</ul>
</li>
<li>
Universal educational support</li>
</ul>
<h3>
A.2 Ten Plagues of the Information Age</h3>
<ol>
<li>
Anxiety</li>
<li>
Alienation</li>
<li>
Information-poor minority</li>
<li>
Impotence of the individual</li>
<li>
Bewildering complexity and speed</li>
<li>
Organizational fragility</li>
<li>
Invasion of privacy</li>
<li>
Unemployment and displacement</li>
<li>
Lack of professional responsibility</li>
<li>
Deteriorating image of people</li>
</ol>
<h3>
A.3 Prevention of the Plagues</h3>
<ul>
<li>
Human-centered design</li>
<li>
Organizational support</li>
<li>
Job design</li>
<li>
Education</li>
<li>
Feedback and rewards</li>
<li>
Public consciousness raising</li>
<li>
Legislation</li>
<li>
Advanced research</li>
</ul>
<h3>
A.4 Overcoming the Obstacle of Animism</h3>
<ul>
<li>
Computer revolution has passed its infancy, but still tremendous opportunity for change</li>
<li>
Metaphors, images, and names chosen for systems play a key role</li>
<li>
Metaphor and terminology of human form can mislead designers and users of robots</li>
<li>
ATMs as example of evolution from anthropomorphism to service orientation</li>
<li>
Focus should be on service to human needs, not technology itself</li>
<li>
Human-human communication is a poor model for human-computer interaction</li>
<li>
Users want to be empowered by technology, not awed by it</li>
</ul>
<h3>
A.5 In the Long Run</h3>
<p>Successful interactive systems will bring ample rewards to the designers, but widespread use of effective tools is only the means to reach higher goals.</p>
<p>The message of quality is compelling to the recipients and can instill good feelings, appreciation for the designer, and the desire to excel in one's own work.</p>
<p>At first, it may seem remarkable that computer systems can instill a kinship among people, but every technology has the potential to engage people in cooperative efforts.</p>
<p> </p>
<p> </p>
<p> </p>
Add new comment