Design aesthetics are important but when they compromise usability, it’s customers and ultimately your bottom line that will suffer.
For those who have been working with the web since the nineties, you’ll remember that in its infancy, building ‘web pages’ was to many a dark art, and afforded those versed in the practice some respect…
In those early days, building web properties was different. People appreciated that websites suffered some inherent constraints. Subsequently, if you were tasked with building a website, there was an understanding between designer and developer (if those two jobs were actually fulfilled by separate people) that things wouldn’t (and couldn’t) be identical to a graphic composite.
Despite being at the vanguard of a new medium, even at that point, good web developers understood that they were in many ways UX designers too. They knew what would work well, or not, for the user attempting to use and critically interact with the site in question on this new fangled worldwide web.
The double-edged sword of CSS
After high profile CSS based layouts for Wired (2002) and the CSS Zen garden (2003) appeared, it opened the door for more ‘print like’ designs. In the years since, graphics designers have become accustomed to designing a fixed width composite of a website, getting it signed off by a client and then handing the Photoshop files over to a developer (often outsourced) to achieve a browser wide pixel-perfection conversion of their graphical rendering.
This paradigm has been failing us
It’s easy to understand how this has brought about a comfortable process between design agencies and their clients; what the client sees is what the client gets. This has, in a great many instances, led to us failing our users. Graphical design has trumped other, more important considerations, namely usability and testing.
Many developers, myself included, have at some point built web sites that they consider to have compromised usability considerations. It’s not that they didn’t air their grievances to relevant parties along the way. It’s just that aesthetics were given higher priority than they should have. Consider a typical exchange between developer and designer:
Developer: “Font size looks too small. 9px will be difficult for some people to read.”
Designer: “Leave it – any bigger and the sidebar doesn’t look even.”
Obviously, in retrospect, it’s easy to know that when you compromise your values, you only have yourself to blame for a poor end product. However, these are lessons we often learn for ourselves along the way.
The new paradigm: content everywhere
Whether you are a business owner, designer, strategist or developer, when you think of the web, if you’re still presuming a default 960px wide canvas, connection speeds measured in the order of Mbps instead of Kbps and a modern desktop browser, pretty soon you’ll be in for a rough ride.
I’ll state the obvious; mobile phones, tablets, TV’s are all being used increasingly to access the web. And while I’m at it, here’s another obvious point that bears repeating: a fixed width design, presuming a mouse and keyboard as the primary input devices, won’t cut the mustard in the future.
If that’s all you’re offering your customers, you will fail them as they struggle to get the most out of your web property using the smartphone, tablet or future device of their choice. If they can’t do what they need at your site but can at your competitors, guess who’ll be enjoying more business?
How many product based sites do you see (fashion stores are typical offenders) with the option to hover your mouse over an image to get a zoomed view of the product? Did the graphic designer ever try that interaction on an iPad, Kindle or smartphone? Maybe they should? Maybe, tablets weren’t around when the site was built? If not, maybe it’s time to re-design?
That’s just one obvious example of why in the current climate, employing a graphics designer alone to create ‘desktop’ mock-ups in Photoshop before handing them to a developer to build and then hand to the client (or use yourself) with no user and device testing along the way, would be a mistake.
Ultimately, from a design perspective, there should be no holy cows. The questioning of any design decisions should be encouraged from all involved. Furthermore, when it’s evident designs are lacking from a usability perspective, there should be no qualms in changing the design. If the content is ever being changed to fit the design, you’ll know something has gone wrong.
Stop pointing the finger
We can’t merely blame graphics designers for the current situation, their job is to create beautiful visuals and the best ones can realize interfaces that look like art. However, we need to harness their skills and use them appropriately. Making a 960px wide ‘desktop’ composite for a web design, often without any real indication of the content or context associated, is not the most effective use of their talents.
In many ways, we have also reached a point where a graphics designers tools are failing them. Photoshop and Illustrator can’t deal with a dynamic canvas. At present the only true reflection of the flexible canvas we work on, is a browser window itself. But a designer isn’t necessarily a developer too, and can’t easily test their design(s) in a browser on multiple devices. The way forward is therefore probably more collaborative, designing more iteratively in the browser (with the help of a developer if needed) much sooner in the processes.
More on that shortly…
Focus on needs
Hopefully you would agree that usability is what users care about most. How easily can they achieve what they need to? Whether that is find information, buy products or contact you.
We should always think about fundamental questions before worrying about the aesthetic considerations (the size of logos and colors of sidebars for example):
- What are my customers here to do?
- How can I simplify their process of doing that?
Apple, currently the world’s most valuable company, has arguably triumphed primarily by simplifying tasks for its customers. How to mute phone calls, how to launch applications, how to unlock a phone screen. They obviously haven’t skimped on aesthetics either but you rarely get the sense when using their software that form has triumphed over function. It’s important that when we envision, design and test web properties we give usability the level of respect it deserves. On a web property it should be of paramount importance.
Back to processes
Currently, for many SME’s it’s typical for web projects to be created and launched through a process of:
- Visual design (graphics designer makes Photoshop composites)
- Visual designs are signed-off by client
- Build starts (this is the first point at which the developer gets involved)
- Testing (developer is told to make it look and work the same in every (desktop) browser)
- Handover to the client.
- Client fills site with their ‘real’ content (unbelievable but many times we build sites without even knowing what content will actually go in them!)
- Users on other devices struggle with X, Y or Z as they weren’t considered.
On the web, a user can change font size, interact by touch, mouse and stylus, switch to a different browser, change their screen orientation, size or device and we should be doing everything we can to test for and embrace these possibilities, not work against them. If the prior process looked familiar, perhaps consider something more like:
- Establish what users need; what are their core goals/needs when using the site?
- Establish/test the optimum way of achieving that goal (everyone can input here, as any user might do things differently).
- Get a low-fidelity version working in the browser and USE/TEST it with as many different people/devices as possible! Developer involved here if not before.
- Refine process with developer on multiple devices until the basic user experience is honed.
- Graphics designer adds their expertise: colors, design patterns, typography – perhaps creating composite ‘Style Tiles’ (http://styletil.es) rather than full-blown composites to reach a suitable aesthetic.
- Developer layers on the designer’s aesthetics.
- Re-test with as many users/devices as possible.
- Users enjoy site as their devices and way of interaction has likely been considered and catered for.
Admittedly, changing established processes takes courage and a surrender of some control; the process probably won’t be perfect first time out. There must also be understanding from everyone involved that the ‘design’ will adapt and change and appear differently on different devices but this is no bad thing and ultimately, the users will thank you for it; hopefully evident from an increase in sales, readership, subscriptions etc.
Let go of print
Until recently, the comparatively limited disparity of Internet capable devices has allowed us to create web properties that have hidden behind the rigid conventions of print; fixed, static and predictable. Now however, the proliferation of disparate devices has brought back into sharp focus the truly flexible nature of the web.
We must therefore rise to this opportunity of meeting many more customers wherever they are and however they connect to the Internet with an emphasis on their needs. In turn that means it’s now more important than ever that usability is considered appropriately when creating for the web.