HTMList.com, A Web Development Blog by Synapse Studios

Over 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.

Tagged with: break, Design, eye-tracking, page fold, Rants, screen resolution, scrolling, the fold, usability, user experience, users

Posted in: Design, Rants

Google announced a new Labs product called Browser Size. At first I thought this might be a useful tool to complement their recent spate of great developer-oriented releases. Instead, I was assaulted by a hideous overlay that requires a left-aligned design. (Though they’re ostensibly working on that.)

Browser Size allows you to enter any URL  and see an overlay of visible browser space broken up by user demographics. Specifically, you can see what percentage of the Google-using populous would be able to see what portion of your screen on an initial page load. Apparently, this is based on typical browser dimensions for users, and not screen resolutions outright. (Taking into account non-maximized browsers.)

I understand that Labs products are by their nature not fully baked, but this one lands on the other extreme: half-assed. Perhaps the overlay is a rough attempt at being cheeky, but to me, it’s ugly, and its jagged, hand-drawn lines reduce its utility, rather than amping up its “cute” factor. The percentages aren’t even consistently rendered—it’s like My First Photoshop session here.

This isn’t to say that the concept isn’t a good one. I just wish they let this one cook a bit more before releasing it.

Browser Size | Google Labs via TechCrunch

Tagged with: browser size, Design, google, google labs, half-baked, screen resolution, tools, usability

Posted in: Design

Netflix 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 »

Tagged with: best practices, customer feedback, feedback, lists, netflix, surveys, usability, user experience

Posted in: Design, How To

Just eight short months ago, Facebook redesigned the home page for a logged in user. At the time, I bashed on the News Feed, as it made a poor use of whitespace and seemed haphazard and disheveled. Facebook took to repair and tighten the design down a good deal, and I grew to find it functional, informative, and useful.

Facebook began rolling out their new design two days ago, and it’s frankly simply terrible. The first thing you’ll notice about the Facebook redesign is that it looks a lot like a basic Twitter page. Facebook talks a lot about how this new layout helps show a “live stream of your social graph” and a lot of other nonsense that would seem completely applicable if they were switching from the new design to the old.

The reality is that they are angering their customers by making things difficult to find, dramatically altering the aesthetic and interface of the site, and in many people’s opinion, taking a dramatic step backwards in usability. My exposure to this nightmare of an interface began just today, but I get a distinct impression that it won’t grow on me like the last changes.

What don’t I like? Let’s take a look: Read More »

Tagged with: angry mob, change, facebook, Homepage, lists, news feed, twitter, usability

Posted in: Rants

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

Related articles by Zemanta

• 50 Beautiful And User-Friendly Navigation Menus (web2list.com)
• FeedbackArmy.com – Test The Usability Of Your Site (killerstartups.com)

Tagged with: Design, designing interactive, tips, ui, usability, user experience, user interface, ux

Posted in: Cool Stuff, Design

Usability is an extraordinarily powerful characteristic of an application, tool or piece of equipment. (Or, for that matter, anything you “use” at all.) You can build an absolutely amazingly powerful product, but if no one can determine how to use the features you’ve built into it, you might as well not code them at all.

The Seattle PI has a great piece featuring an email that they unearthed from Bill Gates to some of the top engineers at Microsoft. Gates tried to download and install Windows Movie Maker 2 when it was first released in 2003. He documents the trials and tribulations he, a pretty-damn-experienced user, encountered as he tried to do what should’ve been a very simple task.

The full content of his email after the jump and what we do to make sure our applications are usable without driving the end-user absolutely insane.

Read More »

Tagged with: application development, bill gates, interface design, interfaces, usability, user interfaces

Posted in: Cool Stuff, Rants

Sometimes, people ask us about our decision to highlight our non-link text. You’ll notice that whenever there’s bold text on the site, it’s accompanied by a light green background. The reason for this is simple: People are exceptionally lazy.

The Problem: The eye is intimidated, to put it simply, by large, unwavering blocks of text. This can present a bit of a problem when you have a lot of information you want to convey to someone while trying to limit their tendency to skim.

Skimming is the enemy of basic reading comprehension. When a user is presented with a large block of text, it presents a few challenges: It’s incredibly difficult to keep your place once a block of text extends past, say, four lines of text. So people skim. They read the first sentence, they read the last sentence and they try to determine if the content within warrants a closer look.

Read More »

Tagged with: fonts, readability, sans serif, serifs, synapse studios, usability, web design, web development

Posted in: Design