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

• 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

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?

• 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. Starting with the smallest elements build
  • letters into words,
  • words into sentences,
  • sentences into paragraphs, etc,

  Mark required and optional line breaks.

• Top-down. Fill this tectangle with text.
  • Choose among the optional line breaks, the ones that make the text attractive and readable.

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 a top-down solution possible
   • 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.

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

• 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.
• Introduce a cost function and find the arrangement that minimizes the cost.

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
   • 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 based on our knowledge of table appearance, such as
   • white space between lines
   • white space between columns
   • line creaks in entries
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

• E.g., Components that are close to one another are more closely related than components that are far apart.

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
   • Components that are close together are more likely to be seen as related than objects that are further apart
   • `Close together' is judged in relative terms:
     • close relative to the distances between ungrouped components,
     • close relative to the overall size of the components.
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.
   • Components that follow a single guide line are more likely to be seen as related. Guide lines can be
     • horizontal
     • vertical
   • Relationship to guide line can be
     • left-aligned
     • right-aligned
     • centre aligned
   • Guide lines can be
     • invisible, formed by induced edges, edges that aren't drawn, but are inferred by the users' visual systems
     • visible
3. Components can be elements of a single underlying geometry.
   • This works best when there is a geometrical theme
4. Components can be held together by graphical elements
   • The most common is an outline that encloses a group of related components. The outline can be explicitly drawn, or created by edges that are constructed by the users' visual systems.

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:

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