Consistency in Web UI Design

How to keep your software's UI consistent when many programmers are working on the project.

In a development team with half a dozen programmers all working on the same project, creating a uniform user interface can be a nightmare. There can be problems ranging from inconsistent use of icons to language (e.g. formal vs. informal). So the question is, what's the best way to achieve a cohesive user experience?

Few would argue the importance of UI design these days, especially since companies like Google and Apple have spoilt users with dazzling almost joy-to-use interfaces. But a functional application is still more important at least initially, you can always pretty things up once your software actually works.

When working as a UI designer, it was my responsibility to create mockups for the application being developed. Once I had created the HTML and image files in Web Expression and Photoshop, all I needed to do was bring them into Visual Studio as Master Pages. This worked out great because the programmers would then come along and add the logic.

This turned out to be an excellent approach since it doesn’t require a style guide or volumes of documentation. It works because just one person was in charge of the UI design. The reality is most companies don’t hire someone specifically for a UI role, although more companies are starting to (compared to a few years ago).

Having worked as an IT project manager for a few years now, I have found there is another approach which works well for ensuring UI consistency. Personally, I don’t put much faith in writing UI guides and expecting programmers to follow them. There’s a few reasons for this: 1) programmers often aren’t good at UI design, 2) it’s a lot to remember, and 3) its counter-productive.

UI style guides slow down programmers because you are expecting them to be good at something which they aren’t geared for; they are good at coding, so let them code.

So what do you get when you let programmers do their thing and just code with no specific guidance on UI? Inconsistencies in the interface. This even happens when you provide programmers with mockups to work from. For example, your mockup might not contain the exact wording for an error message so a programmer, quite rightly, proactively puts one in (e.g. “Invalid input”).

What’s the solution? Easy, you have one person review the entire interface at milestones and log bugs in the issue tracker. These bugs would be marked as UI or low priority. If there’s a script error in the software, it’s obviously more important to fix that first before looking at a UI glitch.

The next question is, who should be doing the interface review? It should be one person only (for consistency sake), and that person should be whoever is the most talented with HCI/UI design.

My point is this, don’t make programmers try and be UI designers. When you log a UI bug, it’s there in the issue tracker, it won’t go away. The programmers will come and fix them when they are good and ready. UI bugs are generally easy to fix so they can act as a good break for a programmer. Imagine a coder has just spent 2 hours debugging a serious data corruption issue. Fixing a few UI bugs would most likely come as a welcome relief.

As far as language or wording in an application goes (e.g. error messages, online help, labels, etc), you wouldn’t necessarily need to log bugs for that. If you are using a string table, or some kind of configuration file like XML, then it’s easy for the UI person to tweak text by directly accessing the configuration store. For example, if you found "login error" in the configuration XML file, you could change that to "the username or password you entered is incorrect".



When things get written down they will be forgotten. This is especially the case when documents get long (e.g. 20+ pages). The problem becomes compounded when you realize that programmers could care less about consistent UI across all the screens of an entire application. Their task lists often say 'Code login screen', not 'Code login screen - and make it look pretty'.

As a side note, I should say I have written a massive UI style guide for an application I designed. It took me almost 2 weeks to write and personally I think it was unnecessary. It was basically a way for programmers to understand how to modify the interface once I finished my contract. As to whether they found the guide useful or not, I don’t know. I think design should be left to designers and coding should be left to programmers, it just makes good business sense.

Subscribe to RSS Feed.

Missing or Poor Quality Website Content

Strategies for avoiding the debilitating effects of missing or low quality content.

We’ve all heard the horror stories of websites lingering for months whilst a client attempts to cobble together some semblance of worthy content for their ill-fated website. This problem doesn’t just affect freelance web contractors. It’s as much a concern for a project manager at a web agency. Why? Because a project can’t be considered complete until all its tasks are closed.

Content issues can come in a number of forms, but generally it’s a customer taking a long time to prepare text or pictures for use on their website. Also connected to this is the problem of poor quality content, that is; amateurish text riddled with spelling or grammar errors, or low quality photographs. If this problem was one of the four horsemen of the apocalypse, it would be famine since nothing makes a website appear malnourished like missing content.

So far I can’t say I have figured out a fool-proof method for dealing with this issue, although I have developed a few helpful strategies over the years. One approach I use is to take some liberties with the client’s content. For example, if a client has a page called ‘Our Team’, I may paste in some generic content I find on another website. What does this do? For starters, it often gets the client saying “hey, that’s not my content”, to which you reply “no problem – it’s just a place-holder until you put in your correct text.”

As strange as this may sound, putting in the wrong content often encourages a client to put in the right content. Perhaps this is appealing to the ‘if you want something done right, you got to do it yourself’ part of the customer’s brain. This solution isn’t appropriate for all customers; it works best with people who will understand you are just trying to be proactive.

One approach I have used in the past to deal with missing content is to automatically turn-off pages which are empty. For instance, if there is no text for the website’s ‘Press Releases’ page, it simply doesn’t appear in the navigation. It will only be a matter of time before the client says “where is my press releases page?”, to which you reply “you have to enter some text for the page, otherwise it automatically hides itself”. True, you will get people putting in “Page under construction” or “Coming Soon”, but if you give a person a CMS to manage their website, they can write whatever they like (it is their website after all).

Another great solution is to use a content questionnaire. This is a simple list of questions designed to illicit responses which serve as the basis for producing rudimentary website content. Here are a few example questions: “what does your company do?” “Who are your customers?” “What products or services do you sell?” “Have you been mentioned in any media publications?”. As you can see, you are effectively acting as a basic copy writer, so some degree of writing skill is required.

A common strategy you will see suggested is to have the client engage a content publisher or copy writer early on. The beauty of this is that a copy writer will hound a customer ‘til the end of days for material to work off – it’s their job. Web developers often focus too much on the technology-side of things, neglecting the most important aspect of the website; the content. The downside of this solution is many clients will flag a copy writer as prohibitively expensive. When budget is an issue, things which appear to have the least value are culled. Some clients may even look at it this way: “why should I pay for someone to do something I can do myself? I know my products better than anyone”.

Understandably, if a client has never had any interaction with a copy writer, they may not be aware of how much they can help. It isn’t just a matter of ‘good writing’, a copy writer can create compelling text targeted at a particular audience. For instance, a business owner may write something like this on their website “Welcome to my dieting website. Please browse our extensive range of products”, a copy writer would instead produce “Discover the secrets to fast and permanent weight loss with our revolutionary nutritional supplements”. And if the copy writer is well versed in SEO, even better.

Before this article wraps-up, let’s go over a few tips which may help you avoid content headaches: 1) bring up the topic of content early on in the project, 2) instil a sense of urgency, the client needs to know the website is nothing without content, 3) use generic, place-holder content when appropriate, 4) switch off pages which are blank (manually or via code), 5) recommend a copy writer get involved in the project early on (if budget allows).



When all is said and done, if a client wont supply their content or photos, or blocks your attempts at proactive assistance (e.g. putting in place-holder content), there isn’t a great deal you can do. Your best bet is to move onto your next project and check back periodically to see if they are ready to continue on with their work. This could be in the form of a phone call once every few weeks. You never know, a client may have some major disaster they are dealing with in their business which means they can’t spend time preparing content.