Usability Principles for UI/UX
Learn usability and its principles that can contribute to a great product experience.
What is Usability?
Usability is a term given for how we use systems, applications or products and with what effort. Usability determines the success of a product. It takes meticulous research and planning to make a product usable.
The above image depicts a USB flash drive. It is easy to uncap and carry it in your pocket. Though it appears to be a capsule when it is covered with a lid, it disguises itself well and serves as a USB flash drive.
Usability is an essential element for the survival of a product.
Benefits of Usability
Usable systems result in the following turnarounds for companies:
- Loyal customers
- Improved reputation
- Competitive advantage
- Minimal training and error costs
- Less support and service costs
Usable systems provide the following benefits for users:
- Improved efficiency
- Better productivity
- Enhanced quality of life
- Self-satisfaction
Usability Questions to Address
The following questions related to usability arise during the product development cycle. You have to ask these questions initially to achieve better usability.
- Who are the real users?
- What is the purpose of the product?
- When and where will the product be utilized?
- What activities will be performed by the users using the product?
- What are the location characteristics of the product?
Usability is Not User Experience
Let’s not get confused usability with user experience.
Usability
Usability is regarding the ability to use a product. The following questions creep up when evaluating usability.
- Are you able to use the product for the expected purpose without confusion?
- Are you able to find the required thing without errors or difficulty?
User Experience
User experience talks about emotions.
- How do you feel while using the product?
- Does the product offer you a sense of gladness?
- Do you feel important by using the product?
- Usability is just one of the many layers that influence the overall User experience of a product or service.
- The other UX layers/components are Information Architecture, Visual Design, Interaction Design, etc. Thus, User experience is the sum of all those layers, gauged by a person’s emotional response.
- A great user experience takes far more effort to do than good usability…but the results of planning and thought have a huge impact.
- User Experience bleeds over the physical world. A person can have a great experience researching a product on your website but that experience may not carry through when they interact with the people at your company.
- Remember, accomplishing a task in as few steps as possible isn’t synonymous with a good user experience.
- A great user experience cannot be achieved without a significant level of usability. A product that is difficult to use will always produce a poor user experience.
- User Experience (UX) is not just what it looks like and feels like. UX is how it works.
The key principles of usability
- Affordance
- Alignment
- Consistency
- Ease of Use
- Findability
- Error Recovery
- System Feedback
- Aesthetics
- Grouping of information
Affordance
What is affordance?
Affordance is a perceived idea of how you think you will use an object.
Why is affordance important?
Affordance helps you to easily answer the question — what do you think this object does?
Where do you use affordance?
- In the design of everyday objects -to convey their intended use.
- To design icons.
- To define clickable or non-clickable entities.
Let’s see if we can correlate affordance with shadow play.
- What are we trying?
- What are we projecting on the screen?
- What do we perceive?
Here, hands were used to depict the shadow of a dog through shadow play. What you perceive from an object correlates to affordance. If you were unable to judge that it was a dog? Then affordance fails there.
Let’s apply affordance to a user interface.
In the above example, the shapes of the mouse pointer suggest possible actions. The double-sided arrow pointer and the border around the rectangle indicate that the rectangle can be resized.
In the above example, a set of clickable and non-clickable buttons are shown. The highlighted bevelled effect or border around the icons indicate that the objects are clickable.
In the first mobile screen example, the user interface confuses the user with its styling. In the second example, the styling of the user interface clearly indicates the intended action. The layout and the sizes of the panels set a perception of swiping to view the next slide.
Alignment
When you place content in a straight line, or with relative indentations to denote hierarchy in a screen, this arrangement of content is known as Alignment. Relative indentations must be followed consistently on all screens.
Why Is Alignment Important?
- Your eyes are always looking to hinge on to a visual guide while scanning content. The following things can be achieved by aligning content appropriately: Better readability and understanding information hierarchy clearly by scanning the content. A pleasant finished look and feel.
- Most of us are conditioned to read from Left to Right, Top to Bottom, resulting in an F shaped curve. When text is aligned to the left, it becomes easier for the eye to move along the F curve. Any indentations automatically convey hierarchy.
- Misaligned text distorts readability as well as negates any visual cues that could be used to communicate hierarchy.
- Adherence to alignment must be followed as a consistent standard in all pages of an application.
Consistency
Consistency is a consistent/uniform behaviour noticed throughout all the places in a user interface. In other words, the same elements are seen at the same place, every time.
Why is Consistency Important?
Consistency helps in making your experience predictable, and therefore it helps in quick learning.
Where do you use Consistency?
- To establish branding
- In routine and repetitive work
- Where standardization is important.
Applying Consistency to User Interface
- Page Elements- Header, Footer, and Navigation. The position and styling of the primary interaction elements across the product/application need to be consistent.
- Colours
Do not use more than three colours in the entire application.
All similar elements such as headers, links, and titles must be rendered in the same colour. - Typefaces
Be consistent in the usage of fonts across the application.
Font styles, sizes, and colour should be consistent with the application. - Interactions
All the links, buttons, tabs must be consistent in terms of their appearance and behaviour. Use the same UI controls for similar actions. - Content
Use the same language throughout the application unless needed otherwise for business reasons. All the error messages prompt must use the same tone of language.
Ease of Use
How easily an object can be used without any help is referred to as ease of use.
Why is Ease of Use Important?
Ease of Use improves the productivity of users by saving time. Users without specialized knowledge can easily use products/applications.
Where do you apply Ease of Use?
- Business-critical tasks.
- High-frequency tasks.
- Where fields ordering is important.
Findability
Findability is how easily you can search information on a website as well as from outside the website with the help of search engines. In general, findability is the quality of being found.
Why is Findability important?
Findability allows quick retrieval of information. Therefore, it immensely helps in the efficiency of usage. As it helps you to have a constant bearing on your location on the website, it puts you in complete control of your actions.
Where do you use Findability?
- Search functionality
- Navigation
- Search Engine Optimization
- Accessibility
Findability in Real Life
Maps are in use for centuries to get to the desired destinations.
Applying Findability to User Interface
- Navigation
May it be the main menu, breadcrumbs, global navigation or doormat navigation links, and findability paramount. If users do not get to where they want to go quickly, they will lose interest in the application/website.
All the navigation links should be intuitive, direct and to the point. - Search
Search functionality should be quick and accurate.
Advanced search options should be provided wherever. appropriate. - Search engine optimization
Use of appropriate keywords to be used by search engines.
Error Recovery
Users must be allowed to recover from their mistakes. This act is known as Error Recovery.
Why Error Recovery is Important?
Recovery from error saves users from costly mistakes and allows them to revert changes freely.
Where do you use Error Recovery?
- In critical Tasks
- To forgive users for their mistakes
- Where undo is important
Error Recovery in Real Life
- Safety nets and harnesses used on construction sites provide a critical chance of recovery from fatal errors.
- At times users land on a screen, from where it is impossible to move away. Users expect some link/button to move away from such a screen.
- Undo option in an application allows a user to go and revisit the error.
System feedback
Whenever a system communicates an appropriate feedback/notification to the user at an appropriate time, it is known as system feedback.
Importance of System Feedback
- System feedback communicates the results of an action- success, failure, or work in progress.
- When feedback is conveyed to you, you are aware of the situation.
Where do you use System Feedback?
- To communicate the success of a user action- Confirmation.
- To communicate failure- Error.
- Work in Progress- Progress Bar and Loader.
The above image shows examples of appropriate system feedback.
System feedback includes many things that are not explicit confirmation or error messages. Any user-perceivable change in the system that reflects changes in the system state is a form of feedback.
Audio Feedback
- The whirring sound of the Automated Teller Machine (ATM) just before cash is dispensed.
- Beeping sound when turn indicators of the car are on.
- Ping sound on mobile phones for a new notification.
Applying System feedback to User Interface
When a user creates or edits a record, completes a transaction or is accomplishing a task that will take processing time greater than 1 second, the system should provide relevant feedback.
Guidelines for providing feedback
- 0.1 second
What the user feels- The system is reacting instantaneously
Feedback required- No specific feedback is necessary except to display the result. - 1.0 second
What the user feels- the user will feel the delay.
Feedback required- No specific feedback is necessary. However, the user does lose the feeling of operating directly on the data. - 3 seconds or more
What the user feels- About the limit for keeping the user’s attention focused on the dialogue.
Feedback required- For longer delays, users should be given feedback indicating when the computer expects to be done.
Aesthetics
Aesthetics is a collection of principles that deal with the appreciation of beauty and nature.
Importance of Aesthetics
A visually appealing and attractive interface not only retains the end user’s attention but also plays a major role in increasing repeat visitors.
Where do you use Aesthetics?
- Any work of artistic expressions
- The visual design of an application or a website.
Aesthetics should complement the content and not compete with it.
Applying Aesthetics to User Interface
Where do you use it?
Colours
- Powerful medium to create beautiful interfaces
- Not to be overused.
Typefaces
- Styles, sizes, and types can create visual harmony in design.
- A balance needs to be maintained between the aesthetic appeal and legibility of the typefaces.
Images
- Appropriate use of imagery can add to the aesthetic appeal of the interface.
- Images must be used to support the content of the application.
Grouping of Information
Objects or information with a similar trait is grouped together.
Importance of Grouping of Information
Grouping helps to understand and process the information easily. It also helps in finding it quickly.
Where do you use Grouping of Information?
- Grouping information on the informative website such as news
- To design a website menu
- To categorize information
Summary
The success of a product mainly relies on how easy it is to use. Usability denotes how we use products, with what effort and how pleasing is the overall experience of using it.
Learn more about Color Theory, Color Terminologies, Typography, UX Research Techniques, Dark Mode UI, Hick’s Law and Fitt’s Law.
