{"id":4400,"date":"2018-09-20T18:13:00","date_gmt":"2018-09-20T16:13:00","guid":{"rendered":"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/uncategorized\/the-importance-of-consistency-in-ui-design\/"},"modified":"2021-09-06T14:34:57","modified_gmt":"2021-09-06T12:34:57","slug":"the-importance-of-consistency-in-ui-design","status":"publish","type":"post","link":"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ui-design\/the-importance-of-consistency-in-ui-design\/","title":{"rendered":"Why Consistency Is So Incredibly Important in UI Design"},"content":{"rendered":"

Much has been said about the importance of consistency in UI design<\/a>\u00a0\u2013 and with good reason. User interfaces that aren\u2019t consistent often yield confused and frustrated users and can drive even the most promising products to failure.<\/p>\n

But what exactly is consistency in UI design?<\/strong> Consistency in UI design is concerned with making sure elements in a user interface are uniform. They\u2019ll look and behave the same way. This helps constantly prove a user\u2019s assumptions about the user interface right, creating a sense of control, familiarity, and reliability.<\/p>\n

To develop consistency in UI design, you should aim to be consistent with device UI guidelines and behaviors, other similar apps\/sites, and with your own design.<\/p>\n

Device UI Guidelines and Behaviors<\/strong><\/p>\n

Different platforms have different UI and usability guidelines you should observe when designing. If you are designing the user interface of an iOS app, for example, you should familiarize yourself with the\u00a0iOS Human Interface Guidelines<\/a> and strive to adhere to them. If you are designing for Android, you should take a look at\u00a0Material Design.<\/a><\/p>\n

Consider Shift, the time zone planner by\u00a0Tapmates, available to both Android and iOS users. At a quick glance, the screens of both devices displaying Shift in the image below look the same. But if you look closer, you\u2019ll notice a few subtle changes, like the placement of navigational elements within the header. These stem from differences between the guidelines for both platforms. In Shift\u2019s case, the designers observed guidelines specific to each platform and made adjustments on both versions to be consistent with them.<\/p>\n

\"An<\/p>\n

[In the video below you\u2019ll see me explaining the importance of consistency in UI design. Check it out!]<\/p>\n

Other Similar Apps\/Sites and General Practice<\/strong><\/h2>\n

It is no secret that your users will spend time on other apps, some which are pretty similar to yours. As a result, they\u2019ll be familiar and comfortable with popular patterns, rules and interactions used in them or elsewhere. Taking this into account and modeling your design with them in mind is a great way to increase usability. You\u2019ll \u201cpiggy back\u201d off knowledge users have accumulated from previous experiences and won\u2019t have to worry about them being confused by a new or unfamiliar user interface.<\/p>\n

This doesn\u2019t mean ripping off somebody else\u2019s design. You don\u2019t want to copy another app. You want to familiarize yourself with what UI patterns are being used and what is being done elsewhere to improve your own design.<\/p>\n

Think about e-commerce sites and the placement of shopping carts on them. We normally look to the top right corner to check out what we\u2019re about to purchase, right? If you were designing the user interface of an e-commerce site, like the lovely example below by\u00a0Catherine Irma Elita<\/a>, you\u2019d want to consider placing your shopping cart in a similar position.<\/p>\n

\"A<\/p>\n

Your Own Design<\/strong><\/h2>\n

Placement, styling, type choices, and layout are only a few elements that should remain consistent throughout your entire user interface. If you\u2019ve placed navigational elements within the header of your app on screen A, don\u2019t place them within the footer of screen B. Moving, changing or disappearing elements won\u2019t only confuse your users, it will irritate them and might even motivate them to kick your app to the curb.<\/p>\n

But hey, what if I want to spice things up a bit to avoid a boring design? Do so strategically. Use inconsistencies moderately to improve your design or increase the usability of a user interface. If it is crucial that your users notice a particular element in your user interface or you need to draw attention to it, make it different. Want to break up a tedious design? Use moderate inconsistencies to add visual interest so long as they don\u2019t get in the way.<\/p>\n

Check out the fast gif below. Notice how, even though the content of each screen changes, the position of the navigational elements remains consistent throughout the entire app.<\/p>\n

Benefits of Consistency in UI Design<\/h2>\n

So what will aiming to be consistent with device UI guidelines and behaviors, other similar apps\/sites, your own design do for your app and users? A few key benefits are:<\/p>\n

Increased Usability<\/strong><\/h3>\n

Consistency makes it easier for your users to navigate and use your app because they don\u2019t have to learn new ropes to get around. They know what to expect either because they\u2019ve learned it previously within your app or elsewhere. Naturally, this will help make your users feel comfortable, happy, and will motivate them to remain engaged with your app.<\/p>\n

Eliminates Confusion<\/strong><\/h3>\n

Consistent user interfaces facilitate communication. Use visual consistency to prioritize content, make it navigable, or highlight important bits of it. By using consistency to create a logical structure and to clearly define where users can find what, you\u2019ll spare yourself confused and frustrated users.<\/p>\n

Evoke an Emotional Response<\/strong><\/h3>\n

We\u2019ve mentioned that consistency in UI design can make it easier for users to navigate and use your app. This will help your users feel confident in their ability to manage what\u2019s under their thumbs and will evoke a positive emotional response resulting from a pleasant experience.<\/p>\n

Consistency in Practice<\/strong><\/h3>\n

If you\u2019re pretty new to the UI world, many of these concepts can be difficult to visualize. To better understand what consistency can translate to in practice, check out the examples below of apps that totally ace consistency.<\/p>\n

\"An<\/p>\n

Great Apps: Clear<\/strong><\/h2>\n

I can\u2019t remember how many times I\u2019ve referenced or used\u00a0Clear<\/a> as an example of an app that exemplifies so many great qualities to aim for in UI design. If you aren\u2019t familiar with it, be sure to check it out!<\/p>\n

Consistency-wise, it does more than looking the same. I\u2019ve used the app on a few different devices and love that the simple gestures I need to navigate it remain pretty much the same across all of them, even on my Mac. It makes the knowledge I\u2019ve accumulated on how to use the app transferable to all devices, increasing usability.<\/p>\n

\"Screenshots<\/p>\n

Great Apps: Duolingo<\/strong><\/h2>\n

Duolingo<\/a> is a fun app designed to help anyone learn a new language. Not only does it do an ace job of making learning fun, it showcases how beneficial styling consistency can be in a user interface.<\/p>\n

Buttons, typefaces, navigation elements, and even illustrations within the app are purposefully and carefully designed to be visually consistent with each other. Colors, lighting, and shapes have all been designed to remain consistent throughout the entire app and on all material, like their website, revolving around the app. Not only does it make the app easy to navigate, it makes it feel branded and professional.<\/p>\n

This, coupled with cute Duo, makes Duolingo visually pleasant and fun to use, giving the app the power to evoke a strong, positive emotional response.<\/p>\n

\"Different<\/p>\n

Great Apps: Hopper<\/strong><\/h2>\n

Hopper is an airfare prediction app. It helps you find the best deals on flights and best times to fly by allowing you to keep an eye on specific routes. Whenever prices fluctuate, Hopper will let you know.<\/p>\n

As you design, it\u2019s important that you also aim for consistency in layouts and placement. This is especially important when it comes to navigational elements, the very bits your users need to get around.<\/p>\n

To better understand what this might look like, check out Hopper. Notice how the menu is always within the header. The header and the important navigational elements it contains doesn\u2019t pull a Houdini or migrate to the bottom. It sits in the same place on every screen.<\/p>\n

By now, you probably get how important consistency is in UI design. It\u2019s for this reason that we\u2019ve devoted more than a few words to consistency in our new User Interface Design Course<\/a>. In it, we explore all the ins and outs of it, how to apply it, and when it may be beneficial to be inconsistent.<\/p>\n

Keen to take a closer look at consistency in UI design now? The guys at UXPin have written an\u00a0awesome (and free!) e-book<\/a> on the subject. It is packed with great explanations and case studies from companies including Amazon, Dolce & Gabbana, Adobe, and US Airways to help see how the giants out there tackle it. On the site, you\u2019ll also find a few more great, free resources that cover other important topics in UI design, like mobile material design, web typography<\/a>, and UX design.<\/p>\n

You can also check out what the guys at Nielsen Norman Group have to say about consistency. They\u2019ve written a few books and more than a few articles on the subject and those stemming from it. Their\u00a0Consistency in the Cross-Channel Experience<\/a> article is an excellent read, especially today when we\u2019ve about a million different screens to account for when we design.<\/p>\n","protected":false},"excerpt":{"rendered":"

Consistency. It’s hardly the most exciting concept in the world, but it is rather important. So why is it so critical? Well, we’re not going to tell you here. You’re going to have to read the post to find out.<\/p>\n","protected":false},"author":38,"featured_media":7425,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_lmt_disableupdate":"yes","_lmt_disable":"","footnotes":""},"categories":[4],"tags":[],"class_list":["post-4400","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui-design"],"acf":{"homepage_category_featured":false},"modified_by":"John Sch\u00e4rges","_links":{"self":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts\/4400","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/users\/38"}],"replies":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/comments?post=4400"}],"version-history":[{"count":1,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts\/4400\/revisions"}],"predecessor-version":[{"id":26014,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts\/4400\/revisions\/26014"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/media\/7425"}],"wp:attachment":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/media?parent=4400"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/categories?post=4400"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/tags?post=4400"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}