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:
Buttons, text fields, checkboxes, radio buttons, dropdown lists, list boxes, toggles, date & field
Breadcrumbs, sliders, search fields, pagination, tags, icons
Tool tips, icons, progress bars, notifications, message boxes, modal windows
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.
Courtesy of UIPatterns.io
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:
Layouts courtesy of Kyle Ledbetter
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.
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.