Tonight I learned a lot about speech balloons.
Well… what began as a means of associating illustrated text with its speaker, has become one of my favorite web tricks. The same idea applied to sections of a page can be an elegant and subtle hint that the content is associated with a particular tab or item within the experience. I will refer to the core element as the “pointy”. The bubble portion can take on many forms (pop-up tooltip, section of a page, item within a tab, etc.). The pointy has many variations as well. Let’s take a look at some, shall we?
Tumblr exhibits three different variations of the pointy in this screengrab. Stellar.
- The pure “this head said this thing” pointy: This one is ubiquitous across the web and is often seen in IM or stream interfaces.
- The “tab alternative” pointy: Thank God for this one becoming more established.
- The “this menu belongs to this ui element” pointy: This one will have its day in the sun with the release of the iPad.
Smashing Magazine implemented a very handy variation on the “tab alternative” pointy
- The “inverse tab alternative” pointy: Clever and subtle variation. The reason i enjoy it so much is that it provides the ability to utilize the space directly beneath the “tabs” in a consistent manner. The regular pointy sometimes interferes with information or additional levels of navigation or leaves an awkward whitespace.
- The “Triple Lindy, dynamically positioned” pointy: Not for the faint of heart. This one is advanced because of how wrong it could go when it is used in a table that requires the pointy to appear in all different places in order to keep the meat of the pop-up within the screen.
In closing – It works for comics and it works for experience design. When used with restraint, the pointy can truly enhance the expression of context within an experience. Not to be outdone, my final example is another subtle variation on this very page (in response to – “where am I while I craft this post?”)