<?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>Thinkstick! &#187; UI</title>
	<atom:link href="http://www.thinkstick.net/category/ui/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.thinkstick.net</link>
	<description>Design, Technology, Innovation, and Being a Stick!</description>
	<lastBuildDate>Wed, 11 Aug 2010 20:34:21 +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>Horizontal Attention Heat Map</title>
		<link>http://www.thinkstick.net/2010/04/horizontal-attention-heat-map/</link>
		<comments>http://www.thinkstick.net/2010/04/horizontal-attention-heat-map/#comments</comments>
		<pubDate>Tue, 27 Apr 2010 05:39:23 +0000</pubDate>
		<dc:creator>Stick</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[UI]]></category>

		<guid isPermaLink="false">http://thinkstick.net/?p=337</guid>
		<description><![CDATA[Nielsen&#8217;s group recently published the results from an eye tracking study for user attention for horizontal dimension. Their main observation is Left half of any page gets 69% of viewing time and right half gets about 30%. Their recommendation is &#8216;Stick to the conventional Layout&#8217; for the best results. Keep navigation all the way to [...]]]></description>
			<content:encoded><![CDATA[<p>Nielsen&#8217;s group recently published the results from an eye tracking study for <a href=" http://www.useit.com/alertbox/horizontal-attention.html">user attention for horizontal dimension.</a></p>
<p>Their main observation is</p>
<blockquote>
<ul>
<li>Left half of any page gets 69% of viewing time and right half gets about 30%.</li>
<li>Their recommendation is &#8216;Stick to the conventional Layout&#8217; for the best results.</li>
<li>Keep navigation all the way to the left. This is where people look to find a list of current options.</li>
<li>Keep the main content a bit further in from the left.</li>
<li>The most important stuff should be showcased between one-third and halfway across the page. This is where users focus their attention the most.</li>
<li>Keep secondary content to the right.</li>
</ul>
</blockquote>
<p>Brendan Reagan from Grokdotcom came up with <a href="http://www.grokdotcom.com/2010/04/13/how-to-test-your-page-layout-for-horizontal-attention/" target="_blank">his own way to apply that data for testing the page layouts</a>.</p>
<p>Nielsen&#8217;s data for viewing time across horizontal dimension by 100 px each is found in the chart below.<br />
<a rel="attachment wp-att-338" href="http://thinkstick.net/2010/04/horizontal-attention-heat-map/eyetracking-fixations-across-page/"><img class="size-full wp-image-338 alignnone" title="eyetracking-fixations-across-page" src="http://thinkstick.net/wp-content/uploads/2010/04/eyetracking-fixations-across-page.png" alt="" width="560" height="374" /></a></p>
<p>I translated this data into a reusable heat map to be shared with UX team at work and I figured I should share it here as well. You can get the full sized png template <a href="http://thinkstick.net/wp-content/uploads/2010/04/HorizontalHeatMap.png" target="_blank">here</a>.</p>
<p><a href="http://thinkstick.net/wp-content/uploads/2010/04/HorizontalHeatMap.png"><img class="size-large wp-image-339 alignnone" title="HorizontalHeatMap" src="http://thinkstick.net/wp-content/uploads/2010/04/HorizontalHeatMap-804x1024.png" alt="Horizontal Heat Map Overlay" width="226" height="287" /></a></p>
<p>When I came across <a href="http://www.abtests.com/" target="_blank">ABtests.com</a>, I looked through the samples uploaded and found <a href="http://www.abtests.com/test/18014/sign-up-for-less-accounting" target="_blank">this sign up page A/B testing</a> by LessAccounting. <a href="http://b.lesseverything.com/2009/5/11/buttons-on-the-left-is-the-winner" target="_blank">Original test write up</a> theorized that having the buttons on the left might be the primary contributing factor to 20% increase in conversion rate. His hypothesis is correct if we can believe Nielsen&#8217;s data as correct across all sites with left to right reading languages.</p>
<p>Comparing the sums of attention percentage for each layout, we can clearly see the left layout got much more attention. This test is particularly a good A/B test to support Nielsen&#8217;s data since all other elements (content, call to action button color, size) remain exactly the same in both layouts. The only difference here is the position of the call to action buttons and more informational bulleted text.</p>
<table>
<tr>
<div>
<td>
<a href="http://thinkstick.net/wp-content/uploads/2010/04/HeatMapRightLayout.png"><img class="size-full wp-image-344 alignnone" title="HeatMapRightLayout" src="http://thinkstick.net/wp-content/uploads/2010/04/HeatMapRightLayout.png" alt="Less Accounting Right Layout" width="336" height="173" /></a>
</td>
<td>
<ul>
<li>Call to action buttons are on the right  starting from 700 px to 1000 px horizontally</li>
<li>Sum of attention percentage ~20%</li>
<li>Conversion rate 10%</li>
</ul>
</td>
</tr>
</div>
<tr>
<div>
<td>
<a href="http://thinkstick.net/wp-content/uploads/2010/04/HeatMapLeftLayout.png"><img class="size-medium wp-image-345 alignnone" title="HeatMapLeftLayout" src="http://thinkstick.net/wp-content/uploads/2010/04/HeatMapLeftLayout-300x155.png" alt="" width="333" height="171" /></a>
</td>
<td>
<ul>
<li>Call to action buttons are on the left starting from 100 px to 500 px horizontally.</li>
<li>Sum of atention percentage ~58%</li>
<li>Conversion rate 12%</li>
</ul>
</td>
</div>
</tr>
</table>
<div><strong>How</strong><strong> to Use This Heat Map</strong></div>
<div>
<ul>
<li>If it&#8217;s an existing site, resize your browser window to 1100 px before taking a screen shot.</li>
<li>If it&#8217;s a design in progress, you should capture it around 1100 px size.</li>
<li>Open your image in  Photoshop and layer this heat map over.</li>
<li>Line up the top of the heat map color bars with top of your image so that you can see the percentages clearly. (optional)</li>
<li>Adjust the opacity till your image is visible.</li>
</ul>
</div>
<div>
<p>You can take <a href="http://thinkstick.net/wp-content/uploads/2010/04/HorizontalHeatMap.png" target="_blank">this template</a> and start layering over landing or new content pages you are designing and optimize your layout to maximize intended conversion metrics.</p>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.thinkstick.net/2010/04/horizontal-attention-heat-map/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Recap from Product Camp Boston</title>
		<link>http://www.thinkstick.net/2009/03/recap-or-notes-from-product-camp-boston/</link>
		<comments>http://www.thinkstick.net/2009/03/recap-or-notes-from-product-camp-boston/#comments</comments>
		<pubDate>Wed, 11 Mar 2009 21:34:25 +0000</pubDate>
		<dc:creator>Stick</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[Technology]]></category>
		<category><![CDATA[Tool]]></category>
		<category><![CDATA[UI]]></category>

		<guid isPermaLink="false">http://thinkstick.dreamhosters.com/?p=134</guid>
		<description><![CDATA[With some randomness and last minute luck, I made it out to Product Camp Boston on Feb 28.  The gracious hosts at the Microsoft Research Labs gave us this amazing venue for Boston Product Management professionals to learn, to teach, to network and just simply enjoy each other's company.  Check out the Flickr group to see pictures. The organizers led by  C Todd Lombardo did an amazing job with the event and I am grateful for all their hard work.

I figured I should note down the books, tools and links that were flying around during the event for posterity sake.]]></description>
			<content:encoded><![CDATA[<div class="mceTemp"><img class="alignnone" title="PC Boston logo" src="http://barcamp.org/f/ProductCampBoston.png" alt="" width="515" height="80" /></div>
<div class="mceTemp">With some randomness and last minute luck, I made it out to<a href="http://barcamp.org/ProductCampBoston" target="_blank"> Product Camp Boston</a> on Feb 28.  The gracious hosts at the Microsoft Research Labs gave us this amazing venue for Boston Product Management professionals to learn, to teach, to network and just simply enjoy each other&#8217;s company.  Check out the <a href="http://www.flickr.com/photos/coolspark/3317978090/in/pool-productcampboston" target="_blank">Flickr group</a> to see pictures.</div>
<div class="mceTemp">The organizers led by  <a href="http://twitter.com/iamctodd" target="_blank">C Todd Lombardo</a> did an amazing job with the event and I am grateful for all their hard work. I figured I should note down the books, tools and links that were flying around during the event for posterity sake.</div>
<div class="mceTemp">
<h2><strong>Tools and Web Sites Mentioned</strong></h2>
</div>
<div class="mceTemp">
<h4>Over the web usability testing tool : <a href="http://userfly.com" target="_blank">Userfly</a></h4>
<p><a href="http://userfly.com" target="_blank"></a>I recommended this web based usability testing tool to a few people citing the virtues : a) easy to set up, b) cheap and c) convenient for remote users.  I think the easiest way to see how Userfly works is playing with the demo they put up.<a href="http://userfly.com">Check out their site</a></div>
<p><object width="400" height="302" data="http://vimeo.com/moogaloop.swf?clip_id=2451370&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://vimeo.com/moogaloop.swf?clip_id=2451370&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" /></object></p>
<h4>Product Innovation Through Playing Games : <a href="http://userfly.com" target="_blank">InnovationGames</a></h4>
<p>This site was recommended by the session leader of  <strong>Product Innovation Session</strong>. It appears to be a  collection of interactive techniques/games you play to ultimately define your product&#8217;s future vision.  The site and concept are based off of the book with the same name.</p>
<p><img class="alignnone" title="innovation game book cover" src="http://ig.enthiosys.com/wp-content/uploads//innovationgames1.jpg" alt="" width="131" height="147" /></p>
<div class="mceTemp">
<h2><strong>Book Recommendations</strong></h2>
</div>
<div class="mceTemp"><strong><a href="http://www.linkedin.com/in/boblevy" target="_blank">Bob Levy</a></strong> who led the session <strong>Requirements Management Best Practices </strong>recommended these two books for building relationships among different teams.</div>
<ul>
<li><a href="http://books.google.com/books?id=Gzjj9mSPAGEC&amp;dq=crucial+conversations&amp;printsec=frontcover&amp;source=bn&amp;hl=en&amp;ei=8s6qSfC9HtCQngf5msWNBw&amp;sa=X&amp;oi=book_result&amp;resnum=5&amp;ct=result" target="_blank">Crucial Conversations</a></li>
<li><a href="http://books.google.com/books?id=I1oOcpvsmOkC&amp;dq=Crucial+Confrontations&amp;printsec=frontcover&amp;source=bn&amp;hl=en&amp;ei=-c-qSYO2CozRnQfwmZnnDw&amp;sa=X&amp;oi=book_result&amp;resnum=4&amp;ct=result#PPR11,M1" target="_blank">Crucial Confrontations</a></li>
</ul>
<div class="mceTemp">In my <strong>User Experience Session</strong>, folks were asking what books they should read to get the basics of User Interface Design and I recommended Steve Krug&#8217;s book : Don&#8217;t Make Me Think.</div>
<div class="mceTemp">
<p><a href="http://www.sensible.com/chapter.html"><img class="alignnone" title="Dont Make Me Think" src="http://ecx.images-amazon.com/images/I/4189W8B2NXL._SS400_.jpg" alt="Dont Make Me Think book cover" width="234" height="234" /></a></p>
<p>Here are a few more books you can read if you are completely new to this subject and you&#8217;d like to get more into it.</p></div>
<ul>
<li> If you just want  a quick and easy intro to graphic design, try<a href="http://www.amazon.com/User-Interface-Design-Programmers-Spolsky/dp/1893115941/ref=si3_rdr_bb_product" target="_blank"> The Non Designer&#8217;s Design Book</a>.</li>
</ul>
<ul>
<li>If you just want to add some visual thinking to your life, try <a href="http://www.amazon.com/Back-Napkin-Solving-Problems-Pictures/dp/1591841992/ref=sr_1_1?ie=UTF8&amp;s=books&amp;qid=1236808326&amp;sr=1-1">Back of the Napkin</a>.</li>
</ul>
<ul>
<li>If you really want to get into the details, try <a href="http://books.google.com/books?id=9F7gaZKd2rYC&amp;printsec=frontcover&amp;source=gbs_summary_r&amp;cad=0">About Face 3</a>.</li>
</ul>
<p><a href="http://www.amazon.com/Non-Designers-Design-Book-3rd-Designers/dp/0321534042/ref=sr_1_1?ie=UTF8&amp;s=books&amp;qid=1236807792&amp;sr=1-1"><img class="alignnone" title="Non Designers Design Book" src="http://ecx.images-amazon.com/images/I/51n3w0lK9tL._BO2,204,203,200_PIsitb-sticker-arrow-click,TopRight,35,-76_AA240_SH20_OU01_.jpg" alt="" width="132" height="132" /></a><a href="http://www.thebackofthenapkin.com/"><img class="alignnone" title="Back of the napkin book cover" src="http://tbn3.google.com/images?q=tbn:nYHjj_mbh6QBMM:http://www.empoweryourpoint.com/wp-content/uploads/2008/12/back-of-the-napkin.jpg" alt="" width="109" height="109" /></a> <img src="http://books.google.com/books?id=9F7gaZKd2rYC&amp;printsec=frontcover&amp;img=1&amp;zoom=1&amp;sig=ACfU3U1zQkmDczjrXy_t6vJkXFT_ePKSXw" alt="About Face Cover" width="94" height="118" /></p>
<p>At the Innovation session, I mentioned this awesome little book called <strong><a href="http://books.google.com/books?id=V34j1m65_I8C&amp;dq=why+not&amp;printsec=frontcover&amp;source=bn&amp;hl=en&amp;ei=4Dy4SeiRIIOftweE0Yi8CQ&amp;sa=X&amp;oi=book_result&amp;resnum=7&amp;ct=result" target="_blank">Why Not?</a> by</strong><span class="addmd"><strong> Barry Nalebuff and  Ian Ayres</strong>. (Side note: these guys are  the guiding forces behind <a href="http://www.stickk.com/login.php" target="_blank">Stickk</a>, another one of my favorite sites.)<br />
</span></p>
<p>If you were <strong>at ProductCamp Boston</strong> and <strong>have anything to add</strong>,<strong> </strong>please let me know in the comments!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.thinkstick.net/2009/03/recap-or-notes-from-product-camp-boston/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Post from Cooper Journal: Designing time to think</title>
		<link>http://www.thinkstick.net/2008/12/cooper-journal-designing-time-to-think/</link>
		<comments>http://www.thinkstick.net/2008/12/cooper-journal-designing-time-to-think/#comments</comments>
		<pubDate>Thu, 11 Dec 2008 22:18:54 +0000</pubDate>
		<dc:creator>Stick</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[UI]]></category>

		<guid isPermaLink="false">http://thinkstick.dreamhosters.com/?p=81</guid>
		<description><![CDATA[I selected the part of the original post that I consider more relevant to everyone rather than the latter part which is more relevant to me as an interaction designer. An insightful post and I should at least attempt to listen to the talk that sparked this blog post. I&#8217;m not good with listening to [...]]]></description>
			<content:encoded><![CDATA[<p>I selected the part of the original post that I consider more relevant to everyone rather than the latter part which is more relevant to me as an interaction designer.</p>
<p>An insightful post and I should at least attempt to listen to the talk that sparked this blog post. I&#8217;m not good with listening to long talks. My attention span isn&#8217;t long enough and I have to save time to think!</p>
<blockquote><p><strong>Original source : <a style="font-family:Verdana, Arial, Helvetica, sans-serif;font-size:9px;text-decoration:none;" href="http://www.cooper.com/journal/2008/12/designing_time_to_think.html">http://www.cooper.com/journal/2008/12/designing_ti&#8230;</a></strong></p>
<h3>Designing time to think</h3>
<div>by <a href="http://www.cooper.com/journal/emma_van_niekerk/">Emma van Niekerk</a> on December  5, 2008</div>
<p>I was busy with production work last week, and in the background I listened to the Google TechTalk by David Levy, &#8220;<a href="http://www.youtube.com/watch?v=KHGcvj3JiGA">No time to think</a>.&#8221; In spite of the title (and my partial attention), it really got me thinking. Levy suggests that we are in an <em>information environmental crisis</em>, that we need silence and sanctuary for creative reflection and engagement. He explains that Nobel Laureate <a href="http://en.wikipedia.org/wiki/Barbara_McClintock">Barbara McKlintock</a> was able to see further and deeper into genetics than anyone had before because she took the time to look and to hear what the material had to say to her. At Harvard, students asked her &#8220;where does one get the time to look and think?&#8221; They argued that the pace of current research seems to preclude such a contemplative stance.</p>
<p>This is a pressure we can all relate to. I struggle to find the time to think deep thoughts. Every time I try, I interrupt myself to check my email or text messages, or track the latest news headlines. Randall Munroe over at xkcd.com seems to have the <a title="same problem" href="http://xkcd.com/477/">same problem</a>. It seems that my attention span is inversely proportional to the number of &#8220;productivity&#8221; tools and toys I have. As much as I love it, my iPhone has been the worst thing I could have done for my ability to focus.</p>
<p><img src="http://www.cooper.com/journal/images2008/attentionspan.png" border="0" alt="Attention span v.s. productivity tools and toys" width="380" height="256" /><br />
<span><a href="http://www.cooper.com/journal/2008/12/"></a></span></p>
<p>These days we rarely focus clearly on one thing at a time, multi-tasking from the moment we read the paper on the bus with headphones and coffee en route to work, until we get home and check email in front of the TV while eating dinner. We are constantly interacting with technology devices and information.</p>
<p>Vannevar Bush&#8217;s 1945 article, <a href="http://www.theatlantic.com/doc/194507/bush">As We May Think,</a> expressed the hope that more powerful tools will automate the routine aspects of information processing, and would thereby leave researchers and other professionals more time for creative thought. But as Levy points out, more than sixty years later, it seems clear that the opposite has happened, that the use of the new technologies has contributed to an accelerated mode of working and living that leaves us less time to think, not more. Levy asks where in our culture we are making time to think, since thinking takes time.</p>
<p>At the end of the talk an interesting comment came from fellow who observed that, in contrast to Sweden, San Francisco has very few public benches where one can just sit down and observe what <strong>is</strong>. One has to keep moving, and according to the laws if you stay in one place too long, you may be considered to be &#8220;loitering.&#8221; In our culture, there are few opportunities to be calm and sit down in a public space, unless one is consuming something at a coffee shop or a café. This is something that has been built into the culture and the architecture. We need to rediscover the places that will encourage this kind of thinking and reflection &#8211; not only in our physical but also in our digital spaces. Creative thought can&#8217;t be rushed, but it can be nurtured.</p>
<p>It&#8217;s really important to take the time to look and to think. Let&#8217;s think about how we can design metaphorical benches in our products to encourage people to stop and reflect where necessary.</p></blockquote>
]]></content:encoded>
			<wfw:commentRss>http://www.thinkstick.net/2008/12/cooper-journal-designing-time-to-think/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Interaction Designer or Dictator?</title>
		<link>http://www.thinkstick.net/2008/12/when-hi-tech-is-too-much-tech/</link>
		<comments>http://www.thinkstick.net/2008/12/when-hi-tech-is-too-much-tech/#comments</comments>
		<pubDate>Mon, 01 Dec 2008 19:41:18 +0000</pubDate>
		<dc:creator>Stick</dc:creator>
				<category><![CDATA[UI]]></category>

		<guid isPermaLink="false">http://thinkstick.dreamhosters.com/?p=77</guid>
		<description><![CDATA[I hate &#8216;speak to me&#8217; phone menus. Numbers and buttons are accurate and FAST. how long does it take to push a button? how long does it take to say &#8216;check my balance&#8217;? 3 more reasons why voice menus don&#8217;t work. 1. I have no privacy. I have to say it out LOUD into the [...]]]></description>
			<content:encoded><![CDATA[<p>I hate &#8216;speak to me&#8217; phone menus. Numbers and buttons are accurate and FAST. how long does it take to push a button? how long does it take to say &#8216;check my balance&#8217;?</p>
<p>3 more reasons why voice menus don&#8217;t work.</p>
<p>1. I have no privacy. I have to say it out LOUD into the phone in the middle of a waiting room at the dentist or in a crowded elevator or even in the middle of the cubicle land. No, I don&#8217;t like people knowing what I am doing exactly at this minute.</p>
<p>2. Again, it&#8217;s also about noise. I can&#8217;t always control the noise level of my surroundings. Sometimes kids are crying or cars are honking or some idiots are revving their engines for no reason.</p>
<p>3. Less offensive to most of you but I am not a native speaker. I have an accent (some find it cute!) but the fact of the matter is I sometimes pronounce certain words in a non American pronunciation. The voice recognition system gets screwed up and it doesn&#8217;t know what to do and freaks out. Eventually, they made me speak to a real person. Why can&#8217;t I just push some buttons on my phone and be done with it &#8212; FASTER, SIMPLER and in a more PRIVATE manner?</p>
<p>The take away is provide options for different types of user to optimize the user experience. The optimal solution is to ask the user if he/she would rather use a touch tone dial system. Not giving the option to opt out of the voice menu system is in a way saying &#8220;I, the system designer, know what&#8217;s best for you, silly user. I know this is the best option whether you like it or not.&#8221;</p>
<p>Dictating how user should interact with your system is just arrogant.</p>
<p>This post is sparked by<a href="http://www.37signals.com/svn/posts/1425-when-hi-tech-is-too-much-tech" target="_blank"> this blog post</a> from Signal vs. Noise blog.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.thinkstick.net/2008/12/when-hi-tech-is-too-much-tech/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Link of the moment : Webware &#8211; Google revamps Street View interface</title>
		<link>http://www.thinkstick.net/2008/11/google-revamps-street-view-interface/</link>
		<comments>http://www.thinkstick.net/2008/11/google-revamps-street-view-interface/#comments</comments>
		<pubDate>Sun, 30 Nov 2008 01:04:06 +0000</pubDate>
		<dc:creator>Stick</dc:creator>
				<category><![CDATA[Technology]]></category>
		<category><![CDATA[UI]]></category>

		<guid isPermaLink="false">http://thinkstick.dreamhosters.com/?p=76</guid>
		<description><![CDATA[http://news.cnet.com/8301-17939_109-10108117-2.html?part=rss&#38;tag=feed&#38;subj=Webware Street View&#8217;s split screen, when it&#8217;s working. (Credit: Google)]]></description>
			<content:encoded><![CDATA[<p><a href="http://news.cnet.com/8301-17939_109-10108117-2.html?part=rss&amp;tag=feed&amp;subj=Webware" target="_blank">http://news.cnet.com/8301-17939_109-10108117-2.html?part=rss&amp;tag=feed&amp;subj=Webware</a></p>
<blockquote>
<div style="width: 600px;"><img src="http://i.i.com.com/cnwk.1d/i/bto/20081125/street_view_good.jpg" alt="Street View&amp;#39;s split screen, when it&amp;#39;s working." width="600" height="422" />Street View&#8217;s split screen, when it&#8217;s working.</div>
<p><img src="http://feeds.feedburner.com/~r/webware/~4/465553791" alt="" width="1" height="1" /></p>
<div style="padding: 3px; width: 100%; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 9px; text-align: left;"><span>(Credit: Google)</span></div>
</blockquote>
]]></content:encoded>
			<wfw:commentRss>http://www.thinkstick.net/2008/11/google-revamps-street-view-interface/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Tool Box : Balsamiq &#8212; post by Perfect Tuna</title>
		<link>http://www.thinkstick.net/2008/11/the-perfect-tuna-balsamiq-for-wireframing/</link>
		<comments>http://www.thinkstick.net/2008/11/the-perfect-tuna-balsamiq-for-wireframing/#comments</comments>
		<pubDate>Sat, 22 Nov 2008 02:11:00 +0000</pubDate>
		<dc:creator>Stick</dc:creator>
				<category><![CDATA[Tool]]></category>
		<category><![CDATA[UI]]></category>

		<guid isPermaLink="false">http://thinkstick.dreamhosters.com/?p=73</guid>
		<description><![CDATA[I tried out this tool after reading Samantha LeVan&#8217;s post.  It&#8217;s super fast and all the alignment just happens. $79 is totally worth the money.  I plan to write my own review post on the tool soon. I&#8217;m always looking for new ways to sketch and wireframe my GUI ideas, searching for something quicker than [...]]]></description>
			<content:encoded><![CDATA[<p>I tried out this tool after reading Samantha LeVan&#8217;s post.  It&#8217;s super fast and all the alignment just<strong> happens</strong>. $79 is totally worth the money.  I plan to write my own review post on the tool soon.</p>
<blockquote>
<div><span style="font-family:trebuchet ms">I&#8217;m always looking for new ways to sketch and wireframe my GUI ideas, searching for something quicker than hand drawing and less refined than Visio and Illustrator. My rule for the perfect tool is that it has to be super fast to learn and quick to produce results.</p>
<p></span><span style="font-family:trebuchet ms">Googling wireframing tools, I came across <a href="http://www.balsamiq.com/">Balsamiq&#8217;s website</a>. What captured my attention was the fun appearance of the GUI and the statement that &#8220;life&#8217;s too short for bad software&#8221;. That&#8217;s a pretty bold statement to make so I had to try this tool out immediately. Super psyched that I could run it on both my work PC and my home Mac, I installed it and had it running within minutes.</span></p>
<p><span style="font-family:trebuchet ms">I fell in love with this software immediately.</span></p>
<p><span style="font-family:trebuchet ms">Why Balsamic Mockups is fantastic:</span></p>
<ol>
<li><span style="font-family:trebuchet ms">It doesn&#8217;t require much learning time. Drag-and-drop interactions are intuitive and consistent.<br />
</span></li>
<li><span style="font-family:trebuchet ms">Work feels fun. I felt like I was sketching ideas and playing, rather than feeling like tasks are tedious and repetitive. The grunt work is done for me.<br />
</span></li>
<li><span style="font-family:trebuchet ms">The primary GUI widgets are included. Containers for both web and software applications are included.<br />
</span></li>
<li><span style="font-family:trebuchet ms">The elements are sketchy. In this I mean my wireframes really do look malleable and editable. It is clear that at this stage, a project can be critiqued and changed easily. This is sometimes hard to communicate with more refined wireframes and mockups. The focus is on the layout, not the visual design.<br />
</span></li>
<li><span style="font-family:trebuchet ms">Having all the widgets in front of me helped drive me to some creative solutions my first try. Interaction methods I hadn&#8217;t considered were sitting right in front of my eyes inspiring innovative solutions.</span></li>
</ol>
<p><span style="font-family:trebuchet ms"><img style="margin: 0px auto 10px; display: block; width: 320px; height: 256px; text-align: center;" src="http://1.bp.blogspot.com/_aW31-0OnvBQ/SSMktB7j50I/AAAAAAAAAJA/Dxvgshis6aY/s320/balsamiq+screen.png" border="0" alt="" /></span></p>
<p><span style="font-family:trebuchet ms">I believe my biggest reason for supporting Balsamiq&#8217;s software is that it feels like a tool designed for users. As a usability analyst, I am a firm believer that software must be designed based on research and this tool feels like a company invested in user research. I see this in the little details &#8211; the notebook background that gives a sense of drawing in a sketch pad and </span><span style="font-family:trebuchet ms">the awareness of the common GUI elements that designers are looking for.</span></p>
<p><span style="font-family:trebuchet ms">Of course, there&#8217;s always the one big block to many designers looking for a new application &#8211; cost. This one&#8217;s really reasonable, just $79. There&#8217;s no excuse not to try it as the </span><a href="http://www.balsamiq.com/products/mockups/desktop"><span style="font-family:trebuchet ms">demo</span></a><span style="font-family:trebuchet ms"> is free. I honestly believe you&#8217;ll be hooked if you just try it once.</span></div>
<div>
<div><span>Posted by<span>Samantha LeVan</span></span><span></span></div>
</div>
</blockquote>
]]></content:encoded>
			<wfw:commentRss>http://www.thinkstick.net/2008/11/the-perfect-tuna-balsamiq-for-wireframing/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Netflix listens.</title>
		<link>http://www.thinkstick.net/2008/06/netflix-listens/</link>
		<comments>http://www.thinkstick.net/2008/06/netflix-listens/#comments</comments>
		<pubDate>Mon, 30 Jun 2008 21:36:34 +0000</pubDate>
		<dc:creator>Stick</dc:creator>
				<category><![CDATA[UI]]></category>
		<category><![CDATA[Add new tag]]></category>
		<category><![CDATA[netflix]]></category>
		<category><![CDATA[Product Management]]></category>

		<guid isPermaLink="false">http://thinkstick.dreamhosters.com/?p=23</guid>
		<description><![CDATA[About 2 weeks ago, Netflix announced they were getting rid of user profiles. They said the reason was to make the site more simple to use for everyone and they observed : Too many members found the feature difficult to understand and cumbersome I had my account set up with 2 profiles for a while [...]]]></description>
			<content:encoded><![CDATA[<p>About 2 weeks ago, Netflix announced they were getting rid of user profiles. They said <a href="http://blog.netflix.com/2008/06/profiles-feature-going-away.html" target="_blank">the reason</a> was to make the site more simple to use for everyone and they observed :</p>
<blockquote><p><em>Too many members found the feature<strong> difficult to understand and cumbersome</strong></em></p></blockquote>
<p>I had my account set up with 2 profiles for a while so that the boyfriend can have his own queue. But we eventually got rid of the 2 profiles and just let him move the movies up and down my queue. I think the reason they said was probably true. The feature was not very usable. But I don&#8217;t think you could get rid of a feature many users are actively using just because some users found it difficult to understand. There must be something that Netflix wasn&#8217;t being honest about.  If it was really the difficulty to use, shouldn&#8217;t it be the responsibility of the service to make the feature more usable, more understandable, less cumbersome? Getting rid of a feature people find it hard to use can&#8217;t be the right way to go about!</p>
<p>So people <a href="http://getsatisfaction.com/netflix/topics/netflix_to_break_homes_by_eliminating_profiles" target="_blank">complained </a><a href="http://getsatisfaction.com/netflix/topics/netflix_to_break_homes_by_eliminating_profiles" target="_blank">loudly</a> and Netflix listened and they are keeping the feature. Here is the email I got just now.</p>
<p><a href="http://thinkstick.dreamhosters.com/wp-content/uploads/2008/06/netflix.png"><img class="alignnone size-full wp-image-24" title="netflix" src="http://thinkstick.dreamhosters.com/wp-content/uploads/2008/06/netflix.png" alt="" width="419" height="220" /></a></p>
<p>Now, I believe it&#8217;s on the shoulders of the designers at Netflix to figure out how to make this feature not so hard to use.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.thinkstick.net/2008/06/netflix-listens/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Call-Your-Kids Search</title>
		<link>http://www.thinkstick.net/2008/06/call-your-kids-search/</link>
		<comments>http://www.thinkstick.net/2008/06/call-your-kids-search/#comments</comments>
		<pubDate>Mon, 02 Jun 2008 04:24:27 +0000</pubDate>
		<dc:creator>Rabbit</dc:creator>
				<category><![CDATA[UI]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[Mahalo]]></category>
		<category><![CDATA[search]]></category>
		<category><![CDATA[seniors]]></category>

		<guid isPermaLink="false">http://thinkstick.dreamhosters.com/?p=17</guid>
		<description><![CDATA[The people who need human-powered help aren't people like me, they're people like my mom.

If Mahalo could get their name out as the site where you send your parents when they want to get a copy of their credit report without getting hit with $75 of nearly-fraudulent charges, they would get dozens and dozens of older eyeballs.]]></description>
			<content:encoded><![CDATA[<p>CreditReport.com screwed my mom over last week &#8211; and Google helped them do it.</p>
<p>If you missed the singing dude in the pirate costume, FreeCreditReport.com (and CreditReport.com) make their money by giving you your credit report for free, then signing you up for expensive credit monitoring programs that nobody wants.  Why would anyone fork over their money when credit reports are available for free without the scam credit monitoring programs thanks to the U.S. Government?  It&#8217;s because people get confused, believe these sites are the official credit report site, don&#8217;t read the fine print, and hand over their credit card numbers because they think that&#8217;s part of the credit report identification process.  These sites can only get money if they maintain the deception that they are the official free credit report site.  If one of their visitors finds AnnualCreditReport.com, the jig is up.</p>
<p>How do these nefarious sites manage to trick people in the age of Google?  Well, it&#8217;s pretty easy.  My mom searched for &#8220;Credit Report 2008&#8243; with Google, and the picture below is what she got.</p>
<p><a href="http://thinkstick.dreamhosters.com/wp-content/uploads/2008/06/screenshot-credit-report-2008-google-search.png" target="_blank"><img class="alignnone size-medium wp-image-18" src="http://thinkstick.dreamhosters.com/wp-content/uploads/2008/06/screenshot-credit-report-2008-google-search-300x269.png" alt="" width="300" height="269" /></a></p>
<p>See any sign of AnnualCreditReport.com &#8211; practically the only site anyone searching for anything having to do with credit reports would want?  Me neither.  If you search for just &#8220;credit report&#8221; Google&#8217;s algorithms nail it, although it&#8217;s still hard to see underneath all the sponsored link clutter.  The extra &#8220;2008&#8243; term kills PageRank, letting the search engine optimizers hijack the search results.  CreditReport.com, here we come.</p>
<p>This set of results screams out for somebody to build better credit report search results page than Google&#8217;s algorithms.  For this particular search, it&#8217;s not rocket science.  90% of the time, people searching for &#8220;credit report <em>almost anything</em>&#8221; want either their free annual credit report or a description of what a credit report is.  Approximately 0% of the time, they want to sign up for crappy overpriced credit monitoring.  Human-powered search seems like it could be the answer.</p>
<p>Unfortunately, we&#8217;re not there yet.  Here&#8217;s what Mahalo (the only human-powered search engine I&#8217;ve heard of) displays for a search of &#8220;credit report.&#8221;</p>
<p><a href="http://thinkstick.dreamhosters.com/wp-content/uploads/2008/06/screenshot-credit-report-mahalo.png" target="_blank"><img class="alignnone size-medium wp-image-19" src="http://thinkstick.dreamhosters.com/wp-content/uploads/2008/06/screenshot-credit-report-mahalo-300x269.png" alt="" width="300" height="269" /></a></p>
<p>Wow, could that <em>be</em> less useful?</p>
<p>OK, they&#8217;re working on it, and they don&#8217;t have pages for everything yet.  Fine.  The problem is that the pages they do have <em>won&#8217;t help my mom</em><em>.</em> The Guide Note is nice, but Wikipedia handles that, and my Mom already uses it.  More importantly, where are the search results? Surely there are more than 7.  Those 7, though, are all you&#8217;re getting from Mahalo.</p>
<p><a href="http://thinkstick.dreamhosters.com/wp-content/uploads/2008/06/screenshot-jeff-peckman-mahalo.png" target="_blank"><img class="alignnone size-medium wp-image-21" src="http://thinkstick.dreamhosters.com/wp-content/uploads/2008/06/screenshot-jeff-peckman-mahalo-300x269.png" alt="" width="300" height="269" /></a></p>
<p>Mahalo&#8217;s got exactly the right idea and exactly the wrong idea at the same time.  My mom would love a site that uses humans to generate the top results for common searches like this one and outsources the rest of the results and the results for topics it doesn&#8217;t cover yet, behind the scenes, to someone like Google.  I would love to install it as her home page.  But she&#8217;s not going to want to watch Mahalo&#8217;s compulsory YouTube video or share the page on Facebook.  She&#8217;s also not going to know what to do when Mahalo returns a Wiki-stub with a spam link or two as search results for something.  Mahalo dedicates most of their page space to non-search stuff  (scroll down for Web 2.0 overload)  and puts stuff like Facebook, StumbleUpon, and Propeller on every page &#8212; and I don&#8217;t know a single person who knows what Propeller is.</p>
<p>Why is Mahalo targeting young, first-adopter, super-wired people instead of people like my mom?  When we&#8217;re searching, all the Web 2.0 goodies in the world won&#8217;t intrigue us &#8211; we want good results fast.  And in terms of good results fast, their editors are never going to be able to put together a page that will be able to beat Google for me.  I&#8217;ve been searching the Internet for 12 years, and I&#8217;m as good or better than anyone they can afford to hire to write guide pages for them.  Anyone who&#8217;s heard of Propeller is probably even better.  The people who need human-powered help aren&#8217;t people like me, they&#8217;re people like my mom.</p>
<p>If Mahalo could get their name out as the site where you send your parents when they want to get a copy of their credit report without getting hit with $75 of nearly-fraudulent charges, they would get dozens and dozens of older eyeballs.</p>
<p>My mom likes to buy crap, and has a reasonable amount of disposable income.  If you show her an ad for a porcelain unicorn (something that has 0% chance of confusing her when she&#8217;s searching for her credit report, but something she&#8217;s searched for before), she just might buy it.  And there are a LOT of people over 45 with disposable income who get confused by Google&#8217;s search results.</p>
<p>Most of these people don&#8217;t understand that all that small print at creditreport.com means &#8220;these guys are going to charge me every month if I take them up on the &#8216;free credit report&#8217; offer.&#8221;  And a lot of them might throw in a &#8220;2008&#8243; at the end of their searches.  I don&#8217;t think PageRank is going to be able to stay ahead of the search engine optimization people in cases like these.</p>
<p>Mahalo can.  They need to be targeting people like my mom.</p>
<p>Right now, Google won&#8217;t pay the price for raking in their share of the spoils creditreport.com got from screwing over my mom.  My mom is in the demographic of people who blame themselves whenever something goes wrong and a computer is involved.  She won&#8217;t blame Google (like I do), and nobody else is any better anyway.  cRANKy, the search engine targeting people over 50, is way too terrible to recommend.</p>
<p>For now, my mom will fight with CreditReport.com&#8217;s customer service, then initiate a chargeback with her credit card company.  Next time she needs something like this, she will call me and feel ashamed that she can&#8217;t handle something that sounds so simple on her own.  And until someone makes a better search for older people, call-your-kids search will be the answer.  Just like it was in 1998.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.thinkstick.net/2008/06/call-your-kids-search/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Algorithm to generate tag clouds</title>
		<link>http://www.thinkstick.net/2008/05/algorithm-to-generate-tag-clouds/</link>
		<comments>http://www.thinkstick.net/2008/05/algorithm-to-generate-tag-clouds/#comments</comments>
		<pubDate>Tue, 13 May 2008 04:59:43 +0000</pubDate>
		<dc:creator>Stick</dc:creator>
				<category><![CDATA[UI]]></category>
		<category><![CDATA[algorithm]]></category>
		<category><![CDATA[tagging]]></category>

		<guid isPermaLink="false">http://thinkstick.dreamhosters.com/?p=13</guid>
		<description><![CDATA[I was talking to a friend who&#8217;s trying to figure out a formula for generating tag cloud. The purpose of a tag cloud is to convey the extent of relevance of a tag among all other tags being used. Trying to display the frequency of tags sounds easy but there are different issues for different [...]]]></description>
			<content:encoded><![CDATA[<p>I was talking to a friend who&#8217;s trying to figure out a formula for generating tag cloud.  The purpose of a tag cloud is to convey the extent of relevance of a tag among all other tags being used.  Trying to display the frequency of tags sounds easy but there are different issues for different algorithms out there. ( the ones found by quick google search)</p>
<p>The first one is from  <a href="http://codex.wordpress.org/Template_Tags/wp_tag_cloud" target="_blank">WordPress Codex</a>.  The summary for the algorithm is they sort the tags by frequencies and then group them into each font size.  The problem with this algorithm is if the max frequency is 5000 and the second to max frequency is 50. They will be displayed in the same font size since the algorithm does not take the frequency range into account.  Also when frequency range is too narrow, a tag with 24 occurrences and a tag with 25 occurrences may just have different font sizes if the cut off happens to be between 24 and 25.</p>
<p>The second algorithm we found is <a href="http://niche.uwo.ca/programming-historian/index.php/Tag_clouds">this one</a>. This one takes the frequency range into account but it tries to display tags in font sizes that only differ by 1 unit each.  The problem here is human eye&#8217;s inability to detect varying font sizes if there are too many steps between the max font and the min font. So 100 different tags with sizes ranging from 10px to 48 px will not be visually distinguishable.</p>
<p>I figure if we take the second algorithm and modify it so that font size gap is big enough to be visible, it may just work.</p>
<p>count the frequencies for all tags</p>
<p>find min freq and max freq</p>
<p>x =  freq of tag we want to calculate the font size</p>
<p>scaling factor, K = (x &#8211; min freq) / (max freq &#8211; min freq)</p>
<p>font range = max font size &#8211; min font size</p>
<p>font step = C  (the constant font step size)</p>
<p>font for tag =    <strong>min font size  + (C * floor (K * (font range/ C)))</strong></p>
<p>so if we reuse the example from the second algorithm</p>
<p>min freq = 6 , max freq = 91, freq for  current tag  = x</p>
<p>scaling factor K = (x &#8211; 6)/85</p>
<p>min font = 10 , max font = 30, font step = 4</p>
<p>font for tag = 10 + ( 4 * floor (( (x-6)/85) *( 20/4)))</p>
<p>so if x = 64,  font for tag = 22</p>
<p>if x = 79, font for tag =  26</p>
<p>if x = 14, font for tag = 10</p>
<p>if x = 32,  font for tag =14</p>
<p>Although it does not solve the problem of the max frequency so far off from the rest, it will pile  more tags with lower frequencies into smaller font sizes. But a spike can be handled as a special edge case.  this will work for most cases as long as the distribution curve is not too far off from the bell curve.</p>
<p>I need to look into another algorithm that takes median or mean with standard deviation as a way to generate banding. But it again won&#8217;t work since we are still assuming the distribution curve to be bell shaped.</p>
<p>I need to keep thinking about how we can display tag clouds with frequencies with a distribution curve that doesn&#8217;t fit bell shaped.  It&#8217;d be nice to get real data of tag occurrences from live sources like flickr, youtube, digg etc.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.thinkstick.net/2008/05/algorithm-to-generate-tag-clouds/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Trulia Hindsight : Time lapsed map of residential development</title>
		<link>http://www.thinkstick.net/2008/05/trulia-hindsight-time-lapsed-map-of-residential-development/</link>
		<comments>http://www.thinkstick.net/2008/05/trulia-hindsight-time-lapsed-map-of-residential-development/#comments</comments>
		<pubDate>Sun, 04 May 2008 18:17:26 +0000</pubDate>
		<dc:creator>Stick</dc:creator>
				<category><![CDATA[UI]]></category>
		<category><![CDATA[Map]]></category>
		<category><![CDATA[Time line]]></category>

		<guid isPermaLink="false">http://thinkstick.dreamhosters.com/?p=3</guid>
		<description><![CDATA[Trulia has this tool called Hindsight that lets you enter an address and watch how that area develops over time since 1800s.]]></description>
			<content:encoded><![CDATA[<p>Trulia has this tool called Hindsight that lets you enter an address and watch how that area develops over time since 1800s. <a href="http://hindsight.trulia.com/map/#lat=42.464&amp;lon=-71.074&amp;zoom=14&amp;mix=0.500" target="_blank">http://hindsight.trulia.com/map/#lat=42.464&amp;lon=-71.074&amp;zoom=14&amp;mix=0.500</a></p>
<p style="text-align: center;"><a href="http://thinkstick.dreamhosters.com/wp-content/uploads/2008/05/trulia-hindsight.png"><img class="aligncenter size-full wp-image-4" title="trulia-hindsight" src="http://thinkstick.dreamhosters.com/wp-content/uploads/2008/05/trulia-hindsight.png" alt="" width="500" height="257" /></a><br />
<strong>Screenshot</strong></p>
<p>Things I like about the time line control<br />
1. They match the time on the time line with the dots on the map by color.<br />
2. You can pause, resume and fast forward<br />
3. You can limit the duration of the time line by dragging the boundaries</p>
<p>Things I would change<br />
1. I wish they won&#8217;t make it play in a loop by default. I just want it to play it once and stop at the end of the first pass. So I actually have time to analyze what I am seeing.<br />
2. Since they have the data for each node on the map, why can&#8217;t I hover/click on each node to get more details?<br />
3. Color choices don&#8217;t really work for me. They seem too blended in and there is no culturally associated meaning of going from green to purple.</p>
<p>Google Finance also has a similar draggable boundary time line control. But it&#8217;s not a time lapsed display of events.</p>
<p><a href="http://thinkstick.dreamhosters.com/wp-content/uploads/2008/05/google-finance-graph.png"><img class="alignleft size-full wp-image-5" style="float: left;" title="Google Finance Graph - Duration control " src="http://thinkstick.dreamhosters.com/wp-content/uploads/2008/05/google-finance-graph.png" alt="Google Finance Graph - Duration control " width="499" height="197" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.thinkstick.net/2008/05/trulia-hindsight-time-lapsed-map-of-residential-development/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
