A while back, a large manufacturer asked us to retool the user experience for its product. We assumed it wanted us to research its target users and design a product to fit their needs. Our client assumed something else, and sadly, the miscommunication sank our partnership.
The product, a B2B software application, served two distinct sets of users. The primary audience members, small business owners, tended to be less tech-savvy, so they needed a simple interface to make the product work for them. Sophisticated enterprise users, on the other hand, wanted access to more robust features and metric reporting systems.
The trouble started when we brought those findings to the client. We discovered that our client didn't want a new user experience — just a new user interface, perhaps with buttons moved around and a fresh coat of paint. We couldn't ignore the findings of our research, but the client wanted to make the product for everyone. Unable to agree on the product's target user, we knew we wouldn't be able to deliver a product we were proud of. In good conscience, we parted ways.
We can't change what happened, but we did learn from the experience. We realized that we could've done a better job clarifying these confusing design concepts. Understanding the relationship between them is important not only for our clients, but also for anyone designing and developing user-focused tech products.
Where UI and UX Meet
User interface, or UI, describes the visual design or layout users see when they interact with a given technology product. Everything from buttons to colors to menus falls into this category. If the software product is the house, the UI is its curb appeal: a clean exterior, fancy trim, and ornate window designs.
The user experience, or UX, refers to how intuitively and efficiently the software meets the user’s needs. In the example of a house, the UX would describe how the rooms flow together and where the doors go. The prettiest house in the world won’t sell if the only access to the guest bathroom is through the master bedroom.
With so many great consumer software applications out today, users expect easy, intuitive experiences at every turn. Consumers don’t want to learn how to use a new system; they want something that “just works.” Great UX does that by aligning the experience with the user’s expectations, eliminating the barriers between user and functionality. Together, UX and UI design make products both visually appealing and easy to use.
It All Starts With the User
The user’s needs should dictate the design of the UX, and the UX should dictate the design of the UI. Research comes first, then functionality, followed by cosmetic sophistication.
The needs and skills of the user should determine the UX. If your brand sells to technically adept customers, you can create an application with advanced features and dashboards because those users want those advanced tools. But if your application is aimed at grandmothers who want to view photos of their grandkids, you want large buttons and clear instructions with no clutter.
Imagine a group of scientists who need an app to share pictures with colleagues during field research. This group needs to take photos, upload them quickly, and receive feedback within the app. On paper, that’s basically Snapchat. But in practice, the UX should be completely different. Where Snapchat keeps things simple, "SnapScience" would allow users to provide in-depth peer reviews. The product's functionality might be the same, but its UX would be different because it would serve different users.
These subtle changes might not sound like a big deal, but to users, they are. According to Red Website Design, every dollar invested in UX delivers $100 in return, while Forrester reports that better UX designs increase conversions by up to 400 percent.
Just because UX comes first, however, does not mean that UI is less important — only that UI depends on UX to guide users properly. Consider how Fitbit’s UI helps active users engage with the wristband. The band itself is stunningly simple: a black-and-white display that changes between a few screens with the tap of a finger. It’s easy to read and easy to use with one arm, which is perfect for someone who’s gasping for breath on a treadmill.
Within the app, Fitbit’s UI continues to put simplicity over depth. The colors are unobtrusive and relaxing: light blue and white. Self-explanatory icons provide readouts of different fitness metrics. By tapping one metric, users can see historic performance information in that area. Without UI design, that information might have been stuck in a clunky spreadsheet. But because Fitbit wanted to make it accessible, it used intuitive graphs and icons instead.
UX and UI don’t describe the same thing, but they do serve the same ultimate purpose: to deliver a great product that people want to use. UI gets a lot of attention because it's what people see, while great UX is rarely noticed because it's what makes the system work "just right." But without both, a product can't delight its users. Unless the house looks, feels, and works like it should, the buyer won't be calling it "home" for long.
Struggling to create a standout user experience? Download our free whitepaper “The Product Design Process Guide” to better understand your target user and design an experience to suit.
Tony Scherba is a CEO + Founding Partner at Yeti. Tony has been developing software since high school and has worked on digital products for global brands such as Google, MIT, Qualcomm, Hershey’s, Britney Spears and Harmon/Kardon. Tony’s writing about innovation and technology has been featured in Forbes, Huffington Post and Inc. At Yeti, Tony works on strategy, product design and day to day operations, hopping in and working with the development teams when needed. Follow Tony on Twitter.