(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.
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.
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
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.
<>
[...] article linked in the guide. The articles are excellent. I greatly appreciated the article entitled “The Sphere of Design,” which does a nice job explaining how usability (functionality) and design (aesthetics) are [...]
[...] uses what he calls a The Sphere of Design which is the area where you have both aesthetic richness and functional richness. Every website [...]