<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>User Interface Trends &#187; balloons</title>
	<atom:link href="http://uitrends.com/tag/balloons/feed/" rel="self" type="application/rss+xml" />
	<link>http://uitrends.com</link>
	<description>A place to catalog, discuss, and rate trends in user interface design</description>
	<lastBuildDate>Thu, 12 Aug 2010 22:36:57 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>I&#8217;m Calling You Out</title>
		<link>http://uitrends.com/2009/09/17/im-calling-you-out/</link>
		<comments>http://uitrends.com/2009/09/17/im-calling-you-out/#comments</comments>
		<pubDate>Fri, 18 Sep 2009 02:30:45 +0000</pubDate>
		<dc:creator>Ron Norman</dc:creator>
				<category><![CDATA[Trends]]></category>
		<category><![CDATA[balloons]]></category>
		<category><![CDATA[callouts]]></category>
		<category><![CDATA[flex]]></category>
		<category><![CDATA[functional callouts]]></category>
		<category><![CDATA[google maps]]></category>
		<category><![CDATA[information density]]></category>
		<category><![CDATA[prototip]]></category>
		<category><![CDATA[tooltips]]></category>
		<category><![CDATA[uitrend]]></category>

		<guid isPermaLink="false">http://uitrends.com/?p=853</guid>
		<description><![CDATA[Trend: Functional Callouts and Tooltips 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 [...]]]></description>
			<content:encoded><![CDATA[<h3 class="trend">Trend: Functional Callouts and Tooltips</h3>
<p>One of the biggest challenges a UI Designer can face on a daily basis is balancing <a href="http://hcil.cs.umd.edu/trs/98-13/node126.html">Information Density</a>. The big problem is fitting the right amount of necessary information to make the UI effective without making the interface <a href="http://www.havenworks.com/">visually cumbersome</a>.</p>
<p>One simple solution to the information density problem that doesn’t require removing functionality or adding complex navigation is using Functional Callouts.  <a href="http://desktoppub.about.com/cs/glossarygraphics/g/callout.htm">Callouts</a> (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 <a href="http://uitrends.com/2009/09/01/dont-be-such-a-tooltip/">Designed Tooltip</a>, in that Functional Callouts can provide the user with added navigation and/or related items.</p>
<p>The main drawback is that putting actions in a callout can result in hiding valuable functionality from the user.</p>
<p>The most widely used example of these types of UI components has to be Google Maps:<img class="alignnone size-full wp-image-862" src="http://uitrends.com/wp-content/uploads/2009/09/callouts1.gif" alt="Google maps callouts" width="476" height="413" /><br />
Also, certain software frameworks like <a href="http://www.adobe.com/devnet/flex/samples/fig_callout/">Flex</a> and <a href="http://www.nickstakenburg.com/projects/prototip2/">Prototip</a> are making it easy to add advanced functionality to their respective callouts and tooltips.<img class="alignnone size-full wp-image-863" src="http://uitrends.com/wp-content/uploads/2009/09/callouts2.gif" alt="Prototips callout" width="494" height="261" /></p>
<p>References:<br />
Google Maps: <a href="http://maps.google.com">http://maps.google.com</a><br />
Flex Store Example: <a href="http://www.adobe.com/devnet/flex/samples/fig_callout/">http://www.adobe.com/devnet/flex/samples/fig_callout/<br />
</a>Prototips 2: <a href="http://www.nickstakenburg.com/projects/prototip2/">http://www.nickstakenburg.com/projects/prototip2/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://uitrends.com/2009/09/17/im-calling-you-out/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
