Branding, Content + Production, Ecommerce, Media , Campaigns & Social
Beautifully Mad, Insanely Beautiful.
UI OR UX? HOW ABOUT BOTH?
By Mastermind Visions
We’ve heard it before: “My site works. So, why aren’t people buying?”
It’s understandable, really. Your site template technically provides everything a user needs to buy or otherwise convert. Your buttons function, your page scrolls, and you might even have a fully mobile-optimized layout. But have you made the experience as seamless as it can be for customers? Is it compelling people to explore further, or is it driving them away?
The user interface and user experience can make or break the success of a website or app. In fact, 20% of customers will abandon a brand temporarily after a bad experience with an app—and 6% will abandon that brand forever.
UI and UX are terms that have been around since the early days of the internet. Nevertheless, they continue to be two of the most misunderstood and misused terms; sometimes they are even used interchangeably. In reality, they’re two completely different (yet totally compatible and complementary) concepts. Let’s break it down.
What is UI?
UI stands for User Interface, and encompasses the tools that humans use to interact with machines. Technically speaking, it is how the user controls and operates any kind of technology.
For modern day computing, it’s basically how the user interacts with a website, app, or any other device operating system (OS). The most common UI is a graphical user interface (GUI). There is also the web-based user interface (WUI) and recently, natural user interfaces (NUI) are making waves in the app world.
On a surface level, most modern UI layouts have similar elements, including:
* Onscreen buttons
* Form fields and selection switches
* Multiple touch capability
* Audio controls such as voice command
* Eye tracking/camera integration
However, despite all of the tools available to designers, the true goal of a strong UI is to NOT be noticed.
In other words, the design needs to enhance the experience, and become a natural extension of the overall user workflow, rather than something that distracts the user each time s/he interacts. Great design facilitates a user’s path toward completing actions and goals.
Here are some of the requirements of an effective UI:
* Clean, clear, and aesthetically pleasing
* Design-focused, with smart use of negative space and complementary colors
* Intuitive and efficient page flow and calls-to-action
* Consistent design from page to page
Take note of that last one. Your users need consistency. They need to know that once they learn to do something, they will be able to take the same action to achieve similar goals. A consistent interface enables your users to have a better understanding of how things will work, increasing their efficiency and overall satisfaction with the user experience. Which brings us to…
What is UX?
Often considered synonymous with UI, user experience (UX) is more about how a user interface works in achieving goals of a site or app. A UX designer’s primary concern is how the product feels to the user, and involves any aspect of a user’s interaction with the site (or app).
Great design facilitates a user’s path toward completing actions and goals.
This includes the physical interaction, graphics, interface accessibility, and specific user behaviors—taking into consideration everything from the the most basic functionality to potential emotional engagement:
* Motion(s) required to reach an action or CTA button
* The point in a customer or buyer’s journey when a user interacts with the website/app/computer system/software
* The look and feel of a button click
* The emotional response of the user before, during, and after interactions
* Having everything work as the user expects
Why you need both UI and UX on your site
According to the international standard on ergonomics of human system interaction, the user experience is defined by a person’s perceptions and responses that result from the use or anticipated use of a product, system, or service.
This includes all the user’s responses (both physical and psychological), preferences, perceptions, and behaviors that occur before and after use.
It may seem near-impossible to manage such subjective human responses, but these things are important! Did you know that 94% of people cited web design as the reason they mistrusted or rejected a website?
Think about your own web experiences—which sites are most likely to get your clicks, opt-ins or credit card info? Is it the questionably designed site in the stock Wordpress template? Or is it the one that was visually appealing, easy to navigate, and clearly laid out?
Here’s some new math for you: UX + UI = ROI. In fact, every dollar spent on UX can bring in as much as $100 in return.
This evolution will continue. Some UX design practices will continue on the path they are currently heading. Some will become more prominent, and some will be improved. Here is a list of some of the most important things to watch for in the near (and not so near) future.
Make it user-focused!
Design your interface in a way that allows the user to focus on what is most important. The size, color, and placement of each element needs to work together, creating a clear path to understanding how it all works, and how to get to the next point in the process. A clear hierarchy will go far in reducing the appearance of complexity.
In turn, no matter how clear your design may be, users will exit the sales funnel at some point. Your UI should allow for user error and guide users through the one of many paths along the buyer’s journey, rectifying any foreseeable problems before they get frustrated and go elsewhere.
Be forgiving with varied inputs (no one likes to start over because he/she put in the wrong phone number format). And, if users cause an error, use your messaging as a teachable situation by showing what action was wrong, and ensure they know how to prevent the error from reoccurring.
Scrolling, scrolling, scrolling…
A few years back, a long-standing (and never really THAT effective) web design practice was finally dragged behind the barn and put out of its misery—the “above the fold” aesthetic. For those unfamiliar with this dated practice, it basically means all important information should be placed above “the fold,” or the section of a page that appears before you need to scroll to see more.
(On a modern laptop, that could be anywhere from 600ish pixels of height, and don’t get us started on mobile and tablet layouts!)
Companies that practiced this design basically made all their pages cluttered and unintuitive, all because they didn’t think people were capable of scrolling. Thanks to a mobile user base of billions, web designers have abandoned this archaic formatting, and have since embraced its polar opposite, the infinite scroll.
As such, scrolling will be more dominant in web designs as more users are using mobile devices. Which is good, because scrolling is much more user-friendly than clicking, and is also more intuitive. And it also improves a site’s load-time, which is a key element for SEO.
Simpler icon design
It’s important to develop a UI that allows for a unified experience across platforms and device sizes. As web design continues to move toward a unified standard, we’ve noticed an increase in bold, easy-to-read iconography, with subtle motion to indicate action. Anything more is superfluous. Anything less is unresponsive.
Gone are the days of flashy things cluttering the screen. Forward-thinking websites now take a minimalistic approach to layout and design. These navigation standards are designed to help users operate quickly and efficiently, regardless of device or medium. This includes:
* Unified touch targets
* Mouse, touch, and hover gesture navigation
* Larger fonts with enough contrast for reading
* Greater use of color to convey information
* Visuals as an alternative to sound feedback
Also note that flat (not 3D or shadowed) design is increasingly popular for modern UI designers, because it’s intuitive and simple, and works best for mobile devices.
Despite a focus on simpler, leaner UI designs, background video can convey a message much faster and in greater detail than text. For this reason, the trend toward high-quality background visuals— whether they be video, graphics, or photos—will continue.
And remember: large images and video are easier to see and consume on those smaller, mobile device screens. Which matters because:
Figures suggest that by 2017 more than 90% of internet users will access online content through their phones.
Typography can make a site more customized to match your brand image. Fonts should be chosen based on style, image, mood, and so forth.
To give an example, if you’re selling surfboards, a rigid, distinguished serif font might not accurately represent your brand or the underlying imagery, distancing the user from the experience, and possibly driving them to a more cohesive competitor.
Likewise, if you see a bank or investment firm using Comic Sans to describe its core offerings, calmly (but promptly) withdraw your money from the institution, remove the bookmark from your browser, and strongly consider hiring a financial advisor. (For that matter, any company using Comic Sans doesn’t deserve your business.) For businesses such as these, a more conservative font will likely better adhere to the overall brand identity.
Though modern designs are trending toward flatter, more streamlined aesthetics, buttons still look like buttons and links look like links.
Some things remain the same
For all this talk of folds, scrolls, and evolving design practices, some basic tenets of web design will likely remain for years to come. These are the pillars of user interface and experience, and should always be considered, if not adhered to when creating new webpages.
Though modern designs are trending toward flatter, more streamlined aesthetics, buttons still look like buttons and links look like links. If it’s supposed to be clickable it will look like it’s clickable. Similar things should be grouped. Again, the basic tenets of good web design remain.
Some other (slightly less obvious) things to consider are:
Consistent page design throughout your site. For example, a button used site-wide should be in the same place from one page to another. If I regularly click on the bottom right of a screen to advance a page, why on earth would you move it to the top left on a subsequent page?
It may sound ridiculously obvious, but if you notice people are bailing on your online survey before the finish line, either you need more engaging questions, or your UI is flawed.
Mark required entry fields with an asterisk. Quietly, subtly, and effectively, the unassuming asterisk has become the universal symbol for “required.” Make sure the information your company needs on an opt-in or purchase form is clearly marked with one, or risk a ton of abandonments. (We also advise to not use too many required fields on one form, but that’s a discussion for another white paper.)
Give an indication that the system is working. Hourglasses, spinning wheels, whirling dervishes, and other animated manifestations of “hold please”—all of these are, at once, annoying but reassuring. No one likes to wait, but at least users know your site is working, and hasn’t frozen right in the middle of your financial transaction with that Comic Sans bank from the previous page.
If you notice people are bailing on your online survey before the finish line, either you need more engaging questions, or your UI is flawed.
In turn, always show progress with a status bar or icon. Waiting on a system to load can be infuriating, but a progress bar softens the time management blow by letting the user know the process is indeed happening. Watched pots may never boil, but we watch anyway—give your users something to reassure them.
Indicate (and facilitate) how to input information correctly. This can be as easy as adding some responsive text affirmations, changing a red box to green, or even making a regular face become a smiling emoji. Regardless of your choice, it’s a reassuring design facet for users, and shouldn’t be ignored.
On the same note, minimize the user’s chance for error. Instead of requiring users to input dates, give them a way to select from a calendar or drop-down box. This ensures all database formatting is correct, automated, and easy to manage.
UX and UI design requires your input
Effective UI and UX design requires a comprehensive and accurate understanding of your end user. It’s not just about developers adhering to clichéd best practices and creating a functional site. It’s about creating a complete user experience that reflects your brand, and the ideals of your audience.
In order to achieve these design goals, brands need to develop a clear map of touchpoints—and that can only happen by working collaboratively with UX and UI experts.
To learn how Lucid Fusion can help create interfaces that provide seamless, intuitive, ROI-generating experiences, contact our UX and UI team!
Use the download button below to download a free copy of this article.