Copyright © 2005, Pearson Education, Inc. 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. 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 off the system to novices –Desire to explore more powerful aspects of the system

Copyright © 2005, Pearson Education, Inc. Introduction The central ideas in such satisfying interfaces (direct manipulation interfaces) –Visibility of the objects and actions of interest –Rapid, reversible, incremental actions –Replacement of typed commands by a pointing action on the object of interest Newer concept that extend direct manipulation –Virtual reality –Augmented reality –Tangible user interfaces

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 The advantages of Line editors –History keeping is easier, more flexible markup languages are available –Macros tend to be more powerful, some tasks are simpler to express The advantages of WYSIWYG word processors: –Users see a full page of text –The document is seen as it will appear when printed –Cursor action is visible –Cursor motion is natural –Labeled icons make frequent actions rapid –Immediate display of the results of an action –Rapid response and display –Easily reversible actions

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

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

Copyright © 2005, Pearson Education, Inc. Examples of Direct-Manipulation Systems (cont.)

Copyright © 2005, Pearson Education, Inc. Examples of Direct-Manipulation Systems (cont.) Spatial data management –Geographic applications: a spatial representation in the form of a map –Spatial Data Management System –Xerox PARC Information Visualizer –ArcView

Copyright © 2005, Pearson Education, Inc. Examples of Direct-Manipulation Systems (cont.) Video games From PONG to Nintendo GameCube, Sony PlayStation 2, and Microsoft Xbox Typical games provide a field of action that is visual and compelling –physical actions produces rapid responses on the screen –No syntax to remember Most games continuously display a score SimSity teaches urban planning by direct manipulation Myst well received, while DOOM and Quake controversial Limits to the applicability of the lessons of game design

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

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. Interface-Building Tools (cont.) 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. Interface-Building Tools (cont.)

Copyright © 2005, Pearson Education, Inc. Interface-Building Tools (cont.) 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. Interface-Building Tools (cont.) 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.)

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