The Marketing Unleashed Podcast – What is the difference between UX and UI design and why are they important in digital asset development?
Joel: All right, and welcome to today’s show. And thanks for listening to the Marketing Unleashed podcast. This is Joel, your host. I’m here with Jamie and Nathan. And in this show we’re going to be talking today about what does UX and UI design mean and why are those two important when you’re developing a website or a mobile app or some type of digital asset.
So, Nathan, Jamie, I guess I’ll throw it off to you. Is there a difference between UX design and UI design? And maybe we should actually define those acronyms or whatever you want to call them.
Nathan: UX is user experience and UI is user interface. And the way I usually describe them is UX is more of a narrative. So if I’m a user of your digital product, this is the process or the experience that I have, that we want you to have, when you come to our website or come to our app. This is the experience. So we kind of do that through narratives, developing out user types, and the kind of activities that they might go through when they’re working on your website or app.
UI is user interface design, is more of an analytical sort of graphic design type occupation where you’re building elements, essentially. And the two are related. So, usually UX is something like a narrative that’s created early in the discovery process of a project. And then that’s handed off to the UI and they say, “This user’s going to come to the website and do X, Y, and Z.” And then UI needs to go through and actually build all those elements. So they need to build what’s the design palette, so, what are the colors, what are the fonts, what are the kind of videos, animations, those types of things that we’re going to use to create this user experience. So that’s how I kind of define the two.
Joel: All right. Jamie, you have a different definition?
Jamie: No, that’s pretty much correct. I mean, a lot to go with the user interface part of it. I mean, that’s kind of where I’m more familiar because those are all the visuals. That’s all of the eye candy, that’s everything that a visual designer needs to do.
So when you’re working on the science behind the design, which is the user experience, you figure out everything that needs to be done, whether it be developing a user persona or the strategies and you’re figuring out how a person is going to work through the website. And I’ll start developing the user interface, the buttons, and any way you’re going to interact with the website or the app, and I’ll start working on that. So, yeah.
Joel: Okay. Now, as far as the user experience, it’s important for the user to be able to navigate the site easily, right?
Jamie: Mm-hmm (affirmative).
Joel: And really make that a smooth interaction between the brand the user.
Jamie: Right.
Joel: Now, how important is the navigation in that, Nathan?
Nathan: Well, one of the things that we like to say… I’m not a graphic design person, but one of the rules that we like to use whenever we’re designing a website is the three clicks or less rule. So, we find that if you have to click more than three times to find the information that you’re looking for once you’ve reached the website, that is a poor user experience.
So, some of the things that might drive that would be maybe you’ve got too many options in your navigation so you don’t know where to go to. “Where do I find these documents that I’m looking for?” Do you have the products properly organized so people can click through and find… “I just want information on this type of product. I don’t want everything. I just want to see what I’m looking for.” And those kinds of thought processes will help to develop websites, and those are based on a narrative. So you kind of put yourself in the position of the user and you say, “How would I navigate to this information? If I see these cues, then that leads me in this direction. And that gets me to, ultimately, the information I want or to make a purchase,” et cetera.
If your navigation’s too convoluted and you have too many choices, what that winds up doing is people start searching, they click two or three times, they say they’re not finding it, and then they leave. They go somewhere else.
Jamie: Yeah. So, on Amazon, that’s one of those sites where I feel like you have no choice except to search for exactly what you’re looking for.
Joel: Right. They’re not easily found just through browsing.
Jamie: Right. And even places like Target and Walmart, that’s even gotten to the point where you have to put in a search term now. You can’t just start browsing.
Joel: Unless you want to spend an hour trying to find it.
Jamie: Right.
Joel: Yeah.
Nathan: Well, and that’s kind of weird too because you never know how different people from different places might organize things.
Jamie: Right.
Nathan: So if you go to Lowe’s and you’re looking for building products-
Jamie: Yes.
Nathan: … well, maybe I’m trying to build a deck, but that’s under landscape-
Jamie: Yeah. Same thing.
Nathan: … products. And so I’m looking in one place, it’s not there. I have to go somewhere else. So it’s kind of tricky to come up with the right balance there so that you get people to the right place. And that’s where sort of the user experience stories happen.
So if you look and you say most of the people are, say, painting professionals and they go to Lowe’s, then they’re going to be looking in the paint section. How do we get them to the right place? And then the user interface design builds those elements to smoothly direct them to the right place, and presents the information that they’re looking for. I look at… UI is more like… Every single element of the website is part of UI. User experience is more of the narrative of how you walk through these websites.
Joel: Right. Now, Jamie, kind of talk to us about the interface as far as the importance of making sure that the website is easy to read, easy to visually dissect. Not so much the experience, how they go from click one to click three to find the information they want, but more the aesthetics of the site.
Jamie: Right. So, there’s a science behind where your eye lands whenever you look at a page and how your eye travels throughout the website. Where do you want the user to look first? That’s important. And then also, when you’re thinking about call to action, where exactly do you want them to be clicking first? Where should that be landing on the page? And also, there’s always that old adage, the above-the-fold thing, which is kind of outdated now because everybody thinks that scrolling is a bad thing, which is kind of not so bad now-
Joel: Right.
Jamie: … because everybody scrolls. But there was… For so long, all of our clients were still like, “Oh, we want everything to be right there. We want to see that first. We don’t want people to do any scrolling,” and all of that.
Joel: Well, and especially now with the mobile end of it-
Jamie: Right.
Joel: … I mean, it’s almost impossible to have a website where you don’t have to scroll on a mobile device.
Jamie: Right. And it’s not that big a deal.
Joel: Right. Now, okay. So, obviously the color scheme, the images, the buttons, the text style. I mean, you don’t want to be using weird fonts on a website or app.
Jamie: Right. It’s got to be easily readable and simple. I mean-
Joel: You don’t want a red background with black font, right?
Jamie: Mm-hmm (affirmative).
Joel: I mean, there’s definitely no-nos that you don’t want to do.
Jamie: Right. And it’s not just aesthetics. I mean, that goes back to design 101. I mean, there’s a reason why simple works, and it’s all about usability and accessibility too. You’ve got to think about people with disabilities and things like that. Those are people that are using your website as well.
Joel: Right, yeah. With visual problems or anything. Yeah.
Jamie: Mm-hmm (affirmative). So you got to think about contrast and no clutter. And I mean that’s why Apple’s website is… That works and they’ve kept it simple for so many years.
Joel: Yeah, very minimalist.
Jamie: Minimal.
Joel: Yeah.
Jamie: It works.
Joel: Yup. Now, as far as the importance on focusing on them, I would say also, from a marketing perspective, not experience and design, you definitely want the user to feel like they’re accomplishing what they’ve set out to do on your website, whether if it’s find the information or find the product, whatever it may be. Kind of going back to what Nathan said, within, hopefully, three clicks or less.
And then also, you have to remember every single touchpoint. I mean, whenever somebody visits your website, it’s a touchpoint, and you want all those touchpoints to be positive experiences. So, from a marketing perspective, the UX and the UI design is extremely important and it has to go along with pretty much anything and everything else that you think of whenever you’re trying to sell your products to consumers.
Jamie: Yeah, I agree.
Joel: So, kind of, let’s go over… Nathan, I’ll have you tackle the experience and then I’ll have Jamie tackle the interface here. But what are some of the dos and don’ts? So, Nathan, go ahead and go first.
Nathan: Well, really, for the user experience, we try not to spread things out too thin. So, if you’re a technician and you’re coming to the website, we don’t need to have 30 or 40 different user stories of how a technician comes and finds a document on your website. So we like to create the stories and make sure that they’re concise and imagine these users, and we want to hit sort of all of the major pathways that people may come through your website or your app and how they might use it.
But I think the problem is, especially when you start dealing with people who are in the industry that you’re trying to develop an asset for, that they’ve got a thousand ideas of how someone might use it, when in reality you can boil those down to maybe four or five or six different pathways, and then you look for edge cases. So, something that’s unique about a certain type of user, then you would sort of include that as a separate reference. “Oh, we need to remember that this one type of technician from the aerospace industry is going to be looking for this one specific type, so we need to make sure that they can find that.” So, really, whenever we’re doing UX design, we’re trying to figure out in a concise way how our users are going to get the information, and not try to test against a thousand different user types that are all virtually similar.
Joel: Okay. And Jamie, how about some of the dos and don’ts? I think we kind of mentioned just a couple of them, but go in some detail here.
Jamie: So, I mean, we talked about not make… Well, so let’s talk about mobile. I mean, if we’re talking about a simple login screen, I mean, it’s got to be simple. You don’t want a lot of clutter and imagery. It’s got to be a simple username, password, login, and a nice, big, easy-to-touch button. It can’t be really small. You can’t be like, “Oh my God, I can’t even find the submit button or the login button.” It’s got to be easy to touch, easy to use.
Joel: Yeah. Or you have to zoom in on your phone-
Jamie: Right.
Joel: … which kind of gets irritating too.
Jamie: Right. A few clicks.
Nathan: That brings up a good point. Mobile is a little bit different than your average website development because you have things like distances between buttons. So you’ve got to have buttons-
Jamie: Exactly.
Nathan: … of a certain size so that they’re not close enough to each other where you’re accidentally going to hit the wrong button. [crosstalk 00:13:33]-
Jamie: Those guys with big fingers.
Nathan: [crosstalk 00:00:13:33].
Jamie: Yeah.
Nathan: So, you’ve got to [inaudible 00:13:38]. Also, what Jamie was saying about a form, whenever you’re designing a form, on a mobile form, you want the form to be as short as possible. Filling out an elaborate registration form on a mobile device is a huge pain.
Jamie: Yup.
Nathan: So, what you can do is just allow the user to give the basic information on the registration form and then give them a user page so that they can go in and give you more information later. Don’t require them to fill out name, address, phone number, city, state, zip and all of that information when they’re registering because that’s… People are just going to give up and they’re not going to follow through that process on a mobile [crosstalk 00:14:23].
Jamie: Right. And just kind of thinking about the language that you’re using, thinking about if the words okay or versus submit is more relevant to what you’re working with. So, you got to think about the language that you’re using as well.
Joel: Right.
Nathan: A lot of people are guilty in design of putting, “Read more,” on buttons and that drives me crazy as a developer, because the words, “Read more,” give you no value for search engine optimization. It would be much better if all of your links had something descriptive, like “Read more about this particular part.” Well, now you’ve got a part name in the link. That’s going to help you. [crosstalk 00:15:13]
Jamie: Good point. And sometimes I don’t like it when a button says, “Buy now,” because for some reason I feel like, what does that mean? If I click it-
Nathan: It forces me to buy now.
Joel: Right. Especially if you already have an account and you happen to be logged in-
Jamie: Right.
Joel: … are you going to be able to verify it?
Jamie: Yeah.
Nathan: Right. Do you click that button and now instantly you’ve already [crosstalk 00:15:32]-
Jamie: Yeah, instantly to my cart? [inaudible 00:15:33]
Joel: It’s like the Amazon buttons that you can keep in your house.
Jamie: Right, yeah.
Joel: If you just accidentally knock up against it… Children were ordering things.
Jamie: Yeah, so you got to think about your language as well.
Joel: Yeah. Now, talking more about the mobile devices. Okay now, Nathan, it used to be when you wanted a mobile website, you had to almost create a separate site. It would be… For us, our website’s yellowdogllc.com, shameless plug, but it would be like mobile.yellowdogllc.com.
Jamie: Oh yeah, I forgot about that.
Joel: Now, today, most website design, especially in WordPress, is responsive. Now, how does the, I guess, interface, more so than the experience, play into the mobile side of it, if they’re automatically responsive?
Nathan: Well, so the interface is built using styles in a lot of cases. And so what it will do is it will look at the size of the viewport that you have. So, if your screen is so large or if your screen is small, like on a mobile phone, then it will adjust automatically based on the styles that you’ve created, the sizing of the buttons.
So, for example, if you’re on a desktop, you don’t want a tiny little button that only takes up a little bit of screen real estate, which is what you might want on a mobile device because you don’t have a lot of room, so you don’t want a button that’s enormous. You just want it to be thumb size. Whereas on a desktop, you’ve got a bunch of thumb-sized buttons, that looks kind of weirdly small.
So you want to increase those buttons. And you use a style sheet combined with the measurements of the viewport to determine how these assets are going to grow and shrink. And some cases they’re hidden altogether.
So, on a mobile device, one thing you have to take into consideration is the amount of data that gets transferred. So if you have a giant slideshow with huge graphics on a mobile version of the website, one thing that we commonly do is we hide that on a mobile device or we replace it with a single image. Instead of loading six or seven images for a slideshow, we’ll load one image. And that way it’s a much faster load time. And on a mobile device, it’s kind of weird when you have a lot of motion, like these sliders going by and everything. People are more used to that on a desktop than they are on mobile. It kind of looks very busy, and it sort of hurts your eyes to look at it.
Jamie: Yeah, I don’t like it.
Nathan: So, a lot of times we’ll hide that kind of motion or animation and just replace it with something simple, just so that it’s easier and quicker to download.
Joel: Okay. Now, Jamie, now we’ve been talking about websites here, but let’s talk a little bit about apps. Now, whenever we’re designing an app from the the interface perspective, compared to the experience, what are important for the apps as far as interface is concerned?
Jamie: I mean, you got to consider the same things. I mean, you’ve got to think about the size of the screen, you’ve got to think about simplicity, you’ve got to think about what… First of all, who is your user, and what are the first things that the user is going to be doing? Ultimately, what is the goal? What are the fewest number of clicks that you need them to do to get to the goal. I mean, things like that. And simple icons, brandability, things like that.
Joel: Well, because for the most part, apps are simpler than a full website.
Jamie: Yeah.
Joel: Yeah. Now-
Jamie: Yeah, you’ve got to simplify everything.
Joel: Right. Now, you mentioned the size of the phone. Now, with Apple, that’s easy because each generation is a certain size. Well, with Google and Android phones, they’re…. I mean, the sizes are numerous.
Jamie: Right.
Joel: So, how would you go about making sure that the size is going to fit for the different sizes?
Jamie: Well-
Nathan: I can cover that.
Jamie: Yeah.
Joel: Yeah, go ahead, Nathan.
Nathan: And so, they do that by the same sort of process that I was describing before. So you look at the view… As a designer, you can programmatically get the viewport size and adjust the elements that you’re seeing based on the viewport size. So if you’ve got a certain width of your screen, then you can make a button 20% of that width or something. So if the screen gets bigger then the button gets bigger, but it’s always kind of the [inaudible 00:20:45]-
Joel: Oh. Hey, Nathan, you cut-
Nathan: … building those interfaces for phones.
Joel: Nathan-
Nathan: Yes.
Joel: … you cut out there. Can you repeat the last two or three sentences?
Jamie: Yeah.
Nathan: Okay. I’m sorry. I didn’t know. It sounded okay from my end, but no, so what it does is it grows and shrinks the assets, but they’re always in proportion. So you might have a button that’s 20% of your screen width and that button is going to stay 20% even though you’ve got a bigger screen, or if you get a smaller screen, it’s still going to be 20% of your screen size. And usually what we’ll do is set a minimum. So once you get to a certain size, we’re not going to get any smaller because we don’t want buttons that are tiny. So we have to look at things like that. And that’s what I mean by sort of edge cases and design. So you’re going to get to a certain point where we can’t make this any smaller. If we make it smaller then it’s no longer usable.
So, we kind of deal with the design by looking at what’s the maximum and minimum of these screen resolutions, and then we set them as proportions so that they’ll always be a little bit larger if you’ve got a bigger phone, a little bit smaller if you’ve got a smaller phone screen. And that’s usually how we deal with everything. Nothing is static.
In the old days you would go in and you’d say, “I want a button right here and it’s going to be 300 pixels wide,” and you would almost never do that now. Everything is allowed to grow and shrink based on the size of your screen.
Joel: Okay.
Nathan: So that’s typically how we handle that. And believe me, it’s sort of an ongoing battle with people that develop apps as to how, sort of, best to make those adjustments.
But it’s a constant fight. And they’re always coming out with new phones, different screen resolutions, different style elements. One of the things that kind of drives me crazy is some phone types have different assets available. So you might have a different scroller on one phone than you do on another phone. You might have something that when you click a link on one phone, it sort of gives you a little vibration feedback in your phone, whereas another phone, it won’t do that. So you have to kind of look at a lot of different phone types and devices to determine how things are going to react to user actions.
Joel: All right. Well, hey, do either of you have any other advice or anything to talk about as far as UI and UX design?
Jamie: Well, I mean it’s an exciting, newer field. I mean, several years ago this was not really something that everybody was talking about. I mean, when I was in school, I mean, I had never even heard of it. It wasn’t even something that you could study, so I mean-
Joel: Yeah, it was basically slap your information on a website and call it a day.
Jamie: Right. So, I mean, this is exciting when we’re talking about developing apps and websites. This is something that you have to consider, is the user experience now. And it’s doing the research and studying the user and developing the strategy and the science behind the design is… It’s fun.
Joel: Right. And Nathan, you talked about it, but it’s really, really important to know who the audience is. You almost want to create an avatar of sorts. You want that perfect end-user customer that’s going to be looking at your website and so you can picture them and know exactly what they’re looking for, how they’d be looking for it. We talked about Amazon. You have to search for things. Well, Amazon knows that we’re going to search for the product that we need or the product that we’re looking for. So, for them, the whole, browse to find your product thing isn’t a big deal. But they still show the trendy products, the hot products, the new ones, on the homepage.
Jamie: Yeah. They get you salivating.
Nathan: Well, and they also use other things, like they look at your history and they say, “Well, we’re going to show you stuff that you’ve looked at before on the home screen so you don’t even have to navigate or search that thing that you looked at last week. We know you’ve been thinking about buying it because you didn’t buy it last time, so we’re going to keep showing it to you on the homepage every time you come back for the next month.”
Jamie: Oh yeah. Yup. Mm-hmm (affirmative).
Nathan: And then when they give up, or depending on if you looked at something else.
Joel: Yeah, yeah.
Jamie: They’re very good at that.
Joel: Yeah. And they send me emails and all kinds of stuff. That gets annoying.
Jamie: “You still looking at those boots, Jamie?”
Joel: Yeah.
Jamie: “Yeah, I am.”
Joel: Yeah, exactly. Yeah. The retargeting stuff is… It’s fun sometimes because sometimes I just click on random news links and something just intrigued me. And then I get into this trap of, I don’t know, women’s undergarments, and I’m like, “I don’t need this.”
Nathan: [crosstalk 00:25:49] searches [crosstalk 00:25:49], Joel.
Joel: I’m not searching for anything like that, but I’ll read this headline on an article of a blog or of a website that kind of caters to more of a women’s niche. And then all of a sudden Amazon thinks I’m a woman, or somebody thinks I’m a woman, I don’t know, because I get retargeted for all kinds of weird things I don’t need.
Jamie: Oh yeah. It’s like when you’re researching stuff for here, like when I was doing car parts for [crosstalk 00:26:17].
Joel: Yeah, it could be that, yeah.
Jamie: And all of a sudden it’s like, oh great, mufflers and drive shafts and all this stuff. And I’m like, “All right.”
Joel: Yeah. It’s all kinds of stuff. I mean it just [crosstalk 00:26:29] or whenever I’m just randomly at home, I’m scrolling through Facebook and an article just kind of piques my interest and I decide to click on it, and all of a sudden I’m the consumer of whoever they’re targeting.
Nathan: Right.
Jamie: Yep.
Nathan: Well, and that’s something… That kind of touches a little bit on something we didn’t really cover, which is, in UX design, we have several tools to determine the user experiences. So we’ll do things like have direct interviews with your customers or distributors and just talk to them about how they find your products now, how to make things easier for them when they’re looking for things. Are they looking for technical specifications or are they looking for more of the general description just so they know they’ve got the right thing. They don’t need to know every bit of wattage or spacing or anything that a particular product might have. And so, we talk to them directly.
We also use things like online surveys, where we’ll email, say, a list of people who’ve bought in the past year and we’re redesigning this website, so we want to talk to those people who are most recent customers and learn about their experience, what they liked, what they didn’t like. But there’s a lot of different ways that you can approach the UX design.
And my favorite one is just to kind of work with the people. Get in touch with the customers, get in touch with the distributors. Because a lot of times if you work with the company itself, they don’t always know best how their users are finding their products, and that maybe part of their marketing problem is they know all the terms, they know all the technical stuff, and that’s what they deal with on a daily basis, so when they would go to look for a product, that’s what they look for. But then if you ask some of the customers, they say, “Oh no, I don’t really know anything about that. All I know is I like the color of this one,” or, “I like the brand name,” or something like that. And so you can’t always just follow the information from one group or another. You’ve got to actually ask the people who are buying the product or consuming the information.
Jamie: Right.
Joel: Right. Now-
Nathan: But there’s a lot of techniques to do that, not just the ones I mentioned. Obviously there’s a lot more.
Joel: Right. Now, Jamie, whenever we dive into a new project, when we’re designing a website or an app, what’s some of the first steps that you take in thinking of the interface or starting to design it?
Jamie: Ooh. I mean, I start looking at competitors.
Joel: Right.
Nathan: [crosstalk 00:29:03] color schemes, looking at the color palette that’s available, or developing one. A lot of times they don’t even have them so you’ve got to build your own, based on maybe a logo or something that they’ve already done.
Jamie: Well, yeah. And a lot of times it’ll already be established. I mean, if we’re doing the website, that’ll already be established. But, I mean-
Joel: Well, sometimes it’s only established shortly before-
Jamie: Yeah.
Joel: … because we do it.
Jamie: Yeah.
Joel: Because we establish it for them. But yeah.
Jamie: Right, yeah.
Nathan: And sometimes they come in and they ask you to redo everything. They want a new logo and a new color scheme-
Jamie: Oh, yeah.
Nathan: … new design, from the ground up. From my perspective, those probably would be more work but more interesting, because then you get to sort of craft the message from beginning to end, as opposed to jumping in after somebody already decided to use a horrible orange color or something for the logo-
Jamie: Right.
Nathan: … and now you’ve got to deal with that on all the assets.
Jamie: Right. And that’s always fun because then you… I mean, color is always fun. So then you get to start thinking about the psychology of color and what does this color evoke and what does this mean and, do I want to [crosstalk 00:30:15]-
Nathan: There’s a lot of psychology involved-
Jamie: Oh, yeah.
Nathan: … isn’t there, in the design process?
Jamie: Oh, yeah.
Nathan: People use it for good and for evil. They use your psychology against you to try to get you to go somewhere. They want to show you a product, we want to market you and they’ll use tricks to get you to go where they want you to go.
Jamie: Mm-hmm (affirmative).
Joel: Well, orange is hunger, right?
Jamie: And red.
Joel: Oh, red’s hunger?
Jamie: Yeah.
Joel: Oh, okay.
Jamie: Red and yellow is hunger, I think.
Nathan: I like greens and dark blues, navy blues. Very calming. Green for money.
Jamie: Well, that… And yeah, yeah. And blue evokes trust.
Joel: Yeah, green for money? Yeah.
Nathan: Yeah.
Jamie: Yeah.
Joel: Yeah, great. I like that, Nathan, green for money.
Nathan: That’s right.
Joel: Yeah.
Jamie: And that’s also earthy and environmental.
Joel: Does green symbolize prosperity?
Jamie: That too, I think.
Joel: Does it? Okay. That’d be interesting to know. Yeah. Psychology’s in the user interface. That’s always fun to do, so… All right, well, hey, if you guys have anything else, now’s the time to say it. Otherwise we’ll move on.
Nathan: I think that covered it.
Joel: All right, cool. All right. Well, hey, we’ll be… Well, thank you both for joining me and we’ll be right back with this week’s can’t let it go.