Timeless UX Principles Part 1 of 3: Whitespace

eCommerce Q&A

If you want to talk to us, feel free to call us at (866-873-5579) or email us at [e-mail].

Michael Bower: Hello folks, and welcome to eCommerce QA. This is the podcast where store owners, directors of eCommerce and eCommerce managers can stay up-to-date on the latest tools and technologies in eCommerce. I’ll be joined on the show by my colleague and partner in crime Dillon Holst. Our goal is to handle one or two questions per episode. You can check us out on the web at ecommerceqa.tv. There you’ll be able to get in touch, ask us questions and just generally participate.

Dillon Holst: What’s going on ladies and gentlemen? I am Dillon Holst and today I am joined by Michael Bower of Sellry Commerce. Today we’re going to be talking about UX designed specifically for e-commerce websites. So Michael, how are you?

Michael Bower: I’m good Dillon, how about you?

Dillon Holst: Doing very well. I’m excited to be here today and talk about something that’s relatively interesting, but I think often overlooked in the grand scheme of things in the sense that UX can go a long way towards making people feel comfortable on your site and also making people feel comfortable spending money on your site.

Michael Bower: I find it interesting that you draw a distinction between those two, because it is two different things, but one has to lead into the other, which is the whole point. As we were broaching the topic here, I’d like to bring up another term in addition to UX.

Dillon Holst: Okay.

Michael Bower: First of all, I’m not sure if everyone’s familiar with the distinction between UI user interface and UX user experience.

Dillon Holst: Why don’t you give us the definition then?

Michael Bower: Okay, off the top. User interface refers to the presentation layer of your website, things that people actually see. User experience refers to how the user experiences the site, meaning what is the flow that they go through when using the pages, where are the friction points. It’s a very customer user focused activity, rather than just an aesthetic, oh that looks pretty.

Dillon Holst: Let’s think about this big picture. In terms of approaching your website and designing it for an optimal user experience, what should the goal be? What are the big things that we have to keep in mind?

Michael Bower: This leads me to maybe the other thing that I’d like to clarify, which is that there’s another term that we need to think about called “customer experience.” Customer experience refers to the total experience that a customer has across your whole brand, across all of your properties, across any point of intersection with your … When they call you on the phone, when they see you at pop up store. Customer experience is the grid, or the lens through which we need to see user experience and user experience is the lens through which we need to see user interface.

Maybe we can hit all of these at the same time, because it’s all really the goal to your point is to provide a satisfying purchasing experience with all the follow-up and all the preparation that goes into that. So everything from the first point of familiarity that a user … This is before they’re even a shopper … has of your brand, of your store, all the way through to when they’ve made multiple purchases, and they’re a raving fan and they’re always referring to you to other people.

Dillon Holst: I love that term “purchasing experience.” It kind of goes back to when we made the distinction between somebody’s ability to buy something on your website versus their ability to just enjoy being on your website. They’re both part of UX, but they are slightly different in how you approach … You have to think about both or else you’re missing one side of the coin essentially. Maybe you can give us some examples of some really basic UX principles that you’ve learned I guess through your time of helping people grow their eCommerce websites.

Michael Bower: For sure. Yeah. I am very opinionated about UX. That might strike some people as funny, because I’m not actually a great designer, but to my earlier point, UX is not just about aesthetics. There’s a lot of designers that are terrible at UX. I’m opinionated; it doesn’t mean I’m great, but here are some things that are really important to me and that I often talk to clients about.

First of all, there’s a very strong trend these days towards whitespace. In a similar way to the fact that I just introduced two pauses into our conversation a moment ago; it kind of slows you down a little bit. Makes you think about context. Maybe it gives a little bit more gravitas to my words. Ha ha. The website is kind of like a conversation. It’s a story you’re guiding someone through from one point to another the journey. When you have whitespace it’s like having punctuation or like having a little bridge in a song where it just shakes things up a bit.

Dillon Holst: When the web first started, and people started making websites to sell things on, there was this trend towards verticality. There were a lot of websites that were designed where they were making use of the full page, and you’d have to scroll all the way down to find information. Then for a while we started to see websites that were super horizontal. How does this work into what you’re saying in terms of there needing to be whitespace on your page? What does that look like?

Michael Bower: When we talk UX, trying to think about timeless principles, very cognizant of the fact that the trends in web design change year over year in the similar way that they do in the fashion industry. A year a half ago … This is 2016 right now, so late 2014; we were still seeing a lot of flat, flat, very flat design. That was the trend. That was following Microsoft’s release of Windows 8 that had the metro theme that had no shadows and no dimensionality. Apple followed suit with iOS 7 and things being really flat. Along with that came really narrow fonts, because now that we have retina screens we can render extremely narrow fonts. There was some backlash from that. So people started realizing A, don’t make everything completely flat, and B, don’t have fonts that are literally too narrow to read. So Google comes out with material design. You can see it’s the big players that are the trendsetters. These things are operating system UI and that influenced the entire realm of web design.

I’m not that interested in talking about things like Roboto, is a font you can use right now that will make your website look modern, because everybody else is using that. I’m more interested in talking about longer-term things. With whitespace, getting back to your question and thinking about readability and legibility, a satisfying purchasing experience as we talked about before the show, means different things to different audiences. If it’s a B2B purchasing experience, generally speaking, and this could depend on the industry, but the goal is to be able to find information very quickly and to make purchases with low friction. It has very little to do with the overall aesthetic. It probably also has very little to do with the price. On a B2B website you don’t want to see promotional banners that are telling you how you can save a few bucks. You want to know how you can save in bulk, things like that.

Dillon Holst: You’re making a really important distinction here between different kinds of industries and how UX looks different, how your user experience should change depending on what industry you’re in. Can you give us some examples of industries that you think would be better to use a more design oriented layout user experience, think maybe Apple or something like that, Apple’s website versus something like Amazon where it’s a marketplace and it’s more informational.

Michael Bower: You kind of lead into it right there. Usually brands need to focus on the aesthetic more because they technically speaking have less information. They have fewer products and they need to make a huge deal of those few products. Apple only has, for all practical purposes; they have maybe four or five product lines. You’re the biggest company in the world, or at least have been, Amazon sells every single product under the sun except for Apple products, and they need to cram a lot of information on there. I don’t think anybody goes to Amazon and goes, “Wow, this is such a beautiful website.”

There’s two things that go into that. Number one; Amazon is more about distribution than it is about the Amazon brand, or their brand is equivalent to the distribution of, you can get anything you want at Amazon. The focus is all on the things you want and how quickly you can get them. Amazon’s usability people are really [inaudible 00:08:49].

But getting back to your question and then I need to get back to your other question. Marketplaces, multi-brand retailers, folks like that, need to have a focus on usability and low friction. Whereas brands can and probably should introduce more interactive, immersive content, larger pictures, things like that. In fact, I would even go so far as to say that the extent to which you are emphasizing your brand has a direct correlation to how immersive and high-resolution, if you will, the whole experience needs to be.

Dillon Holst: Yeah. I think it’s interesting, I was thinking about buying a Mac Book, one of the new Mac Books the other day, and I was on Apple’s website. I was having not a difficult time but it was not easy to figure how to actually pre-order the product. Whereas when I go to Amazon I literally can find what I want to buy and purchase it within two minutes.

Michael Bower: Yeah, and that’s a long time right?

Dillon Holst: It is, but it’s interesting that the fact that it’s not that easy to purchase products on Apple.com is not going to stop people from purchasing products on Apple.com. It’s just not as important. The ease-of-use in terms of adding a product to the shopping cart and going through checkout is not necessarily the most important factor in terms of whether or not somebody’s going to go to that website and buy a product. It’s the brand, so therefore like you were saying, [inaudible 00:10:14] a product and the product line is what’s important for that particular … For Apple as a company.

Michael Bower: I would say, thinking of Apple, Apple doesn’t only sell online. If you never make it to their store, they don’t really care, because you’re going to go to one of their physical stores, or you’re going to want to go to WWDC or something. There’s a lot to Apple beyond just an online retail experience. Whereas there’s a strong trend towards a lot of brands going direct to consumer online. Example being; Bonobos or Casper The Mattress Company. In those cases you’re going to their checkouts, their purchasing experiences, are very much more … Probably easy to use even than Apple’s

I want to go back to something you said earlier, which was the industries where you would see this, and we gave some types of sellers. I’ve got a little story to tell. We’re working with a client right now who sells a product in the natural health industry. A very fun industry to work in. I love working in this space. This seller offers a product in three varieties. It’s a great way of illustrating this conundrum of how you accede to be, if you will, because there can be kind of a conflict between having a beautiful site design and having something that converts well for a particular industry.

They have three ways that they sell. One is their standard product offering, which is a little bit cheaper than their competitors and it’s really high-quality, so kind of like your normal good quality, good price product. Then they have their premium line, which is get this, it’s the same product; it’s just bottled differently and packaged differently. So the perceived value is higher and the overall experience is elevated. You can imagine they sell lower volume of that and make better margins. They have a third way that they sell, which is B2B.

We’re redesigning all three of these experiences at same time, which is super fun. I’ve never done this before. Because it allows us to … On the B2B you can imagine we’re doing things like having more … There’s more text and it’s more immediately available that says exactly what’s great about the product and why you should be interested in it, and then it’s done. There’s featured categories, and those featured categories are very much emphasizing the products that we really think people are going to buy first, and their most popular lines.

We’re not necessarily even going to include products that aren’t big sellers. We’re not trying to include everything under the sun. We’re not trying to impress someone. We’re trying to put the product in front of them. We’re going to have a quick order page where you can plug in quantity and click “add to cart” for a whole bunch of items. That’s the B2B.

For the premium brand we’re going to pull out all the stops. We’re going to have moving video backgrounds. We might even try and do some cross marketing with some other big names in the industry. Just having everything be about the brand. The third case, which is the one I started out with, we’re just doing normal best practices for UX.

Dillon Holst: We’ve been talking about these principles in the context of what’s good for my particular brand, or what’s good for my particular industry. Sometimes I feel like people fall into the trap of thinking too broadly in the sense that they want to appeal to the widest number of people, which is great, but at the same time can that hurt them? Does that have the potential to hurt them in terms of when they’re developing their user experience, is there a point at which too broad is a thing?

Michael Bower: This is mainly a problem for marketplaces and multi-brand retailers, because at that point, and if you look at the way Amazon looks and Wal-Mart and sites like that, you would take away that, “Oh, if I want to sell to a lot of types of people I better make my stuff really generic.” That may be true but I would strongly suggest that you not try and compete with Amazon and Wal-Mart, because yeah, you can imagine that the fact that they look bland, but they’re still in business and they’re huge companies means that they’re working on the volumes. But you can’t do that most likely. Almost anyone listening to this show probably is not doing hundreds of billions of dollars in revenue. You might be doing on a hundred million, but that’s still … You need to specialize. Having a strong statement that is evident through your brand, that is evident through your entire site design is very important.

I read a cool email recently from a guy, whose newsletter I’m subscribed to, who shared how he just doesn’t hold back. He is very authentic and by that he just says what he thinks about the world and that’s his brand. That’s who he is. He realizes that he turned some people off, and that’s not his audience. But I can tell you one thing for sure; the people who are his audience that confirms their resolution to keep reading his emails.

Tying this back; yeah, I would strongly advocate that you make your brand mean something.

Dillon Holst: I like that; make your brand mean something.

Michael Bower: Dillon I have a question for you.

Dillon Holst: Go for it.

Michael Bower: What eCommerce store have you shopped at most recently, other than Amazon?

Dillon Holst: Other than Amazon; it’s got to be Etsy.

Michael Bower: Really?

Dillon Holst: Yeah, Etsy.

Michael Bower: What do think of Etsy’s user experience?

Dillon Holst: I like it. I would say that it’s a little bit difficult to find specific things through searching, because I don’t really know how their search algorithm works, but-

Michael Bower: What did you buy on Etsy, can I ask?

Dillon Holst: Shampoo.

Michael Bower: No way. You bought shampoo on Etsy.

Dillon Holst: Yes, shampoo. I did, yeah.

Michael Bower: Is this like artisanal shampoo?

Dillon Holst: No. When you go to the store and you buy shampoo, often they’ll be filled with tons of chemicals. I just happen to have very sensitive skin in general, so finding a natural product that didn’t have chemicals that were going to hurt my skin was … It took me a while, but I found some on Etsy that works pretty well.

Michael Bower: Crazy. Do you buy this over and over?

Dillon Holst: I’ve purchased it twice, the same shampoo, but I will say-

Michael Bower: You probably will … Are you going to keep doing it?

Dillon Holst: Yeah, definitely.

Michael Bower: Wow crazy. I didn’t know you could get shampoo on Etsy. I always think of Etsy as a place where you buy cool crafty stuff.

Dillon Holst: And you can, but I would say that there’s a lot of really cool stores on there where people are doing just amazing things. But at the same time, it’s really difficult to find … To get an idea of all of the different things that are on Etsy it’s a little bit difficult, a little bit challenging.

Michael Bower: Imagine if Etsy was like, “Oh, we need to fix our UX because people can’t find stuff. Then they made it all flat and easy to understand. I actually think that would detract from the experience a little bit. The reason is because there’s this continuum of easy to find stuff, with a little bit dull of an overall experience. Then on the other end of the continuum you have discovery, where you don’t really know what you’re going to find next. It’s like clicking … I’m feeling lucky and wondering what’s going to show up. Some people love that.

Dillon Holst: Yeah, I would say that that’s good for people who don’t know what they want to buy and they’re just coming onto the site, and they’re like, “Oh man, I want to buy something really cool on Etsy today,” which is cool. I’ve done the same thing, but finding stuff-

Michael Bower: But they have to know about Etsy to do that, right?

Dillon Holst: Yup, true.

Michael Bower: Nobody goes to Google and says, “Cool stuff to buy.” If you do you’ll find a bunch of fun stuff you wouldn’t want to buy.

Dillon Holst: What was the last store that you shopped at Michael … I want to ask you the same question … that wasn’t Amazon or a marketplace? I guess is Etsy is technically a marketplace.

Michael Bower: Yeah. And it has to not be one of my clients?

Dillon Holst: Yeah, it can’t be a client.

Michael Bower: Okay, because I actually buy stuff from my clients. Oh I know; I bought some root beer online. I can’t remember what the store was though. Okay, I’ll go back a little further just because this is interesting. I bought some beer for a friend using the website Beer Ship.

Dillon Holst: Beer Ship, okay.

Michael Bower: I had no idea it’s such a pain to ship beer. It’s a terrible pain. I called every single place in town in Fort Collins here … Fort Collins is a beer town. Every single beer company has a presence here. A lot of craft breweries and stuff. Nobody wanted to ship beer for me. So I went online and found this place.

Dillon Holst: Is that just [inaudible 00:18:33] regulation thing?

Michael Bower: Yeah.

Dillon Holst: Got you.

Michael Bower: This place shipped beer, but to ship like six bottles of beer … These were nice, hard to find bottles; it was over $100. Beer Ship; good name on that one.

Dillon Holst: Beer Ship. Well at least we know what we’re going to get when we go to the site.

Michael Bower: Yeah.

Dillon Holst: All right Michael, I appreciate your insight on this topic. Guys if you take anything away from this show, I would say that the way that your site looks when a customer first comes to your site is really going to determine how much time they end up spending on your site, and what they experience, what the experience is like for them.

Michael Bower: Can I just add something to that?

Dillon Holst: Yeah.

Michael Bower: If you don’t feel like you have enough time to dial in everything about your look and feel, just start removing stuff. Just take things off your page and you’ll be amazed how much better things look.

Dillon Holst: Less clutter.

Michael Bower: Not for everybody. I have people that really wouldn’t agree with that. They want to see tons of info, but for most people they like less stuff. Don’t make me think. That’s another principle. A little nugget at the end.

Yeah, it’d be great if everybody can go to iTunes and give us a five-star rating too. We never ask you to do that, but since every single other podcast in the world is doing that now we’ll join the crowd.

Dillon Holst: We appreciate you guys taking the time to listen. If you guys have any questions or comments, feel free to give us a call or send us an email and we’ll be happy to start a conversation with you.

Michael Bower: What’s the number to call and email to email?

Dillon Holst: Those in will be down in the show notes as well, but if you want to go ahead and give them a number.

Michael Bower: There you go folks; show notes.

Dillon Holst: Everything is going to be in the show notes. That’s what we always say, right?

Michael Bower: Exactly. Also if you want to sign up to be notified when episodes come live, just come to eCommerce and sign up.

Dillon Holst: Perfect. All right have a good day guys.

Michael Bower: Keep selling everybody.