User Friendly Design: Attachment Icons

Last October I helped launch www.psylabstudios.com, an online store for my friend Lars so he can hawk merch for his band Oneiroid Psychosis. This was my first foray into ecommerce, one that went pretty smoothly all things considered. We couldn’t use SSL, so we ended up using the Google Checkout API. I wrote a custom shopping cart for the site using the Google Checkout PHP library…

Anyway, I’m rambling. Fast forward 9 months to today. Lars emails me and asks for a way to create free items that are available for download. Things like computer wallpapers, screensavers and so on. I decided that the best way to accomplish this would be to add an “attachment” feature to store products. This way Lars could attach an arbitrary number of files to any product in the store.

The attachment plugin was fairly straightforward, since this is only an administrative feature. But I wanted it to make sure that users were clear on what exactly it was they were downloading.

I was initially going to use PHP’s mime_content_type() function to identify uploaded files, but it simply didn’t work (good thing it’s deprecated). Then I was going to use the finfo_file() function, but was unable to install PECL extensions on this particular site’s hosting environment. If you’re lucky enough to be running PHP 5.3.0, then finfo_file() is installed by default. No such luck here though.

Finally I decided to use a simple regular expression to scrape the file extension (like .jpg or .doc) from the file name. This is not a recommended way to do this, as it’s completely unreliable, but it’s better than nothing.

  1. <?php
  2.   preg_match('/\.([\w]{2,4}?)$/i', $filename, $matches);
  3.   echo $ext = $matches[1];
  4. ?>

The above regex will return $matches[1], which should be a 2 to 4 digit file extension (without the period). Now, the magic can happen!

Since we have a fairly good guess of what the filetype is, we can now assign a CSS class to the download link that will display an appropriate file icon. As an example, a video file will get a video icon, an MP3 will get a music icon and an Excel file will get a Microsoft Excel icon (see gallery below for examples). I’m using the Fugue icon set for this site (I know I’ve been pushing those icons a lot lately, but I’m just in love with them).

Finally, we can use the filesize() function to get the size of the file and display it to the user. This way they know what they’re getting into before they click download (helpful if they’re on a slow connection).

This may seem like a lot of work, but it really isn’t. It also greatly contributes to the overall experience of your site visitors. Plus it’s a lot of fun to write shiny web-applications.

UPDATE:

You can do this even easier using CSS selectors.

a[href$='.pdf'] {
  padding-left: 16px;
  background: url('icons/pdf.png') no-repeat left;
}

All this says is look for any anchor tag whose href value ends with “.pdf” and give it a background image. This is a super easy way to add context (and a little flair) for your site visitors.

Fugue – The Best Icon Set on the Web

Having the right icon set can make or break a web development project. Confusing icons will frustrate users and drive them away from your application. There is no excuse for using ugly icons or even no icons at all on your web application.

Fugue
For my last few projects I’ve been happily using an icon set called Fugue. Available under a Creative Commons Attribution 3.0 license, the Fugue icon set is fantastically sharp looking and contains a broad array of icon types. Yusuke Kamiyamane, Fugue’s designer, updated the icon set as recently as July 3, 2009. As of today, Fugue is at version 2.2 and contains 2,200 icons. If you don’t wish to include an attribution on your site, you can purchase a royalty-free license for $49.95 USD.

Diagona
An alternative to the comprehensive Fugue icon set is Diagona, also by Yusuke Kamiyamane, which contains a mere 400 icons. You can purchase a royalty free license to Diagona for a meager $9.95 USD.

Silk
silk

Runner up to Fugue is the always popular Silk icon set by Mark James. Silk contains 700 .png icons completely free of charge. That’s $0.00 USD people. Can’t beat that. Silk is also available under a Creative Commons Attribution 3.0 license and is currently at version 1.3.

Please let me know if you have any other favorite icon sets that you use for your projects!