top | item 5043388

I want the world to scroll this way

832 points| rdwallis | 13 years ago |magicscroll.net

299 comments

order
[+] munificent|13 years ago|reply
This seems to result in a large number of cases where the visual experience is pointless. The line separating the previous and next page is tiny and easy to miss, and I don't see the use in two torn half-pages on screen.

I agree that smooth scrolling long text is hard to read and trips up line scanning, but this UX seems be like playing an cruel game where I have to drag just enough to scroll a whole page. Any more or less and I get a torn page that's even harder to read than normal scrolling.

I have an alternate solution to this problem: just hit space or page down when you're reading a long web page. It scrolls a whole page, with just enough animation to help you track where you are.

[+] btilly|13 years ago|reply
Your alternate solution gets annoying if the page has a header overlaying the text. Like Google+ does. Then you scroll a page, and have to scroll back a little.

That said, this solution will also break in that situation. But it will break worse since there will be no way to get the text at the top to scroll into view.

[+] sarah2079|13 years ago|reply
While I didn't like the page divider in this demo, I also don't like having to see the screen whir by when you hit the space bar. Having the page flash past in the same direction you are trying to track with your eyes is not comfortable for me. I did really like the narrow width of the text here though.

I have noticed that reading on the kindle app on my phone is extremely comfortable, and it basically incorporates the things I just mentioned -- narrow column width and page turns that aren't disorienting. I know people hate pagination on the internet because it is associated with slow page loads, but fast pagination would be awesome.

[+] nnq|13 years ago|reply
> this UX seems be like playing an cruel game where I have to drag just enough to scroll a whole page

just use the mousewheel / trackpad scoll area / two finger trackpad scroll gesture or swipe your finger on the touchscreen to scroll as much as you want at a time! it seems quite natural. I always though paging things is a very very bad UI pattern, but this "fluid paging" works great for plain text ...though nothing beats good ol' scrolling for a media rich documents or something with a fancier layout...

[+] jmilloy|13 years ago|reply
Fair, but don't conflate this implementation with the idea (e.g. the line separating the next page and previous page). You're "alternate solution" is great; did you try it on this page? Works fine with page down.

One use for the two torn half-pages is that you can still see the preceding text for reference. I think that's the main reason for it. Otherwise, use page down or the arrows.

[+] yogrish|13 years ago|reply
Overall I feel its a better scrolling. But, the page divider is an irritant more when the current page sentence and next page sentence are overlapping. I think he can try out soem blending operation to avoid this. Below page divider he can slightly blur few sentences and blend with next pages while you keep moving the divider down. Author can try out and check if it is appealing.
[+] eranation|13 years ago|reply
I could almost agree, except I just tried the auto scroll option (space key to toggle and + / - to modify speed), it might be very subjective, but this helped me read this start to end smoothly, I kind of like it, can't explain why, it is much better than auto scrolling the "old way" where the text moves. Somehow he made it so the speed was just right for me, but I'm sure many will find it annoying.

EDIT: tried it on some other articles, chose some boring ones just for the contrast, it might be just me, but the auto scroll option is going to be the only way I read articles in the near future, I actually read them faster, and more likely to reach to the end of it (based on a very short experiment though). It's also a great distraction killer (ads, banners, related stories) Nice.

[+] snogglethorpe|13 years ago|reply
Not to mention that his entire thesis ("scrolling is the true problem!1! OMG!") is unsupported and rather dubious...

All those other things he mentions are also problems, despite his proclamation to the contrary.

Even if he somehow has managed to "fix" the scrolling "problem" (and judging from the comments on this story, he hasn't even come close), reading stuff on on a computer will still be mostly the same (for better or for worse) experience.

[+] bpp198|13 years ago|reply
Page down doesn't work as soon as you are less than a screen away from the bottom of the page.

You scroll to the bottom and automatically start reading from the top, but your next line is somewhere in the middle. A faint line where the top of the page previously was would help here.

[+] jlgreco|13 years ago|reply
The problem I am having with this scrolling scheme is that when I forget to scroll I find myself reading what I already read (and getting a few words into it before noticing). I can't forget to scroll in the normal scheme since if I don't scroll there is nothing more to read.
[+] flogic|13 years ago|reply
An alternate solution is to change the background for the lower order page. I do something similar for my terminal sessions. It helps me keep "prod1", "prod2", and "test" separate.
[+] ako|13 years ago|reply
There's no space or page down on my tablet, and i do most of my web reading on a tablet.
[+] kafkaesque|13 years ago|reply
I was born with pretty severe strabismus and underwent a few major eye surgeries throughout my life.

One of the side effects of being born with this condition is missing lines when reading a book. Growing up with computers, I always found it a little difficult to follow long lines of text or the next line as I scroll.

I'm a lot older now and hardly have these problems, if ever at all. I've pretty much perfected guessing varying levels of depth perception, I guess, as this effects my stereoscopic vision. I'm not sure what goes on at the neurological level or 'lower level', however.

Anyway, you don't know how natural it felt to read this. It almost worked too well, so I would like to test it out a little more before, just because I'm a natural sceptic.

Regardless, kudos on this great work and creative thinking.

And yes, it almost did feel like words 'moved' a little sometimes when I was a child and was still developing strong optic/extraocular muscles. It is difficult to explain/articulate, especially since it happened such a long time ago and I'm working from memory, though.

[+] jiaaro|13 years ago|reply
Honestly... this made things confusing without improving my reading ability.

a lot of people actually like scrolling. So many people in fact, that they successfully pressured Apple to add scrolling as an alternative to pagination in iBooks.

I'm one of the people who uses that. I'm trying to be polite, but my honest reaction to this interface was, "oh god, this is awful," when I tried to use the mouse to scroll the page.

[+] saint-loup|13 years ago|reply
"You'll get used to it" can quickly becomes a lazy excuse for many bad experimentations in interaction design, but in this case I really think this is the right answer. At first, I found it disturbing as hell, and the implementation could be better (for instance, with a margin between the two pages, in addition to the black line), but this is really an interesting and promising answer to the pagination/scroll debate.
[+] TheCapn|13 years ago|reply
On the flip side I actually liked it. I'm a FF user, and in the instant it clicked my first thought was "damn, I need chrome."

Options aren't a bad thing. Android offers multiple keyboards for people who find one method of typing more efficient/comfortable than others. I don't see any downsides to it because everyone gets what they want without forcing anyone to conform to a model they don't like.

[+] Fletch137|13 years ago|reply
Absolutely with you on this - any kind of pagination on the web makes me cringe.

On the other hand, I imagine that if you were someone that liked pagination, this might be pretty nice.

[+] freework|13 years ago|reply
Do you hate it because its bad, or do you hate it because it's different?
[+] lazyGeneral|13 years ago|reply
It would be a lot less confusing if the text from the previous page dissapeared...or if that line that follows you worked not with pages but as a scroll....

The line is the interesting feature.

[+] crazygringo|13 years ago|reply
The New Yorker iPhone app does a fantastic job by combining the best of both worlds.

Most articles are "paginated", but you "scroll" up/down between pages. So you get the same nice physical sensation of vertical scrolling, but also the nice physical sensation of pages. (Plus, they get to lay out photos nicely, etc., knowing how it will fit exactly with the text.)

[+] toddmorey|13 years ago|reply
I got used to it when scrolling forward. When you want to scroll back up, though, this approach really seems to break down.
[+] haroldp|13 years ago|reply
I thought it was pleasant enough to use. I actually have my middle-mouse button remapped to PgDn, so this is more or less how I navigate already.

My system doesn't need to use 2/3 of a page for two buttons though.

[+] rhizome|13 years ago|reply
It's the difference between moving the page and moving your eyes.
[+] msutherl|13 years ago|reply
1. One downside of this interface is that it's difficult to keep track of where you are. The scroll metaphor is broken and the pagination metaphor is not fully implemented (you need an indicator of where you are, like pages in a real book). The percentage indicator doesn't cut it.

2. Control feels too fine. It's too easy to lose your place and mental effort needs to be devoted to properly placing the page divider. I would like to see a version that scrolls in discrete steps by line, perhaps with a little smoothing by way of animation. This would also give you a new feature: using the divider as a reading aid as people often do with rulers and real books.

Think of it this way: you have two controls, page turn and pixel-advance. What is a control with granularity somewhere between those interfaces that combines some of the advantages of both for navigating?

3. I'm not convinced by the divider. I think it either needs to communicate a visual metaphor, perhaps implying that the new page comes out on top of the current page using shadows, or just needs to be softer using blurring or fading the adjacent text out to white. And I don't think you should be able to cut a line of text in half (addressed in (2)).

[+] pertinhower|13 years ago|reply
Nice idea, badly implemented.

The interface teaches me how to use it very badly. The most obvious interface clues are the arrows to either side of the page, but these work in the usual manner (hopping from page to page), so they distract me from the heart of your interface.

When I do happen to mousewheel, I can't immediately understand what that does. Am I moving myself or a divider? Why is the divider coming from the top? What's above the divider? Why is it snapping like that, instead of scrolling smoothly? The snapping erects a level of indirection between my (smooth) wheel movement and the movement of the divider, which obscures my ability to understand what's happening. I can't decide whether to scroll upwards or downwards—which is "forwards?"

Why is there a white page "behind" the text if I scroll the divider upwards? Is that what's on the next page or the previous page? Why are you showing me a white page?

The sense that I'm reading downward yet new text comes from above feels very strange. I see how you've ended up here, but it's highly unintuitive. Alas, it's also fundamental to your concept, so whether the concept lives or dies (once all other problems are removed) is a question of whether people can adapt to this spatial "warp."

The "snappy" movement of the page divider line feels clunky. Move per pixel, in immediate response to mouse wheel (or touch drag?) movement—preferably with inertia—definitely not per line.

This is not the way I want the world to scroll. But I see where you're going: leaving the text in place makes sense, and if you're going to do that then using a divider from the top follows inevitably. So the idea is worthwhile, but this implementation is its own enemy.

[+] fastball|13 years ago|reply
I think you're over-engineering your analysis... I immediately knew what was going on when I started scrolling, so I don't share your view that it is counter-intuitive.

Also, I think your problem with the scrolling is your mouse. Does your mouse have a smoothly scrolling middle button, or is it one of the ones that moves in clicks? Scrolling with my touchpad worked excellently.

You only see a white page when you are before the beginning of the text you are trying to read... otherwise scrolling up results in going to the previous page.

[+] rdwallis|13 years ago|reply
Thanks, the arrows are a relic from the ebook reader on the main site. With that I specifically wanted users to discover the scrolling only by accident after they were already familiar with the pagination.

I tried it without allowing the scroll back on the first page (i.e. stop the white page from appearing behind.) but it made the ui feel stuck.

[+] ChuckMcM|13 years ago|reply
Its a neat experiment. It reminded me of the scroll wars of yore, when the VT100 came out it had "smooth scroll" as an option vs "jump scroll" and there were long and heated debates about which was better. I personally found 'jump scroll' better but that was just me.

The moving bar revealing text is ok for keeping text from moving but it feels weird when part of the page is from one page and another part is from another. Reading with the arrows to just 'flip' the pages worked better for me.

Because the 'next' page starts at the top, it creates pagination / layout issues when a paragraph is split between the top and bottom of the page with the scroll line. This is tolerable in page flips because the previous part of the paragraph is gone, but distracting in partially turned pages.

All in all it was an interesting thing to look at and think about though.

[+] huggah|13 years ago|reply
This is great! I'm glad you're experimenting. I don't like this particular experiment, however. I far prefer using space / page down to handle a page of text at a time. I don't see much benefit to your method instead, and among other things, I miss having consistent visual anchors when I read.
[+] artursapek|13 years ago|reply
Do you have evidence to support your claim that the true problem is moving words? I'm really not convinced. I feel especially with OS X's inertial scrolling that I can naturally keep track of where I am in an article while scrolling, it has never bothered me.

This just feels like fancy pagination. I tried partially scrolling ahead as I was reading and it disoriented me further, because the upcoming text was showing up at the top, behind where my eyes were, replacing the old text. This is confusing and not better.

[+] wtracy|13 years ago|reply
Have you ever tried reading a web page over a person's shoulder while they occasionally scroll up and down? It's really jarring (though turning on Firefox's "smooth scrolling" helps.)

I'm not sure that I like the results of this experiment, but I completely understand the motivation behind it.

[+] kybernetikos|13 years ago|reply
In fact, speed readers generally move the words, because moving the eyes slow down your reading. You're basically blind during a saccade.
[+] rdwallis|13 years ago|reply
Just anecdotal but magicscroll.net is a pretty popular ebook reader. Though that might be inspite of the scrolling rather than because of it.

For everyone who doesn't like it immediately please try it for a few days if you're able. I'm working against decades of learnt behavior so I don't think you can judge it on immediate impressions.

[+] Sandman|13 years ago|reply
I'm not sure if this is really an improvement. With traditional scrolling, my eyes stay at about the same position while I scroll. With this scrolling, however, after I've finished reading the last line, I need to look up again. And when I scroll backwards, I need to constantly remind myself to look down after I've read the topmost line. Traditional scrolling doesn't brake the reading rhythm (at least in my case), but this one does.
[+] Dove|13 years ago|reply
Not an improvement for me.

I almost always keep what I'm reading near the top of the screen. I like to be able to scan ahead, read the lead lines on coming paragraphs, see how close I am to the end of the sentence/paragraph/chapter, or even just track my position in the larger context of the piece. Pagination disrupts that near the bottom of a page.

I can live with pagination if I have to, but I much prefer to scroll. It's interesting, because maximizing the size of my look-ahead viewport leads me to make the opposite optimization: I like my text to move a lot.

[+] jackolas|13 years ago|reply
This is a fundamentally wrong understanding of how reading works. This way may be ideal for close reading but full speed reading needs the whole page and the ability to bounce around visually.
[+] Jabbles|13 years ago|reply
What benefit does this have over scrolling = next page? Your eyes have to refocus on the top of the page anyway, you might as well have refreshed the whole text, not just the top line of the second line.

Interesting idea though - what does this do on a touch device?

[+] LarrySDonald|13 years ago|reply
This is already standard on ereaders, nearly all (even if it's a tablet or PC app) do this. I don't like it, more than 1/3rd of the time a page turn is accompanied by a "back to last page, back to current page" as it annihilates my flow (yes, that includes dead trees).

VT100 may have something to do with this though. Straight scroll isn't optimal either. When reading long texts, I prefer to have it presented in chunks, but retain 1/8th-1/4th of the information I was already looking at in case I need to refresh where I was just now. If I can't have that, a straight scroll (bar or paper) is preferable, and if I can't have that, page to page isn't so bad either.

[+] rdwallis|13 years ago|reply
It doesn't scroll on touch devices. You do get the pagination though.
[+] liber8|13 years ago|reply
This could help to read faster, but as is, it does not. By leaving the last page visible, it makes the screen cluttered, and actually harder to read.

If, upon starting to scroll, the previous page were either whited-out entirely, or the contrast was greatly reduced, I think this would be much better.

[+] DanBC|13 years ago|reply
I sort of really like this.

I want a progress bar at the bottom, with filled and unfilled segments. (Or for that to be an option.) I'd like the 'transition ruler bar thing' to be bigger, maybe a 3 pixel feathering would be enough. And it'd be nice if I could have some customisation over speed. It was very fast, which is good, but I think I want some kind of acceleration style movement in there?

Somehow I got stuck at 99.99%, which is going to be frustrating for some people!

Anyway, it's neat.

[+] nlawalker|13 years ago|reply
Great experiment.

Everyone reads differently and looks for different things in a reading experience (if you couldn't already tell by the comments). I remember once when I was in elementary school, a teacher suggested to kids that were having trouble focusing or who were losing their place that they should use a piece of paper to obscure everything below the line they were reading and slide it down the page as they went. For reading on a screen, reflowing and resizable text can helped greatly with focus and "losing place" problems (I love Readability), but the "scroll line" concept you've got here has the potential to maybe go a bit further.

I think that if you blanked out everything below the scroll line, or everything below a good-sized margin of it (so as to preserve some of the text from the previous "page", to enable a bit of bouncing back and forth), you'd have a pretty good, functional recreation of that, and some people might find it pretty useful.

[+] mistercow|13 years ago|reply
What I really want is almost the exact opposite of this. For long text, I want smart autoscroll that uses eye-tracking to keep me from ever having to make a manual adjustment. If my eyes are pointed at the bottom of the screen, speed up the scroll, and if they're at the top of the screen, slow down/reverse. With this kind of feedback system, the eye tracking doesn't even need to be all that precise.

I've used Enable Viacam (http://eviacam.sourceforge.net/index.php) to sort of do this using head tracking, but you don't really move your head that much when reading, and it's too sensitive to changes in seating position.

If this could be implemented correctly, I think the result would be a superior reading experience to any alternative so far.

[+] iota|13 years ago|reply
A drop shadow under the scroll boundary would be a nice way to differentiate between what's on the "bottom" page and the new content on "top."
[+] delinka|13 years ago|reply
Nope. Because I like to keep the content I'm actually reading this instant in the middle third of the screen whenever it's possible. Physical media prevent this. It's a computer, it's made to serve me, that's how I like it.

While we're on scrolling, I want my browser to act the right way all the time: I hate that scrolling becomes zooming on maps-- hate, hate, hate. I want scroll to pan the map.

May I continue on this path that's headed off topic? The backspace/delete key is not navigation - don't navigate history when I backspace; because sometimes, the text field gets defocused, I think I'm about to delete text and blam previous page and my form filling was for naught.

</rant>

[+] undershirt|13 years ago|reply
Wow! I think this is a remarkable alternative scrolling method. Instead of the current "camera-panning" across a single long page, this "unrolls" the next page over the previous.

It matches the aesthetic of a printed book, but differently through this "unrolling" model. I think it's a great blend between a book and a single screen. The words are fixed, but you still have the smooth moving window of what's before and after your current sentence.

And perhaps this is less important but neat: it allows you to remember where certain passages were by position on the page since they don't move.

Great job on this. I'll be trying it out in the coming weeks.