Enhancing Firefox GUI usability

You no longer have to go through the hassle of editing your CSS, I’ve turned this into an extension

Benjamin Roe recently wrote an article titled Usable GUI Design: A Quick FAQ in which he talks about Fitt’s Law.

The time to acquire a target is a function of the distance to and size of the target.

So the bigger the target, the shorter the time to acquire, and hence the easier to reach.

In relation to the web this has been discussed before by such luminaries as Dave Shea and Dunstan Orchard who talk about making link targets larger for blog sidebars and so on.

In his article, Roe talks about how small the browser back button in Firefox is. Once I’ve applied my preferred settings (use small icons, small, no text), it looks like this:

That’s a pretty small target for one of the most commonly used targets in an application. Microsoft realised this a long time ago and in Internet Explorer’s ‘customize toolbars’ dialog you can choose to display ‘Selective text on right’ in the text options:

IE's customize toolbar dialog

What this means is that even when the toolbar icons are set to small, the IE navigation toolbar looks like this:

IE's back button with added text

The back button is clearly at least twice as wide as the less frequently used forward button and three time as wide as the stop, refresh and home buttons (Roe does actually allude to this , but mistakenly identifies it as a feature of the Longhorn edition of IE). To compensate he suggests making Firefox’s back button much bigger to make it easier for users to click on, and provides an example of what it might look like .

Of course, Firefox being completely user-customisable, we can (mostly) do this ourselves. I admit I’m too lazy to create a new back button and find out which chrome folder to put it in but all you really need to do is add the following lines to your userChrome.css:

#back-button .toolbarbutton-icon {
padding-left: 10px;
padding-right: 10px;
}

The easiest way to do this is to:

  • install the ChromEdit extension
  • restart Firefox
  • Tools menu -> Edit User Files
  • Add the CSS above to the top of the file and click ‘save’
  • Restart Firefox.

All done! With any luck, your navigation toolbar now looks something like this:

A wider back button in Firefox

When you hover your mouse over the back button, you can see that the target area has been massively increased

What the back button looks like when you hover over it

Obviously you can now edit the width to make it as large as you like. 10px was nice for me.

I was actually hoping to also be able to add the word ‘back’ after the image using the :after pseudo-selector but it didn’t seem to work. Any help with this gladly appreciated 🙂

An anonymous commentor shows us how to add the word ‘back’ to the button by using the following CSS:

/* Force the label to be visible, even in icons-only mode */
#back-button .toolbarbutton-text {
display: -moz-box !important;
}

/* Put the label to the right of the button */
#back-button .toolbarbutton-menubutton-button {
-moz-box-orient: horizontal !important;
}

This works a treat but this will break the display of the toolbar if you switch it into other modes. The CSS I’m now using which leaves the back button as it should be in larger modes is below. My toolbar now looks like this:

Firefox back button with the word 'back'

I’m not entirely sure it’s the most efficient thing in the world, and the previews don’t like right when you’re doing ‘customize toolbar’, but it all looks and works A-OK as soon as you hit “OK”. Promise 🙂

/* Force the label to be visible, even in no text */
toolbar:not([mode=full]) #back-button .toolbarbutton-text {
  display: -moz-box !important;
  padding-bottom: 2px;
  padding-right: 10px;
  padding-left: 2px;
}

/* put some spacing around the button icon */
toolbar:not([mode=full]) #back-button .toolbarbutton-icon {
  padding-left: 8px;
  padding-right: 6px;
}

/* Put the label to the right of the button */
toolbar:not([mode=full]) #back-button .toolbarbutton-menubutton-button {
  -moz-box-orient: horizontal !important;
}

Published by

22 thoughts on “Enhancing Firefox GUI usability”

  1. Good stuff!

    I use the Back button very often and this should help a great deal (I also have my preferences set to “use small icons, small, no text”).

    Chu Yeow

  2. Hey Phil…tried my best…adding /* before and after….and just couldn’t get it to work?….Using 1.0 any suggestions?….Thanks

  3. Hi anon, putting /* … */ around the CSS will stop it working.

    There’s possibly a combination of settings which stops the CSS from working as-is (this is just a guess), in which case you could try using:

    #back-button .toolbarbutton-icon {
    padding-left: 10px !important;
    padding-right: 10px !important;
    }

    instead. If that still doesn’t work, leave another comment with you contact details (or use my contact form) and I’ll see if I can help.

  4. /* Force the label to be visible, even in no text */
    #back-button .toolbarbutton-text {
    display: -moz-box !important;
    }

    /* Put the label to the right of the button (it is only for the back button, but you can adapt for all buttons ! */
    #back-button .toolbarbutton-menubutton-button {
    -moz-box-orient: horizontal !important;
    }

  5. It *is* a feature of the Longhorn IE. Well, at least the mock-ups we’ve seen so far. These versions of IE have replaced the entire toolbar with a huge BACK button, as can be seen in screenshots here: Longhorn IE. In any case, you are correct about the current version of IE, but Longhorn emphasizes this quite a bit more.

  6. This works best for me:
    /* Make the Back button bigger */
    #back-button .toolbarbutton-icon {
    padding-left: 10px;
    padding-right: 8px;
    }
    /* Force the label to be visible, even in no text */
    #back-button .toolbarbutton-text {
    display: -moz-box !important;
    padding-right: 4px;
    padding-bottom: 2px;
    }
    /* Put the label to the right of the button */
    #back-button .toolbarbutton-menubutton-button {
    -moz-box-orient: horizontal !important;
    }

  7. Ah, thanks for that nate. The image Ben Roe linked to in his article when referring to Longhorn was the standard IE6 ‘selective text on right’, but this is clearly quite different!

    Also, many thanks to the Anonymous poster above with the intimate knowledge of the custom Mozilla properties, I’ll update the post to reflect this new info! Obviously I should have spent longer in the DOM Inspector!

  8. I’ve got this to work on the Back and Forward buttons, can anyone get the label to the left on the Reload, Stop and Home buttons?

  9. Hmm, nothing springs to mind…I don’t think you can float the elements to be the other way around.

    Maybe you can set direction:rtl on the button? I’ll have a play later.

  10. Well, I’ve figured out how to get the labels on for all the buttons. Took a bit of config, but it works.

    The line: -moz-box-orient: horizontal !important; needs to be placed under the buttons section in the browser.css file within the classic.jar archive.

    The cell padding etc can still be modified via userChrome.css

    Hope this helps others.

    Cheers,
    yayo

  11. I had to add !important to all of the declarations to get it to work for me. I’m very happy with the results: a nice, big button that even my twitchy little mouse can hit.

  12. I have a special “go back” key on my IBM keyboard. Unfortunately I hit it a lot accidently. When I do need to go back, though, it works like a charm.

    Still good that you’re highlighting how easily you can customise Firefox though.

  13. Does the big back button work for mac? I can’t stand how the back button on firefox doesn’t work. It is too fancy, it wants to give me a bazillion options in history, I just want it to GO BACK.

  14. Hi,
    anybody here knows if it’s possible to make firefox look like this?

    here

    Basically what is needed is to “extend” the “bar” look behind the tabbar and make the “go” button as big as the stop one: is it possible to do it with a theme?

    cheerz,
    Salvo

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.