Topics L1: usability L2: user-centered - PDF document

�������������� � Topics � L1: usability � L2: user-centered design, user & task analysis � L3: MVC, observer, view hierarchy � L4: component, stroke & pixel models, redraw, double- �������������������������� buffering � L5: perception, cognition, motor, memory, vision � L6: events, dispatch & propagation, finite state controllers, interactors � L7: interface styles, direct manipulation, affordances, mapping, visibility, feedback � L8: Nielsen � s heuristics � L9: paper prototyping, fidelity, look/feel, depth/breadth, computer prototyping, Wizard of Oz � L10: automatic layout, layout propagation, constraints, model-based user interfaces � Everything is fair game � Class discussion, lecture notes, readings, assignments � Closed book exam, 80 minutes Fall 2005 6.831 UI Design and Implementation 1 Fall 2005 6.831 UI Design and Implementation 2 �������������� �������������������������� � Automatic layout � Declarative programming � Saying what you want � Constraints � Procedural programming � Model-based UI � Saying how to achieve it Declarative Procedural A tower of 3 blocks. 1. Put down block A. 2. Put block B on block A. 3. Put block C on block B. Fall 2005 6.831 UI Design and Implementation 3 Fall 2005 6.831 UI Design and Implementation 4 1

� �!�����"���!����������� #�������������"���!����������� � Layout = component positions & sizes � Higher level programming � Sometimes called geometry � Shorter, simpler code � Declarative layout � Adapts to change � Declare the components � Window size � Java: component hierarchy � Font size � Declare their layout relationships � Widget set (or theme or skin) � Java: layout managers � Labels (internationalization) � Procedural layout � Adding or removing components � Write code to compute positions and sizes Fall 2005 6.831 UI Design and Implementation 5 Fall 2005 6.831 UI Design and Implementation 6 �����������$��� ������������$����� � Layout manager performs automatic layout of computePreferredSize(Container parent) for each child in parent, a container � s children computePreferredSize(child) compute parent � s preferred size from children � 1D (BoxLayout, FlowLayout, BorderLayout) e.g., horizontal layout, � 2D (GridLayout, GridBagLayout, TableLayout) (prefwidth,prefheight) = (sum(children prefwidth), � Advantages max(children prefheight) � Captures most common kinds of layout layout(Container parent) requires: parent � s size already set relationships in reusable form apply layout constraints to allocate space for each child child.(width,height) = (parent.width / #children, parent.height) � Disadvantages set positions of children � Can only relate siblings in component hierarchy child[i].(x,y) = (child[i-1].x+child[i-1].width, 0) for each child in parent, layout(child) Fall 2005 6.831 UI Design and Implementation 7 Fall 2005 6.831 UI Design and Implementation 8 2

%�&�'(����)���������"���������*���� %�&�'(����"�����������+��&�����*(���, space allocated to child other children grow & shrink some children with available space in parent are fixed-size OK Label Text box Label child’s actual size & position Anchoring Expanding Padding glue : invisible, growable strut : invisible, fixed-size OK component used for OK OK OK component used for adding right-justification whitespace between child northwest centered allocations Fall 2005 6.831 UI Design and Implementation 9 Fall 2005 6.831 UI Design and Implementation 10 '���������� ����$�-�������������.��������� � Constraint = relationship among variables � Automatically maintained by system � Constraint propagation: When a variable changes, other variables are automatically changed to satisfy constraint Fall 2005 6.831 UI Design and Implementation 11 Fall 2005 6.831 UI Design and Implementation 12 3

����$�'�����������.��������� ����$�'�����������.���/�(����� � Input � checker.(x,y) = mouse.(x,y) Textbox Label1 Label2 if mouse.button1 && mouse.(x,y) in checker � Output label1.left = 5 � checker.dropShadow.visible = mouse.button1 && label1.width = textwidth(label1.text, label1.font) label1.right = textbox.left mouse.(x,y) in checker label1.left + label1.width = label1.right � Interactions between components textbox.width >= parent.width / 2 � deleteButton.enabled = (textbox.selection != null) textbox.right <= label2.left � Connecting view to model label2.right = parent.width � checker.x = board.find(checker).column * 50 Fall 2005 6.831 UI Design and Implementation 13 Fall 2005 6.831 UI Design and Implementation 14 '�����������"����������������� �����0/���������������.���� � Programmer writes logical model of UI � State variables (bool, int, string, list) � Commands � System generates actual presentation scrollbar.thumb.y � Grouping into windows, tabs, panels scrollbar.track.height – scrollbar.thumb.height � Widget selection = � Layout � Same motivation as other declarative UI -scrollpane.child.y � Higher-level programming scrollpane.child.height – scrollpane.height � Adapting to change: particularly for devices and users � Screen size (watch, phone, PDA, laptop, desktop, wall) � Widgets available (phone vs. desktop) � Input style (mouse vs. arrow buttons; speech, finger, pen) � Output style (speech vs. display) � User behavior (uses some components more) Fall 2005 6.831 UI Design and Implementation 15 Fall 2005 6.831 UI Design and Implementation 16 4

�����"������( *������"������( � Programmer writes XML spec for both model � Application model � Elements: state variables and commands and view � Tree structure: grouping � Model: <description> � Labels for each element � Grouping: <structure> � Device description � Labels: <data> � Widget set � Widget selection & layout: <style> � Navigation costs (switch, enter, leave) � Behavior: <events> � Manipulation costs (changing value) � User data � Separation of concerns allows managing � Trace of actions by a user families of interfaces � System automatically searches for a presentation � Reuse application parts for multiple devices � Assignment of widgets to model elements that minimizes � Reuse device parts for multiple applications cost of user trace Fall 2005 6.831 UI Design and Implementation 17 Fall 2005 6.831 UI Design and Implementation 18 5