
Crocodoc's HTML5 page flip - peterlai
http://web.crocodoc.com/experiments/html5-page-flip/
======
overshard
This is cool from a programming perspective but it is poor UX. I believe
everyone on HN knows this but the problem area are my clients. They run across
stuff like this and think it looks cool/fun. Instead of listening to reason
they demand stuff like this and end up with bad websites because all I can do
it advise them but then make what they want.

Please stop spreading bad UX, leave page flipping to actual pages/paper.

~~~
dale386
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!

~~~
bluthru
>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.

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

~~~
jameshsi
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.

------
dcope
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
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!

------
caseorganic
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!

------
noonespecial
First thought: this might actually make sense on tablets.

Totally doesn't work on my iPad.

------
martyfm
Some time ago, Google released <http://www.20thingsilearned.com> and the
source -> <http://code.google.com/p/20thingsilearned/>

------
pgrote
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?

~~~
mikeryan
I'm pretty sure thats the way its designed. I think its supposed to stick at
the clip like a real piece of paper would at an actual paper clip.

~~~
pgrote
Thanks. I considered that, so, I tried to remove the paper clip. I couldn't.
lol

------
taude
Is this supposed to do something on my iPad? Doesn't seem like the metaphor is
really appropriate for non-tablet devices and this isnt working on my iPad.

~~~
peterlai
I haven't yet gotten it to work on mobile devices. Do try it again from
Firefox or Chrome!

------
pacomerh
Much smoother without the shadow. I can't believe we're there already, the
worlds famous page flipper without flash :)

------
hayksaakian
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...](https://picasaweb.google.com/lh/photo/ScOWQmywYCDt9sJu0nQaWcs4WckHW8ofRKlVOjAf3-s)

~~~
hayksaakian
Same on my nexus 7 and I can mostly read the page but it still does not work
on galaxy nexus. Chrome for both.

------
timpeterson
Great stuff Peter, thanks for sharing the latest at Crocodoc!

------
debacle
This doesn't seem to be working for me in the latest Firefox.

~~~
RandallBrown
hover over the bottom right corner and grab the page from there. I thought the
same thing at first.

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

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

------
at-fates-hands
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.

------
alpb
Yeah, you should try that in IE 10. Probably looks much more different than
Webkit and Mozilla.

------
antimora
Does not work on iPad

------
jlm382
wow, this is super cool. Good work!

------
Toshio
What if this is specifically intended to be a tablet-only user experience?
Suddenly it makes sense.

