Navigation

Smaller Is Better

Thursday, March 27th, 2008

I’m not a fan of how much screen real estate the new back button takes up in the latest builds of Firefox 3. Fortunately there’s an easy way to change that1. Here’s a visual walkthrough:

  1. Right click on the toolbar and select “Customize…”

    Picture 3.png

  2. Check the “Use Small Icons” checkbox and then click “OK”.

    Picture 5.png

  3. Enjoy!

    Picture 2.png


  1. You can also move the Home button to the bookmarks toolbar by dragging it there while the Customize sheet is up. 

Comments

  1. zac spitzer replied on March 27th, 2008:

    that looks so much better… browser chrome should be dull and small

    the new back button is too visually distracting/interesting

  2. Jay Freeman replied on March 27th, 2008:

    It seems that on MacOS only the back button gets smaller; on Windows every button is notably smaller.

    PS: People constantly praise MacOS interface design but that rounded buttons are ugly as hell; they even look worse on that favicon. Just stating a fact, not trolling or flaming.

  3. Shawn Wilsher replied on March 27th, 2008:

    I actually like the bigger back button. Didn’t at first, but now it add’s some extra space on the toolbar, which is nice.

  4. Ahruman replied on March 27th, 2008:

    Of course, if they were using real OS X toolbars instead of an imitation, “Use Small Size” would be an option in the contextual menu.

    @Jay Freeman: that really is not a good example of Mac OS interface design. It violates a number of UI guidelines, from “rounded text fields are reserved for search fields” to “don’t do stuff that’s fugly”.

  5. Orrin replied on March 27th, 2008:

    I’m annoyed that the back and forward buttons are now 1 element. I would normally remove the forward button because I rarely used it, now I have to have it if I want my back button. Sucks.

  6. Stephen Horlander replied on March 28th, 2008:

    I just wanted to say that for the next update we are going with a more compact keyhole shape.

    http://www.noved.org/~stephen/smaller-keyhole.png

  7. tomh replied on March 28th, 2008:

    hm, I didn’t even see the new keyhole shape for a long time, as the first change i make is to set the icons to the smaller size. I also find some of the addons i have look nicer at the smaller resolution ( for example gmail notifier / web developer have overbold large icons)

  8. Colin Barrett replied on March 28th, 2008:

    @stephenhorlander That’s great news.

    @ShawnWilher: I value my screen real estate, especially when I don’t have my MBP plugged in to an external monitor, especially vertical screen real estate. I usually collapse all my toolbars (obviously this makes no sense for a browser since you need an an address field to navigate with)

  9. Ben Willmore replied on April 2nd, 2008:

    Small icons also have the advantage that the buttons and the URL bar are aligned. With the big icons, the URL bar is one pixel lower than the buttons. I’m surprised no-one has bothered to fix this. It looks annoying to me.

  10. mike replied on April 2nd, 2008:

    I actually like the back button in the new firefox. The small icon design is unfortunately visually unappealing. I mean, if you want your browser to be completely utilitarian why not just use the text? As it stands though, that back button is the only seemingly good part about the interface. Those round capsules are just no good. I should note that I also like the star button in Flock.

  11. Van Tuyl replied on April 2nd, 2008:

    Oh good heavens, if Windows users think that Firefox on the Mac is an exemplar of Mac UI they’re being mislead.

  12. dalton replied on April 2nd, 2008:

    Hmmm… that crashed my Firefox! That’ll teach me to run nightlies.

  13. Jeff replied on April 2nd, 2008:

    @Orrin:

    To remove the forward button and leave the back button intact, add this to your userchrome.css:

    /* Remove Forward button */

    forward-button {

    display: none; }

  14. Rob replied on April 2nd, 2008:

    Also, if FF wasn’t just faking the UI, the button in the upper-right corner of the window could be command-clicked to cycle through toolbar button sizes instead of just toggling the toolbar view.

    But this is a problem caused in the first place by the over-the-toppedness of the BACK!!-forward keyhole control.

  15. Chris Devers replied on April 2nd, 2008:

    Obviously I’m in the minority opinion here, but Fitts’ law would argue that larger targets — icons, buttons, etc — make interfaces easier to use, even if aesthetically they may seem “wasteful”. I used to always adjust the UI settings to make the icons smaller, turn off text captions, etc, but now I go the other way and turn on captions, show full size icons, etc everywhere. It may seem distracting at first, but you get used to it quickly, and more importantly, it becomes so much faster to do anything when you don’t have to think as much about “hitting the target” with the mouse cursor, that on the whole it ends up being much less distracting in the long run. To me, the nicest change in the new Firefox UI is the bigger buttons…

  16. Colin Barrett replied on April 2nd, 2008:

    @ChrisDevers I actually always collapse all toolbars where possible. I know research has shown that keyboarding isn’t actually faster than mousing, but it sure feels faster.

    And it is probably better, ergonomically, to keep my hands on the keyboard instead of moving to the rather than moving to the rather uncomfortably placed trackpad.

  17. maeghith replied on April 2nd, 2008:

    I think the usability expert, and former Apple employee, Bruce Tognazzini disagrees with all of you: bigger buttons are more usable.

    I think he’ll suggest that if you want smaller icons, just hide the toolbar completely, as you probably use the keyboard (even if he also thinks keyboard is slower).

  18. maeghith replied on April 2nd, 2008:

    oops, chris was faster than I, that wasn’t there when I started writing

  19. End User replied on April 2nd, 2008:

    I love the big button both visually and functionally.

  20. rvr replied on April 2nd, 2008:

    these buttons, and the new ff ui in general, are fugly. big, small, medium, whatever. it’s all ugy! please use standard mac os ui widgets. thank you.

  21. msr replied on April 2nd, 2008:

    Hey, Stephen, could you also get rid of the ugly indent on the left side as well? It looks fine on the right, but it doesn’t make any sense visually to be on the left when the back button casts no shadow on the indent, and appears to be at the same level in and out of the indent, yet is chiseled into both at the same depth. It also just looks plain ugly.

  22. ffhater replied on April 2nd, 2008:

    Guys. Screw this ugly keyhole back button design. My god it looks like some gaudy 1997 Audion or Soundjam skin.

    We have TABS. Why set the lowly back button atop some ugly pedestal when, thanks to tabs, we ate using the back button even less nowadays?

    I will never actually use ff, I will only ever dl it, twiddle the latest version and trash it.

  23. marlwin replied on April 2nd, 2008:

    thanks you’re my hero

  24. TRGB replied on April 2nd, 2008:

    …or you could just download Aronnax’s new grApple themes so firefox integrates beautifully into OS X… http://www.takebacktheweb.org/

  25. random bob replied on April 2nd, 2008:

    Hey i just want someone to tell me how to get FF to NOT take up my WHOLE screen when I hit Maximize; I want it to behave like every other program and open just wide enough to show 100% of the content, no less no more.

    Nope. hit the green button and instead it goes 1200 pix wide, for an 800pix wide site. frig.

  26. ryan » Blog Archive » links for 2008-04-03 replied on April 3rd, 2008:

    […] Smaller Is Better Awesome tip for Firefox 3 Beta for the Mac to get rid of that ridiculously large Back button in the toolbar. (tags: firefox mac howto) […]

  27. Rob Wilkerson replied on April 3rd, 2008:

    Wish I’d seen this before I posted this: http://robwilkerson.org/2008/04/02/firefox-3-beta-4-observations/.

    :-)

  28. Please Stop Doing This. I Am Begging You. • Griffin & Hoxie replied on April 3rd, 2008:

    […] example, and the one that ignited this post. I noticed it on Colin Barret’s site in an article about the Firefox 3 UI. Jay Freeman writes at the end of his comment, PS: People constantly praise MacOS interface design […]

  29. Andres Lucero replied on April 4th, 2008:

    @Chris Devers - The problem with FF3 and other apps with similar fugly buttons (Transmission, I’m looking at you) is that previous versions had UI elements that were much easier to identify at a glance. Now that unique colors and shapes have been removed from the toolbar, it takes much longer to pick out the button you intend to click, and that’s a huge step backwards in usability, IMO.

  30. ken replied on April 4th, 2008:

    @mike: “I mean, if you want your browser to be completely utilitarian why not just use the text?”

    Ignoring the fact that symbols can be more effective than words: because it’s completely borken.

    Try it: Customize Toolbar, Show: Text. Now try clicking Forward or Back. The words are there, but they have no border, so you can’t tell what they are. Based on earlier versions of Mozilla (and other Mac apps), one might expect them to be buttons, but they’re menus only. That’s far less “utilitarian”.

  31. Brad Wright replied on April 6th, 2008:

    @j freeman: Good troll, but unfortunately Firefox 3 isn’t designed by Mac OSX “interface designers”—it’s done by the Mozilla crew. So blame them for the shitty rounded corner buttons.

  32. Miha replied on April 10th, 2008:

    What is this theme you’re using, BTW? Thanks, Miha.

  33. Maxasia » Blog Archive » Firefox3 (b5) rules my world replied on April 21st, 2008:

    […] other browser on Mac OS X. Also, the mac-like theme is now pretty neat (don’t forget to use small icons) and substantial improvements have been made all over the place. Firefox3.0b5 has now become my […]

  34. Firefox Oberfläche, letzte Worte - Code Candies replied on May 16th, 2008:

    […] hat man bei OS X wenigsten das Glück, kleine Buttons auswählen zu können. Allerdings: die gewünschte Funktionalität wird damit auch nicht erreicht. […]

  35. Firefox 3: A Safari User’s Review, reviewed « Tom Sucks replied on June 3rd, 2008:

    […] most mac users read Daring Fireball (and thus would have caught his review, which mentions the small toolbar buttons fix. Peter thinks this is just a ‘problem’ and that it cannot be […]