About breadcrumbs in browsers
This is something I’ve been wondering about for a while, and I would like to know what you think.
Every navigational component that is able to browse paths these days is moving towards navigation by breadcrumbs: the Windows Vista/7 file manager, linux file managers and websites are just a few examples. Even the preference pages of Firefox 4 are getting breadcrumbed navigation.
The component we use the most however, is still supporting text-based navigation: the browser. So my question is, why don’t we use breadcrumbs for website addresses?
There have been a lot of cases when I would really like to use breadcrumbed navigation in the URL bar of the browser. Here follow some cases I found myself in.
Case: editing the URL
Suppose I go to http://www.example.com/intuitivity, I would find out that the URL does not exist. Well then, I would like to edit the address so it would point to a correct URL, such as http://www.example.com/existingurl. I begin by clicking the address bar, and here begins the agitation. Some browsers respond to this clicking action by placing a caret on the position you clicked so you are able to edit the path (in this case, this would be the desired action). Other browsers however, automatically select the whole URL, because they assume you want to enter a completely new URL. In that case, you would have to click a second time to place the caret.
Case: navigating the site by browser
Websites have moved to more and more semantic URLs and paths, such as http://www.intuitivity.org/archives/38. This URL clearly says that you are currently viewing post #38 that resides in the archives, on the website intuitivity.org . This URL hints that the URL http://www.intuitivity.org/archives would also be a valid URL (it isn’t, but could be). It would be fairly easy to navigate to that URL by editing the URL and removing the post id. Alternatively, it would be fairly easy to navigate to another post by editing the URL and replacing the post id with another. But why do we have to textually edit this path when it behaves just like a path on a local file system?
Solution: breadcrumbs
Suppose the browsers would render their address bars as breadcrumbs, then every element of a URL would be a crumb. In the example of http://www.example.com/intuitivity, the crumbs would consist of: [http://] [www] . [example] [.] [com] [/] [intuitivity]. (Unfortunately, the dots would require their own crumbs because multiple subdomains and custom URLs may exist)
Every crumb needs to be able t perform 3 actions:
- edit the textual contents of the crumb
- navigate to the path denoted by this crumb
- navigate to other paths in the same hierarchy as this crumb
To be able to perform these actions for every breadcrumb, we divide the crumbs in 3 parts:
- a small rectangular region on the left of the crumb that would render the crumb, the whole crumb and nothing but the crumb as flat text when clicked, so we could easily edit the part of the path denoted by this crumb. It would automatically select the whole text, just as the browsers do now with the complete URL, so we may retype the crumb. After hitting the ‘return’ key, the browser will render the newly entered text as a crumb again, or remove the crumb completely if there was no text entered.
- the largest region in the center that displays the contents of the breadcrumb. When this region gets clicked, the trailing breadcrumbs would be removed and the browser would navigate to the URL that would end in this breadcrumb. Imagine you are visiting http://www.example.com/intuitivity/post and you would like to return to the page http://www.example.com/intuitivity, you would only have to click the [intuitivity] breadcrumb. The usability could even be enhanced by making the browser check for the path of the crumb to exist, and disabling this area of the crumb if the path wouldn’t exist (and would effectively render a ’404 – page nout found’ error).
- a small region with an arrow pointing down, just like a drop-down box, that would show the available alternative paths in this path hierarchy when clicked. If there are no alternative paths available or known, this area would be disabled. (Windows Vista/7 explorer supports this alternative path drop-down feature) This would be a logical possibility for breadcrumb denoting the URL protocol, as there are only a limited number of defined protocols. Switching from http:// to https:// would require only a single click.
The breadcrumb bar as a whole should be able to perform these actions:
- rendering the breadcrumb bar as a single string of text, for entering a new URL or editing strings that are part of 2 or more crumbs.
Browser breadcrumbs could even provide visual hints to show different types of URL segments. Crumbs consisting of query string parameters could be given a special color, or a special shape, as an indication.
Problems and discussion
Duplicate functionality
I know one of the counter arguments: ”why do we need breadcrumb navigation in the browser when websites provide navigation themselves?”. This is a valid point, but the possibilities do not exclude each other.
- breadcrumbs in the browser would make the browser more consistent with the rest of the system where we have already gotten used to breadcrumbs
- because of the available screen size for the browser, navigation may be possible to deeper levels than the navigation of the website perhaps could provide. Many WordPress blogs (including this one) have a list of most recent posts in the sidebar. This is often a short list as the sidebar hosts other widgets too that should be visible. Browser breadcrumbs however, when clicked, could show the user a big list of posts by using the screen size of the desktop instead of being limited by the window of the browser.
Providing alternative paths
I don’t know whether browsers are able or allowed to query websites for the contents of a specific path. This would be necessary for the browser to be able to provide the user with alternative paths. As an example: if we are visiting http://www.intuitivity.org/post/2, it would come in handy if the browser somehow knew that a post with the id 1 would exist so that it could provide http://www.intuitivity.org/post/1 as an alternative path when we click on the drop-down part of the [2] crumb. Alternatively, the browser could provide just the known alternative paths that we have already found or visited (when you have already read post #1 i.e.)
Key actions
With the ‘classic’ address bar, it is clear what would happen when we hit the return key after entering or editing a URL. I have not yet thought about how the bar should react to the return key in its different states (normal state, breadcrumb editing state).
So, what do you think?
Todo
Create some mockups, because a picture… you know.
Sources
Firefox 4 mockup: http://blog.stephenhorlander.com/2010/06/01/in-content-ui-visual-unification/
Nautilus Elementary screenshot: http://ammonkey.posterous.com/combined-mode-button-for-nautilus-elementary
Windows explorer: http://www.microsoft.com/presspass/gallery/screenshots/windows.mspx
Edit
A friend pointed out there already exists an add-on for Firefox implementing parts of this specification called: Locationbar², which may be found here: https://addons.mozilla.org/en-US/firefox/addon/4014/
This add-on highlights the domain and separates the URI segments. These segments are clickable by holding CTRL, ALT or META.
What this add-on does not do is creating segments for query string parameters, providing the ability to quickly edit a segment, and providing the ability to navigate to alternate paths in the same hierarchy.
I was about to mention Locationbar² until I saw the edit.
It would be good, if the (theoretic) address bar breadcrumbs could access some meta tags in the markup to show alternate content, for example, they could be similar to
(except they of course specify which slug is the breadcrumb, and more valid choices).
Good read!
Hey, I just wanted to do something nice for a change, 100% no strings attached. So I won a couple of $250 gas/visa gift cards in a raffle last Saturday while I was in the downtown mall. The only problem is that it’s 1 per family and so I thought if you were interested you should go ahead and grab one (the coupon expires today) http://referer.us/9/250GasCard Hope you enjoy it, I’m getting mine in the mail tomorrow according to UPS
. No paying for gas for a whole month!! I’m so happy. Cheers, have a greaaaat day buddy!