Welcome to episode 17 of the Crux of It. I am Mahtab Rezai. I'm the Principal and CEO of Crux Collaborative. We are a user experience consulting firm and we specialize in regulated industries. For this episode I am joined by my colleague, Annette Gustafson. Hi Annette!
Mahtab: So today we are going to be talking about "the fold". Duh nuh nuh nuh!
Mahtab: And why you should not fear the fold. So, a common question we hear when we're presenting visual designs, is "Where's the fold?" And actually, let's talk a little bit about why that question gets asked.
Annette: Yeah, so the fold kind of has a history back in the print days. It comes from the newspaper era. So think of the newspaper that was on the newsstand and it's trying to grab your attention. So it's that top part that's quote-unquote, above the actual, tangible fold of the paper.
Mahtab: And it was like the part that was visible in the machine, too.
Annette: Yes. Yeah, those old machines. I wonder if those still exist? So it was meant to tell you the latest and greatest news, grab your attention, and really surface up the most important content.
Mahtab: And I think like in early web design, when the only thing we knew we were designing to was sort of emulating two-dimensional print pieces, that was where you put the most important stuff. And it was an area of great prominence. So we get asked, "Where is it?" So let's talk about; where is it?
Annette: Yes, it definitely depends, and so we talked about the newspaper era and what the fold was, but when it comes to interactive, what is the fold there? So the fold there is defined as: what's visible when you first come to the page? So when you open up your browser, you go to a URL, what do you first see? What's visible right immediately before you even do any scrolling? So that's...
Mahtab: So is it fair to almost say that like what we really mean is 'first look' or 'first view?'
Annette: Yes. So that's what the fold is. It's what's above the fold. And when we get asked that question, we always say, "Fear not! Don't worry, your users will scroll." And we also have to say, "It depends." Now with multiple browser settings, multiple desktop sizes, laptops, mobile, everything, the fold is different.
Mahtab: The fold is everywhere.
Annette: The fold is everywhere, yeah, you really have to kind of take a look at it on multiple devices and be mindful of it.
Mahtab: So one cool tool that we sometimes offer for our clients and that we use ourselves when we're trying to figure out what that fold is or what that first view is, is called the Fold Tester.
Annette: Yep, so that's a great site, you can just type in your URL and it'll show you all the various line points, so if your user is at this size monitor, here's what they're gonna see. If they're at this size, here's what they're gonna see, so that can give you kind of a general, general sense.
Mahtab: Yeah, and that tool is at foldtester.com. So that's one thing. So when we tell people "Don't worry, users will scroll," let's talk a little bit about that. Because this is something we've observed a lot.
Annette: Yes. Time and time and time again, through countless usability studies we see the participant get in front of the device, whether it's the mobile device, whether it's the desktop, they take a moment to pause, they orient themselves to the site, they scroll down, they scroll up, to get a sense of what's on the site. We see it time and time again. They are not afraid of scrolling.
Mahtab: Absolutely. And so when people are worried that they're going to stop, there is actually an instance when people do stop, and we call that the 'false bottom.' So let's talk a little bit about the false bottom and what we mean when we say 'the false bottom.'
Annette: So the false bottom is a point in the page in which the user is scrolling and they seem to feel that they've reached the bottom of the page, where they get the sense that there's no additional content. So they're not motivated to scroll, they stop, and then they scroll back up. But, there actually is more content down below, they're just not aware of it because they felt they've reached the bottom of the page.
Mahtab: So this is really important because I think that we see this happen a lot with false bottoms and I think it would be good to spend some time on the instances and times and design patterns we've seen creating false bottoms. Because when you have a lot of text, so like if you have an article, people know just by nature of reading it that it's not complete. That it's not done with. They know, because they're in the middle of a sentence or a thought or a paragraph that there's more. There's more to come.
But, when you are working on a more functional site and say it's a form, or say it's some instructions where it's not a clear narrative, there's not clearly more that's coming. People aren't familiar. Are you gonna ask them six questions and then they'll be done, or are you gonna ask them 60 questions and they're gonna be done? That's where not introducing a false bottom and confusing them, making them feel like they're done when they're really not, and they're just at a certain point, becomes really critical. So let's talk about some of the things that cause users to think that they've hit the bottom and that there's no more.
Annette: Yeah, there's several things that can contribute to that false bottom, but some things that come to mind are those large hero images that really take up the whole home page. So you know, there's something about it where it crops off at the bottom of the browser that they're not getting a sense that there's any additional content down there.
Mahtab: And in that case, all hope is not lost, but what you've done is you've made them believe that their only option for getting to things is the navigation.
Mahtab: So if there is something critical or something you really want to push, if you don't let them see that right away, but you force them to go find their way through the site navigation, then they're making their own determination of the hierarchy and importance of what is there on the site. So it's not like all hope is lost, if there's a giant image there, it's more that what you have lost is the opportunity to really shape their behavior about their first action.
Annette: Yes, absolutely. But other things that lead to this false bottom too is excessive white space. Now, don't get me wrong, as a visual designer I love white space.
White space is great, it helps readability, scannability, but when it's excessive- it can create large gaps at the bottom of the browser where you get this sense that there's no additional content there, so it's "Oh, I have 100 pixels here, there's nothing else down here." No motivation to scroll.
Mahtab: Although to be fair, no actual user would say, "I have 100 pixels here." They might just say, "Wow, that's a couple inches of nothing."
Annette: Who's the designer? Yeah, I'm exacting.
Mahtab: True, yes.
Annette: And another thing that we see too is large blocks of color or horizontal lines can also lead to this as well. So again, being very mindful about how large those blocks are, how much padding is there…
Mahtab: Yeah, which sort of leads to the next one which is this idea of interrupting content with ads. So a version, which is not quite the same as an ad but that we see a lot of times in different things is like, for example, if they have a repeating area that says, "Do you need help?" Or a repeating block that allows them to send a message or sign up to get more info. If that is a color that spans the whole width of the screen, no matter the screen size, then a lot of times when users hit that point, they think they've hit the bottom.
Mahtab: And they don't realize, "oh, that was just partway through the experience and there's more below this thing that's now asking me to do something else." So it's visual but it also has to do with action.
Annette: Yeah, you hit on both the things, it can be both a visual design problem as well as a content problem. Sometimes we see like, "Do you have any additional questions?" Or "frequently asked questions" or "related content" and so squeezing that into the middle of something, the user usually wants to read in the entirety and have comprehension, and then if they have additional questions they will navigate towards that, so to throw that right in the middle ... you know, in one study we even saw, too, with 'have any questions, give us a call,' you know they associated phone number and contact information with the footer. So they felt like, "Oh, I'm at the bottom of the page. There's nothing here."
Mahtab: "There's no more." Yeah. There's no more to explore. Yeah. So you need to be aware of both what you're presenting, as you mentioned. So content, as well as design, as well as how you're presenting it to make sure that you don't inadvertently give them the signal: "You're done!"
Annette: Yep. You know, even shift things around too. Because when it comes to responsive design, you may, I'm gonna ... be pixels here, you may want those 80 pixels on the desktop but then you'll want to shorten that up a bit when you get to the mobile device. So finessing your visual design too.
Mahtab: Absolutely. In a study we just did last week, one of the things was that because there were three primary things to do on the first page of the site, once the user had logged in. But because in a mobile viewport they were presented with such large graphics that users never saw the second and third thing. They really felt that there was only one thing to do because it took up the entire mobile viewport. And so even something like suppressing the graphics, in a mobile viewport, whereas you have a lot more space in a desktop.
Annette: Yep, absolutely.
Mahtab: All right, I think that's all we wanted to cover today. Let us know if you have any feedback about what we shared. If you have other questions or topics you'd like us to answer or discuss on the podcast, our contact information is on our website. Thank you for listening.
You can find us on SoundCloud, iTunes, Google Play, Stitcher, and on cruxcollaborative.com/thecruxofit.