makeover: OSX Firefox Software Update Alert

I thought I would start a series called makeover, where I will try to spend the least amount of time possible making-over a website or UI element. Why “least amount of time”? Because I want to show with just a little time, a designer/IA can greatly improve the usability and over all attractiveness.

before

after

Stats:

  • makeover: Firefox Software Update Alert
  • amount of time: 20 minutes
  • tools: PhotoShop
  • changes:visual, IA

Quick Notes:
When you first see the pop-up you’re not sure if this is a good thing or a bad thing. So I added a green “check” icon to indicate this is a positive thing. Next I put more emphasis on the version that is now released, when it was released and what version you are currently running. I also included the “What’s new?” section to give you an idea of why you should upgrade (instead of “we strongly recommend”). The disabling of extensions is a big deal for some users and should be called out more. By added a “alert” icon and adding a little red, you know this is something you should pay attention to. Finally I change the “Later” button to “Not Now” to match the “would you like to save this password” buttons elsewhere in Firefox.

The icons come from the free set at famfamfam (which i’m in love with…).

This entry was posted on Thursday, February 2nd, 2006 at 2:24 pm and is filed under IA, design, makeover. You can follow any comments to this entry through the RSS 2.0 feed. You can leave a comment, or trackback from your own site.

5 comments

  1. Jon
    February 3, 2006 at 12:13 pm

    Hey Jeremy.
    Heres a screenshot of the windows version of the update notifier: http://www.kuztek.com/firefoxupdate.jpg its a little bit closer to what you would like to see.

  2. Jeremy Johnson
    February 3, 2006 at 12:40 pm

    You’re right it’s a little closer. Looks like you’re using a OSX skin? Is that just for Firefox, or for all of Windows?

  3. Jon
    February 3, 2006 at 3:15 pm

    using the ifox skin on firefox only. and the wierd pink thing on the top titlebar is because of my dual monitor software.

  4. jordan
    February 4, 2006 at 7:04 pm

    A few months back, I did a mockup for Firefox as well: a “reset changes” feature.

    It’ll never be implemented because of the complexities involved in having the list translated and the like, but it would be a useful feature.

    It was also fun to go through the HIG and make sure I had everything done correctly.

  5. Stephen P. Anderson
    February 5, 2006 at 11:12 pm

    Nice makeover! I look forward to more of the same… Maybe you can do this for a certain intranet I know of… ;-)

Leave a comment