All Glory To The Hypno-Throbber

As you might have heard, the theme for Firefox 3 has been undergoing a refresh. Alex Faaborg has been blogging about most of the big changes, but I thought I’d mention one little piece of remaining work — the throbber — and see what other ideas people had.

Here are the two throbbers used in Firefox 2… They’re pixelated and don’t work well on different backgrounds:

(Windows and Linux)

(OS X)

Firefox 3 includes support for Animated PNG images, so now we can make an animation that looks better and is more flexible. Our first APNG throbber has arrived with the recent landing of the theme-formally-known-as-Proto. It’s a cleaned-up version of the old OS X throbber, and looks much better:

We’ve also dabbled a bit with a different throbber design for OS X, keeping with the simple circular curves elsewhere in the theme. I did some tweaking — changing color, size, line thickness, rotation speed/angle (thankfully this was all automated by JavaScript in APNGedit, so it wasn’t tedious to do) — and came up with a version like this:

(just for fun, a Vista-esque flavor)

So… I think the execution of the original idea is good, but now we’ve noticed that it’s very, err, active. The old throbber was perhaps slightly too subtle, but this new version really catches your eye. Too much. (*sigh* Design is hard, let’s go shopping!) Alex suggested a variation based on a reticle; the whole thing could rotate, or maybe each arc could grow/shrink. Looks interesting to experiment with, and should reduce the “too active” problem, but I haven’t animated it yet:

Speaking of experiments, here’s an older trick I did, which would be hard to do with the GIF format… The idea was to stack multiple APNGs running at different rates/lengths, to help eliminate the glaring periodicity caused by simple looping. In these examples, there’s one image with a red arc spinning clockwise, and another image with a blue arc spinning counter-clockwise. I wasn’t trying to make it look pretty, but it’s still an interesting effect:

I know we have an amazingly creative Mozilla community, so I’m curious to see about shaking out some other great ideas for a new throbber. If you’re feeling creative, grab APNG Edit, do a mockup (talk is cheap!), and attach it over in bug 326817. No unhelpful kvetching, please.

(P.S. There is no validity to the rumor that the native Linux throbber will look like this: )

About Justin Dolske

Mostly harmless.
This entry was posted in Firefox, PlanetMozilla. Bookmark the permalink.

22 Responses to All Glory To The Hypno-Throbber

  1. funTomas says:

    I guess, frame order can be controlled (though, couldn’t find it in the specs) so will the throbber’s spinning reverse when going backward in the history?

  2. Mephiles says:

    That vista one isn’t very good sorry. The colour inside it is meant to spin round, so all you have to do is grab the gradient and rotate it! ;)

  3. Greg says:

    Not really big on using the throbber but of the ones pictured I like the Vista image.

    I have seen all sorts of variations of the throbber over the years and aside from a visual indicator of processing it is just another trinket.

  4. Kevin says:

    I may be vastly in the minority, but I used to really like the animated throbber that was a picture of something (the Mozilla t-rex or a Netscape N). Maybe something with the Firefox logo?

    However, something subtle like these is “classy,” so I don’t object to it in the least.

  5. Marco says:

    Actually, I like the last throbber with the two segments in opposite directions. Specifically the one on the right. It actually reminds me of the Firefox logo, where the globe spins in the blue arc’s direction and the fox spins in the red arc’s.

    I’m not saying that the logo *should* be the throbber, but I find it highly reminiscent. It’s a neat effect.

  6. Bielawski says:

    Oh fsck! That native linux throbber suxx0rz!!!!!!!!11111

    Maybe the “firefox runs around the globe” sample from your APNG samples page would be fine…
    … or maybe just use the throbber from the new mac theme for all platforms.

  7. Stifu says:

    About your new “too active” throbber, I have a simple idea… Follow the way the classic throbbers did it. For example, on the classic throbber with dots/bullets: you have grey dots and black dots moving around over them, rather than just black dots and nothing else. The grey dots smooth things up.
    In other words, in your case, that’d mean you’d make the whole circle grey, with the darker animated part above it.

  8. thirdhand says:

    LOL @ the rumored Linux throbber. :-P

  9. Jonathan says:

    I like the last throbber on the left (the one where the two segments run on different “tracks”.) The colours need some work for visibility though. Perhaps it could slow down just a little?

  10. David says:

    What I really like about your ‘draft2’ version is that it would make an excellent progress indicator, e.g., for unfocused tabs (bug 334697).

  11. SpaceCat85 says:

    “Draft 2″ is my favorite. It’s still clean and simple, but at the same time it doesn’t look like a clone of the OS X radial dial or anything else OS-specific. I used to have a similar-looking custom throbber for Camino (not sure of the author) that I used before I switched over to Firefox 3.

    The blue-and-red arc animations are interesting as well, but I’m worried that they’d look too bright and distracting amidst the monochrome gray in the Mac Firefox theme’s icons and OS 10.5’s interface in general.

  12. Aleksej says:

    to Bielawski: reset Full page zoom.

  13. Mark S says:

    I moved to a mac a year ago and do like the mac’s throbber a lot better than the PC’s. It’s sharp and cool.
    So I’m all for using the mac throbber.

    One thought with using the layered image was to having an outer rim (perhaps something like the mac’s dots) and an inner rim, but have them going in the same direction at different speeds. The idea would be kind of like a clock. The outer track makes two revolutions for every one revolution the inner track makes.
    Something along those lines.

  14. Xenobiologista says:

    The blue and red arcs are cute but FAR too distracting. They remind me of playing two-player Nibbles/Snake as a child and I want to keep watching them.

  15. Hyperion2010 says:

    I will be happy to take the rumored linux throbber so long as it maintains the authentic speed variations with the rate of page loading/browser work.

    :D

  16. Jason McLaughlin says:

    The APNG’s look good, especially OS X and Draft 2. However, I just read a suggestion on mozillaZine forums that sounds even better to me, the more I think about it:

    Why not combine the throbber and the Reload button?

    While a page is loading, the Reload arrow can spin. We should probably still have a throbber on each tab, but I think this idea would provide a simple, elegant, space-saving, and distinctive solution for the navbar. And it has the extra benefit of giving instant feedback when you click on Reload.

    Credit for the idea goes to omgy. See http://forums.mozillazine.org/viewtopic.php?p=3258462#3258462

  17. Jason McLaughlin says:

    I elaborated further on that idea in the forums, but in case you don’t read there, I thought I’d repost here. Hope you don’t mind! :)

    [quote=”Cusser”]…how is this a good idea? What problem does this solve? Isn’t any gain offset by the fact that no other GUI I can think of has buttons that indicate status?[/quote]

    Clicking the Reload button causes the page to load; the throbber shows that the page is loading. The two are fundamentally, functionally related. From that standpoint alone, it makes perfect sense to combine them.

    But there are other reasons as well. For one, it would eliminate the need for a separate throbber on the navbar, thus saving space.

    For another, it would provide instant, obvious feedback when you click Reload, which is always helpful, especially for amateur users like, say, our parents. On OS X, I think the toolbar throbber isn’t even shown by default. Unless you have multiple tabs open — and believe me, many users like the aforementioned parents don’t have a clue about tabs — the only feedback when a page is loading is the small progress bar at the complete opposite corner of the browser window. Considering it logically and intuitively, who would think to look so far from where you’ve just clicked to see whether it had any effect? My mother in law is always asking whether the browser’s doing anything after she’s told it to (re)load a page. If the Reload button, right by the location bar, would indicate that something is indeed happening, she’d never have to ask that again.

    In other words, we want Firefox to be friendly, intuitive, and logical, so that it will be immediately apparent to even the most novice of users what’s going on. And we want to reduce clutter, thereby increasing usability further. Don’t we?

    As for “no other GUI” indicating status in such a way, that’s not actually true. Although it’s not the same kind of program, World of Warcraft, for instance, shows a refresh gauge on a skill button after you click it, so you can immediately see pertinent feedback. Closer to home, in the browser space, Safari indicates status by changing the Reload button to Stop when loading, and changing it back to Reload when finished. Now, Firefox developers have made a good case (I think) for why those two buttons are better left separate, but my point is that this sort of feedback does have precedent. Besides, that particular conflict is caused by trying to merge the GUI for two opposing functions. The throbber is a very different matter. Adding it to the Reload button wouldn’t blur functionality or cause anybody to accidentally reload a page when they intend it to *stop* loading. Instead it would elegantly merge two elements which represent related aspects of the same function.

    This could be the sort of nice little touch that would give the average user a “Hey, cool!” moment and warm fuzzies about their browser. I’d say that’s a big win on the GUI front. And not only a big win for users, but also a minor coup of sorts for Mozilla. Interfaces are headed in this more streamlined, more interactive direction anyhow. It’s a small thing, but being the first to bat with this idea would put Firefox ahead of competing browsers in usability and innovation both. So yeah, all told, I think I have pretty good reason to be stoked about the idea. :)

  18. Eh, combining reload and throbber doesn’t make sense to me. The throbber is an indicator, buttons are for performing user actions… I’m not sure it’s wise to combine the two. Reload, in particular, is rather orthogonal to what the throbber represents. Combining the throbber with the stop button would seem a better match… “Look, I’m busy, click me to stop.”

  19. Jason McLaughlin says:

    Just out of interest: in your view, what makes Reload and the throbber particularly orthogonal?

    *shrug* Well, I’m not insistent on it; I simply think it would be a good move, and hastened to suggest it as such. ^_^ Appreciate your considering the idea, anyhow! Maybe mull it over a little more before you drop it altogether?

    Stop doesn’t make as much sense to me, personally, but even that would save space and give some of the same benefit.

    Even if we stick with the status quo, though, I like the direction you’re gong with the throbber. Have fun playing around with prototypes. :)

  20. Deed says:

    Hm… How about something different for the design than a circle? If merging the throbber with buttons would turn out to cause interface confusion, and people like saving space, then how about a small, thin vertical progress bar of sorts? I.e. like the Vista/XP progress bar when it doesn’t know how much time is left and it’s just a small portion moving across constantly?

    So basically, thin and vertical line that’s high-contrast and has a dot/gradient or whatever moving maybe up and down on it? Also it would be right between the buttons and URL bar by default, so the user wouldn’t have to look too far for it while still having obvious enough buttons.

  21. hasdruabl says:

    Hey …

    How did you make the vista throbber? Could you send me or post the JavaScript for APNGedit?

    thx

  22. Eyedunno says:

    I went ahead and made an APNG version of the Windows/Linux throbber:
    At rest:
    http://img185.imageshack.us/img185/3535/throbbersmallut1.png
    Animated:
    http://img377.imageshack.us/img377/6395/throbberanimvt1.png

    I just altered the opacity of the original gif (I actually did this years ago in preparation for APNG, which took a long time to actually show up), then resized it to 128X128 and back to 16X16 with bicubic resampling in the hopes of getting rid of some of the pixelation.

    My own browser has 1px white and grey horizontal lines, and this new throbber matches perfectly.

Comments are closed.