Space.js – HTML-driven narrative 3D-scrolling

Space.js – HTML-driven narrative 3D-scrolling(slashie.org)

54 points by gothep 11 years ago | 22 comments

_Adam 11 years ago |

Assuming this isn't an April Fools joke...

This kind of interface creates a terrible user experience. I've seen them before, and they always suck. The main issue is that you remove all context from the interaction. I don't know where I am relative to the entirety of the content. Furthermore, I can't jump to the point that I want.

It's disorienting and infuriating, and after about 10 seconds of exercising my middle finger (in multiple ways), I close the tab and add the site to my mental list of "examples of shitty UX".

Fortunately, this isn't the first such example, so I can provide solid evidence of how horrible this concept is. Ironically, it's the Famo.us Angular integration documentation...

https://famo.us/integrations/angular/#/1

kenbellows 11 years ago | |

Not disagreeing with your overall point regarding the usefulness UX of this sort of interface, but unlike the Famo.us demo, Space.js seems to maintain the scroll bar on the right window edge, which allows you to keep a sense of where you are within the document and to jump where you want within it. Also, the down arrow alleviates the strain on your middle finger nicely, as will clicking and dragging the scroll bar.

krebby 11 years ago |

There are ways of doing scroll-based storytelling right but this ain't it. This library does have the right idea that scrolling should be continuous, but if you over- or underscroll the content you get trapped in a weird middle ground of a tween between two states, and it's frustrating to exactly line up your viewport to the content so it's readable.

Mike Bostock wrote a pretty good post about scroll-based storytelling last year: http://bost.ocks.org/mike/scroll/ https://news.ycombinator.com/item?id=8551724

bengali3 11 years ago | |

Heres a great storytelling example from http://bost.ocks.org/mike/

http://www.nytimes.com/newsgraphics/2013/10/27/south-china- sea/

Mithaldu 11 years ago |

Aside from the fact this hits Poe's Law so hard that it is impossible to tell whether it's an April Fools joke, i am pleased that it degrades somewhat gracefully without JS:

https://dl.dropboxusercontent.com/u/10190786/no-js.png

And becomes downright usable and pleasant without CSS:

https://dl.dropboxusercontent.com/u/10190786/no-css.png

aridiculous 11 years ago |

These comments are very narrow-minded and hostile.

This is wonderful execution. It's really hard to create something that's so easy to use. Its API looks surprisingly elegant.

As for the use cases and UX, remember that there's many types of projects. This could be used in a way that helps the UX for some kinds of experiences.

Just because this would be bad for your work, or the sites you like to go to, doesn't mean it's not a perfect fit for certain experiences.

Kudos.

Aeolun 11 years ago | |

I don't question the technical achievement. This is just a prime example of 'Being so concerned with whether or not they could, that they didn't stop to consider whether they should.'

Also, even if I were to want to use it, it's too heavily dependent on scroll speed. It's completely unusable on my computer unless I use the down arrow.

Mahn 11 years ago |

It's definitively an interesting demo, but not the kind of thing one looks forward to when trying to scroll on a page with the purpose of reading it.

draugadrotten 11 years ago |

Great work and useful examples that shows how much richer the web has become since the dark old days when <blink> and <marquee> was the only options to make your web page eye-catching.

blackle 11 years ago | |

You mean annoying? There are better ways to make a website stand out than to override default scroll behaviour. Websites like these tend to make me queasy, since I expect the screen to move down, not forward.

If you're going to make transitions like these, they should be initiated by something else, like the keyboard or buttons. The scroll bar was specifically designed for browsing vertical documents, not rocketing through spacetime.

laumars 11 years ago | |

Don't forget animated GIFs. A staple for any mid-90s site

wahsd 11 years ago |

I am sure this could be used in creative ways, but how is this not essentially manual stop-motion video? It's amazing that technology has progressed so much that now I can manually flip through stop-motion visualization. Let's call it a flip-book.

ape4 11 years ago |

April Fools?

delluminatus 11 years ago | |

Definitely. Try clicking through to the article:

We generally use web pages as our canvases and paint content on the x– and y-axises. This is our tangible abstraction of reality. Here we are going to explore what happens when we introduce z-axis to content presentation. Instead of stripping down reality to a plane, we are going to simplify it, keeping our three physical dimensions but only their minimal essence.

untog 11 years ago | | |

It reads as a joke until you see it on a startup's about page.

thejaredhooper 11 years ago |

I've been thinking about implementing a sort of slideshow like this.

I could definitely see this being extended, contained within a frame and used (by intercepting and mimicking scroll actions) in order to present a slideshow in a smooth, consistent manner.

By itself, it's novel. But extended, I could see a few uses for it.

Interesting idea, degrades pretty well (for text only), and I enjoyed scrolling through smoothly with middle-click.

extc 11 years ago |

http://bartaz.github.io/impress.js/

matthewrhoden1 11 years ago |

I don't have smooth scrolling, so these types of things are always jumpy and not very enjoyable.

Bumbaclotmon 11 years ago |

It isn't as good as this one, that happens to also implement acceleration: http://okmove.tumblr.com/ (and it was made years ago by the folks who designed soylent packaging).

chaosfactor 11 years ago |

It's funny because I actually kind of like it.

bpg_92 11 years ago |

Well, it is called Space.js and in the main page it says: No js required. I am missing something here?

thebouv 11 years ago | |

I think he means no writing of JS required to use it. Include the library, and just use HTML to do the rest.

I agree though, bad use of saying "no js required".