Click the images to see these sliding sites in action…
Netflix
Click an arrow on Netflix’ New Releases page [membership required] and the site slides in a new slew of movies.
Beanstalk
Beanstalk is a hosted Subversion system that integrates with Basecamp and Campfire. The home page fits in a complete tour by sliding in information horizontally. Click a link and a new screenshot and caption slide in.
MacBook Air
At Apple’s MacBook Air intro, you can click a thumbnail image and a new full size image slides in from the right.
August Lilleaas
on 14 Feb 08Netflix link doesn’t work. Redirects me to this login page.
Yaphi
on 14 Feb 08I wrote something for this just yesterday if anyone wants it. It’s using Prototype and Scriptaculous so it’s not all that lean, but the code is tiny. Make the #mask as wide as all your sections together (including any margin or padding)
http://blog.grayvsgrey.net/post/26274866
JP
on 14 Feb 08I like the Beanstalk slider. Minor point but it feels to me like the “Thinnovation” text in the first Apple slide should move with the image.
Andy
on 14 Feb 08panic using it too on their product page for coda http://www.panic.com/coda
Michael Zuschlag
on 14 Feb 08Re Netflix and Beanstalk: Slick… but why? Why are they trying to re-invent the powerful and universally understood scrollbar with something more primitive? Beanstalk doesn’t even have a simple means to back up. There’s poorly integrated links below that work, but they probably shouldn’t be links –users won’t expect links to perform scrolling within a pane. And why is it a pane in a page anyway? Do users need to compare the tour content to other home page content? Are users going to jump from the middle of the tour to visit the SoftLayer web site? Now I can see users deciding to Sign Up for Free in the middle of the tour, but, oops, I guess you can’t.
Raphael Camaprdou
on 14 Feb 08Amazon gives recomandantion in a slightly different way. It doesn’t slide, but it refresh the section so that it seems to. Not as neat an fluid, but does the trick. 5and they’ve been doing that for a few year now). I love what Panic did with the Coda page.
Alok Jain
on 14 Feb 08Apple has some great detail, the shadow of Air falls under the button. Apple designs drive a lot from real life which is 3 dimensional.
I think this feature however should be extended to more iPhone kind of interface, where home screen works the same was as above examples, but has that added element of ‘elasticity’ as if one is pulling something, until a certain time of this pull user sees both elements (one being scrolled in and one being scrolled out) – now above examples also do this, but the beauty of homescreen is that it lets user hold the screen in that position.
I think if these just allow user to use the mouse (and arrow keys) and drag from left to right, that’ll add to the experience.
I am not sure if there is any tactical advantage from allowing user to hold this, but from experience stand point it feels more like real life and in control.
Again in iPhone, if we look at the Safari experience, one can actually scroll Safari screen outside of the application interface space, giving a feeling that it exists in the space somewhere and sits on top of a large area..
Apple product showcase does this to certain degree.. – http://www.apple.com/mac/ though they should allow one to just click in the product showcase area and directly drag it instead of using scrolls..
- AJ
Greg Edmiston
on 14 Feb 08The most impressive part about Apple’s page is the code. It’s not Flash, not QT—just JS and some transparent PNG’s.
Watch the button backgrounds when switching images. Really slick.
cedric
on 14 Feb 08I don’t like the Netflix slides. The view is limited to a very narrow selection, and I have to click 10 times to go through the whole list. I preferred the old way much better.
Beanstalk use of the effect is much more effective. The wow factor is a tour is probably more important than usuability.
Bryce Glass
on 14 Feb 08The ‘Carousel’ design pattern:
http://developer.yahoo.com/ypatterns/pattern.php?pattern=carousel
Also… I love the slick factor on Panic’s Coda page, but there’s a severe usability bug: scroll down to get to the ‘swooshing’ panel and it kinda ‘becomes’ your whole page experience. It’s easy to forget the Download, Buy Now links above. I swear, I spent 5 minutes one day swooshing from tab to tab to tab looking to download Coda—before finally remembering to scroll back up.
the dude
on 14 Feb 08Another fantastic slide over at http://mclamag.com/
Fades, pulsing buttons, the slide. It’s a slick site all around. really puts the netflix slide to shame.
Josh Walsh
on 14 Feb 08I believe Apple uses it correctly… for image gallery reasons. I’m not a fan of using it for swapping actual textual content around, however.
Sebhelyesfarku
on 14 Feb 08All these useless gimmicks won’t work without JS anyways.
mkb
on 14 Feb 08@Michael Zuschlag:
These mechanisms are much stricter about pagination. A scroll bar allows (and sometimes forces) you to scroll in weird increments, while slidy things force one unit at a time, with a unit that is up to the designer.
Jack Danger Canty
on 14 Feb 08Just yesterday I noticed Shopify has the same kind of effect.
http://shopify.com
AhmedF
on 14 Feb 08http://goodbarry.com/home – nicer version of the Beanstalk slider
hp
on 14 Feb 08Another example of the slider effect at
http://prowolfe.com/
Paul Smith
on 14 Feb 08Here is one that scrolls vertically instead of horizontally: Catalyst Media Studios
Michael Zuschlag
on 14 Feb 08@mkb: You mean you can’t make it so that a click on a scrollbar button consistently moves one item/line, and a click in the scrollbar track consistently moves one pane-full? Well, I guess I should expect such ugly limits in a web app.
That being the case, I agree a scrollbar has problems for things like Beanstalk. However, if they don’t want the content to be continuous, they shouldn’t show it as continuous using something like sliding. If the content is in discrete units, then pretending it isn’t can only confuse the user.
If they really want to take 500 ms of my time for “wow,” make it a discrete wow: fade from one page to the next, or make it look like flipping physical pages, or zoom out the new page from its link to cover the previous page, or have one page swoop in and butt out the previous. Maybe use some imagination instead of mindlessly copying the latest fad.
Paul
on 14 Feb 08@Michael: After reading your comment I still don’t see how that is confusing? clicking next and going from section to section doesn’t seem that hard to me. I do like Panic Coda’s implementation better because it’s a little easier to see where you are visually.
mkb
on 14 Feb 08You mean you can’t make it so that a click on a scrollbar button consistently moves one item/line, and a click in the scrollbar track consistently moves one pane-full? Well, I guess I should expect such ugly limits in a web app.
Oh, you mean you’re talking about those irritating custom reimplementations of an OS-level service?
Michael Zuschlag
on 14 Feb 08@Paul. Oh, clicking Next in Beanstalk isn’t confusing. Go ahead and try it.
Now scroll back up. Oops. This is a common UI design error: the designer assumes the users are going to follow a rigid script, but users aren’t like that. They don’t always read carefully and they forget, so they’ll want to re-read things. They decide not to complete the tour because they already read enough to want to sign up, but now they can’t.
In either of these scenarios, the user has to stop and think (Warning, Will Robinson!). Apparently, the user is supposed to use the links below to back up, but the user has to think about it because: 1) the links are not graphically connected to the content, 2) the links do not necessarily have the same label as the page they link to, 3) links in general are expected to load and entirely new page, not scroll within a pane.
What we have here is a UI with an identity crisis. It’s really a tabbed interface, but it looks like a single scrolling page. That’s got potential to be confusing, like something that looks like a check box but acts like an option button. Panic is less confusing due to the better graphic connection you allude to, but it has a similar identity crisis that gives it an unsettling feeling that reflects poorly on their product.
Ryan Heneise
on 14 Feb 08What’s really impressive about Apple’s slider is how well it works in IE 6. Anyone who has worked with transparent PNGs in IE 6 knows what an achievement this is.
Adam Perlow
on 15 Feb 08Here is our sliding screenshot gallery
http://coleconnect.com/screenshot-gallery/index.php?category=OrderPad
It was developed by our friends at Electric Pulp (www.electricpulp.com).
Grant Hutchins
on 15 Feb 08Notice that the rightmost MacBook Air photo runs into the rightmost edge of its container. By putting this image last, they didn’t have to deal with what would happen if the image overflowed into the next image’s space while still maintaining the clean and inviting effect.
dusoft
on 15 Feb 08I don’t like sliding as it is pain in the ass to focus your eyes on the image. Maybe innovation, yes, but definitely very user-unfriendly. Other people presented their problems with the sliding process.
Tuyen dung, viec lam, tuyển dụng, việc làm
on 15 Feb 08Website chuyên về tuyển dụng, tìm việc làm miễn phí với nhiều cơ hội hấp dẫn nhất dành cho các bạn.
Anders Toxboe
on 15 Feb 08This is pretty much just the Carousel pattern.
Minoru
on 15 Feb 08@ Michael Zuschlag It sounds to me like (please correct me if I’m wrong) you believe that there are strict rules about usability and applying those rules always produce good usability. You might always achieve baseline usability that way, but where’s the innovation? Where’s the sense of fun? I believe there’s always room to be a little different and still create usable UI - without absolutely following all of Nielsen’s 2,351 guidelines. Plus consider your audience. Beanstalk is designed for software developers and web designers. Probably a savvy enough group who can figure out that the highlighting “tab” moves with each step, therefore you just click on the tab you were on before to go back. Maybe my only suggestion with Beanstalk is that the “tabs” should be above the scrolling pane - that way the highlights are more visible, and there’s less confusion about whether the tabs are associated with the pane or the content below the pane.
As for users not expecting links to “scroll” - I think that model might be on the shift. Users expect any interactive element to do something - the model of “link” = “new page” frankly is outdated. Link can sort/filter, link can reveal/hide—there are plenty of examples out there. Obviously a consideration for precedence needs to be paid, but basically if you’re giving them something new, and that something is worth the effort, you might be OK.
Michael Zuschlag
on 15 Feb 08@Minoru. Oh, I think I have pretty vague rules for usability, actually. I don’t go around saying, “Links must be #0000FF underlined text,” for example. As for innovation, I hesitate to use that term for something like this that has no functional benefit. I’m in favor of fun and imagination, and to mkb I gave four examples of fun that wouldn’t have the usability problems of sliding and are arguably more imaginative.
As for links doing more than loading pages, yes, that’s a trend I see too, and it’s totally evil. We already have other more suitable controls for sorting, filtering, hiding, etc. Predictability is essential for usability. There’s a vague rule for you.
dusoft
on 16 Feb 08Amen to that.
Minoru
on 16 Feb 08I agree that predictability helps you achieve usability. But I also believe that lack of predictability doesn’t always mean that the result is not usable. All I’m saying is that we should be able to entertain the idea that a system can be usable while not necessarily conforming to all the conventionally accepted ideas of which controls are suitable for what.
With that said, I think I see your point about some designers being gratuitous in the way they veer off the guidelines, only to achieve uniqueness and cause usability to suffer. Beanstalk example—I didn’t mean to say that it’s particularly innovative, but I also don’t think it’s all that unusable. So I don’t see the point of poo-pooing it too much.
If someone finds a different way to use something, and if it’s not stupid, isn’t it worth mentioning? Is it really that evil?
This discussion is closed.