Your New Awesome UI is Probably Wrong: Timeless UX Principles 3

Show notes: Tell Us Your Ecommerce Pain Points Check out some of Seth’s work. kodisagency.com seth@kodisagency.com Email us, we want to hear from you! podcast@sellry.com Sellry Transcript: Michael: Hello, folks. Welcome to eCommerce Q&A. This is the show where store owners, directors of eCommerce, eCommerce managers stay up-to-date on the latest tools, tech, and techniques in […]

July 31, 2017 18:56
ecommerceq&a
Download (MP3)

Show notes:

Tell Us Your Ecommerce Pain Points

Check out some of Seth’s work. kodisagency.com

seth@kodisagency.com

Email us, we want to hear from you! podcast@sellry.com

Sellry

Transcript:

Michael: Hello, folks. Welcome to eCommerce Q&A. This is the show where store owners, directors of eCommerce, eCommerce managers stay up-to-date on the latest tools, tech, and techniques in eCommerce. I’m your host, Michael Bower, and I am joined by Seth Erickson of Kodis Agency. You might recognize Seth from our previous episode on customer experience and this is third episode of a little miniseries that we’re doing on timeless UX principles. With Seth being a master of those things, we thought it would be a fitting conclusion. Seth, welcome.

Seth: Thank you for having me.

Michael: Very quickly, before we go into stuff, I want to talk about the quick review of parts one and two. In the first episode, we talked about some general truths about UX and how it relates to other disciplines like conversation rate optimization and customer experience. We also laid out the fact that what we’re talking about in this little mini series are the things that hopefully are evergreen content, things that are gonna be always true about UX. Not so much discussion of trends, although sometimes trends illustrate principles. And then we talked about two specific principles, the first being the idea of white space or don’t make me think, clarifying things, simplifying paths, making the decisions that people need to make obvious, and reducing visual clutter, and the second being around copy and readability. Takeaway on that one was how to make your sales copy readable, how to make your calls to action very comprehensible, and lowering that friction for people to take action based on the text, not only the visuals on your website.

Today, we’re gonna talk about two great mistakes, and by great, and you can take that two ways. Obviously, like big mistakes to make, but you can also take it the other way, where if you know about these common mistakes, you can take an opposite path and really gain a huge amount of benefit. So, that’s where Seth and I are gonna riff on this a little bit. Two different principles, one that’s his favorite, one that’s my favorite.

I want to talk about standardization and the idea being that your new awesome UI is probably, but not necessarily wrong. People come to us and they say, “Oh. I have to differentiate myself from my competition, which means I have to have a website that looks different from every other website in the word. It’s gotta look custom and it’s gotta look amazing.” To which we say, “Sounds great, but do you understand that the differences may be … You might want to take that a different direction than you think.”

Seth, where do you come into this discussion, when somebody’s saying, “I want my website to be different.”

Seth: It depends on if it’s right for the client, so from our perspective. So, to give you an example, we did some work for a Jewish Synagogue called to Sixth & I and they come from a very conservative background and they look at a lot of other sites that were Jewish Synagogue sites and they said, “We want to do something different”. And when we looked and took, did our own research into their area, it was very obvious that there was too much sameness, right? Everything was the same and, therefore, if they wanted to stand out, they needed to do something different. It was almost a prerequisite of the project. Whereas, just trying to stand out for the sake of standing out doesn’t really make sense. It needs to be driven by a purpose. It’s my thoughts around it.

Michael: So, where I take that is, if you’re in an industry where everybody’s trying to be whizz bang, then you need to be a little bit more mainstream and emphasize

Seth: Yeah.

Michael: Other than the craziness of your navigation.

Seth: Yeah. I think if everything is the same and your industry, then it makes sense to try to do something different. But if everybody, like you said, is trying to be the next big thing … Sometimes the tried and true methods work the best.

Michael: Right. While everybody’s shooting off rockets and going all different directions and stuff you just stay with patterns that make sense in your UX, with design that is usable and familiar. And then everybody else can do the crazy stuff and confuse their users. And people will want to come to you because what you present is works and it makes sense. What the word I’m looking for? It’s not foreign, flashy.

Seth: But it lacks substance when you have too much of that.

Michael: One of my clients famously says, “We’re not building space shuttles here. We’re selling blank” and I won’t tell you what they’re selling, but it’s like, “We’re selling a product” and so, people, in order for them to be willing to give up closely, personal information like payment details, we want to make sure that they feel comfortable with doing that. This is not an art gallery where we want to shock them or amaze them so much as we want them to buy something.

Seth: Yeah. Be comfortable. Trust. Build trust. Yeah. All of that stuff. Definitely.

Michael: I think this is a bit sad sometimes for super designy people, because it’s like they really want to do something new and different and innovative and who doesn’t want to do that, right? But at the end of the day, if your conversion rate is going to go down because you made a particular design decision, maybe there’s a way you can get the both of best worlds, but this is a difficult balance to. So, there’s three areas where we see standardization being an important consideration. First is in layout, which we would define as how the user orients himself in the site. So, if you think of your physical environment, that where the walls are, where’s the TV, how small is the room? That’s the metaphor to think about. So, on the website, is this a full screen layout, is it a fixed boundary layout, how big are the images and the texts on the screen relative to the size of your screen? That’d be layout.

And then navigation, how we’re moving through the site? And then finally calls to action, how people are going to take action based on what they’re doing on the site. Seth, do you advocate a particular level of innovation versus standardization for things like layout, navigation, calls to action?

Seth: That’s an interesting question. We, what I advocate for and it’s something that I’ve taught a lot of the designers that have worked under me is the idea of flow. It’s something I’ve never really heard other people talk about. Maybe they do. Maybe they call it something else. I call it flow. And, to me, what flow is, is if I look at a site, the site should be designed in such a way that guides my vision and allows my vision to move around the site smoothly. And, in most cases, I’m trying to draw the eye down and I want to have pieces that connect together in such a way that it becomes a fluid experience. You and I had talked recently about all these symmetrical websites and I kind of ranting about how I’m so tired of the symmetrical websites because they’re safe, right? And nobody’s really trying anything at this point. Everybody’s just making the square and-

Michael: Could I just say … could I just jump in and say that almost single Shopify website does this?

Seth: Yeah.

Michael: Very, very symmetrical. Very, very boring visually.

Seth: Yeah. And we don’t always use this principle, but it’s one that we’ve used for a long time. We want to guide them visually in a way that says, “Oo, I’m looking here.” And “Oh, I want to look over here.” And, “Oh, now I want to look over here.” But not in a way that’s like they’ve had too much coffee, right? It’s jittery and bouncing and your eyes just going 20 different directions at once. To do that, you almost have to create more of an asymmetrical design and to do that, to get people to look around and see things and have white space and supporting that. That’s one, for us, that’s a huge thing that we apply a lot. But then sometimes we have clients who say, “This is our style guide. You have to do stuff this way.” Right? So we do it that way and try to improve it.

Something that I wanted to mention on your point about being crazy and innovating is, I think innovation really only works when it’s seamless, right? When you don’t really have to think about the jump from the old way to the new way, right? You used the example of the iPhone. We had push button phones and then all the sudden we have flat glass and we could just touch the flat glass and we had the visual representation of what we already knew. That was a seamless transition. Nobody had to learn how to use the phone again, right?

But then if you do something crazy and now it’s like, “I need to learn how to use a phone, what?” That doesn’t push things forward for people. I think Apple’s been very good about creating more seamless transitions in their innovation. It’s something that I don’t think people realize. They’re selling those air buds or whatever the-

Michael: AirPods.

Seth: Like hotcakes and all they did was they took something that people are already familiar with and they took the cords off, right? That was a marginal innovation but people were able to transition into that quickly. They didn’t have to learn something new to be able to use it. I think, from an innovation standpoint, like with shopping carts and whatnot, they are probably things that could be done that would … where people don’t have to think about the process as much or you could make it more seamless. I’m sure you guys probably work on that on a regular basis. That’s where I think breaking something works. If you can make it almost like magic, right?

Michael: If you think about the hamburger button, the three lines that everybody’s familiar with; that’s an innovation, right? People now know what that button means. I remember when it first came out, I thought, “Man, that looks really dumb.” And then very quickly, I realized, “Oh, that’s great”. It saves a bunch of space. It’s not an amazing icon or anything but it serves a very useful, functional purpose. Now everybody knows what it means and you don’t have to put menu underneath it, although you can if you want.

Maybe one takeaway is that we would definitely advocate starting with common UR patterns. Let the crazy design world innovate new website patterns and let Twitter spend millions of dollars teaching people what new button types mean. You don’t, as an eCommerce store, probably not a good use of your fund when you might actually confusing people if you’re coming up with a totally different navigation, let’s say.

Calls to action would be another area where you want to explain, like we talked about in the last show, you want your calls to action to be incredibly easy to understand. It should be like falling off a log to know, “Oh, this is a button. This is a link. I can click this.” That’s the whole idea there.

Seth, I want to talk about another principle. This is one that you said is your … the biggest one where you see mistakes being made in UX.

Seth: Yeah. Empathy. I mentioned earlier when I started. I started in UX in 2004 as I said Flash was going strong then. Every website was Flash. But people spent more time thinking about themselves and then they did about their in user. That is still a problem today. I think it’s part of the human condition. It’s that selfishness, that we … You see it with startups a lot. They come up with ideas that are great and then nobody wants it, because the idea was great for them. We worked with a startup that was doing fantasy games and it was a year and a half into the project before somebody asked the question, “Are the games that we’re providing to people fun?” That was a fundamental question that should have been answered before the project started and investments were made and other things happened.

It’s the biggest thing to be, because at the end of the day, it always comes back to people, right? People are always using your app, your site, your whatever. If you don’t understand those people or care to understand those people, then things tend to backfire in your face. That’s my quick two cents on that.

Michael: What do you think the solution is there? The empathetic problem?

Seth: I don’t know. I think it’s something that can be learned. In my mind, I can think of two people that do UX for Kodis and one of them is very logical, very ordered. The other is very … has a high emotional quotient. Both of them have learned UX. I think the logical, order person, it took a lot of stop putting yourself into the situation. Stop using yourself as the profile, having those conversations and starting to say, “You need to turn this thing around and try to look at it from the other side.” It really is having that understanding, but I don’t think it’s hard if you care about people, if you care about what you’re doing. But if you don’t or you’re just trying to fill a role, then I think it becomes incredibly difficult.

Michael: Let’s try and bring this all together. I almost said, “Let’s get real.” This is one of those shows where I feel like it’s like there are big picture, super important things that are constantly being violated on most websites. Let’s maybe, maybe we could say a few of our favorite things that we see. I’ll talk about some of my favorites. One thing I love to see is when the user experience of a website is very targeted. This would have to do with another area called positioning, but when you pull all these things together, what you’re really doing is you’re communicating to a user, “Hey, we understand who you are. We understand what your problem is and we’re giving you this solution to that problem.” And we’re making this … It’s a risky thing to do that, right? You’re not being vague or ambiguous. You’re not saying, “It depends.” You’re saying, “We offer this and we think that this is going to help you and here’s why.”

Seth: Yeah.

Michael: It’s a persuasive statement.

Seth: It’s sets you up as the expert, because you focused on this one thing. You’re not the smorgasbord of problem solving. You are the guys who do this one thing in this area and it helps build trust. I think it makes people more secure, if they have that pain. Yeah, definitely.

Michael: We’re actually putting together a project right now where we help companies drop most of their product catalog that’s not working. Then just focus on the core catalog, 80% on this, no, put 80% of the emphasis on the 20% that’s going to create the results. 80, 20. Then take the top product or products and do a few different things to experiment with dialing in the user experience all the way. We’ve seen that be a really interesting exercise to see what kind of conversion rate increase you get when you go with the full vertically focused funnel aligned with one particular product line. It goes beyond just doing a micro site. What’s one of your favorite things that you’ve seen? Something that makes you relieved or excited when you see it?

Seth: This is … It’s funny that … There’s a bunch of things. I like it when people start to use animation more to improve their UX. Drawing the user’s eye to something that’s important because it’s animated as opposed to making it as big as possible or bright pink. You can be much more subtle. It doesn’t … Animation is one of those things where a little bit goes a long ways. It doesn’t require things to be flying across the page and whatnot. I like it when you can engage the user on a different level as opposed to just making everything static and flat. HTML5 is starting to make that a little bit more possible and more and more I’m seeing people doing just that. It’s just more engaging.

Michael: How can folks who want to learn more about UX, design centered thinking or digital transformation, which we hardly touched on, but it’s all about doing innovation in a smart way, how can they get in touch with you, Seth?

Seth: Well, we can … they can reach us through the website. It’s kodisagency.com. K-O-D-I-S agency.com. You can always email me at seth@kodisagency. I like to get lots of questions whenever people have them. I think that’s the best way.

Michael: Well, thanks everybody for bearing with us as we’ve slowly rolled out this little mini series and we look forward to answering any questions that you have about UX. This is one of our favorite things to be doing and I think you can look at our client list and see that we take a lot of pains to really help people come out with amazing UX. We’re not trying to get you to pay us to do this. We just would like to take a look at your problems and your questions and maybe give you some insights, if that would help. You can pay us if you want to, but you get the idea.

Then there’s one other thing we’re wanting to do, speaking of empathic, we want to get your input about what we should be talking about on the show, what problems have you experiencing. There’s a little survey we put together. It’s at sellry.co. S-E-L-L-R-Y.com\survey. You go there and fill out the form, we’ll be sure to send you back the results, so you can get a feel of what other store owners and operators are experiencing as well in terms of pain points. You can also email us at podcast@sellry.com, if you just have a quick question. And otherwise, the show notes are at ecommerceqa.com and we’ll look forward to dialing in with you next week. Thanks everybody. Thanks, Seth.

Seth: Thank you.