An Instructor’s Outline of Designing the User Interface 4th Edition

An Instructor’s Outline of Designing the User Interface 4th Edition
by Ben Shneiderman & Catherine Plaisant Slides developed by Roger J. Chapman Copyright © 2005, Pearson Education, Inc.

Usability of Interactive Systems
Chapter 1 Usability of Interactive Systems Copyright © 2005, Pearson Education, Inc.

Introduction The Interdisciplinary Design Science of Human-Computer Interaction (HCI) combines knowledge and methods associated with professionals including: Psychologists (incl. Experimental, Educational, and Industrial Psychologists) Computer Scientists Instructional and Graphic Designers Technical Writers Human Factors and Ergonomics Experts Anthropologists and Sociologists Copyright © 2005, Pearson Education, Inc.

Introduction (continued)
What are the Ramifications? Success Stories: Microsoft, Linux, Amazon.com, Google Competition: Netscape vs. Internet Explorer Copyright Infringement Suits - Apple vs. Microsoft (Windows ) and Napster vs. The music industry Mergers: AOL and Time Warner Corporate Takeovers: IBM's seizure of Lotus Privacy and Security issues: identification theft, medical information, viruses, spam, pornography, national security Copyright © 2005, Pearson Education, Inc.

Individual User Level Routine processes: tax return preparation Decision support: a doctor’s diagnosis and treatment Education and training: encyclopedias, drill-and-practice exercises, simulations Leisure: music and sports information Copyright © 2005, Pearson Education, Inc.

Communities Business use: financial planning, publishing applications Industries and professions: web resources for journals, and career opportunities Family use: entertainment and communication Globalization: language and culture Copyright © 2005, Pearson Education, Inc.

Book overview Chapter 1: Chapter 2: Chapters 3-5: Chapters 6-10:
A broad overview of human-computer interaction from practitioner and research perspectives Chapter 2: Guidelines, principles, and theories Chapters 3-5: Development processes and software tools Chapters 6-10: Interaction styles Chapters 11-14: Critical design decisions Afterword: Societal and individual impacts of technology Copyright © 2005, Pearson Education, Inc.

Usability requirements
Synonyms for “user-friendly” in Microsoft Word 2002 are easy to use; accessible; comprehensible; intelligible; idiot proof; available; and ready But a “friend” also seeks to help and be valuable. A friend is not only understandable, but understands. A friend is reliable and doesn’t hurt. A friend is pleasant to be with. These measures are still subjective and vague, so a systematic process is necessary to develop usable systems for specific users in a specific context Copyright © 2005, Pearson Education, Inc.

Usability requirements (cont.)
The U.S. Military Standard for Human Engineering Design Criteria (1999) states these purposes: Achieve required performance by operator, control, and maintenance personnel Minimize skill and personnel requirements and training time Achieve required reliability of personnel-equipment/software combinations Foster design standardization within and among systems Should improving the user’s quality of life and the community also be objectives? Usability requires project management and careful attention to requirements analysis and testing for clearly defined objectives Copyright © 2005, Pearson Education, Inc.

Goals for requirements analysis
Ascertain the user’s needs Determine what tasks and subtasks must be carried out Include tasks which are only performed occasionally. Common tasks are easy to identify. Functionality must match need or else users will reject or underutilize the product Copyright © 2005, Pearson Education, Inc.

Ensure reliability Actions must function as specified Database data displayed must reflect the actual database Appease the user's sense of mistrust The system should be available as often as possible The system must not introduce errors Ensure the user's privacy and data security by protecting against unwarranted access, destruction of data, and malicious tampering Copyright © 2005, Pearson Education, Inc.

Promote standardization, integration, consistency, and portability Standardization: use pre-existing industry standards where they exist to aid learning and avoid errors (e.g. the W3C and ISO standards) Integration: the product should be able to run across different software tools and packages (e.g. Unix) Consistency: compatibility across different product versions compatibility with related paper and other non-computer based systems use common action sequences, terms, units, colors, etc. within the program Portability: allow for the user to convert data across multiple software and hardware environments Copyright © 2005, Pearson Education, Inc.

Complete projects on time and within budget Late or over budget products can create serious pressure within a company and potentially mean dissatisfied customers and loss of business to competitors Copyright © 2005, Pearson Education, Inc.

Usability measures Define the target user community and class of tasks associated with the interface Communities evolve and change (e.g. the interface to information services for the U.S. Library of Congress) 5 human factors central to community evaluation: Time to learn How long does it take for typical members of the community to learn relevant task? Speed of performance How long does it take to perform relevant benchmarks? Rate of errors by users How many and what kinds of errors are made during benchmark tasks? Retention over time Frequency of use and ease of learning help make for better user retention Subjective satisfaction Allow for user feedback via interviews, free-form comments and satisfaction scales Copyright © 2005, Pearson Education, Inc.

Usability measures (cont.)
Trade-offs in design options frequently occur. Changes to the interface in a new version may create consistency problems with the previous version, but the changes may improve the interface in other ways or introduce new needed functionality. Design alternatives can be evaluated by designers and users via mockups or high-fidelity prototypes. The basic tradeoff is getting feedback early and perhaps less expensively in the development process versus having a more authentic interface evaluated. Copyright © 2005, Pearson Education, Inc.

Usability motivations
Many interfaces are poorly designed and this is true across domains: Life-critical systems Air traffic control, nuclear reactors, power utilities, police & fire dispatch systems High costs, reliability and effectiveness are expected Length training periods are acceptable despite the financial cost to provide error-free performance and avoid the low frequency but high cost errors Subject satisfaction is less an issue due to well motivated users Copyright © 2005, Pearson Education, Inc.

Usability motivations (cont.)
Industrial and commercial uses Banking, insurance, order entry, inventory management, reservation, billing, and point-of-sales systems Ease of learning is important to reduce training costs Speed and error rates are relative to cost Speed of performance is important because of the number of transactions Subjective satisfaction is fairly important to limit operator burnout Copyright © 2005, Pearson Education, Inc.

Office, home, and entertainment applications Word processing, electronic mail, computer conferencing, and video game systems, educational packages, search engines, mobile device, etc. Ease of learning, low error rates, and subjective satisfaction are paramount due to use is often discretionary and competition fierce Infrequent use of some applications means interfaces must be intuitive and easy to use online help is important Choosing functionality is difficult because the population has a wide range of both novice and expert users Competition cause the need for low cost Copyright © 2005, Pearson Education, Inc.

Exploratory, creative, and cooperative systems Web browsing, search engines, artist toolkits, architectural design, software development, music composition, and scientific modeling systems Collaborative work Benchmarks are hard to describe for exploratory tasks and device users With these applications, the computer should "vanish" so that the user can be absorbed in their task domain Copyright © 2005, Pearson Education, Inc.

Social-technical systems Complex systems that involve many people over long time periods Voting, health support, identity verification, crime reporting Trust, privacy, responsibility, and security are issues Verifiable sources and status feedback are important Ease of learning for novices and feedback to build trust Administrators need tools to detect unusual patterns of usage Copyright © 2005, Pearson Education, Inc.

Universal Usability Physical abilities and physical workplaces
Basic data about human dimensions comes from research in anthropometry There is no average user, either compromises must be made or multiple versions of a system must be created Physical measurement of human dimensions are not enough, take into account dynamic measures such as reach, strength or speed Copyright © 2005, Pearson Education, Inc.

Universal Usability (cont.)
Screen-brightness preferences vary substantially, designers customarily provide a knob to enable user control Account for variances of the user population's sense perception Vision: depth, contrast, color blindness, and motion sensitivity Touch: keyboard and touchscreen sensitivity Hearing: audio clues must be distinct Workplace design can both help and hinder work performance Copyright © 2005, Pearson Education, Inc.

The draft standard Human Factors Engineering of Computer Workstations (2002) lists these concerns: Work-surface and display-support height Clearance under work surface for legs Work-surface width and depth Adjustability of heights and angles for chairs and work surfaces Posture—seating depth and angle; back-rest height and lumbar support Availability of armrests, footrests, and palmrests Copyright © 2005, Pearson Education, Inc.

Cognitive and perceptual abilities The human ability to interpret sensory input rapidly and to initiate complex actions makes modern computer systems possible The journal Ergonomics Abstracts offers this classification of human cognitive processes: Long-term and semantic memory Short-term and working memory Problem solving and reasoning Decision making and risk assessment Language communication and comprehension Search, imagery, and sensory memory Learning, skill development, knowledge acquisition and concept attainment Copyright © 2005, Pearson Education, Inc.

They also suggest this set of factors affecting perceptual and motor performance: Arousal and vigilance Fatigue and sleep deprivation Perceptual (mental) load Knowledge of results and feedback Monotony and boredom Sensory deprivation Nutrition and diet Fear, anxiety, mood, and emotion Drugs, smoking, and alcohol Physiological rhythms But note, in any application, background experience and knowledge in the task domain and the interface domain play key roles in learning and performance Copyright © 2005, Pearson Education, Inc.

Personality differences There is no set taxonomy for identifying user personality types Designers must be aware that populations are subdivided and that these subdivisions have various responses to different stimuli Myers-Briggs Type Indicator (MBTI) extroversion versus introversion sensing versus intuition perceptive versus judging feeling versus thinking Copyright © 2005, Pearson Education, Inc.

Cultural and international diversity Characters, numerals, special characters, and diacriticals Left-to-right versus right-to-left versus vertical input and reading Date and time formats Numeric and currency formats Weights and measures Telephone numbers and addresses Names and titles (Mr., Ms., Mme.) Social-security, national identification, and passport numbers Capitalization and punctuation Sorting sequences Icons, buttons, colors Pluralization, grammar, spelling Etiquette, policies, tone, formality, metaphors Copyright © 2005, Pearson Education, Inc.

Users with disabilities Designers must plan early to accommodate users with disabilities Early planning is more cost efficient than adding on later Businesses must comply with the "Americans With Disabilities" Act for some applications Elderly Users Including the elderly is fairly ease, designers should allow for variability within their applications via settings for sound, color, brightness, font sizes, etc. Copyright © 2005, Pearson Education, Inc.

Goals for our profession
Potential research topics Reducing anxiety and fear of computer usage Graceful Evolution Specification and implementation of interaction Direct manipulation Input devices Online assistance Information exploration Copyright © 2005, Pearson Education, Inc.

Goals for our profession (cont.)
Providing tools, techniques, and knowledge for system implementers Rapid prototyping is easy when using contemporary tools Use general or self-determined guideline documents written for specific audiences To refine systems, use feedback from individual or groups of users Raising the computer consciousness of the general public Many novice users are fearful due to experience with poor product design, Good designs help novices through these fears by being clear, competent, and nonthreatening Copyright © 2005, Pearson Education, Inc.

Guidelines, Principles, and Theories
Chapter 2 Guidelines, Principles, and Theories Copyright © 2005, Pearson Education, Inc.

Guidelines Shared language Best practices Critics Proponents
Too specific, incomplete, hard to apply, and sometimes wrong Proponents Encapsulate experience Copyright © 2005, Pearson Education, Inc.

Navigating the interface
Sample of the National Cancer Institutes guidelines: Standardize task sequences Ensure that embedded links are descriptive Use unique and descriptive headings Use check boxes for binary choices Develop pages that will print properly Use thumbnail images to preview larger images Copyright © 2005, Pearson Education, Inc.

Accessibility guidelines
Provide a text equivalent for every nontext element For any time-based multimedia presentation synchronize equivalent alternatives Information conveyed with color should also be conveyed without it Title each frame to facilitate from identification and navigation Copyright © 2005, Pearson Education, Inc.

Organizing the display
Smith and Mosier (1986) offer five high-level goals Consistency of data display Efficient information assimilation by the user Minimal memory load on the user Compatibility of data display with data entry Flexibility for user control of data display Copyright © 2005, Pearson Education, Inc.

Getting the user’s attention
Intensity Marking Size Choice of fonts Inverse video Blinking Color Audio Copyright © 2005, Pearson Education, Inc.

Facilitating data entry
Smith and Mosier (1986) offer five high-level objectives as part of their guidelines for data entry Consistency of data-entry transactions Minimal input actions by user Minimal memory load on users Compatibility of data entry with data display Flexibility for user control of data entry Copyright © 2005, Pearson Education, Inc.

Principles More fundamental, widely applicable, and enduring than guidelines Need more clarification Fundamental principles Determine user’s skill levels Identify the tasks Five primary interaction styles Eight golden rules of interface design Prevent errors Automation and human control Copyright © 2005, Pearson Education, Inc.

Determine user’s skill levels
“Know thy user” Hansen (1971) Age, gender, physical and cognitive abilities, education, cultural or ethnic background, training, motivation, goals and personality Design goals based on skill level Novice or first-time users Knowledgeable intermittent users Expert frequent users Multi-layer designs Copyright © 2005, Pearson Education, Inc.

Choose an interaction style
Direct Manipulation Menu selection Form fillin Command language Natural language Copyright © 2005, Pearson Education, Inc.

The 8 golden rules of interface design
Strive for consistency Cater to universal usability Offer informative feedback Design dialogs to yield closure Prevent errors Permit easy reversal of actions Support internal locus of control Reduce short term memory Copyright © 2005, Pearson Education, Inc.

Prevent errors Make error messages specific, positive in tone, and constructive Mistakes and slips (Norman, 1983) Correct actions Gray out inappropriate actions Selection rather than freestyle typing Automatic completion Complete sequences Single abstract commands Macros and subroutines Copyright © 2005, Pearson Education, Inc.

Automation and human control
Copyright © 2005, Pearson Education, Inc.

Automation and human control (cont.)
Successful integration: Users can avoid: Routine, tedious, and error prone tasks Users can concentrate on: Making critical decisions, coping with unexpected situations, and planning future actions Copyright © 2005, Pearson Education, Inc.

Supervisory control needed to deal with real world open systems E.g. air-traffic controllers with low frequency, but high consequences of failure FAA: design should place the user in control and automate only to improve system performance, without reducing human involvement Copyright © 2005, Pearson Education, Inc.

Goals for autonomous agents knows user's likes and dislikes makes proper inferences responds to novel situations performs competently with little guidance Tool like interfaces versus autonomous agents Aviators representing human users, not computers, more successful Copyright © 2005, Pearson Education, Inc.

User modeling for adaptive interfaces keeps track of user performance adapts behavior to suit user's needs allows for automatically adapting system response time, length of messages, density of feedback, content of menus, order of menu items, type of feedback, content of help screens can be problematic system may make surprising changes user must pause to see what has happened user may not be able to predict next change interpret what has happened restore system to previous state Copyright © 2005, Pearson Education, Inc.

Alternative to agents: user control, responsibility, accomplishment expand use of control panels style sheets for word processors specification boxes of query facilities information-visualization tools Copyright © 2005, Pearson Education, Inc.

Theories Beyond the specifics of guidelines
Principles are used to develop theories Descriptions/explanatory or predictive Motor task, perceptual, or cognitive Copyright © 2005, Pearson Education, Inc.

Explanatory and predictive theories
Explanatory theories: Observing behavior Describing activity Conceiving of designs Comparing high-level concepts of two designs Training Predictive theories: Enable designers to compare proposed designs for execution time or error rates Copyright © 2005, Pearson Education, Inc.

Perceptual, Cognitive, & Motor tasks
Perceptual or Cognitive subtasks theories Predicting reading times for free text, lists, or formatted displays Motor-task performance times theories: Predicting keystroking or pointing times Copyright © 2005, Pearson Education, Inc.

Taxonomy (explanatory theory)
Order on a complex set of phenomena Facilitate useful comparisons Organize a topic for newcomers Guide designers Indicate opportunities for novel products. Copyright © 2005, Pearson Education, Inc.

Conceptual, semantic, syntactic, and lexical model
Foley and van Dam four-level approach Conceptual level: User's mental model of the interactive system Semantic level: Describes the meanings conveyed by the user's command input and by the computer's output display Syntactic level: Defines how the units (words) that convey semantics are assembled into a complete sentence that instructs the computer to perform a certain task Lexical level: Deals with device dependencies and with the precise mechanisms by which a user specifies the syntax Approach is convenient for designers Top-down nature is easy to explain Matches the software architecture Allows for useful modularity during design Copyright © 2005, Pearson Education, Inc.

Stages of action models
Norman's seven stages of action Forming the goal Forming the intention Specifying the action Executing the action Perceiving the system state Interpreting the system state Evaluating the outcome Norman's contributions Context of cycles of action and evaluation. Gulf of execution: Mismatch between the user's intentions and the allowable actions Gulf of evaluation: Mismatch between the system's representation and the users' expectations Copyright © 2005, Pearson Education, Inc.

Stages of action models (cont.)
Four principles of good design State and the action alternatives should be visible Should be a good conceptual model with a consistent system image Interface should include good mappings that reveal the relationships between stages User should receive continuous feedback Four critical points where user failures can occur Users can form an inadequate goal Might not find the correct interface object because of an incomprehensible label or icon May not know how to specify or execute a desired action May receive inappropriate or misleading feedback Copyright © 2005, Pearson Education, Inc.

GOMS and the keystroke-level model
Goals, operators, methods, and selection rules (GOMS) model Keystroke-level model: Predict performance times for error-free expert performance of tasks Transition diagrams Natural GOMS Language (NGOMSL) Several alternative methods to delete fields, e.g. Method 1 to accomplish the goal of deleting the field: Decide: If necessary, then accomplish the goal of selecting the field Accomplish the goal of using a specific field delete method Report goal accomplished Copyright © 2005, Pearson Education, Inc.

GOMS and the keystroke-level model (cont.)
Method 2 to accomplish the goal of deleting the field: Decide: If necessary, then use the Browse tool to go to the card with the field Choose the field tool in the Tools menu Note that the fields on the card background are displayed Click on the field to be selected Report goal accomplished Selection rule set for goal of using a specific field-delete method: If you want to past the field somewhere else, then choose "Cut Field" from the Edit menu. If you want to delete the field permanently, then choose "Clear Field" from the Edit menu. Report goal accomplished. Copyright © 2005, Pearson Education, Inc.

Consistency through grammars
Consistent user interface goal Definition is elusive - multiple levels sometimes in conflict Sometimes advantageous to be inconsistent. Consistent Inconsistent A Inconsistent B delete/insert character delete/insert character delete/insert character delete/insert word remove/bring word remove/insert word delete/insert line destroy/create line delete/insert line delete/insert paragraph kill/birth paragraph delete/insert paragraph Copyright © 2005, Pearson Education, Inc.

Consistency through grammars (cont.)
Inconsistent action verbs Take longer to learn Cause more errors Slow down users Harder for users to remember Copyright © 2005, Pearson Education, Inc.

Task-action grammars (TAGs) try to characterize a complete set of tasks. Example: TAG definition of cursor control Dictionary of tasks: move-cursor-one-character-forward [Direction=forward,Unit=char] move-cursor-one-character-backward [Direction=backward,Unit=char] move-cursor-one-word-forward [Direction=forward,Unit=word] move-cursor-one-word-backward [Direction=backward,Unit=word] Copyright © 2005, Pearson Education, Inc.

High-level rule schemas describing command syntax: task [Direction, Unit] -> symbol [Direction] + letter [Unit] symbol [Direction=forward] -> "CTRL" symbol [Direction=backward] -> "ESC" letter [Unit=word] -> "W" letter [Unit=char] -> "C" Generates a consistent grammar: move cursor one character forward CTRL-C move cursor one character backward ESC-C move cursor one word forward CTRL-W move cursor one word backward ESC-W Copyright © 2005, Pearson Education, Inc.

Widget-level theories
Follow simplifications made in higher-level, user-interface building tools. Potential benefits: Possible automatic generation of performance prediction A measure of layout appropriateness available as development guide Estimates generated automatically and amortized over many designers and projects perceptual complexity cognitive complexity motor load Higher-level patterns of usage appear Copyright © 2005, Pearson Education, Inc.

Object/Action Interface model
Syntactic-semantic model of human behavior used to describe programming database-manipulation facilities direct manipulation Distinction made between meaningfully-acquired semantic concepts and rote-memorized syntactic details Semantic concepts of user's tasks well-organized and stable in memory Syntactic details of command languages arbitrary and required frequent rehearsal Copyright © 2005, Pearson Education, Inc.

Object/Action Interface model (cont.)
With introduction of GUIs, emphasis shifted to simple direct manipulations applied to visual representations of objects and actions. Syntactic aspects not eliminated, but minimized. Copyright © 2005, Pearson Education, Inc.

Object/Action Interface model (cont.)
Object-action design: understand the task. real-world objects actions applied to those object create metaphoric representations of interface objects and actions designer makes interface actions visible to users Copyright © 2005, Pearson Education, Inc.

Task hierarchies of objects and actions
Decomposition of real-world complex systems natural human body buildings cities symphonies baseball game Copyright © 2005, Pearson Education, Inc.

Task hierarchies of objects and actions (cont.)
Computer system designers must generate a hierarchy of objects and actions to model users' tasks: Representations in pixels on a screen Representations in physical devices Representations in voice or other audio cue Copyright © 2005, Pearson Education, Inc.

Interface hierarchies of objects and actions
Interface includes hierarchies of objects and actions at high and low levels. E.g. A computer system: Interface Objects rectory name length date of creation owner access control files of information lines difields characters fonts pointers binary numbers Copyright © 2005, Pearson Education, Inc.

Interface hierarchies of objects and actions (cont.)
Interface Actions load a text data file insert into the data file save the data file save the file save a backup of the file apply access-control rights overwrite previous version assign a name Copyright © 2005, Pearson Education, Inc.

Interface hierarchies of objects and actions (cont.)
Interface objects and actions based on familiar examples. Users learn interface objects and actions by: seeing a demonstration hearing an explanation of features conducting trial-and-error sessions Copyright © 2005, Pearson Education, Inc.

The disappearance of syntax
Users must maintain a profusion of device-dependent details in their human memory. Which action erases a character Which action inserts a new line after the third line of a text file Which abbreviations are permissible Which of the numbered function keys produces the previous screen. Copyright © 2005, Pearson Education, Inc.

The disappearance of syntax (cont.)
Learning, use, and retention of this knowledge is hampered by two problems Details vary across systems in an unpredictable manner Greatly reduces the effectiveness of paired-associate learning Syntactic knowledge conveyed by example and repeated usage Syntactic knowledge is system dependent Copyright © 2005, Pearson Education, Inc.

The disappearance of syntax (cont.)
Minimizing these burdens is the goal of most interface designers Modern direct-manipulation systems Familiar objects and actions representing their task objects and actions. Modern user interface building tools Standard widgets Copyright © 2005, Pearson Education, Inc.

Specification Methods
Design requires a good notation to record and discuss alternate possibilities: The default language for specifications in any field is natural language, e.g., English Communication medium, e.g., sketchpad, or blackboard Natural-language specifications tend to be: lengthy vague ambiguous Therefore often are difficult to prove: correct consistent complete Copyright © 2005, Pearson Education, Inc.

Specification Methods (cont.)
Backus-Naur Form (a.k.a. Backus Normal Form or BNF) high-level components are described as nonterminals specific strings are described as terminals Grammars Example <Telephone book entry>::= <Name><Telephone number> <Name> ::= <Last name>, <First name> <Last name> ::= <string> <First name> ::= <string> <string> ::= <character>|<character><string> <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 <Telephone number>::= (<area code>) <exchange>-<local number> <area code>::= <digit><digit><digit> <exchange>::= <digit><digit><digit> <local number>::= <digit><digit><digit><digit><digit>::= 0|1|2|3|4|5|6|7|8|9 Copyright © 2005, Pearson Education, Inc.

Examples of acceptable entries WASHINGTON, GEORGE (301) BEEF, STU (726) A, Z (999) Multiparty grammars <Session> ::= <U: Opening> <C: Responding> <U: Opening> ::= LOGIN <U: Name> <U: Name> ::= <U: string> <C: Responding> ::= HELLO [<U: Name.] U: User C: Computer Multiparty grammars are effective for text oriented command sequences Copyright © 2005, Pearson Education, Inc.

Interface-Building Tools
Features of Interface-Building Tools. User Interface Independence Separate interface design from internals Enable multiple user interface strategies Enable multiple platform support Establish user interface architect role Enforce standards Methodology & Notation Develop design procedures Find ways to talk about design Create project management Copyright © 2005, Pearson Education, Inc.

Interface-Building Tools (cont.)
Rapid Prototyping Try out ideas very early Test, revise, test, revise,... Engage end users, managers, and others Software Support Increase productivity Offer some constraint & consistency checks Facilitate team approaches Ease maintenance Copyright © 2005, Pearson Education, Inc.

User interface mockup tools Examples Paper and pencil Word processors Slide-show software Macromedia Director, Flash mx, or Dreamweaver Visual Editing Microsoft Visual Studio Borland JBuilder Copyright © 2005, Pearson Education, Inc.

Finding the right tool is a tradeoff between six main criteria: Part of the application built using the tool. Learning time Building time Methodology imposed or advised Communication with other subsystems Extensibility and modularity Copyright © 2005, Pearson Education, Inc.

The application framework and specialized language layer Application frameworks are based on object-oriented programming Can quickly build sophisticated interfaces Require intensive learning Specialized language layers lighten the programming burden Tcl (and its toolkit Tk) Perl/Tk Python/Tk Visual Basic Java Script Copyright © 2005, Pearson Education, Inc.

Evaluation and Critiquing Tools
Tullis' Display Analysis Program, Version 4.0: Takes alphanumeric screen designs and produces display-complexity metrics plus some advice: Upper-case letters: 77% The percentage of upper-case letters is high. Consider using more lower-case letters, since text printed in normal upper- and lower-case letters is read about 13% faster than text in all upper case. Reserve all upper-case for items that need to attract attention. Copyright © 2005, Pearson Education, Inc.

Evaluation and Critiquing Tools (cont.)
Maximum local density = 89.9% at row 9, column 8. Average local density = 67.0% The area with the highest local density is identified...you can reduce local density by distributing the characters as evenly as feasible over the entire screen. Total layout complexity = 8.02 bits Layout complexity is high. This means that the display items (labels and data) are not well aligned with each other...Horizontal complexity can be reduced by starting items in fewer different columns on the screen (that is, by aligning them vertically). Copyright © 2005, Pearson Education, Inc.

Evaluation and Critiquing Tools (cont.)
Doctor HTML - Web Page Analyzer: Did not find the required open and close HEAD tag. You should open and close the HEAD tag in order to get consistent performance on all browsers. Found extra close STRONG tags in the document. Please remove them. Copyright © 2005, Pearson Education, Inc.

Direct Manipulation and Virtual Environment
Chapter 6 Direct Manipulation and Virtual Environment Copyright © 2005, Pearson Education, Inc.

Introduction Positive feelings associated with good user interfaces:
Mastery of the interface Competence in performing tasks Ease in learning the system originally and in assimilating advanced features Confidence in the capacity to retain mastery over time Enjoyment in using the system Eagerness to show the system off to novices Desire to explore more powerful aspects of the system Copyright © 2005, Pearson Education, Inc.

Examples of Direct-Manipulation Systems
Command line vs. display editors and word processors Training times with display editors are much less than line editors Line editors are generally more flexible and powerful The advances of WYSIWYG word processors: Display a full page of text Display of the document in the form that it will appear when the final printing is done Show cursor action Control cursor motion through physically obvious and intuitively natural means Use of labeled icon for actions Display of the results of an action immediately Provide rapid response and display Offer easily reversible actions Copyright © 2005, Pearson Education, Inc.

Examples of Direct-Manipulation Systems (cont.)
Technologies that derive from the word processor: Integration Desktop publication software Slide-presentation software Hypermedia environments Improved macro facilities Spell checker and thesaurus Grammar checkers Copyright © 2005, Pearson Education, Inc.

The VisiCalc spreadsheet and its descendants VisiCalc users delighted in watching the program propagate changes across the screen. In some cases, spatial representations provide a better model of reality Successful spatial data-management systems depend on choosing appropriate: Icons Graphical representations Natural and comprehensible data layouts Copyright © 2005, Pearson Education, Inc.

Video games From PONG to Nintendo GameCube, Sony PlayStation 2, and Microsoft Xbox Field of action is visual and compelling Commands are physical actions whose results are immediately shown on the screen No syntax to remember Most games continuously display a score Direct manipulation in SimSity Myst well received DOOM and Quake controversial Copyright © 2005, Pearson Education, Inc.

Computer-aided design Computer-aided design (CAD) use direct manipulation Manipulate the object of interest Generate alternatives easily Explain the impact Problem solving by analogy to the real-world Office automation Xerox Star was a pioneer with sophisticated formatting Apple Lisa System Rapid and continuous graphical interaction Microsoft Windows is a descendant Copyright © 2005, Pearson Education, Inc.

Discussion of Direct Manipulation
Problems with direct manipulation Spatial or visual representations can be too spread out High-level flowcharts and database-schema can become confusing Designs may force valuable information off of the screen Users must learn the graphical representations The visual representation may be misleading Typing commands with the keyboard my be faster Copyright © 2005, Pearson Education, Inc.

Discussion of Direct Manipulation (cont.)
The OAI Model explanation of direct manipulation Portrait of direct manipulation: Continuous representation of the objects and actions of interest Physical actions or presses of labeled buttons instead of complex syntax Rapid incremental reversible operations whose effect on the object of interest is immediately visible Copyright © 2005, Pearson Education, Inc.

The OAI Model explanation of direct manipulation (cont.) Beneficial attributes: Novices learn quickly Experts work rapidly Intermittent users can retain concepts Error messages are rarely needed Users see if their actions are furthering their goals Users experience less anxiety Users gain confidence and mastery Copyright © 2005, Pearson Education, Inc.

Visual Thinking and Icons The visual nature of computers can challenge the first generation of hackers An icon is an image, picture, or symbol representing a concept Icon-specific guidelines Represent the object or action in a familiar manner Limit the number of different icons Make icons stand out from the background Consider three-dimensional icons Ensure a selected icon is visible from unselected icons Design the movement animation Add detailed information Explore combinations of icons to create new objects or actions Copyright © 2005, Pearson Education, Inc.

Five levels of icon design: Lexical qualities. Machine-generated marks—pixel shape, color brightness, blinking Syntactics. Appearance and movement—lines, patterns, modular parts, size, shape Semantics. Objects represented—concrete versus abstract, part versus whole Pragmatics. Overall legibility, utility, identifiability, memorability, pleasingness Dynamics. Receptivity to clicks—highlighting, dragging, combining Copyright © 2005, Pearson Education, Inc.

3D Interfaces “Pure” 3D interfaces have strong utility in some contexts, e.g., medical, product design. In other situations, more constrained interaction may actually be preferable to simplify interactions. “Enhanced” interfaces, better than reality, can help reduce the limitations of the real-world, e.g., providing simultaneous views. Avatars in multiplayer 3-D worlds, e.g., ActiveWorlds First person games Copyright © 2005, Pearson Education, Inc.

3D Interfaces (cont.) Features for effective 3D
Use occlusion, shadows, perspective, and other 3D techniques carefully. Minimize the number of navigation steps for users to accomplish their tasks. Keep text readable. Avoid unnecessary visual clutter, distraction, contrast shifts, and reflections. Simplify user movement. Prevent errors. Simplify object movement Organize groups of items in aligned structures to allow rapid visual search. Enable users to construct visual groups to support spatial recall. Copyright © 2005, Pearson Education, Inc.

3D Interfaces (cont.) Guidelines for inclusion of enhanced 3D features: Provide overviews so users can see the big picture Allow teleportation Offer X-ray vision so users can see into or beyond objects. Provide history keeping Permit rich user actions on objects Enable remote collaboration Give users control over explanatory text and let users select for details on demand. Offer tools to select, mark, and measure. Copyright © 2005, Pearson Education, Inc.

3D Interfaces (cont.) Guidelines for inclusion of enhanced 3D features (cont.): Implement dynamic queries to rapidly filter out unneeded items. Support semantic zooming and movement Enable landmarks to show themselves even at a distance Allow multiple coordinated views Develop novel 3D icons to represent concepts that are more recognizable and memorable. Copyright © 2005, Pearson Education, Inc.

Teleoperation Two “parents”: direct manipulation in personal computers and process control in complex environments Physical operation is remote Complicating factors in the architecture of remote environments: Time delays transmission delays operation delays Incomplete feedback Feedback from multiple sources Unanticipated interferences Copyright © 2005, Pearson Education, Inc.

Virtual and Augmented Reality
Virtual reality breaks the physical limitations of space and allow users to act as though they were somewhere else Augmented reality shows the real world with an overlay of additional overlay Situational awareness shows information about the real world that surrounds you by tracking your movements in a computer model Augmented reality is an important variant Enables users to see the real world with an overlay of additional interaction. Copyright © 2005, Pearson Education, Inc.

Virtual and Augmented Reality (cont.)
Successful virtual environments depend on the smooth integration of: Visual Display Head position sensing Hand-position sensing Force feedback Sound input and output Other sensations Cooperative and competitive virtual reality Copyright © 2005, Pearson Education, Inc.

Task-Related Organization
"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." Copyright © 2005, Pearson Education, Inc.

Single Menus (cont.) Pull-down, pop-up, and toolbar menus
Pull-down menus Always available to the user by making selections on a top menu bar Pull-down menus (cont.) Key board shortcuts E.g., Ctrl-C important to support expert user efficiency Toolbars, iconic menus, and palletes Offers actions on a displayed object Pop-up menus Appear on a display in response to a check or tap with a pointing device. Copyright © 2005, Pearson Education, Inc.

Single Menus (cont.) Menus for long lists
Scrolling menus, combo boxes, and fisheye menus Scrolling menus display the first portion of the menu and an additional menu item, typically an arrow that leads to the next set of items in the menu sequence. Combo boxes combine a scrolling menu with a text-entry filed. Fisheye menus display all of the menu items on the screen at once, but show only items near the cursor at full size. Copyright © 2005, Pearson Education, Inc.

Single Menus (cont.) Sliders and alphasliders
Menus for long lists (cont.) Sliders and alphasliders When items consist of ranges or numerical values, a slider is a natual choice to allow the selection of a value. The alphaslider uses multiple levels of granularity in moving the slider thumb and therefore can support tens or hundreds of thousand of items. Copyright © 2005, Pearson Education, Inc.

Single Menus (cont.) Menus for long lists (cont.)
Two-dimensional menus “Fast and vast” two-dimensional menus give users a good overview of the choices, reduce the number of required actions, and allow rapid selection. Copyright © 2005, Pearson Education, Inc.

Single Menus (cont.) Embedded menus and hotlinks
Embedded menus are an alternative to explicit menus It is natural to allow users reading about people, events, and places to retrieve detailed information by selecting menus in context. Copyright © 2005, Pearson Education, Inc.

Combination of multiple menus
Linear menu sequences and simultaneous menus Linear Guide the user through complex decision-making process. E.g. cue cards or "Wizards" Effective for novice users performing simple tasks Simultaneous Present multiple active menus at the same time and allows users to enter choices in any order Copyright © 2005, Pearson Education, Inc.

Combination of multiple menus (cont.)
Tree-structured menus Designers can form categories of similar items to create a tree structure E.g., fonts, size style, spacing Fast retrieved if natural and comprehensive Use terminology from the task domain Expanding menus maintain the full context of each choice E.g., Windows Explorer Copyright © 2005, Pearson Education, Inc.

Combination of multiple menus (cont.)
Menu Maps Menu maps can help users stay oriented in a large menu tree Effective for providing overviews to minimize user disorientation. Acyclic and Cyclic Networks Useful for social relationships transportation routing scientific-journal citations Can cause confusion and disorientation. Copyright © 2005, Pearson Education, Inc.

Content Organization Task-related grouping in tree organization
Create groups of logically similar items Form groups that cover all possibilities Make sure that items are nonoverlapping Use familiar terminology, but ensure that items are distinct from one another Copyright © 2005, Pearson Education, Inc.

Content Organization (cont.)
Item Presentation Sequence The order of items in the menu is important, and should take natural sequence into account when possible: Time Numeric ordering Physical properties When cases have no task-related orderings, the designer must choose from such possibilities as: Alphabetic sequence of terms Grouping of related items Most frequently used items first Most important items first. Copyright © 2005, Pearson Education, Inc.

Menu layout (cont.) Titles For single menus, use a simple descriptive title. For tree-structured menus, use the exact same words in the higher-level menu items as in the titles for the 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. Copyright © 2005, Pearson Education, Inc.

Menu layout Titles (cont.) Phrasing of menu items Use familiar and consistent terminology Ensure that items are distinct from one another Use consistent and concise phrasing Bring the keyword to the left Copyright © 2005, Pearson Education, Inc.

Menu layout (cont.) Techniques Indentation Upper/lower case characters Symbols such as * or - to create separators or outlines Position markers Cascading or walking menus Magic lens Copyright © 2005, Pearson Education, Inc.

Fast Movement Through Menus
Keyboard shortcuts Supports expert use Can make translation to a foreign language more difficult Bookmarks in browsers User configured toolbars Copyright © 2005, Pearson Education, Inc.

Data Entry with Menus: Form Fillin, Dialog Boxes, and Alternatives
Appropriate when many fields of data must be entered: Full complement of information is visible to user. Display resembles familiar paper forms. Few instructions are required for many types of entries. Users must be familiar with: Keyboards Use of TAB key or mouse to move the cursor Error correction methods Field-label meanings Permissible field contents Use of the ENTER and/or RETURN key. Copyright © 2005, Pearson Education, Inc.

Form-Fillin Design Guidelines Meaningful title Comprehensible instructions Logical grouping and sequencing of fields Visually appealing layout of the form Familiar field labels Consistent terminology and abbreviations Visible space and boundaries for data-entry fields Convenient cursor movement Error correction for individual characters and entire fields Error prevention Error messages for unacceptable values Optional fields clearly marked Explanatory messages for fields Completion signal Copyright © 2005, Pearson Education, Inc.

Combination of menu and form-fillin techniques. Internal layout guidelines: Meaningful title, consistent style Top-left to bottom-right sequencing Clustering and emphasis Consistent layouts (margins, grid, white space, lines, boxes) Consistent terminology, fonts, capitalization, justification Standard buttons (OK, Cancel) Error prevention by direct manipulation Copyright © 2005, Pearson Education, Inc.

Dialog Boxes (cont.) External Relationship Smooth appearance and disappearance Distinguishable but small boundary Size small enough to reduce overlap problems Display close to appropriate items No overlap of required items Easy to make disappear Clear how to complete/cancel Copyright © 2005, Pearson Education, Inc.

Audio Menus and Menus for Small Displays
Menu systems in small displays and situations where hands and eyes are busy are a challenge. Audio menus Verbal prompts and option descriptions Input is normally verbal or keypad Not persistent, like a visual display, so memorization is required. Request users can avoid listening to options Copyright © 2005, Pearson Education, Inc.

Audio Menus and Menus for Small Displays (cont.)
Menu for small displays E.g., entertainment, communication services Learnability is a key issue Hardware buttons Navigation, select Expect interactions Tap interface GPS and radio frequency identification provides same automatic input Copyright © 2005, Pearson Education, Inc.

An Instructor’s Outline of Designing the User Interface 4th Edition

Similar presentations

Presentation on theme: "An Instructor’s Outline of Designing the User Interface 4th Edition"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

An Instructor’s Outline of Designing the User Interface 4th Edition

Similar presentations

Presentation on theme: "An Instructor’s Outline of Designing the User Interface 4th Edition"— Presentation transcript:

Similar presentations

About project

Feedback