web design website design

Principle of Consistency and Standards in User Interface

Study to design with consistency and requirements in thoughts and perceive the the explanation why they’re essential to include them into your work. Derived from Jakob Nielsen and Rolf Molich’s Ten User Interface (UI) Tips, ‘Consistency and Standards’ are evident in many of the widely-used merchandise created by some of essentially the most profitable firms. Merchandise like Adobe Photoshop, initially launched in the 1990s, and Google Gmail, launched in the mid-2000s, are just some of the broadly widespread merchandise that exhibit this essential rule of thumb. This text will educate you acknowledge consistency and requirements and clarify why they’re essential in person interface design.

Two Key Causes for Consistency and Standards in User Interface Design

As you design the person interface, you will need to hold in thoughts the interactions that happen between the human cognition and the display you’re designing for. Making issues simpler on your customers means not forcing them to be taught new representations or toolsets for every job. Lowering the size of the pondering course of by eliminating confusion can also be a positive guess relating to bettering person expertise.

1. Scale back Studying

Consistency limits the quantity of methods actions and operations are represented, guaranteeing that customers shouldn’t have to be taught new representations for every job. Additional, establishing design norms like following platform conventions enable customers to finish new duties with out having to be taught a complete new toolset. This will likely sound like a easy idea, however there are numerous examples on the market that exhibit an absence of consistency in their designs. One such instance that portrays this challenge is the website for Xfinity by Comcast Company, an American mass media firm. Of their website, not solely is the secondary menu inconsistent nearly each time the person clicks into one other web page, however additionally it is inconsistent for the first menu as effectively. Let’s have a look and evaluate the three totally different pages of the website: Homepage, My Xfinity, and TV.

Creator/Copyright holder: Comcast Company. Copyright phrases and licence: Truthful Use.

That is the homepage of the Xfinity website. Discover how the annotated space highlighting each the first and secondary menu bars will differ because the person clicks into different pages.

Creator/Copyright holder: Comcast Company. Copyright phrases and licence: Truthful Use.

That is the TV web page of the Xfinity website. What makes it complicated for the person is how the colours, structure, and font-styles look totally different from the house web page.

Creator/Copyright holder: Comcast Company. Copyright phrases and licence: Truthful Use.

That is the My Xfinity web page of the Xfinity website. All three pages examined above have very totally different colours, structure, and font-styles in their navigation menu. These variations make it complicated and disorienting for the person because it now not appears like one website, as if they’re three totally different firms.

2. Remove Confusion

Customers have a tendency to use guidelines they’ve skilled exterior of your website or product, bringing in a set of their very own expectations. Figuring out that, we must be aware of whether or not or not we’re inflicting confusion and alienation once we deviate from design requirements and conventions. Additional, customers shouldn’t need to spend time questioning whether or not totally different phrases, interactions, or actions truly imply the identical factor inside the context of your product. Confusion happens when individuals are unable to ‘piece collectively’ info, and at occasions, obstructing them from reaching one thing. When the person is hindered from reaching their objective, it’s comprehensible that they will really feel indignant or pissed off. It’s no secret that confusion typically causes frustration, and frustration results in poor person expertise. Subsequently, it is best to at all times goal to remove confusion at each contact level wherever doable.

5 Methods You Can Obtain Consistency in Your Work

There are various elements to reaching consistency inside your person interface. Listed here are 5 issues you may have a look at to enhance consistency in your designs:

1. Your Selection of Language

The language you utilize in each advertising copy in addition to the wording used all through the person circulate cannot solely affect your person’s notion of your product, but additionally be a degree of confusion while you use totally different terminology to signify the identical factor. This considerations not solely in the phrases you select but additionally the tone in which you convey your message.

Scaring your person with a critical and threatening error message once they’re shopping an ecommerce web site that reveals an total pleasant tone will make sure you kill an in any other case good person expertise, for example.

When issues imply the identical or carry out the identical operation they need to be represented in the identical method, as is the case in Google’s e mail facility, Gmail. Primarily based on the group fashion of consumer e mail functions, Gmail’s folders are labelled ‘Inbox’, ‘Drafts’, ‘Despatched Mail’, and so on. The language used for these folders reveals familiarity and consistency to anybody who’ve used e mail functions in the previous.

Creator/Copyright holder: David Bruce Jr. 2011. Copyright phrases and licence: CC BY 2.0

The folder labels in the 2011 model of Gmail shows a range of acquainted choices. The language used for these folders reveals consistency because it makes use of the labels “Inbox”, “Drafts”, and “Spam” – all of that are acquainted to anybody who’ve used e mail functions in the previous.

2. Apply UI Components as They’re Initially Outlined

UI parts which can be generally used, akin to message home windows, menu bars, icons, scrollbars, and radio buttons, are graphic parts which can be sometimes constant and have representations which can be broadly understood by customers. As an illustration, radio buttons are meant for use when there is just one choice allowed. Checkboxes alternatively must be used solely when the person is allowed multiple choice. In some ways, we are able to see how HTML5 beat out Flash expertise as of late 2014. One of the explanations is arguably the convenience of utility and ease of use that builders, designers, and customers can take pleasure in in consequence of HTML5’s consistency and requirements in defining their UI parts.

Radio buttons solely enable one choice. Subsequently, it solely is smart for HTML’s built-in radio buttons to behave that method in performance as effectively.

Checkboxes enable multiple choice. Subsequently, it solely is smart for HTML’s built-in checkboxes to behave that method in performance as effectively.

A foul instance of consistency in the selection of UI parts seems in the feedback part that BBC’s information website used to have in the previous. The very best rated person feedback are denoted by a south-facing arrow, but customers should click on on the north-facing arrow to extend a feedback score. Utilizing a south-facing arrow to signify the best rated feedback can also be unintuitive; rising numbers go up, not down. When customers scan the feedback part of an internet web page they could merely act in response to the arrows, not studying the motion labels, which can induce incorrect picks.

Failing to make the most of generally used visible representations will pressure the person to consciously have interaction with the person interface in a method that’s uncomfortable, which reduces the pace at which they might be navigating and performing desired duties.

Creator/Copyright holder: BBC. Copyright phrases and licence: Truthful Use.

BBC Remark part shows a down arrow for ‘Highest Rated’ and up arrow for ‘Lowest Rated’. This illustration is inconsistent and complicated on your customers, because the idea “increased” is usually synonymous with an up arrow and “decrease” is synonymous with a down arrow.

3. Contemplate Numerous Nicely-established Conventions When Deciding on Format.

It’s actually debatable whether or not a designer ought to “copy” how different individuals lay out their web sites or apps. Nevertheless, while you design with the person’s perspective and cognition in thoughts, you will need to perceive that people have a powerful reminiscence for the place issues are visually situated on the display. You must leverage this attribute by reserving generally used places for numerous graphical parts akin to having the brand on the highest left, search subject on the highest proper, exit icon on the highest proper, and so on.

Creator/Copyright holder: Microsoft Company. Copyright phrases and licence: Truthful Use.

Creator/Copyright holder: Apple Inc. Copyright phrases and licence: Truthful Use.

Each Microsoft and Apple place their emblem on the highest left, and the search subject on the highest proper of their web sites. This way of consistency in structure helps customers really feel much less dis-oriented once they browse a brand new and unfamiliar web site.

4. Design on your User’s Expectations

Be sure to have the options and functionalities customers would count on to see in your web site. For instance, an airline web site ought to have a ticket-booking system, whereas a music-sharing web site ought to have a media participant.

Creator/Copyright holder: Youtube. Copyright phrases and licence: Truthful Use.

A video-sharing website like YouTube is clearly anticipated to have a video participant. This can be a nice instance of consistency in that the options and performance of the positioning helps what the person expects.

5. Create Constant Visible Components all through Your Website

Make certain visible parts are constant all through your web site. The content material, the UI parts, fonts, backgrounds and colours must be in concord and really feel constant at each contact level. As talked about above, sticking to technical conventions that exist in the shape of HTML5 and CSS3 is one technique to hold consistency. In the meantime, having a branding and fashion information to observe helps when confronted with design choices akin to colours and fonts.

Creator/Copyright holder: Jan-Alfred Barclay. Behance. Copyright phrases and licence: CC BY-NC 4.0

An instance of a method information and branding guide designed for the corporate, ‘Goodnyt’. Having a method and branding guide may help you be certain that your visible parts are constant all through your web site.

A foul instance of consistency in the selection of colours and fonts will be seen in the 2013 model of Google’s Gmail cellular person interface. Though it may be argued that the ‘that means’ isn’t affected in this case, it’s simple that person expertise nearly at all times worsens in consequence of any unusual variations in visible parts between screens.

Creator/Copyright holder: Google Inc. Copyright phrases and licence: Truthful Use.

A screenshot of the Gmail app’s cellular person interface when it was first rolled out in 2013 reveals the inconsistency in alternative of coloured packing containers and font kinds.

The Take Away

Consistency and requirements is acknowledged as an important design precept and must be utilized all through the content material and interactions inside your product. There are a number of elements of consistency that we are able to have a look at when bettering our designs, this contains the language we use, the UI parts we select, the way in which we lay out our web site, the features and options we embrace, in addition to the visible elements we resolve on like shade and font.

Whereas consistency helps enhance person expertise by eliminating pointless studying and confusion on your customers, you will need to hold in thoughts that it is best to use it when obligatory however not let it constrict you from innovating on design concepts the place it is smart.

Following requirements and conventions and being constant must be one thing that you should use to your benefit. It would free you from comparatively trivial design choices. It will allow you to save time and unlock your thoughts so you may additional enhance your designs and its person expertise on your customers.

References & The place to Study Extra

Course: UI Design Patterns for Profitable Software program:

To seek out extra info on Jakob Nielsen’s ‘Enhancing the Explanatory Energy of Usability Heuristics’ please see:


To see extra info on the distinction between artwork and design, please see:


To be taught extra in regards to the totally different elements of consistency, please see:


To be taught extra about balancing consistency and innovation please see:


Hero Picture: Creator/Copyright holder: GraphBerry. Deviant Artwork. Copyright phrases and license: CC BY-SA 3.0

web design