307 comments

[ 3.3 ms ] story [ 234 ms ] thread
The bookmarklet & chrome extension are partly based on readability.js.

The code is open source and available at https://github.com/rdwallis/MagicScrollWebReader if you want to have a poke at it.

i just want to mention something about the "Sorry, MagicScroll was unable to parse this page" window.

because "Report This Page" is the only button, i instinctively hit it under the muscle-memory assumption that it's the back/escape button. chances are you're going to get a good deal of noise from beginners because of this

Works perfectly on Chrome (24.0) but nothing happens on Firefox (18.0).
Thanks. Can I ask what OS are you using and what mouse?
Windows 7 64bits and a standard usb mouse. I haven't tested the bookmarklet though, I was talking about the website itself: scrolling doesn't do anything and pressing H doesn't display anything either. I went to check the "Alice in Wonderland" ebook on your main website and everything seems to work perfectly there.
I found some stickyness on Firefox 18. I've deployed a fix but I put a 24 hour cache in front of the page before posting it to hn so it'll probably only update for you this time tomorrow.
Running FireFox ESR 10.0.7 here; that's broken too. I'll check back tomorrow then.
Fox 18 on XP here and I can't get anything to work, either. Mouse scrollwheel, spacebar, arrow keys all do nothing.

In addition, I don't know if you're using any light gray for visual cues. That's a problem. My screen is crap with shot contrast and light gray tends to become white that I can't see. I wish to hell everyone would stop using light gray everywhere.

Going back and forth between your page and HN by using the browser button doesn't return me to the exact same place I left on your page. Traditional scrolling does that, though. I wonder if that would be easy to implement without a browser extension.
Yes, this is hard to keep track of even after window resizes which changes how many words appear on each page. To do it I'd need to store info about page position in local storage. which is possible with the extension but might be a bit too much effort. I can't think of a way to do it with the bookmarklet at the moment.
Why not use pushState or store this info in the url hash? Both of these will allow you to save bits of info in the url that can be used to make a nice back button experience.
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?

It doesn't scroll on touch devices. You do get the pagination though.
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.

Yeah, it's like "Congratulations, you just invented a Kindle."
You mean "paper". It's called paper. What are you, a savage who's never seen a book in his life?
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.
This isn't a particularly good idea for competent readers who typically scan entire blocks of sentences at a time. The scrolling effect just slows them down.
Hitting space to page down/over doesn't. Instead it starts a very slow scroll. Hitting space again stops it, so it almost seems intentional, but in any case it breaks the most common scroll method for me. Mac 10.6.8/Chrome 23.0.x.
According to the help, it is intentional.
I accidentally clicked my mouse on page load and all content disappeared. There was absolutely no indication of how to get it back. I do not want the world to scroll this way.
I hate to be picky (well actually...), but you appear to be complaining about a bug on the site causing all content to disappear and then concluding that the scrolling effect is rubbish.

Your conclusion may be valid, but I don't think the bug you found has anything to do with it.

Maybe, but I don't think so. Content also disappears if you scroll using the mouse wheel (but more slowly, so there is some indication on how to get it back). However, nowhere else on the entire web does scrolling ever remove content from the page. I've never seen that happen, and there are multiple ways to accidentally remove content from this page.

Maybe it's just a bug, but it seems intentional and it ruins the experience for me.

Every time I scroll down a web page, content disappears off the top of the screen.

Are we talking about the same thing?

No, we're not, I guess. If you scroll down on a web page, the content becomes invisible off the top of the screen but it has not disappeared. You can still interact with it. You can select it. You can search for it. It's still there. With this, it's completely gone.
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.

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.

I see. Well, it's a bold experiment and you're definitely thinking outside the box. Do you intend the user to scroll as they are reading, or to have them wait until they finish a page and scroll entirely over to the next? I find the former hard to get used to, and the latter is just pagination. So maybe I'm a bit confused on how exactly this is meant to be used.
If you use the extension or the main site ebook reader you can set it to scroll at a specific word per minute speed.

It works really well over long texts and often your screensaver will come on before you need to adjust anything.

It's normally best to set the speed to just slower than your natural speed, so that you don't feel that you're racing the line.

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.

I'm not sure that's relevant, though, because someone else is controlling the scrolling according to what they are reading. That it interferes with your reading is unsurprising, and I don't think says much about the reading experience when you are in control.
my mom has trouble using computers because of the scrolling. i imagine it's something in the same category as how i can't read anything in a moving vehicle without getting a ginormous headache, but other people don't have trouble with it :|
Okay, but that's kind of a non-sequitur in reply to my comment, which was pointing out that you can't conclude much about reading-with-scrolling when someone else controls the scrolling.
Have you ever tried reading a book over someone's shoulder? Or a newspaper someone else is holding up in front of you? Most people have to reach out and grab it themselves before it's comfortable to read. I think it is just a motor/sight sync issue for most people.
In fact, speed readers generally move the words, because moving the eyes slow down your reading. You're basically blind during a saccade.
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.
It's a very interested and unique way of looking at scrolling, that's for sure. And I'm with you, I like this type of experimentation.

One thing I find tough to deal with is the default amount of characters "scrolled" for a given mouse wheel move: the default takes way too long for my tastes. I find around 50 characters a lot nicer. Also, what about co-opting the scrollbar? It's a much more natural and smooth scroll as compared to the mousewheel, giving users more precise control over how much to scroll.

I felt like the huge font size defeated the purpose here, because I had to move my eyes more than ever. I like the idea though.
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.
I agree, it's easier to read when you can keep your eyes at approximately the same level.

Even when reading something on paper I'll find myself actually moving the book itself further away from me as I read down the page.

This design is also harder to skim, because you need to keep moving your eyes back up as you scroll.

It is in fact impossible to skim with this. You're very right.
What's wrong with pressing the spacebar (other than the fact that pages with crappy CSS headers will scroll so that you skip an amount of text equal to the height of the header)?
It seems to be broken on Android. Clicking on the arrow makes everything disappear.
This is an effect, not a functionality.
I love this. Very smooth in Mac 10.7.5/Chrome 24.0.x. I'm sort of stunned that an annoyance with moving text has never occurred to me consciously.
Perhaps moving text is not an annoyance? I have never been annoyed by an annoyance that never occurs.
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.

Do you hate it because its bad, or do you hate it because it's different?
Because it is bad.
I want to reiterate this - scrolling is good if you can do endless page scrolling and keep your eyes in one place, while moving the text to match them. I always continuously scroll articles I read so that my current line stays near or at the top of the page. Much better than a tiny black bar moving down the page while I have to move my eyes.
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.

(comment deleted)
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.

"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.
Like, you'll get used to inverted scroll in Mountain Lion?

Innovation takes getting used to, evolution doesn't.

I never got used to that, it seemed totally backwards to me. I can deal with it on a screen where my finger is (almost) physically attached to what I'm scrolling, but not on a detached mouse/trackpad and display.
I actually got used to it fairly quickly. After a day or two I instinctively used reverse (or "natural") scrolling, and I can switch back pretty easily when I'm using other people's computers. It does seem like almost no one else switched though.
I didn't just get used to the inverted scrolling, I fell in love with it. I think it makes perfect sense, and fells more "connected" with what I'm doing.
Eh, I hate it, personally. It's the first thing I disable when installing Mountain Lion.
this is a surefire way to not get used to it.
Loved that feature, it feels so much more natural. It was only a problem when I had to use a windows computer for like 5 minutes and everything was inverted again.
Yeah, that is how I felt at first as well. But I regularly use a Windows VM / Remote Desktop Client for Windows on my Mac, so I've gotten used to scrolling one way in the VM window or the RDC, and the other way outside it in the rest of my Mac.

Now, for better or worse, I have no problems switching my scrolling when I'm using someone's Windows computer.

My work computer is windows, and it was driving me nuts to have to reverse scroll... I found that I could invert scrolling on windows with the AutoHotKey app. Works pretty well.
This is why I try not to overtweak my computer. Sure I could rice the whole thing out, but then I'm useless on any other machine. I try to strike a happy medium where I'm reasonably productive but can still use another computer when I have to.
I took the plunge and tried inverted scroll. At first it seemed weird, but after a day or so it felt like the most natural thing ever (and I've been using Macs since 1984). Now I find it difficult to go back to 'wrong way' scrolling.
I dunno, I have tried it, and it was ok after a bit on the touchpad. Then I plugged in a mouse. Did not work at all. I could not use it like that. So now I have scroll reverser[1] to scroll that way with just the trackpad. But really, I was flipping back and forth with the settings (there was something weird with the back/forward swipes for browsers) I don't even know which way it is right now. But it doesn't matter, as soon as I start moving it I can get feedback and do it correctly. So I can get used to having it flipped on me rather quickly. I might make some false starts.

[1]: http://pilotmoon.com/scrollreverser/

I'm completely sold on inverted scroll. 100%. It maps to touch interfaces and touch pads, it's "moving content" instead of moving that little (mostly invisible in Mountain Lion) progress bar, and the "moving content" concept fits extremely well with smooth deceleration - it always slides to a stop at the same distance after you've gone the same speed. The scroll bar becomes a progress bar and almost nothing else.
for what it's worth, I use "natural scrolling" in mountain lion
I got used to it when scrolling forward. When you want to scroll back up, though, this approach really seems to break down.
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.

Or if the dividing line was twenty times thicker. When pages are narrow, my brain tends to start reading the next line before it is finished reading the first line. Imagine how well this works out for me when the "next line" is not only from the previous page, but currently cut in half by the scroll line.
Yes! That was the 1st thing I thought as well. If you could make the previous text disappear or set it at 30% opacity it wouldn't even ned a divider. I like the way this reads. I'd like to see it as a feature for iBooks / e-readers.
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.

It's the difference between moving the page and moving your eyes.
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.)

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

So it's basically incremental paging with a lot more work.
A lot of negativity in the comments. I for one really like this. No loss of focus when scrolling and no flicker from clicking 'next page'. Great idea.
Needs bigger margin or indication of what the 'last' page was. When it's scrolling down my eyes want to read that line and immediately jump to the middle of the last page, as that is where the line is. Make the last page darker or something.

You also have no idea how long-winded an article is and if you need to tldr;

There is a bug where when I scroll to the next page, all the old text from the previous page still shows. (using latest firefox on OS X)

It would be nice to use this method with some texts I want to read...but definetley not all.

Can't scan.

Probably would be really good to read an academic paper I really want to grasp a second time.

Good experiment!

Edit: (Since it said it was Chrome only...tried it with Chrome, text from previous page still shows up...)

It's not a bug, its a feature.
Yuk, but kudos for trying it out and I can imagine that you're not the only one who will like this.
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.

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.

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.

I would add one thing to make it much more clear: darken the text below the divider to give a clue that it was invalidated

even better, have a background gradient corresponding to the "age" of the horizontal line that's being shown

the gradient would make a subtle but intuitive hint as the movement commenced!!!

I can only say that, scrolling with a touchpad gesture (OSX), I fully agree with pertinhower and completely disagree with yours.
I too am on OSX (10.8.2) Perhaps it is your browser? I am using Chrome (Latest Version - 24.0.1312.52)