Author: Jagriti Pande

Match between the system and the real world with examples

What goes through your mind whenever you see red color as a response for a field you just filled or a button that you just clicked? If you thought of an error, then it’s because it is the match between the system and the real world.

Seeing the green color, on the contrary, feels like a correct action or a success. This is because beyond screen also, red and green are typically associated with Stop and Go respectively.

When users use a digital product, they may not know the technical jargons and processes associated at the backend.

If you disregard your users’ understanding, and language or imagery that they do not understand, that can badly affect the whole user experience. We, humans, find great comfort in familiarity. If something is unfamiliar and non-understandable we feel fearful and doubtful.

In this second guideline of Nielsen’s Heuristics. Put in Nielsen’s words,

The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order. read here

Match between the system and the real world examples

Let’s talk about some scenarios and examples where this is relevant

The labels and other content

Most of the times the users are going to search for you on the internet or are going to navigate within your website using language that seems more natural to them.

In this image, the author shows how the Myntra shopping website is helping users to understand using language that seems more natural to them. This way it shows match between the system and the real world.
The screenshot of Myntra shopping website showing Match between the system and the real world

 

For example on this e-commerce website, they have used the word netbook for the laptop, which may seem really confusing to many users.

Similarly, error messages like these the following are not really very helpful for the end users (even for the developers at times).

In this image, the author shows how the error message shown by Windows is not helping users understand what the error is about. This way it shows match between the system and the real world.
The screenshot of the Error message by Windows showing a bad match between the system and the real world

Instead, a message like this feels less threatening and reassuring to the users.

In this image, the author shows how the a good error message should look like with a title, an informative text, primary-secondary buttons and even the icon of App in which error occurred. This way it shows match between the system and the real world.
The screenshot of a good error message showing Match between the system and the real world

Want an in-depth understanding of Nielsen’s Heuristics?

Not a fan of reading? Learn the UX Guidelines and methods that you can use and learn to instantly improve usability of your website, apps or software in this Udemy Course.

The familiar use of visual elements.

It is awesome to be creative and novel, but there already are some standard visual elements which users associate with certain actions.

For example, a star is conventionally associated with bookmarking.

In this image, the author shows how the Google chrome helps user to bookmark anything and read later with a star mark since a star is conventionally associated with bookmarking. This way it shows match between the system and the real world.
The screenshot of Myntra shopping website showing Match between the system and the real world

The trash bin is associated with trash bin/recycle bin. A link looks like a link if it is colored and has a line beneath it.

Medium and Kindle devices let you highlight the text the same way as you would with a highlighter if you were reading a book.

In this image, the author shows how the Medium website helps user to highlight any text which looks the same as we highlight in real world. They also give users an option to edit, comment or share.
The screenshot of “Medium” website showing Match between the system and the real world
In this image, the author shows how the Kindle device helps user to highlight any text that looks the same how we highlight in real world.
The screenshot of Kindle showing Match between the system and the real world

A button should look like a button. They should feel clickable. When a user clicks a button, it should feel that it has been “pressed”

In this image, the author shows how a button should look like. When a user clicks a button, it should feel that it has been “pressed”. This way it shows match between the system and the real world.
A GIF of buttons showing Match between the system and the real world. Source

When talking about visual elements, it is important to use the pictures or videos which match the target audience. The use of stock images is often not a really good strategy because it does not resonate well with the actual users.

In touch interfaces, there are few universal gestures, like tap, double tap, Zoom, Swipe left, swipe right, which should work the same way everywhere.

 

In this image, the author shows how the interfaces should behave. There are few universal gestures, like tap, double tap, Zoom, Swipe left, swipe right, which should work the same way everywhere. This way it shows match between the system and the real world.
Hand Gestures on screen showing Match between the system and the real world

 

Creating interfaces that seem familiar to users demonstrates empathy and shows that the organization actually cares for its users. It also leads to loyal customers who value your efforts.

Aesthetic and minimalist design – Nielsen’s Heuristic with example

Our brain can only process limited information at a time. The aesthetic and minimalist design is important to deal with this limitation.

Sometimes, the interface is too cluttered with a lack of hierarchy. Which makes it very difficult for us to focus or function properly.

The aesthetic and minimalist design is the eighth guideline of Nielsen’s Heuristics which is a great way to do Heuristic Evaluations.

As put in Nielsen’s words,

Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility. read here

 

Cluttered website shows a bad example of aesthetic and minimalist design

 

Some interfaces are aesthetically pleasant and relevant. These enable quicker actions and increases the efficiency of the users.

Ways to ensure Aesthetic and minimalist design

1. Show only relevant things

Medium – the blogging platform is a great example of this heuristic. It is essentially like a blank piece of paper and if you need to add anything beyond text, you just need to click on the + sign which again is the universal sign for adding something.


It is distraction free and you only see what is relevant for you to write.

Removing content may seem like the best way out even though it is not always the right approach.

Want an in-depth understanding of Nielsen’s Heuristics?

Not a fan of reading? Learn the UX Guidelines and methods that you can use and learn to instantly improve usability of your website, apps or software in this Udemy Course.

2. Maintain hierarchy

If you have created something that needs a lot of content, think of ways to organize it in proper hierarchy and sections. This is an important concept of aesthetic and minimalist design.

The websites like Atlassian and Stripe are the perfect examples. They have a lot of aesthetically placed content.


Trello which is an office productivity tools uses cards really well. Each card has within it a lot of information.

But on the dashboard, the user only sees the high-level information.

3. Keep “Above the fold” in mind

The term Above the fold came from conventional printing.

Like the front-page of the newspaper, it is the most important real estate in your interface.

Since most users will see this part, it’s important to keep only the most important things in this section.

In case of a website, Above the fold is the portion of the page visible without any scrolling.

Although, with changing user behavior, above the fold is not as relevant today.

But it’s still good to keep it in mind and show only the most important things above the fold.

4. Get rid of the extra mass

Extra mass is created by

  1. Features that are rarely used
  2. Copy that can be shrunk without losing the meaning
  3. Irrelevant images
  4. Redundant features

Remember only a fraction of things is useful on your page.

Always ask yourself that if there is one thing that you can remove from your interface, what will it be?

Conclusion

So, what is one application, software or website you feel is a great example of aesthetic and minimalist design?

 

Help users recognise, diagnose, and recover from errors

The only thing that is worse than an error is an error message that cannot be understood in plain language. I think by now, we have already discussed that it is extremely crucial to not use technical jargons. You must always help users recognise, diagnose, and recover from errors.

It’s the ninth guideline of Nielsen’s Heuristics which is extensively used in Heuristic Evaluations. Put in Nielsen’s words,

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution. read here

Examples of help users recognize, diagnose, and recover from errors

Here are a few examples to discuss this guideline.

Dropbox: Don’t just tell them what happened, tell them what to do next

Should they refresh the page, should they try again later or should they simply not worry as probably it’s not their fault. Error messages that are simple and action-oriented empower users with an option.

Example of error messages with links to rectify those errors helps users recognise, diagnose, and recover from errors
The screenshot of an error message showing Help users recognize, diagnose, and recover from errors

YouTube: Tell that they are offline but can still watch the downloaded videos.

YouTube at the time of no internet connection suggest users to download videos to see offline. which shows help users recognise, diagnose, and recover from errors
The screenshot of YouTube showing Help users recognize, diagnose, and recover from errors

Don’t use incomprehensible error messages

If they have entered a wrong detail in a field, highlight it along with the feedback of what they might be doing wrong Tell them how they can recover from the errors.

A bad example of help users recognise, diagnose, and recover from errors
The screenshot showing Help users recognize, diagnose, and recover from errors

 

Want an in-depth understanding of Nielsen’s Heuristics?

Not a fan of reading? Learn the UX Guidelines and methods that you can use and learn to instantly improve usability of your website, apps or software in this Udemy Course.

Twitter: Actionable error messages

In this way, you can help users recognise, diagnose, and recover from errors.

Twitter don't just show error message but also provide suggestions to improve Which shows help users recognise, diagnose, and recover from errors
The screenshot of Twitter error messages showing Help users recognize, diagnose, and recover from errors

 

Etsy: Use colors to highlight errors (too)

Along with the written error message, it is a wonderful practice to highlight errors using colors. For errors, it’s usually recommended to use a shade of red as it matches the real world stop signals.

Etsy account page shows " help users recognise, diagnose, and recover from errors" heuristics by highligting error message.
The screenshot of Etsy website showing Help users recognize, diagnose, and recover from errors

 

People with visual disabilities and color blindness cannot rely on colors only to identify errors.

Imagine if Etsy would have relied only on color to denote an error. This is how someone with a complete color blindness would have seen the error on the left side.

On the right side, it is done for users without a color blindness. What about the person who cannot see colors at all?

Etsy account page shows " help users recognise, diagnose, and recover from errors" heuristics using both color and an error message.
The screenshot of Etsy website showing Help users recognize, diagnose, and recover from errors

 

This is how Etsy uses both color and an error message to show error messages.

Etsy account page shows " help users recognise, diagnose, and recover from errors" heuristics using both color and an error message.
The screenshot of Etsy website showing Help users recognize, diagnose, and recover from errors

 

For many first time users or elder users, the errors and failure to recover from them can make them fearful of technology. Can you really blame the users if a system does not give them enough feedback to work on their errors?

Informing your users about an error and next steps is extremely crucial. If not done right can erode their trust and will not help users recognise, diagnose, and recover from errors.

Learn how to do a UX Audit on your Product

Learn the UX Guidelines and methods that you can use and learn to instantly improve usability of your website, apps or software

 

Flexibility and efficiency of Use

Flexibility and efficiency of use heuristic principle is about giving your users ways to speed up their work with more efficiency and flexibility.

It’s the seventh heuristics guideline of Nielsen’s Heuristics. Put in Nielsen’s words,

Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

read here

Examples of Flexibility and efficiency of use –

Almost every software like Adobe Photoshop, Sketch provides shortcut commands to its users. While few shortcuts command like those for copy, cut, redo undo are almost universal in nature, there are few which are subjective to the software. Yet with repeated use, users get the hang of these.

Photoshop Icon which shows flexibility and efficiency of use.
Photoshop Icon
SketchApp Icon which shows flexibility and efficiency of use.
SketchApp Icon

 

 

 

 

 

Mac OS gives the users the freedom to create their custom keyboard and shortcut commands.

Keyboard shortcuts are a good example of flexibility and efficiency of use.
The screenshot of Mac OS showing flexibility and efficiency of use

 

 

 

 

 

 

 

 

 

 

 

 

 

Another way through which you can enhance efficiency for users is to give them easy access to functionality that they need the most.

So on a Banking app, if someone wants to transfer money – giving them the list of their most common and recent transaction saves both time and mental effort.

In this image, the author shows how the banking app gives user the list of the recent beneficiaries. This way they do not need to remember the account details everytime they have to transfer money. Which shows flexibility and efficiency of use.
The screenshot of ICICI banking app showing flexibility and efficiency of use

 

Giving users the flexibility makes the overall user experience more enjoyable and efficient.

Want an in-depth understanding of Nielsen’s Heuristics?

Not a fan of reading? Learn the UX Guidelines and methods that you can use and learn to instantly improve usability of your website, apps or software in this Udemy Course.

How to do it?

Think critically about points in your users’ journey where you can offer them an opportunity to save time or bypass a lengthy process.

  1. Most critical paths in the user journey
  2. Details/steps that can be auto completed or saved for the next time
  3. Take note of the shortcuts your competitors are already providing or shortcuts that are like norms

Can you think of any examples where the system provides flexibility and efficiency of use?

 

Recognition rather than recall

The human brain retrieves information through Recognition rather than recall

As discussed on the other Nielsen’s heuristics, Consistency and Standards and Match between the system and the real world, a human brain is wired to quickly create and recognize patterns. For that, we have another heuristics called Recognition rather than recall.

Have you noticed, compared to an open-ended answer, how easy it to answer a multiple choice question. Or how recognizing a familiar face is easier than actually recalling the name. This is because to recall something, the brain has to exert that leads to cognitive load. Recall also is a function of time.

Recognition, on the other hand, means you are retrieving information through cues. This can involve multiple senses or a certain context or a story. From the user experience perspective, this is an extremely crucial thing.

Similarly, if you are looking to redesign the interface, it is extremely crucial to make sure that the haul is not so different than the users are having a hard time adopting it because the mental models are obsolete and they no more recognize what they are supposed to do with the current interface.

 

 

It’s the sixth guideline of Nielsen’s Heuristics. Put in Nielsen’s words,

Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.. read this

Methods

1. The first method is to Create interfaces that are consistent with their current experiences and mental models. There are certain things that users do in a certain way. Do not reinvent the wheel unnecessarily. You can also do an analysis of the competing products. This way you can see if there are any repeatable UX flows and patterns.

2. The second method is to give them context to remember. For example, an e-commerce website like Amazon show recently viewed items. This helps the user complete a purchase that was halfway.

Recently viewed items shown by Amazon shows recognition rather than recall
The screenshot of Amazon recently viewed page showing recognition rather than recall

 

Almost every messenger application has the chat history, which lets you start the conversation from the point where you’re left it.

Chat history on facebook shows recognition rather than recall
The screenshot of Facebook chat history showing recognition rather than recall

 

Want an in-depth understanding of Nielsen’s Heuristics?

Not a fan of reading? Learn the UX Guidelines and methods that you can use and learn to instantly improve the usability of your website, apps or software in this Udemy Course.

 

The software Keynote gives its user an option of open recent files. So that users do not struggle with the exact name of the presentation they might have created a few days back.

Recent files option on keynote that shows recognition rather than recall
The screenshot of Keynote showing recognition rather than recall

 

Do not forget to give your users enough context and cues to help them figure out what they need to do next. If each time, the users have to start afresh, that will make users doubtful and the chances of errors would be higher.

Consistency and Standards with Examples

A human mind is an amazing pattern recognizing machine. We do a lot of things on autopilot, right from brushing our teeth or using keys to open the doors. These all have a sense of consistency and standards.

This saves us time and energy.

Imagine what would happen if each time you want to login into your email, the form fields are different or are placed differently?

With so much exposure and experience with the interfaces, our brain has created patterns and now we look at the specific things at specific places.

If you find a new interface intuitive, it is likely consistent with the standard UX pattern and practices.

It’s the fourth guideline of Nielsen’s Heuristics. Put in Nielsen’s words,

Users should not have to wonder whether different words, situations, or actions mean the same thing. read this

Ways to ensure Consistency and standards –

Visual Consistency

While designing it is essential that the overall system should look unified, right from the fonts of the heading and body text to the colors used on the interface.

A brand guideline and design systems come handy in these instances. On moving from one screen to another, the user should not feel as if they have arrived at a new website.

In this image, the author shows how the Atlassian website has a consistency over different screens to make a better user experience. Which uses consistency and standards.
The screenshot of the Atlassian website showing Consistency and standards

 

In this image, the author shows how the Atlassian website has a consistency over different screens to make a better user experience. Which uses consistency and standards.
The screenshot of the Atlassian website showing Consistency and standards

 

Conventional Patterns

With time there are few established patterns that users have come to associate with any interface. For example, the placement of the logo on a website is on the top left, the search bar is on the top right, the cart is on the top right.

In this image, the author shows how NIKE shopping website follows consistency with the placement of the logo, search bar, cart and Login/signup on a website. Which uses consistency and standards.
The screenshot NIKE shopping website showing Consistency and standards

There are certain icons which have conventional meaning. Like a star is used for a bookmark or for reviews, a plus sign indicates an increase while a minus sign indicated a decrease.

Nielsen Norman group conducted a study where the participants were asked to make a purchase on an e-commerce website and then come back to the home page.

They found out that On sites with left logos, users are significantly more likely to navigate home in a single click than on sites with centered logos. Coming back to the home page is crucial because it is the first thing users tend to do if they want to start over or they feel lost.

In this image, the author shows how users reacted to a study conducted by nngroup on the placement of logos. The study then found that the best practice is to place it on the left top screen and made it a standard worldwide. Which uses consistency and standards.

Want an in-depth understanding of Nielsen’s Heuristics?

Not a fan of reading? Learn the UX Guidelines and methods that you can use and learn to instantly improve usability of your website, apps or software in this Udemy Course.

Functional Consistency

Based on how their interaction goes with your app or website, the users expect certain processes to work in a consistent manner throughout.

Example, On WhatsApp, the floating action buttons remains at a fixed position and the only thing that changes is the icon that represents the action that is relevant to that screen.

In this image, the author shows how WhatsApp create a consistent design with floating action button always at the same position. Which uses consistency and standards.
The screenshot of Different Whatsapp screens showing Consistency and standards

In this image, the author shows how WhatsApp create a consistent design with floating action button always at the same position. Which uses consistency and standards.

 

 

 

 

 

 

 

 

 

 

Consistent Communication

The tone must be in coherence with the brand. MailChimp, for example, has a friendly and funny tone that is exuded in their communication.

In this image, the author shows how MailChimp has a friendly and funny tone that is exuded in their communication on every page. Which uses consistency and standards.
The screenshot Mailchimp style guides showing Consistency and standards

 

Google’s mission and vision are again reflected everywhere from their website copy to the topics of their keynote presentations and product announcements.

  • Google mission and vision
In this image, the author shows how different pages of google has a consistency in design and writing styles. This is Google's mission and vision page. Which uses consistency and standards.
The screenshot of Google’s mission and vision showing Consistency and standards

 

  • Google’s presentation
In this image, the author shows how different pages of google has a consistency in design and writing styles. This is Google's presentation page. Which uses consistency and standards.
The screenshot of Google’s presentation showing Consistency and standards

 

  • Google’s product announcement
In this image, the author shows how different pages of google has a consistency in design and writing styles. This is Google's product announcement page. Which uses consistency and standards.
The screenshot ofGoogle’s product announcement showing Consistency and standards

 

Learn how to do a UX Audit on your Product

Learn the UX Guidelines and methods that you can use and learn to instantly improve usability of your website, apps or software

Platform Conventions

Every platform like Mac OS, Window OS, IoS, Android has laid out the guidelines for the UX design which are aimed to create a usable and consistent experience for the users.

In this image, the author shows how a platform like Windows OS has laid out their interface guidelines for designers to create a consistent experience. Which uses consistency and standards.
The screenshot of Window OS platform conventions showing Consistency and standards

 

In this image, the author shows how a platform like Mac OS has laid out their interface guidelines for designers to create a consistent experience. Which uses consistency and standards.
The screenshot of Mac OS platform conventions showing Consistency and standards

 

We recommend you to study and implement them in detail. This will help you make sure the users of a different platform feel comfortable to use your product.

So, this was all about consistency. It is extremely crucial because users like to buy from brands they know and trust. If their experience is inconsistent, that result in the lack of trust and loyalty.

If you have a website, or if you are working on a UX project. We recommend you to revisit them with the lens of consistency and standards.

Error prevention

Undoubtedly, a good product should inform its users about an error, but the best products are those which prevent an error to happen in the first place. A good UX anticipates an error and helps users with error prevention.

It’s the fifth guideline of Nielsen’s Heuristics. Put in Nielson’s word,

Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action. read this

Ways to ensure Error Prevention –

Lay out the special instructions beforehand

There are just so many websites which let you choose your password, only to tell you later that the password can only be of a certain length or must have an alphanumeric character etc.

So if there are certain special conditions like

  • The user can only upload a certain kind of document or
  • The password can be of a certain type or
  • The date entered can be of only a certain duration

your users will be pleased if these things are told to them beforehand.

This example illustrates error prevention perfectly. The users are given a feedback as well as they meet the right condition for the password.

Mail Chimp Prevents Errors
The screenshot of MailChimp create account page showing error prevention

 

Want an in-depth understanding of Nielsen’s Heuristics?

Not a fan of reading? Learn the UX Guidelines and methods that you can use and learn to instantly improve usability of your website, apps or software in this Udemy Course.

Offer suggestions

This is something that is often seen during a search on Google and certain e-commerce websites where the users get contextual search word suggestions while the user is typing.

Google search showing error prevention
The screenshot of a Google search showing error prevention

 

Uber demonstrates its users where to find a CVV number and the expiration date of their card to support users who might not know where to find them.

UBER showing error prevention
The screenshot of card expiration date guide by UBER showing error prevention

 

Card Details error prevention by uber
The screenshot of card expiration date guide by UBER showing error prevention

 

While auto correct may seem like a good option for error prevention. Make sure that users have the controlled freedom in choosing whether or not to go with the auto-suggestion.

For example, if you mistype a word in Google search, though it gives the search result for the correct word, it still gives users the choice of searching for the word or phrase they typed before. Which is another heuristic — User Control and Freedom.

google prevents search error
The screenshot of google wrong search suggestions showing error prevention

Make the user confirm

If the user has just clicked on the discard button, a simple confirmation message can help them retract from it if it happened by mistake.

Gmail asks their users if they have accidentally forgotten to attach a document. This is when the users have added the word attached or attachment

Gmail for missed attaching files error
The screenshot of Gmail for missed attaching files showing error prevention

 

Github goes a step ahead and asks users to type out the repository name in case the user wants to permanently delete it.

Github trying to avoid accidental deletion of code repository
Github trying to avoid accidental deletion of a code repository

Learn how to do a UX Audit on your Product

Learn the UX Guidelines and methods that you can use and learn to instantly improve usability of your website, apps or software

Don’t make them fill what you already have

Many e-commerce websites only ask for the 3 digit CVC or CVV number instead of asking you to write down the long card number to prevent any mistakes

UBER showing error prevention
The screenshot of Adding card in UBER showing error prevention

 

The calendar apps like Google calendar give the smart default as current time and date. This is to avoid mistakes that might happen while fixing up a time for a meeting. It is not very unusual for users to pick up a wrong time or a year.

google calendar showing error prevention
The screenshot of highlighted date and time in google calendar showing error prevention

 

Could you think of an example where the interface prevents the error from happening?

User control and freedom

User control and freedom Neilsen’s heuristics is about giving the users the freedom to undo an unwanted action.

Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. A good user experience must Support undo and redo. read this

Examples of User control and freedom –

Whatsapp’s deleting message feature; Gmail’s undo sent message feature; Edit comment feature on several social networking websites are all examples of this heuristics.

In this image, the author shows how social media websites such as Quora give their users freedom to edit or delete their comment. which helps in user control and freedom
Edit comment on Quora showing User control and freedom

 

In this image, the author shows how Gmail helps user to control their operations. They give their users an option to Undo or View their sent messages upfront. which helps with user control and freedom
Undo message sent on Gmail showing User control and freedom

 

The users must have the flexibility to edit or undo something that isn’t working from them.

Imagine you have moved to a new place and now when you order something online, it does not let you change the address.

If you are building a User Experience, an important exercise for you should be to think of possible instances where the chances of making mistakes could be high, or instances where there are things which are subject to change, give users the freedom to change things like user’s physical location, their bank details, their contact details, their subscription plan etc.

It is essential to provide flexibility to the users so that they have enough freedom to handle any mistakes. Your product should not punish them but instead, reassure them that you have their back.

What is Usability?

Usability defined in simple terms is the quality of a product that determines how easy it is to use it without facing any negative emotion.

For Instance, Let’s say you are in a new country and you want to take some cash out of the ATM Machine.

As you reach there you see that the instructions on the screen are in the language that you do not understand.

At that moment, the simple experience of taking out cash from that ATM machine becomes unusable to you.

When we talk about Usability it is also crucial to highlight that the aesthetics should never be the reason for compromising usability.

Beautiful but not usable
Usability is not always related to aesthetics

 

We have all felt frustration over interfaces which are not readable, use icons without labels or use technical jargons.

All these things erode customer’s faith in a product and they might not want to come back to use it again.

So, it’s crucial to think about Usability from the beginning.

How ISO defines Usability

To understand Usability better, let’s see how ISO defines Usability.

According to them, usability is defined as an extent to which a system, product or service can be used by specified users to achieve specified goals with effectiveness, efficiency, and satisfaction in a specified context of use. ( ISO 9241-11:2018)

This definition can be broken down into two main parts:

Part 1 is about User and their Context. It includes Specified users, their specified goals and their specified context of use.

Part 2 is about the Attributes of a usable product. It includes effectiveness, efficiency and the satisfaction.

Let’s discuss them in detail.

User and their Context

Specified Users

Every product caters to the need of a target or specified users.

It does not matter how great the technology and the aesthetics of your product is, it will not be relevant to your users if it is not customized for their needs.

For instance, When Amazon launched in India, they realized that there are several insecurities associated with online payments.

Also, the debit card penetration was not very high at the time they launched.

Amazon had to give Cash on Delivery to make the service usable for Indian users.

Another example could be of a Bank which is launching a new online service for elder citizens.

If they do not customize their platform keeping in mind about potential visual impairments, comfort level with technology and their financial situation, they might well be headed for failure.

If your product is not relevant or fit to be used by its intended users, then it is not usable.

Specified Goals

When someone is using your website or your app, they have certain goals in mind.

While using a Cab booking app, the goal is to go from one destination to another.

While using an online clothing store the goal is to buy clothes online.

It is important that these goals are accomplished on your product without any friction.

It is also important to also think about goals which are not the primary goal but are still relevant.

For example, in times of any query, the user’s goals could be to contact you.

Define the user’s goals keeping in mind the usual and extreme scenarios.

Specified Context of Use

Usability is also subjective to the user’s environment and context.

It is a combination of users, goals and tasks, resources, and environment.

For instance – A US car manufacturer cannot sell the same cars they sell in the US to India. Because while the US has a left-handed driving system; India has a right-handed driving system.

Localization by setting the right language and currency on websites is another example.

Attributes of a usable product

Effectiveness

It means accuracy and completeness with which users achieve specified goals.

For Instance, If while using a cab booking app, the users have to explain their pickup location every time to the driver because the App fails to pick up their location correctly, the users will be very frustrated with the whole experience.

Not only is the app doing an inaccurate job, but it is also making users do half of its job of conveying the correct location to the driver.

Efficiency

It means the resources needed to achieve a certain goal. Typical resources include time, human effort and costs.

For instance, If an enterprise app requires the users to acquire a new skill over multiple hours of training, it may not be worth all the money and time.

The most usable products are effective as they help their users in achieving their goals faster with minimum efforts.

Satisfaction

It is a qualitative measure of Usability and is also a bit trickier.

Satisfaction measures how well a product is perceived by the users upon actual use.

Help us in order to understand that fulfilling the users’ needs sometimes is not just enough, a product has to anticipate their expectations as well.

For instance, even if an e-commerce website is extremely easy to use, the users can report non-satisfaction over no discounts in the Holiday season.

Satisfaction is highly subjective to your specified users.

The language, the imagery, the color or the overall experience can affect the satisfaction amongst users.

Why Usability Matters?

Giving a usable experience is your basic courtesy towards your users.

If they are spending their time and money on your product, it makes sense to ensure they are happy while doing so.

But this is just one aspect of it.

Usability also makes a good case for business.

A lot of transactions these days are subscription based in nature, where if the users like the service, then only they are going to purchase from you again.

 

This is both exciting as well as a scary proposition for businesses.

If you provide your users with a great experience, they are going to come back to you, and if not then they will go to someone who provides a better experience.

Secondly, Every user who visits your website or downloads your application has an intention to engage with you. But if they are leaving without any transaction, that is a lost opportunity and hence lost money.

Even if they were there to just do some window shopping or trying out, still if the experience is bad, they will not use your product when they are actually ready for the purchase.

Studies to illustrate this point.

  • Shopping cart abandonment rate means the percentage of users who took an effort to find something on an online store and put it in a cart to shop, and still abandoned it at the end just before checking out the cart.
    Baymard Institute calculated the average shopping cart abandonment rate.
    According to this research, Based on 40 different studies this rate came out to an astonishing 69.89%.
    This further translates into $260 billion worth of lost orders which are recoverable solely through a better checkout flow & design.
  • If you run an e-commerce website and you think you are doing okay, this study just shows you can do much better.
    A Google study says that, compared to two years ago, smartphone users today are 50% more likely to expect to purchase something immediately while using their smartphones.
    53% of visits are abandoned if a mobile site takes longer than 3 seconds to load.
    46% of the people say they would not purchase from a brand again if they had an interruptive mobile experience.
    Nearly 9 in 10 smartphones owners who describe a mobile brand experience as helpful or relevant would purchase from the brand again.
  • Virgin America in 2014 reinvented their digital experience and tested out their new designs.
    They soon announced an IPO following two successful quarters.
    They saw a 14% increase in conversion rate.
    There were20% fewer support calls and Flyers booked nearly twice as fast, on any kind of device.

example of good usability

So, it does not really matter which industry you are in, as long as you have a digital presence; you need to ensure that the whole user experience is usable.

I encourage you to look at the research studies done on the ROI of Usability in your industry.

Usability Evaluation Methods

Usability defined in simple terms is the quality of a product that determines how easy it is to use it without facing any negative emotion. There are broadly 2 ways of usability evaluation methods

Usability Testing

Usability testing essentially means that you evaluate your product based on how your users are using it.

The users are given a task, and then you measure the product’s performance based on metrics like task success rate, time on task, error rate and at times subjective satisfaction.

It also helps in identifying the parts that are causing dissatisfaction among the users.

Throughout the course of usability testing, the users are asked to think.

It can be moderated, where the member(s) of the product team is told to facilitate the test, make observations and ask questions.

It can also be unmoderated, where the users are using the product without any facilitator.

In both the cases, the users are requested to think aloud about what they are doing.

User’s actions, emotions, and the words are captured through screen recordings and cameras.

These days remote testing for both moderated and unmoderated testing is becoming really popular and it does not require any sophisticated Testing Lab.

Usability Audits.

There are a lot of studies done in the field which have led to certain guidelines which can be used by the Product team to test their product even without any actual users.

It involves 3-5 UX experts individually assessing a product and suggesting improvements. Then they collect all the observations and improvements create a report.

It is sometimes also termed as Heuristic Evaluation method. Apart from using the standard parameters, a team can create their own heuristics which are more relevant to them.

Usability Testing or Usability Audits?

This is a very common question and there is no specific answer to it. In fact, they are complementary in nature. None of them is a substitute for other.

An audit is especially useful for teams with no UX experts in-house. This way they can develop something that is usable from the very beginning.

It is crucial to understand that conducting Usability testing requires time, money and effort.

The good research practices dictate that no user interview should take more than 60 minutes. Which means it is not remotely possible to get feedback on each and every task from the users.

Also, there is no point in using Usability Testing for finding issues that could have been found with Usability Audits.

This is when Usability Audits are significantly important.

They remove many flaws in the UX even before you are testing it with the real users.

It also gives you feedback on the tasks or flows which you cannot test with the actual users.

Steps to conduct the Usability Audits with Heuristic Evaluation

You can follow the following steps to conduct the usability audits with heuristic evaluation.

Different products have different requirements, so it’s very important to customize each and every step to serve your goals better.

Create a task list

The number one step is to Create a list of task scenarios you wish to test. Once you have a list prioritize them based on their importance. Every application/ interface/software has certain critical paths which can make or break an experience.

They are also called the red routes and will capture 90% or more of your user’s actions.

On a travel booking platform, booking a room in a hotel or booking a file is a red route that must be fixed first before anything else.

Usability Audits with Heuristic Evaluation
Task list for doing Usability Audits with Heuristic Evaluation

Create a checklist of heuristics

The second step after identifying the critical paths is to Finalize and create a checklist for the Heuristics you are going to use. The Nielsen’s Heuristics are of course a good point to start, but are there any other heuristics that are important? Can you customize them further depending on the domain?

At this point, you must also have the brand guidelines or the design system handy.

Appoint Evaluators

The third step after identifying the critical paths and finalizing the heuristics is to appoint the evaluators. Who are the people who are going to audit the UX?

The ideal number is between 3-5. Anything less than 3 will be more of an opinion and not an honest review.

Regarding the qualifications of the evaluators, the ideal scenario would be to hire both 3rd part UX experts and domain experts to have non-biased opinions.

But since that may not always be possible, try to appoint at least 1 UX expert and evaluators from teams other than the team that has directly worked on the product.

If you are working with a client, including people from their side can actually be a good strategy as the feedback may not be vague and may be based on a solid and tangible framework.

Also, you need to appoint a reporter. The job of this person will be to collect the evaluation from each evaluator and find common and most critical issues.

Ideally, this person should be someone who is a UX or Usability expert but did not participate in the evaluation.

This is to ensure that there is no bias in the reporting of issues.

Briefing Session

Now that the roles are defined, the fourth step is to hold a briefing session for the team, where the heuristics, the red routes and the timelines etc are discussed to put everyone on the same page. At this time it is important the team also establishes the common method of reporting severity.

For example – Severity rating one is Most critical issues or is it the light issues.

Severity while doing Usability Audits
Severity while doing Usability Audits with Heuristic Evaluation

Do the Audit

The fifth step is to actually conduct usability audits with heuristic (evaluation)Evaluators need to do it separately and not together.

At UX Gorilla, we encourage evaluators to also include their recommendations or any references for the interfaces that have implemented the same functionality in a better way without violating the heuristic. The individual reports are then sent to the reporter. The job of the reporter is then to comb through the reports and find common themes and prepare a report with the recommendations. This report is then presented to the stakeholders and the next sprint is planned.

This process has worked great for us but it has evolved a lot over time. You are free to tweak it as you like. The goal must be however to do this often and early. So do not wait for the product to go live before you do the evaluation. Do it even if right now you only have a prototype.