Replicating Browser Behavior: The Top Link
With interest I watched an exchange on the Web Standards Group discussion list as to whether developers should bother replicating browser behavior such as keyboard shortcuts. I didn’t weigh in with my thoughts at the time. I was too busy to join the fray, plus I wanted to first consider all the possibilities and read everyone else’s comments. The result was I didn’t change my position. Since it’s sort of after the fact on the list I figured I’d discuss it here. My quick conclusion is yes and no; it depends on the behavior being replicated, the ease of making the provision, its perceived usefulness, and really the content itself.
The Behavior: A Keyboard Shortcut
There are several keyboard shortcuts that developers often replicate. The function of hitting hitting the Home key to get to the top of the page is one such behavior. This browser behavior or function is often seen replicated as a “top” link. This is the link that developers often place on their footer to allow the user a fast means of returning to the top of the page. It’s fairly unobtrusive consisting of a link with three letters. See my “top” link as an example.
Making the Provision
The top link is made by inserting a name="top" attribute in an anchor, or placing an id="top" in any element, at the top of the page (I prefer the latter). And somewhere at the bottom of the page pointing to it with a link like this: <a href="#top">Top</a>. It’s not a lot of mark-up and is fast and easy to implement. It is typically a site wide solution — in other words it works on any page that has one of the attributes shown. This is convenient, especially to those who use global files. It should be no more than 32 bytes in size, top and bottom, unless an unnecessary title attribute is added to the link portion.
One of the developers on the list, I forget who but it’s not really important, felt that adding such accommodation was akin to “polluting” one’s mark-up. A purist’s approach. I felt at the time — and still do — that this was perhaps worded too strongly. In a nutshell, I see no problem with replicating this type of browser behavior on a web page. In fact, after weighing the facts, I think it’s beneficial.
Perceived Usefulness
I must first consider who, how, and why someone will be using this link. The respective answers are anyone, doing it with a keyboard or input device, and naturally, to get to the top of the page quickly. This is getting easy. If the link is there, it can be used — user’s choice. Now what if it’s not there? How does that change the situation? How is the user affected?
Short of re-loading the page, to anyone using a keyboard it means they have to use their Home key. Their options have been limited. Assuming they know they can hit their Home key — which is likely if they’re restricted to keyboard use — they have built in functionality they’re used to and will probably not be affected greatly. They also have the option of using shift+tab to go back, using the arrow key, ↑, to scroll up, or possibly using their Back key if they got to their current page location via a jump link. Some users can also use headings to navigate.
Pointer users don’t get off so easily. Consider this: The Home key is on the right side of the keyboard and if a person is using a mouse with his or her right hand, they have to remove their hand from the device, locate the Home key, and press it. This, of course, assumes they know they can do this. They can also use most of the other means mentioned above. Or, if they don’t choose to involve keyboarding they will scroll up the page with their browser’s scroll bar. But how easy is this? Let’s consider the content.
Content’s Contribution
The type of content plays a role. If there are a lot of links on the page, offering a top link can be helpful. Just like jump links and list bypass links can be. No different. More importantly, though, is the quantity of content and how it affects the length of the page. A really long page such as a blog entry with lots of comments makes any upward movement, with exception to using the Home key, cumbersome. Back-tabbing can be murder, there may be lots of links and headings, scrolling up with the arrow key, ↑, can be slow, and trying to grab that little nib of a scroll bar with your pointer can be a challenge. I don’t like that. Give me a top link, please.
I mention a little nib of a scroll bar because it gets smaller as the page gets longer. I have a small amount of difficulty with this. But the limited physical size of this “nib” isn’t offset with my suggestion of using a “top” link. It, too, is a small pointer target (albeit better located in my opinion). The three-letter top link is a minimalist approach providing added functionality in a discreet way. It doesn’t have to be done this way. I know of a couple of sites that use decently sized images that serve as good visual examples. One is better marked than the other, both both are easier to click on. First look at the Web Standards Project (WaSP) site. Click the unintutively-marked wasp near the bottom of the page. Then check out the “Mod” arrow on Andy Clarke’s And All That Malarkey site. If these image links were embedded and used the alt attribute this would do just fine. Unfortunately they don’t. Both use background images and neither is accessible as text if images are off. The latter actually contains no text at all. (If you’re going to offer this functionality with an image, please, make it an embedded image with alt text or a background image with accessible image replacement text.)
Anyway…
I use a mouse primarily, though I do use my keyboard a lot. And I happen to be one of those lucky geekish fellas who knows many of those wonderful keyboard shortcuts — but not all I’m sure. Yet, I will often use a top link if it is a long page and it’s available to me. I appreciate it, in fact. I don’t expect the developer to go to great pains in accommodating me, nor do I expect any fancy scripting, and I’m certainly not asking to reload the page (top links and other in-page bookmarks don’t do that). Just three simple letters is all I need.
Anyway, that’s my take on the matter. I used a heading for this post that might open this up to become a series of sorts. I mean there is text enlargement, print functions, heck, even jump links to consider. All of these can be considered a replication of browser behavior if added to a page by the poor beaten up developer. I will say now that I don’t think all of these examples should be replicated, but all should be really thought out before bringing down the axe on them too swiftly. Pure, clean mark-up is a good thing, but when mark-up itself is considered pollution maybe it’s time to take a second look and analyze the consequences. It’s one thing being a purist, but there should always be a reason for it besides being “pure.”
JackP responds:
Posted: March 21st, 2007 at 11:39 am →
This ties in a little with Patrick Lauke’s recent comments. Basically, there are four areas of responsibility:
1. The user agent manufacturers
2. The users, to know how to operate their user agent (including keyboard shortcuts)
3. The site commissioners, to understand the importance of usability, accessibility, testing etc
4. The site developers
…and historically #4 have done the most to cover up for missing functions or missing knowledge in the other areas.
Is it worth replicating existing functionality? It depends how much work it is, how easy it is for the users to access that functionality, how important it is for the users to access that functionality, and how many people are likely to benefit.
In the case of “back to top” links, I’m probably with you: they help, and they’re little effort to add, so why not? But equally I’d not get upset with a site that didn’t include them…
Joe Dolson responds:
Posted: March 21st, 2007 at 11:55 am →
Funny…I just wrote something very similar at the Cre8asite blog. It was interesting following that conversation on the Web Standards Group — I didn’t see a lot which I really agreed with.
Nice post.
Mike Cherim responds:
Posted: March 21st, 2007 at 3:04 pm →
@Jack: Thanks for the comment and I agree. I don’t get upset with the absence of a top link either, but it sure is a nice, helpful addition on long pages. We have to be careful if the stance is taken that the browser makers and web surfers don’t offer the right functionality or don’t know how to use it. I suppose there’s a fine line that has to be drawn. Personally I’d rather stay on the line-side that errs a bit on the side of caution. The other side is the developers who say “it ain’t my problem, IE needs to get with the program” or “look, buddy, you need to support images, JavaScript, cookies, and get a better browser with a larger resolution to use my site.” Once developers start doing that they may be in danger of being a little arrogant. Maybe they’re jaded, but still. To embrace accessibility, like it or not, we have to pull up the slack until it’s taken up on the other end — and at it concerns users, that could be a long time if ever. If we really care about accessibility and the usability of our sites, then we just have to bite the bullet sometimes and make it happen.
@Joe: Excellent article… great minds and all that
Georg responds:
Posted: March 22nd, 2007 at 12:56 am →
I don’t think we should take up too much slack - just a little here and there to make sure things work, or else there won’t be any slack to take up for those at the other ends so they won’t bother.
I tend more and more to look at in-page replication of browser behavior as unnecessary noise. Seeing such replication often makes me think that the designer don’t know about these browser functionalities, or that s/he don’t think anyone else does or should be bothered to learn about even the most basic functionalities.
However, if it makes sense and (looks like it) improves usability to have something like extra ‘top’ links or extra ‘in-page’ links because of the way the content is organized in a specific page-layout, then I’ll add them without hesitation. The same with other additions that (more or less) replicate browser functionalities - they make sense and improve usability in some cases.
Tommy Olsson responds:
Posted: March 22nd, 2007 at 2:31 am →
I’m a keyboard user. I don’t touch the mouse if I can avoid it. A ‘top’ link is pointless to me, because hitting the Home key is much faster, works on all sites and doesn’t make me dependent on the author’s good will towards men.
Some of my colleagues at the office have said that they would like to have top links on our intranet. They mainly use the mouse, mostly (I guess) because they use inferior browsers that do not have as user-friendly controls as Opera. I tend to think, ‘why don’t you just hit the Home key?’ but I know I have to realise that others have different preferences. BTW, Mike, your argument about letting go of the mouse to press the Home key doesn’t hold water: most users can use two hands, and could quite easily use their left hand to hit Home if they use their right hand for the mouse.
Anyway. Let’s look at why a user would like to return to the top of the page. My guess is that it’s not because they loved the article so much they want to read it again, nor that they want to admire the pretty masthead image. The reason a user wants to go back to the top is, I assume, that he or she wants to access the navigation menu, which often resides across the top or in a vertical menu near the beginning of the page.
Thus, instead of a link to the top of the page, wouldn’t it be even better to provide a link to the first item in the navigation menu? Especially for those poor souls who use browsers that do not support spatial navigation.
And there’s one more thing I think needs to be addressed: if we choose to duplicate this browser function, where do we draw the line? What other browser functions ’should’ we emulate? Print this page? Increase/decrease text size? Page zoom? Add as bookmark? Set as home page? Scroll up/down?
A top link may enhance usability for some users, but I doubt that there are many users who would be unable to go back to the top if there were no top link. Compare to the change text size function: there are many users who do not know this feature exists, even though they really need it. Why duplicate one but not the other? Food for thought.
Mike Cherim responds:
Posted: March 22nd, 2007 at 10:02 am →
You make good some good points, Tommy. And as a dedicated keyboard user I can see what you’re saying. And as I wrote in the post…
Thus you’ve confirmed my notion. I use the keyboard sometimes, typically when I’m on the keyboard to begin with. Say, if I’m filling out a form, I Tab to the next input. For those “Your State” selects, for example, I Tab to it, hit the letter N, down arrow to find “New Hampshire,” then I hit Enter. If I used a keyboard all the time then I would probably use my Home key.
Most of the time, though, I use a mouse and tend to use it without touching the keyboard. Regarding my theory not holding water, well, based on my own average Mike habits mind you, I rarely move my left hand east of the center of the baseline. For me, using my left hand to hit Home would be awkward. I don’t do it. I would be much more inclined to hit Home with my right hand. Which means, I would have to involve the keyboard and move my off of one device to another. Being that I’m not a usability expert, I can only make assumptions based on my own behavior. For me, a top link is a convenience. If it’s not there I grab the scroll bar.
Anyway, what about the people who don’t know their keyboard shortcuts? They were left out of the picture. This is also for them. And while I can’t do everything for them, it is in my opinion this one thing is okay because it’s a small thing, and one I use myself. I think of it as a jump link, only going back up.
Probably not. For me it is as you assume. It’s a good assumption. I typically want to access the navigation. But since I don’t want a bunch of footer links, and I don’t really want to try and second guess the user, the top link serves its purpose. To a mouse user with a visual browser, it does get them back up to the visual top of the page where the navigation usually is (even when it comes after the content the way it does here). For the keyboard user, who may or may not use the link anyway, if they do, it’ll take them to my jump links, from which they can choose their next destination. They can get to the content to re-read the article, or they can access the navigation menu. If they do choose to use the top link, they will be positioned to make the choice for themselves. User’s choice.
Well, I will go so far as to say that we draw the line close by and do not replicate many if any at all aside the small-but-helpful top link, but as I wrote, I set up this article up to be a possible series. So for now I will just say again I’m not bringing the axe down on anything. Each item needs to be explored in more depth. You’re right in that it’s good food for thought, which is why I figured I might want to explore and write about other browser replications later. I was going to do more here, but I didn’t want this to be too long. I realized there’s a lot to talk about just for top link so I didn’t take it further.
Thanks for making me think, Tommy. Now my head hurts
Tommy Olsson responds:
Posted: March 23rd, 2007 at 3:12 am →
I tend to have that effect on people.
Replicating Browser Behavior: Print Function - Beast-Blog.com responds:
Posted: May 7th, 2007 at 1:27 am →
[…] I had mentioned in a previous article, “Replicating Browser Behavior: The Top Link,” that I named it the way I did with the notion that I might expand it into a series of articles. Following through with that, I am offering a look at another browser function often replicated by web developers: The print function. For the record it isn’t really a browser function, but rather a function of the operating system accessed through the browser. I’m including it in that category, though, so let’s take a look. […]
Nicole responds:
Posted: May 8th, 2007 at 10:11 pm →
Well it’s incredible. . .
I agree with the comments made so far in that if it’s not too much trouble to include things like this, then why not!
But I’ve just returned to this page having previously used my mouse’s vertical scroll wheel to go up the page to follow some links, and have just used this vertical scroll wheel once again to get back to the top.
It’s not really a case of old habits dying hard, just that using the mouse’s vertical scroll wheel is obviously the way I get back to the top, despite it usually taking longer.