cs349 - s10 - Lecture 23

CS349 - Implementing User Interfaces - Spring 2010

Public Service Annoucements

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

Lecture 23 - Simple Automated Layout

Characteristics of Human Perception

Mechanisms for Doing Layout

The Simplest and Best Understood Example: Document Formatting without Pictures

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

How are documents formatted?

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

  1. rectangles - algebra of rectangles
  2. elasticity - to make a top-down solution possible

Working with rectangles, like metal type.

Humans insert small pieces of metal (shims) between the letters to make it all fit. Everything is done by eye == highly learned activitity.

To get a computer to do the same thing introduce elasticity as a proxy for the shims..

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

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 based on our knowledge of table appearance, such as
  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.

Lifting Constraints

A table is more general than simple text, because it is laid out in two dimensions. But compared to the elements of a 2D user interface it is still a special case. (Tables do have a lot of flexibility, however. At an early stage in the evolution of html, the introduction of tables started a long period when they were the principle formatting construct of html pages.)

So far we have seen.

  1. Perceptual mechanisms that can be exploited in making a design, the Gestalt principles.
  2. Highly constrained examples that derive from the properties of these mechanisms a set of algorithms and heuristics based on the composition of rectangles.

We will now see the design mechanism commonly used to generalize the for practical design in 2D. It works using templates, defined in terms of guides, that enforce alignment.

The assumption underlying these ideas is that we want to use grouping to indicate important relationships between interface elements.

Important. If you make the wrong decisions about what should be grouped together skillful use of the ideas we are discussing actually makes your interface worse!

A (the most?) powerful mechanism for grouping components is relative position

Perceptual psychology that underlies layout. Interface components tend to be grouped together - seen as part of a larger structure - if they have one of the following properties.

  1. They are close together
  2. Components are more likely to be grouped if they have a common alignment. Alignment is created in practice by guide lines, which you used extensively in primary school.
  3. Components can be elements of a single underlying geometry.
  4. Components can be held together by graphical elements

Layout is the geometrical arrangement of components. Its goals are

  1. the creation of desired relationships,
  2. the avoidance of undesired relationships,

not to mention other trivial issues ilke `looking appealing'.

Return to: