UI and UX: How They Are Different and Why You Need Both
Given the astronomical capabilities of today’s technology, it’s hard to believe that there was life before companies like Apple and Microsoft. But prior to our tech-centered world, there was an evolution dating all the way back to when we had electromechanical binary programmable computers.The first computers were enormous machines – taking up entire rooms, weighing almost 50 tons. That’s seven-and-a-half times as heavy as most full grown elephants!
Getting these giant computers to perform simple functions was a struggle. Nowadays, we carry more power in one iPhone than was available in these giant early models. By today’s standards, the first so-called “portable” computers were clunky, unwieldy things and only called “portable” because they were able to be set up in one place and moved elsewhere. Room-sized boxes couldn’t pull that off!
Regardless of the size or portability of the computer, products like these were designed and built to satisfy very specific data processing needs and increase worker speed and productivity – no one worried about UX and UI or whether it would be easy to use or how people felt about using it.
Fast forward to the present day where devices millions of times more powerful than the earliest computers are accessible to everyone. Such widespread use of technology requires designers to create websites that can successfully meet the UI and UX needs of users with vastly different levels of technological abilities or skills. If users cannot easily interact with these websites, landing pages and other digital assets, your products and services won’t sell. In order to attract business, you have to build a reputation, invoke trust, and outshine your competition. In the digital space, all of this is transmitted through your website.
What is UI?
User Interface (UI) is everything designed into a website or digital asset with which a user may interact. Take a look at the Dropbox Business home page. The scroll-through carousel, dynamic illustrations, animated icons and color palettes are all elements of a memorable and attractive user interface. These features create personality and help users visualize how this digital platform will be effective in achieving their business goals.
Simply put, UI is short for User Interface, which is the presentation and interactivity of a website. UI includes the page layout users view, the images they see, the colors they face, the text they read, the buttons they click on, the navigation they use, the dropdown menus they click through, the setting options they toggle, the modal windows and dialogs they interact with and the fields in which they input information. Any website with a visual element such as scrolling images, animations and transitions are all designed with UI in mind.
Being consistent and clear in feature placement within your UI, including pop-ups, forms, CTAs and search fields, is important. The UI determines what the website is going to look and feel like to users. The elements on your pages should be visually stimulating, aesthetically pleasing and themed appropriately for the purpose of the website.
Think about the times you stumbled onto a website that was aesthetically stunning, easy to navigate and intuitive to use. For example, Officeworks (https://www.officeworksinc.com/), Workbar (https://www.workbar.com/), McKinsey (https://www.mckinsey.com), or First Round (https://firstround.com/). The UI of these websites is appealing, delightful, and cohesive.
Officeworks is an office space consulting firm that creates extraordinary interior designs for corporate office spaces. Simply put, their spaces are stunning. For a company like this, whose results are mostly visual, it’s imperative they show their capabilities by highlighting their picturesque work on their website.
Take a look at the sleek design of the Officeworks home page, highlighting design projects and their dedication to customer service. The page design is clean, with large images interwoven with bursts of large text along with large CTA buttons. All of this is surrounded by ample whitespace, ultimately delivering strong visual impact.
Good UI is good UI, and good UI leads to good UX.
What is UX?
User Experience (UX) is the overall experience a user has while interacting with a company’s website or other digital assets. UX is all about creating websites and landing pages that provide meaningful and relevant experiences to users. A good UX will lend value to your audience while making them feel good during the process.
Predictability is a major focus of good UX and can be understood, in this discipline, as how well a user can successfully foresee the outcome of an interaction. Does the search field on your website take them to the page they are looking for? Are the site behaviors based on hovering, clicking, scrolling, swiping, tapping, etc. intuitive and expected? Is it easy to decipher what’s clickable and what’s not? Are the site features logical or does it feel unwieldy and difficult to navigate?
Meeting the expectations of your website viewers is important to website success and will ultimately determine whether the user had a good or bad experience with your brand.
Our brains are hard-wired to enjoy processing information when it’s simple and easy to understand. This can be understood as cognitive fluency, the measure by which one’s brain processes information. Cognitive fluency not only affects your brain, but it affects how you feel about something. The faster a website is interpreted by the brain and understood, the better a person feels physically. If the user is puzzled or has difficulty navigating your site, then a low level of cognitive fluency occurs. This can result in a poor brand experience that leads to customer dissatisfaction and a negative overall perception of your company. Which ultimately affects sales growth.
Now, think about the Dropbox Business website in terms of usability instead of visual presentation. Imagine trying to upload a video but when you press “upload” nothing happens. Or you click “login” and it takes you back to the home page. How frustrated would you be if you were unable to share documents by folders and had to send every single file individually? This would be a bad user experience. If Dropbox didn’t include a drag and drop feature, users might find it time consuming and cumbersome to get simple tasks completed, ultimately, forcing the user to explore competing software that would help them accomplish their goals more efficiently.
In this case, the Dropbox website would be visually appealing but not built with great UX if you don’t enjoy using it and it does not offer you what you want.
Let’s look at the McKinsey website as another example of good UX. If you go to the McKinsey home page, you’ll find subtle animations as you scroll down the page. This heightens your senses and draws you in to the content. The movement makes the site visitor’s engagement more enjoyable compared to if they were simply seeing plain text with static images running down the page.
Click through to an article, and you find a slight parallax effect and content that gently fades onto the page as you scroll. Again, these subtle movements make content engagement more enjoyable. If you visit the Digital Labs page, you’re immediately immersed in a video within the company’s labs seeing teams brainstorming ideas and collaborating on solutions, with the opportunity to see more video lower on the page. The video experience is directly in line with what would be enjoyable from an immersive, digital lab.
On a more micro level, sites with poor UX might cause visitors to become frustrated with the response of the website when they take certain actions. For example, think of seeing something on the screen that visitors think is clickable when it’s actually not. You might see visitors “rage clicking” – clicking over and over and over again convinced that a click should be generating a new result, when in fact, the element is actually not clickable. Although the UI might be aesthetically appealing, the experience is one of frustration and anger.
Why Do You Need Both UI and UX?
Exceptional websites not only solve the user’s problem by guiding them to the information they are seeking; they also please them aesthetically and create a positive user experience.
Good UX reduces friction for your users, increases retention and reduces bounce rate. The layout of your website and its digital features should focus on the value of your business and how your offering will provide a solution to those users. Again, a good UX considers user predictability so that the website functions the way users expect. Every CTA, navigational system, and pagination structure should navigate users through the site logically.
While a good website factors in the key elements of UX, a great website features excellent execution and integration of both UX and UI. Good UI ensures the UX functionality will be presented in a visually stimulating way. These UI designs need to be created within the constraints of the UX design. If you focus on only UI or UX instead of both, you will miss important qualities of the entire user experience. For example, if your website has design elements that evoke emotion and appreciation but users cannot find your services page to understand how you can help them, then you might have an unhappy user. If the user leaves your website feeling as though you didn’t provide a solution, you may have lost out on a potential customer.
Let’s say you want to drive traffic to a particular page on your website and increase engagement. Once a user lands on the page, they shouldn’t have to think too hard about what you are asking them to do next. You want to streamline your UX so that every part is methodical and moves from one point to the next, seamlessly. A good UX will drive users to reach a specific goal on each and every page.
Do you remember the last time you spent the day shopping at a store like Nordstrom? Without you knowing, the company planned in advance to make your experience as enjoyable as possible. When you arrived, was someone there to greet you? Was there lounge chairs, a heavenly smell in the air, and perhaps a fitting room with suggested outfits on display? Were the sales associates organized and ready to assist you?
All of those additional luxuries probably weren’t the reason you went shopping in the first place, but it was part of the entire experience. In the same way the sales professionals planned to make your shopping more enjoyable, you can anticipate the needs of your users and build a better experience for them.
Drive Leads with a Better User Experience
To understand how we can better predict what your users want and need, let’s think about a blog page. Many blog posts have an overload of information that is unorganized and difficult to navigate. Instead of a generic blog page, take a moment to consider why the user is on the page.
There is already a lot of useful information for the user on this page, so why not give them category topics, a list of related articles, as well as sharing the 3 most popular posts on the blog. Hubspot does a great job of this by highlighting important categories and read time to match their users expectations. Good UX anticipates user needs to provide a much better experience to the user.
Good UI takes the layout and strategy of the UX-optimized page and brings it to life. UI focuses on the aesthetic of the design, determining the size, color, shape and interactivity aspects of the page.
User experience is determined by how simple or difficult it is to interact with the user interface elements. The UI design determines how the user interface looks, while the UX design determines how the user interface works. Furthermore, you can see why both of these user elements depend on one another.
A beautiful design that addresses user flow and functionality ultimately succeeds because users are going to love using the site.
To create exceptional digital content, it’s essential to deliver both good UX and UI. They are different aspects of website design, but their individual pieces fit together like a puzzle. UX and UI go hand in hand to create the best possible outcome for the user.
Check out a few of our website projects here for more details. And let us know if you’d like to discuss strategies for an effective redesign of your website.