My puppy Kaylee is worried about your interface.
Consider this an intervention.
There are a lot of reasons your interface can become inconsistent. That ONE page needs to have a 24pt headline because it just doesn’t look right in 22pt. Designer 2 doesn’t like the loading spinner that Designer 1 made for their section of the site, so Designer 2 makes a new one. Designer 3 doesn’t know you already have a progress bar design, so they make a new one. There’s a new and awesome technology that’ll save you a ton of time so you implement it on new features and it’s got some UI baked in. You’ve redesigned and all the new pages are going to use the new look. Etcetera, etcetera, etcetera. (Yes, I wrote that in Yull Brynner’s voice.)
But just stop it.
You see, interface inconsistency is bad for ALL THE REASONS. It’s tech debt. It’s cognitive load. It makes your site look unprofessional. It’s hard to QA. It’s embarrassing, for Pete’s sake.
So, how do you correct it? And once you’ve gotten your site clean of this poison how do you prevent a relapse?
One step at a time
Think of inconsistency as an addiction. Addiction to form over function, or quick over quality – it doesn’t matter. You need to approach it the same. First, admit you have a problem. Tell everyone who will listen (internally – let’s not air our dirty laundry!) and get them to help you take stock of the problem. How many button colors do you have. How many font sizes? How many types of popups? How many ways do you say “buy”? How many shades of grey are you using? (I kid you not, I once worked for a company that was using 23. We narrowed it down to 6)
After you’ve made your list, you’ve got to start cutting back. Who should be the head pruner depends on the organization, but I tend to feel it’s the owner of the overall design – so, a director of UX or a lead designer or whatever your company has that serves as a Design Poobah. They’re going to add another silly Silicon Valley title to their skillset – Consistency Czar. If they’re smart, they’ll involve other designers and maybe even a product manager or two in the process, so that they’re not shoving decisions down peoples’ throats later.
Pruning usually goes one of two ways: You can either choose the few versions of each thing that make the most sense for your brand, or you can choose the version that’s used most often. If one version is more usable than another, choose that one. Be ruthless. You don’t need 23 greys. You probably only need 3.
Once you’ve decided what’s canonical and what’s apocryphal, you need to communicate it like crazy. Remember how you told everyone you were an inconsistency addict? Now you need to tell them you’re in recovery. You need to push the consistency agenda like it’s an election year and wealthy donors are standing by. If you have multiple designers, make sure the whole design team knows what you’re moving forward with and what you’re sunsetting. While you’re at it, make sure the engineering team is in on the fun too. You’re about to ask them to retrofit some code.
Once the communication is done, you need to start acting. This is where your partnership and good relationship with your developers comes in handy, so I really hope you’ve built one. This is truly where the withdrawals hit in my addiction metaphor, because it’s the painful phase.
How you structure cleaning house into your roadmap will be unique to your organization, but the devs will ultimately be deleriously happy to be able to get rid of extra stuff. If you have a hard time selling them on the idea, tell them three things:
1. Consistent sites have reusable widgets that can be maintained and shared.
2. Consistent sites load faster and that helps everything from SEO to performance scores to bounce rate.
3. Consistent sites are way easier to upgrade later.
Put your ego away
Once you’ve started the process of pruning out the apocryphal versions of your widgets, text, icons, colors and other code noodles, you automatically enter the next phase: relapse prevention.
When you’re designing a new feature, refer to your styleguide, pattern library, UI library – whatever you use to document your design decisions. When in doubt, just go click around your own site and talk to people who are designing stuff too. Before you add a progress bar, check to see if you’ve got progress bars anywhere already. If you do, USE THAT ONE.
If you don’t like that one, DO NOT design a new one unless you first get agreement from everyone including developers to change the original too. You heard me right. Use stuff you hate unless you’re willing to make changes to all instances of a thing. It’s better for everyone involved, because your developers are not going to trust you if you make them go through a big consistency project every two years. Not to mention the executives, who will wonder why they have to keep spending money to fix something they already fixed.
When you do design a new feature, make sure you share it. “Hey everyone! We didn’t have a slider widget so I designed one. Here it is for you to use!” is not only a great way to ensure consistency, it also saves other people future work and plays a PR role in letting people know what you’re doing. Never underestimate the value of good internal PR.
Everyone is a sponsor
From the moment you realize your site should be more consistent, every single employee of the company should be deputized as a consistency sponsor. While ultimately, it’s the designer’s call whether to introduce new styles and elements, every product manager, developer, executive, and admin should speak up if they think they’ve seen an inconsistency. The designer will either justify it as necessary, or fail to justify it and need to change it. Either way, users win and engineers don’t waste time building bad things.
Today’s Interesting Link:
How much to make – This is all about the broad strokes, of course, but it’s fantastic as a way to get you thinking about whether or not you should be building a mobile app, vs making a properly responsive site.
Today’s Usability Quote:
“Know the rules well, so you can break them effectively.” – His Holiness the Dalai Lama
Today’s Music To Design To:
I’ve lately found that Erasure’s Wonderland, from 1986, is amazing for driving you through heavy workloads and crushing deadlines. It’s high-energy electro synthpop, in case you’ve been living under a rock and don’t know this seminal album.