The Truth About the Future of Web Design: Performance-Based Design
I will wrap up this book with a look into the future—not of HTML5, CSS3, or any particular technology, but the future of our profession. (And I want to pitch you on my web app at http://itsninja.com.)
Let’s face it, we’re nerds. We love technology. It’s exciting, it’s changing rapidly, and it’s just plain fun to be on the forefront of one of the biggest technological and social phenomena in generations—the Web.
But cool technology is a means to an end. It irritates me to no end when web designers and developers breathlessly proclaim a new web site is “Designed with HTML5!” as though it means something. Technology enables design, but more/newer technology doesn’t mean better design—sometimes it’s quite the opposite. At the end of the day, web design is pretty simple. Users click or they leave. They engage or they bounce. They buy or they abandon. And it’s the actual page design (and copy) that determines how often that happens.
So far, so obvious. But here’s the kicker: we can measure what users do with our design. We can measure whether they click or buy or whether they bounce or exit. It’s probably the most profound difference that separates our practice of designing on the Web from just about any other. We can measure performance in a way no other discipline has been able to in the history of design.
As the saying goes, what gets measured gets improved. And how:
- 37signals A/B tested the design of its Highrise marketing site and improved conversions by 102.5 percent: http://37signals.com/svn/posts/2991-behind-the-scenes-ab-testing-part-3-final.
- Conversion Rate Experts applied its methodology (explained in detail) to an SEOmoz landing page and made a cool additional $1 million per year: http://www.conversion-rate-experts.com/seomoz-case-study/.
- Digital Telepathy (a design agency that really seems to get it) redesigned the CrazyEgg marketing site and improved its conversion rate by 21 percent: www.dtelepathy.com/case-studies/crazyegg.
That’s just a taste; there are plenty more examples at http://abtests.com/ and http://visualwebsiteoptimizer.com/case-studies.php.
Operating in the Dark
It’s just as well we can measure what we do because right now we’re surgeons operating in the dark; we usually don’t have a clue whether we help, hurt, or do nothing for our patients. We’re operating on sites oblivious to design performance—whether people are reading more or buying more or bouncing less. We’re not only operating in the dark, but we’re doing so while experimenting with a bunch of crazy techniques that we’ve only just dreamt up and are all very excited by.
That’s a scary thought.
Doctors in the 18th century once thought having grubby hands was a sign of professionalism, not a gross lack of sanitation. They thought they were doing the right thing. (The guy who tried to tell them otherwise, Ignaz Semmelweis, went mad—literally.) But when they started observing and measuring what was happening to patients, they figured out it wasn’t such a good thing. Who knows what weird “best practices” we have in our profession that may turn out to be harmful?
It’s not all doom and gloom, though. The beauty of measuring what we do is that we can objectively find the best version of any given design. Don’t you hate coming up with a bunch of cool designs only to have the client choose the one you like the least (or worse, something you’re fairly sure will harm their business)? Wouldn’t it be better if we could stop them from pulling the trigger when they point the gun at their foot?
We can do it now, and we can do it objectively, by changing the way we look at web design. I call it performance-based design, and I think it’s the next chapter of web design after standards-based design (long may it continue!).
Standards-based design is about how we can achieve certain designs. It’s production, and it’s important. Much of this book has looked at how we can improve what we do when building sites (for example, use ARIA landmarks, use the new audio/video elements, use some new form features, experiment with Canvas and SVG, implement the History API, and so on). These are important developments in the production side of what we do.
Now, however, it’s time to also start thinking about what performs best for our users, that is, what makes a real, measurable difference to how users interact with our site.
Measure When You Redesign
I imagine you’ve read this book because you’re going to be rolling out HTML5 site features, or whole site redesigns, as part of your day job. Maybe you’re going to use more CSS3 too. And maybe you’ve been following the Responsive Web Design tsunami and are about to put out a hot new responsive version of your site.
If that’s you, please measure what happens and share the results!
Let’s say you launch an “HTML5” site. It’s fast thanks to the History API. There’s some clever animation with SVG (or Canvas or jQuery or CSS3 or whatever). The video on the home page now uses an HTML5 media player.
What do you guess will happen?
Will bounce rates decrease? Does time on the site improve? Do more people convert or buy? We can measure all these things. If they do improve, great! We, as a community, need to know. We need data on what actually makes a difference for users—and what doesn’t—so we can all learn from the evidence, not ideas or guesses or hopes or assumptions or “best practices.”
We have the data; we just need to start sharing it.
The same goes for responsive sites too. If you roll out a responsive mobile version of your site, what do your mobile users do? Do they bounce less, stay longer, and read more? Or does the opposite happen? Or nothing at all? Do you know how to find out?
Or maybe it’s a tablet site. Does a responsive tablet design make any measurable difference to user performance? And if so, which designs work best? Simpler or more complex? Desktop-like or mobile-like?
There are so many questions, and guess what? We already have the answers. They are sitting in your Google Analytics account. We just have to dig them up and share our data so we can learn what makes a real difference for users and what doesn’t.
I’ve actually written a couple of books about this very topic and how to integrate these concepts into your workflow. They’re sitting unpublished on my hard drive at the moment, and I’m keen to know whether you’d like me to put them out, so please let me know (e-mail me at [email protected] or tweet me @lukestevens).
Let’s Get Objective
This problem of designers (including myself) not having the data front and center when we redesign has been bothering me so much I’ve actually developed a web app that goes some way to solving this problem. Ninja for Google Analytics dives into your Google Analytics data and bubbles up the most relevant performance stats for you in a simple, elegant interface: http://itsninja.com. Check it out; I think you (and your clients) will like it.
Objectively measuring design performance needs to become the number-one priority for every one of our projects. It’s bigger than HTML5 or any other technology floating around (as interesting as they are). When you start thinking in terms of measurable performance (conversion rates and engagement rates especially), you’ll see web design and development in a whole new way.
Until then, go nuts with the new stuff in HTML5, measure what happens, and publish the results!
Thanks for reading.
Luke Stevens