“If you broke down everything you could think of that goes into riding a bike, and then improved it by one percent, you will get a significant increase when you put them all together.” — Dave Brailsford
Marginal gains in web designSince the British cycling team shocked the nation by not falling off their bikes, marginal gains has become something of a rallying cry for business. But whereas businesses typically need to restructure, and drive this change from the boardroom, it’s a philosophy that dovetails neatly into existing web design practice. Marginal gains is an iterative approach to problem solving, as favored by lean startups. Through the use of design patterns, most websites perform broadly similarly to their competitors; that being the case, even a minute improvement is sufficient to make a website stand out. 1% is, of course, not a literal figure. It’s impossible to quantify a design improvement in terms of a percentage. And even when a percentage can be found by measuring conversions, or performance, it’s not always desirable to do so. The key point, is that marginal gains focuses on small improvements.
Finding 1%Adopt the mindset that there is a 1% improvement to be found in every element of your website. The benefit of 1% is that it’s an attainable target. Naturally some elements of a project have greater scope for improvement than others. Areas that tend to lend themselves to marginal gains, are the elements that are often ignored by a traditional waterfall process. For example, error messages are commonly not copy written, and rarely designed, because they’re invented by the development team during coding. That tends to result in human-friendly messages such as Error 427: Expected data. To find 1% improvements, teams need to adopt a multi-disciplinary approach. Every element needs to be planned, designed, and engineered. And processes must not be put into silos. That’s not to say that every designer needs to understand OOP, or that every developer needs to be able to adjust tracking. But a collaborative effort, in which roles overlap, will prevent elements falling down the cracks. Copy that is generated by code; UI elements that aren’t predicted in style tiles; interactions that are added post-build; these are all areas rife for improvement.
The essential 1%We’ve known for a long time that users don’t read websites. Whilst we carefully craft content, our users are extracting everything they need to know from a couple of button labels. Whether they scan in an ‘F’ pattern or click around until they hit something that looks interesting, users focus on extreme details. That’s why micro-copy is such a big deal. It may be a hint, or an error message, a score we share on Twitter, or the labels on our menu; users spend more time with micro-copy than anything else on our sites. However, micro-copy is also the copy that is least likely to be designed, or provided by a client. Micro-copy is too often an afterthought that exists in the cracks. We all create passwords, most of us create them daily. So most of us have experienced the red asterisk that lets us know that our suggested password has not met with approval: we submit an account creation form only to find that we needed 8 characters; try again and we need less than 12; try again and we need a number; once more, we need uppercase and lowercase; try again and we need punctuation; try again, and we need different punctuation. It usually takes me about three attempts before I start to wonder if I really want the account after all. We have to write the error message to tell the user they’re wrong anyway, micro-copy alongside the form, clearly stating the rules, helps them get it right first time and has a negligible implementation cost.
The perfect 1%If there’s one area that fully embraces marginal gains, it’s typography. Finding the correct measure, the optimal leading, and making use of advanced features such as smart quotes, ligatures and small caps provides a measurable improvement in readability. [pullquote]There is no downside to good typography[/pullquote] Typography is as much science as art, with precedents created by the way the human eye and brain, process written language. As such, there are rules that define how we use it, meaning sweeping changes are rarely desirable. Typography is all about finding multiple 1%s to improve the whole. If you’re looking for 1% in your design work, focus on typography. Not only is it 95% of web design, it’s also a discipline that’s perfectly aligned with marginal gains. There is no downside to good typography.
The value of 1%1% is an easy figure to bear in mind, but it‘s plucked from the air. What matters is making small improvements that carry a negligible cost. Any improvement to an already refined website is incrementally harder. Finding a 10% performance boost will introduce unwanted side-effects such as loss of quality. If we can find 1% in ten different areas we can make the same 10% performance boost with no pay off. 1% improvements have little benefit on their own, but taken as a whole marginal gains is a process that will make your websites stand out. Featured image, teamwork image via Shutterstock.
Ben Moss has designed and coded work for award-winning startups, and global names including IBM, UBS, and the FBI. When he’s not in front of a screen he’s probably out trail-running.
Searching for a tool to make cross-platform design a breeze? Desperate for an extension that helps you figure out the…
By Robert Reeve
As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…
Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…
By Max Walton
Remember the screech of dial-up internet? Hold fond memories of arcade machines? In this list, we’re condensing down 30…