Please note: This site's design is only visible in a graphical browser that supports Web standards, but its content is accessible to any browser or Internet device. To see this site as it was designed please upgrade to a Web standards compliant browser.
 
Signal vs. Noise

Our book:
Defensive Design for the Web: How To Improve Error Messages, Help, Forms, and Other Crisis Points
Available Now ($16.99)

Most Popular (last 15 days)
Looking for old posts?
37signals Mailing List

Subscribe to our free newsletter and receive updates on 37signals' latest projects, research, announcements, and more (about one email per month).

37signals Services
Syndicate
XML version (full posts)
Get Firefox!

Surfing Sideways

12 Mar 2004 by Matthew Linderman

Someone’s always trying to make a horizontal layout work in order to seem fresh. The latest siting: J. Crew. But is it ever truly a good idea to make people use the bottom scrollbar instead of the right side one?

32 comments so far (Post a Comment)

12 Mar 2004 | anon said...

no.

12 Mar 2004 | Steven Garrity said...

I really doubt it. While assumptions often prove wrong when you user-test, I can really imagine loads of visitors never even noticing the content to the right of the main screen on the site.

12 Mar 2004 | jm said...

Nope. Try this on an ibook. Between safari's bookmark bar and the dock, there isn't quite enough vertical room for the browser to display the entire page. So, I'm forced to move between a vertical scroll bar and a horizontal one. Let alone that I can't always see the search field...

12 Mar 2004 | JF said...

I think Steven is right (as he usually is), but I also think the reason he's right is because of the disconnect between the huge "more -->" images and the horizontal scrollbar that is so easy to completely forget about. Would be nice if you could click on the big "more" graphics to autoscroll (simple Javascript) or try using simple anchors that would move the page over.

12 Mar 2004 | blakems said...

No a good idea. Since I use my mouse wheel to do the majority of my scrolling, I can't use it here because it won't scroll left to right, it scrolls down.

12 Mar 2004 | Bill Brown said...

Hmm, I think that it wouldn't really work even then.

What's worse, J. Crew is here in the business of selling clothes. This implementation effectively turns the Mens clothing page into a man's pants page, thereby turning many selling opportunities into a single one. I would think that this design really fails miserably at the page's overall goal: selling.

Methinks that someone at J. Crew is proud of their design and considers himself awfully clever. Too clever by half, as the expression goes.

12 Mar 2004 | Bill Brown said...

This site does make me wonder if other sites in the youthful apparel category might ever design their site such that navigation is inscrutable and ordering is well-nigh impossible just for the sake of doing it—"we're so hip that we don't even care if anyone orders." It would certainly be a funny parody.

12 Mar 2004 | Tom said...

I don't really like horizonal scrolling on any site. In this case I don't think it's doing much harm as it seems to be a one off promotional page of 'everything you must have for march'. I have to agree that it would be much better if you could click on the more sign (in fact thats the first thing I tried).

Overall I'm actually quite impressed with the site design.

jm - That's not the search field, it's the sign up to our mailing list field. In fact they don't seem to have any sort of search engine, this is probably ok as they don't stock a huge range of items.

12 Mar 2004 | CM Harrington said...

H scrolling is such a bad idea on so many levels. In general, people aren't used to seeing it, so they won't notice that you can do it. It also introduces tearing. depending on how fast you decide to scroll [because of the refresh rate of the monitor]

In this case, the "more" graphic looks just like a background image. It took me awhile to realise that it actually said something useful. of course, when I clicked on it, nothing. It should at least change colour upon mouse-over then auto scroll to the next "page"

Page Up/Page Down were invented for a reason. This just breaks normal interface conventions for no practical reason. I am a big fan of pretty, but pretty must be practical.

[this is a bit OT] I recently visited a page that used extensive DHTML in order to create a page that had a 200px bar across the width of the page. The mouse would move that bar up and down on the page so you could see the content. The content was only visible through this 200px bar, otherwise it was invisible [the bar acted like red acetate over a secret code on the back of a cereal box]. The content? nothing important, just his biographical information and his CV!!!

13 Mar 2004 | nathan said...

Terrible. The fact that they had to add a "there's more" instruction belies the poor usability.

If H-scroll was a MUST, then they should have used an iframe or div with scrolling overflow so at least the scrollbar would be near the product.

13 Mar 2004 | Mark Fusco said...

I would agree w/everyone about horizontal scrolling in general - but, if you notice the tagline "...right from the start" it's an interesting way to incorporate the site design with the marketing.

13 Mar 2004 | pb said...

H scrolling is generally not advised but fine here. The J Crew home page really doesn't need to be too functional.

13 Mar 2004 | unlimited said...

think outside the box... not a good solution for everyone or every site, and not sure if it works best in this situation -- the jury is still out. but not bad by definition.

13 Mar 2004 | Mark Fusco said...

Of course, it could also be said that it might be bad to assume that scroll bars should always appear on the right hand side as well.

If you visit this site in Internet Explorer, the scroll bar appears on the left.

13 Mar 2004 | thepostman said...

Would be nice if you could click on the big "more" graphics to autoscroll (simple Javascript) or try using simple anchors that would move the page over.

Not sure if anyone remembers this, but IDEO.com used to have that in their Portfolio section, it was beautiful the way it worked.

I like the concept a lot, I just think they need to bring more attention to it, the "more" tells me more products, but not by scrolling to the right. Even with the instructions and the tag line people will miss those products. A for effort, D+/C- for implementation.

13 Mar 2004 | said...

"Latest siting" intentional? ;)

13 Mar 2004 | Ruth said...

Not to nitpick, but shouldn't "siting" be "sighting"? Unless it's a clever play on the word 'site', as in 'website', in which case please ignore me. I need sleep.

13 Mar 2004 | Mark Fusco said...

Yes, it's intentional - It's noted in the language tag to read right to left. Makes sense (to me at least), that given that instruction the scrollbar should be on the left.

14 Mar 2004 | Derek said...

The only site I ever saw where horizontal scrolling worked was a late-'90s design for Hitachi monitors, which had a Dalmatian dog theme. There were footprints from the first picture of dogs that led off to the right, and it was easy to follow them and scroll along. It even worked at 640x480.

The kicker was, if you had the largest, most expensive Hitachi monitor (1600x1200 or something), the site didn't scroll at all.

A few months later the site got redesigned into something far more boring.

14 Mar 2004 | mike said...

aside from the confusion factor, ie will the average user understand they are supposed to scroll *at all*, I think the design is very refreshing. Scrolling is scrolling, as long as I dont have to go 2 directions. Some new mice offer side scrolling controllers. a snap back type link at the end of the page would be nice.

15 Mar 2004 | James Wheare said...

Since I use the arrow keys for scrolling, the direction really doesn't matter to me. And with the option key in Safari you get page down, up, left, AND right so it's fine.

Various other scrolling mechanisms exist that make H-scrolling more acceptable, such as clicking down on some mouse wheels to bring up a scroll pivot in IE at least, and the grabby hand cursor in IE5 Mac that's enabled with the command key.

But then again, we have the average user... I'd say browser, OS, and mouse designers are equally to blame for the bad image H-scrolling seems to have gained.

By the way, your comment preview page is still in the default MT style. Remedy at your discretion...

15 Mar 2004 | Brad Hurley said...

Would be nice if you could click on the big "more" graphics to autoscroll

In fact, that's exactly what I tried to do when the page came up on my screen. Usually anything that says "more" is clickable, and it threw me when this wasn't.

This site might work for gamers who navigate sites with a joystick, but it sure doesn't work for me.

15 Mar 2004 | Don Schenck said...

Yuck.

15 Mar 2004 | matthew said...

there's a terrific horizontal scroll at teemuseum. all usability arguments still apply but it's a great implementation.

15 Mar 2004 | Matthew Oliphant said...

Wasn't the big issue "early on" with horizontal scrolling the fact that processors couldn't paint the screen very well horizontally? Now that the processors are faster, this type of scrolling shouldn't be a big issue.

I agree about as long as the user notices. 10 years of "training" to not pay attention to horizontal scrolling may be a lot to overcome. But that doesn't mean a designer shouldn't consider it. I don't care much for the J. Crew design (personal preference), but I do like the teemuseum site. Talk about mapping to a mental model...

On a side note:


Terrible. The fact that they had to add a "there's more" instruction belies the poor usability.

Just because there is instruction does not mean poor usability. There's a difference between intuitiveness and learnability. You try for as much of the former as possible, then look at how you can support the latter if something cannot be intuitive "enough" to meet your usability objectives.

While I am sure there are opportunities for more intuitiveness, the design should support the user's tasks and if that means on-page instruction, then why not have it? Through validation testing 3 to 6 months down the road you may determine the instruction is not necessary, or it's time to revisit the design.

15 Mar 2004 | pb said...

Don't forget the all important goal of getting people to talk about your site!

15 Mar 2004 | dayvin said...

Kottke employs horizontal scrolling for his portfolio. It's a narrative piece, so you're spending more time reading than scrolling (the opposite of the visually overpowering J.Crew example). Personally, I think it works technically (no vertical scrollbar for all but the smallest of screens) and visually (given its storyboard quality).

16 Mar 2004 | newbie said...

First off, hi. I just found this website recently and have been reading it almost daily now. It's a great daily read, and the comments are often very insightful.

The horizonal scrolling is interesting because I've been using a horizontal scrollbar on my web site for quite a few years now. No one's ever said anything about not seeing the scroll bars before. The one difference, though, is that i use the horizontal scrollbars in an i-frame that is placed front and center on the page, with a generous amount of space to act as a background.

I noticed that all the examples in this thread uses the browser's horizontal scrollbar, which is often at the very bottom of the screen, jammed up against other itemsthe dock in OS X and the Task Bark in Windowsand hard to identify quickly.

Also, the navigation structure of my site grows horizontally, reinforcing the horizontal eye movement. Only in the lower-level pages do the i-frames start scrolling horizontally. By then, the shock is gone and users seem to understand the horizontal scrolling concept w/o too much trouble.

I'm curious what everyone thinks of the web site.

16 Mar 2004 | dusoft said...

Lucas, your website is pretty nice and I think since it's centered, there is no problem with horizontal scrollbar. It looks pretty convenient.

17 Mar 2004 | One of several Steves said...

I didn't even notice there were "More" arrows or icons. It just blended into the background.

As a result, on 800x600, it looks like the only thing J Crew wants to see is pants. And since pretty much no one else horizontally scrolls, it never would have occurred to me to start doing so.

But there's an even bigger problem with horizontal scrolling:

How many mouses today have scroll wheels on them? How many of them move left-right as well as up-down? I thought so.

19 Mar 2004 | Robb Beal said...

Timelines are a good example where horizontal layout is more appropriate than vertical layout.

http://www.usercreations.com/robb/timeline_resume.html
http://www.usercreations.com/weblog/2004/01/27.html#a449

31 Mar 2004 | simplicity said...

crew sucks

Comments on this post are closed

 
Back to Top ^