Who said that? Oh… it was that UI element.

Tonight I learned a lot about speech balloons.

Seriously? Why?
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.

  1. The pure “this head said this thing” pointy: This one is ubiquitous across the web and is often seen in IM or stream interfaces.
  2. The “tab alternative” pointy: Thank God for this one becoming more established.
  3. The “this menu belongs to this ui element” pointy: This one will have its day in the sun with the release of the iPad.
speech pointies galore on Tumblr
Tumblr loves them pointies
The cornerstone of the Apple iPad's gestural dropdown menu is the "This menu belongs to this ui element" pointy

Smashing Magazine implemented a very handy variation on the “tab alternative” pointy

  1. 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.

Prototip is an example of the triple Lindy of pointies.

  1. 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.

prototip is an example of a dynamicly positioned pointy
prototip is an example of a dynamically positioned pointy

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?”)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s