Paginate the Web?
Web pages scroll, usually vertically. Is this a good thing?
I was reading an article that Deb pointed out from The Atlantic: “Is Google Making Us Stupid?” and I noticed something: I could easily keep attention on the page when I wasn’t scrolling. But as soon as I got to the bottom of the page, it was much harder to stay focused.
What if web browsers paginated articles by default, instead of laying them out in a vertical scroll view by default? Would that improve reader attention span, or just cause users to stop reading after the first page?
Is it possible to write a Firefox extension to render websites as paginated entities instead of scrolling entities? I suspect not, and that would require assistance from the core Gecko layout engine, but I think it would be a very interesting UI experiment!
October 28th, 2008 at 6:17 pm
It’s quite possible for a site to automatically make its content paginated, albeit a bit difficult and awkward. I don’t think you could do it as an extension, as Firefox wouldn’t have a clear idea of what is article content and what is general layout framework and navigation.
The trick is to use JS to see if the content of a particular div extends passed the viewport. If so, JS can keep removing paragraphs until the div content fits, append that content to another hidden div (representing another page), and repeating. This will create a series of divs representing pages. You can put the content into columns, which might also help quite a bit.
It would of course be much more efficient to have Gecko do it internally, and Gecko could break on line breaks instead of only on paragraph boundaries.
A less wild approach would be to just design your content to fit within a particular height and hope for the best. I’ve seen a couple sites that managed to get very nicely paginated content so long as you didn’t override the site’s font sizes or use a particularly small window size.
October 28th, 2008 at 6:44 pm
We have CSS columns to try this. We also have Javascripts solutions like the International Herald Tribune (see IHT.com, clic an article then “3 columns format”)… But there is a very big problem to this : your page must growing left to right instead to top to bottom, or you will have to do stupid scrollings to go from the end of a column to the top of the next one.
I already tried this.
October 28th, 2008 at 7:09 pm
I tried to trick Gecko into paginating content for Snowl (to get the column flow I wanted) by turning on print preview mode for the content. I was able to paginate it, but it looked pretty bad and didn’t behave well either.
Afterwards I tried something else that might be massagable to get close to what you want: modify the content to flow into viewport-wide columns, then capture PageUp/PageDown key events and jump left/right to the previous/next page when they occur. You could then hide the horizontal scrollbar so users aren’t able to scroll horizontally, replacing it with back/forward buttons on either side of the page for mouse-based users.
October 28th, 2008 at 7:09 pm
I suppose that there’s talk about CSS3 having a text-overflow property and that a pagination plugin would be easier if this CSS property could keep together (like XSL-FO keep-together) paragraphs and tables. A Firefox plugin could then take tall areas of the page and paginate them accordingly (if there was some way of querying the resulting viewport and where it truncated content).
October 28th, 2008 at 8:10 pm
CSS supports pagination as part of it’s printer support. If Mozilla has implemented it, can’t you use a local CSS sheet to reflow with pagination?
October 28th, 2008 at 8:19 pm
Isn’t something like this already implemented? It’s called Print Preview!
I suspect the problem is caused by the unnatural interface of keyboard / mouse that you’re presumably using to scroll the page. When you scroll the mousebar or click the down arrow, it’s really not intuitive what exactly will happen (e.g. how far it will scroll) which causes that moment of lost concentration.
I bet you find with a touch interface it’s easier to keep concentration. After all, sliding paper around doesn’t cause an issue. Maybe wait till that iMac Touch comes out?
October 28th, 2008 at 8:45 pm
Chris, I’m using two-finger scrolling on my mac trackpad, usually. But it doesn’t really matter: the scrolling action itself is what seems to be the problem. If the page just “jumped” without scrolling at all, perhaps it would be less distracting, but I really would prefer to just read one page at a time.
That also has the advantage that I can remember a particularly interesting paragraph was on page 4, instead of “somewhere around the middle of the page”.
October 29th, 2008 at 2:37 am
I have and use the “antipagination” extension a lot for precisely the reason of wanting to search those “multi-page” articles that are published with no print-friendly version for text I remember reading, without having to waste time backing and forthing.
If anyone implements this they’ll need to make Ctrl F integrate well enough for instant highlighting.
October 29th, 2008 at 3:39 am
It would help if Firefox supported page-break-after: avoid. The CSS is already there, people are just not using it. A page layout could be achieved using this, and key commands / touch gestures to switch pages side to side.
October 29th, 2008 at 5:09 am
With all these widesceen monitors it could be nice to divide the page in two. Don’t scroll down but just click the right page. The right page goes to the left and the next page is loaded on the right. This would also make it more intuitive to go back and forward in your history.
October 29th, 2008 at 9:36 am
I don’t really think this is the answer. Working for a larger site, I think the data generally shows that users consumption is way higher with what initially renders when the page loads.
Various tricks have been used by websites including tabs, (which essentially are a JS way of paginating content)… reality is most people never click on them. They consume what’s set in front of them.
There’s other tricks like animated flash/js based solutions which rotate… But that creates confusion (I missed the one I want!).
Reality is people are lazy, and most will consume only what’s in front of them. That’s why TV is popular. That’s why there’s valuable shelf space in stores, and worthless shelf space in stores (generally stuff to the right when you first walk in sells first as people see it first).
A better option would be to switch to an interface that requires user interaction. Perhaps something based on search. Because you interact from the start both parties (user and server) are working together to get the desired content. The server gets knowledge of what’s desired (rather than a best guess by editorial staff) and the client interacts rather than stares at it.
November 20th, 2008 at 5:31 pm
How is this different from the “page up / page down” buttons you already have? Niceties of layout and typography?
A lot of sites actually do divide even shortish articles into two or more web pages, though they’re not aggressive enough about it to prevent you from having to scroll. I’ve noticed it most on the web sites of established print-media players like the New York Times.
It wouldn’t be easy, but I bet you could hack almost all pages to avoid scrolling, using a simple GreaseMonkey or Ubiquity script. It would take a lot of heuristics and tinkering.