IES 506 – Human Computer Interaction

Slides:



Advertisements
Similar presentations
Chapter 11 Designing the User Interface
Advertisements

© 2010 Pearson Addison-Wesley. All rights reserved. Addison Wesley is an imprint of Designing the User Interface: Strategies for Effective Human-Computer.
CISB213 Human Computer Interaction Introduction and Overview.
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.
Design Activities in Usability Engineering laura leventhal and julie barnes.
Dialog Styles. The Five Primary Styles of Interaction 4 Menu selection 4 Form fill-in 4 Command language 4 Natural language 4 Direct manipulation.
Class 6 LBSC 690 Information Technology Human Computer Interaction and Usability.
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.
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.
1 Chapter 6 Direct Manipulation and Virtual Environment.
Chapter 2: Understanding and conceptualizing interaction
These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided with permission by.
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.
1 User Interface Design CIS 375 Bruce R. Maxim UM-Dearborn.
Chapter 13: Designing the User Interface
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,
User Interface Design Chapter 11. Objectives  Understand several fundamental user interface (UI) design principles.  Understand the process of UI design.
Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise.
1 ISE 412 Human-Computer Interaction Design process Task and User Characteristics Guidelines Evaluation.
Chapter 2: Understanding and conceptualizing interaction Question 1.
People in multimedia Systems. Multimedia Systems Multimedia systems are designed by a team of people who specialise in a particular field, For example:
Direct Manipulation Lecture 7.
Human Computer Interaction Semester 1, 2013/2013.
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
SE 204, IES 506 – Human Computer Interaction Lecture 1: Introduction Lecturer: Gazihan Alankuş Please look at the last two slides for assignments (marked.
System Design: Designing the User Interface Dr. Dania Bilal IS582 Spring 2009.
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
Overview Prototyping and construction Conceptual 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.
Object-Oriented Software Engineering Practical Software Development using UML and Java Chapter 7: Focusing on Users and Their Tasks.
Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application.
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)
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd Edition Copyright © 2009 John Wiley & Sons, Inc. All rights.
AVI/Psych 358/IE 340: Human Factors Interfaces and Interaction September 22, 2008.
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.
SE 204, IES 506 – Human Computer Interaction Lecture 6: Evaluating Interface Designs Lecturer: Gazihan Alankuş Please look at the end of the.
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.
Human-Computer Interaction Design process Task and User Characteristics Guidelines Evaluation ISE
Chapter – 8 Software Tools.
Design, prototyping and construction(Chapter 11).
© 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
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
Human Computer Interaction Lecture 09 Interaction Paradigms
CHAPTER 2: Guidelines, Principles, and Theories
Presentation transcript:

IES 506 – Human Computer Interaction Lecture 11: Direct Manipulation Interfaces Lecturer: Gazihan Alankuş Please look at the end of the presentation for assignments (marked with TODO)

CHAPTER 5: Direct Manipulation and Virtual Environments 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 Modified by Gazihan Alankuş

Overview Midterm exam review Project reminders Course content Direct Manipulation Virtual Environments

Project Reminders Let’s remember slides from week 1 in the next two slides here

Projects (reminder with a change) Come up with an idea Discuss it with me Present it in class Create it Do not start programming it! Find ideal users for your system Interview them and understand their frame of mind Create paper prototypes (optionally, together with users) Test the paper prototypes with the users. Learn more and improve the prototypes. At least three two iterations with the paper prototypes! Create a final prototype in Balsamiq mockups At least one more iteration Create the software (now you can start programming!) This process should result in a working user interface with high usability Verify this with at least three user tests with new users Assign them canonical tasks and watch them perform

Projects (reminder) You need to videotape all user tests and interviews You need to document the whole progress. The documentation should include the prototypes

Overview Direct Manipulation Virtual Environments

Some emotions related to user interfaces

Some emotions related to user interfaces

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 We take for granted As developers we all want these

Direct-Manipulation Interfaces

Indirect Example

Direct-Manipulation Interfaces

Direct-Manipulation Interfaces Central ideas: 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 On one end we have command line, on the other hand we have the real world

A History of Text Editors (with demonstrations) Ed (command line) Emacs, vi, etc (display editor) WYSIWYG (word processor)

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 were initially 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

Examples of Direct-Manipulation Systems Text editors / word processing software

Remember the example of curb cuts

Technologies that derive from the word processor: Integration of media Desktop publication software Slide-presentation software Hypermedia environments Improved macro facilities Spell checker and thesaurus Grammar checkers Since it is an important problem, it was well-studied. These are useful things other software also use. Remember the curb cut example!

Examples of Direct-Manipulation Systems (cont.) The VisiCalc spreadsheet and its descendants (Excel, etc) VisiCalc users delighted in watching the program propagate changes across the screen.

Examples of Direct-Manipulation Systems (cont.): spreadsheet

Examples of Direct-Manipulation Systems (cont.) Spatial Data Management In some cases, spatial representations provide a better model of reality (e.g., Google maps) Successful spatial data-management systems depend on choosing appropriate: Icons Graphical representations Natural and comprehensible data layouts

Examples of Direct-Manipulation Systems (cont Examples of Direct-Manipulation Systems (cont.) spatial data management

Examples of Direct-Manipulation Systems (cont.) Video games Great example for direct manipulation Games require pleasant and easy experiences. Direct-manipulation interfaces can provide such experiences

Examples of Direct-Manipulation Systems (cont.) Video games Nintendo Wii, Sony PlayStation, Microsoft Xbox, etc. 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 Second Life virtual world Spore, WoW, Sims, etc.

Examples of Direct-Manipulation Systems (cont.) Video games Battleship, mud

Examples of Direct-Manipulation Systems (cont.) Guitar Hero video game

Examples of Direct-Manipulation Systems (cont.) Computer-aided design

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

Examples of Direct-Manipulation Systems (cont.) Office automation Xerox Star was a pioneer with sophisticated formatting Apple Lisa System Rapid and continuous graphical interaction Microsoft Windows is a descendant

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

Continuing evolution of Direct-Manipulation Systems (cont.)

Discussion of Direct Manipulation Successful direct manipulation Present appropriate representation or model of reality Do not have to mimic the real world Can use accepted metaphors instead Should enrich the experience and make it intuitive Should require minimal effort

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 may be faster Calendar example Type in, select from combos, choose on calendar Type in could be superior with many random dates

Principles of Direct Manipulation Continuous representations of the objects and actions of interest with meaningful visual metaphors. Actions that resemble physical actions, instead of complex syntax. Rapid, incremental, reversible actions whose effects on the objects of interest are visible immediately.

Successful Use of Direct Manipulation Novices can learn quickly, usually through watching demonstrations Experts can work rapidly without limitation Knowledgeable users can retain usage Error messages are rarely needed Users can immediately see if they are making progress towards their goals and can quickly change direction if not Users have less anxiety because they can undo Confidence, mastery, feelings of control, ability to predict what will happen

Hyundai Equus Car Seat Controller

Multitouch mobile devices

Overview Direct Manipulation Virtual Environments

3D Interfaces

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 3D worlds and 3D games are a common usage of 3D interfaces

3D Interfaces

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/camera movement. 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.

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

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.

Teleoperation Controlling devices remotely and intuitively Two “parents”: direct manipulation in personal computers and process control in complex environments Physical operation is remote, observation is local

Teleoperation Complicating factors in the architecture of remote environments: Time delays transmission delays operation delays Incomplete feedback Feedback from multiple sources Unanticipated interferences

Virtual and Augmented Reality Let’s watch the Google glass video

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 information Situational awareness shows information about the real world that surrounds you by tracking your movements in a computer model

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

Impact of this technology in our everyday lives

TODO Homework 5 Improve your prototypes from HW4 by yourself. Use things that we learned in Heuristic Evaluation, as well as your own judgment. Conduct usability tests with two users. Each test should include at least these: Conceptual model extraction (before and after use) Talk-aloud usability test Video recording and a retrospective testing interview (that is also recorded) Report findings and improvements to be done in the next iteration Submission: E-mail to gazihan.ieu@gmail.com with subject “[IES 506] HW5” Deadline: 14 May