The Sphere of Design
The web design community thankfully seems to be wrapping up the "design
vs. usability" argument.
In case you missed it, the conclusion
was: "Not either/or but both, and it depends."
Design leaders have proved that web
sites can be both usable and
beautiful, but we lack a vocabulary to talk about this new
standard.
The question now is not "Which is
most important?", but "How do we deliver what's most important?"
This article introduces the "Sphere of Design", which is a simple
conceptual model that illustrates the relationship and trade-offs
between 'looks' and 'works'.
(A quick recap of the debate)
Why usability isn't the new standard
In the early days of the web, people
realised that using most sites was difficult, and applied the term
'usability' to describe how easy a web interface is to use. A web
usability testing industry emerged, which has taught us a lot about
where things go wrong by watching real people using web sites and
comparing the ease-of-use of different design solutions.
We had a long-running
"design/usability" debate, with different people arguing that one is
more important than the other. This argument created more heat than
light, and was based on a false idea that design and usability are
opposing forces. They aren't.
Separating usability from design is
no longer helpful. The problem is a design problem.
The purpose of visual design is to
facilitate communication.
When designing products that have a
communication function, usable design is simply better design, because
it makes a product better at its job. Usability is a central element to
successful design. There is no either/or.
While it's certainly useful to test
how successful a web site is, there's little point in discovering that
your design doesn't work after you've built your product.
Testing can not give us new, creative
solutions to design problems, or tell us how well a site achieves its
non-functional goals. Excellence can only be achieved by building in
usefulness in throughout the design process, and applying user-testing
at key points to test success and to help polish the finer detail.
Why beauty/art isn't the new
standard
What most designers mean when they
debate 'design versus usability' is really 'graphic art versus design'.
The argument generally revolves around the relative merits of
aesthetics and function ('looks' over 'works').
Visual design is a discipline that
applies graphical techniques to solve a communication problem, whereas
Art uses many of the same skills for their own sake.
Art has its place and it can be part
of great web sites, but creating a successful web site is all about
design - finding the best solutions to solve communication problems.
Your web site can be
both visually appealing and easy to use.
In fact, your web site should
be both appealing and functionally powerful!
Visual appeal and usefulness aren't
mutually exclusive. Sometimes, design success depends on visual appeal.
Beautiful and attractive visuals can encourage visitors to stick around
a little longer, or explore a little deeper, enhance a particular
experience, and make a product appealing enough to buy.
Problems generally arise when graphic
art gets in the way of design. When graphic art is used in a way that
doesn't help the achieve its objectives, the commercial consequences
can be severe. When design fails to communicate effectively, aesthetics
doesn't come into it.
All that's happening is the web
industry is currently going through the same learning process that
other media industries have already been through, but in a more
accelerated timeframe. We
should learn from their experience.
One of the fundamental lessons is
that there will always be a creative tension between the artistic drive
and the responsibility to produce a product to do a job. This is the
fundamental problem of design. Creatives in all other media industries
have come to terms with it long ago, and found ways to work within it.
The Sphere of Design
I use this simple model (a
development from my original Design Spectrum)
to visualise the relationship between aesthetics and functionality in
design. It's a useful way of demonstrating the new standard of
top-quality design.
The diagram below represents how
products with a visual design element can combine aesthetic richness
with functional richness.
I define Aesthetic
richness as a function of beauty, attractiveness,
emotional depth, and visual impact.
Functional richness
equates to usefulness, which is an aggregate of ease-of-use and
functional power.
The coloured area represents the
domain in which a product can operate. All products sit somewhere
within the boundaries of the egg shape. The model reveals several
really important aspects of design and sheds light on the creative
dilemma.
Note that this applies only to visual
design, where the object is to create a visual product that has some
communication aspect. It doesn't apply to fine art or engineering.
You can place any visual design
product on this diagram, by rating its aesthetic and functional
qualities.
Notes on placing products on the
functional & aesthetic axes
A design product whose entire
interface has had an beautiful, rich visual treatment will be highest
in aesthetic richness. The more beautiful it is, the higher its
aesthetic quality. A design that doesn't look good is lower in
aesthetic richness.
A design product that effectively
delivers a high degree of functionality will have the highest
functional richness. Functional richness could represent any
combination of:
- Visually communicating information
in a clear, understandable way
- Providing ways to enter information
efficiently
- Providing tools that make it easy
to carry out complex functions
The 'better' a product is, the
further it will sit from the bottom-left (origin) of the chart.
Something that looks awful and is
awful to use will belong near the origin.
Something that works but looks awful
will sit somewhere up the left edge; something that looks great but
doesn't work well will sit along the bottom edge.
You'll find that nothing can exist
outside the curved boundary.
The sphere of design, with numbered
annotations
Insights from the sphere of design:
- There is a natural trade-off
between functional and aesthetic richness. You can't have something
that is at the same time both an excellent high-functionality
application and a great work of online art. That point falls outside
the sphere of design (1). The reason for this is that things that have
the highest aesthetic beauty and impact cause you to stop and look at
them, while things that are most functionally effective help you to do
the job you want to achieve without being looked at. The two can't
happen at the same time.
-
- The most functional web sites
are those that are information-rich, quick to load and totally obvious
to use. While they can also be pleasing and attractive, their focus on
function would be compromised if they were extremely visually impacting.
- Likewise, the most beautiful
designs - the ones that make you stop and stare - are rich in
visually-stimulating elements. While they can certainly also be highly
usable, they cannot also feature the weight of highly functional
features that would also put them at the very top of the functional
quality scale.
- The most functionally effective
visual designs need some aesthetic quality. Even the most functional
design (such as instructions for assembling furniture, technical
manuals, forms and reports) work better when they employ a sensitive
combination of aesthetic factors like balance, colour and contrast.
- The most aesthetically effective
visual designs also need to manifest some functional quality. If
something has no functional effectiveness, it becomes art, not design.
As far as a web site is concerned, even the most beautiful will impact
more people for longer if they can be used. A visually rich site that
is also easy to navigate and comprehend leaves its visitors more time
and mental energy to appreciate the visuals. When beauty becomes the
sole purpose, effectiveness is compromised.
- The ideal place for a product to
sit is on the boundary between 2 (most functional) and 3 (most
beautiful). A product that genuinely embodies an optimum combination of
looks and works (therefore, sits on the boundary somewhere between 2
and 3) meets the new standard.
The Arc of Excellence
The new standard of excellence,
illustrated on the sphere of design
Web sites that hit the new standard
exhibit an optimum balance of aesthetic and functional qualities
One of the most basic and important
things for a designer to have in mind before designing is a clear idea
of where the product should sit on this spectrum. Where on the boundary
of excellence should your site sit? Which imperatives are stronger: the
functional or aesthetic, or what is the balance?
Then, the designer should
purposefully create a product that hits that mark. This requires a lot
of discipline.
A site whose main objectives are
strongly functional and user-task-oriented (e.g. ticket booking,
information-retrieval, banking services) should aim for the North point
of golden crescent.
A site whose main objectives are
softer (e.g. brand promotion, entertainment, lifestyle) should aim for
the East point of the golden crescent.
Most sites ought sit somewhere
between these extremes.
Designers succeed when they first
select the right target, i.e. balance between functional and
aesthetic/emotional richness, and then hit that target.
Some examples of sites that hit their
marks
To show that the new standard is
obtainable, here is a handful of excellent sites that I think meet it.
They demonstrate most of the functional/aesthetic range, and I think
that they all hit their intended mark.
Placing a range of excellent sites on
the sphere of design
