Michael Eriksson
A Swede in Germany
Home » Software development » Webdesign | About me Impressum Contact Sitemap

How incompetent webdesign breaks tabbed browsing

Introduction

Many websites are highly unfriendly to tabbed browsing—a well-established, increasingly popular, and user-friendly browsing paradigm. As someone who spends a lot of time surfing using tabbed browsing, I am frustrated by this on a daily basis. Below I discuss some of the related issues.


Side-note:

This article applies more or less identically when individual windows are used instead of tabs—with the critical difference that a model based on individual windows cannot accommodate more than a handful of windows before usability drops significantly. Correspondingly, the techniques I discuss below can be less useful, and the damage caused by incompetent webdesign lesser.


Why it is important not to break tabbed browsing

Tabbed browsing is a very powerful and very common way of making surfing easier and more user-friendly. Except for very low-end users, the vast majority of all surfers use it to a higher or lesser degree—with a strong correlation between proficiency and degree.

By sabotaging tabbed browsing, these advantages are unnecessarily destroyed, which not only leads to a loss of efficiency, but also to surfers who are annoyed, have an unfavourable impression of the website, and who will prefer to go elsewhere.

Note, in particular, that supporting tabbed browsing does not necessitate any extra efforts on behalf of the webdesigners: Tabbed browsing would work perfectly with any webpage of the early nineties. Inappropriately added extra work and unnecessary complications is what prevents it from working.

Examples of how tabbed browsing is sabotaged

A few examples of how techniques for tabbed browsing are defeated by incompetent design:

  1. Technique: Open several, potentially interesting, navigational links in different tabs for a breadth firstw investigation of a website.

    Rationale: This allow for a much more efficient and complete exploration than a linear visit. In particular, it makes it easier to sift out the many pages that on close inspection turn out to be irrelevant, and ensures a greater completeness of the search (with less links forgotten). A particularity is the never ending adventure that is Wikipedia: I rarely have less than several dozen Wikipedia articles open at the same time, and days can go by before a particular article is at the “head of the queue”.

    Defeat: Very many website make their navigation links “untabbable”, typically by having them trigger a JavaScript call instead of just retrieving another page. Overuse of the target attribute in a tags is another common mistake.

  2. Technique: In a multi-page document (e.g. a news article), open the following page in a new tab before reading the current. After finishing the current page, close the corresponding tab, and proceed immediately with the following (already loaded) page.

    Rationale: This saves the, often lengthy, wait until the next page loads.

    Defeat: Many websites do not provide corresponding links for the following pages on the top of the current page, but only on the bottom. The user now has to jump down, click a link, jump back, and only then start reading. The extra time lost negates a lot of the gain from this strategy. In many cases, it can even lead to a net loss of time, because many pages have long pre- or post-ambles that make a manual scrolling necessary to find the links and the beginning of the text. (In contrast, with a short or no pre-/post-amble, the user can just jump to the beginning and end of the page using, in most browsers, the Home and End keys.)

    This problem can also be compounded by e.g. the above JavaScript-instead-of-link error; however, this is comparatively rare—so far...

  3. Technique: Keep open and actively use several relevant pages (from the same site) simultaneously.

    Rationale: This allows to compare similar entries in a catalog, to interact in two forums at once, and similar.

    Defeat: Abuse of sessions variables to store context information. It is very common that information that should be transmitted by and retrieved from a link (e.g. the ID of a catalog entry) is instead put into a session variable. The consequence is that it becomes hard or impossible to have several pages open at once. In a worst case scenario, the pages may open correctly and display the right content, but submit the wrong identification when the user next acts. (Example: A user has several catalog entries from an online bookstore open in different tabs. He clicks on a “add to shopping cart” link in one page—and a book from another tab is put into the shopping cart.)

  4. Technique: Using tabbed browsing at all.

    Rationale: All of the above rationales and more.

    Defeat: Websites that still insist on using frames can pose serious obstacles. Not only is the concept of frames of dubious compatibility with tabbed browsing, but the amount of abused JavaScript, over-specified targets, etc. is often considerably higher than for a frameless page.

    Other general complications include use of non-HTML extensions like Flash and linking to PDF files instead of webpages.


Addendum:

Another major annoyance is the use of page-internal links that are not clearly identified as such: Consider e.g. a page that appears to be a collection of links to other pages with various discussions; but, in fact, is the entire discussion preceded by a table of contents. The tab-savvy user opens the handful that seem interesting in new tabs, closes the original tab—and finds himself on the same page, just at a different position. In all likelihood, he also waste computer resources (can be critically on pages filled with Flash and other rubbish) and is stuck with much less content per link than he anticipated: In most cases, he would have preferred simply to skim through the entire document in one go, without having the links interfere. (Exceptions exist: Very long documents can highly benefit from such a TOC. Here, however, the sheer length of the page makes it unlikely that an unmarked table of contents is misinterpreted. Also note that this is very different from an explicitly marked TOC like the ones this website and Wikipedia uses.)

Similar complications occur e.g. when a page contains an unmarked reference to it self somewhere on the page: The user opens it in a new tab, continues to read—and later finds that he is unnecessarily confronted with something he has already read. A mere annoyance, I grant, but with the great number of completely unnecessary annoyances that plague surfers today, anything that adds to the mass should be avoided.

As a rule: A page should rarely contain references to it self, and those references that do occur should be clearly indicated, either by use of suitable formulations (“cf. the above discussion”) in the text, a good title for a group of links (“Contents of this page”), or another clear indication (as with, e.g., the footnotes of Wikipedia).


How to support tabbed browsing

Tabbed browsing is basically supported out-of-the-box—unless extra work is put in to break it (be it deliberately or as a side-effect). Correspondingly, a designer only has to look out for errors. In addition to the above, it will likely suffice to just open a few links in new tabs during testing: If this is impossible then something is wrong.

As a general rule: Never assume that your visitors will visit your website in a linear pattern. In today’s world, an increasing number will not—unless they find your site uninteresting, and are just looking for a bare minimum of information. Do not unnecessarily restrict their freedom, do not assume that the order pages are retrieved in has a major informational value when evaluating statistics, etc.

(I am, at the moment of writing, struck by a horrible suspicion: Could it be that there actually are idiots out there who deliberately try to enforce a linear and non-tabbed visit, in order to get better statistics? Considering some of the things I have seen over the years, I cannot rule it out. Lest there be a mistake: This is an idiocy that does more harm to than good to profitability in the big picture; further, it is ethically highly dubious.)