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.

Leave a Reply

Your email address will not be published.