Location Bar Proposal

For the past few weeks, we’ve been discussing various ideas relating to the Location Bar in mozilla.dev.apps.firefox. Dão Gottwald has been doing a great job keeping up with the suggestions, and implementing them in the excellent LocationBar2 extension.

Having done the prototyping, and a UI review with Jonathan Nightingale and Mike Beltzner, we now propose that we do the following two independent things, as a start:

1. Remove the favicon from the URL bar

We want to make the URL bar totally trusted, and that means not allowing sites to control parts of it to spoof locks or things like that. We can either remove it entirely or replace it with a generic page icon/folder icon/whatever under our control.

I note that mockups posted recently for the Places UI use this icon for a menu, and so we may need to negotiate as to what happens.

2. Change the URL bar so that everything except “Public Suffix + 2” is greyed out

If the URL bar is focussed or hovered over, the colour switches back to black throughout. This should be possible using CSS only. The “greyed-out” colour is a pref; people who don’t like this feature can set it to “black”.

Public Suffix (also called Effective TLD) is the part of the URL not owned by a registrant. E.g. “.com”, “.co.uk”, “hokkaido.co.jp”. 2 is the default for a pref; we think this is the right number, but want real world experience. So Public Suffix + 2 is e.g. http://www.mozilla.org, http://www.ibank.barclays.co.uk/foo/bar/login.do, http://www.fred.blogspot.com/archive/2007/04/06/mypost.

This will look basically like Ka-Ping Yee’s mockup.

We may also do other things from the LocationBar2 UI experiments. However, these two things are where we want to start, and then we can look at further changes.

I’d like to finish by pointing out that it seems to me that the process we’ve just gone through is a textbook example of how open source development and UI prototyping should work in our world. We had loads of cool ideas, implemented them in an extension, kicked them around a lot in discussion, realised some were too radical, and have now come out with a considered proposal. This rocks. Thank you to everyone who took part.

36 thoughts on “Location Bar Proposal

  1. Your explanation of Public Suffix +2 is a bit unclear – your greyed out text doesn’t really contrast with your default grey text.

  2. Good point about the colours: fixed.

    +2 rather than +1 because we think it Does The Right Thing for a greater percentage of real-world sites, while not being significantly more risky. There are lots of sites where TLD +1 doesn’t accurately reflect the divisions of responsibility well. Blogspot and other blog sites are just one set of examples – in fact, the only major exception of that type is MySpace, and their scheme gives them terrible security problems. There are some, in fact, which would do better with TLD +3 – e.g. wibble.stores.yahoo.net. But we think that’s taking it too far.

    As I said, it’s the initial value. Let’s see how it works itself out in practice.

  3. I feel the subdomain is too important to be greyed out. For example, at BBC there are a number of subdomains, all distinct sites. Subdomains can also tell you a little about the page you are viewing.

    I’m with the removing of the favicon, as long as the tabstrip is on by default, and a new-tab button is on the UI _by default_ (ideally left of the tabstrip)

  4. I think the gaying out of anything but eTLD+2 is a very good idea.

    Removing the fav-, er, site icon, is something I don’t understand at all, as it makes all domains/URLs more alike instead of differentiating them. And it gets quite confusing, IMHO, for people like me who don’t even have a tabstrip on their display…

  5. >> Remove the favicon from the URL bar, not allowing sites to control parts of it to spoof locks or things like that.

    Excellent idea! And disable images permanently, not allowing sites to spoof each other’s looks.

  6. Mithgol: that’s not the same. The content area (and tab bar) are untrusted, whereas the URL bar is (supposed to be) trusted – it should be giving you true and clear and non-misleading information about the site you are on. At least, that’s what we are working towards. That’s why, for example, the possibility of IDN-based site spoofing was such a concern for us.

    Kairo: Seamonkey doesn’t have to make the same UI decisions as Firefox :-)

  7. Removing the URL bar will slow down user navigation.

    I’m using the URL bar 95% of the time by typing the first few characters of a website and have auto-complete do the rest. I’m not the only one to do auto-complete to switch quickly from one site to the other. For web site that are not in the auto-complete history, we either type the domain name completly or more rarely, open the site from Bookmarks.

    So, if parts of the URL is changed to icons or greys out, how will we be able to browse quickly using the URL? Will we still be able to type and have auto-complete do the rest?

  8. Jaques: Yes, and yes. The greyness only applies when the URL bar is not focussed or hovered. If it’s either of those, the entire thing is black again, and works just the same as now.

  9. If it’s no longer displaying the favicon, does that mean the browser can stop trying to download nonexistent favicon.ico files every 5 minutes?

  10. Re favicon:
    >> We can either remove it entirely or replace it with a generic page icon/folder icon/whatever under our control.

    Just a note: Removing it completely would also break current middle-click paste functionality on Linux (see Bugzilla bug 291768) as well as single-click to select URL (Bugzilla bug 302660).

  11. There are lots of sites where TLD +1 doesn’t accurately reflect the divisions of responsibility well. Blogspot and other blog sites are just one set of examples

    I think we need to come up with some way of allowing kinds of ‘sub-ownership’ like this in a sane fashion. Not really sure where you’d start with this though, it’s a whopping big problem to solve.

  12. As someone who bookmarks sites solely by dragging the favicon to the BM sidebar or toolbar I’d find removing that icon a pretty painful experience (though I’m sure I’d adapt eventually).

  13. Hide GET parameters by default. The average user doesn’t need to see them. They’re ugly anyway.

  14. Using Locationbar^2, there are two features that I’m missing right now:

    • The ability to drag and drop the URI into the bookmarks sidebar — I’d normally do this by dragging and dropping the favicon.
    • The ability to (under Linux) use X11 style copy & paste on the locationbar. Basically, the thing would have to stay in text input mode if the current selection happens to be part of the URI.
  15. Hi Gerv. I like that you’re choosing these two changes as the ones to focus on to start — I agree they’re the most important and offer the most clear advantages. While I understand, as you said, that this is an experiment, and I very much support the idea of trying things out and getting feedback before setting them in stone, I’ll just add my voice to the opinions that favour +1 instead of +2. It really seems to me that +1 makes more sense in terms of assigning responsibility and avoiding possible confusion. +2 may work for some sites, but it appears to be more the exception than the rule.

    I’d also like to hear/read more of the discussion/debate that led up to the choice of +2; where did it take place?

    Anyway, please add that to your set of opinions collected on the topic, and the other data you will be collecting as you get feedback from testing. And thanks for shepherding this design/decision process.

  16. If it’s gotta go, it’s gotta go, but I’d sure miss the favicon. Is it possible to simply make the security icon wider? For example, instead of 16×16, make it 40×16, and thereby inimitable by a favicon?

  17. How about combining the favicon and throbber in the toolbar?

    Advantages over having the favicon in the address bar:

    * It would be draggable and pretty without creating a spoofing hazard.

    * It would also fix the “throbber is always visible” problem that annoys Mac purists, without creating odd-looking blank space when the page isn’t loading.

    * It would make it easy to create a bookmark at the end of the bookmarks toolbar (rather than in the middle of the bookmarks toolbar).

    * It would be more fitts-law-happy than just having the throbber there. (The edge of the screen is valuable space.)

    * It would be consistent with what we do on tabs.

    * When navigating between two pages that use the same icon, showing the throbber would be less confusing than what we do now (temporarily showing the generic-page icon).

    * It would get rid of the strangeness that results from the favicon being displayed once on a white background and once on a gray background when the tab bar is displayed. (The strangeness is most apparent when the favicon is transparent at its center, or when the favicon has white or gray borders.)

    Disadvantages:

    * It might not be especially discoverable as a “drag this to create a link to the page” control.

  18. Let’s speak about the look of the browser… Firefox has not a so “cute|shiny|modern” look, favicon is the only real coloured “vivid” element in the toolbar, maybe it’s useless, maybe it’s already in the tabs. But i have tried locationbar^2 without the favicon, and it looked so bad that i had to reactivate it.

    But i understand your idea to make the toolbar a trusted location.

    A better way could be:

    – remove the site favicon
    – remove the protocol (http, ftp, gopher)
    – put a new general favicon based on the protocol (so http has a web page icon, ftp has a server icon, local file has a folder icon, txt and other files can have system icon, ecc)

    about the colors i like the locationbar^2 idea of having the domain+2 BLUE, the path black and the quary or anchors GREY
    it’s more clear than having all grey

  19. I think the behavior for hovering and styling of the location bar should be changed. When hovering the text should be all black, but when not hovering it should grey out the unnecessary parts.

  20. I think point 1 is a good idea…

    I’m leery of point 2, however. You’d have to do something a lot smarter than that +2 thing. It could be very counterproductive if, for example, a hosting site called foo.co.uk provided its users urls at bar.foo.co.uk, baz.foo.co.uk, etc.

    Firefox would then be telling you “This is foo.co.uk, give this site all the trust due a major corporation.” Except really it’s some chintzy personal site owned by Bar or Baz and is probably full of lose vis security.

    The upshot is, thanks to the varying depth to which countries subdivide their TLD, and the practice at some sites of giving users subdomains, there’s no standard for what parts of the domain tell you who owns it. That means that any value or regular expression you set is going to get it wrong a healthy percentage of the time. Since getting it wrong will typically mean highlighting a trusted entity which delegated the site to the individual actually responsible, getting it wrong will be considerably worse than not providing it at all. It will create false trust.

  21. Removing the favicon is a bad idea, without the favicon the idea quick bookmarking would be removed from FireFox, in general I guess I am opposed to the Public Suffix + 2 idea as well, will there be a way to disable these features to show the favicon and remove the graying. I couldn’t use FireFox if your going to make odd features like this without a disabling function.

  22. I think if the favicon is not in the address bar then it should be in the title bar. Both the title and the icon are site-provided information, so they go well together, and also match the icon and title that is in the tabs.

    As a designer and manager of a credit union Web site, I think the idea of highlighting the most important part of the URL with color is a great idea. You’ve probably no idea the huge percentage of people who cannot decipher the URL scheme in order to identity what site they are on. It always shocks me to realize that for so many ordinary people it is like trying to decipher a serial number on their stereo. We cannot even advertise on radio an address with a slash in it because that is just too much for most folk. And that’s true even though our membership is predominantly in the bay are/silicon valley. It’s sad.

    Anyway, it would be a godsend to be able to tell people to just verify that the black part of the address matches the address we tell them. The main reason from my point of view is as a safeguard against phishing (if we can get people to look in the location bar at all). I would just suggest “Public Suffix + 1” though, so that people do not distrust our sub-domains (which can be none, “www”, or the name of our online banking product).

    You might even consider giving it a bright yellow background with bold letters, instead of just making it black. For the sub-domains, maybe you could make the next level bold with a lighter yellow background and the next level black with no bolding or background.

    For the lock icon in the address bar, maybe you could connect it to the protocol, such as by drawing a border around both the lock and the “https://”. Or let the theme background continue under that part when the url is not focused on.

  23. How about allowing the location bar to me placable anywhere on the browser?
    Next to the top line (File Edit, View, etc) or on te status bar at the bottom or if you double click on it as a stand alone window which when the x is pressed to close it, it reverts back to the known location on the browser.

    FREE the location bar.
    Set it free!!!

    Bob

  24. I dislike the idea of removing the site icon. Especially because I like the Places Mockup which perfectly fits into Vista’s “no menu bar”-policy (which eventually will gain lion’s share on OS market..).

    I personally think things like secure transmission, rss feeds and web reforgeries (probably Microformats as well) should stay on the right part of the location bar, while the site icon (or the new Places UI – I like the menu thats like what the search bar currently is) should be on the left side of the location bar.

    I don’t care much about the out-greying of special URI parts. Probably because I can pref it out. However, I think +2 is better than +1 or +3. Most sites I’m visiting are +2.

  25. The favicon is a great part of a site’s look and identity. Safety is important, but I feel this is punishing all website owners and users because of a few bad seeds. It’s an overkill safety feature much like the ones seen in IE7.

  26. Are there plans to have this URL graying out a choice that the user can make? I actually like seeing the whole address up there and use it when I’m talking to people. Honestly, I just don’t see the point in this at all.

  27. I understand that typical users may not know how to decipher the URL, but how about at least making it a customized markup? Have default settings graying out the URL, but give me the choice of colorizing a URL to my own preferences, or a way to turn off the graying out effect all together.

    If you’re concerned about security, then make it a higher level skill to change a preference like that. Place it in about:config instead of Tools -> Options, and it weeds out most of the casual tinkerers anyway.

    As for the favicon, do the same. Default it as no favicon displaying if you must, but leave the option there for me to turn it back on in some advanced settings location. I’m not sure I would upgrade to FF3, I’d miss them so much.

  28. Don’t remove the favicons, just display the locked icon somewhere else instead, favicons are great for long processes, the user can browse using another tab, then see the icon change when the process is complete.

  29. I don’t understand why putting the safety icon on the right (plus the background color change) is not enough. Changing its size, as has been suggested, is another way to differentiate site icons with security/notification icons. To be exact, I think the real problem here is what Johnathan Nightingale is saying: indicating the lack of security/identification by the absence of a marker is bad UI for common people. And it allows website to forge the identification icon.
    http://blog.johnath.com/index.php/2007/06/04/will-firefox-have-a-green-bar/

    When Mithgol ironically suggests to also block images from the page, you answer that the page is not trusted anyway, while location bar should. Is this point really a solid knowledge among the common people you’re targeting by these location bar changes? Of course it is for us, but we won’t take a site icon for a security padlock.

    About the url’s syntax coloring, I think it could be an interesting approach to educate people into what the url is. But I wouldn’t like a coloring scheme that basically tells them some parts are useless. This is not helping, when the best protection about phishing is user awareness. Back to the more general syntax coloring, though, it could be a great way to help identify url parts: scheme, subdomains, domain+eTLD, path, query, anchor… This could be disabled, and easily configurable, with CSS colors per item, allowing for a simple default and powerful personalizations.

    About the +1/+2… issue, I would support keeping +1 as the domain, which is the exact part that is registered, and cannot be reused: any “bar.foo.com” can be spoofed by “bar.fool.com”, or “bar.foo.l.com”.

  30. I don’t think having the lock icon on the right side (but still in the address bar) adds enough safety. Users navigating to a malicious site with a lock favicon will still see the lock and think “yep, it’s secure, it must really be wamu.com” (or more realistically, think nothing at all*), not “hey, why is the lock on the left instead of on the right?”

    * I’m not trying to malign the users. I’m not saying they’re dumb, or incapable of thinking, but that phishing works best when users’ skepticism is turned down, and they’re working based on habits rather than caution.

  31. I agree that favicon spoofing can be problematic, but you should still have SOME icon there for quick bookmarking. I like the above idea that you could have a generic favicon for http, https, ftp, and various mimetypes. But getting rid of it altogether may not be the best idea, at least in my opinion.

    I also agree with the URL graying, if the contrast isn’t so sharp. Sometimes I like to see the whole URL, and it’s difficult to do so if you’re looking for it. Also, I believe public suffix +1 is a MUCH MUCH better choice than +2. Many sites are differentiated by their subdomain (bbc.co.uk, kde.org, google, even mozillazine.org! ;) ) and obfuscating that would be a huge no-no.

  32. I don’t understand the comments that losing the favicon will lose the quick bookmark facility – you can do exactly the same by dragging the URL (click it once to select the whole URL, then click again and drag). I do think they should be kept in the bookmarks menu and tab bar.

    Perhaps it should be an option to show the favicon in the address bar, off by default?

  33. Keith,

    It’s not a matter of losing the quick bookmark facility. For me, it’s a matter of real estate and presentation. The favicon saves me valuable space in my bookmarks tool bar. I can quickly identify which site I wish to visit, without having to read an acronym- which is the general substitute I make when no favicon is present.