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
Layout: Challenges Comp 3020 3
Hierarchical Layout A component is positioned relative to its parent Comp 3020 4
Hierarchical Layout Comp 3020 5
Containment Hierarchy Containment hierarchy or interactor tree Components can be contained within other components Used to determine where to send an event Comp 3020 6
Containment Hierarchy Window File menu Middle/Left Panel Widgets Label West 1 Button West 2 Button West 3 Button Bottom Panel. South Bottom Comp 3020 7
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 3020 8
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 3020 9
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 3020 10
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 3020 11
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 3020 12
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 3020 13
Maintaining Layout Two broad approaches Manual Automatic/dynamic Comp 3020 14
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 3020 15
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 3020 16
Dynamic Layout Dynamic layout has applications in: User interface design Document layout (eg, TeX) Information visualization Prefuse demo (Jeffrey Heer) Comp 3020 17
Dynamic Layout Example Strategies Intrinsic size Variable intrinsic layout Struts and springs Comp 3020 18
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 3020 19
Intrinsic Size Common Example Menus Issues: Doesn t support resizing What about expanding content? Comp 3020 20
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 3020 21
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 3020 22
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 3020 23
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 3020 24
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 3020 25
Pagination / Responsive Design Interface should adapt with small changes. Dramatic reduction in window size requires tailored designs Comp 3020 26
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 3020 27
Examples: Java Swing LayoutManagers Comp 3020 28
Examples:.NET Anchoring Comp 3020 29
Examples:.NET Docking TOP LEFT FILL RIGHT BOTTOM Comp 3020 30
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 3020 31
Comp 3020 32
Comp 3020 33
Layout: Web Divs group content together hierarchically Use CSS properties like padding, margin, etc. to place content Can use % to support dynamic resizing Comp 3020 34
Comp 3020 35
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 3020 36
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 3020 37