Dialog Design Command languages, direct manipulation, and WIMP.

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

Human Computer Interface
The Interaction notion of interaction interaction frameworks
Menu Interfaces Benefits of menu’s: Learnability, memorability, error avoidance Minimize memory load Drawbacks: possible inefficiency hierarchical complexity.
COMP 3715 Spring 05. Computer Interface Interaction between human and computer Has to deal with two things  User’s mental model Different user has different.
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.
User Interface Design Notes p7 T120B pavasario sem.
Ch 11 Cognitive Walkthroughs and Heuristic Evaluation Yonglei Tao School of Computing and Info Systems GVSU.
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.
Copyright © 2005, Pearson Education, Inc. Chapter 8 Command and Natural Languages.
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.
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.
Today’s class Group Presentation More about principles, guidelines, style guides and standards In-class exercises More about usability Norman’s model of.
Interaction Styles Interface Widgets. What are Interaction Styles?  A Collection of interface objects and associated techniques from which an interaction.
Help and Documentation CSCI324, IACT403, IACT 931, MCS9324 Human Computer Interfaces.
Principles and Methods
ICS 463, Intro to Human Computer Interaction Design: 10. Interaction and Windows Dan Suthers.
Dialog Design Command languages, direct manipulation, and WIMP.
Dialog Design Command languages, direct manipulation, and WIMP.
© 2005 by Prentice Hall Chapter 3c Designing Interfaces and Dialogues.
Dialogue Styles.
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.
Copyright © 2005, Pearson Education, Inc. Chapter 8 Command and Natural Languages.
Ch 6 - Menu-Based and Form Fill-In Interactions Yonglei Tao School of Computing & Info Systems GVSU.
Graphical User Interfaces CS 5389 Lecture 7. The Basic Goals of Language Design Precision Precision Compactness Compactness Ease in writing and reading.
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.
CSC 480 Software Engineering Lecture 19 Nov 11, 2002.
Lecture 6 User Interface Design
Computer Graphics Lecture 28 Fasih ur Rehman. Last Class GUI Attributes – Windows, icons, menus, pointing devices, graphics Advantages Design Process.
Designing Interface Components. Components Navigation components - the user uses these components to give instructions. Input – Components that are used.
SBD: Interaction Design Chris North cs3724: HCI. Problem scenarios summative evaluation Information scenarios claims about current practice analysis of.
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:
User Support Chapter 8. Overview Assumption/IDEALLY: If a system is properly design, it should be completely of ease to use, thus user will require little.
INFO 355Week #71 Systems Analysis II User and system interface design INFO 355 Glenn Booker.
Fall 2002CS/PSY Dialog Design 1 Command languages and WIMP Command languages  Advantages, disadvantages  Design guidelines WIMP  Advantages, disadvantages.
Interaction modalities Command languages, direct manipulation, and WIMP.
Oct 021 Outline What is a widget? Buttons Combo boxes Text components Message boxes.
Fall 2002CS/PSY Dialog Design 2 Direct Manipulation 1) Continuous visibility of the objects and actions of interest 2) Rapid, reversible, incremental.
Interaction modalities Command languages, direct manipulation, and WIMP.
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.
Interaction Styles Chris North cs3724: HCI. Presentations mike miller sean king Vote: UI Hall of Fame/Shame?
Human Computer Interface INT211
ITM 734 Introduction to Human Factors in Information Systems Cindy Corritore This material has been developed by Georgia Tech HCI faculty,
SBD: Interaction Design Chris North CS 3724: HCI.
Interaction Styles Common interaction styles command line interface menus natural language question/answer and query dialogue form-fills.
6. (supplemental) User Interface Design. User Interface Design System users often judge a system by its interface rather than its functionality A poorly.
Image by MIT OpenCourseWare Troughput (bps) Error rate (%) Mouse Trackball Joystick Touchpad.
11.10 Human Computer Interface
dialogue … computer and user distinct styles of interaction
GUI Week 9.
Cooper Part III Interaction Details Designing for the Desktop
Dialog Design 1 Command languages and WIMP
Kuliah #7: Command and Natural Languages
Dialog Design 2 Direct Manipulation
Cooper Part III Interaction Details Designing for the Desktop
CHAPTER 7: Command and Natural Languages
What is Interaction? Communication User  System
Presentation transcript:

Dialog Design Command languages, direct manipulation, and WIMP

Agenda Advising reminder Exam review Project part 2 review Dialogue styles Command line WIMP Direct Manipulation

Exam review Top score: 90 Average: 64 Median: 66 Format of spreadsheet: A1|A2|…|AT|Q1|Q2|…|QT|P1|P2|P3|P4|PT|Midterm|Final|Total

Project part 2 Top score: 95 Average: 77 Many descriptions of hardware/device characteristics Need to think more about software and interactions – this is what you will be evaluating the most

Dialog Design How does a user interact with the interface?

Dialog Styles 1. Command languages 2. WIMP - Window, Icon, Menu, Pointer 3. Direct manipulation 4. Speech/Natural language 5. Gesture, pen, VR

General Issues in Choosing Dialogue Style Who is in control - user or computer Initial training required Learning time to become proficient Speed of use Generality/flexibility/power Special skills - typing Gulf of evaluation / gulf of execution Screen space required Computational resources required

Command Languages Earliest UI interaction paradigm Examples MS-DOS shell UNIX shell dBase

CL Attributes Little or nothing is visible so… Work primarily by recall, not recognition Heavy memory load Poor choice for novices but...

CL Advantages Advantages for experts Speed, conciseness % ls (hard to beat) Can express actions beyond a limited set Flags, piping one command to another Repetition, extensibility Scripting, macros Easier implementation, less overhead Power Abstraction, wild cards

CL Dangers With added power, comes added responsibility and danger UNIX % rm -r * Deletes every file that you have, and you can’t get them back

CL Reflection Command languages are often maligned (for good reason) But increased functionality can win out over bad UI (e.g., UNIX) Try to get both Avoid excess functionality (comes at cost)

CL Design Goals Consistency Good naming and abbreviations Doing your homework in design can help alleviate some of the negatives

Consistency Provide a consistent syntax In general: Have options and arguments expressed the same way everywhere UNIX fails here because commands were developed by lots of different people at different organizations No guidelines provided

Order English: SVO subject verb object CL: S assumed (you) Is VO or OV better? V dO iO vs. V iO dO % print file calvin % lpr -Pcalvin file “you” assumed on computer % delete file or % file delete Which is better?

Syntax Pick a consistent syntax strategy Simple command list e.g, vi, minimize keystrokes Commands plus arguments realistic, can provide keyword parameters % cp from=foo to=bar Commands plus options plus arguments what you usually see

Terminology Keep terminology consistent Same concept expressed with same options Useful to provide symmetric (congruent) pairings forward/backward next/prev control/meta

Example vi text editor w - forward word b - backward word Wouldn’t ‘f’ be better for forward? ‘f’ already used How about ‘fw’ and ‘bw’? Extra keystrokes

Names and Abbreviations Specificity versus Generality General words More familiar, easier to accept Specific (typically better) More descriptive, meaningful, distinctive (Nonsense does surprisingly well in small set)

Abbreviations Abbrevs. allow for faster actions Expert performance begins to be dominated by motor times such as # of keystrokes Not good idea for novices (Allow but don’t require)

Picking Good Abbreviations Strategies Simple truncation (works best, but conflicts) Vowel drop plus truncation (avoid conflicts) First and last letters First letters of words in a phrase Standard abbrev from other contexts qty, rm, bldg Phonics xqt

Abbreviation Guidelines Use single primary rule (with single fallback for conflicts) Use fallback as little as possible Mark use of fallback in documentation Truncation is good but generates conflicts Fixed length is better than variable length Don’t use abbrevs. in system output

General Issues - CL Who is in control - user or computer Initial training required Learning time to become proficient Speed of use Generality/flexibility/power Special skills - typing Gulf of evaluation / gulf of execution Screen space required Computational resources required

Dialog Design 1. Command language 2. Direct manipulation 3. WIMP

Definition What is direct manipulation?

Direct Manipulation Definition: 1) Continuous visibility of the objects and actions of interest 2) Rapid, reversible, incremental actions whose effect is immediately noticeable 3) Replacement of command language syntax by direct manipulation of object of interest (physical actions, buttons, etc.) Shneiderman ‘82

Direct Manipulation Examples WYSIWYG editors and word processors VISICALC - 1 st electronic spreadsheet CAD Desktop metaphor Video games

Example: Homefinder

DM Essence Representation of reality that can be manipulated The user is able to apply intellect directly to the task The tool itself seems to disappear

Direct Manipulation AdvantagesDisadvantages

DM Advantages Easier to learn & remember, particularly for novices Direct WYSIWYG Flexible, easily reversible actions helps reduce anxiety in users

DM Advantages Provides context & instant visual feedback so user can tell if objectives are being achieved Exploits human use of visual spatial cues Limits types of errors that can be made

DM Problems Screen space intensive (info not all that dense) Need to learn meaning of components of visual representation Visual representation may be misleading Mouse ops may be slower than typing Not self-explanatory (no prompts)

DM Problems Not good at Repetition History keeping (harder) Certain tasks (Change all italics to bold) Abstract elements (variables) Macros harder

More Psychological View What is directness? (not always done well) Related to two things: Distance Engagement Hutchins, Hollan, Norman ‘86

Distance Two gaps or “gulfs” between user’s goals and system image Directness partly depends on the distance between these two gulfs Gulf of execution Gulf of evaluation Goals System Execution Evaluation

Gulfs Gulf of execution Distance between user’s goals and means of achieving them in system Does the system allow the user to do what they want? Gulf of evaluation Amount of effort person must expend to interpret system state and judge if intention was achieved Can you perceive if achieving favorable progress?

Directness and Distance Two types Semantic - Relation between what user want to express and what is available in interface Can I say what I want (concisely)? Articulatory - Relation between meanings of expressions and their physical form(s) Is the way to perform an action expected and clear (appropriate)?

Engagement Feeling that you are directly manipulating the objects of interest Promoted by Unobtrusive interface Minimizing gulfs of execution and evaluation Appropriately responsive system

Ultimately... In end, must characterize direct manipulation by feeling of directness and illusion of manipulating objects at hand

General Issues - DM Who is in control - user or computer Initial training required Learning time to become proficient Speed of use Generality/flexibility/power Special skills - typing Gulf of evaluation / gulf of execution Screen space required Computational resources required

Dialog Design 1. Command language 2. Direct manipulation 3. WIMP

WIMP Windows, Icons, Menus, Pointers Focus: Menus, Buttons, Forms Predominant interface paradigm now (with some direct manipulation added) Advantages: ?

Menus Key advantages: 1 keystroke or mouse operation vs. many No memorization of commands Limited input set

Menu Disadvantages Less direct user control - have to find correct menu / menu item Not so readily extensible Slower than keyboarding for experienced users, at least without accelerators

Menus Many different types pop-up pull-down radio buttons pie buttons hierarchies

Menu Items Organization strategies Create groups of logically similar items Cover all possibilities Ensure that items are non-overlapping Keep wording concise, understandable

Bad Example Travel web page links: Flight page 3 Best Itineraries Flights & Prices Timetables Fares Which do you choose for reservations?

Presentation Sequence How do different programs do it? Use natural if available Time e.g. Breakfast, Lunch, Dinner Numeric ordering e.g. Point sizes for font

Presentation Sequence Choices Alphabetical Group related items Frequently used first Most important first

Presentation Sequence User studies Novices: alpha > functional > random Experts: categorization How would you do it in general?

Presentation Sequence One possible methodology (first->last) Natural order (if exists) Frequency of use Order of use Categorical Alphabetical Don’t change dynamically!

A Good Example Logical grouping Visual separation of groups Disabled items “grayed out” Shortcuts shown … indicates leads to dialogue

General Issues - WIMP Who is in control - user or computer Initial training required Learning time to become proficient Speed of use Generality/flexibility/power Special skills - typing Gulf of evaluation / gulf of execution Screen space required Computational resources required

Advising Reminder Must visit advisor before registering October 31- Nov 11, Sign up on advisor’s door General CS advising: 5-7pm, Oct 31 – Nov 3, STECH 409 Sign up on the schedule Please pre-register, no waiting lists