Updated: Sep 19, 2018
In this article I talk about my favorite three of the Usability principles and examples of how they are or could be applied to improve overall usability, task completion, and understanding on behalf of the user.
Applying the usability principle 'Predictability' makes the user easily and quickly move from one task/step to another. It makes the process clear and simple as possible. By implementing this principle, the user will also feel that they are not lost. Predictability is also connected to the Predictive model. It reduces the reaction time. It reduces the time it takes for the user to reach from point A to point b. It helps to minimize wrong guesses with clear language.
Example a: Button labeling
The Button labeling is the best example for predictability. It tells the user what to expect when they make every action. This was we are making it less complex for the user to navigate and interact. By using meaningful labeling it’s clear to the user what they are going to do and what result they have to expect by doing that action.
Example b: Breadcrumbs
Breadcrumbs is another example. Using Breadcrumbs means the users easy to find what they are looking for on the website within minutes regardless of where they land on your website. A difficult to navigate website is frustrating to users and will cause them to leave the website immediately. So, by incorporating Breadcrumbs in the UI design, we can make our site navigable. It also reduces the website bounce rate and also provides one-click access to deeper website pages.
Synthesizability is applying already existing knowledge in interaction to a new situation. Here the user would be already having an experience in this type of similar action. So, their existing experience helps and drives them to apply the same action to another event. This is purely based on the users’ existing memory. The user might have used this type of interaction from X number of years.
Example a: Main Navigation menu in the header
The main navigation menu in the header is a good example for Synthesizability. It is actually a support for the user in assessing the effect of past operations. The main navigation of a website has a huge role as it’s the component that gives the structure of the website and helps to navigate from one page to the another. The main navigation will consist of almost all the leading items of the website information architecture itself. The right labeling of the menu items will make the user navigate easily. The role of Synthesizability is when the user comes to the website and the first thing they do to navigate and find what they need is to move their cursor to the top in the header and click on the needed main menu items. It’s a result of the action they have done before. The user has a perception of where they have to fo to find things based on their previous interaction experiences. If there is a website which doesn’t have the main nav, it’s going to confuse the user and make it difficult for them. Hence the main navs are important considering the user’s past experiences.
Familiarity is important for design understanding. It is one of the widely seen as well as an important principle when it comes to user interface design. Familiarity can be implemented by using metaphors. This principle helps the users to take actions based on relating the familiar items to real life scenarios. Familiarity can be achieved only through comparison. The process of recognizing it is based on painting a picture in the mind of the user. Here the subject will be different, the object or the factors affecting the object will be connected.
Example a: Iconography
Using icons in the interface is the best example for familiarity. Here the user will be able to identify the icon faster than the label or text. Use of icons not only support the content but also grab attention and increase readability.
Example b: Colors
Certain colors have a certain meaning. For example, Red represents danger, Green represents right, Orange represents caution etc. The users see these colors right from the traffic signals and the road signs to websites and results. Using these colors will help the users to understand and react quickly. Like using red for error message text.