CS349 - Implementing User Interfaces - Spring 2010

Public Service Annoucements

1. Mid-term: 17 June, 2010, MC4059.

Lecture 22 - Introduction to Layout

Layout describes the positioning of components with respect to one another, which includes

• with respect to the window provided by the window system, and
• with respect to the screen and other windows.

It includes

• where the components go
• how big the components are
• what colours the components are
• which components are in which window
• and so on.

What are we trying to accomplish?

1. Looks attractive and clear.
2. Is easy to understand, which means `at a glance'.
3. Has a distinctive look, spread across many windows.

What are we trying to avoid?

1. Clutter, hard to organize.
2. Hard to perceive.
3. Idiosyncracy, most of the time.
4. Anything where the user has to stop and think in order to avoid an error.

What are the key ideas?

• Grouping
  • We establish relationships between components by their appearance and position
• Gestalt principles
  1. Contiguity
  2. Common form
  3. Colour
  4. Completion
  5. Common fate

Reminder: Layout in the UI world

• Done by UI designers, UI implementers.
• Done in an environment where
  • Size varies.
  • Resolution varies.
  • Colour gamut varies.

  All variation occurs post hoc.

Possible solutions to variation - most common first

1. Don't even think about it, and screw up.
2. Get rid of variation: design for the lowest common denominator, VGA.
3. Make the user do the work, often combined with (1), Examples
   • scrolling
   • window re-sizing
   • preference selection
4. Design separately for every possible combination of parameters.
   • combined with queryable formatting
     • so that you can find out the state into which the user put the window(s),
     • and respond appropriately
   • lots of work
     • easy to miss something, make an error
     • long guaranteed, reasonably-paid
       • if extremely boring

       employment

5. Design using a flexible layout.

What does flexible layout mean? In practice,

• resource files, partially accessible by user preferences
• flexible - up to a point - geometry

The design domain with the most elaborated practice is document formatting. Why?

• must be done inexpensively
• low status, so low that computers often do it.
  • Possibly the computer is the untouchable of social-democracy.

How are documents formatted?

• Bottom-up. Properties of composites are calculated by considering properties of parts plus composition rules. E.g. how long is a line of text?
• Top-down. Global design rules describe where things should go. E.g. Centre a title.

We go back and forth between these two strategies.

The key layout concepts, put together by Donald Knuth in TeX, are

1. rectangles - algebra of rectangles
   • important role played by guides
     • left - right - centre for vertical composition
     • top-bottom - centre for horizontal composition
2. elasticity - to make the geometry work
   • plays a small role in document formatting, a big role in layout.

Working with rectangles, like metal type.

• Every element is a rectangle.
• Every element has a preferred size.
• Every element has preferred neighbours.

This is a two dimensional bin packing problem - with constraints, which is effectively insoluble. It's up to the designer/user to find a solution, I suppose. Introduce elasticity.

• Each element is willing to change its size, at a cost.
• Add some elements that do nothing but change size.
• Collect hboxes into vboxes.
• Collect vboxes into hboxes.
• Find the arrangement that minimizes the cost.

As a global optimization problem this does not actually work very well.

• Try doing text formatting with Adobe Illustrator.

Any practical system has to find heuristics that work reasonably. Implementers have the job of finding sets of heuristics that implement rules vaguely specified by designers.

Example, laying out a table.

Think about what we have to do to lay out a table.

1. Collect all the table entries
2. Collect a set of user-specified constraints, such as
   • Columns 3 and 4 should be the same width.
   • The table should be centred on the page.
   • The maximum width of the table should be six and one-half inches.
3. Create a goodness function using the constraints (and others).
4. Start top-down with a set of guesses that obey the constraints.
5. Lay out each entry using the guess.
6. Calculate the goodness function.
7. Change the guess and iterate to step 5, until you find a/the maximum.
8. Insert the tabel into the global document and see how it affects the overall goodness value

Change the other constraints, and iterate to step 3, until the whole document is optimized.

Return to:

• CS349 - Spring 2010 - Lecture schedule
• CS349 - Spring 2010
• CS349 page
• Bill Cowan's home page.