<?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>pipo.us</title>
	<atom:link href="http://pipo.us/feed/" rel="self" type="application/rss+xml" />
	<link>http://pipo.us</link>
	<description>apps, smoke, robots</description>
	<lastBuildDate>Sun, 31 Jul 2011 19:56:35 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Bowtie Tip Calculator FAQ</title>
		<link>http://pipo.us/posts/19/tip-calculator-faq/</link>
		<comments>http://pipo.us/posts/19/tip-calculator-faq/#comments</comments>
		<pubDate>Fri, 15 Jul 2011 14:27:58 +0000</pubDate>
		<dc:creator>pipo</dc:creator>
				<category><![CDATA[apps]]></category>
		<category><![CDATA[tip calculator]]></category>

		<guid isPermaLink="false">http://pipous.wordpress.com/?p=19</guid>
		<description><![CDATA[If you own the Tip Calculator I built, you may have some questions. If you can&#8217;t find the answers in this article, or you have more feedback, don&#8217;t hesitate to email me. See this page in: Français · Español · &#8230; <a href="http://pipo.us/posts/19/tip-calculator-faq/">continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p><img src="/article_media/tipCalc_v2.png"/><br />
If you own the <a href="/BowtieTipCalc">Tip Calculator</a> I built, you may have some questions. If you can&#8217;t find the answers in this article, or you have more feedback, don&#8217;t hesitate to email me.</p>
<blockquote><p><cite>See this page in: <a onclick="var e=(document.charset||document.characterSet);location.href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;hl=en&amp;langpair=auto|fr&amp;tbb=1&amp;ie='+e;" href="#">Français</a> · <a onclick="var e=(document.charset||document.characterSet);location.href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;hl=en&amp;langpair=auto|es&amp;tbb=1&amp;ie='+e;" href="#">Español</a> · <a onclick="var e=(document.charset||document.characterSet);location.href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;hl=en&amp;langpair=auto|it&amp;tbb=1&amp;ie='+e;" href="#">Italiano</a> · <a onclick="var e=(document.charset||document.characterSet);location.href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;hl=en&amp;langpair=auto|pt&amp;tbb=1&amp;ie='+e;" href="#">Português</a> · <a onclick="var e=(document.charset||document.characterSet);location.href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;hl=en&amp;langpair=auto|zh-CN&amp;tbb=1&amp;ie='+e;" href="#">中国&nbsp;(Chinese)</a> · <a onclick="var e=(document.charset||document.characterSet);location.href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;hl=en&amp;langpair=auto|iw&amp;tbb=1&amp;ie='+e;" href="#">עברית&nbsp;(Hebrew)</a> · <a onclick="var e=(document.charset||document.characterSet);location.href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;hl=en&amp;langpair=auto|ja&amp;tbb=1&amp;ie='+e;" href="#">日本語&nbsp;(Japanese)</a> · <a onclick="var e=(document.charset||document.characterSet);location.href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;hl=en&amp;langpair=auto|hi&amp;tbb=1&amp;ie='+e;" href="#">हिंदी&nbsp;(Hindi)</a></cite></p></blockquote>
<p>Here&#8217;s the full FAQ&#8230;<br />
<span id="more-19"></span></p>
<h3>What is the <em>Mirror</em> mode?</h3>
<p>This setting setting helps you catch anyone that might try to steal a couple of dollars from you by messing with the receipt. Let&#8217;s say you filled out your receipt like this:</p>
<pre>SUBTOTAL: <span style="text-decoration: underline;"> $18.50</span>
TIP:      <span style="text-decoration: underline;">$3.00</span>
TOTAL:    <span style="text-decoration: underline;">$21.50</span></pre>
<p>Now imagine that evil waiter <span style="color: red;">Joe</span> changes it:</p>
<pre>SUBTOTAL: <span style="text-decoration: underline;"> $18.50</span>
TIP:      <span style="text-decoration: underline;"><span style="color: red;">$8.00</span></span>
TOTAL:    <span style="text-decoration: underline;"><span style="color: red;">$2b.50</span></span></pre>
<p>You may think that the letter &#8220;b&#8221; looks nothing like a 6, but <span style="color: red;">Joe</span> won&#8217;t have to write using the Courier font and his forgery will be a tad more realistic.</p>
<p>The <code>Mirror</code> mode will adjust the tip amount so that the digits that make up the total are in the same sequence whether they&#8217;re read forwards or backwards. check out the receipt shown above, <em>mirrored</em>:</p>
<pre>SUBTOTAL: <span style="text-decoration: underline;"> $18.50</span>
TIP:      <span style="text-decoration: underline;">$2.62</span>
TOTAL:    <span style="text-decoration: underline;">$21.12</span></pre>
<p>By turning the number into a <em>palindrome</em>, you can scan all food charges in your credit card bill and determine if anyone scammed you without doing any math.</p>
<p>Behind the scenes, the App is adjusting the calculated tip either up or down to reach a palindrome, choosing whichever of the two results will change your total by the smallest amount. if you&#8217;re concerned about under- or over-tipping while using the Mirror mode, you can tweak the <code>Tip %</code> slider appropriately.</p>
<h3>Can you add Tax calculations?</h3>
<p>I&#8217;ve tried some sample calculations and discovered that typical tax rates have a negligible effect on the total. For example, a meal of $50 dollars, tipping 18% and with a tax rate of 6.25% would cause a difference of less than 67 cents.</p>
<p>The best feature of this App is this simplicity and the benefit doesn&#8217;t seem to be worth jeopardizing it. Obsessive penny-counters don&#8217;t despair — I&#8217;m exploring a couple of ways of adding tax-awareness to the tip calculator in a way that doesn&#8217;t mess with the inferface.</p>
<h3>What&#8217;s with the &#8216;∞&#8217; in the name? Bowtie Infinity?</h3>
<p>Pretend it&#8217;s a bow tie. </p>
<h3>I hate/love the icon!</h3>
<p>Did you just try to ask a non-question? And with a slash in it no less. The icon has gone through many iterations and refinements and it&#8217;s pretty much locked for now. If you have specific suggestions I&#8217;d love to hear them but don&#8217;t let a wave of disappointment wash over you if all that you see is a different background color in the next release.</p>
<h3>How can I use the Tip App when everyone in my party wants to tip different percentages?</h3>
<p>The best way to do that is to use the <code>Exact</code> method, set the tip to 0% and split based on the number of people in your party. The total shown below will be the even split for each person, then, each one in your party can tip as they wish.</p>
<h3>Can you add an option to round up or down?</h3>
<p>The app is smart enough to choose rounding up or down — whatever it takes to tip as close as possible to the exact percentage you desire. My rationale is to make the app smart and uncluttered so you don&#8217;t have to think about the details of these decisions. Note that if the rounded tip is too different from the tip you desired, you&#8217;ll see the <code>Effective Tip</code> percentage displayed at the top of the screen.</p>
<p>That&#8217;s all for the FAQs for now. If you have any other questions, don&#8217;t hesitate to email me. And finally, like any other App Store developer, I humbly grovel for your <a href="/reviewTipCalculator">reviews</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://pipo.us/posts/19/tip-calculator-faq/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>The little things.</title>
		<link>http://pipo.us/posts/549/the-little-things/</link>
		<comments>http://pipo.us/posts/549/the-little-things/#comments</comments>
		<pubDate>Sat, 23 Apr 2011 08:41:42 +0000</pubDate>
		<dc:creator>pipo</dc:creator>
				<category><![CDATA[ideas]]></category>
		<category><![CDATA[visualization]]></category>

		<guid isPermaLink="false">http://pipo.us/?p=549</guid>
		<description><![CDATA[Shaded bars underneath each &#8220;Cited by ###&#8221; element convey a measure of reliability + relevance. Little things are often the most helpful, and because they&#8217;re so little, they know when to get out of the way of your eye.]]></description>
			<content:encoded><![CDATA[<p class="cite"><img src="http://pipo.us/article_media/littleThings_screenshot1.jpg" alt="" title="littleThings_screenshot" width="512" height="413" class="thinBorderImg alignnone size-full wp-image-548" />Shaded bars underneath each &#8220;Cited by ###&#8221; element convey a measure of reliability + relevance.</p>
<p>Little things are often the most helpful, <br/>and because they&#8217;re so little, they know when to get out of the way of your <a href="http://en.wikipedia.org/wiki/Synesthesia" title="Synesthesia on Wikipedia, just because.">eye</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://pipo.us/posts/549/the-little-things/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>A better Video Scrubber</title>
		<link>http://pipo.us/posts/97/a-better-video-scrubber/</link>
		<comments>http://pipo.us/posts/97/a-better-video-scrubber/#comments</comments>
		<pubDate>Wed, 02 Mar 2011 15:27:58 +0000</pubDate>
		<dc:creator>pipo</dc:creator>
				<category><![CDATA[ideas]]></category>

		<guid isPermaLink="false">http://pipous.wordpress.com/?p=97</guid>
		<description><![CDATA[The internet&#8217;s series of tubes are getting fatter every day, but a lot of video sites still cause viewers grief with stuck frames, buffering and a general lack of feedback. Here I&#8217;m sketching out some tweaks to the std Video &#8230; <a href="http://pipo.us/posts/97/a-better-video-scrubber/">continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>The internet&#8217;s series of tubes are getting fatter every day, but a lot of video sites still cause viewers grief with stuck frames, buffering and a general lack of feedback. Here I&#8217;m sketching out some tweaks to the std <code>Video Scrubber</code>, hoping to alleviate some of the cognitive friction generated while watching videos on the web.</p>
<p><a title="A better Video Scrubber" href="http://pipo.us/posts/97/a-better-video-scrubber/"><img src="/article_media/betterVideoScrubber_basic.png" alt="" /></a></p>
<p>Details of my obsessions with tiny media controls after the jump&#8230;<br />
<span id="more-97"></span></p>
<p>The beginning of the scrubber track is subtly broken off into a &#8220;rewind to beginning&#8221; button, so users don&#8217;t have to drag reassuringly into the start of the timeline or guess whether they are clicking at the start or 2 seconds into the video clip.</p>
<p>When the scrubber is dragged to a part of the timeline that hasn&#8217;t been downloaded yet, it changes to a &#8220;concerned&#8221; appearance. this sets user expectations, so they&#8217;re clear some buffering is inevitable.</p>
<p><img src="/article_media/betterVideoScrubber_concernedScrubber.png" alt="" /></p>
<p>As the video is downloading, the leading edge (that shows how much as been loaded) gently <code>undulates</code> to show that more bits are coming in. The undulation can even be stretched proportionally to visualize the speed of the incoming data and give an idea of how much more footage will be available in, say, one minute from now.</p>
<p><code>&lt;video onStalled="videoScrubber.stopUndulating()" /&gt;</code></p>
<p><img src="/article_media/betterVideoScrubber_predictiveSnake.png" alt="" /></p>
<p>I bet it wouldn&#8217;t take much extra work on top of HTML5 to build this, I wish I had the attention span to find out&#8230;</p>
]]></content:encoded>
			<wfw:commentRss>http://pipo.us/posts/97/a-better-video-scrubber/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Getting something out of Microsoft&#8217;s failed KIN</title>
		<link>http://pipo.us/posts/12/getting-something-out-of-microsofts-failed-kin/</link>
		<comments>http://pipo.us/posts/12/getting-something-out-of-microsofts-failed-kin/#comments</comments>
		<pubDate>Tue, 01 Jun 2010 14:27:57 +0000</pubDate>
		<dc:creator>pipo</dc:creator>
				<category><![CDATA[work]]></category>
		<category><![CDATA[touch]]></category>
		<category><![CDATA[usability]]></category>

		<guid isPermaLink="false">http://pipous.wordpress.com/?p=12</guid>
		<description><![CDATA[One of the coolest projects I helped with during my time at Razorfish was a touchscreen marketing kiosk for the short-lived KIN phone. I know it&#8217;s not saying much, but a lot of people were more excited about the kiosk &#8230; <a href="http://pipo.us/posts/12/getting-something-out-of-microsofts-failed-kin/">continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>One of the coolest projects I helped with during my time at Razorfish was a touchscreen marketing kiosk for the short-lived <code>KIN</code> phone. I know it&#8217;s not saying much, but a lot of people were more excited about the kiosk than about the phone itself.</p>
<p class="cite">
<img class="thinBorderImg" src="/article_media/kinKiosk_compPoster.jpg" alt="" /><br/>Screens by our kick-ass visual design team (based on my wires).</p>
<p>More behind-the-scenes pics and a neat video, after the jump…<br />
<span id="more-12"></span><script type="text/javascript"> pipoLightbox('a.kinKiosk'); </script><br />
The challenge with this design was to build something that required zero training and delivered engaging content in the 30-odd seconds that it would hold user&#8217;s attention.<br/>Here&#8217;s a few of my wireframes:</p>
<p><a class="kinKiosk" title="Detail showing the hotspots on the 3D device that can be tapped to reveal animations or information." href="/article_media/kinKiosk_tap.png"><img class="shadowThumbImg" src="/article_media/kinKiosk_tap_thumb.png" alt="" /></a>&nbsp; &nbsp;<a class="kinKiosk" title="Gestures that seamlessly switch from a 3D orbiting animation to dragging the phone around." href="/article_media/kinKiosk_drag.png"><img class="shadowThumbImg" src="/article_media/kinKiosk_drag_thumb.png" alt="" /></a></p>
<p><a class="kinKiosk" title="Tapping or dragging on the keyboard chin would open up the smiley-enhanced keyboard :-)" href="/article_media/kinKiosk_orbitGestures.png"><img class="shadowThumbImg" src="/article_media/kinKiosk_orbitGestures_thumb.png" alt="" /></a>&nbsp; &nbsp;<a class="kinKiosk" title="Dragging the phone around can initiate a side-by-side comparison or a swap to look at the other model, depending on where the user releases their grip." href="/article_media/kinKiosk_collide.png"><img class="shadowThumbImg" src="/article_media/kinKiosk_collide_thumb.png" alt="" /></a></p>
<p>And here&#8217;s more stunning comps by our visual design crew:</p>
<p><a class="kinKiosk" title="The Home screen showed both phone models and invited the user to start interacting." href="/article_media/kinKiosk_compHome.jpg"><img class="shadowThumbImg" src="/article_media/kinKiosk_compHome_thumb.jpg" alt="" /></a>&nbsp; &nbsp;<a class="kinKiosk" title="When idle, the animation dramatized images and videos streaming in and out of the phones." href="/article_media/kinKiosk_compAttract.jpg"><img class="shadowThumbImg" src="/article_media/kinKiosk_compAttract_thumb.jpg" alt="" /></a>&nbsp; &nbsp;<a class="kinKiosk" title="For each phone, the screen plopped out a lot of interesting features and tidbits when users engaged." href="/article_media/kinKiosk_compTheOne.jpg"><img class="shadowThumbImg" src="/article_media/kinKiosk_compTheOne_thumb.jpg" alt="" /></a></p>
<p><a class="kinKiosk" title="Studio was a web-based doppleganger experience: whatever you did on your phone also showed up here and viceversa." href="/article_media/kinKiosk_compStudio.jpg"><img class="shadowThumbImg" src="/article_media/kinKiosk_compStudio_thumb.jpg" alt="" /></a>&nbsp; &nbsp;<a class="kinKiosk" title="Visitors could connect to their Facebook and see how it would look inside the phone. It really worked!" href="/article_media/kinKiosk_compFacebook.jpg"><img class="shadowThumbImg" src="/article_media/kinKiosk_compFacebook_thumb.jpg" alt="" /></a>&nbsp; &nbsp;<a class="kinKiosk" title="Checking those boxes: tech specs and model  comparison." href="/article_media/kinKiosk_compCompare.jpg"><img class="shadowThumbImg" src="/article_media/kinKiosk_compCompare_thumb.jpg" alt="" /></a></p>
<p>We ran out of development time to build the rotate-and-drag interactions shown in the wireframes above (which would have been a bit more organic) but the developers did a stellar job:</p>
<p class="cite">
<video width="512" height="288" controls class="thinBorderImg"><br />
<source src="/article_media/kinKiosk_usage.mp4" type="video/mp4"/><br />
<source src="/article_media/kinKiosk_usage.ogg" type="video/ogg"/></video><br/>That&#8217;s me, playing around with the real app!<br/>HTML5-friendly browser required to play this video, or try an <a href="/article_media/kinKiosk_usage.mp4" target="_blank">MP4 download.</a></p>
<p>Lastly, here are the adoring throngs fawning over the kiosk, already inset in its housing, ready for the masses:</p>
<p><img class="thinBorderImg" src="/article_media/kinKiosk_inSitu.jpg" alt="" /></p>
]]></content:encoded>
			<wfw:commentRss>http://pipo.us/posts/12/getting-something-out-of-microsofts-failed-kin/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Slaughterhouse Floorplan</title>
		<link>http://pipo.us/posts/9/slaughterhouse-floorplan/</link>
		<comments>http://pipo.us/posts/9/slaughterhouse-floorplan/#comments</comments>
		<pubDate>Sat, 01 May 2010 14:27:58 +0000</pubDate>
		<dc:creator>pipo</dc:creator>
				<category><![CDATA[work]]></category>
		<category><![CDATA[funnel]]></category>
		<category><![CDATA[visualization]]></category>

		<guid isPermaLink="false">http://pipous.wordpress.com/?p=9</guid>
		<description><![CDATA[When your marketing initiative consists of a crazy amount of sites, campaigns and other properties, how do you visualize your audience&#8217;s journey through it? I helped build a diagram that shows consumers moving through promotional and e-commerce websites to arrive &#8230; <a href="http://pipo.us/posts/9/slaughterhouse-floorplan/">continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>When your marketing initiative consists of a crazy amount of sites, campaigns and other properties, how do you visualize your audience&#8217;s journey through it?</p>
<p>I helped build a diagram that shows consumers moving through promotional and e-commerce websites to arrive at a desired outcome, and then I gave it a horrible, horrible name&hellip;</p>
<p class="cite">
<img src="/article_media/slaughterhouse_nike.png" alt="" /><br/><br />
This is the <code>Slaughterhouse Floorplan</code> for Nike Soccer&#8217;s MySpace page which had the important task of funneling visitors to their YouTube page and the Nike Store (ka-ching!).</p>
<p><span id="more-9"></span><script type="text/javascript"> pipoLightbox("a.slaughterGallery"); </script><br />
This <strong>huge</strong> one models all the moving pieces of the <code>Microsoft KIN's</code> marketing campaign:<br />
<a href="/article_media/slaughterhouse_kin.png" class="slaughterGallery" title="From right to left, each site or experience drives customers down the purchase funnel. The circles below represent the ultimate goals of the entire initiative."><img class="shadowThumbImg" src="/article_media/slaughterhouse_kin_thumb.png" alt="" /></a></p>
<p>I tried my best to point out the &#8220;gaps&#8221; — the leaks in the purchase funnel if you will&hellip;<br />
<a href="/article_media/slaughterhouse_kinWarned.png" class="slaughterGallery" title="The red callouts show where the connective tissue between the different parts could be strengthened."><img class="shadowThumbImg" src="/article_media/slaughterhouse_kinWarned_thumb.png" alt="" /></a></p>
<p>&hellip;you know the rest of that story. C&#8217;est la vie.</p>
]]></content:encoded>
			<wfw:commentRss>http://pipo.us/posts/9/slaughterhouse-floorplan/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

