UX & UI: The differences between two abbreviations

Editor's Notes

• #2: Intro: Hi, I’m Jessica Kainu and I’m the UX Designer for the voice team where we work on the Kroger action for Google Home and Smart Display. There are a lot of misconceptions out in the wild that UX is the same thing as UI as the two are used interchangeably. I’ve seen job postings requesting a UI/UX Designer or even some sort of mythical creature called a UI/UX Developer. When I see these types of titles and read further descriptions it makes me wary of what the company is expecting from this role as they crammed 3 jobs into 1. For the company, you have to wonder if they understand why they might need a UX or UI professional and if they know what the roles entail. For example, in the past as a UX Designer I participated in a hackathon where I was told the Developers wanted a UX Designer involved. When I got there, they only wanted me to create assets for their projects. There was nothing about reviewing architecture, if the project fulfilled a user need, or if the flows of their app made sense. Now these events are under a time constraint but it didn’t appear that they wanted UX involved, they needed a production artist. In the working world, I’ve also been in meetings where I was given a whiteboard marker and told to start sketching wires, as if that was my only job function. In these situations I wasn’t being utilized for testing, research, or any strategy which was a bit disheartening.
• #3: While doing research for this lunch and learn I found something called the UX job title generator and it’s a bit tongue and cheek. Dr. Davis Travis from User Focus created this table based on the responses of 51 people’s job titles. How it works is that you choose a seniority, add your practice, and then pick a role. This table will generate 882 different job titles for UX. My favorite that I’ve pulled from this is “Principal Visual Champion,” though my gut tells me that isn’t a real thing. User experience is a spectrum. From the moment a user enters your app to the time they exit, everything they see, touch, feel - anything they can sense is part of the experience and needs to be designed with intention. We can see here there are hundreds of ways to make up a UX title. There are a lot of different parts to the user experience but there doesn’t appear to be a simple way to tell these apart. Speaking to UI and UX specifically, when these terms are used interchangeably their functions become muddied. There are countless articles from countless designers on this topic, which is evidence that this is a question that needs to get answered. What the heck is the difference between UI and UX?
• #4: Let’s start high level, Adobe states that “UX deals with purpose, while UI deals with appearance and functionality.” They are not mutually exclusive and you need both to create a great product. In your own words, what do you think UX and UI designers do?
• #5: I asked my friend, who is a jeweler, what the difference between UI and UX was and she surprised me with a pretty interesting answer. “I don't know what user interface design is, but the way I'd describe your job is that you're the person who makes using a website intuitive and easy to navigate. I'd say that you base your choices on both user feedback and statistics.” It’s very affirming that my friend actually listens to me when I talk about what I do for work. My friend has a good idea about UX. What we can surmise is that UX is based in data, analytics, and user research while UI has a creative component. UI deals with the visuals and what the user will interact with.
• #6: With that in mind, there are a few things we can all agree on. We know that UX and UI are related in some way, there is some overlap between the fields, and they are certainly not interchangeable.
• #7: In the spectrum of UX, having an accessible interface is a piece of the puzzle. Tripin Studio states, “Part of the confusion might lie in the name: UX design. For many people, the word ‘design’ is associated with creativity, colors and graphics, when really its true definition lies in functionality, as well as the process behind making products that provide a seamless experience for the people who use them.”
• #8: I’m a visual learner, so let’s consider a the hazard light in a vehicle. We’ve got a Honda, Chevy, and a Fiat here. It’s a rarely used button yet it is front and center. Each is styled a little bit differently, sure, but they all have the same prominence; big, red and right in the middle of the dashboard. This is a good UX decision because in a panic the driver is going to need this button and they’re not not going to want to look for it. The last thing you want to think when you’re in an emergency is, “Where are the stupid flashers?! How do you turn them on?!” The context was thought through for hazard lights with the user in mind, that is the UX. The UI piece would be how the button is styled. How large is the button? Is there some sort of feedback like a click? These decisions are visual and interactive in nature and informed by UX.
• #9: The overlap between these two terms happens because the UI is informed by user testing and user research. If UI was designed without data to back up design decisions, there’s a big chance you will end up with a beautiful design that is frustrating to interact with.
• #10: Adobe uses a cafe to explain the differences between UX and UI. “Picture yourself in a cafe. Think of the cup, the table, the chair, the coffee beans as the UI of the place. Now, think of the way the coffee is made, the ambience, the service, the music as the UX aspect. UX is literally everything that has impact on your overall experience as a user of something.’” To elaborate further, if there wasn’t a clear idea of where to order or if the menu was confusing, you aren’t sure where to pick up your drink, or worse, you pick up your drink but there is a sea of college kids on their laptops blocking pathways and it isn’t easy to find a seat... But the store looks aesthetically pleasing, this would be UI that’s uninformed by UX. You may go to this cafe once but after that never come back because of the frustration you had the first time. I particularly like this cafe because although there is a clear ordering station and you can easily view the food items as you order though I’m unsure of where I would pick up my drink. It may be the angle of the photograph but this could be a potential pain point. If I had to guess, a customer would order and continue moving from left to right behind the black glass to an assumed counter space. This would be logical since we read left to right; start to finish. What could be frustrating however is that it would be difficult to read the menus as you would be standing in line directly under them. Another question I have for this cafe is where their entrance and exit is located. Do I have to walk against the flow of traffic to get in line? Is there an entrance and an exit or are they the same door? Is there a circular flow where I can go to a creamer station and leave immediately after? Although the colors, photos, and menus all appear to have a local cafe feel, if the pathing and accessibility to the menu is cumbersome, this may deter customers from returning.
• #11: Having these two terms used interchangeably is a major frustration. It leads others to believe a UX Designer will design the visual aspect of a product and call it good. UX is so much more than than visual design.
• #12: If you haven’t seen this poster before, it is from a blog post by Erik Flowers at Practical Service Design. This sums up what UX is capable of against how it’s commonly perceived. I have experienced this as I’m sure others of you have as well. A lot of what a UX Designer can do involves research, planning, and strategic thinking; none of which are necessarily visual in nature.
• #13: In his blog post, he showed a visual of the UX umbrella by Dan Willis. UX encompases so many parts that on a project for instance, there may be an instance where I may be doing user research and testing the navigation scheme or designing how content is interacted with. If you look at the umbrella though, UX and UI aren’t represented. Erik Flowers states... User experience design is omitted [from the umbrella] because it is the loose term that encompasses all of the various disciplines. You’re never really doing any “user experience design” that isn’t just a combination of one or more of the things under the umbrella. User interface design is omitted because it is the crossover between visual design (look and feel) and the interaction design (how the look and feel work). Combine those two and you have an interface. The interface is the result of the “solution design” that came before it. A skillful interface designer understands the importance of providing the user with a solution to a defined problem.
• #14: This isn’t simply a semantics issue, it’s a two-way street between designer and business. When the right people aren’t in the appropriate roles, the user ends up with a junky experience. Now this may sound a bit business-heavy but it’s important for everyone to understand what UX and UI are in order to avoid wasting time and resources. Imagine you’re a business and hire the wrong person or a UX Designer who ends up being pushed to do production work or heavy development. This may just be me venting from my experiences as a UX Designer, prior to working at Kroger, and coming to find out the business didn’t understand my role, but it’s happened more frequently than I thought it would. Let’s say you’re a product owner, a manager, or someone running a business. You should understand your project goals and who would be beneficial to bring on to accomplish it. With this starting point in mind, think about how you would you define success and who could help you get there. You should understand the differences between UX and UI for your own benefit. How much research will need to be done on your project? How many designers will this take? What sort of interface are you looking for? Is this an in-and-out interaction or do you need your user to stay in your app and explore? It’s not a good feeling to hire a UX Designer to find out they’ve never performed usability tests, any field research, and have the wrong background for your needs. Being informed about UI and UX roles is crucial because at the end of the day the business and designer need to have a good partnership. Whether you have interviewed for a position that turned out to be a UI/UX Developer Unicorn or moved to a different team within a company, remember that your time as a designer is valuable. It feels great when your skills are used appropriately on a project and terrible when everything is unrelated to what you’ve worked to achieve.
• #15: Like articles about UI vs UX, I’ve run across of variations on explaining the UX process. Overall they have the same point but everyone has their spin on it. This will give the general steps you should take as a UX Designer when you are put on a project. This follows what I learned in my masters program and try to do on the voice team as best as I can. I’m sure those of you in Cincinnati may follow something similar.
• #16: This is your research phrase or data collection phase. No need to worry about analysis at this point. When your stakeholders approach you about a design problem it’s time to start learning about it via user research. Utilizing user research methods like competitive analysis, user interviews, user testing via the product in its current state, will help validate the problem and provide a direction of where design needs to go. My go-tos are usability testing, user interviews, and competitive analysis. What has been great with Kroger is utilizing 8451 for their researching ability. They’ve aided me with voice research which has allowed me to focus more on other aspects of the voice product. I’ve found those to yield the best results to figure out a design needs to be changed.
• #17: You’ve gathered your data and now you need to make it meaningful. If you performed user testing on your current product, you can pull out user quotes or video clips that showcase pain points and success. There is so much meat in user testing that it could be its own presentation. As for interviews, this can involve stakeholders or others related to the product. Who is using your product? What common tasks are they trying to perform? Are there different ways users complete tasks? My last go-to is with competitive analysis which can show industry trends but one thing to keep in mind is if these trends enhance the user experience. For example, just because a company has a chatbot doesn’t mean it is implemented correctly and is it something your project even needs? Never take an idea from someone else without understanding how it will affect the product. You can put a report together from testing, interviews, analysis but it all depends what is the best way to present this information to your stakeholders. I’ve been in situations where I’ve written a 30 page report and others where I wrote an executive summary and was expected to continue moving forward with my findings.
• #18: My favorite part of the UX process is UX research, so I may get a little too into the weeds about it. However, once you’ve gotten your design direction that has been informed by research you can start to whiteboard ideas. I’ve done this collaboratively and on my own. Collaboratively is great with a couple other people as they can be challenging you as problems arise. If you’ve ever heard of Google Ventures, you could implement a design sprint if the design problem calls for it. You can read more about this from Jake Knapp’s book. The quick and dirty however is that you and a few others related to the project are in a room for a week doing rounds of sketching and working on building a prototype that can be tested by the end of the week. This allows everyone to have a say in the project and gather different viewpoints. 10+10 is a great sketching exercise which you can do alone or in a group. You write down your problem, say “As a user I would like to add milk to my cart using my voice,” and sketch out 10 different ways a user might do that. Think outside the box, think of something that may not work, think of something boring and realistic. The point is to get 10 different ideas out whether they’re good or bad. Once you’ve drawn them out, get some feedback and figure out which is the best out of the 10. Take that idea and sketch out 10 more iterations of it. This will allow you to get more detailed. By the end of this exercise you will have a good design direction and can work on designing an actual prototype.
• #19: You’ve come a long way. You finally have a prototype that you can test. The initial problem that was presented to you has come to fruition in some sort of interactive prototype that you can test with your users. Testing will validate your design decisions and if they solve the problem that was initially presented. When user testing is performed on prototypes, any issues with the design can be discovered and resolved before it is handed off to development. This is all quite a bit of work but it will ultimately save development resources and create a product that is user friendly.
• #20: The UX Designer should be able to communicate the changes in the design to their stakeholders, developers and others. This could be done via redlining (slide with example) A document handed off to developers to ensure that designs are made according to specifications. “Redline” refers to the literal guides, which are often red lines, within a document that communicate exact spacing, margin, etc. You could use InVision with the commenting feature or utilizing JIRA to create tickets for developers, though there is a bit more to it than that. However you go about it, your design needs to be clearly communicated so when it is handed off, the developer, stakeholder, or whomever understands what is happening.
• #21: A chunk of this process is research and it takes a lot of time to complete, especially if you are testing and interviewing since you have to work with others’ schedules. How can this fit in with an agile team? On the voice team, what I’ve found is that when features are broken up into much smaller pieces, like testing how to add an item to your cart vs how does the Kroger action holistically function, allows for smaller returns but over time the product gets tested without interruption to sprints.
• #22: As an example, when designing how the Kroger voice action will work on a Smart Display, we tested features weekly. The features include add to cart, remove from cart, search cart, and clipping coupons. We first had to consider what the major feature was makes this action function, which would be adding items to the cart. From there we could prioritize which other features to test. We took what we knew about how the voice product worked, guidelines of designing for smart display, and created a prototype. By receiving fresh and constant feedback on weekly tests, we could make small changes easily. Testing took up about one day with 4-5 users recruited internally with tests lasting 20-30 minutes. It would be ideal to get out to stores and test with users in their context. Though this is time consuming with travel and scheduling, it yields great results. If you are going to do something like this, it would be advantageous to plan as far ahead as possible so you don’t block your team from other work.
• #23: Questions?