Simplicity in UX Design
Have you ever visited a website and been overwhelmed with information? Ever been searching for a critical piece of information, like an event time or membership requirement and had trouble finding what you need?
This is all part of User Experience, or “UX” design.
HubSpot calculated that over half of the visitors spent less than 15 seconds on your site. If they didn’t see what they needed, they moved along. Overwhelming a visitor with a busy design, tons of copy, and multiple “calls-to-action” is confusing, and will turn your viewer into that 15 second traveler.
UX addresses how the user ‘feels’ when they interact with your site. We try to intentionally include the most important parts of your mission in the most forward-facing parts of websites, and intentionally exclude unnecessary or redundant pieces, allowing your users to immediately understand what you do, and more importantly, what you want THEM to do. We use the analogy of an onion in describing the process of design:
When you look at it, it’s clearly an onion, and you have a reasonable expectation of what it’s all about. But, at your leisure, you can peel back the layers of the onion to get to the meatier bits beneath the surface. It’s all about how much you want to invest in the onion.
A large part of the success of Apple has been due to the simplification of their overall UX. “It just works.” iTunes is a great example, with numerous ways to search, organize, and drag-and-click. You needn’t be a coder to use an Apple software or hardware product.
Medium has a great article on a UX that abandoned the Apple method of simplicity, and even did it on a healthcare website!
So here are some simple tips to achieve that UX simplicity.
Focus on the Essentials
Make the information intuitively flow. Think like someone who is unfamiliar with both your organization and the internet. Confused users are 15 second users. Your home page copy should be short and to the point. Where more description is needed, focus on your singular important idea in concise paragraphs. Bulleted lists are a great way to create an intended flow, and help to signify that “this is important.” Wherever possible, use images and icons that reinforce your message. People like pictures more than words, and they make your message easier to remember. Your goal is to focus on the content that’s important, and create language that helps you avoid a rabbit’s nest of navigation tabs.
Make It Easy to Read
“It was the best of times, it was the worst of times.” Sound familiar? Dickens. A Tale of Two Cities. But can you recite a line from chapter two? Probably not.
People don’t “read” a website, they scan it. Your users will absorb more content if you feed it to them in small, memorable, bite-sized pieces. Simplify your message, and try to provide that critical information fast. Whenever possible, break up your message. You can put a great deal on a web page, but spreading it out a bit makes it more digestible than giving them one huge portion – a wall of text.
Create a Clear Hierarchy
When you design a new kitchen or bathroom, you think about what makes sense to go where. You think about your routine. Filters next to the coffee maker? Check. Use your toothbrush every day? Linen closet may be a bad idea.
A good UX design creates that flow from filter to coffee maker, leading the user from the introductory message to more detailed information in an intuitive way. This can be done with the use of color, font size, and proper spacing. Like the layers of an onion, you’re creating this “hierarchy.” Those colors and fonts tell your user “this is important” and will encourage them to dig deeper. And don’t forget what’s important to your mission. That should be front and center – “Above the Fold.” They shouldn’t have to scroll or click a link to discover why you’re important to them. Show them what you want them to see.
Many of our prospective clients come to us expressing a frustration that they aren’t soliciting memberships or seeing traffic on their news items. So we pose a question:
“Well, did you ask them?”
This is a call-to-action. It’s a command to “Click this Button!” Is your first visit free? Say so. Is there a time limit? Say so.
Your first task is to make certain that your call-to-action stands apart from the rest of the web page. Use color, size, and negative space to make it distinct from the rest of the page. Burying “to learn more about our program” as a link in a wall of text will not accomplish your mission. And think of what your call to action is. “Memberships” may be what you want, but “Join Now” is a more direct command. If your organization has more than one call-to-action, go back to your hierarchy lesson – what’s the most important thing? If you’re offered one call-to-action, it’s pretty simple what you’re expected to do. Two calls-to-action gives you a simple choice – the red pill or the blue pill. Stacking several directives on top of each other provides a difficult choice – which one is right? – and your user may decide to opt-out altogether out of frustration.
Eastgate Crossing is a shopping center in Chapel Hill, North Carolina. They have retail stores, service providers, and restaurants. They’re also creating a vibrant community with events featured at the center. We wanted their viewers to be able to quickly sort by what they wanted to do – shop, dine, hang out.
It doesn’t get much simpler than that.