We have been searching for the right representation of SmartLinks and finally, we think found it. Here is what we came up with:
My favorite book by Khaled Hosseini is The Kite Runner. The movie was not as good, but I loved listening to the soundtrack
That’s right! The new SmartLinks icons are the miniature versions of the larger icons that show up in your Firefox toolbar.
We are really excited about this change and here is why. Since early days we felt like this would be the right thing to do but we had two challenges.
The first challenge was presenting our brand across the web. We were concerned about people not recognizing the icons unless they would all look the same. For this reason we first used the blue target symbol and then later the arrow. We found that there is a problem with the arrow. People interpret this sign based on usage on other sites like Wikipedia where arrows indicate that you will be leaving the site. Clearly, SmartLinks are not like that at all - you stay on the page and get additional information in an overlay, but people do not realize that.
The second challenge was actually technical. It turns out that it is really hard to tell the type of thing just based on the link alone. For example, for any Amazon link, you can’t know if its a book or a movie without looking at the page. So we were pondering how we can solve this problem.
In the end, we decided to take the leap and roll out new icons. We reasoned that first of all, these icons represent things and are much stronger indicator of actual object being embedded on the page. These icons carry semantics with them. And most importantly, when you see them, you feel that they are right.
The technical challenge remains but it is solved in a way that many complex problems are solved on the web these days - by tapping into users. When you first blog Amazon SmartLink that no one has blogged before, the image is going to be the standard AdaptiveBlue icon. As soon as the first user clicks that icon from that point on, the correct icon will appear. In a way, our system will learn what the object is behind that link and then leverage this knowledge in the future. So by clicking on the SmartLinks first time you are being good citizen of the community and helping other people see the true object behind the link right away.
If you have SmartLinks on your blog, you should see the new icons today. BlueOrganizer users will need to either wait a couple of days or clear their cache to get the new icons, since Firefox keeps scripts and images in the cache for sometime.
To wrap up, here are some more new icons:
Once again, we are thrilled to roll this out! Sometimes little things make the biggest difference. Sometimes the simplest answer takes a long time to get to!
We are eager to hear your feedback, how do you like the new icons?
{ 13 comments… read them below or add one }
very cool
Nicely done! The resturant icon can be tough to tell exactly what it is.
Thanks guys, as Alex said - sometimes the simplest solution takes the longest to get to.
Marc, everything’s iterative… any suggestions on how to improve the restaurant icon?
Absolutely love it! This makes so much sense…
at the risk of sounding like a cliche that doesn’t fit… put a fork in the restaurant icons… ;)
Very cool. I love the stuff you guys are doing, especially the design.
Your last.fm widgets are particularly cool IMHO.
Keep it up!
great stuff adaptive
I second the fork idea.
- Santosh
I second the fork idea.
Also, on a related point, can you explain how the restaurant link works? Is it simply a matter of me linking to a restaurant’s website and then the smartlink learns that it is a restaurant? Or do I need to link to Zagat’s or the like first?
Finally, when’s this going to work on non-US, specifically, UK sites?
@Silverbrow
You need to link to one of the supported restaurant sites:
http://www.adaptiveblue.com/smartlinks_sites.html
currently it is zagat and citysearch.
Regarding UK, we are planning to open up BlueOrganizer, watch for the post about this on our blog soon.
Alex
To all the fork fans - there actually is a fork in the restaurant icon, it is just a bit hard to see at that size. It shows up better in the tooltip (mouse over the icon), or you can see it even bigger here
@ Alex, cool thanks
@ Andy, the full-size icons look fantastic. Making icons look good small is an art-form I struggled to learn while writing WAP apps years ago (imagine trying to do this using only 12×12 b&w bitmaps!)
Couple easy ideas:
* Wine - The glass is hard to make out and obscures the outline of the bottle. Try separating them by a pixel, or alternately just using the bottle in the small version.
* Restaurant - The fork and knife are the universally recognized symbol, but the plate makes them hard to see. Think about losing the plate and enlarging the utensils in the small version.