I think that is a bug in the hardware acceleration of Chrome. I've got the same problem on my website where I use CSS to do a crossfade on the background image. Everytime the images are crossfading all the text on the website gets blurry.
By the way, if someone knows the real problem and, even better, a solution for it, I'm very interested.
This is cool and I don't mean to disparage the work that went into it, but at the same time I hope nobody actually uses it because just plain old vertical scrolling web pages are way more practically usable.
It's a good alternative to Flash. I don't think people really advocate the effect as a replacement for normal scrolling paradigms. There are some specific cases where it might make sense to do it and it's great that those pages will no longer be forced into Flash.
> There are some specific cases where it might make sense to do it
Like when your client demands it and you give in?
I've used pageflip in the past and grew to abhor it. It's only quality is the cool factor, which we got over 6 years ago. I hate magazines that use it for their "digital" version.
There's also a reason it is used. A typical magazine layout does not translate well on an vertical scrolling page. This is one solution to a conversion problem. There's not always a "BEST" solution to that kind of thing. There are trade-offs no matter what you choose to do. However, providing different ways to view the same information is usually a good practice.
I wonder what is the "user" perspective on this. I am not sure everyone hates it - since it feels familiar in terms of structure.
I agree, but the trade-offs depend on your goals, and for each of those there is a best solution. If you want to provide a good reading experience on the web, you have to use appropriate layouts.
This isn't necessarily true. For instance, if A and B are each measurable characteristics of potential solutions and your goal values A and B equally, if all other characteristics of solutions X and Y are equal, but X={A:2, B:7, ...} and Y={A:7, B:2, ...}, then X and Y are equally "good" solutions according to your goal.
We've used a similar effect in a sales collateral portal. We have a bunch of PDF sales sheets, and small brochures. The client wanted sales reps to be able to preview the PDF in a more lightweight form, and the page turn helps visualize the printed layout a bit.
>Like when your client demands it and you give in?
Someone in this thread gave a great example: their company makes "photobooks" and this effect is used in the preview before you order to make it feel more "real". I think that's a legitimate use.
Obviously, magazines that just plaster pieces of the PDF on and then demand the page flip are not usable or accessible, but there are other uses for something like this.
Of course, using a paper simulator to showcase printed material makes complete sense :)
My comment was related to the (common) case where someone thinks this is the best way to adapt printed content to the web, and that people actually want virtual magazines instead of something suited to screen reading/interaction. Fortunately that appears to be a dying mindset.
There are still a lot of print-trained editors and other publishing roles out there. The more the UX metaphor relates to past models the more secure they are in their positions. I simply think this, along with a smidgen of gewgaw for the animation, is the simplest explanation. It's easier for a pageflip model to be approved by oldschoolers.
Yeah, this script reminded me of an old photo-flipbook program that wasy available a long time ago (I think for Windows 3.1x). At first the effect seemed "neat", but after browsing hundreds of photos with the same effect the novelty weared out and it became cumbersome.
> At first the effect seemed "neat", but after [repeated use] the novelty wore off and it became cumbersome
I find the same with virtually all animations on phones and other UIs. If it can show me what I want a smidgen quicker by not animating then it gets disabled.
I think so to, but usability research done by a partner company of ours showed, to their and our surprise, that "ordinary users" prefer this page turning effect.
what sort of usablity research? did you show users a page with and without page turn effects and ask them which they prefer, or did you actually monitor their usage over an extended period and see which pattern encouraged more use?
because of course your users say they like the flashy effects, but you should never listen to your users when they say things like that. that's the sort of thinking that leads to sounds when buttons are pressed.
I would question this result in almost every meaningful demographic. I've sat and watched people fail to discover non-standard navigation methods countless times in testing of products across 12-18 and 20-60 (students and teachers separately) every time one is provided as part of a supplier product. Unless there was some kind of conscious or subconscious prompting going on I would doubt that anyone would genuinely favor it.
You can easily, to the detriment of results, create an environment where people say they like something when really they like the impact the the thing had on them the first time ("oh, cool") when really they don't prefer it at all but the record only reflects their initial impression.
Demographics are more varied than that though - they also vary by Country. Take Denmark, the birthplace of several of the major players in flip catalogs - online flip based catalogs are so common that every internet going user knows what they are, and how to interact with them.
With such a common use of them, we can start looking at how to optimize the catalog format itself, rather than stick with the scrolling vs. catalog format discussion.
Usability and prefer are two words that are dangerous when used together. While it worked, I found it completely unusable on my phone and tablet. I'm not sure the mouse would serve any better either.
I would have to know more about the study to know if this is meaningful. When people see something novel (to them) they often think they prefer it to whatever the old thing is simply due to the novelty. But they might change their mind if they were actually forced to use the new method for some time.
Case in point: touchscreens replacing dials and switches in cars -- cool right? So flexible! But no, in reality they suck and you can't use them at all without becoming a danger to yourself and everyone else on the road. Physical dials and switches are way better because they can be controlled without actually looking at them. But this is something that takes a while to become obvious to people (in fact, car makers are still fucking this up).
I hate things like this. Take the iPad: to turn a page, I have to wave my hand over the screen, obscuring the text in process. For no reason beyond familiarity.
I couldn't agree more. All the CSS3/HTML5 craze really worries me. With all the new tools we have available, it's more important than ever to remember that with great power comes great responsibility (to care about our users).
It looks snazzy, but the example does a brilliant job of defeating the object. It works with flipping pages to see more content, but then you have overflowing content on one page that requires vertical scrolling* to see it all.
I've never come across a book that requires me to do something other than turn the page to read more.
*This is also broken (presumably in an attempt to prevent scrollbars appearing), and requires a click and drag to work normally.
I've worked on an app that allows people to upload their photos to make actual photobooks. In this case it's nice to be able to show them what the book will look like. That app uses something in flash, but this HTML5 thing looks better.
iPad 1 was useful most of the time, when you knew of the weak performance. But iPad1 with iOS 5 is a useless piece of metal and glass. It literally takes 2 second to unlock.
The minified/gzipped jQuery on that page is 32.8k.
The gzipped turn.min.js it comes out to 6k.
It's like half of this comments page is filled with people TRYING to come up with something overly critical to say. What a negative site this place has become.
Jeez man, I explicitly prefaced my comment with "nitpick", as in "minor quibble" as in "not overly important." I can't help not many people get very excited by a page turn animation.
Well, in your case, in addition to not overly important, your point is flat out wrong.
My frustration isn't with you in particular, it's just that HN doesn't seem to be able to enjoy a good hack anymore. It's just a circlejerk of people saying <some cool thing> isn't suitable for widespread use.
Nice effect, but the fact the page becomes blurry when I have my mouse over the "next page" button is annoying. I have to move the mouse away while reading and back when I want to turn the page. I'd prefer to just not move the mouse and roll a scroll wheel. (Actually, that's a lie - I'd rather not touch the mouse at all and just press j.)
Doesn't happen here; the page doesn't change when I move the mouse over the "next page" corner, other than the folding up of that corner. Everything remains crisp. What browser did you use?
I see that blurring too. I'm using Chromium 14.xx on Linux (yeah, it's old). Makes it impossible to hover the mouse cursor over the "next page" button.
I've seen many other CSS effects suffer from the same issue. This apparently happens when the element is rendered to a texture first and then applied to the screen using a filtered texture sampling (in the GPU).
81 comments
[ 6.6 ms ] story [ 161 ms ] threadVertical would also be awesome (think notepad [of paper])...
By the way, if someone knows the real problem and, even better, a solution for it, I'm very interested.
Like when your client demands it and you give in?
I've used pageflip in the past and grew to abhor it. It's only quality is the cool factor, which we got over 6 years ago. I hate magazines that use it for their "digital" version.
I wonder what is the "user" perspective on this. I am not sure everyone hates it - since it feels familiar in terms of structure.
This isn't necessarily true. For instance, if A and B are each measurable characteristics of potential solutions and your goal values A and B equally, if all other characteristics of solutions X and Y are equal, but X={A:2, B:7, ...} and Y={A:7, B:2, ...}, then X and Y are equally "good" solutions according to your goal.
Someone in this thread gave a great example: their company makes "photobooks" and this effect is used in the preview before you order to make it feel more "real". I think that's a legitimate use.
Obviously, magazines that just plaster pieces of the PDF on and then demand the page flip are not usable or accessible, but there are other uses for something like this.
My comment was related to the (common) case where someone thinks this is the best way to adapt printed content to the web, and that people actually want virtual magazines instead of something suited to screen reading/interaction. Fortunately that appears to be a dying mindset.
I find the same with virtually all animations on phones and other UIs. If it can show me what I want a smidgen quicker by not animating then it gets disabled.
because of course your users say they like the flashy effects, but you should never listen to your users when they say things like that. that's the sort of thinking that leads to sounds when buttons are pressed.
You can easily, to the detriment of results, create an environment where people say they like something when really they like the impact the the thing had on them the first time ("oh, cool") when really they don't prefer it at all but the record only reflects their initial impression.
With such a common use of them, we can start looking at how to optimize the catalog format itself, rather than stick with the scrolling vs. catalog format discussion.
Case in point: touchscreens replacing dials and switches in cars -- cool right? So flexible! But no, in reality they suck and you can't use them at all without becoming a danger to yourself and everyone else on the road. Physical dials and switches are way better because they can be controlled without actually looking at them. But this is something that takes a while to become obvious to people (in fact, car makers are still fucking this up).
Several years ago I had to buy flash version of this for some 70pounds or so.
On a side note, please make your own arrow on the corner of that front page of the book. I think almost everybody knows where that's from...
Wonder how stable and smooth it is with large HTML pages, do we know?
The back button stuff you could make work with the html5 history API, correct?
There is no other benefit. It's a step backwards.
The real reason is things like this. Just because you CAN doesn't mean you SHOULD.
I've never come across a book that requires me to do something other than turn the page to read more.
*This is also broken (presumably in an attempt to prevent scrollbars appearing), and requires a click and drag to work normally.
Why not got a step further, force your app users to walk to a virtual book store in a 3D world before they can start reading.
The gzipped turn.min.js it comes out to 6k.
It's like half of this comments page is filled with people TRYING to come up with something overly critical to say. What a negative site this place has become.
My frustration isn't with you in particular, it's just that HN doesn't seem to be able to enjoy a good hack anymore. It's just a circlejerk of people saying <some cool thing> isn't suitable for widespread use.
I've seen many other CSS effects suffer from the same issue. This apparently happens when the element is rendered to a texture first and then applied to the screen using a filtered texture sampling (in the GPU).