Crocodoc's HTML5 page flip(web.crocodoc.com)
web.crocodoc.com
Crocodoc's HTML5 page flip
http://web.crocodoc.com/experiments/html5-page-flip/
19 comments
The focus of this experiment isn't so much proposing new UX that we think should be adopted. More so, this experiment is to showcase what is now possible using the newest HTML5 features - to provide inspiration for those trying to implement novel HTML5 animations. A page flip allowed us to show off some of my favorite new HTML5 effects.
Agreed. HN loves to criticize Apple for forcing their UIs to mimic real-life (think Newsstand, leather stitching, etc), but still considers things like this desirable.
From a technical perspective, it's cool. Please don't use this on real sites!
From a technical perspective, it's cool. Please don't use this on real sites!
>HN loves to criticize Apple for forcing their UIs to mimic real-life (think Newsstand, leather stitching, etc)
Ornament does not impact usability. In your two listed examples, they do not influence how the user interacts with the software.
This page flip is an example of mimicking real-world interaction and not just appearance.
Ornament does not impact usability. In your two listed examples, they do not influence how the user interacts with the software.
This page flip is an example of mimicking real-world interaction and not just appearance.
The whole "Apple's skeuomorphism is bad" meme was blown out of proportion. Hundreds of millions of people use bloody DVD/Video/Music player UIs that resemble in tiny detail AND behavior an actual dvd/cd player for no good reason, and then complain about the "leather stitching" on iCal, which is a purely _cosmetic_ addition.
The BAD kind of skeuomorphism is mimicking real life object behavior, when a different approach is both possible and more easy to use in software. That is, UIs like this:
http://codecpack.co/images/BlazeDVD.jpg
It has nothing to do about having faux-leather on your background.
Page flipping, which Apple uses in iBooks, is such an example of bad sceuomorphism.
But most other Apple's sceuomorphism criticism is about irrelevant fad designer preferences for clear-cut modernist LOOKS (e.g Metro style, flat etc). Those things are fads, and come and go. The same guys were all over "lickable interfaces, drop shadows, embossed elements, etc" a few years back. Actually, circa 2005-7, it was a whole movement of developers using such visual sceuomorphic and ornamental details, named the "Delicious Generation".
To see that the LOOK part of design (and not behavior, e.g look&feel) is all about fads, consider the case of Jonathan Ives again. The same "minimal, aluminum+glass" guy, was the one who designed the flower-power iMac back in the day:
http://www.giantmike.com/articles/picts/flowerpower.jpg ).
The BAD kind of skeuomorphism is mimicking real life object behavior, when a different approach is both possible and more easy to use in software. That is, UIs like this:
http://codecpack.co/images/BlazeDVD.jpg
It has nothing to do about having faux-leather on your background.
Page flipping, which Apple uses in iBooks, is such an example of bad sceuomorphism.
But most other Apple's sceuomorphism criticism is about irrelevant fad designer preferences for clear-cut modernist LOOKS (e.g Metro style, flat etc). Those things are fads, and come and go. The same guys were all over "lickable interfaces, drop shadows, embossed elements, etc" a few years back. Actually, circa 2005-7, it was a whole movement of developers using such visual sceuomorphic and ornamental details, named the "Delicious Generation".
To see that the LOOK part of design (and not behavior, e.g look&feel) is all about fads, consider the case of Jonathan Ives again. The same "minimal, aluminum+glass" guy, was the one who designed the flower-power iMac back in the day:
http://www.giantmike.com/articles/picts/flowerpower.jpg ).
Agreed, I spent 10 seconds trying to figure out how to turn the page. At a minimum there should be arrow buttons that trigger the fancy page flip animation.
Can't wait to see CSS Shaders land, then we can do this and correctly deform the HTML to make it look like it is on the "paper" (instead of being clipped to the paper). Still, with the curves they use it looks pretty good as is.
It's nice to see the web platform is capable of effects like this and I think the "usability" complaints in other comments are lame. You could use this to hide controls underneath a UI (ala Maps on iOS), for example (though maybe if you're "zen of palm"ing it you'd rather minimize clicks and put buttons everywhere, your choice); it doesn't have to replace scrolling.
It's nice to see the web platform is capable of effects like this and I think the "usability" complaints in other comments are lame. You could use this to hide controls underneath a UI (ala Maps on iOS), for example (though maybe if you're "zen of palm"ing it you'd rather minimize clicks and put buttons everywhere, your choice); it doesn't have to replace scrolling.
Great point about the usability possibilities. There are probably tons of creative ways to use this effect since it's SVG based. I found myself assuming too that this would be used as presented (as a flipbook) so I think this experiment becomes even cooler once you get outside that frame of reference.
While this is (technically) interesting, I don't see it being useful at all on a computer. Page curls are good on devices that can somewhat mimic a page but it really just feels awkward with a mouse or trackpad.
Zoelle from Crocodoc here. I completely agree with your assessment. Our goal here is to explore what's possible from a technical standpoint using SVG — we don't mean to suggest that this page flip interaction should actually be used when reading documents!
When done well, a skeuomorph helps a user to feel comfortable with an interface. Slight textures in digital interfaces help them to feel tactile. Good skeuomorphs take cues from an analog world to help a user navigate a digital one. when done poorly, the skeuomorph forces the user to deal with an interface in an outdated way by blatantly ignoring the fact that the interaction is being done on a platform that is capable of handling new and improved interactions.
This "page turn" skeuomorph really bothers me. If there is to be any animation at all, it should be to cover up load time, and the user should not have to click and drag with an extremely RSI-incuding stroke to get the page to turn. It feels like the page weighs 50 pounds. Digital interfaces are not material. They are supposed to be frictionless. They are supposed to take the work out of interaction.
I want to click on the right side of the page and have the animation quickly play so that I can get to my content. Focusing on the entire page flip takes me right out of the content.
I know that a book in real life takes some effort to hold, and some effort to flip a page, but designers should really reconsider designs that "look pretty" but keep that same effort around when they translate a book into a digital format.
I cringed when I first saw this kind of behavior in Flash. One or two people figured out how to program a page turner, released a tutorial and everyone was off to the races to create their own. Excellent programming exercise - extremely bothersome UX. Now we can see the entire thing play out again, in high def CSS!
This "page turn" skeuomorph really bothers me. If there is to be any animation at all, it should be to cover up load time, and the user should not have to click and drag with an extremely RSI-incuding stroke to get the page to turn. It feels like the page weighs 50 pounds. Digital interfaces are not material. They are supposed to be frictionless. They are supposed to take the work out of interaction.
I want to click on the right side of the page and have the animation quickly play so that I can get to my content. Focusing on the entire page flip takes me right out of the content.
I know that a book in real life takes some effort to hold, and some effort to flip a page, but designers should really reconsider designs that "look pretty" but keep that same effort around when they translate a book into a digital format.
I cringed when I first saw this kind of behavior in Flash. One or two people figured out how to program a page turner, released a tutorial and everyone was off to the races to create their own. Excellent programming exercise - extremely bothersome UX. Now we can see the entire thing play out again, in high def CSS!
First thought: this might actually make sense on tablets.
Totally doesn't work on my iPad.
Totally doesn't work on my iPad.
Some time ago, Google released http://www.20thingsilearned.com and the source -> http://code.google.com/p/20thingsilearned/
I can't get the pager flip to go all the way over. I am using Windows 7/Chrome and clicking/dragging the bottom corner. I can't get the first page to go past the paperclip. I feel silly asking, but what am I doing wrong?
Much smoother without the shadow. I can't believe we're there already, the worlds famous page flipper without flash :)
I don't get it, looks like a huge POS on my screen (10 inch netbook, see screenshot)
https://picasaweb.google.com/lh/photo/ScOWQmywYCDt9sJu0nQaWc...
Same on my nexus 7 and I can mostly read the page but it still does not work on galaxy nexus. Chrome for both.
Great stuff Peter, thanks for sharing the latest at Crocodoc!
This doesn't seem to be working for me in the latest Firefox.
hover over the bottom right corner and grab the page from there. I thought the same thing at first.
The comments on this article border on shameful. Props to crocodoc for building this. The demo is really good, and there is a lot of impressive attention to detail: try pulling a page up while a page is already flipped.
Screw the misplaced hate and self-righteous UX criticisms. This is a tech demo. Much like chrome experiments. Appreciate it for what it is.
Screw the misplaced hate and self-righteous UX criticisms. This is a tech demo. Much like chrome experiments. Appreciate it for what it is.
I've seen this done a couple of different times, and it still makes zero sense from a usability standpoint. What is wrong with vertical scrolling? The entire gesture of clicking and dragging is awkward and makes zero sense when using a computer to read content.
Annnnnnnnnnnd if I don't your using page flip, how am I supposed to figure out how to use this page, or know if there's even additional pages I should see?
Interesting concept, but the user experience is seriously lacking.
Interesting concept, but the user experience is seriously lacking.
Yeah, you should try that in IE 10. Probably looks much more different than Webkit and Mozilla.
Does not work on iPad
wow, this is super cool. Good work!
What if this is specifically intended to be a tablet-only user experience? Suddenly it makes sense.
Please stop spreading bad UX, leave page flipping to actual pages/paper.