How Maintaining Consistency and Standards in Your Company’s Web Design Drives Sales and Reduces Costs

1. Improves Usability
2. Creates Credibility
3. Makes Accessible
4. Reduces Maintenance Costs

What is Consistency and Standards?

Consistency and Standards is a design principle that underscores the importance for visual elements to remain the same across a website or user interface. It is important for visual elements such as icons, color schemes, fonts, buttons, and other recurring elements to remain consistent in user interface design. This makes things easier for the user and eliminates confusion when navigating your website.

Reducing the Learning Curve

Reducing the learning curve in the user interface allows them to focus on the content. Consistency in design limits the amount of time the user needs to learn how to navigate the site, allowing them to use their time interacting with the site to be used to learn about your brand and product instead. Websites contain important information for both you and user, and that information should be easily fed and consumed without confusion or difficulty. When a user is unable to find what they are looking for or navigate to the information they are attempting to access, they are unable to achieve their goal, creating a frustrating user experience. Using design conventions that the user has seen and interacted with take out the possibility for confusion, and increase conversions and time spent on your website.

How Consistency and Standards Relates to User Experience and Responsive Design

It’s important to keep in mind two main areas of focus: the user and the screen that the user will be interacting with. Responsive web design changes the overall layout of the site but having consistency and standards in place makes different screens and user interfaces consistent and fluid across all devices. Placement of elements, uniform colors and shapes, clear and legible text, sizing of elements and overall treatment of components in the user interface design promote a level of fluidity in the brand. Page layouts can change on different devices, but the visual consistency in the design will maintain consistency in how users interact with the site.

How to Achieve Consistency in Design

Users should not have to spend time figuring out how to understand visual elements on a website. A user interface should be intuitive, and the user should know how to find what they are looking for easily and efficiently. This can be achieved by the following tactics:

1. Consider Common Placement for Elements in the Layout

If the goal is to minimize confusion and maximize interactions, then considering common placement for common elements in the layout is a great way to ensure ease of use for the user from the get-go. Users have a memory and have intuition when it comes to looking for common resources and features on a website. For example: if a user is looking for a search field, they will most likely look at the top around or near the navbar. Another example would be if the user is looking for the logo. If they are looking to click it to navigate back to the homepage, they will likely look to the top left.

Creating a fluid, easy-to-use layout for the user lets them know that you want them to have an effortless experience not only navigating the site, but also working with your company. Placing common elements where the user intuitively knows where to look for them first will make their experience easy and painless, and also increase their trust in your company.

2. Don’t Stray from UI Element Conventions

There are a multitude of common features on websites that we use every day. Radio buttons, check boxes, scroll bars, and other UI elements are second nature for most users, and it is important to anticipate where, when, and how they have interacted with them in the past. There are appropriate instances when these should be used, and it can make or break the user experience when these are not used correctly.

Think about how you have interacted with certain UI elements before, and when and where they were used. An example of this would be radio buttons and check boxes. Radio buttons should only be used when the user is only allowed to make one selection, while checkboxes allow multiple selections. Not obeying these conventions creates confusion for the user, and ultimately an incorrect representation of the information.

3. Consistent Treatment of Language and Copy

The design and treatment of language and copy on the website are vital to setting the tone for the user. The consistency of language can be broken down into two main areas: Visual Consistency and Verbal Consistency.

Achieving Visual Consistency in language and copy is the consideration of how headers are used and organized, the uniformity of sizing and colors for specific types of headers, and the organization and length of paragraph copy. An example of bad Visual Consistency in language and copy would be a site that has different sizing and colors for h2 headers. Another example would be on a product page with sections of equal importance, but one section has three sentences and the other has three paragraphs.

Verbal Consistency in language and copy is the consideration of how sentences are structured and word choice. An example of bad Verbal Consistency would be a series of h2 headers where some of them are complete sentences and others are not. Remember that the user needs content to not only be visually organized, but also grammatically organized. Using different words or sentence structures can confuse the user, so ensuring consistency in verbiage should be considered when organizing and creating content.

4. Consider the User’s Expectations

When common features and tools are used on your site, these should function based on the user’s own expectations. Consider usability guidelines when using certain fields, forms, media players, and ecommerce features. While these can be creatively placed and formatted, they should function the same way as any other place that they are used.

For example, a contact form can contain different fields and be customized to suit a website’s specific needs. However, the user expects there to be a place for them to fill out their name, email, specific inquiry, and to hit a send button near the bottom. Therefore, the form should employ these conventions to ensure that the user is able to have confidence in their attempt to contact.

It is also important to consider what features the user would expect to see based on the kind of website or product they are looking for. An example of this would be on a product page, where the user expects to see images and descriptions for each product. If these are not present or sufficient, the user will not be able to feel confidence in their purchase.

5. Create a Consistent Design Practice

While considering conventions are important for creating consistency and standards, it doesn’t mean that creativity isn’t at play. Creating a visual language and consistent design practice is the space to get creative with how the brand sets itself apart. Specific elements need to look consistent and uniform throughout the site, but how they look and how they feel to the user sets the creative standard that makes a brand special.

For example, while all h1 headers need to look uniform, they can be a font that is interesting and telling the message of the brand. Colors can be used as a visual “punch” to create interest. Underlines can be used under large headers to make the layout design more dynamic. As long as these are uniform and every h1 is treated this way, it can be as creative as you like!

This can be achieved by making a set of brand standards that are implemented in each instance of specific UI elements in the user interface. For example: a button that links to an article that invites the user to “learn more” should always be the same color, shape, and size. If the user sees two buttons that invite them to “learn more,” but they are completely different in color, placement, and design, it will create confusion, poor user experience, and an overall distrust in the brand.

A designer can create a set of brand standards that act as a rulebook for designing the site. Every visual element has a set of “rules” that promote cohesiveness throughout the website, which vastly reduces the learning curve for the user. The goal of consistency and standards in the design is to reduce the learning curve and make navigating the website a sleek and effortless experience.

Why Consistency and Standards are Important

Creating a website that has consistent visual design improves a website’s performance in several ways:

1. Consistent Design and Brand Standards Improves Usability

Consistency makes it easier for users to understand and use a website, because they can predict what will happen based on their previous experience. For example: if a user is looking for other pages on a web page, they will likely look for the navigation bar. The navigation bar is typically at the top of the webpage, so that will be the first place they look. If a website is consistently organized, users will know where to find certain types of information.

2. Having a Consistent Design Improves Credibility

A website that follows design standards and is consistently well-organized and easy to use is more likely to be perceived as trustworthy and professional. A company that takes the time to ensure that the user interface and experience is painless and uncomplicated is a company that cares about their customers.

3. Consistency and Standards Creates Accessibility

Accessibility has become a highly discussed and promoted topic in recent years, and more and more tools have become available to assist with ensuring that those with disabilities are able to navigate websites. Consistent and ADA compliant choice of color and fonts in the user interface allow users with disabilities to read and navigate the page. Using standard heading levels (ensuring the h1, h2, h3, etc. are well organized and consistent), allow screen reader users to navigate the site in the order that it is intended.

4. Using Consistency and Standards can Reduce Maintenance Costs

When brand standards are in place, it makes updating or adding pages to the website that much easier. The time taken to create a design for an entire webpage is dramatically reduced, as most of the design decisions have been made and are standardized throughout the site in the same layout approach. Additionally, if visual elements are consistent, it is easier to make changes without breaking the overall site. This reduces the time and effort of development and design and ensures that the time and money spent on development and design is used efficiently.

Looking to Increase Consistency in Your Online Brand? We’re Here to Help.

We are happy to offer our advice, or possibly suggest a better alternative should you need it. Drop us a message and let us know how we can help.

Your name

Your email

Your Phone Number

How Can We Help (optional)