Breathtaking and useful designs happen because the UI has been worked on tirelessly. It takes a real UI Master to understand how to make a terrific user experience on a website. Here are 10 extremely useful principles from some of the brightest minds in the User Interface field.
User interfaces (UI) are what separate top-notch websites from crappy websites. The absence of a useful UI can render an extremely useful web app useless. Why? Because the UI wasn’t thought out and thoroughly tested. If a user can’t easily navigate a website, she’ll skip happily along to another similar site that provides a better user experience.
1. Don’t Forget About the User – Jason Fried
Nearly every web developer has heard of 37 Signals. They are outspoken champions of agile development practices, but more importantly, they make some pretty awesome web applications. So awesome, in fact, that they are generally regarded as some of the smartest people when it comes to getting inside the user’s heads.37 Signals CEO Jason Fried is a big proponent of spending less time on nit-picky details and creating more useful interfaces, with the user in mind.
“There’s way too much talk about CSS and XHTML and Standards and Accessibility and not enough talk about people. CSS and Standards Compliant Code are just tools. You have to know what to build with these tools. Great, I’m glad your UI doesn’t use tables. So what? Who cares if it still doesn’t, let people achieve their goals. Web standards are great, but people’s own standards include getting things done (and that’s still too hard to do online).”
UI designers are making the same old fundamental mistakes, and forgetting about the human being on the other side just so their code looks better. Humans, not code validators, use interfaces.”
When working with layers of code for weeks on end, it’s hard sometimes to step back and remember that our sites are being used by humans, no robots. This isn’t implying that we shouldn’t worry about standards altogether. Standards are great and should be adhered to. We just can’t assume that standards compliance is all that’s needed to create a good UI.
2. Don’t Overlook Error Pages – Jakob Nielsen
Error pages are the sort of thing that most web developers, (myself included), like to just sweep under the carpet. It’s a tiny detail that affects only a small fraction of our site’s visitors, right?
Usability expert Jakob Nielsen states that maybe we’re viewing 404 error pages in the wrong light. Maybe we should be viewing the error page as a teaching tool.
The most common guideline violation is when an error message simply says something is wrong, without explaining why and how the user can fix the problem. Such messages leave users stranded.
Informative error messages not only help users fix their current problems, they can also serve as a teachable moment. Typically, users won’t invest time in reading and learning about features, but they will spend the time to understand an error situation if you explain it clearly, because they want to overcome the error.
3. Always Set a Background Color – Jeffrey Zeldman
Jeffrey Zeldman is the founder of web design firmHappy Cog, an author, and also started A List Apart, a terrific resources for web developers. If anyone knows how to make a proper user interface, it’s Zeldman.
Jeffrey points out that one greatly overlooked bit of code in web development is the absence of setting a background color.
It’s astounding how many web designers forget to specify a background color on their site. They’ll spend months iterating wireframes and design comps; write CSS hacks for browsers predating this century; test their work on everything from Blackberries to old Macs running System 7; and of course they’ll validate their markup and style sheets. But after all that, they’ll forget to apply a background color to their site, and they won’t think to check for it.
4. Don’t Overdo Accessibility Features – Roger Johansson
Accessibility is a fantastic thing for developers to key on when building a web application. However, it seems that we can sometimes get a tad carried away with making our sites and forms accessible. Design guruRoger Johansson points out that over-accessibility can sometimes be costly to our UIs.
Sometimes when people first learn about Web accessibility they look for quick ways of improving the sites they build. This often leads to misuse or overuse of certain HTML features that are meant to aid accessibility, but when used wrongly have no effect and can actually have the opposite effect by making the page less accessible and less usable.
Many of the commonly misused accessibility features are HTML attributes. It is my feeling that they get misused either by developers who mean well but don’t quite understand how the attributes help end users, or by developers who add them simply to be able to tick ‘Accessibility’ off their to-do list and shut up their manager, client or whoever is pestering them about making the site more accessible.
5. Use Epicenter Design – Jason Fried
Mr. Fried of 37 Signals makes another appearance on our list, thanks to his excellent advice on how to ensure that the most-important aspect of the design is always designed first. He has coined this method as ‘Epicenter Design‘.
Epicenter Design involves focusing in on the true essence of the page (the ‘Epicenter’) and then building outwards. This means not starting with the navigation/tabs, or the footer, or the colors, or the sidebar, or the logo, etc. It means starting with the part of the page that, if changed or removed, would change the entire purpose of the page. That’s the epicenter.
Using the Epicenter Design method keeps our UIs focused, and ensures that we’re not “missing the point” of the page.
6. Watch Your Users – Collis Ta’eed
NETTUTS’ very own Collis Ta’eed has an excellent tip for web developers everywhere: Utilize user testing. When you’re spending countless hours looking at the same design on your monitor, it’s sometimes easy to forget how the user could use the website. In fact, the average user might use your application much differently than could ever imagine.
The first thing you need to recognize is that when you carry out any sort of user testing, it’s going to make you a better web designer. You’ll get to see exactly how people use your web designs and there’s a good chance you’ll be surprised at how they do so. Things you think are obvious often aren’t, text you thought explained something doesn’t even get read, and generally speaking users do things they weren’t supposed to do. Even if the only user testing you ever do is asking some friends to use a site while you observe them, you’ll already be better for it, regardless of the project itself.
Knowing how users interact and use your website is incredibly valuable information, and if used correctly can greatly change your UIs to better suit your users.
7. Give Incentives For Users to Complete Forms – Jim Kukral
What may seem like a silly notion, it’s easy to forget that site users need incentive to do things like fill out forms and interact on your website. No one understands this better than a successful Internet marketer. Jim Kukral points out that in order to have a successful UI, the users must benefit in some way for filling out things like feedback or signup forms.
The user must feel that the value or outcome outweighs the cost (or time) of having to fill out the form. Therefore, unless you provide users with something of value in return, the chances diminish that the user will finish the task.
Incentives can be whatever you’re willing to provide. Here are examples of possible incentives:
•Give away a gift certificate for some of your products in return for the user’s contact information.
•Provide the user a chance for entry into a sweepstakes or other type of contest.
•Offer a free download of some expert content or information pertinent to the business at hand.
8. Keep the UI Consistent – Jakob Nielsen
Jakob Nielsen has researched web users for over a decade. He has provided countless tips on the topic of making UIs more user-friendly, but one of his best pieces of advice is to keep design elements consistent.
Consistency is one of the most powerful usability principles: when things always behave the same, users don’t have to worry about what will happen. Instead, they know what will happen based on earlier experience. Every time you release an apple over Sir Isaac Newton, it will drop on his head. That’s good.
The more users’ expectations prove right, the more they will feel in control of the system and the more they will like it. And the more the system breaks users’ expectations, the more they will feel insecure. Oops, maybe if I let go of this apple, it will turn into a tomato and jump a mile into the sky.
9. Keep Jargon to a Minimum – Erin Kissane
It’s way too easy to drop a few buzzwords or a pinch of jargon into your UI copy. Why? Because we knowwhat that bit of jargon means. However, we may be alienating the average user by using terms that they may not know. Web strategist Erin Kissane advices us to keep the jargon to a minimum for this very reason.
There’s a time for professional jargon: when you know you’re speaking to an audience that understands you, and you need the extra specificity and precision that jargon can provide. If you’re using it outside of that situation, you’re probably not communicating clearly, honestly, or effectively.
Jargon isn’t really the problem here, though. The problem with the copy on this page–and so many others that promote information products–is that it’s not saying anything. Misplaced jargon, buzzwords, and other kinds of fluff rush in because the lack of conveyable meaning creates a vacuum.
10. Make a Prototype Instead of a Wireframe – David Verba
When it comes to actually building our UI’s, many developers start with a wireframe of what the site will look like. However, as Ajax-driven rich Internet applications (RIA) are becoming more and more common, it doesn’t make as much sense to build a moving, dynamic website with a simple wireframe. Sometimes it’s just more effective to build a prototype.
Adaptive Path CTO David Verba argues that the wireframe may not be the best fit for designing UIs, as they just don’t cut the mustard for really fleshing out a complex application.
Prototyping allows us to see problems more clearly–and often earlier–in the design and development process. As we move beyond corporate content sites and into applications that have rich, complex functionality, our ability to sit down at the beginning of the project and foresee potential interactions and problems is diminished. The problem-space is just too complex. This is the reason we started using wireframes in the first place. Often the only way to really understand where problems are going to arise or to figure out potential solutions is to sketch them. We use wireframes to sketch content and layout, but as we move into more interactive interfaces, wireframes aren’t as effective. We need to sketch with actual functionality–sketch in code, so to speak–so we can see how the application will really behave.
