Lessons

Lesson Info

Eschew Obfuscation ... Clarity and the Quest for Fewer Question Marks

how do you design fans and welcome back if you're getting sick and tired of me talking about clarity, then I don't feel bad because it's that important. We opened up this course. Talking about clarity and now we're going to continue talking about clarity and the quest for fewer question marks. Let's just jump into our slides with every landing page change. We make the purpose is to make things simpler and clearer for our users so they have to think less. There's this funny bumper sticker over here that reads a shoe obfuscation, right? And it's it's a joke because it's just a very, very complicated way of saying, avoid on clarity, right to sue means to avoid obfuscation means things that are unclear. So it's an ironic sort of joke, but that's exactly what you want to be doing with your landing pages. You don't want to be labeling things or naming elements of your site in ways that are so sophisticated or too fancy that make your website visitors have to think extra. Everything should be...

immediately self evident. We're gonna talk about that in a second, clarity and simplicity equals less thought. And the rule that steve Krug coined the title of his book is don't make me think, right when you think about how you're designing your pages and you're writing your headlines and your sub headlines and you're labeling your navigational elements and you're labeling your different sections of your landing page. You always want to think about your visitors don't want you to make them think, right, keep that in your head. This is true throughout your entire site, but it's most important on your homepage is most important in your landing pages. When people first come and visit your site, things should be self evident. And if not then self explanatory. Of course, you're gonna have services and products that need explaining, right, you're not going to just be able to show people a picture and they're gonna get what's going on. But self explanatory really means that with little information, just a little bit of text, a headline and a sub headline people should be able to get, they should be able to fill in the blanks themselves, especially in that first few seconds on your homepage, your landing page and that initial stages of the experience like steve Crux says, the old lady down the block who doesn't know anything about, you know, the internet, you can barely find the back button, She should be able to come to your homepage and say, oh cool. You sell blank, you sell um, customizable dog collars. Cool, Right, So people who are totally foreign to the internet should be able to understand what it is. You sell what it is you offer right away. And this is going back to that five second test and in the next lecture, I'm gonna show you some more five second test examples, a lot of people think that the number one reason why you have to be clear and not make people think and make the website experience extremely simple is because you have so many competitors who are just a click away. Yes, that's true. You have a lot of competitors who are just a click away, but their landing pages might not necessarily be better than yours. The real reason is you want your landing page to be a pleasant experience. You don't want there to be any subtle frustration when you make people think and you make elements that are confusing and people have to think twice about whether or not this is a button or not a button. Then there's a subtle sort of subtle frustration that starts creeping into the experience and that's what you want to avoid in a major way. I want to show you two different examples that, that beautifully highlights this idea and I'm going to teach you a few of the most important questions that your visitors should be able to answer without thinking on every single page of your site. And that's gonna, that's gonna be very practical takeaway from this lecture. Here's the photography category page for B NH it's a, it's a huge photo video store headquartered in new york city. They do a lot of online selling. Now, let's just take a look at this page and how it's broken down, right? I think it's, it's an incredible example of good design. You have the header over there. Right? So I know where I am. The pages clearly labeled where I am. So I know I'm in the photography section, that was easy. I don't have to think, right? It's big, right there, bold, right in front of my face. I could, I could chat or I could call or I could email. Right? I know how to get help. That's clear. It's not, it's not obtrusive. It's not obnoxious. It's there if I need it, I know how to get help. I know how to go further. Right? There's very nicely marked product categories to go further into the photography section. I know how to find what I'm looking for. They have a single image that represents each product category. So, it makes sense. There's not a lot of images. They're not all the same image and I can go further and I don't have all their product categories. They're just giving me the three top product categories. They're removing unnecessary choices. Right? There are a lot of other subcategories on B NH for photography, but they've chosen to give me their top three categories, which is a very good idea. Write it simplifies choices and it appeals to the average visitor. So, I know what I'm looking for and I know how to go further into the site. I know how to self select, right? You have needs based selection. Instead of picking a product category. I could say I want to shoot landscapes. I want to shoot at night. I wanna shoot sports scenes and then be NH will show me the appropriate products based on my self selection. Remember we spoke about the concept of self selection and finally, very important, I know how to get back. There's a breadcrumbs, navigation at the top. I know that I went from the home page to the photography section and I know I can click on the home icon and go back to where I was. Right. So really, really great design of the page. And these are questions that you should always be able to answer for your visitors on every page of your site. Let's just go through them one more time. Do I know where I am? They should be able to answer that without thinking. That's the main thing. Not only does it have to be there, but they have to not think about, it has to be self explanatory and self evident. Do I know where I am one to do? I know how do I know how to get back to where I was three? Do I know how to go further and find what I'm looking for four. Can I self select and five. Do I know how to get help? Important question Now, let's contrast this with the competitors of B NH the same page. Right, Photography, the photography second on their site by digg dot com. Pretty significantly significantly large company. Now, let me just flip back to the B NH page, right? And let's just go back. So here we are back at this by dig photography page right now, right away. I don't know where I am. There's no clear page headline. I don't know what page of the site I'm on. I could figure it out based on the context of the site. Yeah. Anyone could figure out that I'm on the photography page. But are there other photography pages? Am I what level in the hierarchy am I? So that's the first question. Big question mark. Right. There's a question mark that should have been removed. A user has to think, where am I? Right. That's bad. How do I get back? Where was my last page? What was the last category page? Was it a category page. Was I on a product page is the last page of the home page. How do I get back to where I was? How do I find my way back? It's unclear. I have to think how to figure that out. Right, That's bad design. Look at the product category images, right? Similar to similar to be NH they're allowing me to choose further categories. four of these five categories to me look almost identical. They have three images. Right? And for each one. So that's 12 in total of these four and there's 12 images of cameras. They're all just cameras. I have to think about the difference. I have to go and read that tiny text on the bottom. Oh, that's a point and shoot camera category. This was the SLR digital camera category, ones. Mirror less cameras. Right. It's thought that I should not have to take if you remember the B and H page was so beautifully simple. It was so clear what that product category was. These are all bunched together and I have to think so. What's the difference? That's another question question mark. That's gonna start creeping in with a subtle level of frustration to the user. Do they only sell Cannon? Look look at this big Cannon at the top. Right, Is it an ad? Do they only sell Cannon? Right. They seem to be promoting Canon cameras. I could shop now, but it also kind of looks like an ad. This doesn't look like it's part of the rest of the site. Right, so are the brand logos clickable? Another question. Look down here in this section, um, you have these featured brands, Right? Nikon Fujifilm, Olympus, are they clickable? If I click on the Pentax icon, if I, if I click on the Pentax logo, is it going to bring me to a Pentax category page? I shouldn't have to ask myself that question. Right. The more questions I have to ask myself, the more frustrating the user experience becomes. How about this one? Where are my camera accessories? If we look closely this text over here says camera and accessories, but how do I get to accessories? Right. I see point and shoot cameras. SLR cameras, muralist cameras, action cameras, drones. where my camera accessories. Another question mark. Right? If you remember the B NH page, they had a section for accessories. Clearly laid out and clearly define herbal. So remember, your users should not have to think about those five main questions. How do I get back? Do I know where I am I do I know how to continue. Do I know how to find what I'm looking for? Can I self select and can I get help? Right. Those are the primary questions that should absolutely not take any thought on the user's part. If the user has to think about any of those things, bad design, the user can't figure out those things very quickly. Bad design. And then of course, like we saw in the example, you have lots of other potential flaws in your design that could be adding question marks inside the user's head, which will decrease your conversion rates and you will be leaving money on the table. All right. So, as a quick exercise for this lecture, you don't need to find any respondents. It's just you go to your website and pick three pages, right? Key. Key pages, let's say your homepage and two other important pages. It could be a product category page and individual product pages, specific service page, the contact us page, whatever it may be. And ask yourself, do my visitor based on what we just learned in the course based on some of these principles. We just talked about getting into the subtleties of the design as we contrasted the B NH versus abided page. Do your visitors have to think when they ask themselves? Do I know where I am? Can I find my way back? Can I easily find what I'm looking for, meaning? Can I take the next step and can I self select? Being able to self select is not going to apply to every page, which is fine. But if it does apply, if it's a page that users are presented with options, can they self select? See if your visitors try to think of? Your visitors have to think to figure out the answer to any of those four questions. And if they do, what can you do based on what we just spoke about to make those designs better and to reduce the question marks or remove the question marks entirely from the minds of your prospects. So exciting stuff. I'm sure you're learning a lot and I will see you guys very soon in the very next election.