Tidwell J. Designing Interfaces (Second Edition)
Подождите немного. Документ загружается.
The Basics of Page Layout 133
Density
A dense, heavy-looking block has stronger contrast with the surrounding page; an
open look has less contrast.
Background color
Contrast draws attention. Black on white, or vice versa, is the strongest contrast
possible.
Position and size
A medium or large text block, roughly in the center of the page, calls attention to it-
self as the primary content (like an article or blog post). But a small strip of text at the
bottom of the page says quietly, “I’m just a footer” and begs to be ignored!
Rhythm
Lists, grids, alternating elements such as headlines and summaries, and whitespace
separation can create a strong visual rhythm that irresistibly draws the eye.
Figure 4-2.
Ways to emphasize blocks of text or small items (clockwise from upper left): density,
background color, rhythm, and position and size
Put small but important items at the top of the page, along the left side, or in the top-right
corner (see Figure 4-3). Give them high contrast and visual weight, and set them off with
whitespace. But note that in a text-heavy screen, like most websites, certain controls—es-
pecially search fields, sign-in fields, and large buttons—tend to stand out anyway! This is
less about raw visual characteristics than meaning: if someone is looking for a search box,
for instance, her eyes will go straight to the text fields on the page. (She may not even read
the labels for those text fields.)
Do wnl oa d fr om W ow! e Bo ok < ww w.w ow eb oo k. co m>
134 Chapter 4: Organizing the Page: Layout of Page Elements
Figure 4-3.
Emphasizing small items
High-contrast, dramatic images draw attention; so do pictures of faces. But much of the
time, images on websites get ignored by viewers motivated to get information out of a
page or to get a task done. Pictures are a wildcard in a visual hierarchy. Use them thought-
fully, and refer to Chapter 11 for a discussion on using visual elements to communicate
branding, emotion, and other nonrational attributes.
One more thing: don’t discount “ad blindness.” Users may consciously ignore elements
that look like ads, even if those elements carry important information! Again, this is about
meaning, not visuals. If you’ve ever brought up an ad-filled web page and pointedly ig-
nored the brightly colored moving ads (so you could read the monotonous blocks of text
that you went there to read), you know that we’re not merely slaves to our hardwired vi-
sual systems! We can choose to ignore things that we think we don’t need to look at, and
zero in on what we think is the important part of the page.
How to show relationships among page elements
Grouped items look related (see Figure 4-4). Conversely, isolation implies distinction—
in the previous section, I recommended that small but important items be set off with
whitespace for this reason. This uses the Gestalt principles of proximity and closure (see
the sidebar “Four Important Gestalt Principles” on page 139).
Similar items look like peers (see Figure 4-5). If you have a few things “of a type” and you
want viewers to see them as equally interesting alternatives, give them an identical (and
distinctive) graphic treatment.
The Basics of Page Layout 135
Is one item more “special” than the others like it? Give it a slightly different treatment,
such as a contrasting background color, but otherwise keep it consistent with the others
(see Figure 4-6). Or use a graphic element to disrupt the line along which the items are
aligned, such as a bump-out, overlap, or something at an angle.
A list of many similar items, arranged in a strong line or column, becomes a set of peer
items to be viewed in a certain order (see Figure 4-7). Align these items very precisely
with each other to create a visual line (see the Gestalt principle of continuity in the up-
coming sidebar). Examples include bulleted lists, navigation menus, text fields in a form,
row-striped tables, and lists of headline/summary pairs. Note the alternating repetition
used in the latter two examples. Alternating repetition can look beautiful when done well,
and can set up a nice visual rhythm on the page.
Figure 4-4.
Grouping related items
Figure 4-5.
Peer items
Figure 4-6.
Distinguishing one item among peers
Figure 4-7.
Lists of items
Indented and shrunken text tucked under a stronger element modifies that stronger element.
Image captions, secondary text, comments, and so forth all behave this way (see Figure 4-8).
136 Chapter 4: Organizing the Page: Layout of Page Elements
Containment implies a parent/child relationship (see Figure 4-9). Use boxes, blocks of
background color,
Module Tabs, Accordions, and text blocks or tool groups surrounded by
whitespace to contain and nest related items (see the Gestalt principle of closure in the
upcoming sidebar). Indenting also implies parent/child relationships in the context of an
outline or a hierarchical menu.
Figure 4-8.
Captions and comments
Figure 4-9.
Containment
Visual Flow: What Should I Look at Next?
Visual flow deals with the tracks that readers’ eyes tend to follow as they scan the page.
It’s intimately related to visual hierarchy, of course—a well-designed visual hierarchy sets
up focal points on the page wherever you need to draw attention to the most important
elements, and visual flow leads the eyes from those into the less important information.
As a designer, you want to be able to control visual flow on a page so that people follow it
in approximately the right sequence.
Several forces can work against each other when you try to set up a visual flow. One is our
tendency to read top to bottom and left to right. When faced with a monotonous page of
text, that’s what you’ll do naturally; but if there are strong focal points on the page, they
can distract you from the usual progression, for better or for worse.
Focal points are the spots your eyes can’t resist going to. You tend to follow them from
strongest to weakest, and skillfully designed pages have only a few—too many focal points
dilute the importance of each one. A good visual hierarchy uses focal points to pull eyes
to the right places in the right order.
The next time you pick up a magazine, look at some well-designed ads, and notice what
your eyes gravitate toward. The best commercial graphic artists are masters at setting up
focal points to manipulate what you see first.
The Basics of Page Layout 137
So how do you create a good visual flow? One simple way is to use implied lines, either
curved or straight, to connect elements on the page (see Figure 4-10). This creates a visual
narrative for the viewer to follow.
Figure 4-10.
Implied lines for visual flow
Put calls to action after the text you want viewers to read first. If you don’t care whether
they read it or not, you can isolate the calls to action with whitespace (see Figure 4-11).
Figure 4-11.
Calls to action, both in the flow and out of it
Likewise, if you’re designing a form, arrange the controls along a continuous path and
put “I’m finished” buttons (OK, Cancel, Submit, Buy, etc.) at the end of that line (see
Figure 4-12). See the patterns
Right/Left Alignment and Diagonal Balance for two concrete
approaches to form layout, and
Prominent “Done” Button in Chapter 6.
138 Chapter 4: Organizing the Page: Layout of Page Elements
Figure 4-12.
OK button at the end of a form
It’s not hard to set up a layout that flows well, but be on your guard against layout choices
that work counter to flow. If you want viewers to read a site’s story and value proposition,
arrange the critical pieces of that narrative along a continuous line, and don’t interrupt it
with eye-catching extras. If you’re designing a form or set of interactive tools, don’t scatter
controls all over the page—that just forces the user to work harder to find them.
Figure 4-13 shows a distinctly poor example of visual flow and visual hierarchy. How
many focal points are there, and how do they compete with one another? Where does
your eye want to go first, and why? What does this page say is important?
Figure 4-13.
Weather Underground’s jumbled visual hierarchy
The Basics of Page Layout 139
Four Important Gestalt Principles
The.theory.behind.grouping.and.alignment.was.developed.ear ly. in.the.20th.century.by.the.
Gestalt.psychologists..They.described.se veral.layout.properties.that.seem.to.be.hardwired.into.
our.visual.systems..Among.them.are.the.following:
Proximity
Put.things.close.together,.and. viewers. will. associate.them.with.one.another..This.is. the.
basis.for.strong.grouping.of.content.and.controls.on.a.UI.
Similarity
If.two.things.are.the.same.shape,.size,.color,.or.orientation,.for.instance,.viewers.will.also.
associate.them.with.each.other.
Continuity
Our.eyes.want.to.see.continuous.lines.and.curves.formed.by.the.alignment.of.s maller.
elements..
Closure
We.also.want.to.see.simple.closed.forms,.such.as.rectangles.and.blobs.of.whitespace,.that.
aren’t.explicitly.drawn.for.us..Groups.of.things.often.appear.to.be.closed.forms.
Figure.4-14.depicts.these.four.layouts.and.shows.how.you.can.combine.them.to.create.an.
effect ive.overall.design.
As.important.as.they.are.individually,.these.principles.are.best.used.in.combination.with.one.
another..Once.again,.redundancy.is.helpful;.the.fifth.grouping.looks.more.like.an.actual.page.
layout.than.a.retro-styled.mosaic.
Continuity.and.closure,.then,.explain.alignment..When.you.align.things,.you.form.a. continuous.
line.with.their.edges,.and.the.users.will.follow.that.line.and.(perhaps.subconsciously).assume.
a.relationship..If.the.aligned.items.are.coherent.enough.to.form.a.shape—or.to.form.one.out.
of.the.whitespace.or.“negative.space”.around.it—closure.is.also.at.work,.adding.to.the.effect..
Proximity Similarity
Continuity Closure
All together now
Figure 4-14.
Four Gestalt principles
140 Chapter 4: Organizing the Page: Layout of Page Elements
Using Dynamic Displays
Everything I’ve discussed so far applies equally to UIs, websites, posters, billboards, and
magazine pages. They deal with static aspects of layout. Ah, but you have a dynamic com-
puter display to work with—and suddenly time becomes another dimension of design!
Just as importantly, computers permit user interaction with the layout to an extent that
most printed things can’t.
There are many, many ways you can take advantage of the dynamic nature of computer
displays. Consider space usage, for example—even the biggest consumer-grade computer
screens have less usable space than, say, a poster or a newspaper page. That’s life. If you
design for mobile devices, you’ve got an especially tiny space to work in. There are many
dynamic techniques for using that space to present more content than you can show at
one time.
Scrollbars, of course, are one very common way of presenting a small “viewport” onto a
large thing, such as text, an image, or a table. Scrollbars let the user move around at will,
in one or two dimensions (but refrain from using horizontal scrolling with text, please).
Or, if you can carve up the content into coherent sections, you have several options—
Module Tabs, Accordions, Collapsible Panels, and Movable Panels all put some layout control
into the user’s hands, unlike the more static
Titled Sections. (You can also split up con-
tent over multiple virtual pages and let the user navigate between them; see Chapter 3.)
These patterns invoke time by letting the user see different content at different times of
his choosing.
If you want to direct the user through a sequence of steps,
Responsive Enabling and
Responsive Disclosure are two time-honored ways of doing so.
The Patterns
This chapter’s patterns give you specific ways to put all these layout concepts into play.
The first three address the visual hierarchy of the whole page, screen, or window, regard-
less of the type of content you put into that page. You should consider
Visual Framework
fairly early in a project, since it affects all the major pages and windows in an interface.
1.
Visual Framework
Do you have a single important thing to show on the page, or several features or options
of similar importance?
Center Stage applies to pages that contain a single main item or task
with other lesser items around it, whereas
Grid of Equals makes several “peer” items look
similar. (You could use both in separate sections of a large page, of course.)
2.
Center Stage
3. Grid of Equals
The Patterns 141
The next group of patterns represents alternative ways of “chunking” content on a page
or window. They’re useful when you have more content than you can comfortably put
on the page at one time. Should the different sections all be visible at once, or can they
be viewed independently? Is it OK for users to manipulate those sections on the page, or
maybe overlook the hidden ones? These patterns deal with visual hierarchy too, but they
also involve interactivity, and they can help you choose among the specific mechanisms
available in UI toolkits.
4.
Titled Sections
5. Module Tabs
6. Accordion
7. Collapsible Panels
8. Movable Panels
Right/Left Alignment
and Diagonal Balance draw on the concepts of visual flow, alignment,
and other things discussed in the chapter introduction. They deal with the spatial rela-
tionships among the smaller, more static elements on a page, such as text and controls.
9.
Right/Left Alignment
10. Diagonal Balance
The last three patterns deal with the dynamic aspects of content layout. Responsive
Disclosure
and Responsive Enabling are two ways of directing a user through a series of steps
or a set of options; they indicate what can be done at any point in time, while preventing
the user from straying into areas that will get her into trouble.
Liquid Layout is a technique
for arranging a page that can change size and shape at the user’s whim.
11.
Responsive Disclosure
12. Responsive Enabling
13. Liquid Layout
Visual Framework
Figure 4-15.
JAQK
142 Chapter 4: Organizing the Page: Layout of Page Elements
What
Design each page to use the same basic layout, colors, and stylistic elements, but give the
design enough flexibility to handle varying page content.
Use when
You’re building a website with multiple pages, or a UI with multiple windows—in other
words, almost any complex software. You want it to “hang together” and look like one
thing, deliberately designed; you want it to be easy to use and navigate.
Why
When a UI uses consistent color, font, and layout, and when titles and navigational aids—
signposts—are in the same place every time, users know where they are and where to find
things. They don’t have to figure out a new layout each time they switch context from one
page or window to another.
Have you ever seen a book in which the page numbers and headings were in a different
place on each page?
A strong visual framework, repeated on each page, helps the page content stand out more.
That which is constant fades into the background of the user’s awareness; that which
changes is noticed. Furthermore, adding enough character to the design of the visual
framework helps with the branding of your website or product—the pages become rec-
ognizable as yours.
How
Draw up an overall look-and-feel that will be shared among all pages or windows. Home
pages and main windows are “special” and are usually laid out differently from inner pages,
but they should still share certain characteristics with the rest of the site. For example:
Color
Backgrounds, text colors, accent colors, and other colors
Fonts
For titles, subtitles, ordinary text, callout text, and minor text
Writing style and grammar
Titles, names, content, short descriptions, any long blocks of text, and anything else
that uses language