10 Essential Rules for UI Design

Design never really used to matter all that much.

It’s hard to imagine now, but before Apple’s meteoric rise to global popularity, design usually took a backseat to functionality. Today, design has become a world onto itself, and the community of designers and developers have united to develop a coherent set of rules for the creative practice.

The evolution of design is constant, and there are always new things to learn and focus on to bring function and aesthetics together in one package.

To stay on top of your design game, here are 10 important rules of user interface design to remember:

1. Cater to Universal Usability

With the explosion of different device types today, one size certainly won’t fit all.

When you create your website or app, you need to make sure that you design with all screen sizes in mind. This means loading fully on both low and high bandwidth Internet connections, to formatting appropriately on both iPad and iPhones.

In the past, developers have concentrated mainly on creating a good user interface for desktop. But, just to refresh your memory, mobile usage overtook desktop usage back in 2014. So, should you now switch your focus to mobile? While it’s important to pay special attention to mobile, it’s also worth considering that desktop usage is still significantly high, with 42% share.

Therefore, the key is to create adaptive user interfaces that will give the consumer a great experience despite the display or orientation of the device they’re using.

2. Clarity

People are extremely busy, and because of this, rarely dedicate their full attention to one task. Because of this, you need to keep your design simple to understand.

Don’t make your users guess. Use language they can easily understand in terms of words, phrases and the concepts. Avoid using special system or industry terms and insist on a language familiar to the audience.

If you’re intending that the user complete certain goals, let the actions be in a sequence that has a beginning, middle and end. When they are done, use a notification to let the user know and include any next steps.

For instance, if you’re designing a page for an online banking system, you can group the actions into “Contact Details”, “Account Details” and “Profile Settings” instead of having them all in a single form.

3. Prevent Errors

Errors aren’t only anomalies and mistakes, but also big roadblocks to visitors taking desired action.

If something goes wrong or loads incorrectly, most visitors won’t wait around for a fix, they’ll just leave. Stay vigilant and stay on a lookout for errors, fixing ones you do spot as soon as possible.

Users don’t like making errors. They feel even worse if they think they are to blame for the error. If they don’t transfer this hate to you and move forward, they will abandon their accounts even before they are set up, for instance.

When designing, eliminate the possibility of an error or design a system that checks the error for them before they go on too far. For instance, let’s say you require users to create a password that’s at least 8 characters long and includes a minimum of one digit.

Will your system let the user go on creating a password that falls short, only to notify them when they’re clicking “Next” or can it notify them as they type the password? The latter is the better design.

4. Make the Interface Consistent

Consistency throughout the user interface boils down to making things continuous, predictable, and within expectations. Designing everything across the board as uniform as possible and making sure there are no surprises or unexpected results goes a long way in making things consistent.

By the Principle of Least Surprise: “If a necessary feature has a high astonishment factor, it may be necessary to redesign the feature.”

Do users have to guess what words mean and which ones mean the same thing? Do they have to worry about clicking a certain button because they are not sure what it will do? Ensure consistency of processes, functionality, appearance and terminology.

Luckily, there’s no shortage of resources on this matter. Most of the reputable website builders will help you with this as they feature a uniform and consistent grid layout design.

5. Context

As it’s often said today, “Context is everything”. Context is how we’re able to connect new ideas together with old ideas, building relationships and meaning in our world.

The best teacher for this lesson is probably an advertiser. Advertisers know that without context-sensitivity to the time and manner in which they present their ads, then the ads become worthless—and that’s wasted money (look at how Google AdWords determines how to present ads).

Similarly, you have to apply contextual design in your user interfaces. Contextual User Interface is the location-based, time-sensitive and situation-based design of a website or app so that it delivers the most relevant data to the user. And this hasn’t been a major concern for designers until a few years ago.

With the growth of real-time connectivity and dependence on the internet, context could be the cause of your failure or success.

Context is key to human relationships, and equally important for the basic elements of design. We expect interactive objects to be intuitive, and should design to form coherent relationships between our function and design.

6. Size and Distance

Determining the size of UI objects and the amount of whitespace between each other is crucial to making sure that the design looks balanced and predictable.

Apart from gripping the user’s attention, this also helps the users understand where the objects are, without having to look all over the place for it.

Constant testing is best for determining the best way to go about this, enlarging what needs to call for more attention and shrinking what needs to be less distracting.

7. Defaults

Developers and designers usually like customizing everything.

This allows us to have control of everything from interfaces to wallpapers to ringtones. Most people, however, don’t seem to bother with customization. Most devices and other consumer electronics purchased almost never get changed. People typically don’t adjust their factory settings, since changing them takes know-how, time and effort.

By knowing this fact, it’s important to make sure that your default settings are suitable for a large batch of users to easily understand and navigate. This means telling the user, “Hey, you can customize this, but you don’t have to.”

8. Guided Actions

People typically won’t take any action unless they’re asked. That’s why tactics like the call-to-action are so powerful to help drive conversions.

More importantly, ask them “nicely”. What does this mean? For instance, consider the timing and context. Will you ask the user to start another goal without completing the one they are currently on? Consider when a pop up asking them to check out some other stuff appears. If it doesn’t appear after they scroll to the end of the post then you’re doing it wrong.

Take note that it only works when the visitor is actually interested in something you’re offering. If you can prove that you’re providing significant value to people, then don’t hesitate to ask users to do something in return like following your social media pages or blog. This works to keep your users informed, and also to naturally increase your web traffic over time.

9. Preferred Actions

At our web design company, we noticed that website visitors wouldn’t know how to contact us. There were just too many options. People would often become overwhelmed, and didn’t know how to start the contact process.

They would second guess themselves, and we ended up receiving less contact conversions as a result. By making our desired actions more obvious, we visually cued users to the actions we desired.

Again, don’t leave your users guessing. Let them know exactly what you want and notify them when they complete the action.

10. Feedback

When you walk into a dark room and flick a light switch, you expect the light to turn on. If nothing happens when you flick the switch, you might assume something went wrong. This is equally true when it comes to design.

No one likes being uncertain about their actions, so there should be feedback courtesy of tooltip messages and notifications to show visitors that their actions were successful and have been acknowledged. Feedback can be as simple as running a web survey or adding a “Complete” notification once a form is submitted, but it’s crucial when starting a blog or app.

This also emphasizes the need to not leave your visitors second guessing themselves. The system should be able to offer feedback that is relevant, fitting in importance and urgency, comprehensive and sensible and contextual.

Conclusion

The art of design is ever-changing, and we’ll continue to find new ways to combine function and form into UI design. We’ve been through things like minimalism and responsive design, changing and transforming as newer technologies come to the forefront.

With these ten UI rules in mind, don’t forget that some rules are made to be broken.

Testing and experimenting is how we learn new trusted techniques, but we can rely on several of these rules as our foundation.

Alex Jasin

Looking for more design strategies like this? Learn more at Metapress and X3 Digital, or connect with Alex Jasin directly on Twitter, Facebook and LinkedIn. Read more of Jasin’s writing on Business Insider, Entrepreneur, The Huffington Post, Internet Retailer, The Next Web and other major publications.