{"id":7127,"date":"2022-07-27T10:28:19","date_gmt":"2022-07-27T10:28:19","guid":{"rendered":"https:\/\/www.uxdesigninstitute.com\/blog\/?p=7127"},"modified":"2023-11-20T18:16:31","modified_gmt":"2023-11-20T18:16:31","slug":"10-user-interface-guidelines","status":"publish","type":"post","link":"https:\/\/www.uxdesigninstitute.com\/blog\/10-user-interface-guidelines\/","title":{"rendered":"User interface guidelines: 10 essential rules to follow"},"content":{"rendered":"

The primary focus of a user interface design is anticipating what a user might need to do to make their experience as intuitive as possible. How do UI designers<\/a> accomplish this goal with so many apps, websites and software? One way is through the 10 user interface (UI) guidelines<\/a>.<\/p>\n

User interface design<\/a> is all about usability, utility and desirability. By following these ten broad rules of thumb, you\u2019ll have a strong foundation for achieving your UI goals. Read on to learn the guidelines, dive into simple explanations of each and see examples of real-world implementations.<\/p>\n

What are the 10 user interface guidelines?<\/h2>\n

These are 10 rules of thumb for every UI designer<\/a>. The conventions, also called heuristics, were developed by Jakob Nielsen and Rolf Molich. Neilsen, a partner at Nielsen Norman Group, is a renowned web usability consultant. Molich is also a prominent usability expert. They combined their experience to create UI guidelines in the 1990s. Most recently, the guidelines were updated in November 2020.<\/p>\n

\n\t
\n\t\t
\n\t\t\t
\n \n

[GET CERTIFIED IN UI DESIGN]<\/p>\n Take our Professional Certificate in UI Design course<\/span>\n <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n

1. Visibility of system status<\/h3>\n

Users want to know what is going on throughout their experience with your product. Making the system status visible helps them understand the outcome of their prior interactions and decide the next steps intuitively \u2013 without having to think too hard about it.<\/p>\n

Provide feedback to users<\/a> immediately through pop-up windows or status bars. Creating a product with routine, predictable interactions builds trust with the user. Predictable experience helps them trust both your product and your brand.<\/p>\n

Example: Google Maps status bar and GPS arrow<\/h4>\n

Google Maps uses an arrow, or a car icon, to indicate where the user is in their journey. Additionally, they\u2019ve placed a status bar at the top of the screen that displays their next step and how far to go until their next step. They also went above and beyond to include a trip time indication at the bottom of the screen. Each of these components changes based on the users’ actions \u2013 whether they\u2019re following the route or not.<\/p>\n

\"Google<\/p>\n

2. Match between the system with the real world<\/h3>\n

While you might use it every day in the office with your team, users aren\u2019t going to understand the jargon. It\u2019s essential to speak the users’ language. That includes the words you choose but also phrases and concepts.<\/p>\n

When it comes to UI design, keep it simple. Put information in natural and logical order.\u00a0 Terms, icons and images should correspond to predictable outcomes. Icons like a magnifying glass or arrow are clear to your user. This practice is also called \u201cnatural mapping\u201d.<\/p>\n

Adhering to this practice makes learning and remembering how your interface works much easier for a user. It reduces a user\u2019s cognitive load – the amount of working memory resources used for a task. Lower cognitive loads make users\u2019 experiences with your product feel intuitive.<\/p>\n

Example: Pinch-to-zoom<\/h4>\n

Pinch-to-zoom was invented in 1983 but it wasn\u2019t used in consumer devices until 2005 with JazzMutant\u2019s product, the Lemur<\/a>. The Lemur was a multi-touch device that served as a controller for musical devices like synthesisers and mixing consoles. Now, you\u2019ll see pinch-to-zoom on nearly every touch screen device worldwide.<\/p>\n

\"Pinch<\/p>\n

 <\/p>\n

3. User control and freedom<\/h3>\n

Users need clearly marked exits from accidental or unwanted actions. This saves them from having to redo an entire process. \u201cEmergency exits\u201d create a feeling of freedom for users. The exits need to be clearly labelled and discoverable too.<\/p>\n

Clearly defined exits and the feeling of freedom they create for a user also fosters trust in your product and brand. They reduce frustration and negative feelings and help make your product more user-friendly.<\/p>\n

Example: Undo and redo in Google Docs<\/h4>\n

In most word processors, Google Docs included, you\u2019ll find \u201cundo\u201d and \u201credo\u201d functions in the toolbar. You might also recognise the common keyboard functions control or command + Z or control and command + Y. This allows users to quickly and easily fix a mistake without experiencing too much frustration.<\/p>\n

\"Google<\/p>\n

4. Consistency and standards<\/h3>\n

Users interact with multiple apps every day. Typically, it\u2019s best to assume they interact with your app the least and that your users’ expectations for your app<\/a> will be based on the apps they use the most.<\/p>\n

Predictability is important for trust. By maintaining consistency, you\u2019ll avoid making users learn something new. Sticking to industry standards reduces cognitive load and allows users to feel like your app is intuitive.<\/p>\n

There are two types of usability; internal and external. Internal usability means that all of your wording, icons, fonts, layouts and actions are uniform throughout your user interface. External usability refers to adhering to other apps’ industry standards for those same components.<\/p>\n

Example: Search magnifying glass<\/h4>\n

A magnifying glass always means \u201csearch.\u201d The search function, indicated by the magnifying glass, is usually located at the top of the page on desktop and bottom of the screen on mobile. They are easy to find in these areas and easy to navigate quickly.<\/p>\n

\"TikTok\"<\/p>\n

5. Error prevention<\/h3>\n

One piece of advice that UI designers hear often is to have a great error message and hope that no one ever sees it. There are two types of errors.<\/p>\n

    \n
  1. Slips:<\/strong> errors that happen unconsciously \u2013 usually caused by inattention<\/li>\n
  2. Mistakes:<\/strong> errors consciously made \u2013 usually a result of cognitive load or a mismatch between the user\u2019s mental model and the design<\/li>\n<\/ol>\n

    UI designers should prevent errors before they come up for the user. That means finding and eliminating error-prone functions during user testing before launch. If it\u2019s necessary to keep a function that tends to be error-prone, present the user with a confirmation before they can commit the action to avoid mistakes and frustration<\/a>.<\/p>\n

    To design efficiently, focus on preventing high-cost errors first. Then, make a plan to tackle the more minor frustrations. UI designers can use practical constraints, change default settings or provide confirmation options to prevent slips. They can minimise mistakes by making the cognitive load lighter.<\/p>\n

    Example: Shake to undo confirmation box on iPhone\u2019s latest OS<\/h4>\n

    Apple introduced shake-to-undo with iOS 13 back in 2019. This feature allows users to completely clear a text or note they\u2019ve typed by simply shaking their phone. The feature, though, is hidden. Many users shook their phones only to find their text mistakenly missing. Seeing users\u2019 frustrations, Apple quickly introduced a confirmation option.<\/p>\n

    \"Shake<\/p>\n

    6. Recognition rather than recall<\/h3>\n

    Humans\u2019 short-term memory only lasts 20-30 seconds<\/a>. It\u2019s much easier for a human to recognise the capital city of a country than it is to remember it. On top of that, they\u2019re using many other interfaces in addition to the one you\u2019ll design. It is unreasonable to expect them to remember where key functions are located.<\/p>\n

    As a UI designer<\/a>, you should ensure that users don\u2019t need to remember or transfer information from one part of your interface to another. All key elements, actions and options should be visible or easily retrievable throughout the app. They should also be located in the same place.<\/p>\n

    \n\t
    \n\t\t
    \n\t\t\t
    \n \n

    [GET CERTIFIED IN CONTENT DESIGN]<\/p>\n Take our Professional Certificate in Content Design course<\/span>\n <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n

    Example: Security code autofill<\/h4>\n

    iOS 13 also introduced a security code autofill function. When a user requests a security code from an app, the keyboard will grab the code from their text and suggest it above the user\u2019s keyboard. No short-term memory is required anymore.<\/p>\n

    \"Security<\/p>\n

    7. Flexibility and efficiency of use<\/h3>\n

    While consistency and uniformity are important to build trust and intuition with users, flexibility can be crucial too. Making your interface efficient by providing shortcuts and customisations can build a different kind of trust with your user.<\/p>\n

    This can look like a customisable dashboard, keyboard shortcuts or touch gestures that speed up common functions. Alternatively, like most social media platforms, you could offer your user content personalisation. This might be a way to tailor their feed like Pinterest or a hidden algorithm like Instagram or TikTok.<\/p>\n

    Example: Pinterest\u2019s press and hold shortcuts on mobile<\/h4>\n

    Pinterest offers a lot of customisation and efficiency functions for its users. From customisable boards, board segments, and feed tuning to touch gestures and board suggestions. By far, the feature that maximises efficiency the most are touch gestures.<\/p>\n

    They use industry conventions for the icons of their buttons on a simple pie menu. Pie menus, while not often used, are proven to be the most efficient type of menus for user experience.<\/p>\n

    \"Pinterest\u2019s<\/p>\n

    8. Aesthetic and minimalist design<\/h3>\n

    Minimalist designs dominate user interfaces for a reason. Streamlining an interface to only include relevant information is vital. Designs shouldn\u2019t feature something that\u2019s rarely needed. Keeping unimportant components in a design reduces the relative visibility and importance of key elements.<\/p>\n

    This doesn’t mean your design has to be flat design<\/a>. But it does mean that you should focus your content and visual design on the essentials. Above all else, your interface should support the users\u2019 primary goals.<\/p>\n

    Example: Medium<\/h4>\n

    Medium uses a slick black-and-white interface. Buttons are clearly labelled in grey or outlined. Their site is easy to navigate and includes very few menu options.<\/p>\n

    \"Medium<\/p>\n

    9. Help users recognise, diagnose and recover from errors<\/h3>\n

    Users want autonomy and control<\/a>. They don\u2019t want to reach out to your company when they encounter an error and you don\u2019t want that either. To avoid this, it\u2019s essential to help users recognise, diagnose and recover from mistakes independently.<\/p>\n

    Clear, plain language error messages that offer a constructive solution can accomplish this. Avoid using error codes. Include a graphic or visual representation of the error for even faster recognition.<\/p>\n

    Example: Spotify\u2019s failed payment notification<\/h4>\n

    Spotify does a great job with its error message. In plain language, they offer clear next steps to resolve the problem and it’s highlighted in bright red so that users can\u2019t miss it. They even provide an \u201cemergency exit\u201d in the top right corner so that users can opt to perform this task later, as it\u2019s not essential at the moment to use the app\u2019s free version.<\/p>\n

    \"Spotify\"<\/h3>\n

    10. Help and documentation<\/h3>\n

    Strong error messages<\/a> are not enough to completely cover all of your bases. Providing help and documentation that is searchable and easy to find is crucial for the long term success of any piece of software or hardware.<\/p>\n

    This should be kept concise. The next steps to solve a problem or learn a function should be listed in a concrete way. Where possible, it\u2019s best to present the documentation to the user at the moment that they actually need it.<\/p>\n

    Example: Chatbots<\/h4>\n

    Chatbots are a prime example of offering help at the moment<\/a>. Rather than exploring the website for help, Dubsado<\/a> offers potential customers a chatbot that helps them search documentation quickly and easily. If you can\u2019t find what you\u2019re looking for through the chatbot, they\u2019ll email you and you can continue your conversation with a real person or schedule a live one-on-one demo.<\/p>\n

    \"Dubsado<\/p>\n

    Why are the 10 guidelines for user interface design so important?<\/h3>\n

    Following these rules of thumb, or heuristics, will give you a foundation for good UI design. UI leaders developed these ten proven principles over decades to help make user experiences better<\/a> across the board. Now, they aren\u2019t the law. You don\u2019t have to follow them all the time. However, starting your design with these ideas in mind is beneficial for efficiency.<\/p>\n","protected":false},"excerpt":{"rendered":"

    To make apps, websites or software as intuitive as possible, UI designers look to the essential 10 user interface guidelines. As we run through the guidelines, we dive into simple explanations and real-world examples of each one.<\/p>\n","protected":false},"author":24,"featured_media":7153,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[278],"tags":[],"class_list":["post-7127","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design"],"_links":{"self":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/7127","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/comments?post=7127"}],"version-history":[{"count":13,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/7127\/revisions"}],"predecessor-version":[{"id":9444,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/7127\/revisions\/9444"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media\/7153"}],"wp:attachment":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media?parent=7127"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/categories?post=7127"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/tags?post=7127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}