September 8, 2004

Firefox Default Toolbar Proposal

I started writing a comment to Asa's default toolbar config post but felt that it would be hard to explain it all without a screenshot too, so this is my comment for you Asa, with a twist. :)

To make the transition for IE users as smooth as possible, the default toolbar set in Firefox should include the buttons Asa is suggesting. However, there are a few issues that should be resolved too, some with alternative solutions. I'm certainly not capable of telling which one is the best solution, but here are my humble suggestions:

  • The Address bar should have a label, like in IE. It's not completely obvious now what the text field is for, and it's not easy to tell the difference between the two (address and search), especially not when the Google icon is there instead of the magnifying glass. See the screenshot to see what I mean.
  • For consistency, the search bar should probably also be labelled. An alternative solution would be to add default text (grayed out) that disappears when you click the search field. Again, see the screenshot for an example. Even if no labels are added to the text fields, this default text in the search bar would make the difference between the address and search field more obvious.
  • The address field must have the "Go" button visible to the right by default. The whole purpose of that button is to be used for so-called "computer illiterates". There's no way a user needing that button will find his/her way of customizing the toolbars to add that button, but it's very likely that geeks like myself will know how to remove it. So it should just be there by default. If not, it should be removed from the toolbar customization dialog altogether.
  • The search field should probably also have a "Go" button next to it, as the address field has. It shouldn't read "Go", but rather "Search" or "Find". I didn't create a button like that in the screenshot, but I would suggest using a magnifying glass or something similar as the icon.
  • Finally, the toolbars should support "Selective Text on Right". That means, some of the buttons should have a label on the right, and most of them should not. Selective Text on Right is better than labels below the icons because:
    • It takes less vertical space, saving more screen real estate for the web pages.
    • When used wisely, it also takes less horizontal space than using text labels below the icons.
    • No text labels at all can be confusing for new users.
    In the example screenshot below, the Back and Bookmarks buttons have text labels. Back is the most important button and Bookmark is arguably the least obvious.

That's about it. The actual layout of the toolbar can be discussed. For example, it could look better if the search field (along with the not yet invented "Go" button next to it) was moved up next to the toolbar buttons. But I think I covered the most important things.

Posted by djst at September 8, 2004 3:55 PM
Comments

Well, I really don't have any idea who the intended customer for Firefox is at this point. The new direction seems to be to provide something that looks as much like IE as possible, provides pop-up blocking, ad blocking and tabbed browsing and has themes and is in other ways a compatable with IE as possible.

There are 2 problems with this:

1. If that was the intention then you should have listened to the IE users who have already made the switch who told you loud and clear that the one thing they missed was printing from the context menu.

2. It seems like the product you are trying to create already exists. It is called Maxthon.

Posted by: Bill at September 8, 2004 4:25 PM

o text labels at all can be confusing for new users.

That's why there are tooltips. I dissagree with you on everything except the 'The address field must have the "Go" butron' :)

Posted by: berkut at September 8, 2004 4:26 PM

Bill, you pasted/typed the same comment at my weblog. How about going through the trouble of actually coming up with a new comment for a new blog post ;-)

Because a few IE converts were geeky enough to find bugzilla and vote for or file a bug on printing in the context menu is a damn far stretch from "the one thing [IE users] missed". I've seen the usability studies in person and I can say with out a doubt (let me repeat, _without_a_doubt_) that a print context menu was absolutely nowhere in the top problems for IE users. To anyone that's seen real IE users in action on Firefox, your claim is just laughable.

The product we're trying to create is not Maxthon. I've used Maxthon and it's one of the most complicated, buggy, unfriendly browsers I've ever used. If anything, we're working hard to specifically not be as confusing and unfriendly as Maxthon.

Posted by: Asa Dotzler at September 8, 2004 4:52 PM

berkut, selective text on the right is much better for new users than forcing them to hover over each and every button to see what its function is

I agree with most of your points, djst

Posted by: Håvard Lindset at September 8, 2004 4:57 PM

You obviously have a bigger screen than I, wanting to separate the tool and address bars, and put all this junk on them. The most wonderful quality of Firefox currently is its economy with screen real estate. Maybe your screen is bigger than mine... :(

"Go" buttons encourage bad user habits. If you're using either one of the address and search fields, your hands are already on the keyboard. What, then, is more logical than using the Enter button of the keyboard to submit the entry? "Go" buttons are evil. I thought open source was about empowering the user. Make them learn - education is the way to freedom.

Posted by: Samsara at September 8, 2004 5:03 PM

I partially agree with your comments. While making Firefox look more like Internet Explorer might be encouraging for newer users, I have to say that making Firefox look more like Internet Explorer seems to defeat the purpose, except in two places, I think.

Firstly, I'd like to see the print button on the toolbar by default. I think it can be confusing to some newbies, and having to go to the menu bar just for the print is annoying.

Secondly, selective text on the right is useful, but I think that most icons in Firefox are easy to interpret as to what their functions are.

The only thing I see as needing improvement for newbies possibly is the search. I think it's a good idea to put in the "enter search term" in the background initially, but it would be even better to have a go-like button for the search. I think a lot of people get the idea about pressing enter for the address bar, but it is not that clear for the search bar in its default state.

Posted by: Michael Romero at September 8, 2004 5:25 PM

Samsara, but if one my hand is already on the mouse and the other one is holding a cup of coffee, then it's much quicker to select some link, select "Copy" from the context menu, click in address field, select "Paste" from the context menu and click "Go" than try to find and push those Ctrl+C, F6 etc... ;)

Posted by: Axl at September 8, 2004 5:26 PM

For the record, I have unreviewed patches for both the "selective text on right" and "label address and search fields" issues. Selective text seemed to have generic problems mconnor never really described to me, but I'd be happy to fix them or see someone else roll a better patch :). See: http://bugzilla.mozilla.org/show_bug.cgi?id=215838 http://bugzilla.mozilla.org/show_bug.cgi?id=171245

Posted by: Jon Henry at September 8, 2004 5:29 PM

I think this is a GREAT step in the right direction... Although alot of people will probably not like it because it uses such a similar layout to IE, I think it flows logically, and would make usage very comfortable for a normal user.

I especially love the 'Enter Search Term' idea for the search bar... I know this sounds stupid, but I have ALWAYS had to explain to people (i.e. common users - think 'mom') what the search field is all about. This might make the introduction of that feature more intuitive.

Posted by: John at September 8, 2004 5:40 PM

Of all the things I love about Firefox, perhaps the top thing is that I don't need a search bar at all -- I've changed the address bar search behavior so that any term does a standard Google search (instead of the "I feel lucky" search).

I really think that change should be made in the default configuration. Everyone I've installed FF for LOVES the feature. As soon as users realize they can search with the address bar, they never go back. But for some reason, to get it to work that way you now have to find and change your user.js file, which 95% of new users won't ever do.

"To search, simply type a term in the address bar." One line of help text. Almost an inch of saved screen real estate. Ease of use.

Anybody with me?

Posted by: realish at September 8, 2004 5:42 PM

I think it's better not to have the Go button shown by default. If it's there, users (who are, of course, stupid) will think they have to use it (after all, why would there be superfluous UI there?) and not learn that they can just press Enter.

Posted by: Greg K Nicholson at September 8, 2004 5:45 PM

I agree much to the last statement. To me the "go" button is the most curious invention in browser UI.

It doesn't make sense to make firebird as much ie like as possible just to make the changelings happy.

Instead they should have a chance to see how ridiculous some of these ms inventions are.

I see some sense in having smart text beside icon labels.

To make some other suggestions...
- merge the reload- and stop- buttons into one as done by some extension (how often do you reload the page while it's still loading - which can be done by two conseclusive clicks on a combined button? - and why stop the load process of a completely loaded page?)
- automatically switch the search bar from google into search in page mode after entering a google search - or - even better, open the search engines main page by clicking left on its icon, cycle through search engines by middle click and open the context menu be right click or a dropdown button similar to the address bar
- mozillas way of showing and hiding the sidebar (with a click on its visible handle) is much more clever than clicking some icon i a tool bar (like history or bookmarks) in the toolbar. They way it is done in IE5 for MAC is the most sensible i've seen so far.
- a good thing some gnome browsers have (galeon) is to leave the address bar empty for the home page (on browser start). This enables quick typing or pasting into it without having to delete the home pages address from there (which you would rarely need to see).

André.

Posted by: André at September 8, 2004 5:51 PM

I agree with what you said. That looks so close to IE it is almost scary. With that as the default, then a "newbie" can't become confused as easily and not say "Screw this *(#&!" then go back to IE. If you think about it, if it isn't intuitive to your grandmother, then more than likey others will have the problem as well.

Posted by: Mike Wills at September 8, 2004 5:55 PM

> I think it's better not to have the Go button shown by default.

Greg, my point was: either have it displayed by default OR remove it altogether.

Posted by: David Tenser at September 8, 2004 5:56 PM

The combined 'stop' and 'reload' buttons Andre proposed would by a nice feature (not feature as in M$ 'bug' :-)). The same could work for a combined cycling 'history', 'bookmarks' and 'no sidebar' button

Posted by: E.D.O. at September 8, 2004 6:05 PM

what you say is perfect ... for those confused about the target ... the target sould be the whole internet population ... and that means 90% IE users ... those who already use ff, would know how to change this ... i like all what you say

Posted by: kwanbis at September 8, 2004 7:24 PM

How far do we really need to dumb this down? Safari doesn't have a go button period and people seem to be able to figure it out, and these are Mac users who typically expect something to be intuitive. My mother, who can't even double click, has no problem using either Safari or Firefox, or IE for what's it worth.

Really I don't see a problem with the default layout as it is, maybe a few tweaks to clean things up, and I can see adding the go button by default... maybe.

I think part of the reason Firefox is such a nice browser is because of it's streamlined default UI, I also think that it is something that has contributed to all the good press and positive reviews it receives. The more you go into emulating IE just for the sake of emulating IE, the more you enter into the murky area of "Firefox is just like IE, why bother?". Observing common Windows GUI conventions is one thing, completely redefining how your product is initially presented is another thing entirely. Web browsers already suffer from a problem of distinguishing themselves visually, why aggravate the problem?

Personally I think it would fixing something that isn't broken.

Posted by: Stephen Horlander at September 8, 2004 7:38 PM

Please, your going too far with this ‘be like IE thing’! A permanent label for the Address bar!! How computer illiterate do you think these people are?

Posted by: alen at September 8, 2004 9:30 PM

I agree with making the default "skin" look at much like IE as possible. That will help get the IE masses over to a better product. Us more advanced users can skin the browser to our liking. The more users we can convert the better, even if that means "dumbing down" the default skin. The question was posed "Firefox is just like IE, why bother?" My answer to this is because of the flexibility that is gained. If you dont like something with the browser or how it acts there are multiple ways to change it. Changing behaviors in IE is not that simple.

Posted by: skerz at September 8, 2004 11:04 PM

funny proposal, it is a complete copy of IE

Posted by: Dave at September 8, 2004 11:08 PM

Those are my opinions:

- Yes to label left of url textfield.
- No label to search text field.
- Yes to grey text in search textfield. It makes it to differ from the url textfield.
- Also it would be cool if there was a button to errase the url in the textfield (I think Epiphany has this). It hasn’t got to be there by default..
- Yes to Merged reload/stop button
- Yes to Go buttons for url and search textfield, by default. I use them all the time to copy and paste into them with the mouse. Also maybe the url go button should have an different icon, showing the return key and not just a plain arrow. This way a user can realise that he can do the same action with the return key (I think it’s like this in Epiphany as well).
- No bookmark icon. I’ve never used it in my life. I mean what the Bookmark menu item is for. It’s actually easier to use. The only case I would use it, is for opening the bookmark panel and make a search for a bookmark (this does not happen very often though, as you can just make a search in Google for the website the you want).
- No "Selective Text on Right". The icons in Firefox look very similar to IE’s, very easy to understand what they are for.
- Yes to History button by default. Very useful.
- Yes to Print button by default.
- Yes to Big Icons. At least I can work faster with the big icaons that trying to find and push the small ones.
- Make it obvious that the toolbars can be configured. Maybe by putting and arrow button to end right end (just like the way you configure the buttons in Microsoft Office).
- No to just mimicking IE interface for the sake of being similar. If IE users wanted to have the same experience as they had with IE, they would just stick to it.

That’s it :) Am I being paranoid?

Posted by: thanos at September 8, 2004 11:42 PM

No to almost everything. Logic follows:

If you've used a browser before, you know that Back and Forward are key actions. You know how to do what you want to do (find a button that says "go where I was before"), so a Back arrow makes sense without superfluous extra text. If you haven't used a browser before, you really aren't the target of Firefox. (That's almost debatable, but keep in mind that somewhere we list being able to download Firefox as a key requirement in target users. If you can download, you know Back. If you don't know Back, you shouldn't be a target user.)

There's a Bookmarks menu that's only an inch away from the button on my screen. Redundancy is what that button is, it's redundancy.

History is useful, but with location bar autocomplete it's not really needed. There's a menu and a keyboard shortcut for it; that should be good enough.

The location bar should also be obvious to anyone who's used a browser before. There's an icon for the site, it's prefilled with an address when you start Firefox, what more is needed?

Everybody who's ever used a browser (which is a parent set of Firefox's target audience) knows what Google is. The Google brand makes search bar comprehension a non-issue. Long live Google.

Go button by default: that's a maybe, but only a very, very shaky one. If you do one there, tho, you absolutely must have one for Search as well, tho, because otherwise you'll get fools who try to use the existing Go button for both, and then it's impossible to determine the user's intentions in all cases. Actually, given that, let's make it a no.

For selective text, I actually support you -- in a way. I think the toolkit definitely should support selective text (because it's a strong possibility that some applications might want it), but I don't believe Firefox should use it.

Firefox doesn't need a Print button. File->Print is a standard everywhere; if you've used a computer before you know how to print. If you don't, you certainly can't navigate to the Firefox home page, download, and install Firefox.

That's one interesting thing about Firefox: because we're not preloaded on computers yet, we don't have to pander to the absolute-least-savvy user like IE does with buttons for almost everything. (Of course, they do screw this up with the Edit button and the Chat button, both of which would be completely impossible for a newbie.) If our target audience ever expanded to include those who have no experience with the Web, then I might have to change my mind. I really hope it doesn't, tho: I think Firefox has done an extremely good job of educating while still enabling easy use by newbies.

Posted by: Jeff Walden at September 9, 2004 1:01 AM

Good comments, djst, I definitely agree that the default toolbar layouts needs some refinement - and "exchanging" good ideas with IE, Safari and Opera is not a bad move ;-)

> The Address bar should have a label, like in IE. It's not completely obvious now what the text field is for, and it's not easy to tell the difference between the two (address and search),

I disagree with this suggestion. An "Address" label takes too much horizontal space and is not really needed, as the address bar already contains a visible URL when Firefox is first launched. This prevents any discovery problems.

> For consistency, the search bar should probably also be labelled.

The above is not a good idea, I'm afraid, but this one is:

> An alternative solution would be to add default text (grayed out) that disappears when you click the search field.

This is very well implemented in Safari, and would be worthwhile addition to FF.

> The address field must have the "Go" button visible to the right by default.

Definitely.

> ...but it's very likely that geeks like myself will know how to remove it. So it should just be there by default. If not, it should be removed from the toolbar customization dialog altogether.

Not likely at all. I'm an avid keyboard user, but just like Axl above, I do have my "main-keyboard-hand" (left hand) occupied by a coffee mug sometimes. I would replace the Go button with a "Paste and go" entry for the context menu of the address bar (Opera has this).

> The search field should probably also have a "Go" button next to it, as the address field has. It shouldn't read "Go", but rather "Search" or "Find". I didn't create a button like that in the screenshot, but I would suggest using a magnifying glass or something similar as the icon.

This requires a usability test. How many users are really unaware of initiating a search by pressing the Enter key? Probably not many.

> Finally, the toolbars should support "Selective Text on Right".

Perhaps they should, but I'm not sure this should be the preferred default. Another case for a usability test - how many have difficulties guessing what each button does?

Prog.

Posted by: Prognathous at September 9, 2004 1:11 AM

I don't want an address bar label unless it can be turned off easily, as it would take up too much space. The only problem with distinguishing between the address bar and the search bar is that some people may not have ever seen the Google Favicon and wouldn't understand what the 'G-in-a-box' means (IE has problems with favicons).

I wouldn't mind the greyed-out, disapear-on-click text for search bar- in fact I think it's a good idea. It would make people recognise that that is a search box, and even if they hadn't already made the connection that the 'big long box' is the address bar, they would then after seeing that the second one is search.

The Go button be defalt is a good idea- me parents like to have it visible when they use Firefox, and it's easily turn-offable if people don't want it there. Search doesn't need a 'Go' button- it would take up too much space and they couldn't be both removable or people could get confused, so either the address bar 'go' or the search bar 'go' would have to be permanent.

I would like support for 'Selective text', but how customizable could it be? Having limited text is annoying and I wouldn't like to have luse 'Back' and 'Bookmarks' with text, so I'd like to be able to choose those.

Posted by: Phill Bryant at September 9, 2004 2:47 AM

It would be a shame to see such a good browser replace it's steamlined toolbar with IE's bloated mess. But whatever takes to kill IE is for the greater good I guess.

At home I use the Opera browser, a couple of things that would be nice for Firefox to copy are a Stop/Reload button and Paste and Go. Paste and Go is great, I use it a lot.

Posted by: Luke Shingles at September 9, 2004 6:41 AM

A unified Stop/Reload button is a bad idea. Testing it in Safari, I encountered cases where it switched function a split second before I clicked it. Annoying.

Prog.

Posted by: Prognathous at September 9, 2004 9:46 AM

bug 258755 is a request to add a page in the custom installation process to choice between various toolbars style, if you like the idea, you can go vote for it.

Posted by: Mathieu Pellerin at September 9, 2004 12:20 PM

Any idea how to label the address bar? I'm able to mimic the look which mimics IE's. But I've trouble getting a label for the Location bar.

Posted by: Alvin at September 13, 2004 3:14 AM