Let’s Be Clear: There IS A Page Fold

please_scrollOver the past day or two, the website thereisnopagefold.com has been making the rounds. In a rather succinct, but incredibly tall manner, it states the following:

WELCOME TO THE WORLD WIDE WEB, AN INTERACTIVE MEDIUM IN WHICH SCREEN RESOLUTION STATISTICS ARE TRIVIAL, BROWSER VIEWPORTS ARE VARIABLE, AND SCROLLING BEHAVIOUR IS A STANDARD. THERE IS NO PAGE FOLD. LOVE YOUR SCROLLBAR.

The buzz on Twitter from “designer” types appears to be a knee-jerk “ZOMG YES SO TRUE!!!111one” while responses on the site’s reddit thread have been more measured. I especially appreciate the following comment, by one fletcher_t:

Well of course it depends on the context of what the site is providing… but there is indeed a fold and if you’re ignorant of that, may god have mercy on your soul.

Let’s be perfectly clear: There IS a “fold”. For the uninitiated, the “fold” refers to the literal crease in a newspaper. Editors recognized the importance of catching their reader’s interest “above the fold”, because the likelihood a reader will bother to look under the fold is lower as a whole. Readers who might not typically read the sports section, for instance, will notice a story above the fold if it’s of interest to them. If they’re just flipping past as they always do, they’re far less likely to look beneath the fold.

The assertion made by the “no fold” site is that, because technology has provided us with infinite page lengths, we should design our pages accordingly. We can space things out more, we can use larger print and increase readability, and we shouldn’t be so concerned with what lies above the fold because users will scroll anyway! We were on a roll there up until that third point, weren’t we?

The reality is that the science of user attention is a tricky one, and more of an art than anything. Heat maps and eye-tracking studies frequently show huge dividends by presenting the initial page-load in a clear, concise manner, with well delineated courses of action visible to the user and readily accessible. Users will absolutely scroll, if you’ve given them a compelling reason to believe anything of interest lies beneath the fold. Users are fickle types, though, who scan quickly, look for large visual cues, and make an off-the-cuff and perhaps misinformed decision to bounce away from your site in an incredibly short amount of time, if you don’t captivate them instantly. To capture their interest, you simply must pay attention to the content that resides above the fold.

With Google’s release of Browser Size the other day, Tech Crunch mentioned that Google saw a 10% increase in the number of installs of Google Earth, simply by moving the download button up 100 pixels. By placing the call to action and primary focus of the page above the fold, users were far more likely to follow through. Naturally, this will vary from site to site. Amazon.com has a rather long page, which they use to show multiple categories of products they think you’ll be interested in. Their primary feature and what they hope will have the most success is always at the top, though—a compelling enticement to scroll further and see what else they got right.

Understand, this is by no means an argument for cramming everything of any importance above the fold. Not even a little bit. (And I understand that the no-fold site is likely directed at those types—but does anyone actually try to force entire sites above the fold anymore?) Whitespace should be well utilized, large print is totally acceptable, and designers shouldn’t force pages to fit into any idea of a “standard” vertical viewport. CXPartners even argues that including less information above the fold can encourage users to scroll more, arguably by reducing the utility of the site to the point where they’re forced to scroll.

It’s not my claim the no-fold site is implying you should ignore the above-fold design or disregard its design entirely, but the cheeky site title and its assertion that there is NO page fold degrades the importance of how you construct your pages for those first 700 or so pixels. Encourage your users to scroll, not by reducing utility but by increasing interest. Facilitate this behavior by keeping large, blocking horizontal lines and blocks at bay (advice from CXPartners’ piece) and providing clear paths downward. Ensure that users see that additional content exists further down. But don’t forget that your site’s first impression is above the fold.

Posted in: Design, Rants

Anatomy of a Smart Survey: Netflix Email Surveys

netflix_surveyNetflix is a company built entirely around efficiency. When you deal with the volume Netflix does, every penny, every action, every little detail counts immensely. Take their mailer: Over the years, it has evolved from a cardboard-backed affair, to a paper-based piece with a foam insert, to today’s design: thin, simple paper. (They determined the breakage rates didn’t decrease enough with the padding to make it cost-effective.)

It’s no surprise then that they’d take the time to get surveys right. Netflix (like most companies trying to make a profit) has a need for constant feedback from their customers. They want to know how their distribution system is working, where there may be bottlenecks, and other things like how their new instant streaming service is performing. Instead of producing staid, time-consuming, multi-page affairs, they send an email with a single question.

In my most recent survey, that question read “How was the picture and audio quality?” Simple enough. The real stroke of genius lies in how the user is asked to respond: Three links are displayed, each with a different quality option: “The quality was very good”, acceptable, or unacceptable. You click the link and your survey response is sent. Done. That’s all there is to it.

The survey requires exactly one click to respond to. Users aren’t asked to login, fill out demographic data, attempt to remember details they aren’t likely to, or even read anything to qualify their answer. They are given three relatively unambiguous options and clicking the link from within the email submits their response.

Since not every company has the luxury of being able to boil their customer feedback loop down into simple multiple choice questions, let’s look at a few key points almost anyone can replicate: Read More »

Posted in: Design, How To

Barnes & Noble Security Question Error Message Mocks You, Your Loved Ones

bn_security_question I finally bought a Barnes & Noble membership today. Despite almost always buying my books on the Amazon, (a site I much prefer referring to with the definite article “the” intact because it sounds cooler), I occasionally will pick one up from B&N if I really want a book that. day. I was buying $55 or so in books, with one being a bestseller which means 40% off, so I was looking at just over $10 off with a membership. $15 for a membership, sure, whatever.

In trying to link my new account from the store with an online account, it prompts for a security question. I select “mother’s middle name” since things like “what’s your favorite restaurant?” are ridiculously inane as I’ll almost *certainly* forget what I entered, which will promptly be followed by feelings of wanting to stab someone. And then I enter ma’s middle name: marie. Nevermind that the security answer is CaSe SeNsItIvE, (because, clearly, I should also be forced to remember if I proper-cased my answer) it goes ahead and tells me:
bn_error_message

Great. Now Barnes & Noble is calling me a liar AND insulting my mother. Swimming performance there, kids. [Really, the error message reads as follows: Your Security Answer is not formatted properly. A Security Answer must be 6–15 characters long, spaces allowed. Remember that Security Answers are case sensitive (i.e., "Dickens" is not the same as "dickens").]

The moral of the story? Don’t enforce ridiculous limitations on a security question if the user’s correct answer might violate those limitations. And don’t insult your customer’s mothers. (CrunchGear blogged about this too, some two weeks ago.)

Reblog this post [with Zemanta]

Posted in: Design, Rants

50 Tips To A User Friendly Website

I posted about the Designing Interactive usability blog a few months back. Josh Walsh at D-I has compiled a nice list of 50 tips to a user-friendly website that you should definitely check out.

I agree with almost all of them, like Clicking on the logo should take you to the home page—this has become a convention most people expect on a given site, along with highlighting your current location in the navigation bar. There are a few, however, that I might nitpick, such as always underline links, except some navigational cases (unless he means either on hover or the regular state; I note quietly that the links on his blog are text-decoration:none and only underline on hover).

Either way, it’s a great, quick read with some things to always keep in mind when building a website, so take a look and subscribe.

50 Tips to A User-Friendly Website | Designing Interactive

Reblog this post [with Zemanta]

Posted in: Cool Stuff, Design

Recreational Reading: Designing Interactive, A User Interface Blog

Twitter is great for keeping up with the happenings of friends and family alike, but it’s also a great tool for discovering new people and resources. Example: I follow 37signals’ @jasonfried, who tweeted back to @joshwalsh that Basecamp was up and running again. I clicked on @joshwalsh to see his original post and happened to stumble upon his great blog on usability & interface design, Designing Interactive.

Josh’s latest post goes into some detail reviewing the usability of the Old Navy site. It’s a great article, but I liked his article on red as an error state even more. (In it, he notes a specific example where an expired coupon displayed in red when it should have instead been greyed out, since the user themselves did nothing wrong, and grey brings less attention to the no longer useful data, rather than more undue attention to it.)

Josh has a lot of great advice pertaining to both the nuanced and big picture issues that designers face when developing intelligent, innovative and clean user interfaces. Do yourself a favor and add him to your feed reader promptly.

Designing Interactive

Posted in: Cool Stuff, Design

Reviewing Facebook’s New Design: A Look At The News Feed

Facebook releases their new design tomorrow to the masses, after months of letting it percolate and allowing developers access to ensure compatibility with their apps.

While it’s clear that a lot of thought has gone into the redesign, it’s not so obvious what they did with all that thought, since the redesign really rather travels two steps backwards in a lot of ways. (Though I actually like the new profile pages, they’ll take some getting used to for sure and I’ll focus on them in another post.)

Hit the jump and let’s take a look at the new News Feed/Home Page for now.

Read More »

Posted in: Design, Rants