Tyler Sticka

Introducing Brizzly Favicon Alerts

I love the Internet as a collaboration tool. Earlier today I nabbed an invitation to Brizzly, a promising young Twitter and Facebook client with a clean, intuitive interface and a modest set of neat features. I dug the simplicity of the interface, with one exception; the favicon’s abrasive, jagged edges.

I invited my frequent co-conspirator Peter Wooley to the service. After a few messages between us, we went to work designing and implementing an alternate icon treatment with a special notification state to let you know when new messages are available, collaborating via Dropbox.

In short order, we completed the latest addition to the favicon alerts family of user scripts, Brizzly Favicon Alerts!

Used in combination with the Faviconize Tab extension, you can easily keeps tabs on new messages in Brizzly with less screen real estate than usual.

This feature is hard to enjoy if you aren’t a Brizzly user just yet. While invites aren’t as scarce as Google Wave, I’d be happy to provide one to the first five readers who comment on this post and sound off on how much you like (or dislike) the visual refresh.

Install Brizzly Favicon Alerts 1.0

Your Gmail tab just got more informative

Continuing this month’s theme of making the most out of 16 square pixels, I got to collaborate with my good friend and colleague Peter Wooley on the next version of the excellent Gmail Favicon Alerts script for Greasemonkey.

Many Gmail users will keep the application open in a tab while browsing to expedite the process of obsessively checking one’s inbox. But wouldn’t it be great if you could be privy to the arrival of new mail or chat notifications at any point in your browsing experience, regardless of your current tab?

That’s where this script comes in. I’ll let Peter explain:

• A Blue icon lets you know you have unread mail. New to version 3, the number of unread messages is indicated in the icon beyond 10!
  
• A Red icon means you’ve read all your mail (or, at least, clicked on them all).
  
• A Speech Bubble icon means someone has sent you a chat message.
  

The newest version of Gmail FavIcon Alerts brings both a visual and functional refresh. Many thanks to awarded-winning designer Tyler Sticka, who has redesigned the iconography from scratch. The updated icons are now visually balanced, evenly shaded and gorgeous. In addition, Tyler designed numeric indicators for displaying the number of unread items in your inbox. As we both avidly watch our inboxes, knowing how many messages are unread allows us to make a better decision on when to switch tabs. The indicator counts up to 10 unread messages and hides when more unread items exist. Much like the Chat alerts, you can choose to turn this feature off through the Greasemonkey User Script Command menu.

Used in combination with the PermaTabs and Faviconize Tab extensions, you can easily keeps tabs on your Inbox status with less screen real estate than usual.

It’s always a blast redesigning something you use every day, an experience which always yields fruitful lessons. My first instinct was to switch things up and use the more vivid red icon as “unread” and a desaturated gray when there were no new messages. I abandoned this solution for two reasons:

• Having used Gmail Favicon Alerts for years, changing the colors completely threw off my learned behavior, impairing usability.
• The gray icon was markedly uglier than other variations. After all, you do have to look at this thing all day.

In the end, changing the color scheme presents little immediate user benefit, whereas introducing an unread count bares plenty. As such, Peter and I are both extremely proud of this version.

Download and install Gmail Favicon Alerts from its Greasemonkey homepage. If you dig it, why not leave a comment or write a review?

Update (2/19): Gmail Favicon Alerts has been featured on Lifehacker! Maybe they’ll integrate it into the Better Gmail extension? (Crosses fingers)

Update (3/17): Updated the imagery and description to match the latest version. Thanks to user feedback, we’ve replaced the orange chat icon with a more appropriate chat-bubble icon a la Google Talk.

Update (4/8): Updated the description to match the latest version, which no longer caps at 10 unread items. Whee!

Remember the Milk Favicon Redesigned

According to userscripts.org, over a hundred Greasemonkey users have been unhappy enough with Google’s favicon to replace it with my redesign. This motivated me to turn my eye to another troubling icon, that of Remember the Milk.

Remember the Milk is my task manager of choice. While there are many worthy competitors, RTM has the right combination of rapid task generation and streamlined organization to establish a permanent spot in my browser and iPhone.

While it would be easy to mock their bovine mascot, I’ve actually grown quite fond of it. While certainly not the most polished solution in the world, it exudes a certain friendliness and lack-of-intimidation. The organic line ultimately compliments the simple, Google-esque interface.

Unfortunately, the favicon has not grown on me as nicely. It appears they took a square image of the mascot without transparency, shrunk it down to 16 pixels and called it good. While not as offensive as the Google favicon redesign, the lack of polish belies what a breeze the app is to use.

I redesigned the 16-pixel version from scratch to insure it scaled to that size gracefully, with a transparent background to respect the color of the user’s theme. More clarity in the pixels means a more accurate emotional representation of the original image.

Use it yourself by installing a simple Greasemonkey script.

Prism or Fluid users may be interested in downloading the icon (with the larger RTM logo included up to 128 square pixels) in Windows, Mac and PNG formats.

Updated (2/17): Script and icon files updated with improved anti-aliasing.

Updated (5/9): I noticed that Prism adds aliasing to the app icon when you choose an ICO file. I’ve included a PNG version as an alternative, which seems to solve the problem.

Google’s Favicon Redesigned

On Friday, Google debuted it’s second favicon redesign in the last year and I, along with many other users, am somewhat befuddled by it.

Criticizing Google’s logo is usually a cheap shot. The reason Google gets away with less-than-amazing visual design is because their user experiences are so outstanding. We don’t care that Google Docs and Gmail have less visual flourishes than Word 2007 and Windows Live Hotmail because the interface is more precisely and consistently tuned to our needs. The more obstacles you put in the user’s path, the more important it is to distract them with shiny objects; Google is great at alleviating obstacles.

A “favicon” is a 16 square-pixel image that represents a web page, typically displayed in the browser’s address bar and tabs. Google stuck with the same yawn-inducing yet unoffensive favicon up till May 2008, when it was replaced with an even more milquetoast but still unoffensive lower-case “g” on a light-gray gradient. The switch to a lower-case “g” made sense, as the shape was more distinctive and added an allusion to the concept of “infinity,” and thusly it’s close relative “googol” (the really high number from which Google’s name is derived phonetically). The lower-case “g” was used again for Google’s mobile iPhone app, perhaps most successfully due to the contrast of a white “g” on vibrant blue.

I’m talking about the new icon because it’s the first I’ve experienced that is visually distracting. The lack of counter space between the complimentary red and green hues results in a visual tension that, while initially more eye-catching than previous designs, ultimately results in an abrasive visual strain compounded for every browser tab.

I completely understand Google’s desire to incorporate their logo’s colors into the icon in order to strengthen an already recognizable and trusted identity. But in this case, I believe the icon’s uncomfortable contrast goes against their otherwise smooth-as-silk experiences.

I’ve created a replacement icon which retains the new composition, combined with the colors and dimension of their iPhone icon. While I haven’t incorporated all four of their colors into one image, the icon is more spiritually consistent with the rest of Google’s experience.

You can use it yourself by installing this simple Greasemonkey script.

What are your thoughts regarding Google’s favicon? Am I off the mark? Do you care?

Update: It looks like Brand New agrees, calling the new icon “terrible”.