© 2010 Pearson Addison-Wesley. All rights reserved. Addison Wesley is an imprint of Designing the User Interface: Strategies for Effective Human-Computer.

Slides:



Advertisements
Similar presentations
Chapter 11 Designing the User Interface
Advertisements

Introduction to Microsoft Office 2007 with focus on MS Word
1 Official Interface Guidelines by David Catmull User interface documentation published by Apple and Microsoft.
User Interface Design Notes p7 T120B pavasario sem.
© 2010 Pearson Addison-Wesley. All rights reserved. Addison Wesley is an imprint of Designing the User Interface: Strategies for Effective Human-Computer.
Copyright © 2005, Pearson Education, Inc. An Instructor’s Outline of Designing the User Interface 4th Edition by Ben Shneiderman & Catherine Plaisant Slides.
Interaction Styles Course 6, CMC, 07/10/03 Direct Manipulation
Dialog Styles. The Five Primary Styles of Interaction 4 Menu selection 4 Form fill-in 4 Command language 4 Natural language 4 Direct manipulation.
Dialog Styles. The Six Primary Styles of Interaction n Q & A n Menu selection n Form fill-in n Command language n Natural language n Direct manipulation.
Design Issues Managing Design Processes Design Tools Direct Manipulation Course 5, CMC, 30/09/03.
Lecture 7 Date: 23rd February
User Interface Design: Methods of Interaction. Accepted design principles Interface design needs to consider the following issues: 1. Visual clarity 2.
Understanding and Conceptualizing Interaction Chapter 2.
The Xerox “Star” A Retrospective By Bruno Nadeau & Luv Sharma.
Ch 7 & 8 Interaction Styles page 1 CS 368 Designing the Interaction Interaction Design The look and feel (appearance and behavior) of interaction objects.
1 Chapter 6 Direct Manipulation and Virtual Environment.
Chapter 2: Understanding and conceptualizing interaction
2D or 3D ? Presented by Xu Liu, Ming Luo. Is 3D always better than 2D? NO!
User Interface Design Users should not have to adapt to a piece of software; the software should be designed to fit the user.
Dialogue Styles.
Other Interaction Styles: Direct Manipulation, Haptic, Multimedia, Multimodal, Virtual Reality, Video Games Dr.s Barnes and Leventhal.
1 User Interface Design CIS 375 Bruce R. Maxim UM-Dearborn.
Chapter 13: Designing the User Interface
CSC450 Software Engineering
McGraw-Hill/Irwin Copyright © 2008 by The McGraw-Hill Companies, Inc. All rights reserved. Chapter 3 Basic Application Software.
Design, goal of design, design process in SE context, Process of design – Quality guidelines and attributes Evolution of software design process – Procedural,
Open and save files directly from Word, Excel, and PowerPoint No more flash drives or sending yourself documents via Stop manually merging versions.
IES 506 – Human Computer Interaction
Chapter 2: Understanding and conceptualizing interaction Question 1.
Direct Manipulation Lecture 7.
Chapter 11: Interaction Styles. Interaction Styles Introduction: Interaction styles are primarily different ways in which a user and computer system can.
Direct Manipulation and Virtual Environment
Systems Analysis and Design in a Changing World, 6th Edition
Teaching with Multimedia and Hypermedia
CHAPTER 6 BEN CARSON SUNIL D SOUZA RAJESH GOLLA. Section Introduction Users of systems incorporating direct manipulation are enthusiastic supporters.
11.10 Human Computer Interface www. ICT-Teacher.com.
Lecture 6 User Interface Design
The ID process Identifying needs and establishing requirements Developing alternative designs that meet those requirements Building interactive versions.
© 2010 Pearson Addison-Wesley. All rights reserved. Addison Wesley is an imprint of Designing the User Interface: Strategies for Effective Human-Computer.
Copyright © 2005, Pearson Education, Inc. An Instructor’s Outline of Designing the User Interface 4th Edition by Ben Shneiderman & Catherine Plaisant Slides.
© 2010 Pearson Addison-Wesley. All rights reserved. Addison Wesley is an imprint of Designing the User Interface: Strategies for Effective Human-Computer.
COMPSCI 345 S1 C and SoftEng 350 S1 C Interaction Styles Lecture 4 Chapter 2.3 (Heim)
Paradigms Material from Authors of Human Computer Interaction Alan Dix, et al.
AVI/Psych 358/IE 340: Human Factors Interfaces and Interaction September 22, 2008.
Why do we need good user interfaces?. Goals of User Interfaces Usable – how much effort to do a task? – example: often-used buttons easier to find – example:
INTERACTION STYLES (continued) INTERACTION DESIGN PROCESS Textbook: S. Heim, The Resonant Interface: HCI Foundations for Interaction Design [Chapter 2]
© 2010 Pearson Education, Inc. | Publishing as Prentice Hall1 Computer Literacy for IC 3 Unit 2: Using Productivity Software Chapter 1: Starting with Microsoft.
C OMPUTING E SSENTIALS Timothy J. O’Leary Linda I. O’Leary Presentations by: Fred Bounds.
Fall 2002CS/PSY Dialog Design 2 Direct Manipulation 1) Continuous visibility of the objects and actions of interest 2) Rapid, reversible, incremental.
© 2010 Pearson Addison-Wesley. All rights reserved. Addison Wesley is an imprint of Designing the User Interface: Strategies for Effective Human-Computer.
Yonglei Tao School of Computing & Info Systems GVSU Ch 7 Design Guidelines.
USER INTERFACE DESIGN (UID). Introduction & Overview The interface is the way to communicate with a product Everything we interact with an interface Eg.
Conceptual Model Design Informing the user what to do Lecture # 10 (a) Gabriel Spitz.
Copyright © 2005, Pearson Education, Inc. Chapter 6 Direct Manipulation and Virtual Environment.
Users and the Interface When designing an information system you need to have a clear idea of who the target audience is. If the target audience is an.
Conceptual Model Design Informing the user what to do Lecture 10a Gabriel Spitz 1.
Contextual menus Provide access to often-used commands that make sense in the context of a current task Appear when the user presses the Control key while.
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Addison Wesley is an imprint of Designing the User Interface: Strategies for Effective.
An Instructor’s Outline of Designing the User Interface 4th Edition
11.10 Human Computer Interface
An Instructor’s Outline of Designing the User Interface 4th Edition
INTERACTION PARADIGMS
Dialog Design 2 Direct Manipulation
CHAPTER 7: Information Visualization
Kuliah #5: Direct Manipulation and Virtual Environments
CHAPTER 4: Virtual Environments
CHAPTER 5: Direct Manipulation and Virtual Environments
CHAPTER 3: Direct Manipulation
CHAPTER 2: Guidelines, Principles, and Theories
Presentation transcript:

© 2010 Pearson Addison-Wesley. All rights reserved. Addison Wesley is an imprint of Designing the User Interface: Strategies for Effective Human-Computer Interaction Fifth Edition Ben Shneiderman & Catherine Plaisant in collaboration with Maxine S. Cohen and Steven M. Jacobs CHAPTER 5: Direct Manipulation and Virtual Environments

1-2 © 2010 Pearson Addison-Wesley. All rights reserved. Introduction Good interfaces => Satisfied user –Competence in performing tasks –Ease in learning the system –Confidence in retaining mastery over time –Enjoyment in using the system Direct-manipulation interfaces => Good interfaces –Visible objects –Rapid, reversible, incremental actions –Pointing actions 6-2

1-3 © 2010 Pearson Addison-Wesley. All rights reserved. Introduction Newer concepts extend direct manipulation Include –Collaborative interfaces –Touchable interfaces –Virtual reality –Augmented reality –Teleoperation 6-3

1-4 © 2010 Pearson Addison-Wesley. All rights reserved. Overview Reviews important historical examples Explores principles of direct manipulation Provides psychological jsutifications Raises concerns Newer concerns –3D –Teleoperation –Virtual and augmented reality 6-4

1-5 © 2010 Pearson Addison-Wesley. All rights reserved. Examples of Direct-Manipulation Systems Applications Office Automation Spatial Data Management System Video Games Computer Aided Design 6-5

1-6 © 2010 Pearson Addison-Wesley. All rights reserved. Direct-Manipulation Systems Command line vs. display editors Line editors (vi) are generally more flexible and powerful Training times with display editors are much less WYSIWYG display editors (WORD PROCESSORS): –Display a full page of text –Display document in the form it will appear when printed –Show and control cursor motion through physically obvious and intuitively natural means –Use of labeled icon for actions –Display results of an action immediately –Provide rapid response and display –Offer easily reversible actions 6-6

1-7 © 2010 Pearson Addison-Wesley. All rights reserved. Direct-Manipulation Systems: WYSIWYG word processing 6-7

1-8 © 2010 Pearson Addison-Wesley. All rights reserved. Direct-Manipulation Systems Technologies influenced by concepts learned about the UI in the word processor: Integrated graphics, animations, etc. Spreadsheets Desktop publication software Presentation software Hypermedia environments (eg WWW) Improved macro facilities Spell checker and thesaurus Grammar checkers 6-8

1-9 © 2010 Pearson Addison-Wesley. All rights reserved. Direct-Manipulation Systems VisiCalc spreadsheet (1979) and its descendants VisiCalc - propagates changes across the worksheet Successful spatial data-management systems depend on choosing appropriate: –Icons –Graphical representations –Natural and comprehensible data layouts Competitors –Lotus (1980s) –Quattro Pro –Excel (current leader) 6-9

1-10 © 2010 Pearson Addison-Wesley. All rights reserved. Direct-Manipulation Systems : spreadsheet 6-10

1-11 © 2010 Pearson Addison-Wesley. All rights reserved. Direct-Manipulation Systems : Office Automation Xerox Star (1982) –Text formatting, graphics, fonts, cursor-based UI Apple Lisa –Not commercial success; laid groundwork for.. Apple MacIntosh –Simplified decisions –Pull-down menus, window manipulation, editing graphics and text, dragging of icons Microsoft Window now dominates –Improved window management, adaptable UI 6-11

1-12 © 2010 Pearson Addison-Wesley. All rights reserved. Direct-Manipulation Systems : spatial data management 6-12 Xeroc PARC’s Information Visualizer ArcGIS  Google Maps Google Earth

1-13 © 2010 Pearson Addison-Wesley. All rights reserved. Direct-Manipulation Systems : Video Games Most exciting, well-engineered, and commercially successful example of direct-manipulation systems  Video Games Pong first video game Nintendo Wii, Sony PlayStation, and Microsoft Xbox continue to evolve –3D, stereo sound, multiplayer, wireless controllers –Commands are physical actions whose results are immediately shown on screen –No syntax to remember  no syntax error messages –Games continuously display a score  feedback encourages mastery Game Examples: –SimCity – good example of direct manipulation / urban planning –Second Life – social virtual world –Spore – evolving creatures –Myst – puzzle; well received –DOOM and Quake controversial –World of Warcraft – massive multiplayer game 6-13

1-14 © 2010 Pearson Addison-Wesley. All rights reserved. Direct-Manipulation Systems Guitar Hero video game 6-14

1-15 © 2010 Pearson Addison-Wesley. All rights reserved. Direct-Manipulation Systems : Computer-aided design Computer-aided design (CAD) use direct manipulation –Engineering, Architecture, Automobile Parts Designers –Examples: AutoCAD, Autodesk Inventor Computer-aided manufacturing (CAM) –Honeywells’ Experion Process Knowledge System –plant operations/process control Manipulate the object of interest Generate alternatives easily Explain the impact Problem solving by analogy to the real-world 6-15

1-16 © 2010 Pearson Addison-Wesley. All rights reserved. Continuing evolution of Direct- Manipulation Systems Personal finance / checkbook maintenance Travel Home automation Dashboards – manage information Ubiquitous computing Immersive Environments Augment Reality Ambient Devices Touchable Devices 6-16

1-17 © 2010 Pearson Addison-Wesley. All rights reserved. Continuing evolution of Direct- Manipulation Systems Direct-Manipulation interfaces are being used in a wide range of applications, e.g. management dashboard for a retail store 6-17

1-18 © 2010 Pearson Addison-Wesley. All rights reserved. Continuing evolution of Direct- Manipulation Systems 6-18

1-19 © 2010 Pearson Addison-Wesley. All rights reserved. Direct Manipulation Problems Spatial or visual representations can be too spread out High-level flowcharts and database-schema can become confusing Designs may force valuable information off of the screen Users must learn the graphical representations The visual representation may be misleading Typing commands with the keyboard may be faster 6-19

1-20 © 2010 Pearson Addison-Wesley. All rights reserved. Principles of Direct Manipulation 1.Continuous representations of objects and actions of interest with meaningful visual metaphors. –Novices learn, masters quick, intermittent users retain, can see actions further goals 2.Physical actions or presses of labeled buttons, instead of complex syntax. –Easy to learn, fewer errors, users feel in control 3.Rapid, incremental, reversible actions whose effects on the objects are visible immediately. 6-20

1-21 © 2010 Pearson Addison-Wesley. All rights reserved. Visual Thinking and Icons Attracts right-brained thinkers and challenges left- brained thinkers I in WIMP is icon - 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 more visible –Design the movement animation, e.g. dragging –Add detailed information (color for age of file) –Explore combinations of icons to create new objects or actions 6-21

1-22 © 2010 Pearson Addison-Wesley. All rights reserved. 3D Interfaces “Pure” 3D interfaces have strong utility in some context, –e.g., medical, product design, scientific visualization Other situations, more constrained 2D interfaces may be preferable to simplify interactions –e.g. 3D bar charts, air-traffic control, digital libraries “Enhanced” interfaces, better than reality, can help reduce the limitations of the real-world, –e.g., providing simultaneous views, flying, x-ray vision Games are good example –Avatars in multiplayer 3-D worlds –First person games 6-22

1-23 © 2010 Pearson Addison-Wesley. All rights reserved. 3D Interfaces 6-23

1-24 © 2010 Pearson Addison-Wesley. All rights reserved. 3D Interfaces Features for effective 3D: –Use occlusion, shadows, perspective, etc. carefully. –Minimize 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. 6-24

1-25 © 2010 Pearson Addison-Wesley. All rights reserved. 3D Interfaces Guidelines for inclusion of enhanced 3D features: –Provide overviews so users can see the big picture –Allow teleoperation (more later) –Offer X-ray vision so users can see into or beyond objects. –Provide history keeping (for undo, redo) –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. 6-25

1-26 © 2010 Pearson Addison-Wesley. All rights reserved. 3D Interfaces Guidelines for inclusion of enhanced 3D features : –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. 6-26

1-27 © 2010 Pearson Addison-Wesley. All rights reserved. Teleoperation Derives from two concepts: –direct manipulation in personal computers –process control in complex environments Physical operation is remote controlled –Surgery, power plants, chemical plants, military ops, computer- supported collaborative work Complicating factors in the architecture of remote environments: –Time delays transmission delays operation delays –Incomplete feedback –Feedback from multiple sources –Unanticipated interferences 6-27

1-28 © 2010 Pearson Addison-Wesley. All rights reserved. Virtual and Augmented Reality Virtual reality can break physical laws and allow users to act as though they were somewhere else 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. 6-28

1-29 © 2010 Pearson Addison-Wesley. All rights reserved. Virtual and Augmented Reality 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 6-29

1-30 © 2010 Pearson Addison-Wesley. All rights reserved. Impact of this technology in our everyday lives 6-30

1-31 © 2010 Pearson Addison-Wesley. All rights reserved. Summary Most appealing systems –Enjoyable UI –Customizable –Natural representations of objects and actions –Easy to learn, use, and retain –Actions are rapid, reversible and incremental –Performed with movements and not syntax 6-31

1-32 © 2010 Pearson Addison-Wesley. All rights reserved. Summary Having direct-manipulation interface does not ensure success –Bad design –Slow implementation –Inadequate functionality –May not be appropriate Use iterative design process (ch 3) and test advanced direct-manipulation systems 6-32