Maintaining Consistency in Your UI Design

Consistency in UI design is an old school principle and somewhat forgotten in some of today’s web and application designs. It seems like designers are choosing to omit consistency from their interfaces.

In the case of mobile application design, some designers are choosing to re-invent, re-create or even completely break the hardware standard interactions with their own unique interface patterns. While breaking the consistency between the hardware UI rules and your apps experience may not be a bad idea, breaking your own apps consistency can be.

Three Steps to Consistent UI Design

There are basically three types of consistency you should think about when designing your web and mobile app designs:

  • 1. Stay consistent with device UI guidelines and behaviors
  • 2. Stay consistent with other similar sites or applications
  • 3. Stay consistent with your own design
screenshot

For the purpose of this article I’d like to focus more on the third — keeping the consistency in your own user interface. This is kind of a big deal mainly because you don’t want to confuse or surprise your users inside your own app.

You don’t want a user going from you home page to a subpage and see different styling or even vastly different user interactions. This kind of thing can surprise users or in some case even scare them away. Consistency is not only a big deal to the overall usability of the site, it can greatly increase conversion as well.

Consistent Structure and Interactions

This is key to creating a consistent UI. Sometimes when we develop we forget about how the structure and interaction is going to affect the overall user experience. But just as blueprinting and creating plans is important when building a home or building, it’s also important for creating a consistent, usable UI. There are a few things to think about and plan ahead before you start to write code.

  • 1. Consider how to consistently place elements throughout your site or app.
  • 2. Think about what UI patterns you’ll be using.
  • 3. Plan out what input elements you’ll need.
  • 4. Figure out what icons you’ll need, and pick or design a good icon set that covers them all.

Element placement is a huge way to reduce surprise in the user and create consistent, reliable expectations. Keep your navigations in the same place, nothing irritates a user more quickly than moving or disappearing navigational elements. Also keep logos and other branding items in the same locations through out the site.

“Nothing irritates a user more quickly than moving or disappearing navigational elements”

If you are using a sidebar, don’t shake up the side bar to much by changing what is present in them from page to page. Some of this may be relevant to the content on the page, but avoid removing or even moving import overall elements like search forms. One big thing to keep placed consistently is the login and user setting links or buttons.

Consider UI Patterns

Plan ahead and think about what UI patterns you will need. Are you going to need a gallery? Modals? Accordions? Sidebars? Planning design patterns ahead of time will not only help you develop and design your app quicker, but thinking about what design patterns you’ll need also helps to figure out your content ahead of time — which can save you loads of time as well.

This will also solve problems and answer questions ahead of time, this way when you come to a section or page in your site that requires a UI decision, you’ve already made it and you won’t get caught creating a mishmash of design patterns throughout your site.

screenshot

Think about your forms before hand as well. Plan out what form elements you’re going to need and figure out the elements that you won’t need or that you could replace. Form elements can be scary or even tricky for users to navigate anyway, so if you can eliminate or swap out some inputs that may be stumbling blocks, do it.

“If you can eliminate or swap out some inputs that may be stumbling blocks, do it.”

This also is a great way of removing the decision making from the development process. Keeping forms consistent in both style, structure and interaction can sometimes make or break a conversion rate.

Again, plan head. Plan out what icons you will need ahead of time. One super quick way to screw up your consistency is to be half way through the development of your app when you find out that you’ll need print icons, then realize that you can’t remember where you got your icons or even if you can find a print icon that matches the rest of your icons.

This isn’t even a style issue really, but an interactive one. Users will get used to the look a particular icons and be able to quickly recognize them. But if you are using a patchwork icon set you’ll confuse your user or even make it hard for them to tell what certain icons represent.

Consistent Style

The style and design of each UI element is important and maintaining consistency between them is also important to the user. Just as it is important to have a consistent icons set, it’s important that your app has an over all design consistency to it. You may think that certain buttons are cool even though they don’t come close to matching the over all design or color scheme of the site, butthis will just confuse your user and look ugly.

When designing a UI kit, there are a few things to keep in mind in order to create consistency:

  • 1. Color scheme
  • 2. Style
  • 3. Borders
  • 4. Type and fonts
  • 5. Size
  • 6. Background images
  • 7. Effects
screenshot

Colors

Like I said earlier, keep your UI color consistent with the over all color scheme of your site. Even when designing call to actions where you want buttons to stand out and be noticed, be careful not to make your call to action a sticking ugly compliment to your over all color scheme. To help you, use tools like Kuler or ColorSchemer to aid in selecting colors that go well together.

When I talk about keeping your style consistent I’m talking about not using some crazy gradient button with drops shadows and bevel if the rest of the site design is flat and doesn’t have a shadow or gradient on it. Besides staying consistent with the overall site design, stay consistent with the style of your UI elements. If you are using a particular color or font style on your input labels, stick with it and use it on all labels.

screenshot

Borders

Ahh, borders. Too often I see sites that use three or four different button border thicknesses or radiuses and this can really be confusing. Keep all of your borders on buttons, inputs, selects, galleries, images and all other UI elements consistent with each other. This doesn’t mean that you have to use on border radius, you can mix it up by having a few values or even use one style consistently on each element.

Type and Fonts

Using the same type and fonts in your elements is a pretty important thing, especially when dealing with form elements. Keep headers consistent and don’t use to many fonts even though you might like all of them — you can save them for other projects. Inputs and buttons should have font styles that match or complement each other so that forms are easily read and predictable.

screenshot

Size

The size of fonts and other elements should be consistent or complimentary to each other. The headers and title of pages should all stay consistent so that your user knows that those lines of text are in fact matching headers and titles. Consistent size also applies to any UI element from content regions, links, navigational elements or sidebars. Avoid altering the sizes of any these to drastically between page views so that the user can recognize them immediately when the page loads.

Background Images

Try not to change up your background images too much. This doesn’t happen much these days as it used to, but it’s still a good idea avoid changing your background images from page view to page view. If you do, try to make the image relatable to each other somehow so the pages don’t lose consistency. Changing background image, especially large ones, can make the site feel disjointed and make the user feel like the have even left you site completely, so really try to avoid this temptation.

screenshot

Effects

Effects, most importantly lighting effects, can make what seems like a great site design not make sense at all to the user. For example, if you are using a highlight on the button that it looks as though a light is shining on top of it, use the same lighting effect on beveled text in buttons or beveled text inputs.

Honestly, this really isn’t a huge make it or break it deal with the user, but to the picky viewer they may notice the inconsistency of your effects and get distracted from doing what they are supposed to do with your app or site.

Don’t Be Boring

Designing for consistency may feel mundane or even boring sometimes and you may just want to throw something in your design to throw the user a surprise, and really that is great.

It is good to keep the users on their toes, jsut don’t shake things up so much that they get so discouraged or confused that they leave and go somewhere else. A little consistency can go a long way.