Information Distance and Orientation in Liquid Layout

1
Information Distance and Orientation in Liquid
Layout J. Goldberg, Oracle Corp. J. Helfman,
Oracle Corp. L. Martin, Naviscent LLC April 9,
2008
2
Background

• Increasing Widescreen Display Usage
• Enterprise Application Design uses Guidelines,
  Design Patterns, and Layout Managers
• Liquid Layout is One Strategy for Accommodating
  Dynamic Content Layout
• Goal Create Guidelines and Design Patterns for
  Widescreen Content Layout

3
Constraint-Based Liquid Layout Prototype

• Javascript prototype column addition/deletion
• Element location and size based upon constraints
  and constraint strengths
• Collision detection/solver uses element
  constraint strengths
• Flowing content can span multiple columns
• Guidelines are needed to guide content placement

4
Question

• How should page elements flow with page resize,
  considering
• Effective use of space
• Intended tasks
• Affective design
• Relationship among elements, parent containers

1
2
3
?
1
2
3
4
5
4
5
5
Methods

• Participants
• 18 Financial Analysts (mid-large companies)
• None routinely used widescreen display
• Presentation
• Sony 22-inch, 1920x1200 resolution
• IE7 browser, resizing disabled
• Custom-developed Content
• 3 page widths (1000, 1450, 1900 pixels)
• Procedure
• 8 Scenarios, 4 Tasks/Scenario

Task Scenario
Study Page (2 min.)
Rating Scales
T1
T2
T3
T4
(Each Timed)
6
Critical Portlets and Factors

• Each Task Required Two Critical Portlets
• Manipulated
• Relative Orientation (horizontal, vertical)
• Relative Separation Distance (100-1900 px)
• Content (Tables, Maps, Graphs)
• Post-hoc Factors
• Page Width (4, 6, 8 columns)
• Scenario (1-8) counterbalanced
• Vertical Scrolling (yes, no) 30 of trials

7
Sample Task
In 2006, four representatives met their targets.
If they had the same sales targets in 2005, which
regions would have met these targets?
4 column, 1000 px
8 column, 1900 px
6 column,1450 px
8
ResultsANOVA, Task Completion Time
Source p
Orientation (O)
Portlet Separation (PS)
Scrolling (S) ns
Task
O x PS
O x S ns
PS x S
plt.001 plt.01, plt.05 ns pgt.05 Also ns
Page Width, Task Order
9
Task Completion Time
(Error and assist trials not included)
10
Completion Time Advantage of Horizontal Layout
Mean Completion Time (sec) 67.9 8.4
(Orientation) .022 (Portlet Separation) .026
(OPS) O 0 if horizontal, 1 if vertical S
pixel separation
11
Rating Scales
How difficult were the questions on this page?
Mean2.8, ns
How much did you like the page layout?
liked
disliked
Kruskal-Wallace, H14, plt.001
12
Implications

• Relative Horizontal Layout Advantage
• Co-utilized content, requiring back-and-forth
  comparison
• Increasing time benefit (over 25) with distance
• Faster, more precise eye movements, due to
  reading
• Negative Impact of Vertical Scrolling
• Increased comparison times
• Potential memory decay ? more comparison
• Generalization
• Tasks integrating multiple, varied content
  portlets
• Wide pages better than long pages (if possible)
• Dependence on portlet content?
• Acknowledgements
• Allan Pichler (coding) Angela Johnston
  (recruiting)