1Fall 2004 6.831 UI Design and Implementation 1 Fall 2004 6.831 UI Design and Implementation 2 Source: Interface Hall of ShameFall 2004 6.831 UI Design and Implementation 3 Source: Interface Hall of ShameFall 2004 6.831 UI Design and Implementation 4 mouse overSource: Interface Hall of Shame2Fall 2004 6.831 UI Design and Implementation 5 Conceptual models Interaction styles Direct manipulation Errors MetaphorsFall 2004 6.831 UI Design and Implementation 6 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 7 !" #! Three models are relevant to UI design:SystemmodelInterfacemodelUsermodelFall 2004 6.831 UI Design and Implementation 8! Interface model should be: Simple Appropriate: reflect user s model of the task (learned from task analysis) Well-communicated3Fall 2004 6.831 UI Design and Implementation 9 $% !# Sometimes harmless Electricity as water Sometimes misleading Thermostat as a valveFall 2004 6.831 UI Design and Implementation 10! ! Command language Menus & forms Direct manipulationFall 2004 6.831 UI Design and Implementation 11& !!## User types in commands in an artificial language Examples Unix shell (ls l *.java) Search engine query language (site:www.mit.edu) URLs (http://www.mit.edu/admissions/) Command syntax is importantFall 2004 6.831 UI Design and Implementation 12 !! 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 forms4Fall 2004 6.831 UI Design and Implementation 13" ! ! User interacts with visual representation of data objects Continuous visual representation Physical actions or button presses with 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 14& !! ! Syntax Efficiency Error messages Knowledge in the head vs. world User experience Synchrony Programming difficulty AccessibilityFall 2004 6.831 UI Design and Implementation 15" ! !& Affordances Constraints Natural mapping Visibility FeedbackFall 2004 6.831 UI Design and Implementation 16'! 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. actual5Fall 2004 6.831 UI Design and Implementation 17( !# 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 18) * 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 19* + Actions should have immediate, visible effects Push buttons Scrollbars Drag & drop Kinds of feedback Visual Audio HapticFall 2004 6.831 UI Design and Implementation 20 !# !, Syntax error Description error Capture error Mode error6Fall 2004 6.831 UI Design and Implementation 21" !, 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 22&, 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 23 , 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 modesFall 2004 6.831 UI Design and Implementation 24 Another way to address the model problem Examples Desktop Trashcan7Fall 2004 6.831 UI Design and Implementation 25"!# 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...