8 Elements to as Successful User Interface

What elements make a successful user interface?

We find that there are eight key elements that make a successful user interface. These elements are, in order from what we find to be most important:

  1. Affordance
  2. Comprehension
  3. Predictability
  4. Responsiveness
  5. Discoverability
  6. Explorability
  7. Efficiency
  8. Forgiveness 

Curious what exactly these elements mean? Keep reading to find out!

8. Forgiveness

When an interface helps a user when they mistakenly performed an action, it is said to be providing forgiveness. One of the best examples is when a user fills out a form, and enters something wrong or leaves something blank. An interface that informs the user as to why something was wrong or why something needs to be entered is a forgiving interface. This helps reduce a users frustrations and helps the correct the problem. A form that simply highlights errors but doesn’t describe why something is wrong is not forgiving and can frustrate a user to abandonment. You should never assume the user used your form wrong, but that you did not properly inform the user as to what they needed to do. 

A forgiving interface also helps a user recover when they performed an incorrect action. Allows the user to “undo” an action allows the user to relax as they’re using your interface. Predictability and affordance should minimize the need, but when something does go wrong, it’s nice for a user to know that everything is safe.

7. Efficiency

1: productive of desired effects
especially: capable of producing desired results with little or no waste (as of time or materials)
(Merriam-Webster, 2019)

Efficiency is the degree to which an interface is efficient. An efficient interface is one that is predictable, with strong comprehension. These allow a user to accomplish what they set out to do with as little effort as possible. When your user stumbles and takes more time than they should to accomplish something, improvements in comprehension and affordance may need to be made. Sometimes something is efficient, but a user doesn’t not how to get to it. In this case, discoverability may be hurting your interface’s efficiency.

A consistent set of design guidelines and create easy to comprehend layouts makes for an efficient experience.

6. Explorability

1 b: to become familiar with by testing or experimenting
(Merriam-Webster, 2019)

Users can navigate freely throughout your interface, with no concerns of making a mistake or getting lost. A predictable and forgiving interface greatly helps increase explorability, which in turn helps discoverability. Users love to tap and click around, and when they can do so freely and safely, all the while knowing exactly how to return to a previous state, makes an interface explorable. 

5. Discoverability

1 a: to make known or visible
(Merriam-Webster, 2019)

The ease at which a user can find something. Often used when discussing “increasing discoverability” of a feature or a setting, or making something easier to find, or more obvious. Affordance, comprehension and predictability play a significant role in discoverability. Is there an area of your interface that users keep missing? Then discoverability of that area should be addressed.

4. Responsiveness

Responsiveness refers an interfaces ability to adapt to various screen sizes. Today, websites are viewed on 4k TV screens all the way down to the smallest of smartphones. It is possible to design and built a website that works for the extremes and everything in between. A website that only gets so small and requires a smartphone user to zoom in and out is not a responsive website, or at least not responsive down to mobile screen sizes. Responsiveness does not only apply to websites. It can apply to phone and tablet apps as well. Many tablet users have run across apps that look like blown up versions of phone apps. That’s because those apps are not built to respond to the larger size of tablet screens. A properly responsive design ensures that all other key elements are successful.

3. Predictability

2: behaving in a way that is expected
(Merriam-Webster, 2019)

A predictable UI is one that does the things a user expects. There are no surprises. Having your own consistent design guidelines and using ideas from common best practices, ensures when a user opens your website or app for the first time, they feel like they can begin interacting with it and get the results they expect. Sometimes you need to break best practices, and that can hurt predictability. But if you ensure that deviation is used throughout your interface, it can become something the user gets comfortable with. Strong affordance enhances predictability. Predictability can also make the user more likely to explore and discover new features.

2. Comprehension

1 a: the act or action of grasping with the intellect :UNDERSTANDING
(Merriam-Webster, 2019)

Great comprehension means text and data are displayed in a manner that the user can easily understand. UIs that have good comprehension means that labels are clear and easy to compare, descriptions and captions make sense. Efficiency and responsiveness can affect an interfaces comprehension. A screen that is comprehensive at a large screen size may suffer if not properly responsive for smaller screen sizes.

1. Affordance

1: the quality or property of an object that defines its possible uses or makes clear how it can or should be used
(Merriam-Webster, 2019)

How recognizable it is that an element can be interacted with by the user in a particular way. Strong affordance means it’s obvious to a user that they can perform a specific action. Weak affordance means the opposite, it is not clear to the user that an element can be interacted with or it is not clear as to how the user should interact with it. A number of characteristics can add to an elements affordance, but no specific characteristics are necessarily required. For example, a button shadow that changes on hover can help to indicate a button can be selected. But, that does not mean all buttons need shadows. Predictability helps strengthen affordance through an interface.

 

 

 

 

Questions?

We’re ready to help! Let our experts help you create a successful user interface.

User Experience

Our user experience team can assist you through your journey.

Research & Design 

✔︎ User research and competitor analysis

✔︎ Interface design

✔︎ Validation testing

Call Now

☎︎ 402-926-2000

Contact