User Interface Styles A method for getting information from the user or interfacing with a user. Usually, interfaces provide more than one style: Command.

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

Chapter 11 user support. Issues –different types of support at different times –implementation and presentation both important –all need careful design.
Chapter 12 User Interface Design
Tailoring Needs Chapter 3. Contents This presentation covers the following: – Design considerations for tailored data-entry screens – Design considerations.
MET CS 405/605 Human Computer Interface Design. Week 5 – Design  Interaction Style ~  Command Line  Menu Selection  Form Fill  Direct Manipulation.
Ch 11 Cognitive Walkthroughs and Heuristic Evaluation Yonglei Tao School of Computing and Info Systems GVSU.
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.
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.
What is usability? Usability (1): effective, efficient and satisfactory Usability (2): Ease of learning (faster the second time and so on) Recall (remember.
Ch 7 & 8 Interaction Styles page 1 CS 368 Designing the Interaction Interaction Design The look and feel (appearance and behavior) of interaction objects.
Today’s class Group Presentation More about principles, guidelines, style guides and standards In-class exercises More about usability Norman’s model of.
These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided with permission by.
1 Pertemuan 12 Interface Matakuliah: M0446/Analisa dan Perancangan Sistem Informasi Tahun: 2005 Versi: 0/0.
These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided with permission by.
Principles and Methods
User interface design Designing effective interfaces for software systems Objectives To suggest some general design principles for user interface design.
Dialog Design Command languages, direct manipulation, and WIMP.
IMS Lecture 3.2 Introduction to Interface Design IMS Systems Design and Implementation.
Dialogue Styles.
Other Interaction Styles: Direct Manipulation, Haptic, Multimedia, Multimodal, Virtual Reality, Video Games Dr.s Barnes and Leventhal.
CSC450 Software Engineering
1 Lecture 1: Course organization; Why are user interfaces hard to design and implement? and Types of User Interfaces Brad Myers Advanced User Interface.
Ch 26 & 27 User Interfaces.
Chapter 11: Interaction Styles. Interaction Styles Introduction: Interaction styles are primarily different ways in which a user and computer system can.
1 Interface Design Easy to use? Easy to understand? Easy to learn?
1 Lecture 2: Why are User Interfaces Hard to Design and Implement? and Types of User Interfaces Brad Myers Advanced User Interface Software.
Ch 6 - Menu-Based and Form Fill-In Interactions Yonglei Tao School of Computing & Info Systems GVSU.
1 SWE 513: Software Engineering Usability II. 2 Usability and Cost Good usability may be expensive in hardware or special software development User interface.
System Design: Designing the User Interface Dr. Dania Bilal IS582 Spring 2009.
1 Human-Computer Interaction  Design process  Task and User Characteristics  Guidelines  Evaluation.
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.
Lecture 6 User Interface Design
The ID process Identifying needs and establishing requirements Developing alternative designs that meet those requirements Building interactive versions.
Designing Interface Components. Components Navigation components - the user uses these components to give instructions. Input – Components that are used.
MarkNotes Question 1 The Human Computer Interface (HCI) is an important part of an ICT system. Describe four factors which should be taken.
COMPSCI 345 S1 C and SoftEng 350 S1 C Interaction Styles Lecture 4 Chapter 2.3 (Heim)
Key Applications Module Lesson 21 — Access Essentials
SE: CHAPTER 7 Writing The Program
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:
Software Architecture
INFO 355Week #71 Systems Analysis II User and system interface design INFO 355 Glenn Booker.
Evaluating a UI Design Expert inspection methods Cognitive Walkthrough
1 COSC 4406 Software Engineering COSC 4406 Software Engineering Haibin Zhu, Ph.D. Dept. of Computer Science and mathematics, Nipissing University, 100.
Usability 1 Usability evaluation Without users - analytical techniques With users - survey and observational techniques.
Chap#11 What is User Support?
Fall 2002CS/PSY Dialog Design 2 Direct Manipulation 1) Continuous visibility of the objects and actions of interest 2) Rapid, reversible, incremental.
Conceptual Design Dr. Dania Bilal IS588 Spring 2008.
Conceptual Model Design Informing the user what to do Lecture # 10 (a) Gabriel Spitz.
Styles of User Interface. Learning Objectives: By the end of this topic you should be able to: describe the characteristics of different styles of user.
Importance of user interface design – Useful, useable, used Three golden rules – Place the user in control – Reduce the user’s memory load – Make the.
User Interface Design Lecture #4 Part-A. 30 January, 2008Human Computer Interaction Spring 2008, Lecture #4A 2 Agenda Principles on User Interface Design.
Human-Computer Interaction Design process Task and User Characteristics Guidelines Evaluation ISE
Knowledge Based Systems ExpertSystems Difficulties in Expert System Development u Scarce resources – new technology – demand for trained personnel u Development.
A disciplined approach to analyzing malfunctions –Provides feedback into the redesign process 1.Play protocol, searching for malfunctions 2.Answer four.
MarkNotes Question 1 The Human Computer Interface (HCI) is an important part of an ICT system. Describe four factors which should be taken.
Chapter 6 : User interface design
Brad Myers Advanced User Interface Software Spring, 2017
Human-Computer Interaction
Difficulties in Expert System Development
Interaction Styles.
Software Engineering: A Practitioner’s Approach, 6/e Chapter 12 User Interface Design copyright © 1996, 2001, 2005 R.S. Pressman & Associates, Inc.
Software engineering USER INTERFACE DESIGN.
Dialog Design 2 Direct Manipulation
Chapter 11 user support.
Presentation transcript:

Interaction Paradigms Prof. Brad Myers, CMU Modifications by John Kelleher

User Interface Styles A method for getting information from the user or interfacing with a user. Usually, interfaces provide more than one style: Command language for experts with menus for novices Menus plus single characters (Macintosh & Windows) Appropriate style depends on type of user and task. Important issues: Who has control? Ease of use for novices. Learning time to become proficient Speed of use (efficiency) once become proficient. Generality/Flexibility/Power (how much of user interface with this technique cover?) Ability to show defaults, current values, etc. Skill requirements required (e.g., typing)

1) Question and Answer Computer asks questions, user answers. Used by some simple programs, and also expert systems. "Wizards" in Microsoft products Telephone interfaces ("press 1 for sales, 2 for support, ...") Pros and cons: + Easy to implement (writeln, readln) + Easy for novices - Can't correct previous errors, or to change your mind. Except in Wizards, often have a "Previous" button - Can be slower for experts

2) Single character commands and/or function keys: Function keys can be labeled. Pros and cons: + Fastest method for experts. + Easy to learn how. + so easier to provide telephone support ("just hit the F1 key now") + Usually very simple to implement. - Hardest to remember which key does what. - Easy to hit wrong key by mistake

3) Command Language: User types instructions to computer in a formal language. Pros and cons: + Most flexible. + Supports user initiative. + Fast for experts. + Possible to provide programming language capabilities for macros, customization, etc. + Takes less space on screen - Hardest for novices. - Requires substantial training and memorization. - Error rates usually high. - Syntax is usually very strict. - Poor error handling. - Hard for user to tell what can do. Implementation difficulty depends on availability of tools like LEX & YACC, and the complexity of the language. Related form is programming language extensions, such as in Lisp.

4. Menus: Pros and cons: Most effective with pointing device. + Very little training needed + Shows available options + Allows use of recognition memory (easier than generation) + Hierarchy can expand selection + Default or current selection can be shown. + Ability to show when parts are not relevant (e.g., greyed out) + Can be used for commands and arguments + Reduces keystrokes (compared to command languages) + Clear structure to decision making. - Usable only if there are few choices - Slow for experienced users (need accelerators) - If big hierarchy, commands can be hard to find - Uses screen space Most effective with pointing device.

5) Form Filling Like menus except have text/number fields that can be filled in. Often used on character terminals (e.g., for data entry). Macintosh and Windows Dialog Boxes are another example. Pros and cons: (Similar to menus) + Simplifies data entry. + Very little training needed + Shows available options + Allows use of recognition memory (easier than generation) + Ability to show defaults and current values. + Ability to show when parts are not relevant (e.g., greyed out) - Consumes screen space. - Expensive to internationalize. Most effective with pointing device. Apparently, most user interfaces are of this form Specialty of Visual Basic

6) Direct Manipulation As opposed to "function-oriented" WIMP (Windows, Icons, Menus, Pointing Device) Interfaces include 6 and 7 Definition: Continuous visual representation of objects and actions of interest with meaningful visual metaphors Physical actions instead of complex syntax Rapid incremental reversible operations effect on the object of interest is visible immediately Objects, once operated on, can be further operated on. Term coined by Ben Shneiderman Original system: Sketchpad from 1962 "Object-oriented" from user's point of view As opposed to "function-oriented" Usually select object, then give command Hollan argues this user feel more important to DM than Shneiderman's methods

Direct Manipulation, cont. Pros and cons: + User initiated + Easy to learn, intuitive, analogical + Fast to use for object that are on the display + Easily augmented with menus and forms + Provides closure of actions and gesture. + Errors can be avoided. + High subjective satisfaction (fun). - Can be inconvenient and slow if user knows the name of an un-displayed object, but must find it anyway. - Limited power; not all desired actions have a DM analog. - Difficult to provide macros, other user extensible/customizable features. - Difficult to implement

7) WYSIWYG: "What you see is what you get". Like direct manipulation, but more so. Pros and cons: (Similar to direct manipulation) + Can always tell what final result will be. - Screen image may be hard to read/interpret, especially if screen resolution is too low. - Cannot show hidden structure (how the picture was made). - May be very slow at run-time (e.g., page breaks) - Extremely difficult to implement. - WYSIATI: What You See Is All There Is - lack of structure; no ability to show structure

Next generation "Non-Command" or "Next-generation" or “Post-WIMP” Interfaces “Recognition-Based” interfaces "Natural" actions invoke computer response. Issues: mis-interpretation, feedback

8) Gestures: Like user would mark on paper Examples Pros Cons Newton, Pilot, GO, Windows for Pen, etc. Pros can be very natural to learn often faster to execute (more direct) Cons users must memorize gestures computationally high

9) Natural Language E.g., a subset of normal English. Includes speech Pros and cons: + Theoretically easiest for learning. + Speaking is the fastest output technique. - Rather slow for typing - Requires clarification dialog. - Unpredictable. - General systems are impossible with today's technology. Research with Bernhard Suhn showing that if factor in correction times, speech input may be slower and less natural than typing, etc.

Example Dragging on the “handles” manipulates the size of the rectangle

Cognitive Issues in DM Directness of DM is measure of distance between: Gulf of Execution & Gulf of Evaluation Semantic Directness Relation between user expression and meaning of expression at interface E.g. integration of tools in Office Articulatory Directness Relation between the meanings of expressions and their physical form E.g. indicator signal in car Consider text ‘drag-and-drop’ editing

WYSIWYG

Information Visualisation Computer-based “visualisation” Computer can display information many times faster than we can input To find a mapping from elements and relationships in the chosen domain into display elements and relationships To make perceptually prominent those things that we wish to be conceptually prominent To make the mapping in a principled, consistent way. Overview first, zoom and filter, then details on demand

Novel Interaction Styles Three-dimensional space Navigate with visualization aids WebBook and the Web Forager

Example: WebBook

Magic Lens See through tool that modifies underlying objects To reveal hidden information To enhance data of interest To suppress distracting information Focus on what the user wants to see

Magic- Len Example

Magic Lens Example

Visible Human Project

Smartmoney.com Sector maps

Lifelines (Plaisant et al., 1997)

Library of Congress

Hyperbolic Views

Data Filtering (SeeSoft)

Input Skills