1Fall 2004 6.831 UI Design and Implementation 1 Fall 2004 6.831 UI Design and Implementation 2 Conceptual models Interaction styles Direct manipulation Errors MetaphorsFall 2004 6.831 UI Design and Implementation 3 Model of a system = how it works its constituent parts and how they work together to do what the system does Implementation models Pixel editing vs. structured graphics Text file as single string vs. list of lines Interface models RealCD s online help as liner notesFall 2004 6.831 UI Design and Implementation 4 Three models are relevant to UI design:SystemmodelInterfacemodelUsermodel2Fall 2004 6.831 UI Design and Implementation 5 Interface model should be: Simple Appropriate: reflect user s model of the task (learned from task analysis) Well-communicatedFall 2004 6.831 UI Design and Implementation 6 ! Sometimes harmless Electricity as water Sometimes misleading Thermostat as a valveFall 2004 6.831 UI Design and Implementation 7 Command language Menus & forms Direct manipulationFall 2004 6.831 UI Design and Implementation 8" User types in commands in an artificial language Examples Unix shell (ls l *.java) Search engine query language (AND, OR, site:www.mit.edu) URLs (http://www.mit.edu/admissions/) Command syntax is important3Fall 2004 6.831 UI Design and Implementation 9 # User is prompted to choose from menus and fill in forms Examples virtually all web sites dialog boxes Navigation structure is important Menu trees (Yahoo!) Wizard: linear sequence of formsFall 2004 6.831 UI Design and Implementation 10 User interacts with visual representation of data objects Continuous visual representation Physical actions or labeled button presses Rapid, incremental, reversible, immediately visible effects Examples Files and folders on a desktop Scrollbar Dragging to resize a rectangle Selecting text Visual representation and physical interaction are importantFall 2004 6.831 UI Design and Implementation 11" Knowledge in the head vs. world Error messages Efficiency User experience Synchrony Programming difficulty AccessibilityFall 2004 6.831 UI Design and Implementation 12 " Affordances Constraints Natural mapping Visibility Feedback4Fall 2004 6.831 UI Design and Implementation 13$ Perceived and actual properties of a thing that determine how the thing could be used Chair is for sitting Knob is for turning Button is for pushing Listbox is for selection Scrollbar is for continuous scrolling or panning Perceived vs. actual Fall 2004 6.831 UI Design and Implementation 14% Physical arrangement of controls should match arrangement of function Best mapping is direct, but natural mappings don t have to be direct Light switches Stove burners Turn signals Audio mixerFall 2004 6.831 UI Design and Implementation 15&' Relevant parts of system should be visible Not usually a problem in the real world But takes extra effort in computer interfacesFall 2004 6.831 UI Design and Implementation 16#' ( Actions should have immediate, visible effects Push buttons Scrollbars Drag & drop Kinds of feedback Visual Audio Haptic5Fall 2004 6.831 UI Design and Implementation 17 ) Description error Capture error Mode errorFall 2004 6.831 UI Design and Implementation 18 ) Intended action is replaced by another action with many features in common Pouring orange juice into your cereal Putting the wrong lid on a bowl Throwing shirt into toilet instead of hamper Going to Kendall Square instead of Kenmore Square Avoid actions with very similar descriptions Long rows of identical switches Adjacent menu items that look similarFall 2004 6.831 UI Design and Implementation 19") A sequence of actions is replaced by another sequence that starts the same way Leave your house and find yourself walking to school instead of where you meant to go Vi :wq command Avoid habitual action sequences with common prefixesFall 2004 6.831 UI Design and Implementation 20 ) Modes: states in which actions have different meanings Vi s insert mode vs. command mode Caps Lock Drawing palette Avoiding mode errors Eliminate modes Visibility of mode Spring-loaded or temporary modes Disjoint action sets in different modes6Fall 2004 6.831 UI Design and Implementation 21 Another way to address the model problem Examples Desktop TrashcanFall 2004 6.831 UI Design and Implementation 22 Hard to find Deceptive Constraining Breaking the metaphor Use of a metaphor doesn t excuse bad communication of the model: RealCD s bad affordances,
View Full Document
Unlocking...