AAA Web Agency logo

The 4 Golden Rules of UI Design

The 4 Golden Rules of UI Design

There is no software without a user interface (UI). A successful implementation is imperceptible to the end user. When it’s done poorly, customers will be unable to move past it and use the product effectively. Most designers adhere to interface design principles to improve the likelihood of success when developing user interfaces. The principles of interface design are the overarching ideas that direct programmers. The purpose of this article is to present some elementary ideas. The works of Jakob Nielsen, Ben Shneiderman, and Bruce Tognazzini served as inspiration for these. Their respective works are titled 10 Usability Heuristics for UI Design; 8 Golden Rules of Interface Design; and Principles of Interaction Design, respectively. The majority of these ideas can be applied to any kind of interactive system, whether it has a graphical user interface (like a desktop or mobile app or a website) or not (such as voice-based interaction systems).

These are the rules that guide user interface design:

  1. Facilitate user agency in the interface.
  2. Create an environment where using the product is pleasurable.
  3. Lessen the mental strain.
  4. Create uniformity in the user experience.

1. Place users in control of the interface

The best user interfaces make the user feel in command. Users feel at ease and quickly gain a sense of mastery when they are allowed to make decisions about how to use the product.

Make actions reversible – be forgiving

According to this guideline, the user must be able to undo their most recent action in a flash. Because of this, users are free to experiment with the product without worrying about making mistakes (since they can always undo their last move). To the contrary, nobody wants a tense and slow exploration process that results from the user having to be extremely cautious with every action.

Text and image editors are two of the most common graphical user interfaces (GUIs) that feature a “Undo” or “Redo” button. When editing text or creating images, the ‘Undo’ feature allows users to make changes and revert back through each individual change. Users can go back several steps and then continue forward through their edits thanks to “Redo,” which allows them to undo the undo.

If a user selects a system function by accident, they can use the “Undo” feature to undo their selection. Here, the undo feature acts as a “emergency exit,” allowing users to back out of the problematic situation. When users delete emails in Gmail by accident, they receive a notification message with the option to undelete them.

Create an easy-to-navigate interface

The way forward ought to be unambiguous and obvious at all times. Any piece of software’s user interface should be one that users take pleasure in exploring. An abundance of features in a complex B2B product shouldn’t make customers nervous to use it. By giving them a sense of where they are, where they’ve been, and what they can do next, good UI puts users at ease.

  • Give people hints by showing them pictures. Users can use visual cues as a gentle reminder. Provide anchors for users to hold onto as they explore a product’s interface and facilitate smooth navigation. The titles of pages, highlighted links to the places the user has already visited, and other visual cues help users quickly grasp their current context within the interface. Never should a user have to ask, “What am I doing here?” or “How did I get to this screen?”
  • Predictability. It is important to give users indicators of how their actions will play out. Users should never have to ponder, “What button do I need to press to complete this task?” similarly to “What does this button do?”

Provide informative feedback – be acknowledging

It is common practise to link feedback with specific user interactions; for every action taken, the system should provide a clear and actionable response. A frictionless user experience is made possible by a system that provides feedback on each and every action.

In order to create an effective user interface, designers must think about how people will actually use it. Consequences can be weak when they occur frequently. It’s important, for instance, to give the impression that a user’s action has been recognised when they interact with an interactive object (like a button). This could even be as simple as a button that, when pressed, changes colour (the change notifies the user of the interaction). Due to the lack of confirmation, users must repeatedly check the system to make sure their commands were carried out as expected.

The reaction should be more substantial for rare but significant events. User-friendly interfaces (UIs) help users by providing context-specific guidance where it’s needed most, such as the password field of a signup form.

Show the visibility of system status

When users know what’s going on and receive regular updates on the progress of the process, they are much more patient. When users start a lengthy computer process, it’s crucial that they know where things stand. While an app is supposed to be performing some action, users don’t like to see a blank screen on their device. One of the more nuanced aspects of UI design that has a significant effect on users’ ease and satisfaction is the implementation of progress indicators.

An effective user interface can reassure end-users by updating them on the system’s status as their request is processed. Dropbox displays the upload’s current status, including its progress and remaining time.

Accommodate users with different skill levels

It’s important for a product to accommodate users with varying degrees of expertise. Don’t make novices and casual users your top priority at the expense of your expert user base. Instead, you should cater to a wide range of users, whether they are complete novices or seasoned professionals.

Helping out new users is made much easier with the inclusion of features like tutorials and explanations (just make sure that experienced users are able to skip this part).

After getting the hang of a product, users will begin searching for ways to perform common tasks more quickly. When designing for advanced users, it’s important to make shortcuts available to them.

2. Make it comfortable for a user to interact with a product

Eliminate all elements that are not helping your users

Information that is rarely used or unnecessary should not be included in interfaces. Noise caused by irrelevant data reduces the relative visibility of the useful data by competing with it. Eliminate clutter from user interfaces by reducing the prominence of features and information that aren’t essential for accomplishing core user goals. Make it a goal of your user interface design to ensure that everything you see on the screen is both necessary and helpful. Evaluate each component based on the benefit it provides to the end user.

The app iA Writer is a great example of the ‘less is more’ philosophy in action, as it does not cram the user interface full of unnecessary content or functions.

The iA Writer app’s screen is a blank slate where you can type without interruption. It eliminates distractions so that the writer can concentrate on the task at hand.

Don’t ask users for data they’ve already entered

Users should not be compelled to re-enter information that they have already provided. Users are easily frustrated by lengthy sequences of data entry, especially if they have already supplied the necessary information. A good user interface gets the job done with as little input as possible.

Avoid jargon and system-oriented terms

Simple, straightforward language is essential when designing any product. Instead of using jargon or terms specific to the system, the interface should use language and concepts that are familiar to the user.

Apply Fitts’s Law to interactive elements

According to Fitts Law, the amount of time needed to acquire a target depends on the target’s distance and size. As a result, it’s preferable to create massive goals for crucial processes (big buttons are easier to interact with).

Also, keep in mind that the total time needed to acquire multiple targets is simply the sum of the times needed to acquire the individual targets. Therefore, it is important to work on reducing the total number of targets that users must interact with in order to complete a given task in order to increase the efficiency of an interaction when designing a user interface.

Design accessible interfaces

It’s important to keep in mind that people with low vision, blindness, hearing impairments, cognitive impairments, motor impairments, and so on are all potential users of the products we create. When you make your product more accessible, you increase its usability for everyone who uses it.

Design elements, including colour, can greatly affect usability for people with disabilities. Some users can see the full spectrum of colours, while others can only make out a small subset of those. Men are more likely to be colorblind than women, but only about 1% of women are. Avoid relying solely on colour to convey meaning when designing user interfaces. Whenever you use colour in the interface to signify something, you should make sure that non-color-seeing users are still given adequate context.

Use real-world metaphors

To help users better understand how their experiences in the digital world relate to their everyday lives, designers often employ metaphors. Users are given more agency thanks to real-world metaphors, which facilitate the transfer of prior knowledge about how things ought to appear and function. Metaphors are frequently used to familiarise oneself with something new. For instance, the “recycle bin” on your computer’s desktop isn’t actually a trash can, but it serves the same purpose and helps you visualise where your deleted files go.

The best metaphors create a lasting mental link between the figurative and the literal for the reader. On Macs, the trash can icon looks like a real trash can and indicates whether or not there are any files in the trash.

Find a metaphor for the user interface that helps people understand the granular structure of the model you’re trying to convey. Referring to a real-world physical card is acceptable when asking for credit card information for payment processing.

Engineer for errors

The user experience is prone to accidental mistakes. Ineffective error handling and irrelevant error messages can drive users away from your app. Instead of giving up in frustration, a user may be persuaded to try again after reading a thoughtful error message. An efficient error message includes both a clear description of the error and some guidance on how to fix it.

Having a well-designed user interface that prevents errors from happening in the first place is preferable to simply writing good error messages. It is preferable to either prevent the occurrence of error-prone conditions or to check for their presence and prompt users with a confirmation dialogue before the action is completed. One useful feature of Gmail is the reminder it provides if you forget to include an attachment.

The best designs prioritise error prevention and have robust error recovery mechanisms. To help users avoid making the same mistake twice, Gmail displays a reminder when an attachment is missing after being referenced.

Protect a user’s work

Make sure that nobody’s ever going to lose any of their hard work. Users shouldn’t lose their work due to human error (such as accidentally refreshing a web page with a form that has user input), system error, internet connection issues, or anything else that can be avoided.

3. Reduce cognitive load

The cognitive load of a product is its demand on the user’s mental resources. When designing a product, it’s preferable not to force users to put in too much mental effort.

Chunking for sequences of information or actions

The concept of chunking was first proposed by psychologist George Miller in 1956. Miller claims in his writings that our working memory has room for seven “chunks” of data plus or minus two.

Using this principle, you can classify and categorise your belongings with ease. For example, if your UI forces users to enter telephone numbers without normal spacing it can result in a lot of incorrectly-captured phone numbers. Clusters of ten or more digits are usually too large for humans to scan in order to find mistakes. That’s why we have to separate phone numbers into digits and dashes.

Reduce the number of actions required to complete a task

In order to maximise efficiency, the number of clicks, taps, swipes, and tap-and-drags that a user must perform should be minimised. It’s important to keep in mind the “three-click rule,” which states that any given piece of information should be accessible in no more than three clicks for the user.

Recognition over recall

As one of his 10 usability heuristics, Jakob Nielsen suggests prioritising recognition over recall. Because recognition uses more cues in our brains, it is much simpler than recalling something from memory (cues spread activation to related information in memory, and those cues help us remember information).

Having information and functionality that is both readily available and easy to access is a great way for designers to boost familiarity in user interfaces. Tooltips and other contextual details are two examples of visual aids that can assist users in making sense of data.

Promote visual clarity

If the interface is well-organized visually, users will have an easier time navigating it and locating the information they need.

For better layouts, keep in mind:

  • Don’t overwhelm viewers with too much data all at once. Make use of a grid layout to control the chaos of your design.
  • Keep in mind that “function precedes form.” Create an illusion of functionality.
  • Use standard content organisation techniques, such as logical sectioning, numbering, and the inclusion of headings and prompt text.

4. Make user interfaces consistent

Consistency is a defining characteristic of a well-executed user interface, as intuitive design is based on consistency. Maintaining uniformity across all elements helps make a product more approachable and easy to learn. Allow users to carry their knowledge and abilities over from one section of an app’s UI to another, as well as from one app to another.

Visual consistency (style)

One should never doubt a product’s honesty. All elements of the product should use the same palette, typeface, and icons. Always check with your design system manager to make sure you aren’t making arbitrary changes to your product’s aesthetic. Each page of your site, for instance, should have a Submit button that looks identical to the ones elsewhere.

Don’t make the mistake of applying different styles to the same element on different pages. It is unacceptable to leave users guessing as to the intent of a redesigned button like this one.

Functional consistency (behavior)

The object’s functionality should be consistent across the user interface. Interface controls, such as buttons and menu items, should always behave consistently across all instances of a product. Users are easily annoyed when features suddenly change or fail to function as expected. That can make it harder for people to pick up new skills and make them less likely to trust the interface’s reliability. Keep actions consistent by adhering to “The principle of least surprise,” which ensures the interface acts as its users anticipate.

Consistent with user expectations

Users have high standards for their favourite apps and websites. One of the worst possible things you can do to a user is to design your product in a way that goes against their expectations. It doesn’t matter how well reasoned your case is for how something ought to function or appear. Users’ expectations of how it should function or appear will be difficult to shift. If there is no obvious benefit to using your method, then you should adopt the standard practise.

  • Observe the standards of the platform. Your product must adhere to the norms established by the platform specifications. Adhering to guidelines guarantees that users will be able to make sense of your interface’s component parts.
  • Try not to re-create the wheel. Many design issues already have appropriate answers. We refer to these repeating configurations of an issue as patterns. Common motifs evolve into widespread standards that everyone knows how to use. If you ignore this workaround and insist on developing your own, you may end up frustrating your users. If you deviate from established design patterns, users are likely to find your product difficult to use, not because the solution you’ve come up with is bad, but because they have no experience with it.
  • Do not make the mistake of attempting to create new words. Instead of coming up with brand new terms, use familiar ones when possible. Users have certain naming expectations because they spend so much time in other apps and on other sites. It’s possible that they’ll get lost in the translation if you use different words.

Conclusion

Today’s UI designers strive to create interfaces that are safe for experimentation by their target audience. Future interfaces will undoubtedly be more intuitive, appealing, predictable, and forgiving; however, the UI design principles discussed here will still hold true.

More To Explore