submission from guest author John Talton

The page curl has been a Photoshop trick for years now.  As Kate wrote previously, the “page curl” or “earmark” is a UI style that can function as a metaphor, implying “turn the page for more”.

Its expensive rendering and lack of dynamic-ability when applying it via a generic template has limited its wide spread use over the years.  But as the web increases its bandwidth capabilities and the need for more unique and flashy graphics continues to rise, this cheep-trick is start showing up more and more.  In most cases, one of the downfalls of the page curl is that the user does not know where it will take them until they click it, since most implementations don’t contain a label.

And while many websites have used it in the past, its notable that Google is now using it in its Chrome browser, Slashdot.org has adopted it for a sponsor link on their poll, and it’s starting to show up in applications as well, such as Google Maps for the iPhone.

One of the biggest challenges a UI Designer can face on a daily basis is balancing Information Density. The big problem is fitting the right amount of necessary information to make the UI effective without making the interface visually cumbersome.

One simple solution to the information density problem that doesn’t require removing functionality or adding complex navigation is using Functional Callouts.  Callouts (or tooltips,  captions, balloons… whatever you want to call it) aren’t a new invention by any means, but adding actionable items and rich media to a callout is a relatively new trend. And this isn’t quite the same as a Designed Tooltip, in that Functional Callouts can provide the user with added navigation and/or related items.

The main drawback is that putting actions in a callout can result in hiding valuable functionality from the user.

The most widely used example of these types of UI components has to be Google Maps:
Also, certain software frameworks like Flex and Prototip are making it easy to add advanced functionality to their respective callouts and tooltips.

References:
Google Maps: http://maps.google.com
Flex Store Example: http://www.adobe.com/devnet/flex/samples/fig_callout/
Prototips 2: http://www.nickstakenburg.com/projects/prototip2/