cs349 - s10 - Lecture 22
CS349 - Implementing User Interfaces - Spring 2010
Public Service Annoucements
- 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.
- 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?
- Looks attractive and clear.
- Is easy to understand, which means `at a glance'.
- Has a distinctive look, spread across many windows.
What are we trying to avoid?
- Clutter, hard to organize.
- Hard to perceive.
- Idiosyncracy, most of the time.
- Anything where the user has to stop and think in order to avoid an
What are the key ideas?
- We establish relationships between components by their appearance
- Gestalt principles
- Common form
- Common fate
Reminder: Layout in the UI world
Possible solutions to variation - most common first
- Don't even think about it, and screw up.
- Get rid of variation: design for the lowest common denominator,
- Make the user do the work, often combined with (1), Examples
- window re-sizing
- preference selection
- 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
- and respond appropriately
- lots of work
- easy to miss something, make an error
- long guaranteed, reasonably-paid
- 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
- 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
- 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
- rectangles - algebra of rectangles
- important role played by guides
- left - right - centre for vertical composition
- top-bottom - centre for horizontal composition
- elasticity - to make the geometry work
- 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.
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.
- 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 using the constraints (and others).
- 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.