Interaction Frameworks Paradigms, and Styles

Slides:



Advertisements
Similar presentations
Interaction Techniques Level 2 Prepared by: RHR First Prepared on: Nov 23, 2006 Last Modified on: Quality checked by: MOH Copyright 2004 Asia Pacific Institute.
Advertisements

SECOND MIDTERM REVIEW CS 580 Human Computer Interaction.
INTERACTION PARADIGMS Based on: S. Heim, The Resonant Interface HCI Foundations for Interaction Design [Chapter 1] Addison-Wesley, 2007 [slides from S.
User Interface Design Notes p7 T120B pavasario sem.
Ch 11 Cognitive Walkthroughs and Heuristic Evaluation Yonglei Tao School of Computing and Info Systems GVSU.
Design Activities in Usability Engineering laura leventhal and julie barnes.
7M701 1 User Interface Design Sommerville, Ian (2001) Software Engineering, 6 th edition: Chapter 15
Lecture 7 Date: 23rd February
1 / 31 CS 425/625 Software Engineering User Interface Design Based on Chapter 15 of the textbook [SE-6] Ian Sommerville, Software Engineering, 6 th Ed.,
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.
©Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15Slide 1 User interface design l Designing effective interfaces for software systems.
User Interface Design Users should not have to adapt to a piece of software; the software should be designed to fit the user.
User interface design Designing effective interfaces for software systems Objectives To suggest some general design principles for user interface design.
The Importance of the User Interface Lecture-1 The Essential Guide to UI Design: Chapter 1 1Computer Systems Interface.
New Technologies Are Surfacing Everyday. l Some will have a dramatic affect on the business environment. l Others will totally change the way you live.
Other Interaction Styles: Direct Manipulation, Haptic, Multimedia, Multimodal, Virtual Reality, Video Games Dr.s Barnes and Leventhal.
User interface design. Recap User Interface GUI Characteristics (Windows, Icons, Menus, Pointing, Graphics) User Centered Design User Interface Design.
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,
Chapter 11: Interaction Styles. Interaction Styles Introduction: Interaction styles are primarily different ways in which a user and computer system can.
Systems Analysis and Design in a Changing World, 6th Edition
CS 580 chapter 4 paradigms.
Ch 6 - Menu-Based and Form Fill-In Interactions Yonglei Tao School of Computing & Info Systems GVSU.
There are different types of translator. An Interpreter Interpreters translate one instruction at a time from a high level language into machine code every.
11.10 Human Computer Interface www. ICT-Teacher.com.
User interface design. Recap OOD is an approach to design so that design components have their own private state and operations Objects should have constructor.
Unit 1_9 Human Computer Interface. Why have an Interface? The user needs to issue instructions Problem diagnosis The Computer needs to tell the user what.
CSC 480 Software Engineering Lecture 19 Nov 11, 2002.
Computer Graphics Lecture 28 Fasih ur Rehman. Last Class GUI Attributes – Windows, icons, menus, pointing devices, graphics Advantages Design Process.
The ID process Identifying needs and establishing requirements Developing alternative designs that meet those requirements Building interactive versions.
CHAPTER FOUR COMPUTER SOFTWARE.
AS Level ICT Selection and use of appropriate software: Interfaces.
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley The Resonant Interface HCI Foundations for Interaction Design First Edition.
Ubiquitous Computing Computers everywhere. Where are we going? What happens when the input is your car pulls into the garage, and the output is the heat.
Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Human Computer Interaction - 1 Dr. Mohammed Alabdulkareem
Chapter 1 The Big Picture.
CS CS 5150 Software Engineering Lecture 11 Usability 1.
MULTIMEDIA DEFINITION OF MULTIMEDIA
CHAPTER TEN AUTHORING.
COMPSCI 345 S1 C and SoftEng 350 S1 C Interaction Styles Lecture 4 Chapter 2.3 (Heim)
Design Rules-Part B Standards and Guidelines
AVI/Psych 358/IE 340: Human Factors Interfaces and Interaction September 22, 2008.
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley The Resonant Interface HCI Foundations for Interaction Design First Edition.
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:
Software Architecture
INTERACTION STYLES (continued) INTERACTION DESIGN PROCESS Textbook: S. Heim, The Resonant Interface: HCI Foundations for Interaction Design [Chapter 2]
E.g.: MS-DOS interface. DIR C: /W /A:D will list all the directories in the root directory of drive C in wide list format. Disadvantage is that commands.
Paradigms for Interaction New computing technologies arrive, creating a new perception of the human-computer relationship Batch processing -> Impersonal.
CSCI 1101 INTRODUCTION TO COMPUTERS 5. Basic Computer Architecture.
INTERACTION STYLES References S. Heim, The Resonant Interface HCI Foundations for Interaction Design [Chapter 2] Addison-Wesley, 2007 J. Preece, Y. Rogers,
Fall 2002CS/PSY Dialog Design 2 Direct Manipulation 1) Continuous visibility of the objects and actions of interest 2) Rapid, reversible, incremental.
Yonglei Tao School of Computing & Info Systems GVSU Ch 7 Design Guidelines.
Different Types of HCI CLI Menu Driven GUI NLI
Human Computer Interface INT211
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley The Resonant Interface HCI Foundations for Interaction Design First Edition.
Human-Computer Interaction Design process Task and User Characteristics Guidelines Evaluation ISE
Interaction Frameworks COMPSCI 345 S1 C and SoftEng 350 S1 C Lecture 3 Chapter (Heim)
Introduction to Human Factors in Information Systems Dr. Cindy Corritore Creighton University ITM 734 Fall 2005.
6. (supplemental) User Interface Design. User Interface Design System users often judge a system by its interface rather than its functionality A poorly.
Discovering Computers 2009 Chapter 1 Introduction to Computers.
AUTHOR PRADEEP KUMAR B.tech 1 st year CSE branch Gnyana saraswati college of eng. & technology Dharmaram(b)
11.10 Human Computer Interface
Unit 2 User Interface Design.
Human Computer Interaction Lecture 09 Interaction Paradigms
Chapter 6: Interfaces and interactions
Software engineering USER INTERFACE DESIGN.
Usability and user Interfaces
Human Computer Interaction
Human Computer Interaction Lecture 09 Interaction Paradigms
Presentation transcript:

Interaction Frameworks Paradigms, and Styles Chapter 3 Interaction Frameworks Paradigms, and Styles May 11, 2007 Mohamad Eid

Outline Interaction Frameworks Interaction Paradigms Large Scale Computing Personal Computing Networked Computing Mobile Computing Collaborative Environments Virtual Reality Augmented Reality Interaction Styles Command Line Menu-Based Interface Form Fill-In Question and Answer Direct Manipulation Metaphors Web Navigation Three-Dimensional Environments Natural Language Key points to review May 11, 2007 Mohamad Eid

Interaction Frameworks A framework is basically a structure that provides a context for conceptualizing something We can use these frameworks to: Structure the design process Help us to identify problematic areas within the design Help us to conceptualize the problem space as a whole May 11, 2007 Mohamad Eid

Interaction Framework System (S)—Uses its core language (computational attributes related to system state) User (U)—Uses its task language (psychological attributes related to user state) Input (I)—Uses its input language Output (O)—Uses its output language May 11, 2007 Mohamad Eid

Interaction Framework Based on Execution/Evaluation Action Cycle (EEC) Execution Phase Articulation—The user formulates a goal, which is then articulated using the input language. Performance—The input language is translated into the core language (operations that the system will carry out). Presentation—The system manifests the result of the core-language operations using the output language. Evaluation Phase Observation—The user interprets the results on the screen and reconciles them with the original goal. May 11, 2007 Mohamad Eid

Interaction Paradigms Large Scale Computing Personal Computing Networked Computing Mobile Computing Collaborative Environments Virtual Reality Augmented Reality May 11, 2007 Mohamad Eid

Interaction Paradigms Large circles represent principal paradigms. Oblong shapes represent convergent paradigms. Words without surrounding shapes represent specific system architectures (sometimes used for a paradigm reference, as in desktop computing for personal computing). May 11, 2007 Mohamad Eid

Large Scale Computing The original mainframe computers were large-scale computing machines, referred to as hosts They resided in a central location They were accessed by remote alphanumeric terminals equipped with keyboards The terminals were referred to as “dumb terminals” These systems are also referred to as host/terminal systems May 11, 2007 Mohamad Eid

Large Scale Computing Super Computers These highly specialized machines crunch large amounts of data at high speed, as in computing fluid dynamics, weather patterns, seismic activity predictions, and nuclear explosion dynamics. Supercomputers are used for the very high speed backbone (vBNS) connections that constitute the core of the Internet. National Center for Super Computing Applications (NCSA) May 11, 2007 Mohamad Eid

Personal Computing Desktop Computing The Alto, developed at the Xerox Palo Alto Research Center in 1973, was the first computer to use a GUI that involved the desktop metaphor: pop-up menus, windows, and icons The Xerox Alto computer (1973) Courtesy Palo Alto Research Center. May 11, 2007 Mohamad Eid

Personal Computing The Xerox Alto mail program (1973) The Xerox Alto computer (1973) May 11, 2007 Mohamad Eid Courtesy Palo Alto Research Center.

Personal Computing Personal-Public Computing Public Access Computing – The information divide Public Information Appliances Automated teller machine with touchscreen. Courtesy BigStockPhoto.com May 11, 2007 Mohamad Eid

Networked Computing Scope Wired - Wireless WAN – Wide Area Network MAN – Metropolitan Area Network LAN – Local Area Network PAN – Personal Area Network Wired - Wireless Wi-Fi (IEEE 802.11x) Bluetooth 3G May 11, 2007 Mohamad Eid

Mobile Computing Mobile computing technologies comprise a very diverse family of devices: Laptop computers Tablet computers Game players MP3 players PDAs Cell phones May 11, 2007 Mohamad Eid

Mobile Computing Desktop metaphors do not translate well to mobile devices. MP3 player Laptop computer Courtesy BigStockPhoto.com Tablet computer Cell phone Hybrid desktop/mobile environments can afford optimal interaction efficiency. May 11, 2007 Mohamad Eid

Mobile Computing Mobile devices can be connected to global positioning systems (GPS) These have touchscreens and voice interaction to alleviate potential visual attention problems during driving On-board navigation system. Courtesy BigStockPhoto.com May 11, 2007 Mohamad Eid

Mobile Computing Mobile devices can offer situational computing that can take advantage of location-specific information through location-based mobile services (LMS). LMS can be beneficial for location-sensitive advertisements, public service announcements, social interactions, and location-specific educational information. May 11, 2007 Mohamad Eid

Collaborative Environments Networks allow members of a group to interact with other members on shared files and documents. This creates a virtual space where people can collaborate and work collectively. Groupware Networks facilitate collaborative activities. May 11, 2007 Mohamad Eid

Collaborative Environments Collaborative work Communication Coordination Organization Presentation Computer-mediated communication (CMC) Computer-supported cooperative work (CSCW) What are some of the different types of groupware? May 11, 2007 Mohamad Eid

Collaborative Environments Remote interaction Synchronous Video conferencing Instant messaging Chat rooms Remote access white boards Asynchronous Recommender systems Bulletin boards Email May 11, 2007 Mohamad Eid

Embodied Virtuality Some of us use the term “embodied virtuality” to refer to the process of drawing computers out of their electronic shells. The “virtuality” of computer-readable data—all the different ways in which it can be altered, processed and analyzed—is brought into the physical world. (Weiser, 1991, 95) May 11, 2007 Mohamad Eid

Embodied Virtuality How do we disperse computing functionality throughout the environment? What form should EV computing take? What kind of interface does it require? How much control should we retain, and how much should be automated? May 11, 2007 Mohamad Eid

Embodied Virtuality Emerging fields Ubiquitous/pervasive computing Invisible/transparent computing Wearable computing May 11, 2007 Mohamad Eid

Embodied Virtuality - Ubiquitous/pervasive Third Paradigm (Alan Key) Devices like cameras, video recorders, musical instruments, and picture frames are becoming “smart” through the introduction of embedded chips. The essence of UbiComp is that, to fulfill their potential, computing technologies must be considered a part of the fabric of our lives and not something that resides in a gray box. May 11, 2007 Mohamad Eid

Embodied Virtuality - Ubiquitous/pervasive Ambient computing The concept of a computational grid that is seamlessly integrated into our physical environment Lighting systems Heating systems Electrical systems Smart environments that sense and recognize people Face recognition ID tags May 11, 2007 Mohamad Eid

Embodied Virtuality - Invisible/transparent The most profound technologies are those that disappear. They weave themselves into the fabric of everyday life until they are indistinguishable from it. (Weiser, 1991, 94) Two approaches Make the interface simple and intuitive Driving a car Remove the interface entirely Automotive breaking systems May 11, 2007 Mohamad Eid

Embodied Virtuality - Invisible/transparent Information Appliances PDAs, BlackBerry® devices, digital cameras, MP3 players, and portable game players. An appliance specializing in information: knowledge, facts, graphics, images, video, or sound. An information appliance is designed to perform a specific activity, such as music, photography, or writing. A distinguishing feature of information appliances is the ability to share information among themselves. (Norman, 1998, 53) A BlackBerry type of device. May 11, 2007 Mohamad Eid Courtesy of BigStockPhoto.com.

Embodied Virtuality - Wearable The underlying principle of wearable computing is the merging of information space with work space - humionics. The goal of humionics is to create an interface that is unobtrusive and easily operated under work-related conditions. Traditional I/O technologies are generally inadequate Wearable systems must take advantage of auditory and haptic as well as visual interaction. Wearable computing systems require multimodal interfaces. May 11, 2007 Mohamad Eid

Embodied Virtuality - Wearable Personal Area Network (PAN) Two types Wireless network of wearable and proximal devices (IEEE) 802.15 Working Group for WPAN Microsoft – Connect to a Bluetooth personal area network (PAN) Wearable devices that use the body to transmit signals MIT Media Lab – Intrabody Signaling IBM Personal Area Network (PAN) May 11, 2007 Mohamad Eid

Embodied Virtuality Embodied Virtuality Environments and Their Characteristics Manual Automated Fixed Portable UbiComp Some systems are manual Some systems are automated Some components are embedded Some devices are portable Invisible User does not interact with computer System takes care of all computer functionality Some system components are embedded Wearable Many of the wearable components allow manual control Some of the wearable components interact automatically with embedded sensors Some systems use situated sensors that interact with wearable components Most system components are portable (wearable) Embodied virtuality environments location/operation. May 11, 2007 Mohamad Eid

Virtual Reality The goals of the virtual reality (VR) community are the direct opposite of the goals of the EV community. EV strives to integrate computer functionality with the real world VR strives to immerse humans in a virtual world May 11, 2007 Mohamad Eid

Virtual Reality Vs. Embodied Virtuality May 11, 2007 Mohamad Eid

Virtual Reality Nonimmersive - screen-based, pointer-driven, three-dimensional (3D) graphical presentations that may involve haptic feedback VRML QuickTime VR Immersive VR environments are designed to create a sense of “being” in a world populated by virtual objects. To create a convincing illusion, they must use as many human perceptual channels as possible. May 11, 2007 Mohamad Eid

Virtual Reality - Immersive CAVE automated virtual environment at the National Center for Supercomputing Applications (NCSA). http://brighton.ncsa.uiuc.edu/~prajlich/cave.html Sketching a virtual world in the VR design tool ShadowLight. Photographs and ShadowLight application courtesy of Kalev Leetaru. Sensics piSight Virtual Reality (VR) system. http://www.sensics.com/ May 11, 2007 Mohamad Eid

Augmented Reality The goal of AR is to create a seamless integration between real and virtual objects in a way that augments the user’s perception and experience. Criteria for AR environments The virtual information must be: Relevant to and in sync with the real-world environment. May 11, 2007 Mohamad Eid

Sportvue MC1 motorcycle helmet Augmented Reality AR I/O devices Heads Up Displays (HUD) Optical see through Video see through MicroOptical MD-6 Critical Data Viewer. http://microoptical.net/ Sportvue MC1 motorcycle helmet heads-up display. http://www.sportvue.com/ May 11, 2007 Mohamad Eid

Virtuality Continuum May 11, 2007 Mohamad Eid

Interaction Styles Command Line Menu-Based Interface Form Fill-In Question and Answer Direct Manipulation Metaphors Web Navigation Three-Dimensional Environments Zoomable Interface Natural Language May 11, 2007 Mohamad Eid

Interaction Styles - Command Line Command-line interfaces are fast and powerful. Many commands are abbreviated quick and efficient Commands can be applied to many objects simultaneously fast input Some commands have multiple parameters that can be set and altered precise and flexible May 11, 2007 Mohamad Eid

Interaction Styles - Command Line Advantages of command-line interfaces: Suitable for repetitive tasks Advantageous for expert users Offer direct access to system functionality Efficient and powerful Not encumbered with graphic controls Low visual load Not taxing on system resources May 11, 2007 Mohamad Eid

Interaction Styles - Command Line Disadvantages of command-line interfaces: Low command retention Steep learning curve High error rates Heavy reliance on memory Frustrating for novice users May 11, 2007 Mohamad Eid

Interaction Styles - Menu-Based Interface Menu-driven interfaces present users with sequential hierarchal menus that offer lists of functions. Textual: key-in number of option Graphical: use arrow keys or pointing device May 11, 2007 Mohamad Eid

Interaction Styles - Menu-Based Interface Menus are based on recognition as opposed to recall No need to remember commands Users search from a list of possible choices List provides constraints Appropriate for small screens (iPod) May 11, 2007 Mohamad Eid

Interaction Styles - Menu-Based Interface Most menus are a variation on a few basic categories: Single Sequential Hierarchal Star network Web network May 11, 2007 Mohamad Eid

Interaction Styles - Menu-Based Interface Advantages of menu-based interfaces: Low memory requirements Self-explanatory Easy to undo errors Appropriate for beginners Disadvantages of menu-based interfaces: Rigid and inflexible navigation Inefficient for large menu navigation Inefficient use of screen real estate Slow for expert users May 11, 2007 Mohamad Eid

Interaction Styles - Form Fill-In Similar to menu interfaces – present screens of information Different than menu interfaces - used to capture information and proceed linearly not to navigate a hierarchical structure May 11, 2007 Mohamad Eid

Interaction Styles - Form Fill-In Advantages of form fill-in interfaces: Low memory requirements Self-explanatory Can gather a great deal of information in little space Present a context for input information Disadvantages of form fill-in interfaces: Require valid input in valid format Require familiarity with interface controls Can be tedious to correct mistakes May 11, 2007 Mohamad Eid

Interaction Styles - Question and Answer Question and answer interfaces are also called wizards. They are restricting for expert users They are easy for novice users However, they may not know the required information Users must be able to cancel a menu without affecting the state of the computer May 11, 2007 Mohamad Eid

Interaction Styles - Question and Answer Microsoft Add Network Place Wizard (a) Add Network Place wizard. (b) Select a service provider. (c) Address of the network place. May 11, 2007 Mohamad Eid

Interaction Styles - Question and Answer Advantages of question and answer interfaces: Low memory requirements Self-explanatory Simple linear presentation Easy for beginners Disadvantages of question and answer interfaces: Require valid input supplied by user Require familiarity with interface controls Can be tedious to correct mistakes May 11, 2007 Mohamad Eid

Interaction Styles - Direct Manipulation Ben Shneiderman (1982) Continuous representations of the objects and actions of interest with meaningful visual metaphors. Physical actions or presses of labeled buttons instead of complex syntax. Rapid, incremental, reversible actions whose effects on the objects of interest are visible immediately. May 11, 2007 Mohamad Eid

Interaction Styles - Direct Manipulation Three phases in Direct Manipulation - Cooper, Reimann (2003) Free Phase—How the screen looks before any user actions Captive Phase—How the screen looks during a user action (click, click-drag, etc.) Termination Phase—How the screen looks after a user action May 11, 2007 Mohamad Eid

Interaction Styles - Direct Manipulation Advantages of direct manipulation interfaces: Easy to learn Low memory requirements Easy to undo Immediate feedback to user actions Enables user to use spatial cues Easy for beginners Disadvantages of direct manipulation interfaces: Not self-explanatory Inefficient use of screen real estate High graphical system requirements May 11, 2007 Mohamad Eid

Interaction Styles - Metaphors GUIs use visual relationships to real-world objects (metaphors) Metaphors can help people relate to complex concepts and procedures by drawing on real-world knowledge Real-world affordances can be reflected What metaphors are used by contemporary GUIs? May 11, 2007 Mohamad Eid

Interaction Styles - Metaphors Microsoft Windows XP Apple OS X May 11, 2007 Mohamad Eid

Interaction Styles - Metaphors A metaphor’s function must be consistent with real-world expectations Metaphors that do not behave the way people expect will cause confusion and frustration Macintosh trashcan May 11, 2007 Mohamad Eid

Interaction Styles - Metaphors Don’t force a metaphor Potential problems with metaphors Run out of metaphors Some virtual processes and objects have no real-world counter parts Mixed metaphors Carry connotations and association May 11, 2007 Mohamad Eid

Interaction Styles - Web Navigation Two basic interaction styles Link-based navigation Sensitive to articulatory distance Ambiguous link labels increase the gulf of evaluation Search Sensitive to semantic distance Inadequate search engine algorithms increase the gulf of execution Slight advantage in development of mental models May 11, 2007 Mohamad Eid

Interaction Styles - Natural Language Natural Language Interaction (NLI) - Interacting with computers using everyday language Obstacles Language is ambiguous Meaning depends on context “Search results” “She said she did not know” Dependant on visual cues May 11, 2007 Mohamad Eid

Interaction Styles - Natural Language Two areas of development Speech recognition Semantics Grammar issues Vague meanings Contradictory statements NLIs may require constant clarification of linguistic ambiguities May 11, 2007 Mohamad Eid

Interaction Styles - Natural Language Advantages of NLI: Ease of learning Low memory requirements Flexible interaction Low screen requirements Appropriate for beginners Disadvantages of NLI: Requires knowledge of the task domain May require tedious clarification dialogues Complex system development May 11, 2007 Mohamad Eid

Summary Goals of HCI: Improve Visibility and feedback safety functionality efficiency usability Visibility and feedback Affordance and perceived affordance Goal = state; task = action Human/computer as system running on 2 processors Types, classes and abilities of users Productivity = functionality * usability Usability factors e.g. learnability, fit, acceptability Contributing disciplines e.g. linguistics, Artificial Intelligence May 11, 2007 Mohamad Eid

Summary (Cont’d) Human cognitive system - Limitations on: perception attention memory Task analysis vs. functional analysis Star model with evaluation at centre UI levels task conceptual model interaction style interaction element physical element Usability engineering Layered approach = Model View Controller Software Design Pattern Malfunction as a kind of defect (of usability) May 11, 2007 Mohamad Eid

متشکرم 谢谢 Ευχαριστώ Dankie ありがとう Asante Urakoze DMnvwd WAD MAHAD go raibh maith agaibh ありがとう متشکرم WAD MAHAD SAN TAHAY GADDA GUEY Asante Urakoze May 11, 2007 Mohamad Eid