Direct Manipulation Lecture 7.

Slides:



Advertisements
Similar presentations
Chapter 11 Designing the User Interface
Advertisements

1 CS 501 Spring 2002 CS 501: Software Engineering Lecture 11 Designing for Usability I.
© 2010 Pearson Addison-Wesley. All rights reserved. Addison Wesley is an imprint of Designing the User Interface: Strategies for Effective Human-Computer.
MTP – Stage 1 Sanobar Nishat. Outline  Peculiarities of the mobile visualization context  Different aspects of mobile visualization design  Map-based.
Information Retrieval: Human-Computer Interfaces and Information Access Process.
© 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.
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.
Ch 7 & 8 Interaction Styles page 1 CS 368 Designing the Interaction Interaction Design The look and feel (appearance and behavior) of interaction objects.
Information Retrieval: Human-Computer Interfaces and Information Access Process.
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.
Other Interaction Styles: Direct Manipulation, Haptic, Multimedia, Multimodal, Virtual Reality, Video Games Dr.s Barnes and Leventhal.
Discussion Silvia Lindtner INF 132 April 07. Fitts’ law - recap A predictive model of time to point at an object Help decide the location and size of.
1 User Interface Design CIS 375 Bruce R. Maxim UM-Dearborn.
Chapter 13: Designing the User Interface
Chapter 3 Software Two major types of software
CSC450 Software Engineering
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.
1 ADVANCED MICROSOFT POWERPOINT Lesson 7 – Working with Visual and Sound Objects Microsoft Office 2003: Advanced.
Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise.
Multimedia Design. Table of Content 1.Navigational structures 2.Storyboard 3.Multimedia interface components 4.Tips for interface design.
IES 506 – Human Computer Interaction
Chapter 9 Introduction to ActionScript 3.0. Chapter 9 Lessons 1.Understand ActionScript Work with instances of movie clip symbols 3.Use code snippets.
Chapter 2: Understanding and conceptualizing interaction Question 1.
1 Theories Lecture 3. CS774 – Spring Automation and human control Successful integration:  Users can avoid: Routine, tedious, and error prone tasks.
Interface Analysis Report
Chapter 11-Multimedia Authoring Tools. Overview Introduction to multimedia authoring tools. Types of authoring tools. Cross-platform authoring notes.
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
Design. Hard design - increase control. - Displays are more virtual / artificial. Marketplace pressure: - Adding operations cheaper. Adding controls expensive.
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.
Computing Fundamentals Module Lesson 19 — Using Technology to Solve Problems Computer Literacy BASICS.
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.
CHAPTER TEN AUTHORING.
©2001 Southern Illinois University, Edwardsville All rights reserved. Today Fun with Icons Thursday Presentation Lottery Q & A on Final Exam Course Evaluations.
Design Rules-Part B Standards and Guidelines
AVI/Psych 358/IE 340: Human Factors Interfaces and Interaction September 22, 2008.
INFO 355Week #71 Systems Analysis II User and system interface design INFO 355 Glenn Booker.
Chapter 13 Andrew Bates Jay Babb Steve Haroz. Introduction We want as much information on the screen as possible without too much eye- head movement Window.
C OMPUTING E SSENTIALS Timothy J. O’Leary Linda I. O’Leary Presentations by: Fred Bounds.
Computing Fundamentals Module Lesson 6 — Using Technology to Solve Problems Computer Literacy BASICS.
Introduction to Interactive Media Interactive Media Tools: Authoring Applications.
Chapter 5:User Interface Design Concepts Of UI Interface Model Internal an External Design Evaluation Interaction Information Display Software.
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.
Using Technology to Solve Problems Unit 2 Mod 2 SO 7.
© 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
CS 321: Human-Computer Interaction Design
An Instructor’s Outline of Designing the User Interface 4th Edition
Human Computer Interaction Lecture 20 Universal Design
CHAPTER 8 Multimedia Authoring Tools
Understand Windows Forms Applications and Console-based Applications
Dialog Design 2 Direct Manipulation
GRAPHICAL USER INTERFACE
Kuliah #5: Direct Manipulation and Virtual Environments
CHAPTER 5: Direct Manipulation and Virtual Environments
CHAPTER 3: Direct Manipulation
Presentation transcript:

Direct Manipulation Lecture 7

Goals for our Interfaces 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 CS774 – Spring 2006

Summary of Direct Manipulation Continuous representation of the objects of interest. Physical actions instead of complex syntax Rapid incremental reversible operations whose impact on the object of interest is immediately visible. Users get immediate feedback from their actions. CS774 – Spring 2006

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 Training times with display editors are much less than line editors Offer easily reversible actions CS774 – Spring 2006

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 CS774 – Spring 2006

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 CS774 – Spring 2006

Examples of Direct-Manipulation Systems (cont.) CS774 – Spring 2006

Examples of Direct-Manipulation Systems (cont.) 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 SimCity Myst well received DOOM and Quake controversial CS774 – Spring 2006

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 CS774 – Spring 2006

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 Users must learn the graphical representations The visual representation may be misleading Typing commands with the keyboard may be faster Forces information off the screen -> requires scrolling or multiple actions Airports use icons to communicate in multilingual environment – meanings of icons may not be obvious Users draw incorrect conclusions and permissible actions CS774 – Spring 2006

Question Refer to the following interface: Name ways to update the above interface to support the principles of direct manipulation. Draw a sketch of redesign. CS774 – Spring 2006

Question An airline company is designing a new on-line reservation system. They want to add some direct-manipulation features. For example, they would like customers to click a map to specify the departure cities and the destinations, and to click on the calendar to indicate their schedules. List benefits and problems of the new idea compared with their old system, which required the customer to do the job by typing text. Benefits Problems CS774 – Spring 2006

Beyond Direct Manipulation Direct Sonification Applying sounds to interfaces in order to convey more information Example in Web Browsing: indicate system events, such as data transfer, launch of “plug-ins”, errors used “pops and clicks,” sliding sounds, and breaking of glass sounds. For finding songs in a database, speed task completion time by playing multiple files simultaneously Audibility – the concept of how well a system can use auditory representation Audibility is good, the users will perform their work better, faster, with fewer errors, and a higher degree of satisfaction From: After direct manipulation---direct sonification By: Mikael Fernström, Caolan McNamara October 2005   ACM Transactions on Applied Perception (TAP),  Volume 2 Issue 4 CS774 – Spring 2006

Interface-Building Tools 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 CS774 – Spring 2006

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 CS774 – Spring 2006

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 CS774 – Spring 2006

3D Interfaces (cont.) ActiveWorlds, a multi-user environment where users interact and create user-constructed "worlds" such as shopping malls, Yellowstone Nat'l Park, and a user-created garden with a chat window open on the bottom CS774 – Spring 2006

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. Some features are the same as other interfaces (Prevent errors) Other features new (enable users to construct visual groups to support spatial recall) CS774 – Spring 2006

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. CS774 – Spring 2006

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. CS774 – Spring 2006

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 CS774 – Spring 2006

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. CS774 – Spring 2006

CS774 – Spring 2006

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 CS774 – Spring 2006

Overview of augmented reality Ronald Azuma August 2004 Proceedings of the conference on SIGGRAPH 2004 course notes GRAPH '04 CS774 – Spring 2006