User interface (UI) design and user experience (UX) design are so tightly linked that many people get them confused. What everyone does agree on is that the UI and UX of an application plays a major role in its success or failure. UI design, which is also sometimes called visual design, is directly linked to the technology and visuals being used, while UX design is linked to the user’s thoughts and feelings as they interact with that technology, sort of a yin and yang in the world of applications.
Still confused? Don’t worry, you’re not alone. Even people who work in the field of applications disagree sometimes on what is part of UI and what is part of UX. By the time you get into wireframes vs prototypes vs blueprints vs mockups, you can really have a mess on your hands. We’ll go into more detail on what exactly UI and UX are below, but first, a story.
Interface vs Experience: A True Story
I recently downloaded a new app to help me identify bird calls. Upon opening it, I was directed to select my state from a ridiculously long dropdown menu. After that, I had a list of the birds in my area in order of my likelihood of seeing them. Each entry was beautifully illustrated, included several easily-accessed recordings, and provided a button to press for more information. From the comfort of my living room, it looked like a great app.
I soon had the opportunity to try it out in the field. I was walking in the woods, heard a bird nearby, and whipped out my phone. Upon opening the app, I was directed to select my state from a ridiculously long dropdown menu…again. The app did not save any of my settings. This seemed like a major oversight.
When tracking a bird through the woods, a few extra seconds of looking at your phone is the difference between being able to follow it and losing it completely (I did the latter). I was particularly annoyed given the fact that I was sheltering in place and could not have gone to another state had I even wanted to.
Given the fact that I have downloaded the app and opened it more than once puts it far ahead of many of its competitors. Even so, my experience did leave something to be desired. User experience (UX) is critical to the success or failure of applications. While this might seem like an obvious statement, we all know from using apps that many of them fall short when it comes to UX.
Designing an app’s user interface (UI) to provide the best possible user experience is crucial in the competitive world of app development. Don’t pour money and hours into an application only to lose users due to poor UI/UX. So, how can you be sure you provide the best experience possible? Get a deeper understanding of UI/UX, learn strategies to ensure you get it right, and work with developers that build user-experience assessment into their work.
What Exactly Is UI?
UI and UX are sometimes used together, and sometimes interchanged, but they are not the same thing. They are, however, inextricably linked, and having a deeper understanding of both will help you increase their quality.
UI, or user interface, is every part of the technology that the user interacts with. It includes screens, pages, buttons, sounds, icons, input systems, dropdown menus, navigation systems—everything that the user sees, hears, and touches while using an app. Another helpful way to think about it is that UI is the point of human-software interaction and communication whether that be on a device or via a web page or app.
UI is sometimes referred to as visual design. This makes it sound like art rather than science. In truth, it is a mixture of the two. Software must be designed to function seamlessly in the background of an app or website. It must allow the user to enter information and then accurately act on this information. At the same time, the user needs to have a positive experience, and that goes well beyond proper functionality. It includes elements like color, style, consistency, and a number of other visual elements that can impact the user’s experience.
Which Brings Us to UX
UX, or user experience, mirrors the emotions, attitudes, and thoughts the user has when interacting with an app. While UI occurs at the point-of-contact between user and technology, UX is the interaction itself. If UI design is half technology and half art, UX design is half technology and half psychology.
Peter Moreville, considered the founding father of information architecture, created a wonderful visual to explain what goes into UX design. At its core, a product—be it app or website—needs to be valuable to the user. The following characteristics are what make it valuable—useful, desirable, accessible, credible, findable, and usable.
It can sometimes help to think about non-technological examples of UI and UX in order to understand them better. Think about a house. It’s a well-built, beautiful home. It’s fully landscaped, impeccably designed, and even has a pool. There is only one problem—there are no bathrooms. The house may be well-built and lovely, but nobody can actually live there and experience it due to this oversight.
You Can’t Have One Without the Other
The question has been posed, “Can you have good UX with poor UI?” Craigslist is often held up as an example. Where do you go if you want to buy or sell goods locally? Craigslist. The site is easy to navigate, functions well and is ugly and archaic-looking. So, does that mean it has good UX and poor UI?
Notice that Moreville did not include “pretty” in his honeycomb of UX design. While craigslist might not be sleek and attractive like we’re used to seeing today, what it provides is still desirable to the user. One could argue that the bare-bones, old-fashioned look of craigslist is part of its appeal. The user interface, while not traditionally pretty, is still providing users what they need for a positive experience.
UI and UX are so enmeshed that you really cannot have one without the other. Like I said, yin and yang.
Why Is UI/UX Critical to Your App’s Success?
Again, saying that quality UI/UX design is crucial to the success of an app does seem like an obvious statement, but it helps to understand why, and it really cannot be stressed highly enough. The world of app development is tremendously competitive. The following statistics demonstrate just how little patience users have for less-than-ideal experiences, and how much they value positive ones.
- 86% of American app users have stopped using an app due to poor performance.
- 95% of mobile apps are abandoned within a month.
- 79% of users place the highest level of importance on the usability of an app.
- The average app loses 77% of its daily active users within the first three days after installation.
- 75% of apps are used once after being downloaded and then never used again.
- 23% of customers who have a positive experience using an app tell 10 or more people about it.
Even the Big Dogs Can Get It Wrong
High-quality UI/UX design takes time and dedication, and nobody is immune to getting things wrong. Netflix has recently been lambasted for its autoplay feature. Users found it frustrating that if they hovered over a movie or show on the homepage too long, it would start playing. Due to the outcry, it’s a feature that can now be disabled, but not before an entire Twitter account called @stopautopreview was created.
Google is not immune to missing the mark on user experience, either. Do you remember Google Wave, Google’s collaboration, and real-time communication app? Probably not, and there’s a reason. While many people think Google didn’t promote it well, a lot of people posit that it failed due to poor user-experience issues. It was difficult to access, had an unfamiliar layout, and was often confusing to use. The list of big-name companies failing in UI/UX design could go on and on. While it goes to show that nobody is immune to user-experience mistakes, these missteps can be avoided by approaching UI/UX design with the right information and the right tools.
3 Strategies for Getting It Right
By using the right methods throughout the app design and production process, you can ensure that poor user experience will not compromise your app’s success.
1. A Clear Understanding
Before you create a single wireframe, everyone working on application development must have a firm grasp on four things—the application’s purpose, the target audience, the company’s goals, and the problem the application will solve. If you begin a project without this knowledge, it’s easy to lose your way.
Knowing the target audience is especially critical as you begin. Without a firm grasp of who the app is for, it will likely end up becoming too many things for too many people. Developing a user persona can be a helpful way to get to know your user and think about things from the user’s point of view.
2. Wise Use of Focus Groups
Focus groups can sometimes be a hot-button issue. Some people swear by them while others steer clear. The key to effectively using focus groups is asking them the right questions at the right time. Focus groups can be an effective tool in discovering your users’ needs and how a product could ease those needs.
It is not recommended to use focus groups for things like feedback on features and usability testing. People are notoriously bad at predicting their own behavior. Study after study has shown that the reasons people purchase things are not conscious or rational. People can tell you what they need, but not necessarily what they would buy.
Consumers are not experts in the field of app development. Since they don’t know what’s possible, they can’t tell you what they want. Henry Ford is often attributed with saying, “If I had asked my customers what they wanted, they would have said a faster horse.” Henry Ford almost certainly never actually said this, but the sentiment is true. Ask consumers about their needs and pain points, but don’t ask for initial design input.
3. Observe Natural Behavior
So, am I saying needs is the only input you need from users? Absolutely not. It’s imperative that you assess how users interact with your product as it’s being developed, but this should not be done in a focus group. Direct observation of individuals is the best way to assess things like usability and design.
In essence, the only way to assess user experience is to observe the experience as it’s happening. Consumers aren’t going to be using an app with a group of people in the real world. They also won’t have the help of someone (you) who already knows how to use the app available to guide them through it. This is why naturalistic or covert observation is recommended in order to get legitimate information.
Tools for Perfecting UI/UX Design
There are now so many tools available to help with designing amazing application interfaces and experiences. There are even tools that can be used for user-experience testing. The examples below are not meant to be an exhaustive list, but rather an introduction to some of what is available and some of Technology Rivers’ favorites.
Tools for UI
These are some of the commonly used tools for UI that you can check.
Sketch allows users to bring their product ideas to life. From icon design to testable prototypes, designing is made simple with an easy-to-use, intuitive interface. Sketch is also built for collaboration between team members. Designers, developers, stakeholders, and managers can easily be included in the design process at the right time.
Photoshop has long been a mainstay in visual design. It is still considered to be one of the best imaging and graphic design options out there. New features are constantly being added giving users even more tools, options, and control to create the perfect image.
Zeplin was created to improve the collaboration between designers and engineers. It automatically generates codes and specs tailored to whichever platform you’re working in. Files from other design software can easily be exported into Zeplin as well. It’s a great resource for keeping everyone on the same page.
Tools for UX
While these are few of the UX tools you can also explore.
Balsamiq is one of our favorite tools to use here at Technology Rivers. It allows wireframes to be created easily and quickly. It’s like sketching on a notepad or whiteboard, but on a computer so everything is saved and easily shared. It’s a great tool for getting feedback on design ideas
Adobe XD allows users to create wireframes, interactive prototypes, user flows, designs, and animations all through one tool. Like Photoshop, new features are constantly being added. It can be used for easy collaboration, and colors, character styles, and components can be shared across multiple projects.
Figma lets users create scalable designs that are easily shared since it’s cloud-based. It includes impressive design features like a modern pen tool, instant arc designs, and advanced font features. No more saving or exporting files means everyone can have real-time access to everything they need.
Tools for UX Assessment and Testing
Apart from UI and UX tools, here are some tools for the UX assessment and testing.
UserZoom allows users to analyze and benchmark the UX of any product. Designers are able to get immediate feedback on prototypes, and researchers can launch studies in just minutes. Plus, it has been proven to increase the bottom line. A study by Forrester Research found the potential return on investment for UserZoom users to be 537 percent!
Lookback.io lets you watch and interview app users anywhere in the world. It can also record app users and automatically send recordings to you. Timestamped notes, mobile screen touch capture, and dedicated participant apps are just some of the features that allow you to learn more about the app user’s true experience.
Userlytics lets you conduct experience studies, usability tests, and tree testing for your app. You can use your own participants in studies, or create a custom screener using Userlytics’ demographic filters. Userlytics makes it simple to define your goals, screen participants, and define specific tasks. What you end up with is qualitative and quantitative data to help you hone your app design.
In order to develop a successful application, your UI/UX design strategy needs to be on point. Your project must begin with a clear understanding of what you’re creating and who it’s for. Feedback from your end-user is paramount, but you need to make sure you’re asking for the right information at the right time in the right environment. Luckily there are loads of tools available to help you from visual design to wireframes and on to evaluation. With these resources, you can create the next great app that is both beautiful and functional. Yin and yang.
Are you looking for help with user experience and design? Technology Rivers can help you create an app that is both stunning and easy to use. Contact us today to learn more about our services and how we can help.