User Interface (UI) Design

User Interface Guidelines, Patterns & Best Practices

User Interface, or UI Design, is about more than how a website or app looks. Interfaces are about providing the right tools for users to accomplish their goals in ways that are second nature, providing cues that lead users through processes. Great UI blends aesthetics and usability in a way that is elegant, effortless and memorable.

Presumably you are reading this article on a screen either on mobile or desktop right now and at the top of that screen are a series of icons, the address bar, your bookmarks, all of which mean something to you. We are so familiar with these tools we rarely think twice about them when we are using them. That is the goal of good UI, to be invisible and look good doing it – a contradictory existence to be sure. Just remember one rule above all else: usability trumps aesthetics.

In this article we’ll look at UI best practices, UI patterns and UI guidelines in website and app development

UX vs UI Design

First of all, lets discuss UX/UI, UX vs UI, UX & UI.

There exists a debate whether these two disciplines are separate despite their overlap. The answer is that although deeply interconnected, there are important distinctions between the two.

Beautiful Venn Diagram Courtesy of http://www.envis-precisely.com/

User Experience (UX):

UX encompasses all aspects of a user’s interaction with a company, its services and products and every interaction a customer might experience with that company. This includes things like customer service at brick and mortar locations of an e-commerce website. UX is a form of both quality control and market research though it is applied almost exclusively to digital products or companies that have digital components.

User Interface (UI):

UI complements UX. It is the look, feel, presentation and interactivity of strictly digital products. It is the means by which a human and a computer system interact, but does not extend to the input methods such as keyboard & mouse/touch screens.

Interface Elements Include:

Input Controls:

Buttons, text fields, checkboxes, radio buttons, dropdown lists, list boxes, toggles, date & field

Navigational Components:

Breadcrumbs, sliders, search fields, pagination, tags, icons

Informational Components:

Tool tips, icons, progress bars, notifications, message boxes, modal windows

Containers:

Accordions

UI Design Best Practices

Now that you know what UI is and isn’t, how do we design and implement UI effectively? There are some key things that one should bear in mind when designing for interfaces and these best practices are closely related to more general design principles in terms of hierarchy, contrast and layout. These UI best practices are taken from Usability.gov. They focus on predicting what users might need to do and ensuring that the designed interface has functionality that is easy to understand and use.

1. Keep it Simple:

Best interfaces are almost invisible. Avoid unnecessary elements and be clear in language on labels and in messaging.

2. Create Consistency and Use Common UI Elements:

By using common elements in your UI, users settle into the experience more easily, and are more effective in getting things done. It’s important to create patterns in language, layout and design throughout the site to help facilitate efficiency. Users should be able to transfer a learned skill to other parts of the site.

3. Be purposeful in page layout:

Consider the spatial relationships between items on the page and structure the page based on importance. Careful placement of items can help draw attention to the most important pieces of information and aid scanning and readability.

4. Strategically Use Color and Texture:

You can direct attention toward or redirect attention away from items using color, light, contrast and texture to your advantage.

5. Use Typography to Create Hierarchy and Clarity:

Carefully consider how you use typeface. Different sizes, fonts, weight and arrangement greatly increase legibility and readability.

6. Provide Feedback:

Always inform your users of where they are, actions they can take, changes in state, and errors. Use UI to communicate status and, if necessary, next steps to reduce frustration for your user.

7. Think About Defaults:

Think about what your user is trying to achieve and in anticipation of those goals create defaults that help reduce the burden on your user. This becomes particularly important when it comes to form design where you might have certain fields filled out in advance.

Reference: https://www.usability.gov/what-and-why/user-interface-design.html

Courtesy of UIPatterns.io

UI Patterns

As we saw in #2 of UI best practices, consistency ­­and the use of common elements helps your user learn and use new interfaces more effectively. But how does one keep track of the available solutions to designers and the precedent that has been set by other sites and apps? When you find yourself faced with designing for a problem that you know others must have encountered in the past, this is where UI Design Patterns come in handy.

A UI design pattern is a recurring solution to a common design problem. Well-designed interfaces don’t come together by simply stitching different patterns together, but by analyzing existing UI patterns you can develop a sound foundation for customization.

There are many resources out there for UI patterns that collect and organize examples of common solutions. Here are a few of our favourites:

http://www.pttrns.com/
http://uipatterns.io/
http://ui-patterns.com/
http://www.mobile-patterns.com/
http://inspired-ui.com/
https://www.cocoacontrols.com/
http://www.lovelyui.com/
https://developer.yahoo.com/ypatterns/about/libraries.html
http://www.designsnips.com/

Layouts courtesy of Kyle Ledbetter

UI Guidelines

User Interface guidelines are similar to best practices, but much more in depth and technical. They are software development documents that offer application designers and developers a set of recommendations and layout examples to help them get their products consistent and pixel perfect.

The two most commonly consulted guidelines are from Apple in their Human Interface Guidelines and Android’s Guidelines intertwined with Google’s Material Design Principles.

Although rules are made to be broken, these guidelines are considered required reading for any UI designer.

Image Credit: Apple

Know Your User

Finally, design is not a one-size fits all discipline. One of the most important aspects of UI design is to understand who you’re designing for above all else. At the end of the day, problem solving is the goal so understanding your end-users and what they need is paramount. Get to know them, understand their abilities, preferences and tendencies. Don’t fall into the trap of designing for yourself and keep abreast of changes in this quickly changing field.

 

The Future of UI Design

With VR and AR taking off UI Design is poised to undergo monumental changes in the near future, of which we are only starting to see take shape: New resolutions/design ratios (and lack thereof) for immersive environments, non-diegetic and spatial UI. Designers also have to bear in mind the trend toward device convergence, human/computer integration in the form of implants and wearables and the disappearance of the screen as we know it. The challenge for UI designers will be to develop consistent, intuitive UI patterns for these new, immersive environments in 3 dimensions while continuing to design inclusively and provide accessible alternatives to the less able of us. At any rate, it’s an exciting time to be a designer.

 

Further reading:

UX Research & Methodologies
10 Things to Consider When Designing a Mobile App