cs349 - s10 - Lecture 23
CS349 - Implementing User Interfaces - Spring 2010
Public Service Annoucements
- Mid-term: 17 June, 2010, MC4059.
Lecture 23 - Simple Automated Layout
Characteristics of Human Perception
- We establish relationships between components by their appearance
- Gestalt principles
- Common form
- Common fate
Mechanisms for Doing Layout
The Simplest and Best Understood Example: Document Formatting without
The design domain with the most elaborated practice is document
- 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?
The key layout concepts, put together by Donald Knuth in TeX, are
- rectangles - algebra of rectangles
- important role played by guides
- left - right - centre for vertical composition
- top-bottom - centre for horizontal composition
- elasticity - to make a top-down solution possible
- plays a small role in document formatting, a big role in
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
- 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
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.
- Collect all the table entries
- 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
- Create a goodness function based on our knowledge of table appearance,
- white space between lines
- white space between columns
- line creaks in entries
- Start top-down with a set of guesses that obey the constraints.
- Lay out each entry using the guess.
- Calculate the goodness function.
- Change the guess and iterate to step 5, until you find a/the
- 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.
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.
- Perceptual mechanisms that can be exploited in making a design, the
- Highly constrained examples that derive from the properties of these
mechanisms a set of algorithms and heuristics based on the composition of
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
- 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.
- 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
- close relative to the overall size of the components.
- 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
- Relationship to guide line can be
- centre aligned
- Guide lines can be
- invisible, formed by induced edges, edges that aren't drawn,
but are inferred by the users' visual systems
- Components can be elements of a single underlying geometry.
- This works best when there is a geometrical theme
- 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
- the creation of desired relationships,
- the avoidance of undesired relationships,
not to mention other trivial issues ilke `looking appealing'.