The ultimate goal of user interface design is to ensure that a member or user is able to accomplish his or her goals as simply and as efficiently as possible.
When I was a kid – a baby, really – my parents moved from Florida to Colorado. It was an exciting time in their life – a complete change of scenery, a new job, a whole new adventure, really. My father, in particular, was very excited about the trip. Their route would take them across some of the most beautiful landscapes that this country has to offer. There was just one problem. The only car that they could afford to get them there was a Monte Carlo so ancient that the only thing that it had more of than miles was mechanical issues. When they left Tallahassee, Florida, the car was in serviceable condition… by the time they reached their destination, three days later, the heater had stopped working (in the middle of January), the transmission was randomly slipping out of gear, and the engine was only firing on three out of eight cylinders. My mother says that it sounded exactly like a Volkswagon Beetle. She kicked it – hard – when she finally parked it in Colorado. What should have been an epic, cross-country trip turned into the biggest nightmare fiasco of my parents’ lives.
Why am I telling you this story? Because it illustrates what happens when UI fails.
The term User Interface (UI) Design was originally coined to describe the tools and design elements that we put into the hands of application and software users. As the lines between software and websites blur and web apps become more complex and flexible, the principles of good UI are being applied to more and more situations. Those principles are even crossing the digital/physical barrier and finding real-world application.
In the case of my parent’s traumatic relocation, that old Monte Carlo is part of the user interface (UI) and that road trip through America’s heartland is the user experience (UX). The interface is how the users engage with their experiences so, in the case of a road trip, that’s the vehicle that you’re driving, the condition of the roads, the signs, roadside attractions, and gas stations along the way – anything that helps you get to where you’re going. If the car is a junker or the road signs are confusing, your users will not enjoy their journey. We can (and should) plan the user experience carefully but, if the UI fails, their experience – their UX – will suffer.
Obviously, we think about UI all the time here at AM. It’s a central part of how we approach every single project from website builds to content strategies. But why should YOU start thinking about UI? Because the way that your audience interacts and engages with your brand, your message, and your people defines their relationship with your organization. And the “how” of that – your employees, your print collateral, the language that you use on the phone, the uniforms your people wear, the signage at your events, your logo and colors – anything that becomes a touchpoint for your audience – is all UI. By applying these basic UI principles in both the digital and physical spaces, you create the vehicle for excellent user experiences – and lay the foundation for relationships that last.
Source: Experience Dynamics
The Core Principles of UI
Clarity is perhaps the most important design principle for good UI. If a user can’t figure out what they’re looking at or how to find the information that they’re looking for, then the UI has failed. Our websites, apps, programs, and even in-person experiences all serve the same purpose after all: to move a person from one action to another. If people are confused by your fundraising campaign or website menu structure, then we have allowed design to get in the way of our ultimate goal. The design of the user interface should inform the user and allow them to confidently navigate the choices and options available to them.
While clarity doesn’t always mean simplicity, the two are undeniably linked in almost all situations. It’s not unusual for one of our clients to want to have everything important right up front on the homepage. That almost always leads to a complex and confusing home page experience for site visitors. It leads to what we call “message fragmentation” and decreased engagement due to confusion.
Your UI design should ensure that these four questions are clearly answered:
- How did I get here?
- Where am I?
- What can I do now that I’m here?
- What’s going to happen when I do something?
Good design is flexible design. Whatever the situation, the UI should look good and perform well. With websites this means that a design may look good with just the right dummy data in it but, once it’s been coded and live data starts to be populated, the way it looks is going to change… it needs to stay beautiful no matter what content is thrown in the mix. In the physical space, it means that your event logistics have to work during slow times (and not leave people standing around looking lonely and desperate) but it also has to work when you’re busier than you ever expected (and not feel completely overwhelming to the potential donor or target audience member).
Here are a few ways that we can ensure that our work stands up to any situation that it encounters:
- Respect and utilize traditional design solutions that work well in multiple situations.
- Use bulletproof typography. When we call a font “bulletproof” what we mean is that the font will remain legible and attractive in any viewing situation. Small, large, near or far, paired with other fonts – bulletproof typography can stand up to the challenge. Almost all web fonts and system fonts are bulletproof by definition. They have been designed and tested to ensure their usability.
- Try to think through all the possible content situations (no content, sparse content, ugly content, weird content). Sketch up the most important ones to ensure that the design holds up to those scenarios.
- Account for all of the many devices and resolutions that users will be using to engage with your design. Does that system font exist on both Mac and PC computers? Will that image still look good in a retina display? What happens if we view this on a super wide screen? Will this text and layout work in a tiny phone screen? Will that signage be readable from far away?
Our eyes love seeing simple and familiar things. Psychologists tell us that most people have a tendency to consider things more beautiful if those things feel familiar. When a system or situation feels familiar, users tend to be calmer and even feel more confident. Calm, confident, clear activity leads to conversions far more often than something that is flashy but unfamiliar. This is why, when considering the design of your user interface, it’s crucial that we ensure that the following things feel familiar and are easily understood:
- Navigation. Usually, we’re thinking about website or app navigation but this is also crucial for physical items like event signage, promotional fliers, or contact cards. Is it easy for users to figure out how to get to the content that they want?
- Icons. Try to use culturally relevant, universal iconography wherever possible. When in doubt, add text to your icons to ensure that their meaning gets across.
- Calls to Action. This is anything that’s soliciting an activity from your audience – links, buttons, contact information, donation details, etcetera. Use simple, popular verbs and keep CTA language short and to the point. Embellishment in the CTA almost always leads to decreased conversion rates.
- Common Color Coding. These obviously vary from culture to culture but, in most of the western world, red means urgent and green means complete. Using these colors in a way that is inconsistent with their common cultural meanings leads to confusion at best and critical errors at worst.
- Anything related to payment processing. Seriously. Anything. If you’re taking payment or donations, every element and every step of the process needs to be clear and feel familiar. There is already a sense of nervousness and hesitation when it comes to giving someone else your money. That nervousness is heightened in the digital space. Anything that you can do to increase the confidence and encourage a sense of calm will be reflected in completed conversions.
What is the most routine action, job, or task that a customer does within your system on a daily basis? Browse programs? Fill out a form? Read articles? What about your system administrators or employees? Content or product entry? Editing? Customer service? Anything that is core to a user’s main task should be as fast and as simple as possible. Efficiency equals completion and completion equals conversions.
To ensure that your users are receiving the most efficient experience possible,
- Identify the most common actions and interactions.
- Measure the effort required to complete the task – number of clicks and pages, length of forms, amount of detailed information, etc.
- Optimize and simplify these tasks. What is unnecessary? What can be done better? How can this be done even faster?
There’s nothing wrong with creating powerful software to tackle complex tasks but the core interface needs to be simple and functional or it will be painful to use. Remember that you can always provide plenty of options outside of the main flow in contextual menus or even in the user settings.
Consistency and Structure
Consistency goes hand in hand with familiarity and efficiency. Once a user becomes familiar with your system or brand, consistency makes sure that they don’t trip up in any process. Every app, website, event space, or conference has its own, slightly unique visual “language” – from signage and iconography, to color schemes and fonts. This structure makes everything far more approachable and makes content far easier to digest.
Here are some basic ways to keep your design and content structured and consistent:
- Ensure that important things feel important by using strong visual hierarchy. Keep only the most important things big and bold. Everything else needs to stay at a standard size so that those important things can stand out.
- Make sure that visual elements stay ordered and tidy. Designing “on the grid” can help with this but isn’t necessary. What’s important here is that visual elements don’t ever feel cluttered, jumbled, or mixed together.
- Use a consistent color scheme. If your branding uses orange, ensure that you’re using that EXACT shade of orange anywhere that it’s used instead of one that “looks close enough.” Create a cheat sheet or codified swatches to ensure that the colors remain consistent.
- Keep your navigational elements the same across all screens and pages. When people know how to get where they’re going no matter where they are, familiarity and efficiency increase – and so do conversions and sales. This goes for event signage and print materials as well!
- Re-use visual elements for different situations. For example, use the same button or notification design across an entire website or use the same signage or stickers throughout your campaign. These things become visual cues for action when they are consistently applied.
The ultimate goal of user interface design is to ensure that a donor or user is able to accomplish his or her goals as simply and as efficiently as possible. Obviously, in order to make that happen, we have to first understand their goals as well as the overall goals of the system in question. And there is a difference. Most organizations have a good grasp of their missional goals but many struggle when it comes to identifying the goals of their audience. This is where discovery and strategy come into play.