David Pogue Calls Out 18 Sites For Failing His Space-Bar Scrolling Test (yahoo.com)

An anonymous reader quotes Yahoo Finance's David Pogue: You know this tip, don't you? When you tap the Space bar, the web page you're reading scrolls up exactly one screenful... But in recent years, something clumsy and unfortunate has happened: Web designers have begun slapping toolbars or navigation bars at the top of the page. That's fine -- except when it throws off the Space-bar scrolling! Which, most of the time, it does.

Suddenly, tapping Space doesn't scroll the right amount. The lines you were supposed to read next scroll too high; they're now cut off. Now you have to use your mouse or keyboard to scroll back down again. Which defeats the entire purpose of the Space-bar tip. Over the last few months, I've begun keeping track of which sites do Space-bar scrolling right -- and which are broken. I want to draw the public's attention to this bit of broken code, and maybe inspire the world's webmasters to get with the program.
Pogue's article announces "the world's first Space-Bar Scrolling Report Card," shaming sites like the Wall Street Journal, USA Today, The New Yorker, and Scientific American for their improperly-scrolling web sites. (As well as, ironically, Yahoo -- the parent company of the site Pogue is writing for.) Pogue writes that web programmers "should get their act together so that the scroll works as it's supposed to. (And if you work for one of those sites, and you manage to get the scrolling-bug fixed, email me so I can update this article and congratulate you.)"

Comments

Re:Space-bar?

[Joce640k]

Never realized that key performs scrolling.
Why don't people use the Page-up/-down keys anymore?

It's almost as if you've never seen an Apple keyboard.

Not the real problem - Toolbars are!

[cycler]

Well, the fact that some of the text gets obscured by a toolbar isn't the problem.

The real issue IS all the toolbars that remain in place when you are scrolling.
Who ever thought it was a good idea to steal my vertical pixels should be shot at dawn.

Even with Full HD screen there is still LESS vertical pixels than what I had 15 years ago on an old 21" 1600x1200 CRT.
"Progress" my as.

Seriously, could someone in web design please explain WHY keeping a toolbar on the top is a good idea?

/C

Re:Not the real problem - Toolbars are!

[UnknownSoldier]

> Seriously, could someone in web design please explain WHY keeping a toolbar on the top is a good idea?

Graphics Guru here. (I've been programming graphics and doing UI design since the mid 80's)

I used one for the first time on one of my web pages a few months ago where I show the Section name, Page Number, and other misc info -- some which is clickable to navigate to a different section. Basically a "sticky floating header." I also have an option where the viewer can toggle color on/off (since I use color highlighting to show categories.)

I have mixed opinions about this:

* (+) It looks sexy as hell so I can understand why people want to use it. As you scroll the page up the last section you come across "sticks" to the top of the screen until the next one. It helps "anchor" the reader by showing them useful information relevant for the current section.
* (-) Calculating where to scroll now needs to be intercepted / adjusted to account for the sticky header height.
* (+/-) If used the ancient iFrame that would solve the scrolling calculation problem but I lose the graceful "scroll up into fixed place".
* (-) I hate the fact that I'm losing vertical space which is already at a premium.
* (-) Treating it as a "sticky footer" solves the scrolling calculation problem, but it just looks weird as the reader is mis-led into believing what the "next" section is, not the "current" section.
* (-) I really wish there was an option to auto-hide it -- but that has it own's problems. What triggers it? That forces the reader to press a key or move their mouse to make it visible. UGH.

With all the problems it creates I'm not convinced the sticky header is the right solution -- it has a limited usefulness. It definitely should be used sparingly, but I lament that there really are no good alternatives.

i.e. Form without Function is useless visual vomit.

Unfortunately too may UI / UX "experts" get dazzled by the "bling" forgetting WHY people are reading in the first place. i.e. They want to solve a task: either linear reading, or non-linear navigation.

This is why I constantly asked myself 4 questions when I was deploying it:

* What purpose does this sticky header server?
* What problem does it solve?
* Does it create more problems then it solves?
* What are the alternatives?

Good design is almost always a trade off. :-/

The problem modern Web designers don't know what the fuck they are doing anymore. They don't understand the _context_ of the problem that has been "solved" for 20 years. Instead they want to dumb their UI down to tablet / phone standards tossing out all the UI advantages that people have come to expect as standard behavior. UI has become a "lowest common denominator" -- the worst of everything. Even worse these UX designers think they are doing god's work unwilling to listen to feedback on all the dumb shit they are doing, unable to learn.

This current fad of "flat design" is one such idiocracy. Instead of empower the view to use different colors to help distinguish icons you force them to decode similar monochromatic silhouettes. *face palm*.

It is good someone is starting to call out these dumb web designers.

Fucking mobile keeps ruining everything

[Anonymous Coward]

Huge fonts, toolbars, mystery hamburger navigation and goddamn parallax scrolling.

I always scroll with the mouse

[reboot246]

Scrolling isn't a problem. There are a lot of ways to scroll.

What IS a problem is damned hover menus. They should be banned from the universe.

Re:As a developer.

[Orgasmatron]

"Jarring UI experience"?

Seriously? When I ask for the next page, it is because I WANT TO READ THE NEXT PAGE, and not because I want to see how clever the scrolling animation is.

Also, key scrolling is a local browser function. Whether it is space or page down or META+wheel on the mouse or shaking your phone in just the right way, the browser is just jumping down the buffer a bit.

The problem is that the HTML specs provide a way to float crap on top, and ways to pin it to the top or bottom of the page, and also a hint to the browser that indicates how much reading space is covered by the crap, so that the browser knows how far to jump per page request. Lots of websites have the floaty crap, without the hint.

That's all that needs to happen. Web designers need to provide the height of the crap they are cluttering the page with, and they aren't. They aren't being asked to write special javascript to jump properly, they aren't being asked to write keyboard drivers, or layout engines. Just to include a hint about how much of the reading space their floaty crap is obscuring.

Re:Let's get them good

[DaphneDiane]

It makes the view move down causing the contents or page to scroll up. In no cases should it cause the screen to move unless your device is on unstable surface.

Re:Didn't you know?

[lgw]

You can no longer discover the keyboard shortcuts in Windows. Discoverability is the victim in the latest user-hostile UI fads.