Interaction Design Direct Manipulation Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g. w. m. rauterberg@tue. nl (c) M. Rauterberg, TU/e 04 -DEC-2002
Key references/literature: D. J. Mayhew (1992) Principles and guidelines in software user interface design. Prentice Hall. chapter 9: dialog styles - direct manipulation. ISO/FDIS 9241 (1997) Ergonomic requirements for office work with visual display terminals (VDTs). Part 16: direct-manipulation dialogues. (c) M. Rauterberg, TU/e 2
Dimensions of interaction styles • • • Initiation – Degree to which initiation of the dialogue rests with the computer or the human user. Dialogue flexibility – number of ways in which a user can perform given functions. Degree of automation – Amount of work accomplished by the system in response to a single user command. Complexity of action space – Number of different options available to the user at any given point in the dialogue. Complexity of perception space – Degree to which the interactions absorbs the memory and reasoning power of the user. Interaction style and user type (c) M. Rauterberg, TU/e [taken from Smith, 1997] 3
Sketch. Pad, Ivan Sutherland, MIT, 1963 (c) M. Rauterberg, TU/e 4
First Mouse D. Engelbart & W. English, 1964 NLS, Douglas Engelbart, Stanford Research Institute, 1968 (c) M. Rauterberg, TU/e 5
Star, Xerox, 1981 (c) M. Rauterberg, TU/e 6
Lisa Desktop, Apple, 1982 (c) M. Rauterberg, TU/e 7
A Web Community, e. Bay, 1990 s (c) M. Rauterberg, TU/e 8
The interface architecture (c) M. Rauterberg, TU/e 9
![Three different function types Secondary functions [dialog manager] Primary functions [application manager] Tertiary functions](https://present5.com/presentation/a97146af3a748111f5475d16995a968d/image-10.jpg "Three different function types Secondary functions [dialog manager] Primary functions [application manager] Tertiary functions")
Three different function types Secondary functions [dialog manager] Primary functions [application manager] Tertiary functions [dialog manager] Application object(s) (c) M. Rauterberg, TU/e 10
The function space [taken from Rauterberg, M. (1996). An empirical validation of four different measures to quantify user interface characteristics based on a general descriptive concept for interaction points. Proceedings of IEEE Symposium and Workshop on Engineering of Computer-Based Systems (IEEE Order Number: PR 07355, pp. 435 -441). IEEE Computer Society Press] (c) M. Rauterberg, TU/e 11
Two dimensions for interaction [taken from Rauterberg, M. (1996). A concept to quantify different measures of user interface attributes: a meta-analysis of empirical studies. Proceedings of IEEE International Conference on Systems, Man and Cybernetics--SMC'96 ( vol. 4, IEEE Catalog Number: 96 CH 35929, pp. 2799 -2804) IEEE Press] (c) M. Rauterberg, TU/e 12
How to measure? [taken from Rauterberg, M. (1996). Quantitative Test Metrics to Measure the Quality of User Interfaces. In: Proceedings of Fourth European Conference on Software Testing Analysis and Review--Euro. STAR'96 ( pp. TQ 2 P 2/1 - TQ 2 P 2/13). Amsterdam] (c) M. Rauterberg, TU/e 13
How to design Desktop Interfaces (DI)? • • • Menu structure (I. e. pull-down menus) discrete and partially continuous actions WIMP = Windows, Icons, Mouse, Pointing ‘desktop’ is NOT ‘direct manipulation’ the ‘desktop’ metaphor does NOT fit to all application domains (c) M. Rauterberg, TU/e 14
Desktop: example (1) (c) M. Rauterberg, TU/e 15
Desktop: example (2) (c) M. Rauterberg, TU/e 16
Desktop Interface (1): advantages • Easy to learn and remember • Direct, intuitive, "wysiwyg": allows user to focus on task semantics rather than on system semantics and syntax • Flexible, easily reversible actions • Provides context and instant, visual feedback • Exploits human use of visual/spatial cues and motor behaviour • Low typing requirements and visual feedback means less opportunity for user input error (and less error messages) (c) M. Rauterberg, TU/e 17
Desktop Interface (2): disadvantages • Can be inefficient for high frequency experts, especially touch typist, and when there are more actions and objects than can be fit on one screen • may be difficult to design recognizable icons for many objects and actions (‘what is it’ versus ‘where is it’) • icons take more screen ‘real estate’ than words (c) M. Rauterberg, TU/e 18
Desktop Interface (3) Most appropriate for: • Knowledge and experience – low typing skills – low system experience – low task experience – low application experience – high frequency of use of other systems – low computer literacy • job and task characteristics (c) M. Rauterberg, TU/e – – – low frequency of use little or no training discretionary use high turn over rate low task importance low task structure 19
Desktop Interface (4) Guideline: accompany icons with names (c) M. Rauterberg, TU/e 20
Desktop Interface (5) Guideline: choose appropriate windowing strategy (c) M. Rauterberg, TU/e 21
Desktop Interface (6) • Windowing uses: – quick context switching with place-saving – work in one, monitor another – cut and paste – compare – show more detail, preserve context – give command, see results – get HELP, preserve context – display same object in different forms • Windowing types: – system-controlled – user-controlled, tiled – user-controlled, overlapping (c) M. Rauterberg, TU/e 22
Desktop Interface (7) Windowing: experimental study [S. E. Davies, K. F. Bury and M. J. Darnell (1985) An experimental comparison of a widowed vs. a non-windowed operating system environment. Proceedings of the Human Factors Society 29 th Annual Meeting, pp. 250 -254] (c) M. Rauterberg, TU/e 23
Desktop Interface (8) Windowing: experimental study [K. Gaylin (1986) How are window used? Some notes on creating an empirically based windowing benchmark task. Proceedings CH’ 86, ACM, pp. 96 -100]] (c) M. Rauterberg, TU/e 24
Desktop Interface (9) Windowing: experimental study [S. A. Bly and J. K. Rosenberg (1986) A comparison of tiled versus overlapping windows. Proceedings CHI’ 86, ACM, pp. 101 -106] (c) M. Rauterberg, TU/e 25
Desktop Interface (10) • Windowing design guidelines: – design easy to use and learn window operations (complexity of windowing interfaces should NOT cancel out advantages). – minimise the number of window operations necessary to achieve a desired effect. – make navigation between windows particularly easy and efficient to do. – make setting up windows particularly easy to remember. (c) M. Rauterberg, TU/e – provide salient visual cues to identify ‘active’ window. – provide a consistent ‘user model’ of windows (window is an object OR workspace OR dialog box). – allow overlapping when displays are unpredictable, screens are small, and users are fairly frequent and experienced. – in overlapping windowing, provide powerful commands for arranging windows on the screen in user-tailorable configurations. 26
Historical Trends for Icon Design • Four different levels of abstraction can be found over the last 80 years. • Actual icons get more abstract compared to the past. (c) M. Rauterberg, TU/e 27
The Meaning of Icons • The numbers in the table mean the percentage of all collected answers; each intended answer is underlined. • (c) M. Rauterberg, TU/e [see Caron, J. P. , Jamieson, D. G. & Dewar, R. E. : Evaluating pictograms using semantic differential and classification technique. Ergonomics 23(2), 1980, p. 142] 28
The Icon Set for Marshalling Signals • [ redrawn from Henry Dreyfuss, Symbol Sourcebook (New York, 1972), p. 152] • See the wonderful analysis of this icon set and the recommended redesign in the marvelous book of Edward R. Tufte (Envisioning Information, 1990, Graphics Press) on page 63. (c) M. Rauterberg, TU/e 29
Redesign of Icons (1) • Design Principle: – avoid excessive detail in icon design. • (c) M. Rauterberg, TU/e [see Deborah J. Mayhew, Principles and Guidelines in Software User Interface Design (1992) pp. 316 -331] 30
Redesign of Icons (2) • Design Principles: – design the icons to communicate object relations and attributes whenever possible; – accompany icons with names. • (c) M. Rauterberg, TU/e [see Deborah J. Mayhew, Principles and Guidelines in Software User Interface Design (1992) pp. 316 -331] 31
(c) M. Rauterberg, TU/e [taken from Dominic Paul T. Piamonte (2000): Using Multiple Performance Parameters in Testing Small Graphical Symbols. Doctoral thesis, Institutionen för Arbetsvetenskap Avdelningen för Industriell ergonomi. • ISSN: 1402 -1544] 32
Recognition rates in percent (first rows, bold-faced: above 67%) and certainty ratings (second rows) for the 23 Referents by subjects from Philippines and Sweden (N=100). Note: Phil. = Philippines, Swed. = Sweden. [taken from Dominic Paul T. Piamonte (2000): Using Multiple Performance Parameters in Testing Small Graphical Symbols. Doctoral thesis, Institutionen för Arbetsvetenskap Avdelningen för Industriell ergonomi. • ISSN: 1402 -1544 • ISRN: LTU-DT--00/02 --SE] (c) M. Rauterberg, TU/e 33
Graphical symbols used in the main studies as based on Böcker (1993) for the European Telecommunications Standards Institute (ETSI, 1993). Best videophone symbols when combining hit rates, false alarms (confusions) and missing values (no answers), per country. Numbers indicate Symbol Set. (c) M. Rauterberg, TU/e 34
Benefit visual representation high concrete representation textual representation low high User’s knowledge and experiences in application domain (c) M. Rauterberg, TU/e 35
Information types static physical dynamic static States descriptive relationships spatial person sleeping features of a computer similarity between twins dimensions of a room discrete action continuous action events procedural causal switch light on ski turn start of a race repair photocopier how an engine works states descriptive relationships values evidence is uncertain person’s belief classes of religious belief prime numbers discrete action continuous action procedural causal choosing to agree/disagree monitoring success diagnosing a fault explanation of gravity conceptual dynamic (c) M. Rauterberg, TU/e 36
Media selection and combination (c) M. Rauterberg, TU/e 37
Examples for media design [taken from Rauterberg, M. (1998). About the importance of auditory alarms during the operation of a plant simulator. Interacting with Computers, vol. 10(1), pp. 31 -44] (c) M. Rauterberg, TU/e 38
Feedback of system status information (c) M. Rauterberg, TU/e 39
Desktop Interface: design guidelines • provide alternative interface for high frequency, expert user • choose a consistent icon design scheme: – depict ‘before and after’ – depict tool – depict action • accompany icons with name/labels • provide visual feedback for position, selection and movement, and physical feedback for modes! (c) M. Rauterberg, TU/e 40
Summary (1) (c) M. Rauterberg, TU/e 41
Summary (2) (c) M. Rauterberg, TU/e 42
Summary (3) (c) M. Rauterberg, TU/e 43
Summary (4) (c) M. Rauterberg, TU/e 44
How to design Direct Manipulation (DM)? • • Icons and pop-up menus Natural mappings mostly analogue and continuous actions context awareness of the system about user’s situation (c) M. Rauterberg, TU/e 45
Direct manipulation interface (c) M. Rauterberg, TU/e 46
Direct manipulation interaction (c) M. Rauterberg, TU/e 47
Trends in User Interface Technology Ubiquitous and Mobile computing (c) M. Rauterberg, TU/e Ambient rooms and Cooperative buildings 48
Head-up Displays in Cars • (c) M. Rauterberg, TU/e More information and less distraction Information on the state of the road, on the speed of the vehicle in front (supplied by the intelligent cruise control), on obstacles lying around the next bend in the road identified by the remote detection system, or direction arrows sent by the driver guidance system. . . drivers will be receiving more and more information from "intelligent" vehicle systems. Although the information is intended to enhance safe driving, there is a danger that an abundance of information may produce the opposite effect if driver glance-away time has to increase in order to apprehend the data. 49
Electronic Performance Support System • Food processing plant worker with a first-generation prototype wearable computer. • Possible applications include support for quality control data collection or assistance with environmental auditing. • This system gives its users the information the users need to perform a task as they actually perform the task. (c) M. Rauterberg, TU/e 50
Airline Applications • • Designed for individuals who demand mobility, this computer offers voice control and heads up display for complete, hands-free operation. • (c) M. Rauterberg, TU/e This remarkable ultra-lightweight computer, worn as a belt, delivers maximum information to users with a minimum of work. Users can enter or retrieve information while going about their jobs, instead of constantly returning to the shop area to check a stationary computer, or stopping work to punch keys. 51
The two different interaction areas (c) M. Rauterberg, TU/e 52
The Virtual Workbench The KOSIMA project at the TU Aachen (c) M. Rauterberg, TU/e 53
BUILD-IT: an integrative design tool • design team with different domain knowledge • unconstrained social interaction • integration of form and content • intuitive interaction style (c) M. Rauterberg, TU/e 54
Two-handed interaction. . . • hand-written input • speech input • two-handed interaction • new methods and concepts for graspable interfaces (c) M. Rauterberg, TU/e 55
Ubiquitous Computing • Two issues are of crucial importance: location and scale • Location : ubiquitous computers must know where they are • Inch-scale machines: approximate active Post-It notes • Foot-scale machines: like a sheet of paper (or a book or a magazine) • Yard-scale machines: the equivalent of a blackboard or bulletin board • Prototype tabs, pads and boards are just the beginning of ubiquitous computing (c) M. Rauterberg, TU/e 56
User Interface Types Graphical User Interface (GUI) (immersive) Virtual Environment (VE) Ubiquitous Computing (UC) Augmented Reality (AR) (c) M. Rauterberg, TU/e 57
Augmented Reality (AR) Characteristics l l Combines real and virtual: virtual objects superimposed or composited with the real world (adding and/or removing) Interactive in real time Registered in 3 -D In contrast to VE’s, AR supplements reality rather than replacing it (c) M. Rauterberg, TU/e 58
The Designer’s Outpost, UC Berkeley, 2001 (c) M. Rauterberg, TU/e 59
The Dyna. Wall and two Comm. Chairs • • It is possible that information objects can be taken at one position and put somewhere else on the display or thrown from one side to the opposite side. • Dialog boxes always appear in front of the current user(s). • (c) M. Rauterberg, TU/e The size of the Dyna. Wall opens a new set of human-computer interactions. User interface components are always at hand, etc. 60
Phantom, Sensable Technologies, 1993 (c) M. Rauterberg, TU/e 61
The Palm. Pilot • The Palm. Pilot has a lot functionality. • This device fits with its pocket size into one hand. • There is a communication channel via IR to the PC. • Small, and a reasonable price (c) M. Rauterberg, TU/e 62
Cross. Pad, IBM & Cross, 1998 (c) M. Rauterberg, TU/e Rocketbook, Gemstar, 2000 63
Electronic Paper, MIT, 2001 (c) M. Rauterberg, TU/e Electronic Paper, Xerox, 2000 64
Wearable Computer • • Sharing the data in real-time with background • Supporting user comfort • Allowing audio interactions in a noisy environment • Creating a simple user interface • (c) M. Rauterberg, TU/e Providing hands-free operation Keeping costs down 65
Wearable Computers, MIT, 1990 s (c) M. Rauterberg, TU/e 66
Home of the Future • Main characteristics: • Home automation is defined as a process or system which provides the ability to enhance one's lifestyle, and make a home more comfortable, safe and efficient. • Home automation can link lighting, entertainment, security, telecommunications, heating and air conditioning into one centrally controlled system. Bill and Melinda Gates' $97 million house (c) M. Rauterberg, TU/e 67
Office of the Future • Main characteristics: • attentive • active • adaptive (c) M. Rauterberg, TU/e 68
Design Metaphors Substitute Channel Tool 1000 (c) M. Rauterberg, TU/e 2000 history 69
![Actimates Barney, 1999 Aibo, Sony, 2000 [“Barney Control”, Dourish, et. al. (Xerox PARC), 1999]](https://present5.com/presentation/a97146af3a748111f5475d16995a968d/image-70.jpg "Actimates Barney, 1999 Aibo, Sony, 2000 [“Barney Control”, Dourish, et. al. (Xerox PARC), 1999]")
Actimates Barney, 1999 Aibo, Sony, 2000 [“Barney Control”, Dourish, et. al. (Xerox PARC), 1999] (c) M. Rauterberg, TU/e 70
Interacting with computer controlled, intelligent machines (c) M. Rauterberg, TU/e 71
Assignment-1 (1 group a 5) • Design a DM for a coffee machine: • 1) analyze all functions of the coffee machine; • 2) design a DM (incl. icons or graspable objects) for this machine; • 3) discuss the pros and cons of your design; • 4) prepare a presentation of about 10 min. (c) M. Rauterberg, TU/e 72
Assignment-2 (1 group a 5) • Assess the interface of Ms Windows: • 1) analyze the desktop interface of Ms Windows; • 2) assess this interface using the ISO 9241: part 16 procedure; • 3) discuss the pros and cons of this interface and come up with re-design recommendations; • 4) prepare a presentation of about 10 min. (c) M. Rauterberg, TU/e 73
Assignment-3 (1 group a 5) • Assess the interface of APPLE Macintosh: • 1) analyze the desktop interface of APPLE Macintosh; • 2) assess this interface using the ISO 9241: part 16 procedure; • 3) discuss the pros and cons of this interface and come up with re-design recommendations; • 5) prepare a presentation of about 10 min. (c) M. Rauterberg, TU/e 74
Assignment-4 (1 group a 5) • Design a DM for a phone: • 1) analyze all basic functions of the phone on your desk; • 2) design a DM (incl. icons or graspable objects) for this machine; • 3) discuss the pros and cons of your design; • 4) prepare a presentation of about 10 min. (c) M. Rauterberg, TU/e 75
(c) M. Rauterberg, TU/e 76
References for Guidelines Articles and Books ·Grudin, Jonathan. "The Case Against User Interface Consistency. " Communications of the ACM, October 1989. ·Microsoft Windows User Experience, Official Guidelines for User Interface Developers and Designers. Redmond, WA: Microsoft Press, 1999. (USBN: 0735605661) Organizations ·ACM Special Interest Group on Computer-Human Interaction (SIGCHI): The largest organization of UI practitioners. ·German HCI Group: A specialist group of the German Computer Society. ·Human Factors and Ergonomics Society. ·Usability Professionals Association: See their consultant directory for contract resources. Other Online Resources ·Microsoft User Experience and UI Design Resources [http: //msdn. microsoft. com/ui/] ·Useit. com [http: //www. useit. com/] (c) M. Rauterberg, TU/e 77
ISO TC 159 SC 4 Ergonomics of Human System Interaction WG 1 is responsible for ISO 7249 and ISO 9355 which deal with fundamentals of displays and controls rather than HCI. WGs 2 to 5 are responsible for ISO 9241 (see later slide). WG 5 is developing a standard dealing with the ergonomics requirements of multi-media interfaces ISO NP 14915 - see later slide. WG 6 is concerned with how ISO 9241 can be used and with ISO 13407 Human-Centred Design of Interactive Systems. WG 8 is concerned with ISO 11064, (see Table h 621 -2) on the ergonomics design of control centres, which include process plant control centres, security control centres and other, frequently safety critical control centre applications. Part 1 Principles for the design of control centres Part 2 Principles of control suite arrangement Part 3 Control room layout Part 4 Workstation layout and dimensions Part 5 Displays and controls Part 6 Environmental requirements for control rooms Part 7 Principles for the evaluation of control centres Part 8 Ergonomics requirements for specific applications (c) M. Rauterberg, TU/e 78
ISO/IEC JTC 1 SC 18 WG 9 User System Interfaces and Symbols Joint Technical Committee (JTC 1) deals with standards in the field of information technology. Sub committee 18 (SC 18) is responsible for standards for Document Processing and Related Communication. Working Group 9 is developing standards in keyboard layout, symbols and user interfaces which have relevance beyond the strict domain of document processing. It has sub-groups working on Keyboard Layout, User Interfaces and Symbols. ISO/IEC 9995 is a multi-part standard dealing with keyboard layout which replaces a number of existing standards (see Table h 621 -3). It includes a keyboard layout for multiple Latin alphabet languages and a layout for letters used on a numeric keyboard. It should be noted that WG 9 deals with the layout of keyboards, not with the key operation or other ergonomic features which are the responsibility of WG 3 of TC 159 SC 4. Part 1 General principles governing keyboard layouts Part 2 Alphanumeric Section Part 3 Complementary layout of the alpha-numeric zone of the alpha-numeric section Part 4 Numeric Section Part 5 Editing Section Part 6 Function Section Part 7 Symbols used to represent functions Part 8 Numeric zone of the numeric section, allocation of letters (c) M. Rauterberg, TU/e 79
HCI Standards ISO methods 9241 (ISO 9000 series standards address quality) Ergonomic requirements of VDT - both hardware and software in 17 parts: Introduction Guidance on task requirements Visual Display requirements keyboard requirements workstation layout and postural requirements environmental requirements display requirements with reflections requirements for displayed colours requirements for non-keyboard input devices Dialogue Principles Usability Specification Presentation of Information User Guidance and Help Menu Dialogues Command Dialogues Direct Manipulation Dialogues Form-filling Dialogues Task Design - ISO 9241 -2 The application of ergonomic principles. . . is essentially the integration of task design with the design of software - where well designed tasks ·provide for the application of an appropriate variety of skills; ·ensure that the task performed are identifiable as whole units of work rather than fragments ·provide sufficient feedback on task performance in terms meaningful to the user (c) M. Rauterberg, TU/e 80
ISO 14915 Multimedia User Interface Design Ergonomic Requirements for human-centered multimedia interfaces Status Part 1 Design Principles and Framework DIS Part 2 Multimedia Control and Navigation CD Part 3 Media Selection and Media DIS Part 4 Domain Specific Interfaces WI (c) M. Rauterberg, TU/e 81
Скачать презентацию Interaction Design Direct Manipulation Prof Dr Matthias Rauterberg
a97146af3a748111f5475d16995a968d.ppt