cs349 - s10 - Lecture 22

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

It includes

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?

Reminder: Layout in the UI world

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
  4. Design separately for every possible combination of parameters.
  5. Design using a flexible layout.

What does flexible layout mean? In practice,

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

How are documents formatted?

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
  2. elasticity - to make the geometry work

Working with rectangles, like metal type.

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.

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

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
  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: