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