COMP 3020: Human-Computer Interaction I Fall software engineering for HCI

Transcription

1

2 COMP 3020: Human-Computer Interaction I Fall 2017 software engineering for HCI James Young, with acknowledgements to Anthony Tang, Andrea Bunt, Pourang Irani, Julie Kientz, Saul Greenberg, Ehud Sharlin, Jake Wobbrock, Dave Hendry, Andy Ko, Jennifer Turns, & Mark Zachry

3 Layout: Challenges Comp

4 Hierarchical Layout A component is positioned relative to its parent Comp

5 Hierarchical Layout Comp

6 Containment Hierarchy Containment hierarchy or interactor tree Components can be contained within other components Used to determine where to send an event Comp

7 Containment Hierarchy Window File menu Middle/Left Panel Widgets Label West 1 Button West 2 Button West 3 Button Bottom Panel. South Bottom Comp

8 Aside: Hierarchy and Events If a button is pressed, does the button get the event, or the encapsulating window, or both? If both, in what order? Comp

9 Hierarchy and Events Bottom-up dispatch (bubbling) (floats up) the lowest in the hierarchy gets it first Widgets get a lot of power, and get first crack at it to act first, cancel an event, or propagate it up E.g., gmail can take events browser usually gets hotkeys Comp

10 Hierarchy and Events Top-down dispatch (capturing) the highest in the hierarchy gets it first, and then it works down Can globally manage your events e.g., a frame can filter which events hit its children. Unknown / less trusted plugin, e.g., website plugin COMP

11 Bubbling vs Capturing Not better or worse, just two different ways Know your system! Some systems, e.g., javascript/jquery, let you choose the order, or turn off propagation completely Comp

12 Layout: Challenges Window arrangement (size and position) is not known when you build interface Display resolution is not known Sometimes the content of window will not be known E.g., web browser at amazon, word lengths (localization), font sizes (accessibility), etc. Comp

13 Layout: Goals Windows are dynamic, can be resized Content may change Through any resize, we wish to: Maintain consistency in interface s presentation Preserve affordances communicated through interface s layout Preserve overall visual layout found to be ideal in user testing Need to dynamically modify allocation of space, locations of objects in interface Comp

14 Maintaining Layout Two broad approaches Manual Automatic/dynamic Comp

15 Manual or Fixed Layout Components are of fixed size and position Each component specifies its size Also specifies its position relative to the container Problems: form or a control that contains other controls Does not handle Advantages: Resizing Automatically generated, or variable interface content Simplicity Comp

16 Dynamic Layout Dynamic layout is a process of: Specifying components Specifying desired constraints for the components and their relationships with respect to one another i.e., Specifying the mathematical relationships between components of the interface Attempting to satisfy those constraints Comp

17 Dynamic Layout Dynamic layout has applications in: User interface design Document layout (eg, TeX) Information visualization Prefuse demo (Jeffrey Heer) Comp

18 Dynamic Layout Example Strategies Intrinsic size Variable intrinsic layout Struts and springs Comp

19 Intrinsic Size Size of component is determined by the size of the children Ask each child for its desired size Grow component until it fits the sum of the sizes Common examples in interfaces? Comp

20 Intrinsic Size Common Example Menus Issues: Doesn t support resizing What about expanding content? Comp

21 Intrinsic Size Intrinsic size layout and expanding content What happens when a menu needs to include additional items? What happens when a users enters more and more text in a text editor pane? Without restrictions on size, containers can grow too large for the available screen space Cascading menus and scrollbars help address these problems Comp

22 Variable Intrinsic Layout Layout determined in bottom-up and top-down phases a) Bottom-up phase: Container asks each child for its preferred, minimum, maximum sizes Values used to partition the container s space Here, the toolbox panel has to layout the children docked into it Asks them first for preferences, then calculates a target layout Comp

23 Variable Intrinsic Layout Layout determined in bottom-up and topdown phases b) Top-down phase: Based on calculations, children are sized and told to lay themselves out in space specified As container size changes, process repeats and children reshape themselves Comp

24 Struts and Springs Layout specified by marking things that should remained fixed vs. those that can stretch Strut defines a fixed length (width/height) Specifies invariant relationships in a layout Spring defines a space that pushes on nearby edges Specifies variable relationships Component A Comp B Spring Strut Comp

25 Struts and Springs Advantage: An easily accessible metaphor for people performing layout Disadvantage: Constraints can be difficult to manage Can end up with over constrained interfaces (e.g., only struts) Comp

26 Pagination / Responsive Design Interface should adapt with small changes. Dramatic reduction in window size requires tailored designs Comp

27 Layout Managers Provided by UI toolkits to simplify layout for the programmer Size and position of children determined by a set of rules / constraints Sometime children can provide size and alignment hints But layout manager has the final say Comp

28 Examples: Java Swing LayoutManagers Comp

29 Examples:.NET Anchoring Comp

30 Examples:.NET Docking TOP LEFT FILL RIGHT BOTTOM Comp

31 Layout: Web Early layouts used tables Problems: HTML describes data, not presentation HTML becomes messy At least 3 elements for one cell Can be difficult to get creative layouts Resizing / changing quickly becomes a mess Comp

32 Comp

33 Comp

34 Layout: Web Divs group content together hierarchically Use CSS properties like padding, margin, etc. to place content Can use % to support dynamic resizing Comp

35 Comp

36 Layout: MSIII project expectations Layout should not rely on specific window size (markers may use any size) Layout should resize gracefully (to a certain degree) Bottom line: don t completely ignore resizing, but do not emphasize this aspect in your prototyping Comp

37 Today s Messages: Layout Good layout involves both design and computational concerns Design Concerns Leveraging properties of perception to create structure Considering content and intended meaning when making grouping and alignment decisions Creating hierarchies to facilitate scanning, navigation, etc. Using grids to help organize screens and promote consistency Computational Concerns Algorithms needed to maintain optimal visual layout (as defined above) across multiple window sizes Algorithms differ in their complexity and flexibility Comp