10 UI design rules to carve in stone
Well. Maybe the rules will change one day and you need to recarve that stone a bit. But the rules you are about to read are standing for decades already. So the title of this article ain’t no clickbait.
The birth of design principles
Designing new stuff is a messy process. No news there. Luckily, designers can learn from each other’s projects and share what aspects of a design have led to successful results. Other designers can then try out assumed success factors and confirm their effectiveness, or change and improve them still. Doing so, designers together write design principles. Those principles can then become a bit like game rules. Rules to maximize the chances of success for whatever you’re about to design. That’ll make your messy design process a little easier.
Design principles can be specific, like the ones on designing voice interfaces or virtual reality apps. Some principles are even company-specific to speed up the team’s decision making. The design team of a toy brand for instance will know how strong the toy’s construction must be and what the level of intuitiveness should be.
But you expected to read 10 generic rules of thumb on UI design. So let’s scroll down. Note that the following list is not composed by us at Achilles. All credits and thank yous go to the famous usability researcher Jakob Nielsen, and his teams. We merely added some examples to clarify the rules.
1
Show the system status
An interface must always inform the user about what the system behind that interface is doing. When users know the status of the system, they know what effect their actions have on the system and they can anticipate on what to do next.
Think of your printer. When you order it to perform a print job by tapping the green button, the interface must give some sort of feedback to clarify its status. Maybe the display says that your print will start in a few secs, with a progress bar underneath the message. The user then knows that his action -pressing a button- has the desired effect and he knows that the next step for him is to just wait till that sheet of paper rolls out.
The more predictable the interactions are for your user, the more that user will trust your product and your brand. Think of a print job of +100 pages. A trustworthy printer could inform the user that there’s not enough paper sitting in the printer to complete the job, asking the user to add more sheets before starting the print job. This way, the interactions with the printer are more predictable to the user because he won’t be surprised that the print job just stopped halfway.
2
Speak human
We are designing for people from flesh and blood, so we must make sure that our designs speak human. That’s words and natural sentences instead of code. Also the non-verbal language must feel intuitive to the user. Red is for danger, turning clockwise on a knob means more decibels or lumens and a smiley face says that all things are fine. These concepts are universally understood. As designers, we must respect these verbal and non-verbal agreements in order to build intuitive products. People don’t want to grab the f*cking manual every time they want to use a product.
3
Provide an exit
Design your product or service so that users have the freedom to make mistakes. Because they will. It’s best to always allow your user to easily undo and redo actions, and to exit without messing things up. This gives users the confidence to use your product and avoids frustration. Think of how unproductive you would be without Command-Z when writing a story on your laptop. Or how frustrating it would be if you could not cancel the print job on your printer after you realized it's printing the wrong document. Always offer your user an easy exit or a way to go back a step.
4
Copy the industry standards
At Achilles we’ve designed drinking bottles for a brand called Kambukka. People have used drinking bottles before they purchase a Kambukka bottle. If our bottle would open by turning the cap clockwise, users would be confused because all other bottle caps in the world must be turned counterclockwise to drink. So it’s a no-brainer to copy what the industry has been doing.
Copying standards also count for digital products and services. A standard in the app industry is to provide a ‘go back button’ in the top left corner of the screen to go back one page. Then your app better copies that feature to stay in line with all other apps. Also try to stay consistent within your own product. That means your ‘go back button’ should always appear in the same way on all relevant screens.
5
Avoid costly errors
I’ve said it already. Users make mistakes when they interact with your product. Mistakes can happen because the user cannot understand the interface, or because the user was not paying attention for a moment. You must perform user tests during the development of your product to discover where and when people make mistakes, and how costly the mistakes are. Found an often-occurring and costly user mistake? Then redesign the product so that users must confirm an action twice.
When a person wants to create an account on your digital platform, she must enter a user name and a password. She might write her password in both fields because she did not pay attention enough, thinking the second field was meant to rewrite her password for confirmation. If this happens, a well-designed registration page would show a pop-up (in red with a danger sign or so), informing her that her user name and password are the same. That’s to prevent her from making a costly mistake. She now has the chance to return and rewrite her user name before actually hitting ‘create account’.
6
Don’t make users remember information
Relevant information should be visible or easily accessible to the user. Don’t force him to remember information from 3 steps before. Imagine you design a cooking app for instance. You first let the user gather all the ingredients. Once that’s done, the user can hit ‘start cooking’ to follow the steps. Halfway in the cooking process you instruct your user to add the soy sauce. Don’t expect him to remember how much soy sauce was needed. Include the information in the description of that cooking step, or make sure the information is just one tap or swipe away.
7
Shortcuts and custom interfaces
A novice will not want to deal with all the expert features or ways of working just yet. So don’t burden your new users with all that. But people who already know your product will want to use shortcuts and a custom interface to e.g. speed up their productivity. Someone who mastered Photoshop and mainly uses it to render car exteriors will have learned what tools, windows and libraries he needs to access most. He will have set up his custom interface and shortcuts accordingly to fit his specific needs and way of working.
8
Remove irrelevant stuff
Your digital interface should only show what’s relevant at that moment. By removing irrelevant info, the remaining relevant info gains visibility and the user will find it easier to use your product. A webstore won’t show you the payment options until it gets relevant. It first lets you focus on what items to order because that’s the only thing that matters at that phase in the journey.
Removing irrelevant stuff can also be applied to the physical world. Your coffee machine may have a reset button that you can press if the software of the machine would ever get stuck. That little reset button is irrelevant to your daily routine and should not sit next to the cappuccino button. Better place that reset button at the back of your machine. It’s an irrelevant button that only makes your daily coffee routine more complicated and prone to mistakes.
9
Error messages and solution suggestions
A display that says ERROR43//45.v won’t be helpful to most users. Instead, pinpoint what the current problem is all about in a language that your user will understand. Then explain what the user must do to solve the problem. Always support your error message and solution suggestions with enough visual support so that people notice the error and understand what to do.
Back to the printer example: When your machine runs out of ink, the system will have to notify you first. You’ll hear a beeping sound to notify you and the display will clearly indicate what the problem is -that there’s no black ink left. The display then shows you how to solve this problem. Maybe you get to see a little animation to clarify how to replace the black ink. Once you’ve replaced cartridges, you hear a satisfying bleep and the display shows a big green button with ‘resume printing’ on it. See how all this works better than ERROR43//45.v?
10
The f*cking manual
Manuals. Yuck! Sure thing there are not many people who enjoy reading them. So strive for a design that doesn’t need a manual. But in some cases you cannot avoid them. Then, still aim for a compact manual that’s easy to find online -because who likes to search boxes and drawers for a paper manual-, easy to navigate and to understand.
That’s it. The 10 UI design rules that Jakob Nielsen described decades ago. They all sound very straightforward right? I know. But it doesn’t hurt to get reminded about them once in a while. So write them down or save this webpage. Whatever works best for you. Just make sure to remind yourself of design principles like the ones you’ve just read. They’ll help you to speed up your design process, decision making and increase your chances of a product success.
Good luck nailing your next design challenge!
