unthinking scrollbars

Sometimes having scrollbars on a web page is a good affordance. Scroll bars on a web log that’s a series of text areas makes a lot of sense — scrolling reflects both time and text. The app and the widget go together.

But for a lot of web apps scroll bars aren’t a great affordance, and they make the site harder to use rather than easier. These current gen apps let the app saturate the entire browser window but don’t overflow it:

Web page design usually starts by assuming a scroll bar. But that overlooks the problem of how users discover what’s accessible via the scroll bar.

On Myspace the most important navigation technique is to scroll the page until you stumble on what you’re looking for. Just keep going and eventually you’ll see that bit of text or widget somewhere in the thicket of bling. Hunt in the visible page, and if you don’t see what you want expose some more of the page.

A nav bar or some other explicit navigational aide would be a lot easier and more effective. To find the comments, have a link to them *above the fold* in the first screenful. Not just comments — anything that a user might look for needs a discoverable path above the fold.

And once you’re putting all those links above the fold, what exactly is the benefit of a scrolling page? Why not move that functionality — the comment widget, the player widget — to units that aren’t loaded until the user asks for them? The original page will be lighter and faster, and users won’t have the cognitive burden of divining what the scroll bar will allow them to access.

One kind of thing that a scroll bar is the right metaphor for: more of the same. When you have a table of names, and it starts “Alice”, “Bob”, “Carol”, and the next row is hidden offscreen, then a scroll bar is a natural way to navigate. You know what’s coming when you scroll down.

But a lot of the time a scroll bar is olden days thinking, just a habit from the days when web sites were static text by default. It’s paper-oriented thinking.

9 thoughts on “unthinking scrollbars

  1. One of the big UI wins for the web browser is that it allows one to build content-specific browsers (i.e., in 100% HTML / CSS / JS). And, it’s great to see sites pushing beyond web page “document” defaults to make browsers more appropriate for different content / experience / interaction.

    I really dig what thesixtyone.com is doing! But, the site is definitely weakest with regards to the text content that traditionally would scroll down the page.

    I think there are a lot of interesting potentials for how one might arrange interfaces that transition between both music / media and text / hypertext. The iTunes file library model ain’t it, but thesixtyone and what you’ve done with WaxMP3 are the great examples!

  2. I’ve been struggling to put this concept into words, but you’ve done it perfectly: scrollbars ARE for “more of the same.” My current site is using that theory, but in a scattershot way. I need to find a way to move the comments out of the tail of the page, I guess… somehow…

  3. (I tried to post this last night, but your blog rejected it – trying again:)

    One of the big UI wins for the web browser is that it allows one to build content-specific browsers (i.e., you build a browser in HTML / CSS / JS). And, it’s great to see sites pushing beyond web page “document” convention to make browsers more appropriate for different types of content / experiences / interactions.

    I really dig what thesixtyone.com is doing! But, the site is definitely weakest with regards to the text content that traditionally would scroll down the page. I don’t think they need scroll bars, but they are basically using fold-downs to unveil text in place of scroll bars — and I don’t think it makes for a great text experience.

    The big UI question is: if someone has a lot of say about a song (in text), what are ways to make that work in relation the visual / music player control experiences where you don’t need “pages”?

    I think there are a lot of interesting potentials for how one might arrange interfaces that transition between both music / media and text / hypertext. The iTunes file library model ain’t it, but thesixtyone and what you’ve done with WaxMP3 are the inspiring examples!

  4. Jay, your comments got flagged by Akismet as spam. No idea why, because they’re packed with information. Maybe the herejam link caught fire from some spam vigilante group.

    I think that a scroll bar is a good mechanism for text. Where its misused is navigation — anything where you’d need to find something specific.

    I loved the liner notes on jazz and blues records from the 50s and 60s. A lot of the time they were stupid, but even then they were fun to read. Also, text-heavy CD booklets can be great. The Robert Johnson reissue box set in the 90s had a thick booklet of biographical info.

  5. (Weird on the Akismet issue — never had that before.)

    Totally agree with what you’re saying. But, you could also question whether “navigation” is even the right concept at that point: maybe the point is that some experiences forgo navigation altogether.

    Thomas Vander Wal (at one point at least) suggested that whole idea of navigation (as a metaphor in web design) should be replaced by the idea of a “come to me” web. The user isn’t ever going anywhere, but making things come to them. (Hope I didn’t butcher his idea there by paraphrasing it.)

    And, we might look at thesixtyone.com in this case as excelling in making certain non-textual / musical things “come to me” in a way that are perhaps more compelling and therefore more usable than traditional web browsing (paging / scrolling).

    But then, my original point would be something like: they don’t yet make the text about the music “come to me” in an equally compelling and usable way. (And, I am imagining there potentially being a LOT of text and hypertext too — e.g., many whole Wikipedia articles worth of stuff.)

  6. Jay & Lucas –

    In early 2002 I stumbled on an understanding of “model of attraction” as more robust understanding of how people interact with, not only the web, but digital information in their lives. This was aimed at a more literate metaphor to replace navigation. Out of this it became much easier to see a “come to me web” model for designing and developing information across people’s lives as they interact with digital tools and services.

    The ability to think through and consider what related information, objects, or media is related to what a person is experiencing and enjoying becomes much easier in this framework. Bringing options and potential items of interest closer to the person on the screens/device interfaces is a good step forward from having the person using a service navigate to something else of interest. Others, recently have called this a butler service bringing things to the person with interest in the items.

    1. I don’t think I’m really understanding it, Thomas. This was the documentation on “model of attraction” that was easiest for me to absorb:
      http://www.vanderwal.net/essays/moa1.html

      …but even so, I don’t see how attraction is a different metaphor than navigation. It’s a method of navigation — push rather than pull — but even so still about getting around a virtual space. Can you say more?

  7. Sure… That write-up was a pure brain dump written on a plane about 3 hours after I started sorting through the model of attraction.

    Think less of the push and pull model, as internet connectivity is a synchronous activity, but more of bringing things closer to you than go it to things.

    Navigation metaphor frames things in a model that we travel to things following a trail, map, scent, etc. But, in reality my digital explorations do not physically take me anywhere, my behind is in the same chair in the same place. The model is a very simple framework of going to places with out having to consider travel or getting there and embracing that consideration leads to the model really fracturing.

    But, when thinking with a model of attraction mindset you are drawing things to your screen. If I drop a term in to Google search box it brings things relevant to that to my screen, similar to dropping a catalyst into a solution and things attracted to that catalyst aggregate around it, while equally other things are repelled, making it clearer to see things relatively attracted to that catalytic term.

    In doing this attracting we are actually bringing representations or copies of that to our screens, or links to those items. But, as we move about with a laptop or a mobile device we are still attracting those same items. But, different devices require have different properties the model of attraction allows us to think about. Drawing things to us requires grappling with mechanical components: bandwidth, understanding processing power, screen size, etc. It requires intellectual components: what did the person mean by that term, can the person understand what is being returned (same language, written in a manner they understand, etc.). It requires grappling with physical: does the person have access to the information, what physical properties do they need to interact with it (if in a car and querying info we would you voice and aural feedback or if on a standing on a bus reading a mobile in one hand while holding on for dear life with the other). Lastly we need to think about perceptual attractions: what is the person expecting this to look like or what are the perceptual cues that have positive values (in some South American cultures sites that play music are the norm and trigger trust with the visitor to that site, while a Flash designer would never trust Jakob Nielson just from the visual cues from Jakob’s site).

    These receptors are valuable to grasp and are something the model of attraction adds to thinking through designing and developing.

    But, the biggest thing for me, was it triggered the idea of how do you hold onto this information? I have attracted something I have been seeking to my screen. How do I keep it attracted to me? Across devices? I found music I like and I would like access to it from everywhere. I want in in my own Personal InfoCloud that follows me around.

    Findability for many things is getting decent. Refindability still sucks. It is one of the great technical pain points that really has not been adequately addressed.

    Changing the focal point, via the model, allows things to be more naturally considered as, ‘oh, of course’ understandings, rather than a long series of things that matter to how people use information and digital media/objects in and around our lives.

Leave a Reply

Your email address will not be published.