Posted On Mayo 22, 2009 By In BLOG And 7111 Views

A List Apart: Articles: Taking the Guesswork Out of Design

A List Apart: Articles: Taking the Guesswork Out of Design

Creativity breathes life into successful websites. However, creative
ideas and solutions can sometimes seem like guesswork—and guessing is
risky business. So what can designers do to show clients they’re using
a solid strategy and have the best intentions? The following exercises
are a great way to start discussing and documenting aspects of design
to help clients shed their fear of creativity and encourage them to
join the design process.

Set clear goals

Some people feel they know why a website should exist, but struggle
to create direct and measurable goals. Ambiguous goals force people to
assume things, and assumptions can lead to broken expectations—which
can, in turn, destroy trusting relationships. Goals such as “selling
more stuff” or “getting more exposure” are vague and provide little

A modified acceptance criteria exercise is the simplest and most
effective tool I’ve found for setting clear and powerful goals. Agile
developers use acceptance criteria to demonstrate why tasks need to
happen and define how they fit into the big picture. With a few tweaks,
it works perfectly for capturing design goals.

Example request:

  • We’re redesigning our website because we need more traffic
    and an updated look, and want to become more respected in our industry.

Example goal template:

  • We want to __________ because ____________ so that ___________.

Example goals:

  • We want to increase traffic by 20% because we need more exposure so that we can generate eight more leads per month.
  • We want to update to a current look because we need to be more relevant to our customers so that we can raise our rates by 10%.
  • We want to write four industry-related articles per month because we want to help our industry so that we can form two partnerships per month.

Notice how separating “the means,” “the reason,” and “the ends”
clarifies the project owner’s goals and describes why they want them
and how they intend to achieve them. Acceptance criteria for design is
a great way to flush out deeper, possibly unknown, intentions that will
help the designer and project owner make better decisions and dodge
surprises later in the process. Revise the goals until all parties
agree on them and understand them.

Bonus points: Create several goals so that you
can capture secondary and tertiary goals, but don’t let it get out of
hand—no single website should have more than a handful of high-level

Organize the pages

People will grow fond of a website where they can accomplish their
goals without having to think. Users’ mental energy should be spent on
solving their problems, not figuring out how the website works.

Card sorting is a great way to organize a website. To conduct a card
sort, list all the pages of your website and write their titles on
index cards. Then, lay the cards out on a table and move them around
until all the categories and subcategories make the most sense.

If you can’t card sort in person or don’t have the time for card
sorting as a team, try collaborating online with a spreadsheet. Here’s
an example of a New Zealand investment website created in Google Docs
using fictitious statistics:

An example of card sorting using a spreadsheet.

If you’re working on a redesign, consult analytics to find out which
pages are getting high and low traffic. It’s a great opportunity to
figure out where the design’s content is over and under served. Then,
tighten and combine similar pages and separate and simplify complex

Even after the official design process, a good card sorting exercise
can greatly increase the usability and effectiveness of a website. It’s
a smart practice that can keep a website relevant and effective. To
learn more about how it’s done see Boxes and Arrows’ card sorting guide,’s card sorting article, or get a whole book on card sorting.

Bonus points: Card sort with someone unfamiliar with the company to spot biases and get unexpected feedback.

Lay out the pages

Next, we need to develop a solid understanding of the design’s visual hierarchy. Enter attention maps and a little bit of math.

An attention map is a list of goals for a page with point values
assigned to each goal. Allow just enough points to see a good
distribution, but not too few that you force a lot of similar point
values. The idea is to get a firm understanding of how the goals relate
to each other so you can form a solid hierarchy of content.

Example point distribution:

  • Fifteen points allocated among four goals

Example result:

  • Service description: seven points
  • Benefits of use: four points
  • Industry articles: two points
  • Relevant news: two points

An attention map is more effective than a prioritized list because
it helps determine how much space to dedicate to each goal on the page.
Since the service description has three points more (almost twice as
many) than the benefits of use, you can bet the service description
needs a lot of attention.

Use attention maps to classify areas of importance on a webpage.

Sketching out options that fit the goals, organization, and
attention map should now be straightforward and strategic. There will
probably be a lot less sketcher’s block!

Bonus points: When you’re done, try flipping
the sketches over, or look at them through a mirror to see if they
still work. Critiquing your own sketches, including the odd mirror
sketch, can generate a lot more ideas.

Develop a personality

A strong archetype can create an immediate and powerful emotional bond. An archetype
is a group of characteristics and traits that are commonly seen in
groups of people of any language, history, and size around the world.
Every archetype has strengths, weaknesses, gifts, and fears. When you
apply these aspects of personality without shame, people will identify
emotionally with a design. This helps strengthen memory and build trust.

The Hero and the Outlaw, by Margaret Mark and Carol S. Pearson, powerfully captures 12 archetypes covering nearly every aspect of humanity.

The archetypes:

  • Innocent
  • Explorer
  • Sage
  • Hero
  • Outlaw
  • Magician
  • Regular Guy/Gal
  • Lover
  • Jester
  • Caregiver
  • Creator
  • Ruler

If you choose the outlaw (think Harley Davidson), start critiquing
everything you do against the outlaw’s traits. You might be surprised
at the amount of new and interesting ideas generated.

Outlaw traits:

  • Desires revenge and/or revolution
  • Wants to destroy what is not working
  • Hates being powerless or trivialized
  • Tries to disrupt or shock people
  • Hopes to give people radical freedom
  • Is often misunderstood as evil
  • Has a tendency to become a criminal

If you can keep this “personality” consistent through different
designs, consider applying it to other areas where customer interaction
happens, and pay close attention to customer reactions. You’ll build a
very strong brand.

Bonus points: People often confuse their
company’s personality with their own. Determine the archetype of the
project owner and other key people involved to differentiate individual
personalities from the company personality.

Define the fit and finish

Design traits directly support and reinforce content. Unfortunately,
traits are very hard to boil down to a visual style that’s consistently
understood across a large audience. It’s good to have groups of
opposing traits to create boundaries. This helps you clarify the
specific look of the design and gives you something to measure and
critique against when the design is up for review.

A great way to do this is to figure out the opposing traits that
significantly affect the design and put them on sliding scales. Here’s
an example:

An example of a sliding scale used to define opposing design traits.

With trait scales, the designer can get a real sense for how things
should feel to the website visitor. If the designer’s idea of “lively”
is too intense, it will be easy to debate where it lies on the calm vs.
lively scale and adjust accordingly. This can generate a lot more
constructive criticism than “it’s too intense.”

Add, delete, and change the trait scales as needed. But remember
that the criteria needs to be measurable and debatable. A trait such as
“high tech” is too dependent on the tastes and opinions of the
designer. Most of the time, a specific trait such as “high-tech” will
be a combination of broader traits, including “modern,” “simple,” and
“formal”—all of which can be easily placed on a scale and discussed by
people without design backgrounds.

Bonus points: After the project, evaluate which
sets of traits had the most impact on the project’s success and keep
track of any sets that you wish you had put in.

Design confidently

A solid and common understanding of goals, organization, layout,
personality, and fit and finish will create an environment in which you
(and the project owner) can rely on rigorously discussed and well
documented ideas. Together, you’ll create smaller margins of error,
purposeful exploration, fewer broken expectations, and, ultimately, a
better design.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Loading Google+ Comments ...

Get every new post on this blog delivered to your Inbox.

Join other followers: