All language subtitles for 2. Alignment

- Hi, I'm William Lidwell,

and this is Universal Principles of Design.

In this movie, "Alignment: Getting Your Ducks in a Row".

The U.S. Presidential Election of 2000

between George W. Bush and Al Gore was a nail-biter.

It was, in fact,

the closest presidential race in U.S. history,

decided by a mere five electoral votes,

and one-half of one percent of the popular vote.

The key to victory was winning Florida,

and the key to winning Florida

came down to a recount in four counties,

counties where there seem to be

a high number of voting irregularities:

missed votes, double votes,

and an improbable number of votes

for fringe candidates not popular in the region.

The cause of the problem?

The ballot violated a fundamental principle of design,

the principle of alignment,

and the resulting errors decided

the U.S. presidential election of 2000.

The principle of alignment

describes a fact about human perception:

things that are aligned are perceived to be more related

than things that are not aligned.

Further, things that are aligned lead the eye,

which then influences the sequence

in which people process information.

Western readers tend to read top-down, left-right,

and so, elements that align with this reading pattern

strongly influence perception and behavior.

In the case of the ballots in the key Florida counties,

a design known as the Butterfly Ballot was used.

The ballot presented voters with two pages of candidates

separated by a column of punch holes.

Voters were to find their candidate,

and then perforate the appropriate punch hole

to cast their vote.

So, voters read top-down on the first page,

and saw Al Gore as the second choice in the list.

Then, the separating line above Al Gore's name

led their eyes

right to the second punch hole on the ballot,

which led many Gore voters to punch that hole.

Unfortunately, for Gore, that second punch hole

represented Patrick Buchanan,

the candidate on the opposing page.

Many Gore voters, no doubt, punched the second hole,

detected their error, and then, tried to correct it

by punching the correct hole,

not realizing this would invalidate their vote.

This debacle accounted for the majority of errors

in double-votes observed in the ballots.

Researchers who analyzed the ballots,

and corrected for these types of errors,

found that if they had been avoided,

Al Gore would have won the election.

A ballot design with poorly aligned elements

literally decided a U.S. presidential election.

Now, imagine you were the ballot designer.

Could you have anticipated the problem?

What would you have done differently?

The key to making sure

the voter's intent is captured correctly,

is making sure the candidate information

leads the voter's eye unambiguously

to the correct punch hole.

A simple tweak to the ballot design,

presenting the candidates on the same page,

and making the row lines

clearly aligned with the punch holes,

would have fixed the problem.

There's another, more prescriptive, aspect

of the principle of alignment that we should observe:

Every element in a design should align

with at least one other element.

Text, graphics, controls, logos, everything.

No element in the design should just be dangling

out there on its own.

When all elements are aligned in this way,

compositions become coherent, stable, ordered.

They look professional.

They look designed.

There are scenarios, of course, when you're trying

to create a sense of disorder for visual tension,

in which a lack of alignment may be appropriate,

but these are the exceptions, not the rule.

So, whether you use alignment

to improve the compositions of your designs,

influence the sequence of how elements

are perceived and acted upon,

or to improve usability and reduce error,

remember, never underestimate the importance

of getting your ducks in a row.