<?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>Steal This Idea - Articles on Product Vision, Innovation and Design &#187; Product Design</title>
	<atom:link href="http://stealthisidea.com/articles/category/product-design/feed/" rel="self" type="application/rss+xml" />
	<link>http://stealthisidea.com</link>
	<description>Philip Haine&#039;s articles on Product Vision, Innovation and Design</description>
	<lastBuildDate>Thu, 26 Jan 2012 09:12:58 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>A better way to crop</title>
		<link>http://stealthisidea.com/articles/better-way-to-crop/</link>
		<comments>http://stealthisidea.com/articles/better-way-to-crop/#comments</comments>
		<pubDate>Fri, 11 Jun 2010 22:38:50 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Commentary]]></category>
		<category><![CDATA[Designs to Steal]]></category>
		<category><![CDATA[multi-touch]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/?p=990</guid>
		<description><![CDATA[Multitouch isn't all that.  Except when it is.]]></description>
			<content:encoded><![CDATA[<p>If you do a lot of photographic touch-up, you&#8217;re familiar with the drill for cropping: select the tool, draw a rectangle within the image, squint and try and picture the photo alone, drag the rectangle or target one of its corners to resize it, apply the crop, and then judge the results.  Repeat if necessary.  Do this for dozens of events, dozens of times a year.</p>
<p>Within a few moments of playing with the iPad&#8217;s photo browser, two things became apparent: 1. there is a better way to crop, and 2. multi-touch, despite the hype, really does have some advantages over the mouse.</p>
<p>The iPad&#8217;s photo browser lets you grab an image with two fingers to both pan it and resize it with a single fluid motion.  On the iPad you are merely zooming into a picture to check out your friend&#8217;s pores.  But it&#8217;s clearly a faster and more fun way to crop images.</p>
<p>I haven&#8217;t yet seen cropping done this way, so it constitutes today&#8217;s idea to steal.</p>
<p><em>[Researchers: It would be interesting to validate this claim by comparing the time to crop between using the mouse vs. multi-touch method.]</em></p>
<p>This scenario also exemplifies a sweet advantage of multi-touch over mouse, which is that it lets you do multiple direct manipulation operations at once.  Cropping is one fluid operation, as opposed to many micro-interactions to do the same task with a mouse:  targeting edges and corners of the crop rectangle with a mouse and dragging them.</p>
<p>That said, you can potentially accomplish a similar fluid crop operation with today&#8217;s mouse.</p>
<ol>
<li>User selects the crop tool.  A crop rectangle appears at the largest possible size.</li>
<li>User presses turns the mouse wheel to enlarge the photo within the frame.</li>
<li>User drags the image around within the frame</li>
</ol>
<p>This method eliminates the picky targeting of edges and corners in regular cropping.</p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/better-way-to-crop/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Nubs on number keys</title>
		<link>http://stealthisidea.com/articles/nubs-on-number-keys/</link>
		<comments>http://stealthisidea.com/articles/nubs-on-number-keys/#comments</comments>
		<pubDate>Thu, 10 Jun 2010 17:53:21 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Commentary]]></category>
		<category><![CDATA[Designs to Steal]]></category>
		<category><![CDATA[Product Design]]></category>
		<category><![CDATA[Research Topics]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/?p=985</guid>
		<description><![CDATA[Numbers have always been a challenge to type accurately on regular keyboards.  Here's a tactical fix.]]></description>
			<content:encoded><![CDATA[<p>Since the dawn of man, keyboards have had little protruding nubs on the home row.</p>
<p>On Macs the nubs are on the F and J keys.  On PCs they are typically on the D and K keys.  Either way, they help the touch-typist to get their fingers in the right place without having to divert attention from what they are looking at on screen.</p>
<p>The strange thing is, these are the only keys with nubs.  This helps with the heavily used keys.  Our muscle memory helps our fingers find other letters around this center.  But it&#8217;s difficult to accurately stretch those digits up to the digit row.  It&#8217;s error prone and slows typing as one must carefully check typed numbers for accuracy.  And typing numbers with accuracy is critical.  It could mean the difference between a $6000 and a $7000 request.  And unlike typing words, numerals cannot be assisted by automated spell checkers.</p>
<p>I&#8217;ve long wished for nubs up there on the number row to help me out.</p>
<p>Exactly which keys deserve nubs is a good university research project.  The 5-6-7 keys I find difficult to get right without care.   The 9 and 0 I find difficult also.  So offhand I would guess that the 1, 6 and 0 would be good candidates.</p>
<p>By the way, did you notice the little in-joke on the onscreen keyboard on the iPad?  Yes, you guessed it &#8211; the images for the F and J rows have little nubs on them. It&#8217;s surprising this one got through given Apple&#8217;s extreme discipline for minimalism.  Har har.  Yes, Apple, you&#8217;ve reduced us 60 wpm typists to hunting and pecking amateurs, and here&#8217;s the salt thrown in the wound in the form of nubs that can be seen but not felt.  Good one.</p>
<p>Someone at Apple has a sense of irony.</p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/nubs-on-number-keys/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Innovation in audio volume UI</title>
		<link>http://stealthisidea.com/articles/innovation-in-audio-volume-ui/</link>
		<comments>http://stealthisidea.com/articles/innovation-in-audio-volume-ui/#comments</comments>
		<pubDate>Thu, 12 Nov 2009 19:32:00 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Commentary]]></category>
		<category><![CDATA[Critique]]></category>
		<category><![CDATA[Great Designs]]></category>
		<category><![CDATA[Product Design]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/?p=932</guid>
		<description><![CDATA[Wow, the upcoming Chumby has an incredibly simple and intuitive UI for adjusting volume: just turn the dial. No unlocking to make the volume UI available.  No having to ensure that you are in the right mode.  You can feel for it and operate it without even looking, with instant response. What a great idea! [...]]]></description>
			<content:encoded><![CDATA[<p>Wow, the <a href="https://store.chumby.com/">upcoming Chumby</a> has an incredibly simple and intuitive UI for adjusting volume: just turn the dial.</p>
<p><img class="aligncenter size-full wp-image-935" title="chumby2" src="http://stealthisidea.com/wp-content/uploads/2009/11/chumby2.jpg" alt="chumby2" width="488" height="292" /></p>
<p>No unlocking to make the volume UI available.  No having to ensure that you are in the right mode.  You can feel for it and operate it without even looking, with instant response. What a great idea!</p>
<p>Hmmm&#8230; come to think of it, I think my 1979 Walkman had a similar UI.  Maybe <a href="http://stealthisidea.com/articles/the-ipod-touch-is-not-a-great-media-player/">other products</a> should steal that idea.</p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/innovation-in-audio-volume-ui/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>How to fix the stationery feature in Mac OS X</title>
		<link>http://stealthisidea.com/articles/fix-stationery/</link>
		<comments>http://stealthisidea.com/articles/fix-stationery/#comments</comments>
		<pubDate>Sun, 08 Nov 2009 19:36:34 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Analysis]]></category>
		<category><![CDATA[Commentary]]></category>
		<category><![CDATA[Critique]]></category>
		<category><![CDATA[Designs to Steal]]></category>
		<category><![CDATA[gui]]></category>
		<category><![CDATA[Mac OS X]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/?p=925</guid>
		<description><![CDATA[Stationery is broken in the Mac OS.  Here's the fix, and a workaround in the mean time.]]></description>
			<content:encoded><![CDATA[<p>I don&#8217;t know what happened with the stationery / templating system in Mac OS X but it got broken a few versions ago.</p>
<p>Today, if you mark your beautiful template as stationery, when you subsequently open it it creates and saves a copy of the file under the same name with the word &#8220;Copy&#8221; appended, in the same directory.</p>
<p>This so does not make sense.  First, people often to store templates a central repository of tools, outside any project.  That is not where you want your new project-related instance to be.  Moving it to the right location is an added, unnecessary step.  Secondly, the name of the template is never going to be the right name.  If the user doesn&#8217;t think to change it immediately it will cause confusion and make it hard to find the document.  That&#8217;s more unnecessary work, including closing the document you just created to move and rename it and then reopening it.  These required steps make the stationery worse than useless &#8212; it&#8217;s less work to just manually copy a template file to the destination.</p>
<p>The better behavior (to steal) is to instantiate a new, unsaved, untitled document when the stationery file is opened.  Later, when the user saves, it  she can give it the right name and put it in the right location the first time.  In other words, just like how untitled documents have always worked.</p>
<p><em>[Didn't stationery once work like this?  Anyone have insight into how and why it went as</em>tray?]</p>
<p>Here is the workaround I&#8217;ve been using for a while.  Never use the Stationery bit.  Do mark templates as Locked bit.  This will have almost the correct behavior.  When you open it, it will look like you are editing the template.  But it will prevent you from saving over it, instead prompting you for a save location and name.</p>
<p>[<strong>Bonus idea to steal #1:</strong> why can't the File Save dialog give instant access to the Finder windows that are already open?  These are the most likely save destinations because they relate to the current project.]</p>
<p>[<strong>Bonus idea to steal #2:</strong> When you do Save As, why must it give you what amounts to an arbitrary default save location?  Why not default to the current folder?  This would match the scenario of retaining an old version of a document while branching it for further editing.]</p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/fix-stationery/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>The irony of Apple&#8217;s Magic Mouse</title>
		<link>http://stealthisidea.com/articles/apple-magic-mouse/</link>
		<comments>http://stealthisidea.com/articles/apple-magic-mouse/#comments</comments>
		<pubDate>Wed, 21 Oct 2009 06:54:00 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Analysis]]></category>
		<category><![CDATA[Commentary]]></category>
		<category><![CDATA[Designs to Steal]]></category>
		<category><![CDATA[Apple]]></category>
		<category><![CDATA[history]]></category>
		<category><![CDATA[Microsoft]]></category>
		<category><![CDATA[mouse]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/?p=890</guid>
		<description><![CDATA[Apple's dubious track record of mouse design]]></description>
			<content:encoded><![CDATA[<p>Today, Apple did something ironic. It introduced the Magic Mouse, a mouse that integrates the usual motion of the mouse with a trackpad and multi-touch capability.</p>
<p>To understand the irony we have to go way back through the annals of user interface history, a history that is unkind to Apple&#8217;s repeated efforts at improving the mouse.</p>
<p>In the early days of GUI computing, it was common for mice to have three or buttons. The problem was there was no standardization for what each button should do. As a result, various apps used different buttons for the same basic operations.</p>
<div id="attachment_896" class="wp-caption aligncenter" style="width: 328px"><img class="size-full wp-image-896 " title="sun-mouse" src="http://stealthisidea.com/wp-content/uploads/2009/10/sun-mouse.jpg" alt="sun-mouse" width="318" height="225" /><p class="wp-caption-text">Sun&#39;s 3-button mouse, circa 1987</p></div>
<p>I remember programming on a Sun workstation that had one of these three buttons mice.  It was extremely difficult to master the basic tasks of clicking, dragging, selecting and opening.  One app would train your fingers to do it one way, and another app would train them in a different direction.</p>
<p>Apple&#8217;s 1984 Macintosh (and the Lisa before it) avoided this confusion by limiting the mouse to just one button. Users never clicked the wrong button because there was no other button to click. Click to select. Click and drag to move something. To open an icon on the desktop, use issue a bit of Morse code, and double-click it.  Dot dot.</p>
<div id="attachment_897" class="wp-caption aligncenter" style="width: 328px"><img class="size-full wp-image-897" title="apple-mouse-1984" src="http://stealthisidea.com/wp-content/uploads/2009/10/apple-mouse-1984.jpg" alt="apple-mouse-1984" width="318" height="279" /><p class="wp-caption-text">1984 Apple Macintosh Mouse</p></div>
<p>In the early 90s, Microsoft and Apple one better. They reintroduced a second mouse button.  But this time they avoided the foibles its predecessors by establishing a rock-solid standard for what the second button would do.  The button would invoke a context menu on the clicked object and never anything else.</p>
<p>It was a welcome innovation in the progression of object-oriented UI&#8217;s that we now take for granted.  You could now right-click on any object to pull up a tailored list of actions that can be done on just that object.  It was a lot faster than hunting through all the menus for items commands that became available by the existence of the selection.  And it brought the most used tasks to the forefront, right under the cursor.</p>
<div id="attachment_898" class="wp-caption aligncenter" style="width: 328px"><img class="size-full wp-image-898 " title="microsoft-2-button-mouse" src="http://stealthisidea.com/wp-content/uploads/2009/10/microsoft-2-button-mouse.jpg" alt="microsoft-2-button-mouse" width="318" height="248" /><p class="wp-caption-text">A 2-button Mouse by Microsoft (there was a plainer white mouse that came before this model, but I couldn&#39;t find an image of it)</p></div>
<p><em>[The unsung hero who pushed this standard through deserves a place in the User Experience Hall of Fame.  Anyone know the responsible party?]</em></p>
<p>Apple resisted this convention. Actually, different parts of Apple reacted differently.  The industrial design part of Apple resisted it, never dedicating a button to context menus.  But the OS software side supported the PC convention.  Right-clicking worked on the Mac with third party USB mice since before the dawn of Mac OS X.  It was a quirky position for Apple to take: it&#8217;s okay to have a mouse with two buttons, as long as it doesn&#8217;t have an Apple logo on it.</p>
<p>Apple&#8217;s hack for giving access to in-place menus was to have the user hold down the Control key and click menu.  It&#8217;s always been pretty clumsy for such a common task.</p>
<p>Even more clumsy was the little gear sprocket button that showed up in the button bar area, introduced a few years ago. This gave the hitherto invisible context menu a visible affordance, which sounds good in theory.  In practice I don&#8217;t know if people use it much.  And unlike in-place menus, it&#8217;s dissociated with the object it relates to.</p>
<div id="attachment_899" class="wp-caption aligncenter" style="width: 328px"><img class="size-full wp-image-899" title="context-menu" src="http://stealthisidea.com/wp-content/uploads/2009/10/context-menu.jpg" alt="Apple's context menu sprocket button" width="318" height="161" /><p class="wp-caption-text">Apple&#39;s context menu sprocket button</p></div>
<p>Innovation in mice continued its march forward without Apple. Around 1997, in the early days of the Worldwide Web, Microsoft introduced the scroll wheel between the two buttons.  You could now scroll a web browser or a word processing document without having to mouse over to the little scroll bar widget.  You could keep your gaze on the article you were reading and scroll the page almost telekinetically.  We&#8217;d never had to scroll so much before the web was invented, and the scroll wheel was a welcome advancement.</p>
<div id="attachment_900" class="wp-caption aligncenter" style="width: 328px"><img class="size-full wp-image-900" title="microsoft-mouse" src="http://stealthisidea.com/wp-content/uploads/2009/10/microsoft-mouse.jpg" alt="Microsoft mouse with scroll wheel" width="318" height="279" /><p class="wp-caption-text">Microsoft mouse with scroll wheel</p></div>
<p>The right mouse button and the scroll wheel are so critical to basic productivity that any serious Mac user simply needed to buy a third-party mouse. Buying a Mac?  Buy a functional third party mouse to go with it.</p>
<p>In the late 90&#8242;s an apparent error in Apple&#8217;s lab led to the inadvertent release of a mutant puck mouse, which must have scampered through a door left ajar.  The puck mouse was perfectly round.  So round that you couldn&#8217;t feel which way was up.  It was very common for it to be at a slight angle when you moved it, causing the cursor to go careening off in a diagonal direction.   Luckily for the puck mouse, it had a cord, so defenestration was hard to achieve.</p>
<div id="attachment_901" class="wp-caption aligncenter" style="width: 328px"><img class="size-full wp-image-901" title="apple-puck-mouse" src="http://stealthisidea.com/wp-content/uploads/2009/10/apple-puck-mouse.jpg" alt="Apple's painfully symmetric puck mouse" width="318" height="279" /><p class="wp-caption-text">Apple&#39;s painfully symmetric puck mouse</p></div>
<p>(Later models added a little indent so you could feel which was was up.)</p>
<p>So Apple stuck to its guns, suffering from its ongoing affliction of <a href="http://stealthisidea.com/articles/buttonphobia/">button-phobia</a>.  Form continued to triumph over function.  True simplicity lost out to the appearance of simplicity (<a href="http://stealthisidea.com/articles/iphone-gripefest-2009/">as it does on the iPhone</a>).</p>
<p>I suppose a second mouse button would mean that they surrendered. Or that they were desecrating the clean lines of their laptops or and mice with another button. Never mind that brining up a context menu is such a frequent operations.  (And please put out of your mind the fact that the keyboard already has about 76 other buttons for typing.)  That second mouse button would kill.  We&#8217;re trying to think different(ly) around here, people!  (See also: <a href="http://stealthisidea.com/articles/no-keyboard-for-you/">Apple&#8217;s Revolutionary Laptop With No Keyboard</a>)</p>
<p>Apple continued its buttonphobic ways.  They even went backwards, to no visible buttons.  Instead of clicking a button with your finger, you apply pressure to the top part of the housing and the whole thing rocked forward as a click.</p>
<div id="attachment_902" class="wp-caption aligncenter" style="width: 328px"><img class="size-full wp-image-902" title="apple-zero-button-mouse" src="http://stealthisidea.com/wp-content/uploads/2009/10/apple-zero-button-mouse.jpg" alt="Apple's zero button mouse" width="318" height="241" /><p class="wp-caption-text">Apple&#39;s zero button mouse</p></div>
<p>Beautiful, right?  And that clear outer shell never got scratched up, because it was always kept in a desk drawer.  It didn&#8217;t help that the USB cable on this mouse was only long enough to reach the port on the (also functionally challenged but also transparent) keyboard.  It would not reach the USB port on the back of the noisy G4 tower under the desk.  Oh, yeah, and the (transparent) wire frayed easily.  Anyone with actual work to do put the mouse away and desecrated Apple&#8217;s sculpture by using a functional, ergonomic, ugly Logitech mouse.</p>
<p>Then came Apple&#8217;s Mighty Mouse. It too used the whole housing as one physical button switch.  It had a touch sensitive area under the fingertips, and you could bring up context menus by clicking on the right side with your middle finger. If, that is, you dug into preferences and activated the feature.  That&#8217;s right, at this point right-clicking is still not acknowledged as a mainstream thing.</p>
<p>There was just one catch: the touch panel would only register a right-click if you lifted your left (index) finger off the left area of the mouse.  Without knowing this critical piece of information, and practicing it enough to be automatic, right clicking was haphazard.  This was fatally unintuitive and aggravating.</p>
<div id="attachment_903" class="wp-caption aligncenter" style="width: 328px"><img class="size-full wp-image-903" title="mighty-mouse" src="http://stealthisidea.com/wp-content/uploads/2009/10/mighty-mouse.jpg" alt="Apple's Mighty Mouse" width="318" height="242" /><p class="wp-caption-text">Apple&#39;s Mighty Mouse</p></div>
<p>The Mighty Mouse was and is also loathed for its miniscule built-in trackball.  This innovation was supposed to allow for scrolling in all directions, but would jam up with dirt after a few weeks&#8217; use.  Later Mighty Mice were cordless, so there was no saving the poor things from windows left open.</p>
<p>Which brings us to today, Tuesday October 20, 2009.</p>
<p>Apple has been adding gestures on its laptop trackpads for the last few years.  Those gestures were nice refinements, but not earth-shattering.  And they only worked when you were actually using the trackpad.  At a desk, if you use an external mouse, the trackpad and its fancy gestures are irrelevant.  On this date, Apple <a href="http://www.macrumors.com/2009/10/20/apple-introduces-magic-mouse-a-multi-touch-mouse/">introduced the Magic Mouse</a>, with, lo-and-behold, a trackpad built in.  You can still drag it around like a regular mouse, but you can also twiddle your fingers on it to do other tasks.</p>
<div id="attachment_911" class="wp-caption aligncenter" style="width: 328px"><img class="size-full wp-image-911" title="apple-magic-mouse" src="http://stealthisidea.com/wp-content/uploads/2009/10/apple-magic-mouse.jpg" alt="apple-magic-mouse" width="318" height="203" /><p class="wp-caption-text">Apple&#39;s Magic Mouse, 2009</p></div>
<p>And here we finally arrive at the irony.  25 years after the 1984 Macintosh mouse &#8211; <a href="http://online.wsj.com/article/SB118532502435077009.html?mod=todays_us_page_one">belligerently</a> endowed with just one button for the ostensible sake of simplicity &#8212; we have a sleek little wireless mouse that lets you not only click, not only right-click, but also scroll, pan, zoom, and swipe using invisible gestures.</p>
<p>Simple, right?  :-)</p>
<p><img class="aligncenter size-full wp-image-904" title="magic-mouse-genstures" src="http://stealthisidea.com/wp-content/uploads/2009/10/magic-mouse-genstures.jpg" alt="magic-mouse-genstures" width="500" height="123" /></p>
<p><strong>But is it crazy enough to work?</strong></p>
<p>I&#8217;m curious about how usable this integrated touchpad/button is going to be.  <a href="http://www.apple.com/magicmouse/">The video</a> certainly looks compelling. Did they solve the Mighty Mouse&#8217;s right-click problem?  Will all these gestures be inadvertently triggered during regular clicking and dragging?</p>
<p>If it licks these problems, Apple will have, finally, trapped a better mouse.</p>
<p><em>[Update 10/22/09: <a href="http://www.engadget.com/2009/10/20/new-imac-and-magic-mouse-unboxing-and-quick-hands-on/">Alas</a>: "Right clicking requires a lifting of the left click finger, just like the Mighty Mouse".  Oh well.]</em></p>
<p><strong>Requisite idea to steal</strong></p>
<p>Why is it that web apps don&#8217;t get to use right-click events? This goes both for AJAX-style apps such as Google Wave, and Flash and Adobe Air web apps. <span style="text-decoration: line-through;">That&#8217;s right, you cannot right click on an object to bring up its properties.  This a serious productivity limitation for SaaS apps, which are striving to catch up to the evolved usability of  desktop apps</span>. [11/17/09 Update - I'm wrong wrong wrong.  Per the comments below, it is possible for AJAX and Flash/Air apps to tailor the context menu.  It's just that many apps just fail to do so.]</p>
<p>And here is an older idea to steal a different way to pan and scroll without resorting to gestures: <a href="http://stealthisidea.com/articles/tilt-mouse/">make use of an accelerometer</a>.</p>
<p><em><br />
</em></p>
<h3>See also</h3>
<ul>
<li><a href="http://stealthisidea.com/articles/tilt-mouse/">Panning &amp; scrolling with a mouse by tilting</a></li>
<li><a href="http://stealthisidea.com/articles/trackpad-as-butto/">Apple makes the trackpad a mouse button</a></li>
</ul>
<p>&#8212;&#8211;</p>
<p><em>Philip Haine has been using Macs continuously since the original 128k model in 1984, for the most part as a fan boi. He is founder and principal of </em><a style="color: #0066cc;" href="http://productvision.com/"><em>Product Vision Associates</em></a><em>, an innovation consultancy that helps product leaders and their teams envision and build products that are even better than Apple&#8217;s mice.  He also writes the </em><a style="color: #788199;" href="http://productvision.org/blog/"><em>Product Vision Blog</em></a><em>.  To follow him on Twitter </em><a style="color: #788199;" href="http://twitter.com/dphaine"><em>click here</em></a><em>.</em></p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/apple-magic-mouse/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Remember my workspace on different display arrangements</title>
		<link>http://stealthisidea.com/articles/auto-adjust-workspace/</link>
		<comments>http://stealthisidea.com/articles/auto-adjust-workspace/#comments</comments>
		<pubDate>Fri, 16 Oct 2009 17:18:22 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Commentary]]></category>
		<category><![CDATA[Designs to Steal]]></category>
		<category><![CDATA[Product Design]]></category>
		<category><![CDATA[cloud computing]]></category>
		<category><![CDATA[displays]]></category>
		<category><![CDATA[gui]]></category>
		<category><![CDATA[trainable ui]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/?p=884</guid>
		<description><![CDATA[ ]]></description>
			<content:encoded><![CDATA[<p>Okay, computer. You should know my monitor-switching habits by now.</p>
<p>Most of the time you will see that I have the big monitor plugged in to my laptop.  When I do, I have things arranged a certain way. I put my e-mail on the laptop monitor. I tell the Dock to stay visible and not recede into the edge, because I can afford the screen space. I want my palettes in various productivity apps to be arranged so as to make efficient use of the big display while leaving plenty of real estate to do my work.  Scrivener and Inspiration need lots of space, so I want them to be maximized on the big screen. I want my instant messaging app to be down on the laptop monitor.</p>
<p>On other occasions, you will notice that the big monitor is not plugged in. It&#8217;s just me and a 15&#8243; laptop screen.  You see me hide the Dock to free up precious space. Scrivener and Inspiration will still be maximized, but that of course means smaller height and width on the smaller screen.  You see palettes in my power tools arranged just so, to make best use of my smaller on-the-go set up.</p>
<p>You see me switch between these two configurations pretty regularly.  You should know now how I like things in each case.</p>
<p>So please, when I come and go and switch my workstation around, take care of these details for me so I can concentrate on my work.</p>
<p>This implies that:</p>
<ul>
<li>Each application needs to be aware of the various display configurations that are actually in use.  And each should keep track of UI layout so it can recreate it automatically when I move about.  The first few switches will still require the user to move things about.  But <strong>the UI will be trainable</strong> and it will learn over time.  This will save a lot of time diddling around with UI elements every time I move around.</li>
<li>The Dock should learn (possibly with repetition) that you prefer it to be hidden on small screens and always visible on large screens.</li>
<li>Treat &#8220;maximized&#8221; as a special state.  When the machine awakens to a smaller display, don&#8217;t put a 1900-pixel-wide window on a 1400-pixel-wide laptop display without resizing it.  And vice-versa: if a window has been told to be maximized, then make it maximized when moving to a larger display.</li>
<li>When the configuration changes, put windows in reasonable locations.  (In moving to smaller displays, I find many windows stuck along the bottom edge, with only the title bar showing.)</li>
</ul>
<p>This will also help in the future, <strong>when our world is in the cloud</strong>, and our workstation is any computer, anywhere.  Those workstations can come in any shape and it will behoove the software to arrange the workspace accordingly.</p>
<p>See also:</p>
<ul>
<li><a href="http://stealthisidea.com/articles/060105_offset_browser_windows/">Making efficient use of big displays</a> (from almost four years ago)</li>
</ul>
<p>&#8212;</p>
<p><em>Philip Haine is principal of <a style="color: #0066cc;" href="http://productvision.com/">Product Vision Associates</a>, a product innovation consultancy that helps product leaders and their teams envision new, breakthrough products and reboot older ones.  He also writes the <a href="http://productvision.org/blog/">Product Vision Blog</a>.  To follow him on Twitter <a style="color: #788199;" href="http://twitter.com/dphaine">click here</a>.</em></p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/auto-adjust-workspace/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>The Network Heater</title>
		<link>http://stealthisidea.com/articles/the-network-heater/</link>
		<comments>http://stealthisidea.com/articles/the-network-heater/#comments</comments>
		<pubDate>Wed, 30 Sep 2009 06:56:54 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Commentary]]></category>
		<category><![CDATA[Humor]]></category>
		<category><![CDATA[Product Vision & Strategy]]></category>
		<category><![CDATA[Research Topics]]></category>
		<category><![CDATA[Visions to Steal]]></category>
		<category><![CDATA[cloud computing]]></category>
		<category><![CDATA[crazy enough to work]]></category>
		<category><![CDATA[heaters]]></category>
		<category><![CDATA[SaaS]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/?p=862</guid>
		<description><![CDATA[If you need to generate all that heat anyway, why not do something useful in the process?]]></description>
			<content:encoded><![CDATA[<p>We&#8217;ve entered a world where computationally-intense tasks can be offloaded to the cloud.  Why build out and manage a computing farm when you can just ask Amazon to do it for you?  Heavy duty computing is becoming just another utility.</p>
<p>That &#8220;cloud&#8221; is actually made up of racks and racks of servers. Those servers are not actually in the clouds, where it is quite cold, but down on the earth, where it&#8217;s warm and getting warmer.  Those racks of servers generate heaps of thermal energy, which requires yet more energy to keep cool.  Otherwise they melt onto one another like Hersheys in the glovebox.</p>
<p>The software architecture that makes these clouds of servers work is modular, and fault-tolerant and distributed.  They allow plug-and-play expansion when more capacity is needed.  They are built to withstand any node failing (with thousands of servers, several will break down every day).</p>
<p>And those nodes can be anywhere, since everything is connected.  But given a choice, it&#8217;s preferable to put them close to where they are needed, because things are faster that way.</p>
<p>The purpose of a space heater is to generate heat.  Heaters are pretty dumb.  That&#8217;s all they do.  They have an electric heating element, maybe some oil to circulate through and some fins to radiate the heat, a thermostat and that&#8217;s it.</p>
<p>What if a space heater instead had a bunch of cheap, older generation, heat-generating CPUs and a wireless connection?  You could crank up the number of processors and their clock speed for a nice cozy hearth, or turn them down a few GHz if you just needed to keep your nose from freezing overnight.</p>
<p>The cloud computing companies could even give you a few cents for each MIPS-hour your heater burns.</p>
<p>At a larger scale, an entire office floor could have computers built into its HVAC system.  Even our desktop computers could be enlisted for the job.  They are ridiculously overpowered for what we need them for most of the time anyway.  The building&#8217;s climate control system could instruct all those idle CPUs to do something productive with their downtime, while warming the office in the winter.  Those computers could even monitor the local temperature and provide more heat where it is most needed.</p>
<p>All of this would:</p>
<ul>
<li>do something productive in the process of heating your home or office</li>
<li>reduce the cost of cooling servers</li>
<li>distribute computing closer to where it is needed</li>
<li>maybe control temperature in a breezy office to a finer degree</li>
<li>maybe subsidize heating costs by donating cycles to the cloud</li>
</ul>
<p>My wife, tactfully: &#8220;I think you have an idea that is ahead of its time.&#8221;</p>
<p>Yes, it could be a while before this idea is stolen.  <em>[This would be a fun and compelling </em><strong><em>research project</em></strong><em> for some engineering &amp; system design students.  Anyone?]</em></p>
<p>&#8212;</p>
<p><em>Philip Haine is principal of <a href="http://productvision.com/">Product Vision Associates</a>, an innovation consultancy that helps guide product leaders and their teams to generate ideas even more important than the Network Heater.  To follow him on Twitter <a href="http://twitter.com/dphaine">click here</a>.</em></p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/the-network-heater/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Apple laptops: Stop the Throb</title>
		<link>http://stealthisidea.com/articles/apple-laptops-stop-the-throb/</link>
		<comments>http://stealthisidea.com/articles/apple-laptops-stop-the-throb/#comments</comments>
		<pubDate>Sat, 26 Sep 2009 05:56:16 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Commentary]]></category>
		<category><![CDATA[Critique]]></category>
		<category><![CDATA[Designs to Steal]]></category>
		<category><![CDATA[Product Design]]></category>
		<category><![CDATA[Apple]]></category>
		<category><![CDATA[laptops]]></category>
		<category><![CDATA[sleep inhibition]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/?p=855</guid>
		<description><![CDATA[ ]]></description>
			<content:encoded><![CDATA[<p>Apple laptops since the Powerbook era have had a cute anthropomorphic indication that the device is asleep:  the white light on the front of the device slowly brightens and darkens like the breathing pattern of a deeply sleeping dorm-mate.</p>
<p>It&#8217;s kind of cute, as long as the laptop has its own bedroom.</p>
<p>But, like a snoring dorm-mate, it&#8217;s the most annoying thing when you have no choice but to share sleeping quarters.  Such is the case in hotel rooms, or when a home office serves as an impromptu nursery for an eight-month-old.  The laptop causes the ambient room light to cycle from pitch dark to bright night light, piercing photons through your eyelids, keeping those synapses firing, and inhibiting sleep.</p>
<p>The analog remedy for both snoring roommates and obnoxiously glowing MacBook Pros is the same: get out of bed and smother it in a pillow.</p>
<p>What we need is a digital remedy, today&#8217;s <strong>idea to steal</strong>:</p>
<ul>
<li>Or, provide a preference to stop the throbbing glow</li>
<li>Or, employ an ambient light sensor on the outside of the device to smartly control the throbbing glow.  By daylight, throb away.  When the room is dark, don&#8217;t.</li>
<li>And while you&#8217;re at it, also dim the charging light when the room is dark. It, too, must be covered to keep the room dark enough for the laptop&#8217;s very young roommate.</li>
<li>Or, just stop throbbing</li>
</ul>
<p>As for snoring roommates, I&#8217;m unaware of a digital remedy.  Anyone?</p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/apple-laptops-stop-the-throb/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Blending it in versus bolting it on, and Alt-Tabbing</title>
		<link>http://stealthisidea.com/articles/blend-vs-bolt/</link>
		<comments>http://stealthisidea.com/articles/blend-vs-bolt/#comments</comments>
		<pubDate>Tue, 28 Jul 2009 00:02:30 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Commentary]]></category>
		<category><![CDATA[Designs to Steal]]></category>
		<category><![CDATA[Product Design]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/?p=735</guid>
		<description><![CDATA[Maintain simplicity over time by blending in new functionality rather than bolting it on.]]></description>
			<content:encoded><![CDATA[<p style="text-align: left;">As the generally magnificent Mac OS X matures, it has suffered complexity creep as new UIs are bolted on year after year.</p>
<p style="text-align: left;"><a href="http://en.wikipedia.org/wiki/Front_Row_%28software%29">Front Row</a>, <a href="http://en.wikipedia.org/wiki/Spaces_%28software%29">Spaces</a>, <a href="http://en.wikipedia.org/wiki/Expos%C3%A9_%28Mac_OS_X%29">Exposé</a>, <a href="http://en.wikipedia.org/wiki/Dashboard_%28software%29">Dashboard</a>, <a href="http://en.wikipedia.org/wiki/Time_Machine_%28Apple_software%29">Time Machine</a>, <a href="http://en.wikipedia.org/wiki/Stacks_%28software%29">Stacks</a> and the <a href="http://en.wikipedia.org/wiki/Ilife">iApps</a> have continually expanded the basic rules by which the graphical user experience operates,  making it harder to predict, harder to learn, and unnecessarily complex. No new Mac feature appears without another surprising jack-in-the-box animation or mind-bending world-within-a-world paradigm shift.</p>
<p style="text-align: left;">This is not so bad for people who have been continually using Macs every step along the way since 1984 (like Steve Jobs, or me).  But it&#8217;s an increasing challenge for the new user, the less technically savvy, and the <a href="http://www.apple.com/getamac/">switcher</a>.</p>
<p style="text-align: left;">Features that are bolted on violate two of my top principles of user experience architecture:</p>
<ol style="text-align: left;">
<li><strong>Minimize the bag of things the user needs to learn.</strong> Do not add things to the bag lightly.  Try and find something to remove from it.  [Consistency, by the way, is a sub-case of this rule.]</li>
<li><strong>When adding features, blend them in, don&#8217;t bolt them on.</strong> Each bolted-on UI adds to the bag and  diminishes the coherence, elegance and simplicity of the whole.</li>
</ol>
<p style="text-align: left;">With all those trademarked features and their funky UI&#8217;s, Mac OS&#8217;s bag of things to learn is becoming positively santaclausian.</p>
<p style="text-align: left;">This is not a push for UI conservatism.  It&#8217;s wonderful that Apple continually challenges and improves past conventions.  But please, don&#8217;t leave us with seven different conventions in one package, which is where we are today.</p>
<p style="text-align: left;">As software ages, the fun and important architectural challenge &#8212; and a real test of a designer&#8217;s ability &#8212; is to work out <em>how to blend new features in,</em> rather than just <em>bolting them on.</em> We have to ask, &#8220;If the system had these features from the beginning, how would it have been designed?&#8221;  The user shouldn&#8217;t be able to tell where one era&#8217;s design team left and another one picked up.</p>
<h4 style="text-align: left;">Blending Alt-Tab behavior into the Dock</h4>
<p style="text-align: left;">Take, for example, the Alt-Tabbing UI to switch apps, which was (rightfully) stolen from Windows for inclusion in Mac OS X.</p>
<p style="text-align: left;">We already had a way of switching apps: clicking on icons in the dock.  But it required reaching for the mouse.  Alt-tabbing provided a way switch apps without moving one&#8217;s hands from the keyboard.  Here is how it has looked for several years:</p>
<p style="text-align: center;"><img class="size-full wp-image-738 alignnone" title="alt-tab" src="http://stealthisidea.com/wp-content/uploads/2009/07/alt-tab.png" alt="alt-tab" width="640" height="400" /></p>
<p>Here, with the Dock and the Alt-Tab UI visible, we see two ways of displaying open apps, and two ways of switching between them.  They are shown in different places, in different ways with different rules.</p>
<p>The Alt-Tab UI sorts its icons <a href="http://stealthisidea.com/articles/alt-tab-order/">unpredictably</a>.  (The order mirrors the Z-order of open windows, a deck that is shuffled as you switch windows.)  The user cannot develop a spatial memory of what is where because they keep shuffling around. And the location of items in the Dock has no bearing on the order in which the same icons are presented in the alt-tab UI.</p>
<p>The interaction design challenge is: rather than bolting on the Alt-Tab UI, could the functionality be blended with the existing Dock without diminishing the effectiveness of either?  Here is an approach I&#8217;ve been sitting on for a while:</p>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-739" title="alt-tab-before" src="http://stealthisidea.com/wp-content/uploads/2009/07/alt-tab-before.png" alt="alt-tab-before" width="640" height="400" /></p>
<p style="text-align: center;"><em>Before the alt-tab:  Dock appears as usual</em></p>
<p style="text-align: center;">When the user keys down on Alt-Tab, the Dock icons of the open apps stand apart from the others.  Here is a quick &amp; dirty mockup of one way to do that:</p>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-740" title="alt-tab-after" src="http://stealthisidea.com/wp-content/uploads/2009/07/alt-tab-after.png" alt="alt-tab-after" width="640" height="400" /></p>
<p style="text-align: center;"><em>During Alt-tab (alternative 1): active apps jump forward; inactive apps which aren&#8217;t part of the alt-tab cycle are suppressed</em></p>
<h4 style="text-align: left;">Alternative 2</h4>
<p style="text-align: left;">In this variant, the icons jump out of the dock into the familiar Alt-Tab UI.  Suppressing the inactive Dock icons lets the user visually estimate how many key presses are needed.  The most recent app is the first one to be highlighted, preserving the ability to toggle between the two recently used apps with one keystroke.  Subsequent Alt-Tabs walk through successive open apps, in the usual order they appear in the Dock.</p>
<p style="text-align: left;">Here is a variant that is even more naturally blended in with the Dock:</p>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-742" title="alt-tab-after2" src="http://stealthisidea.com/wp-content/uploads/2009/07/alt-tab-after2.png" alt="alt-tab-after2" width="640" height="113" /></p>
<p style="text-align: center;"><em>During Alt-tab (alternative 2): inactive apps are dimmed back; alt-tab grows the current selection<br />
</em>
</p>
<p style="text-align: left;">In this alternative, the inactive apps are dimmed back, and the current selection grows.  This borrows the Dock&#8217;s pre-existing magnification feature.  It&#8217;s even more seamlessly blended with the Dock behavior.</p>
<p style="text-align: left;">Et voila, Alt-Tab functionality without having to bolt on another paradigm.  The order of the apps is stable and predictable, and leverages the user&#8217;s spatial sense of what apps are where.</p>
<p style="text-align: left;">The key lesson: as software ages, be wary of layering on new UI paradigms.  Take the time to study how things already work, and find ways to make the new features and old features feel like they&#8217;ve been together all along, and were designed by the same team.</p>
<p style="text-align: left;">See also:</p>
<ul style="text-align: left;">
<li><a href="http://stealthisidea.com/articles/alt-tab-tweak/">Bring related windows forward during Alt-Tab</a></li>
<li><a href="http://stealthisidea.com/articles/alt-tab-order/">What is the Alt-Tab order?</a></li>
</ul>
<p>&#8212;</p>
<p><em>Philip Haine is principal of <a href="http://productvision.com/">Product Vision Associates</a>, a product innovation consultancy that helps product leaders and their teams envision new, breakthrough products and reboot older ones.  To follow him on Twitter <a href="http://twitter.com/dphaine">click here</a>.</em></p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/blend-vs-bolt/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Crash Course in Learning Theory</title>
		<link>http://stealthisidea.com/articles/crash-course-in-learning-theory/</link>
		<comments>http://stealthisidea.com/articles/crash-course-in-learning-theory/#comments</comments>
		<pubDate>Wed, 24 Jun 2009 07:40:07 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Commentary]]></category>
		<category><![CDATA[Great Designs]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/?p=698</guid>
		<description><![CDATA[ Valuable lessons for those who profess.]]></description>
			<content:encoded><![CDATA[<p>This is an oldie from Kathy Sierra but <em>such</em> a goodie: <a href="http://headrush.typepad.com/creating_passionate_users/2006/01/crash_course_in.html">Crash Course in Learning Theory</a>.</p>
<p>Anyone whose job it is to teach others should read this, every month, forevermore.</p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/crash-course-in-learning-theory/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Use a wiki for documentation, not a word processor</title>
		<link>http://stealthisidea.com/articles/use-a-wiki-for-documentation-not-a-word-processor/</link>
		<comments>http://stealthisidea.com/articles/use-a-wiki-for-documentation-not-a-word-processor/#comments</comments>
		<pubDate>Mon, 22 Jun 2009 23:03:38 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Commentary]]></category>
		<category><![CDATA[Design Tools & Resources]]></category>
		<category><![CDATA[Product Design]]></category>
		<category><![CDATA[requirements]]></category>
		<category><![CDATA[specs]]></category>
		<category><![CDATA[tools]]></category>
		<category><![CDATA[wiki]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/?p=694</guid>
		<description><![CDATA[ ]]></description>
			<content:encoded><![CDATA[<p>Over at the <a href="http://ProductVision.org/blog">Product Vision Blog</a>, I tell you why you should consider dumping the word processor and instead <a href="http://productvision.org/blog/bye-wp/">use a wiki to document specs and designs</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/use-a-wiki-for-documentation-not-a-word-processor/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>How to improve Google&#8217;s search UI</title>
		<link>http://stealthisidea.com/articles/streamlining-google/</link>
		<comments>http://stealthisidea.com/articles/streamlining-google/#comments</comments>
		<pubDate>Mon, 01 Jun 2009 12:55:44 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Commentary]]></category>
		<category><![CDATA[Designs to Steal]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[mockups]]></category>
		<category><![CDATA[search]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/?p=660</guid>
		<description><![CDATA[Is the Google UI really the ultimate way to peruse search results?]]></description>
			<content:encoded><![CDATA[<p>The Google UI that has been with us since the beginning is not fast enough.</p>
<p>Well, I should clarify.  The current Google workflow is just fine for searches for which there is one clear, perfect hit to pursue.  One search, a bit of scanning, and one click to get to the results.</p>
<p>What Google is missing is that finding an answer often involves hunting through several sources.  Google could be made significantly more efficient by considering this larger workflow.</p>
<p>Here is the typical best-practices workflow for checking out multiple hits from Google:</p>
<ol>
<li>Type in a search</li>
<li>Skim<!-- Web Stats --> <!-- End Web Stats --> the results for hits that may be credible.</li>
<li>Control-click the links that may have the answer you are looking for into new tabs.  This could be many tabs.</li>
<li>Peruse the tabs one by one.</li>
<li>Search within the page for the results you are looking (it could take some digging).</li>
<li>Once you find the answer you are looking for, go back and close the rest of the tabs.</li>
</ol>
<p>It&#8217;s up to the end-user, using facilities in the browser to efficiently examine multiple search engine hits.</p>
<p>Here is the <strong>design to steal</strong>:  Search engine results don&#8217;t require very much width.  So why not show the search results in one column and a preview of the destination page in another?  Clicking a link would still go directly to the destination page.  But there are additional clear buttons to view the destination page (or its faster, cached version) in another pane. The new workflow might look something look like this rough mockup:</p>
<p><strong>Step 1. Type in a search and get search results</strong></p>
<p style="text-align: center;"><img class="aligncenter" src="/wp-content/streamlining-google/faster-search1.gif" alt="" width="577" height="400" /></p>
<p><strong>Step 2. Click the Cache button next to pertinent search result to instantly see the cached version.<br />
</strong></p>
<p>The cached version appears much more quickly than loading the page from the destination site.</p>
<p style="text-align: center;"><img class="aligncenter" src="/wp-content/streamlining-google/faster-search2.png" alt="" width="577" height="400" /></p>
<p>The user could also click &#8220;Show page&#8221; to fetch the latest, live version.</p>
<p><strong>Step 3. If that isn&#8217;t the result you needed, click on other cached results</strong></p>
<p>Here is the result after clicking &#8220;Show cached&#8221; button for a different search hit:</p>
<p style="text-align: center;"><img class="aligncenter" src="/wp-content/streamlining-google/faster-search3.jpg" alt="" width="577" height="400" /></p>
<p>The page is pre-scrolled to the area that most closely matches the search and the relevant section highlighted.  This saves the user from having to work as hard to find the useful information within the results page.</p>
<p><strong>Step 4. If you want to read the destination page, click into it.</strong></p>
<p>If the user has found a useful page there is a clear way of going to it.  The search results would disappear and the entire browser window would show the destination page.</p>
<p><strong>A further optimization</strong></p>
<p>If Google had clear a sense of what the top hit would be for a given search, it would take the liberty of loading it by default, without the user having to click any links.  This effectively integrates the &#8220;I&#8217;m Feeling Lucky&#8221; functionality with the regular search results.</p>
<p><strong>What is going on?</strong></p>
<p>This solution is <strong>made possible by the larger screens</strong> we now have.  They are wide enough that we can see both the search results and a useful part of the destination page at once.</p>
<p>In this design approach the <strong>search results behave like a vertical set of tabs.</strong> You don&#8217;t have to manage your own browser tabs, which confers several benefits:  (1) You don&#8217;t have to work as hard to find the results within the destination pages.  Since Google is controlling the presentation of the results it can highlight the relevant parts nicely.  (2) You don&#8217;t have to worry about the memory drain of having many browser tabs open at once.  (3) You don&#8217;t have to clean up the tabs after you have found what you were looking for.  (4) And one click on each search result is enough to peruse its content, as opposed to one Ctrl-click to open the results in a tab, another click to go to that tab and another click to close the tab when you are done.  One click instead of 3 for each search result you visit.  If you have to check out four hits to find your answer, that&#8217;s four clicks instead of twelve.</p>
<p>For best results, the cache would be fast.  It must be, because it is competing with the efficient alternative of ctrl-clicking tabs and having the browser load the pages in parallel in the background.</p>
<p>Content owners may not be all that thrilled with a search engine employing this approach.  It encourages access to the cache rather than hitting the target site directly for the guaranteed freshest content displayed as the site owner intended.  Google might do is set up an API whereby site owners could find out how often their site is being served up from Google&#8217;s cache.  <em>[Readers, do they do this already?]</em></p>
<p><em>[As usual, if you know someone who might be able to do something with this idea, please forward them this article.]</em></p>
<p>&#8212;</p>
<p><em>Philip Haine is principal of <a href="http://productvision.com/">Product Vision Associates</a>, a product innovation consultancy that helps product leaders and their teams envision new, breakthrough products and reboot older ones.  To follow him on Twitter <a href="http://twitter.com/dphaine">click here</a>.</em></p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/streamlining-google/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Update on favorite interactive product design tools</title>
		<link>http://stealthisidea.com/articles/more-tools/</link>
		<comments>http://stealthisidea.com/articles/more-tools/#comments</comments>
		<pubDate>Fri, 29 May 2009 13:31:29 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Commentary]]></category>
		<category><![CDATA[Design Tools & Resources]]></category>
		<category><![CDATA[tools]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/?p=674</guid>
		<description><![CDATA[Two more tools have found a home in my toolbox.]]></description>
			<content:encoded><![CDATA[<p>A few months ago I wrote an article describing my <a href="http://stealthisidea.com/articles/design-tools/">Top 7 Tools for Interaction Design and IA</a>.</p>
<p>Since then I&#8217;ve added a couple of other power tools to my frequently used set.</p>
<p>I drank the <strong><a href="http://www.devon-technologies.com/products/devonthink/">DevonThink Pro</a></strong> Kool Aid.  DevonThink is a general note taker and snippet database.  It&#8217;s hard to get how useful and important such a tool is until you have used it for a while.  The functionality should be built into the OS.  [That's a vision to steal, btw.]</p>
<p>I also started using <strong><a href="http://www.literatureandlatte.com/scrivener.html">Scrivener</a></strong> to organize and compose long articles and <a href="http://productvision.org/blog/product-vision-book/">the book</a>.  Simple and wonderful.  It&#8217;s what Word would have become 15 years ago had Microsoft realized that writers need word processors to help them think.</p>
<p>(Interestingly, both these Mac-only tools use TextEdit at their core.  They also rest on the Mac&#8217;s <a href="http://www.macosxtips.co.uk/index_files/peek-inside-mac-os-x-packages.html">package architecture</a> that lets a document contain other documents.)</p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/more-tools/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>The Einstein Test</title>
		<link>http://stealthisidea.com/articles/the-einstein-test/</link>
		<comments>http://stealthisidea.com/articles/the-einstein-test/#comments</comments>
		<pubDate>Wed, 27 May 2009 13:11:06 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Design Tools & Resources]]></category>
		<category><![CDATA[Product Design]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/?p=646</guid>
		<description><![CDATA[A quick reality check on a design]]></description>
			<content:encoded><![CDATA[<p><img class="alignright" src="/wp-content/einstein-test.jpg" alt="" width="204" height="204" />Here is a little test of reasonableness of a design I call the Einstein Test.</p>
<p>Find the most qualified user for the design in question. It could be someone who&#8217;s used the product for years or who&#8217;s written a book about it, or who is on the engineering team.</p>
<p>Show this expert user the design and see if he or she can make sense of it as you are expecting regular users to.</p>
<p>If they can, so far so good.  Continue designing or test with less apt users.</p>
<p>If not, your design has failed the Einstein test. <strong>The most qualified users of your product are incapable of figuring it out on their own, and therefore, there is no  hope that regular people will be able to. </strong>Go back to the drawing board.  If it fails the low bar, it is certain to fail the high bar.</p>
<p>This test is slightly counter-intuitive; common practice has it that you should test against typical users, not experts.  But there are a surprising number of designs out there that fail the Einstein test.</p>
<p>What examples springs to your mind?  Did you have any experience with doing something simple simple that you, as an expert computer user, should have been a snap?  Please comment with examples.</p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/the-einstein-test/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Email message threading is broken</title>
		<link>http://stealthisidea.com/articles/tweaking-email-message-threading/</link>
		<comments>http://stealthisidea.com/articles/tweaking-email-message-threading/#comments</comments>
		<pubDate>Tue, 26 May 2009 13:00:24 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Commentary]]></category>
		<category><![CDATA[Designs to Steal]]></category>
		<category><![CDATA[Product Design]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/?p=640</guid>
		<description><![CDATA[ Message threading is broken in some common mail apps. Here's a fix.]]></description>
			<content:encoded><![CDATA[<p>There something not right about the message threading system in Mac Mail.app.  Have a look at this screenshot:</p>
<p><img class="aligncenter" src="/wp-content/threading.gif" alt="" width="484" height="91" /></p>
<p>I have messages with the typical subject line, &#8220;Checking in&#8221;.   As you can see, it&#8217;s threading messages I sent and received yesterday with messages from four and six months ago.  What&#8217;s more, there are three different sets of recipients. There is no way that this is a continuation of the same conversation.</p>
<p>So here&#8217;s a <strong>design to steal</strong> to improve threading:</p>
<ul>
<li> if the subject is the same but the recipients are different, consider it a different thread.</li>
<li> If the recipients are the same, and the subject is the same, but a lot of time has passed, take a look inside the message. If there is little or no quoting of the earlier messages ( As happens when messages are replied to), then consider it a different thread.</li>
</ul>
<p><em>[Readers: Is this problem present in other mail programs? Please comment.  And, as usual, if you know someone at Apple, please send them this feedback.]</em></p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/tweaking-email-message-threading/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Following (subscribing to) #hashtags</title>
		<link>http://stealthisidea.com/articles/following-hashtags/</link>
		<comments>http://stealthisidea.com/articles/following-hashtags/#comments</comments>
		<pubDate>Wed, 06 May 2009 17:21:50 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Analysis]]></category>
		<category><![CDATA[Commentary]]></category>
		<category><![CDATA[Designs to Steal]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/?p=619</guid>
		<description><![CDATA[Maybe you do want to #follow a #channel in Twitter.]]></description>
			<content:encoded><![CDATA[<p>Um&#8230;</p>
<p><strong>Why can&#8217;t I just follow #hashtags in Twitter like they were @users?</strong></p>
<p>English translation:  Twitter lets anyone toss their transient thoughts into the ether for anyone in the universe to listen in on.  This is useful if you know of people who say interesting things.  You can subscribe to such people &#8212; many of them &#8212; and then conveniently track their utterances over the course of the day.  And this can be very interesting indeed.  It is like being on the listening end of a cocktail party conversation where the other person says something that makes you pause and go, &#8220;huh!&#8221; (*) Serendipity happens several times a day, and it becomes addictive.</p>
<p>The problem is that you only every hear from people you already know of and to whom you have already subscribed or followed.  If someone you don&#8217;t know of says something brilliant about something you care about (say, cats or Madonna or product vision) you won&#8217;t hear about it unless you go out of your way to search for it.</p>
<p>To help identify the topic of their dispatches into the <a href="http://en.wikipedia.org/wiki/Aether_(mythology)">Ether</a>, Twitter users have taken to appling keywords (a.k.a. tags) to them.  But Twitter doesn&#8217;t officially support keywords or tags.  So people make up their own and tack them into their 140 character Twitter message.  By convention, to identify the tag as such, they start them with the hash symbol (#) and call them hashtags.  Hashtags look like <a href="http://search.twitter.com/search?q=%23cats">#cats</a> or <a href="http://search.twitter.com/search?q=%23madonna">#madonna</a> or <a href="http://search.twitter.com/search?q=%23productvision">#productvision</a>.</p>
<p>The problem is you cannot subscribe to hashtag traffic directly, as you subscribe to people. (You can subscribe to the RSS feed for the hashtag, which means going use another program.  The benefits of centralization and serendipity are lost.</p>
<p>So I repeat:</p>
<p>Um&#8230;</p>
<p>Why can&#8217;t I just follow #hashtags in Twitter like they were @users?</p>
<p>&#8212;&#8211;</p>
<p>*This doesn&#8217;t apply if the people you follow insist on telling you about their flight delays or what they just ingested.</p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/following-hashtags/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>How to making the transition to DTV in time</title>
		<link>http://stealthisidea.com/articles/making-the-transition-to-dtv-in-time/</link>
		<comments>http://stealthisidea.com/articles/making-the-transition-to-dtv-in-time/#comments</comments>
		<pubDate>Mon, 02 Feb 2009 22:55:47 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Commentary]]></category>
		<category><![CDATA[Designs to Steal]]></category>
		<category><![CDATA[dtv]]></category>
		<category><![CDATA[process design]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/?p=580</guid>
		<description><![CDATA[Solving the Digital-TV switchover problem with process design.]]></description>
			<content:encoded><![CDATA[<p>I am not sure what is behind the <a href="http://blog.wired.com/business/2009/01/obama-urges-dtv.html">proposed delay the DTV transition</a>.  Millions will be without TV for a while while they make the transition  So what?  Will people really wither and die in large numbers if they miss Oprah for a day or two?  Will delaying really get more people to transition?</p>
<p>I (heart) Obama, but it sucks to see him expend precious first-hundred-days political capital &#8212; and money &#8212; on this self-correcting problem.  Leaving the schedules as is would have an economic perk: it would make the remaining 6 million households to buy converters or take the opportunity to upgrade their TVs &#8212; a nice boost infusion to consumer electronics retailers.</p>
<p>That said, if we are going to make them switch, there is probably a better way to go about it.</p>
<p>But first, some key observations:</p>
<ol>
<li>People tend to act reactively.  They won&#8217;t act until they sense a problem, which means further delays will not fully solve the problem.</li>
<li>Reaching everyone with traditional ads for the switchover are extremely expensive, and of limited efficacy.  (See point 1.)</li>
<li>Who says we have to change cold turkey?  Why not pull it off in stages?</li>
</ol>
<p>Here is the <strong>design to steal</strong>:  Give stragglers increasingly bitter tastes of what will happen if they don&#8217;t switch.   Disable analog broadcast of regular programming, showing instead a 10-minute public-service infomercial loop on all analog channels, with a phone number and website for more information.</p>
<p>The five week schedule might look like this:</p>
<ul>
<li>Warning shot:  Disable analog broadcasts for one hour next week during a low viewing period, say Monday 8-9 am. This will make headlines and get people talking.  Publish the schedule of analog brown-outs that every newscaster across the country will read.</li>
<li>Give people a week to switch, then fire the second warning shot:  Disable analog for 3 hours on a Saturday morning with the same message on how to transition.</li>
<li>Third warning shot a week later: Disable analog for 4 hours on a Sunday evening.</li>
<li>Fourth warning shot: Disable analog from 6-11 on a Monday night.</li>
<li>Fifth warning shot: Disable analog from 6-11 on a Thursday night.</li>
</ul>
<p>Here is an even bolder approach:</p>
<ul>
<li>Designate a Thursdays as no analog programming day.  Every week, turn off analog broadcasts for the whole day.</li>
</ul>
<p>Two other refinements to the idea:</p>
<ul>
<li>In additional to the tough love, station owners could <strong>sell advertising</strong> between replays of the public-service infomercial, but only to advertisers providing products and services involved in the transition.</li>
<li>If there is a local or national emergency, stations would be allowed to start re-broadcasting in analog for the public safety.</li>
</ul>
<p>Of course this will be painful for viewers and advertisers.  But it will be way less painful than the cold-turkey approach.</p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/making-the-transition-to-dtv-in-time/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Worlds collide on Facebook</title>
		<link>http://stealthisidea.com/articles/worlds-collide-on-facebook/</link>
		<comments>http://stealthisidea.com/articles/worlds-collide-on-facebook/#comments</comments>
		<pubDate>Thu, 29 Jan 2009 07:03:32 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Commentary]]></category>
		<category><![CDATA[Designs to Steal]]></category>
		<category><![CDATA[social networking]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/?p=572</guid>
		<description><![CDATA[There are legitimate reasons why people need to act differently in different spheres.]]></description>
			<content:encoded><![CDATA[<p>There&#8217;s a classic moment in Seinfeld when two spheres of George Kostanza&#8217;s world that he was wanting to keep separate intersected.  &#8220;It&#8217;s worlds colliding, Jerry!&#8221;  Something to be avoided at all costs.</p>
<p>It&#8217;s natural for us to have such partitions.  Our identities are different when we are dealing with our parents, our close friends, our colleagues, our students.  It&#8217;s natural and there&#8217;s nothing wrong with it.  We need to be able to tell fart jokes to your old high school buddy one moment, be silly with our children the next, then act professional at a meeting with senior management.</p>
<p>This is precisely the protocol that Facebook violates, by having all &#8220;friends&#8221; be on the same plane, be they friends, parents, work colleagues or nieces.</p>
<p>On the one hand this is a good thing.  It makes us all chillax a bit about the various pretensions we uphold in the spheres of our life.</p>
<p>On the other hand, it&#8217;s a bad thing. because despite the Facebook culture, most of us do still have that need to keep our worlds from colliding.  The stories of people who inadvertently made fools of themselves at work for what they did over the weekend are legend. And sometimes, you want to share something silly with one group, that your parents, or your kids, or your employer just should not see.  Without control over who gets to see information you post, prudent people must keep their edgy side under wraps.  Controversial topics that might  offend people whom you don&#8217;t want to hurt must go unspoken.</p>
<p>So here is the <strong>design to steal</strong> for Facebook: allow us to define spheres of friends and place each friend in one more more sphere.  When we post something, give us the option of limiting who gets to see it: everybody, or just certain spheres.</p>
<p>This same facility could be used for special interest sub-groups among your friends.  You could have a sphere for your college classmates, your high school classmates, your club, and so on, and post statuses or pictures that only they would see.</p>
<p>Allowing spheres would open up all kinds of new usage patterns and prevent users from having to water down the information they broadcast.  Go to it, Facebook!</p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/worlds-collide-on-facebook/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>iPhone Tools I use</title>
		<link>http://stealthisidea.com/articles/iphone-tools-i-use/</link>
		<comments>http://stealthisidea.com/articles/iphone-tools-i-use/#comments</comments>
		<pubDate>Tue, 06 Jan 2009 12:02:42 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Commentary]]></category>
		<category><![CDATA[Design Tools & Resources]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[tools]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/?p=516</guid>
		<description><![CDATA[These are a few of my iFavorite apps.]]></description>
			<content:encoded><![CDATA[<p style="font-size: 13px; line-height: 19px;"><a href="http://stealthisidea.com/wp-content/uploads/2008/12/iphone.jpg"><img class="alignright size-full wp-image-499" title="iphone" src="http://stealthisidea.com/wp-content/uploads/2008/12/iphone.jpg" alt="" width="108" height="183" /></a>The word iPhone is a misnomer.  Calling an iPhone a phone is like calling a car an iCarRadio or a computer an iWebSurfer.  The phone is just one of several things the iPhone does, and for me, only about 10% of what I use it for.  This is how it gets away with not being a great phone. It&#8217;s just so useful for so many other purposes.</p>
<p style="font-size: 13px; line-height: 19px;">Over the course of a typical excursion across the city recently I used eight different apps without thinking about it.  Not for the sake of using them, but because I had real problems to solve.  The apps were: Google Maps with GPS to get me to the appointment, email to see if a friend responded to a coffee request, SMS to confirm, Yelp to find a coffee shop, phone to finalize, NYTimes, Facebook and Wikipedia to catch up on news while I waited, photo app to grab a snapshot of my friend.  These were the scenarios we envisioned circa 2000 when I did some vision consulting with Palm.  They have now become a reality in a sleek package.</p>
<p style="font-size: 13px; line-height: 19px;">I&#8217;ve <a href="http://stealthisidea.com/articles/iphone-love-hate/">ranted</a> about the iPhone and criticized its <a href="http://stealthisidea.com/articles/palm-vs-iphone/">inefficient UI</a> and <a href="http://stealthisidea.com/articles/buttonphobia/">lack of needed buttons</a>.  It&#8217;s not the best phone in the world, but it is by far the best multi-purpose handheld computer and communicator.  I even think it is worth the high monthly cost.  But I can&#8217;t say for sure, because I can&#8217;t bear to look at the bill.</p>
<p style="font-size: 13px; line-height: 19px;">Recently I&#8217;ve been talking about the <a href="http://stealthisidea.com/articles/interaction-design-tools/">tools I use for interaction design</a> and for <a href="http://stealthisidea.com/articles/mac-productivity">general mac productivity</a>.  Now I&#8217;ll cover the tools I use on the iPhone.</p>
<p style="font-size: 13px; line-height: 19px;">The first page of the home screen contains my most frequently used apps.  (Tip: press the physical home button in the home screen to get to the first page.)  On the iPhone the focus of attention is really near the bottom of the screen, so the most used ones are actually at the bottom of this list.</p>
<ul>
<li><a href="http://stealthisidea.com/wp-content/uploads/2008/12/iphone-apps-1.jpg"><img class="alignright size-medium wp-image-517" title="iphone-apps-1" src="http://stealthisidea.com/wp-content/uploads/2008/12/iphone-apps-1-200x300.jpg" alt="" width="200" height="300" /></a>iPod &#8211; (Now that I think about it, it doesn&#8217;t need to be here, since I can get to the iPod by double-pressing the Home button)</li>
<li>Settings &#8211; To turn wifi off when walking around the city.  This is working around a design issue.</li>
<li>App Store</li>
<li>Safari</li>
<li>Clock &#8211; for alarms &amp; parking timers</li>
<li><a href="http://lists.zenbe.com/welcome">Zenbe lists</a> &#8211; shared shopping list</li>
<li>Google Maps</li>
<li>Mail</li>
<li><a href="http://www.newsgator.com/individuals/netnewswireiphone/default.aspx">NetNewsWire</a> &#8211; Offline RSS reading.  Syncs with my desktop RSS reader.  Outstanding!)</li>
<li>Facebook (which I think of as Headline News of your friends)</li>
<li>NYTimes</li>
<li>Google &#8211; Amaze your friends by speaking your query</li>
<li>Wikipanion &#8211; surprisingly how often we reference things in casual conversation</li>
<li>Say Who &#8211; voice dialing makes up for the sluggish performance of the iPhone on my 2,400 contacts</li>
<li>OmniFocus (which I&#8217;m going to demote soon because by the time it&#8217;s launched, 2.5 minutes later (!) I&#8217;ve completely forgotten what i needed to record.  I suggest you avoid this until they revamp their sync architecture and make launching instantaneous.)</li>
</ul>
<p style="font-size: 13px; line-height: 19px;">In the grey bar, available on all pages of the home screen I have:</p>
<ul>
<li> Phone</li>
<li>SMS/Text messages</li>
<li>Camera</li>
<li>Calendar</li>
</ul>
<p style="font-size: 13px; line-height: 19px;">I sure wish I had <a href="http://stealthisidea.com/articles/buttonphobia/">physical buttons</a> for accessing those items at any time, like the Palms!)</p>
<p style="font-size: 13px; line-height: 19px;">My page 2 apps include:</p>
<ul>
<li> <a href="http://stealthisidea.com/wp-content/uploads/2008/12/iphone-apps-2.jpg"><img class="alignright size-medium wp-image-518" title="iphone-apps-2" src="http://stealthisidea.com/wp-content/uploads/2008/12/iphone-apps-2-200x300.jpg" alt="" width="200" height="300" /></a>Pandora &#8211; The best music app on the iPhone.  We plug it into our home sounds system and leave it on for hours.  (I have AOL Radio and FlyCast next to them for coherence, but in my experience they have been flaky or commercial-laden or both.)</li>
<li><a href="http://www.instapaper.com/">Instapaper</a> &#8211; Click a single button on your PC&#8217;s web browser and the long article you don&#8217;t have a chance to read will be available on your iPhone, reformatted appropriately.  Great app!</li>
<li>Weather</li>
<li>Stocks</li>
<li>Twinkle &#8211; Twitter app.  I may switch to Twittelator.  (Follow me: @feign)</li>
<li>Yelp &#8211; look up restaurants and stores</li>
<li>MoMuni, so I know when the bus will come by</li>
<li> <a href="http://www.lexcycle.com/">Stanza</a> &#8211; eBook reading.  Excellent!  Wish I had more time to use it.  Reading prose on this small but hi-res screen really works</li>
<li>My dreaded AT&amp;T page, a Safari bookmark &#8211; so I can see if I&#8217;m going overboard in text messages, or just to feel bad</li>
<li>Tip &#8211; restaurant tips</li>
<li>Calculator</li>
</ul>
<p style="font-size: 13px; line-height: 19px;">I have four more pages of apps I never look at.</p>
<p style="font-size: 13px; line-height: 19px;">iPhone apps are evolving faster than I can keep up.  So please tell me what absolutely must-have apps there are that I missed.</p>
<p>&#8212;</p>
<p>Philip Haine is a product designer and product vision specialist. He founded <a href="http://obviousdesign.com">Obvious Design, LLC</a> in San Francisco in 1997.  His other blog on product vision can be found at <a href="http://ProductVision.org">ProductVision.org</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/iphone-tools-i-use/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Free printable 2009 calendars for planning</title>
		<link>http://stealthisidea.com/articles/free-printable-2009-calendars/</link>
		<comments>http://stealthisidea.com/articles/free-printable-2009-calendars/#comments</comments>
		<pubDate>Sun, 04 Jan 2009 13:00:30 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Commentary]]></category>
		<category><![CDATA[Design Tools & Resources]]></category>
		<category><![CDATA[downloads]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/?p=538</guid>
		<description><![CDATA[My new year gift to you.]]></description>
			<content:encoded><![CDATA[<p>Here is a set of downloadable, printable, public domain 2009 printable calendars in three formats: 1 month per page, 4 months per page and 6 months per page.</p>
<p>These are nice clean calendars with no ads or even a copyright notice.  Very handy for planning projects and vacations, for collecting <a href="http://www.amazon.com/gp/search?ie=UTF8&amp;keywords=stickers&amp;tag=stealthisidea-20&amp;index=blended&amp;linkCode=ur2&amp;camp=1789&amp;creative=9325">stickers</a><img style="border:none !important; margin:0px !important;" src="http://www.assoc-amazon.com/e/ir?t=stealthisidea-20&amp;l=ur2&amp;o=1" border="0" alt="" width="1" height="1" />, for <a href="http://lifehacker.com/software/motivation/jerry-seinfelds-productivity-secret-281626.php">Seinfeld&#8217;s productivity method</a> and for manually counting the number of <a href="http://eclecticesoterica.com/xmas_cnt.html">days until Christmas</a> (356 as of this writing).</p>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-541" title="2009-calendars" src="http://stealthisidea.com/wp-content/uploads/2009/01/2009-calendars.gif" alt="2009-calendars" width="700" height="253" /></p>
<p><strong>Download <a href="/wp-content/free-printable-2009-calendars/printable-2009-calendars.zip">free printable 2009 calendar pdfs</a> in 3 formats<br />
</strong></p>
<p>Happy new year!</p>
<p><em>[Trivia: these nice calendars were generated in the very obsolete <a href="http://en.wikipedia.org/wiki/Claris_Impact">ClarisImpact 2.0</a>, which I designed when I worked for Apple/<a href="http://en.wikipedia.org/wiki/Claris">Claris</a> back around 1995.  To make them I have to use an old Powerbook that still emulates <a href="http://en.wikipedia.org/wiki/Classic_MacOS#.22Classic.22_Mac_OS_.281984.E2.80.932001.29">Classic</a> mode.]<br />
</em></p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/free-printable-2009-calendars/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Top 10 Productivity tools for Macs</title>
		<link>http://stealthisidea.com/articles/mac-productivity/</link>
		<comments>http://stealthisidea.com/articles/mac-productivity/#comments</comments>
		<pubDate>Sat, 03 Jan 2009 12:06:29 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Commentary]]></category>
		<category><![CDATA[Design Tools & Resources]]></category>
		<category><![CDATA[Product Design]]></category>
		<category><![CDATA[productivity]]></category>
		<category><![CDATA[tools]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/?p=507</guid>
		<description><![CDATA[My secrets for making my Mac a productivity monster.]]></description>
			<content:encoded><![CDATA[<p>Earlier, I wrote about my favorite <a href="http://stealthisidea.com/articles/interaction-design-tools/">tools for interaction design and IA</a>.  Now I&#8217;d like to follow through by describing the rest of the tools I use for increased productivity.</p>
<p>It really does take years of trial and error and filtering through dozens of products to converge on a set of tools that really work, so let me give you a push start if you haven&#8217;t thought about this topic in a while.</p>
<p><span id="more-507"></span></p>
<h3 style="font-size: 13px; line-height: 19px;">Favorite general productivity boost on the Mac: <a href="http://www.obdev.at/products/launchbar/"><span style="font-size: 13px; line-height: 19px;">LaunchBar</span></a></h3>
<p><a href="http://stealthisidea.com/wp-content/uploads/2008/12/launchbar2.jpg"><img class="alignright size-full wp-image-494" title="launchbar2" src="http://stealthisidea.com/wp-content/uploads/2008/12/launchbar2.jpg" alt="" width="96" height="93" /></a></p>
<p>LaunchBar is my very top recommendation for enhanced productivity on a Mac.  It lets me do umpteen most frequently tasks from the keyboard, with close to the minimum number of keystrokes possible:</p>
<ul>
<li> open common files and folders</li>
<li>get to any bookmarked website</li>
<li>initiate a search in Google or Wikipedia or Amazon or Netflix or Google Maps, etc.</li>
<li>look up phone numbers</li>
<li>initiate an email to someone</li>
</ul>
<p>What is unique about LaunchBar is that it learns the abbreviations you like to use to do these things automatically, without you having to preconfigure anything.  As your habits adapt, it adapts.</p>
<p>I use it hundred times a day, never moving my fingers from the home row.  No Mac and no Mac user user should be without it.  It&#8217;s that good.  I wrote about <a style="font-size: 13px; line-height: 19px;" href="http://www.kpao.org/blog/2008/10/bill-gates-used-to-have.html">LaunchBar at KPAO</a>.</p>
<h4>Favorite text expansion tool: <a href="http://www.ergonis.com/products/typinator/">Typinator</a></h4>
<p><a href="http://stealthisidea.com/wp-content/uploads/2008/12/typinator.jpg"><img class="alignright size-full wp-image-495" title="typinator" src="http://stealthisidea.com/wp-content/uploads/2008/12/typinator.jpg" alt="" width="96" height="93" /></a>I&#8217;m very judicious when it comes to adding launch-on-boot utilities to my computer and so it was with skepticism that I tried text expansion programs after reading an article on the topic.</p>
<p>Text expansion is when you type something short and it&#8217;s expanded into something long.  It&#8217;s the sort of thing that you don&#8217;t see the need for until you try it.  But I gave it a shot and the more I used it, the more <a href="http://stealthisidea.com/articles/ssnifs/">SSNiFs</a> emerged:</p>
<ul>
<li>Expanding frequent but hard-to-type phrases.  Typing &#8220;pvo&#8221; automatically gives me &#8220;ProductVision.org&#8221;</li>
<li>Correcting typos. &#8220;teh&#8221; becomes &#8220;the&#8221;.  There are many many of these pre-built into Typinator.</li>
<li>Expanding boilerplate: &#8220;tbr&#8221; changes to &#8220;Thanks and best regards,&#8221;</li>
<li>Date and time stamping.  I have these two adjacent keys: &lt;;&#8217;&gt; return the current date in this format: &#8220;12/30/08&#8243;, the opposite sequence &lt;&#8217;;&gt; give me this format: &#8220;081230 &#8221; (which is <strong>great</strong> for prefixing document and folder names!)</li>
</ul>
<p>Now I&#8217;m pretty dependent on it.  I tried a few text expansion tools and I think there are multiple quality products that could work, but I settled on Typinator.</p>
<h3 style="font-size: 13px; line-height: 19px;"><a href="http://stealthisidea.com/wp-content/uploads/2008/12/adium1.png"><img class="alignright size-full wp-image-497" title="adium1" src="http://stealthisidea.com/wp-content/uploads/2008/12/adium1.png" alt="" width="70" height="100" /></a></h3>
<h3 style="font-size: 13px; line-height: 19px;">Instant messaging client: <a href="http://www.adiumx.com/">Adium</a> (free)</h3>
<p style="font-size: 13px; line-height: 19px;">Just one free client handles all the major services.  I switch to Skype or iChat when the need to send documents, talk by voice or by video chat arises.</p>
<h3 style="font-size: 13px; line-height: 19px;">Favorite tool for getting things done: <a href="http://www.omnigroup.com/applications/omnifocus/"><strong>OmniFocus</strong></a></h3>
<p style="font-size: 13px; line-height: 19px;">OmniFocus puts my scattered brain on track, and helps me juggle a dozen projects.   When I have a productive day, OmniFocus usually had something to do with it.  OmniFocus is always running, so I have it auto-launch when I boot.</p>
<p style="font-size: 13px; line-height: 19px;"><a href="http://stealthisidea.com/wp-content/uploads/2008/12/omnifocus.png"><img class="alignright size-full wp-image-498" title="omnifocus" src="http://stealthisidea.com/wp-content/uploads/2008/12/omnifocus.png" alt="" width="70" height="70" /></a>&lt;whine&gt;OmniFocus is faithful to Robert Allen&#8217;s seminal book, but a bit too faithful.  Major wishes: 1. Help me estimate time it will take to do a project  2. Help me plan my day and my week.  3. Make a usable iPhone version.  (Despite the tuning tips, it&#8217;s simply too slow to accomplish tasks like checking the list or adding something, which need to be instantaneous to be usable.  The comparison points are paper planners and the PalmPilot.)  4. Don&#8217;t require a context; 99% of what I put in OmniFocus are things I do at my computer, so Dave Allen&#8217;s contexts are not very useful to me.&lt;/whine&gt;</p>
<h3 style="font-size: 13px; line-height: 19px;">Favorite handheld PIM/communicator/entertainment/information device: <a href="http://www.apple.com/iphone/"><strong>iPhone</strong></a>.</h3>
<p style="font-size: 13px; line-height: 19px;"><a href="http://stealthisidea.com/wp-content/uploads/2008/12/iphone.jpg"><img class="alignright size-full wp-image-499" title="iphone" src="http://stealthisidea.com/wp-content/uploads/2008/12/iphone.jpg" alt="" width="108" height="183" /></a>The word iPhone is a misnomer.  It would be like calling a car an iCarRadio.  The phone is just one of several things it does, and for me, only about 10% of what I use it for.  I noticed recently that over the course of a typical excursion across the city I used 8 different apps: Google Maps with GPS to get me to the appointment, email to see if a friend responded to a coffee request, SMS to confirm, Yelp to find a coffee shop, phone to finalize, NYTimes, Facebook and Wikipedia to catch up on news while I waited, photo app to grab a snapshot of my friend.  These were the scenarios we envisioned circa 2000 when I contracted with Palm, and they have now come together in a usable package.</p>
<p style="font-size: 13px; line-height: 19px;">I&#8217;ve <a href="http://stealthisidea.com/articles/iphone-love-hate/">ranted</a> about the iPhone and criticized its <a href="http://stealthisidea.com/articles/palm-vs-iphone/">inefficient UI</a> and <a href="http://stealthisidea.com/articles/buttonphobia/">lack of needed buttons</a>.  It&#8217;s not the best phone in the world, but it is by far the best multi-purpose handheld computer and communicator.  I think it is worth the high monthly cost (but I can&#8217;t say for sure, because I can&#8217;t bear to look at the bill).</p>
<p style="font-size: 13px; line-height: 19px;">Oh the most frequent apps that have bubbled up to my home page are, from top to bottom: iPod, Settings, App Store, Safari, Clock (for alarms &amp; timers), <a href="http://lists.zenbe.com/welcome">Zenbe lists</a> (shared shopping list), Google Maps, Mail, <a href="http://www.newsgator.com/individuals/netnewswireiphone/default.aspx">NetNewsWire</a> (Offline RSS reading.  Syncs with my desktop RSS reader.  Outstanding!), Facebook (which I think of as Headline News of your friends), NYTimes, Google, Wikipanion, Say Who (voice dialing) and OmniFocus (which I&#8217;m going to demote soon because in the 2.5 minutes mine takes to launch I&#8217;ve completely forgotten what i needed to record.).  In the grey bar I have Phone, SMS, Camera and Calendar.  (Sure wish I had physical buttons for accessing those items at any time, like the Palms!)  My page 2 apps include Pandora (great!), <a href="http://www.instapaper.com/">Instapaper</a> (great!), Weather, Stocks, Twinkle, Yelp, MoMuni (San Francisco transit), <a href="http://www.lexcycle.com/">Stanza</a> (eBook reading.  Great!), Tip and Calculator.  I have four more pages of apps I never look at.</p>
<h3 style="font-size: 13px; line-height: 19px;">Favorite Keyboard: <a href="http://www.goldtouch.com/">GoldTouch</a></h3>
<p style="font-size: 13px; line-height: 19px;"><a href="http://stealthisidea.com/wp-content/uploads/2008/12/goldtouch.jpg"><img class="alignright size-medium wp-image-501" title="goldtouch" src="http://stealthisidea.com/wp-content/uploads/2008/12/goldtouch-300x178.jpg" alt="" width="300" height="178" /></a>As I write this, my feet are up on the desk, I&#8217;m reclining comfortably with my keyboard in my lap.  (I wonder why the world hasn&#8217;t discovered that the lap is such a comfortable place to put a keyboard.)</p>
<p style="font-size: 13px; line-height: 19px;">The Goldtouch keyboard is divided into two halves that articulate around a ball joint to match the angle your wrists.  Your hands, arms and shoulders are in a natural position. If you have, had or are bound to get repetitive stress injury (RSI) you will appreciate the difference this makes.</p>
<p style="font-size: 13px; line-height: 19px;">[ <a href="http://www.amazon.com/gp/search?ie=UTF8&amp;keywords=goldtouch%20keyboard&amp;tag=stealthisidea-20&amp;index=pc-hardware&amp;linkCode=ur2&amp;camp=1789&amp;creative=9325">GoldTouch Keyboard on Amazon</a><img style="border:none !important; margin:0px !important;" src="http://www.assoc-amazon.com/e/ir?t=stealthisidea-20&amp;l=ur2&amp;o=1" border="0" alt="" width="1" height="1" /> ]</p>
<h4 style="font-size: 13px; line-height: 19px;">Macro Expander I use: <a href="http://www.scriptsoftware.com/ikey/">iKey</a></h4>
<p style="font-size: 13px; line-height: 19px;"><a href="http://stealthisidea.com/wp-content/uploads/2008/12/ikey.jpg"><img class="size-full wp-image-513 alignright" title="ikey" src="http://stealthisidea.com/wp-content/uploads/2008/12/ikey.jpg" alt="" width="120" height="116" /></a>Who wants to get into programming macros for productivity boost?  What a drag.  Well, if you are working 2000 hours a year for five, ten, fifteen, years, that&#8217;s 30,000 hours of working at a computer.  It&#8217;s worth taking a few of those hours to learn how to use a macro program.</p>
<p style="font-size: 13px; line-height: 19px;">I don&#8217;t think I&#8217;ve actually programmed a macro in over a year, but I use them daily without even being aware of it.</p>
<p style="font-size: 13px; line-height: 19px;">Whenever you think,  &#8220;boy, I wish all programs would standardize on one key for that operation&#8221; or &#8220;boy I do that operation 100 times a day; I wish I could just hit a command key for that function&#8221; then you have an opportunity to fix the issue yourself with a macro program.</p>
<p style="font-size: 13px; line-height: 19px;">Here are some macros I use:</p>
<ul>
<li>Globally assign F3, F2 and F1 to <strong>Cut, Copy and Paste</strong>.  This is a wrist saver.  You do these operations dozens or hundreds of times a day, and curling your thumb under your palm to hold down the command key and pressing V, C or X is a contortion that hurts if you do them thousands of times.</li>
<li><strong>Hide the frontmost</strong> app by pressing F6.  (Deceptively useful!)</li>
<li>Get each app to agree to <strong>increase or decrease text size</strong> using the same key</li>
<li>Get each app to agree to <strong>paste and match style</strong> using the same keystroke.  (Every app has this feature but they all seem to use different keys for it.)</li>
<li><strong>Disable Cmd-Q in Safari</strong>, which I would inadvertently hit when typing Cmd-W to close a tab.  That was bad because I&#8217;d lose all my tabs.  To quit I do it through the menu.</li>
<li>Get each app to agree to use standard <strong>text editing keystrokes</strong> (next word, end of line, etc.)</li>
<li><strong>Copy and paste an object&#8217;s style</strong> using F5 and F4.  Super helpful.  I use this a lot in Inspiration.</li>
<li>Paste a <strong>date stamp</strong> in various format.  This saves not only typing but having to look up the date.  You can also use text expander for this.</li>
</ul>
<p style="font-size: 13px; line-height: 19px;">[TIP:  I prefix all my documents with the date in the format YYMMDD (for example, "081231 Mydoc.pdf").  It lets me sort reliably by the date I assign, and carries the critical meta-information of when the document was produced right there with the title.  The latest documents in a project folder are always at the bottom (or top if you prefer).  When you search for a document, the title tells you immediately whether it's a day old, a year, or five years old.  Last Created/Modified/Opened dates have never been reliable, but this is.  I've been doing this for 10 years and it's invaluable.]</p>
<p style="font-size: 13px; line-height: 19px;">I happen to use iKey for my macroriffic needs, because it worked when I needed it.  But I am glad that I don&#8217;t have to edit my macros very often, because the UI is not as easy as it could be.  I&#8217;m not going to switch now, because I have something that works, but I suggest you read some up to date reviews and see what today&#8217;s best product is.</p>
<h4 style="font-size: 13px; line-height: 19px;">Favorite tool to tell me how much time I have left: <a href="http://pester.en.softonic.com/mac">Pester</a> (free)</h4>
<p><a href="http://stealthisidea.com/wp-content/uploads/2008/12/pester.jpg"><img class="alignright size-full wp-image-515" title="pester" src="http://stealthisidea.com/wp-content/uploads/2008/12/pester.jpg" alt="" width="120" height="116" /></a>This is another obscure but useful tool.  All it does is tell me how long I have left to work on something.  To set it up, just click the icon and say how many minutes, or what time, you need to stop.  You can set multiple events.</p>
<p>Pester is really useful to get things done and leave time to prepare for for the next activity.</p>
<p>[<strong>Design to steal:</strong> What would be better is if <a href="http://en.wikipedia.org/wiki/ICal">iCal</a> automatically showed you in the dock icon how many minutes were left until your next appointment.  It would then be a hands-off affair.]</p>
<h4 style="font-size: 13px; line-height: 19px;">Favorite system monitoring tools: ActivityMonitor and <a href="http://www.versiontracker.com/dyn/moreinfo/macosx/13636 http://www.macupdate.com/info.php/id/8069">MemoryStick</a> (free)</h4>
<p style="font-size: 13px; line-height: 19px; text-align: left;"><a href="http://stealthisidea.com/wp-content/uploads/2008/12/activity-monitor-memory-stick.jpg"><img class="alignright size-full wp-image-514" title="activity-monitor-memory-stick" src="http://stealthisidea.com/wp-content/uploads/2008/12/activity-monitor-memory-stick.jpg" alt="" width="67" height="109" /></a>In a perfect world you would never have to think about your computer&#8217;s status at all.  Just your work.  Apple&#8217;s out of the box experience pretends that the world is perfect, and it&#8217;s difficult to see how the machine is dealing with all those apps you have open and all the tabs you&#8217;ve got going in your browser.</p>
<p style="font-size: 13px; line-height: 19px;">But the world is not perfect, and we have to be cognizant of when we are asking our computer for too much.  Before launching that phat Adobe app, it really helps to know if you should close something else first.  And if the fan is coming on and the machine is getting sluggish, it helps to know that the CPU is sweating on some lame Flash component in a Firefox tab you opened three days ago.</p>
<dl id="attachment_512" class="wp-caption aligncenter" style="width: 80px;">
<dt class="wp-caption-dt"><a href="http://stealthisidea.com/wp-content/uploads/2008/12/top-of-dock.jpg"><img class="size-full wp-image-512" title="top-of-dock" src="http://stealthisidea.com/wp-content/uploads/2008/12/top-of-dock.jpg" alt="" width="70" height="486" /></a></dt>
</dl>
<p style="font-size: 13px; line-height: 19px; padding-left: 120px;"><em>The top of my dock showing Finder, LaunchBar, Typinator, Pester, Activity Monitor, MemoryStick, Dictate, OmniFocus, Adium</em></p>
<p style="font-size: 13px; line-height: 19px;">My dynamic duo of system monitoring tools, which I have set to open automatically on launch and which are always visible in the dock:</p>
<ul>
<li>Activity Monitor, set to show CPU activity in the dock. (ActivityMonitor can be found in your Application/Utilities folder.)</li>
<li><a href="http://www.versiontracker.com/dyn/moreinfo/macosx/13636 http://www.macupdate.com/info.php/id/8069">MemoryStick</a>, an obscure little utility that reflects how much RAM is available.  When the sliver of green gets too small, quit something you aren&#8217;t using or close some browser tabs to free up some memory.</li>
</ul>
<p>MemoryStick bings at you when your system starts paging stuff out, meaning you&#8217;ve maxed out your RAM and it&#8217;s chugging along swapping memory to hard drive.  (I set mine to be consistent with the colors you see in System Monitor tab of Activity Monitor.)</p>
<p>The number represents the number of page files you have.  If this gets to be 6 or 8, poor you, you probably ran Windows.  Gigabytes of your hard drive is now devoted to page files.  To remedy, reboot.  (Boo!  Can this be done without rebooting?)</p>
<h3 style="font-size: 13px; line-height: 19px;">Favorite speech recognition:  <a href="http://www.macspeech.com/product_info.php">MacSpeech Dictate</a> (or Dragon NaturallySpeaking for Windows users)</h3>
<p style="font-size: 13px; line-height: 19px;"><a href="http://stealthisidea.com/wp-content/uploads/2008/12/dictate.jpg"><img class="alignright size-full wp-image-502" title="dictate" src="http://stealthisidea.com/wp-content/uploads/2008/12/dictate.jpg" alt="" width="130" height="131" /></a><em>[Update 9/11/09: I must put my recommendation for Dictate on hold.  The current version, v1.5.2 crashes and hangs so much as to be literally unusable.]</em></p>
<p style="font-size: 13px; line-height: 19px;"><em></em>Speech recognition hit a threshold of usability two or three years ago with version 8 and 9 of Dragon NaturallySpeaking.  Speech recognition really works, and it has been a wrist savior and productivity booster.  The bummer is, it has been a PC-only product all this time.</p>
<p style="font-size: 13px; line-height: 19px;">Because I was writing specs and a <a href="http://productvision.org">book about product vision</a>, my need for wrist relief was great enough to find some way to make Dragon work for me and my Mac.  I hacked together a solution.  It wasn&#8217;t pretty.  (spoken word -&gt; headset -&gt; Mac -&gt; Parallels Desktop -&gt; emulated Windows XP -&gt; Dragon NaturallySpeaking.  Text output goes from Dragon -&gt; VNC client on XP -&gt; VNC server on the Mac -&gt; foreground Mac app.)  Buggy, flaky, but workable when I had serious prose to churn out.  It was a pain, but less of a pain than <a href="http://en.wikipedia.org/wiki/Repetitive_strain_injury">RSI</a>.</p>
<p style="font-size: 13px; line-height: 19px;">After years of waiting, my <a href="http://stealthisidea.com/articles/2008-ui-wishes/">#1 UI wish for 2008</a> was granted, and the speech recognition engine for Dragon NaturallySpeaking was ported to the Mac in the form of MacSpeech Dictate.  Dictate has only the engine of NaturallySpeaking, not all the nice bells &amp; whistles, so reviewers who knew Dragon complain about it and give it lower stars than it deserves.  It&#8217;s not perfect, but it works, and it&#8217;s hella better than my jury-rigged emulated solution.</p>
<p style="font-size: 13px; line-height: 19px;">Incidentally, my input is multi-modal.  I speak prose to the machine, and do corrections and editing with my keyboard and mouse.</p>
<p>When I worked at Microsoft in 1989 few of my co-workers (professional software engineers) could touch type; now most people can.  Today, few people speak to their machines, but eventually, most of us will.   Speak to a computer is not as intuitive as it sounds.  It involves training, practice, and patience, but the investment pays off, just like learning to touch-type does.</p>
<p>Here&#8217;s to more investment and even better speech recognition in 2009 and beyond.</p>
<p>[ <a href="http://www.amazon.com/gp/search?ie=UTF8&amp;keywords=macspeech%20dictate&amp;tag=stealthisidea-20&amp;index=software&amp;linkCode=ur2&amp;camp=1789&amp;creative=9325">MacSpeech Dictate at Amazon</a><img style="border:none !important; margin:0px !important;" src="http://www.assoc-amazon.com/e/ir?t=stealthisidea-20&amp;l=ur2&amp;o=1" border="0" alt="" width="1" height="1" /> ]</p>
<p>&#8212;</p>
<p>Philip Haine is a product designer and product vision specialist. He founded <a href="http://obviousdesign.com">Obvious Design, LLC</a> in San Francisco in 1997.  His other blog on product vision can be found at <a href="http://ProductVision.org">ProductVision.org</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/mac-productivity/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Top 7 Tools for Interaction Design and IA</title>
		<link>http://stealthisidea.com/articles/design-tools/</link>
		<comments>http://stealthisidea.com/articles/design-tools/#comments</comments>
		<pubDate>Wed, 31 Dec 2008 20:45:34 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Commentary]]></category>
		<category><![CDATA[Design Tools & Resources]]></category>
		<category><![CDATA[Product Design]]></category>
		<category><![CDATA[interaction design]]></category>
		<category><![CDATA[tools]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/?p=478</guid>
		<description><![CDATA[Here are the best tools I know of for interaction design, information design and information architecture.]]></description>
			<content:encoded><![CDATA[<p style="font-size: 13px; line-height: 19px;">The tools we use to solve design problems are profoundly important to the outcome.  We need to understand problems, experiment with solutions, simulate user experiences and deliver professional results.  Tools that support our thinking, toying and prototyping lead to better designs.  Tools that are cumbersome lead to worse designs, because we must spend more of our precious time diddling with the tool rather than exploring the ideas that might turn into a breakthrough solution.</p>
<p style="font-size: 13px; line-height: 19px;">I&#8217;ve been designing interactive products for over twenty years, and I&#8217;m always looking for more more efficient ways to solve design problems.  Today we are fortunate to have a large set of powerful, evolved, stable products to pick from, but it can take ages to sort through them all.</p>
<p style="font-size: 13px; line-height: 19px;">So I thought it would be helpful to share what tools I have settled on for interaction design and information architecture.  Some of these you will know, some are gems you may not have heard of<span id="more-478"></span></p>
<p style="font-size: 13px; line-height: 19px;">[I've added some links to Amazon for related products.  If you buy anything through these links you're tossing me tip.  Thanks!]</p>
<h3 style="font-size: 13px; line-height: 19px;"><strong>Favorite computer: MacBook Pro<img style="border:none !important; margin:0px !important;" src="http://www.assoc-amazon.com/e/ir?t=stealthisidea-20&amp;l=ur2&amp;o=1" border="0" alt="" width="1" height="1" /></strong></h3>
<h3 style="font-size: 13px; line-height: 19px;"><a href="http://stealthisidea.com/wp-content/uploads/2008/12/macbook-pro.jpg"><img class="alignright size-full wp-image-488" title="macbook-pro" src="http://stealthisidea.com/wp-content/uploads/2008/12/macbook-pro.jpg" alt="" width="180" height="110" /></a></h3>
<p style="font-size: 13px; line-height: 19px;">I have a 2.3 GHz, 3GB RAM model from two years ago.  Fast and stable.  I can easily go two months without rebooting.  I&#8217;ve never owned a computer this long without pining for another.  I don&#8217;t really need anything faster (although more RAM would be nice).  The computation speed of computers has caught up to the needs of a mainstream users.</p>
<p style="font-size: 13px; line-height: 19px;">The funny thing is, my <a href="http://www.apple.com/macbookpro/">MacBook Pro</a> is actually running faster and faster due to the continued optimization of Mac OS X, and my gradual migration to Intel-native apps.  And, my prior machine, a five-year-old Powerbook is humming along contentedly in the living room as the surfing computer.  Apple treats the elderly well.</p>
<p style="font-size: 13px; line-height: 19px;">[ <a href="http://www.amazon.com/gp/search?ie=UTF8&amp;keywords=macbook%20pro&amp;tag=stealthisidea-20&amp;index=pc-hardware&amp;linkCode=ur2&amp;camp=1789&amp;creative=9325">MacBook Pro at Amazon</a><img style="border:none !important; margin:0px !important;" src="http://www.assoc-amazon.com/e/ir?t=stealthisidea-20&amp;l=ur2&amp;o=1" border="0" alt="" width="1" height="1" /> ]</p>
<h3 style="font-size: 13px; line-height: 19px;">Favorite  tool for boxes and arrow diagrams: OmniGraffle Professional</h3>
<p style="font-size: 13px; line-height: 19px;"><a href="http://stealthisidea.com/wp-content/uploads/2008/12/omnigraffle5pro.jpg"><img class="alignright size-full wp-image-492" title="omnigraffle5pro" src="http://stealthisidea.com/wp-content/uploads/2008/12/omnigraffle5pro.jpg" alt="" width="96" height="96" /></a>It&#8217;s so nice having the right tool for the job.  <a href="http://www.omnigroup.com/applications/OmniGraffle/">OmniGraffle Pro</a> is the world&#8217;s best program for drawing connected diagrams: sitemaps, flowcharts, state transition diagrams, Feature -&gt; Objective Chains (for product vision work), and so on.  Any graphics tool can draw boxes and arrows, but boxes and arrows are OmniGraffle&#8217;s mother tongue.</p>
<p style="font-size: 13px; line-height: 19px;">Many people still use Illustrator for this type of work.  The results can of course look gorgeous because of the fine level of control, but it is too painstaking and low-level for this type of work.  OmniGraffle makes making edits trivial, while offering enough fine control to make professional-looking deliverables.</p>
<p style="font-size: 13px; line-height: 19px;">I once laid out and re-engineered a complex internal workflow process with OmniGraffle.  The wallpaper-sized printout would have made Tufte proud.  The state transition diagram representing the new parallelized process was actually fun to do.</p>
<div id="attachment_506" class="wp-caption aligncenter" style="width: 510px"><a href="http://stealthisidea.com/wp-content/uploads/2008/12/state-transition.jpg"><img class="size-full wp-image-506" title="state-transition" src="http://stealthisidea.com/wp-content/uploads/2008/12/state-transition.jpg" alt="" width="500" height="164" /></a><p class="wp-caption-text">Parallelized state transition diagram made with OmniGraffle</p></div>
<p style="font-size: 13px; line-height: 19px;">
<p style="font-size: 13px; line-height: 19px;">On the PC, the best-of-class diagramming product is Visio.  But I have tipped PC people to switch to the Mac by showing them OmniGraffle.</p>
<p style="font-size: 13px; line-height: 19px;">Some people are using OmniGraffle for UI layouts.  It&#8217;s got a big community and several shared GUI widget libraries.  But I still prefer Stone Create for this work.</p>
<p style="font-size: 13px; line-height: 19px;">Omni has been courageous at inventing and re-inventing the UI to get it right.  The level of refinement and love of the product shows.  [If it could obviate Inspiration I'd be even more pleased.  See below.]</p>
<p style="font-size: 13px; line-height: 19px;">[ <a href="http://www.amazon.com/gp/search?ie=UTF8&amp;keywords=omnigraffle&amp;tag=stealthisidea-20&amp;index=blended&amp;linkCode=ur2&amp;camp=1789&amp;creative=9325">OmniGraffle at Amazon</a> ]</p>
<h3 style="font-size: 13px; line-height: 19px;">Favorite  tool for UI design: <a href="http://www.stone.com/Create/Create.html"><strong style="font-size: 13px; line-height: 19px;">Stone Create</strong></a></h3>
<p style="font-size: 13px; line-height: 19px;"><a href="http://www.stone.com/Create/"><img class="alignright size-full wp-image-533" title="create" src="http://stealthisidea.com/wp-content/uploads/2008/12/create.jpg" alt="create" width="108" height="104" /></a>Back in the day, I used to use <a href="http://findarticles.com/p/articles/mi_m0EIN/is_/ai_18226525">ClarisImpact 2.0</a> for most of my interaction design work because it was simple &amp; powerful.  (And, er&#8230; because I designed it when I worked at Apple/Claris.)  When Apple eventually dropped Mac Classic support in OS X, I had to find a new workhorse.  Stone Create it was.</p>
<p style="font-size: 13px; line-height: 19px;"><a href="http://www.stone.com/Create/">Stone Create</a> is a general object-based graphics program that happens to be great for designing UIs.  I use it for wireframes, specs, interaction designs, layouts, mock-ups, low-fi prototypes and scrapbooks of screenshots.</p>
<p style="font-size: 13px; line-height: 19px;">In Create, I have libraries of <strong>GUI objects</strong> for different media I design for: Windows apps, Mac apps, Web apps, mobile apps and so on.  Composing a screen is a drag and drop affair.</p>
<p style="font-size: 13px; line-height: 19px;"><strong>Text blocks</strong> are handled very smoothly.  Text boxes can be single-line, for titles that shouldn&#8217;t wrap unless you ask them to, or fixed size to fit into containers or fixed width, where you define the width and it grows vertically as needed.  This means Create knows your intent with the text block, and when you shuffle things around and resize them, they do the right thing.</p>
<div id="attachment_484" class="wp-caption alignright" style="width: 310px"><a href="http://stealthisidea.com/wp-content/uploads/2008/12/stone-create-screenshot.jpg"><img class="size-medium wp-image-484" title="stone-create-screenshot" src="http://stealthisidea.com/wp-content/uploads/2008/12/stone-create-screenshot-300x265.jpg" alt="" width="300" height="265" /></a><p class="wp-caption-text">Stone Create is excellent for wireframes and mockups that integrate GUI widgets and bitmaps. (click for larger view)</p></div>
<p style="font-size: 13px; line-height: 19px;">I can make the designs as pixel-perfect or as rough as is needed for the project.  For precise layouts, Create lets me drop in bitmaps from anywhere (screen grabs, Photoshop).  It maintains a 1:1 pixel ratio, so the results do not get distorted.  This is a  useful and rare quality!  Bitmaps and vector objects are all objects so you can directly manipulate them.  Unlike some apps whose name will go unmentioned, you don&#8217;t have to switch to the right layer.  Just grab an object and move it or resize it.</p>
<p style="font-size: 13px; line-height: 19px;">For <strong>rough wireframes</strong> and paper prototypes, I&#8217;ve been having fun using a set of sketchy GUI widgets that was inspired by an intriguing (but immature) <a href="http://en.wikipedia.org/wiki/Adobe_Air">AIR</a>-based product called <a href="http://www.balsamiq.com/products/mockups">Balsamiq Mockups</a>.  Layouts look like they were hand-drawn with a medium-width marker.  It lets everyone know implicitly that the solution they are looking at is still at the early, formative stage, and that the emphasis at this point is how well it works, not how it looks.</p>
<p style="font-size: 13px; line-height: 19px;">Create is great for generating <strong>paper prototypes</strong>.  Hand-drawn paper prototypes tend to suffer by being out of proportion.  It&#8217;s easy to draw out a page that is not viable on screen.  With Create and a good sketchy UI widget library you can get the proportions correct from the get-go.  And when you need to iterate a layout you just have to tweak what you started with; you don&#8217;t have to redraw it from scratch.</p>
<p style="font-size: 13px; line-height: 19px;">Stone Create deals with <strong>multi-page documents</strong> easily (even 30 page specs if you are into that sort of thing).  One document can contain many related designs, design alternatives and explanations.  Designs can be explained in the margins of the same document.  Other graphics apps tend to be designed around single page documents, and they don&#8217;t do multi-page docs without a struggle.  Stone Create serves as a sort of <strong>InDesign-lite</strong>, and it is fast and efficient with long documents.  Depending on the work, I will create PDF deliverables from Create or migrate the UI&#8217;s I design in Create into other apps like Google Sites.</p>
<p style="font-size: 13px; line-height: 19px;">Create supports <strong>master pages</strong>.  I might have one master page with a basic footer information, and another for a 1024-pixel-wide browser frame.</p>
<p style="font-size: 13px; line-height: 19px;">Create helps you design better because it <strong>facilitates experimentation</strong>.  I can pump out several variants of a design in a flash.  Just duplicate the page and tweak, duplicate and tweak.  Page up and page down to flip between them and compare.  Then delete the pages with dumb ideas before anyone else sees them.  It&#8217;s the envy of any designer who must keep track of which combination of layers and folders are needed for which version of the design.</p>
<p style="font-size: 13px; line-height: 19px;">The same feature lets you illustrate <strong>UI walk-throughs</strong> really easily.  Duplicate the page and tweak it to show the next state, and keep going.  Last week, I whipped up a walkthrough in 15 minutes after a whiteboard brainstorming session with a colleague.  It was convincing enough that he though it was a functioning prototype!</p>
<p style="font-size: 13px; line-height: 19px;">I also use Create as a <strong>scrapbook app</strong>.  During discovery, I&#8217;ll walk through existing UIs or those of competitors, collecting and annotating screenshots for future reference.  I can intermix these screenshots with designs as needed.</p>
<p style="font-size: 13px; line-height: 19px;">Create lets you hook up  <strong>click-through prototypes</strong> by linking objects or runs of text to other pages.  The pages can then be exported to HTML pages to run in anyone&#8217;s browser.  No native runtime client is required other than a web browser.  These quick &amp; dirty prototypes are a viable alternative to fumbling through an actual stack of paper prototypes during early usability testing.</p>
<p style="font-size: 13px; line-height: 19px;">Create is not well-known.  And it definitely still has its quirks to get used to.  But it&#8217;s an inexpensive secret weapon for interaction design.  I&#8217;ve used it for years on dozens of projects, milking the <strong>free lifetime upgrade</strong> policy.  The developer Andrew Stone was so responsive to my feedback that we became friends, and I ended up designing a bunch of interaction design-related refinements to Create.  It&#8217;s now a joy to layout text, arrange things evenly and experiment experiment experiment.  It&#8217;s my workhorse tool for interactive product design.</p>
<p style="font-size: 13px; line-height: 19px;">[ If you order Stone Create, use my super secret <a href="http://www.stone.com/store/shop.pl/page=obvious.htm">Obvious Design/Create discount link</a> for an extra $9 off. ]</p>
<h3 style="font-size: 13px; line-height: 19px;">Favorite tool for <span style="font-size: 13px; line-height: 19px;">brainstorming, mindmapping: <a href="http://inspiration.com/Inspiration">Inspiration</a> <a href="http://www.amazon.com/gp/search?ie=UTF8&amp;keywords=inspiration&amp;tag=stealthisidea-20&amp;index=software&amp;linkCode=ur2&amp;camp=1789&amp;creative=9325"></a><br />
</span></h3>
<p style="font-size: 13px; line-height: 19px;">An oldie, but a goodie.  I have used <a href="http://inspiration.com/Inspiration">Inspiration</a> for over twelve years and consider it my second brain.</p>
<p style="font-size: 13px; line-height: 19px;">Inspiration is like an infinitely sized whiteboard. Click and type to create box there.  Command click and type to create a connected box.  Drag things around and they stay connected.  Links are always under the boxes so they don&#8217;t interfere.  Copy and paste box styles easily.  You don&#8217;t have to think about scale or pagination; the point of these diagrams is to think, not deliver something pretty.  This approach to diagramming for the purpose of thinking is simple, yet it eludes even the elite diagramming apps like OmniGraffle.</p>
<div id="attachment_485" class="wp-caption aligncenter" style="width: 510px"><a href="http://stealthisidea.com/wp-content/uploads/2008/12/inspiration.jpg"><img class="size-full wp-image-485" title="inspiration" src="http://stealthisidea.com/wp-content/uploads/2008/12/inspiration.jpg" alt="" width="500" height="313" /></a><p class="wp-caption-text">I use Inspiration to articulate issues, brainstorm alternatives and weigh the pros and cons graphically.</p></div>
<p style="font-size: 13px; line-height: 19px;">I use Inspiration to sort out my thoughts before I write an article, solve thick interaction design problems, lay out a <a href="http://en.wikipedia.org/wiki/Work_breakdown_structure">work breakdown structure</a> when planning a project.  Whenever I need to solve a problem that is bigger than my brain (i.e. most problems), Inspiration plus the largest monitor I can plug into are my friends.  Adding speech recognition makes for an even wilder party.  (see below)</p>
<p style="font-size: 13px; line-height: 19px;">Other mindmapping software creates spider diagrams, which the early thinkers of mindmapping advocated.  But to me they are an eyesore, and they miss out on the spatial value of having information clustered where you want them.</p>
<p style="font-size: 13px; line-height: 19px;">Today Inspiration marketed mostly for educational use.  But do yourself a favor and look past the farm animal graphics.</p>
<p style="font-size: 13px; line-height: 19px;">[<strong>Vision to steal</strong>: Someone, create a multi-user shared virtual whiteboard with stickies and arrows.  Then we could reach the holy grail: the benefits of collaborative <a href="http://stickynoteninja.com/">sticky note processes</a> plus the flexibility and longevity of digital storage and manipulation.]</p>
<p style="font-size: 13px; line-height: 19px;">[ <span style="font-size: 13px; line-height: 19px;"><a href="http://www.amazon.com/gp/search?ie=UTF8&amp;keywords=inspiration&amp;tag=stealthisidea-20&amp;index=software&amp;linkCode=ur2&amp;camp=1789&amp;creative=9325">Inspiration at Amazon.com</a></span> ]</p>
<h3 style="font-size: 13px; line-height: 19px;">Favorite version of Adobe Creative Suite: <a href="http://www.adobe.com/products/creativesuite/">CS4 </a></h3>
<h3 style="font-size: 13px; line-height: 19px;"><a href="http://stealthisidea.com/wp-content/uploads/2008/12/adobe-cs41.jpg"><img class="alignright size-full wp-image-491" title="adobe-cs41" src="http://stealthisidea.com/wp-content/uploads/2008/12/adobe-cs41.jpg" alt="" width="126" height="149" /></a></h3>
<p>That every product designer just needs Photoshop and Illustrator (and maybe Flash and Dreamweaver and InDesign) is a given.  It&#8217;s not a question of whether a designer should have the CS suite, but of which version.  <a href="http://www.adobe.com/products/creativesuite/">CS4</a> is a highly regarded upgrade and it&#8217;s working for me.</p>
<p>Incidentally, Adobe has been trying to reposition Fireworks (which came with Adobe&#8217;s acquisition of Macromedia) as a rapid prototyping tool.  I tried it, and I just don&#8217;t buy it.  The emphasis is on one page at a time, it doesn&#8217;t let you spawn five variants to experiment with, and Fireworks still feels like you are dealing with pixels rather than menus, lists, tables and labels.  I can run circles around Fireworks productivity with <a href="http://www.stone.com/Create/Create.html">Stone Create</a>.</p>
<p>[ <span style="font-size: 13px; line-height: 19px;"><a href="http://www.amazon.com/gp/search?ie=UTF8&amp;keywords=adobe%20creative%20suite&amp;tag=stealthisidea-20&amp;index=software&amp;linkCode=ur2&amp;camp=1789&amp;creative=9325">Adobe CS4 at Amazon.com</a><img style="border:none !important; margin:0px !important;" src="http://www.assoc-amazon.com/e/ir?t=stealthisidea-20&amp;l=ur2&amp;o=1" border="0" alt="" width="1" height="1" /> </span> ]</p>
<h3 style="font-size: 13px; line-height: 19px;">Favorite tool for documenting designs: <a href="http://sites.google.com/"><strong style="font-size: 13px; line-height: 19px;">Google Sites</strong></a></h3>
<p style="font-size: 13px; line-height: 19px;"><a href="http://stealthisidea.com/wp-content/uploads/2008/12/google-sites.png"><img class="alignright size-full wp-image-487" title="google-sites" src="http://stealthisidea.com/wp-content/uploads/2008/12/google-sites.png" alt="" width="130" height="47" /></a>Even with agile processes, designs still must be communicated from designer to developer, and to QA and to the docs people.  Documentation is needed.  For years I sent around PDF documents with documentation.  But this year Google Sites changed how I work.</p>
<p style="font-size: 13px; line-height: 19px;"><a href="http://sites.google.com/">Google Sites</a> represents a shift in the basic paradigm of how information is created and shared in a work environment, that is difficult to understand without living through.  In the old world of MS Office and Word documents, we&#8217;d labor away in our caves to create a document as near to perfect as we could get it, then solicit and incorporate feedback, and repeat.  It was slow.  Versioning was an issue.  Documents were shared haphazardly, by paper, email or on a file server available only to people on the right LAN with the right passwords.  They were islands of information that could not be linked to from other places.  Locating related prior work was nearly impossible, so wheels were reinvented.</p>
<p style="font-size: 13px; line-height: 19px;">Evolved wikis like Google Sites represent a new world.  Instead of the perfect -&gt; publish -&gt; iterate cycle, partial, incomplete works are available constantly, instantaneously and globally.  They are searchable and linkable so old works can be found and referenced.  Input and refinements can happen during the formative stages, not after something has reached a &#8220;publishable&#8221; state.  That&#8217;s why I like using Google Sites for specs.</p>
<p style="font-size: 13px; line-height: 19px;">I will typically have one table of contents page leading to mini-specs for each feature.  They are hyperlinked to each other as needed.  Graphics integration is pretty smooth: I can drag graphics directly from Stone Create into the image upload dialog.  Reviewers can comment on each page.  When I see a UI issue in the build I can report it in the bug database and copy and paste the text into the spec, so it is always up to date for QA and publications.  Versioning is automatic, so we don&#8217;t have to worry about losing old information (not that we ever go back to it).</p>
<p style="font-size: 13px; line-height: 19px;">The big issue with Google Sites is that you have to trust your data to Google.  An internally-hosted Wiki with Google&#8217;s level of refinement would be even better. [There are million wikis out there.  Readers, got any favorites that really work?]</p>
<h4>Favorite text editor and note taker:  TextEdit</h4>
<h4><a href="http://stealthisidea.com/wp-content/uploads/2008/12/textedit.jpg"><img class="alignright size-medium wp-image-508" title="textedit" src="http://stealthisidea.com/wp-content/uploads/2008/12/textedit.jpg" alt="" width="120" height="116" /></a></h4>
<p>TextEdit has a tiny footprint, is powerful enough for note taking, and deals well with graphics.  It&#8217;s stable and fast.  The humble text editor that ships with all Macs is almost always open on my Mac with half a dozen documents in the works.</p>
<p>I&#8217;ve tried many note-taking and information organization apps.  (Honorable mention goes to <a href="http://flyingmeat.com/voodoopad/">VooDooPad</a>.)  But plain old TextEdit documents, prefixed with the date in YYMMDD format, in the appropriate project folder in the Finder, fully searchable with <a href="http://en.wikipedia.org/wiki/Spotlight_(software)">Spotlight</a> is the simple, reliable solution that I fell back on without even realizing it</p>
<p>And there you have my preferred tools of the interactive product design trade.  I&#8217;m always open to improved workflow, so please share your favorite solutions, and let me know if you have any questions about my recommendations.</p>
<p><em>[Update 5/26/09:  I drank the Kool Aid and am now addicted to <strong><a href="http://www.devon-technologies.com/products/devonthink/">DevonThink Pro</a></strong> as a general note taker and snippet database.  It's hard to get how useful and important such a tool is until you have used it.  The functionality should be built into the OS.</em></p>
<p><em>I am also using <strong><a href="http://www.literatureandlatte.com/scrivener.html">Scrivener</a></strong> to compose, organize and write long articles and the book.  Simple and wonderful.  It's what Word would have become 15 years ago, had Microsoft realized that writers need word processors to help them think.]<br />
</em></p>
<p>&#8212;</p>
<p>Philip Haine is a product designer and product vision specialist. He founded <a href="http://obviousdesign.com">Obvious Design, LLC</a> in San Francisco in 1997.  His other blog on product vision can be found at <a href="http://ProductVision.org">ProductVision.org</a>.  You can follow his high signal-to-noise ratio thought stream on Twitter <a href="http://twitter.com/dphaine">@dphaine</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/design-tools/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>Distinguishing windows that look too similar</title>
		<link>http://stealthisidea.com/articles/finder-colorization/</link>
		<comments>http://stealthisidea.com/articles/finder-colorization/#comments</comments>
		<pubDate>Sat, 13 Dec 2008 17:23:24 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Commentary]]></category>
		<category><![CDATA[Designs to Steal]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/?p=470</guid>
		<description><![CDATA[20 years later, it's still hard to find the right window in a stack strewn across the desktop]]></description>
			<content:encoded><![CDATA[<p>Here is another UI issue that is almost as old as the Mac itself.  Windows of the same ilk are so visually consistent to each other that when they are strewn across the desktop it&#8217;s difficult to find which one you are looking for.</p>
<p><a href="http://stealthisidea.com/wp-content/uploads/2008/12/finder-before.png"><img class="aligncenter size-full wp-image-471" title="finder-before" src="http://stealthisidea.com/wp-content/uploads/2008/12/finder-before.png" alt="" width="400" height="337" /></a></p>
<p>There is no immediate visual cue that lets you scan for the project folder you want; you have to click through each and see its title and what&#8217;s in it.  The problem is exacerbated with today&#8217;s huge monitors, because you can have so many more windows open at once.  <a href="http://en.wikipedia.org/wiki/Expos%C3%A9_(Mac_OS_X)">Exposé</a> kindly splays them out for examination, but it&#8217;s still work to go through them.</p>
<p>This is an example of when consistency can go wrong (and why consistency does not equal usability).  In this case, too much consistency among Finder windows has suppressed important information, namely what is what.</p>
<p>The solution is pretty clear: find a user-definable way to customize the look of a window as it appears in the Finder.  There are many possible ways to do this.  One (fairly boring) way is to let the user change the color of the striping.</p>
<p><a href="http://stealthisidea.com/wp-content/uploads/2008/12/finder-after.png"><img class="aligncenter size-full wp-image-472" title="finder-after" src="http://stealthisidea.com/wp-content/uploads/2008/12/finder-after.png" alt="" width="400" height="337" /></a></p>
<p>In the above example, the two greenish windows are really for the same project.  (You probably did not notice this in the first screenshot.) The front most is another, and the purple one sticking out the side is another.</p>
<p>Readers, what other methods of distinguishing a bunch of Finder windows might work?  Change the chrome color?  Apple already lets you set background images to folders, but only in icon mode (and when is icon mode used, except for software installers?).  Might a big, scalable background image work?</p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/finder-colorization/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Using gestures and voice for access to key tasks on a mobile device</title>
		<link>http://stealthisidea.com/articles/gestures-and-voice/</link>
		<comments>http://stealthisidea.com/articles/gestures-and-voice/#comments</comments>
		<pubDate>Fri, 14 Nov 2008 20:50:37 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Commentary]]></category>
		<category><![CDATA[Designs to Steal]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/?p=459</guid>
		<description><![CDATA[How might the iPhone afford direct access to key apps and tasks without defiling its exterior with another dastardly button?]]></description>
			<content:encoded><![CDATA[<p>My rant from a few months ago about the <a href="http://stealthisidea.com/articles/palm-vs-iphone/">inefficiency of the iPhone calendar</a> application continues to strike a chord.</p>
<p>One of the things I criticized was how many steps it takes just to navigate to the calendar in order to check, tweak, or add an appointment.  On the iPhone it ranges from 3 to 7 steps, with some of those being heavyweight steps that pull eyes and your attention of other things.  On the ancient PalmPilot and its newer descendants, it is one button press.  Extremely frequent task was rightfully given top-tier treatment, with a physical button on the device.</p>
<p>But Apple <a href="http://stealthisidea.com/articles/trackpad-as-butto/">isn&#8217;t really</a> <a href="http://stealthisidea.com/articles/buttonphobia/">into buttons</a>. (Nor are they into <a href="http://www.macworld.co.uk/news/index.cfm?NewsID=8858">acknowledging</a> that the iPhone is really <a href="http://www.macobserver.com/article/2003/06/05.9.shtml">more</a> of a <a href="http://www.geek.com/articles/mobile/steve-jobs-on-pdas-how-useful-are-they-2001115/">PDA</a> than it is a phone.)</p>
<p>Can we have our cake and eat it too?  Can we have direct access to key tasks while also accommodating Apple&#8217;s pathological aversion to real buttons?  Buttons that you can actually find without looking at the device, which are always available, regardless of the mode you are in, and which have the gratifying <a href="http://en.wikipedia.org/wiki/Haptic">haptic</a> feedback of&#8230; clicking?</p>
<p>Here&#8217;s one way: from the iPhone&#8217;s &#8220;slide to unlock&#8221; screen (or even from standby mode) <strong>let the user jump directly to an app by drawing a gesture</strong>.  C for calendar, M for mail, F for facebook.  It would be configurable.</p>
<p>Gestures could go deeper than just launching apps and get you to most used tasks.  Draw an A to create a new appointment.  Draw a T to go to today.  Each apps could publish its candidates for direct-access tasks, and the user could assign them to gestures.</p>
<p>Here&#8217;s an even better way to give immediate access to key tasks without buttons: <strong>make voice recognition the main way to get to most frequent tasks</strong>.  Press a physical &#8220;listen to me&#8221; button and say, &#8220;Go to today&#8221; or &#8220;new appointment for next Thursday at 5:30 pm&#8221; or &#8220;Call Leslie&#8221; or &#8220;new contact&#8221; or &#8220;Address book find Edwin&#8221; or &#8220;Facebook&#8221;  or &#8220;Yelp nearby sushi&#8221; or &#8220;Montreal weather&#8221; or &#8220;Apple stock price&#8221;.  These were scenarios I painted several years ago.  Now they are starting to take shape <a href="http://www.nytimes.com/2008/11/14/technology/internet/14voice.html">at Google</a> and with iPhone add-ons like <a href="http://www.appcraver.com/say-who-iphone/">Say Who</a> (which actually works well) and <a href="http://iphoneapppodcast.com/say-where-iphone-app-review">Say Where</a> (which doesn&#8217;t work as well yet).</p>
<p>A good implementation of voice command would suddenly make all that iPhone goodness a heck of a lot more efficient.  It could be a key part of an iPhone-neutralizing device.</p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/gestures-and-voice/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Apple makes the trackpad a mouse button</title>
		<link>http://stealthisidea.com/articles/trackpad-as-butto/</link>
		<comments>http://stealthisidea.com/articles/trackpad-as-butto/#comments</comments>
		<pubDate>Wed, 15 Oct 2008 20:52:38 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Commentary]]></category>
		<category><![CDATA[Critique]]></category>
		<category><![CDATA[Designs to Steal]]></category>
		<category><![CDATA[Apple]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/?p=430</guid>
		<description><![CDATA[ All kinds of potential goodness snuck in when Apple made the touchpad clickable.]]></description>
			<content:encoded><![CDATA[<p>Well, Apple&#8217;s laptop introduction yesterday was an incremental step forward. The devices look great, but any <a href="http://stealthisidea.com/articles/future-lapto/">leap forward in laptops</a> will have to wait.</p>
<p>They did do something subtle and brilliant, though. I&#8217;ve been moaning for decades about the <a href="http://stealthisidea.com/articles/buttonphobia/">absence of a proper second mouse button</a> on Apple&#8217;s computers. With the new MacBooks, Apple found a way to add a second button without desecrating the precious industrial design. The track pad itself is a real, physical, press-it-and-it-clicks button. Press it with one finger and it&#8217;s a regular click. Press with two fingers for the right-click operations.  (There&#8217;s a chance that there will be a lot of false right clicks, if the user fails to assiduously lift all other fingers before clicking. Something to look out for.)</p>
<p>Another great side effect of combining the mouse button with a multi-touch panel is that it greatly simplifies clicking and dragging when using a trackpad.  Before, this was a two-handed operation, one hand pressing and holding the button, and the other one doing the drag.   Now, the user can press and drag with one finger.  It&#8217;s more direct, and it neutralizes one of the advantages of an external mouse, which had this capability ever since <a href="http://en.wikipedia.org/wiki/Doug_Englebart">Englebart&#8217;s</a> day.</p>
<p>Combining the mouse button with a multi-touch panel has other potential.  Double-clicking, still difficult for many users, can go away: instead, click with three fingers. Triple clicking was always pretty ridiculous, but the equivalent, click with four fingers, is more tolerable.  You can zoom, pan, change the volume, scrub a video, by pressing with multiple fingers and dragging horizontally, vertically or diagonally.  These are my off-the-cuff thoughts, not what&#8217;s been announced.  <a href="http://www.apple.com/macbook/features.html">Apple says</a>:</p>
<blockquote><p>The amazing new trackpad doubles as a button — just press down anywhere and consider it clicked. No separate button means there’s 39 percent more room for your fingers to move on the silky glass surface. Now that Multi-Touch gestures have come to MacBook, all the function is in your fingers. Use two fingers to scroll up and down a page. Pinch to zoom in and out. Swipe with three fingers to flip through your photo libraries. Rotate to adjust an image with your fingertips. Using the new four-finger swipe gesture, swipe up or down to access Exposé modes and left or right to switch between open applications. If you’re coming from a right-click world, you can right-click with two fingers or configure a right-click area on the trackpad. The more you use the Multi-Touch trackpad, the more you’ll wonder what you ever did without it.</p></blockquote>
<p>(By the way, is it possible to use a stylus with the conductive glass touchpad?)</p>
<p>There&#8217;s only one little issue.  Most of us use our laptops on a desk, right?  And most of the time when working at a desk a mouse is still preferable, right?   So all this track pad goodness is only an occasional benefit, until the future mouse is invented. [Update 10/21/09 <a href="http://stealthisidea.com/articles/apple-magic-mouse/">The future mouse has been invented</a>.]</p>
<h4>See also</h4>
<ul>
<li><a href="http://stealthisidea.com/articles/tilt-mouse/">Panning &amp; scrolling with a mouse by tiltin</a>g</li>
<li><a href="http://stealthisidea.com/articles/apple-magic-mouse/">The irony of Apple&#8217;s Magic Mouse</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/trackpad-as-butto/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>A vision for a future laptop</title>
		<link>http://stealthisidea.com/articles/future-lapto/</link>
		<comments>http://stealthisidea.com/articles/future-lapto/#comments</comments>
		<pubDate>Mon, 13 Oct 2008 16:46:46 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Commentary]]></category>
		<category><![CDATA[Designs to Steal]]></category>
		<category><![CDATA[Apple]]></category>
		<category><![CDATA[industrial design]]></category>
		<category><![CDATA[laptops]]></category>
		<category><![CDATA[notebooks]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/?p=426</guid>
		<description><![CDATA[How might the laptop form factor evolve?]]></description>
			<content:encoded><![CDATA[<p>Apple is about to announce some new laptops. This could either be very boring, or very exciting, depending on whether it&#8217;s time for Apple to make another great leap forward.</p>
<p>In advance, I thought I would throw out some possibilities of how a great leap forward might look.</p>
<p>The entire computer is in the display portion of the laptop. Is detachable from the keyboard section.  The tablet functions as a stand-alone tablet computer for mobile use: an iPhone, but bigger.  The tablet weighs less than the MacBook Air. It has the same <a href="http://en.wikipedia.org/wiki/Touchscreen#Capacitive">capacitive</a> touchscreen as the iPhone, and a similar on-screen keyboard when needed. It is transported with a protective shell/cover (which is also a keyboard).  The tablet operates in landscape or portrait mode. A stylus is tucked away for sketching and painting.  The tablet section can be plugged in for power.</p>
<p>For desk use, there is a &#8220;kickstand&#8221; built in to the back of the tablet, possibly hinging open in both portrait or landscape (Apple is more likely to commit to just one, landscape).  Mouse and keyboard operate via Bluetooth. There is only one wire involved, the power cable to the tablet.  To use it on your desk, you just have to stand it up, plug it in for power and start typing and mousing.</p>
<p>(Sooner or later we will have wireless connections to displays. In this scenario, you can come to your desk, stand the tablet up and plug in or dock it, and then start computing away on your 30 inch monitor, keyboard, and mouse.)</p>
<p>For heavy duty computing, the tablet can be docked to the keyboard section at the hinge.  The keyboard section resembles the bottom of traditional laptop.  It includes a complement of ports for desktop use. The keyboard section also includes a second battery to extend the charge, and to cantilever the top-heavy display.   (Hopefully this would mean that the keyboard section could support the weight of the display, for airplane use.)  The two sections close like a regular laptop.</p>
<p>In an alternate embodiment, the keyboard section is thin and lightweight, and serves as a cover to the tablet for transport.  The tablet has minimum traditional ports, but it does have a fat docking connector.  For desktop use, the tablet is is docked into a hinged stand that provides power and a communication bus.  Peripheral ports are on the dock. The docs may or may not include the keyboard and touchpad.</p>
<p>The tablet portion may alternately be laid flat to use as a graphics tablet with a display behind it.  Great for designers or artists.</p>
<p>I don&#8217;t know if the mechanical or technological challenges of this approach are yet achievable, but let&#8217;s see what tomorrow brings, shall we?</p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/future-lapto/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>4 Ways to Improve Saving Documents</title>
		<link>http://stealthisidea.com/articles/gui-titlebar-tweaks/</link>
		<comments>http://stealthisidea.com/articles/gui-titlebar-tweaks/#comments</comments>
		<pubDate>Fri, 26 Sep 2008 23:35:51 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Commentary]]></category>
		<category><![CDATA[Designs to Steal]]></category>
		<category><![CDATA[Apple]]></category>
		<category><![CDATA[gui]]></category>
		<category><![CDATA[titlebars]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/?p=406</guid>
		<description><![CDATA[Even UI designs as old as the Save dialog and the window titlebars have room for improvement.]]></description>
			<content:encoded><![CDATA[<p style="font-size: 13px; line-height: 19px;">Here are some ways to improve the interaction design of GUI titlebars and saving documents, a 25 year old design problem.</p>
<p style="font-size: 13px; line-height: 19px;">
<h3 style="font-size: 15.2111px; line-height: 19px;">1. Directly rename a document from the titlebar</h3>
<p style="font-size: 13px; line-height: 19px;">You just realized that the document you are working on is really about something else.  The original title was wrong, and now you need to rename it.  Go.</p>
<p style="font-size: 13px; line-height: 19px;">In the old days (ie. today), you had to locate the document in the Finder and rename it there.  It&#8217;s a good idea to close the document first, because some apps complain when you move or rename them while open.  So you locate the original document, close it back in the source app, rename it in the Finder, then re-open it.  It&#8217;s about seven steps including all the switching between the Finder and the app.  What a drag!</p>
<p style="font-size: 13px; line-height: 19px;">Here&#8217;s a new way:</p>
<div class="wp-caption aligncenter" style="width: 594px"><img title="Mac OS X titlebar" src="/wp-content/gui-titlebar-tweaks/step1.png" alt="" width="584" height="61" /><p class="wp-caption-text">1. Activate the titlebar (click &amp; pause or double-click it)</p></div>
<p style="font-size: 13px; line-height: 19px; text-align: center;"><br style="font-size: 13px; line-height: 19px;" /></p>
<div class="wp-caption aligncenter" style="width: 594px"><img title="GUI titlebar editing" src="/wp-content/gui-titlebar-tweaks/step2.png" alt="" width="584" height="61" /><p class="wp-caption-text">2. It lighlights</p></div>
<p style="font-size: 13px; line-height: 19px; text-align: left;"><span id="more-406"></span><br style="font-size: 13px; line-height: 19px;" /></p>
<div class="wp-caption aligncenter" style="width: 594px"><img title="Renaming a document from its titlebar" src="/wp-content/gui-titlebar-tweaks/step3.png" alt="" width="584" height="61" /><p class="wp-caption-text">3. Rename it</p></div>
<div class="wp-caption aligncenter" style="width: 594px"><img title="Document renamed form its titlebar" src="/wp-content/gui-titlebar-tweaks/step4.png" alt="" width="584" height="61" /><p class="wp-caption-text">3. Click elsewhere to deselect and commit the change</p></div>
<p style="font-size: 13px; line-height: 19px;">Ahhh.  That&#8217;s better.<br style="font-size: 13px; line-height: 19px;" /></p>
<p style="font-size: 13px; line-height: 19px;"><br style="font-size: 13px; line-height: 19px;" /></p>
<h3 style="font-size: 13px; line-height: 19px;">2. Move a document by dragging its mini-icon</h3>
<p style="font-size: 13px; line-height: 19px;">The Mac OS is nice enough to let me drag a mini-icon of a saved document from its titlebar.  Press and hold on the little icon, then start dragging to create an alias.  To make a copy instead of an alias. press shift or Cmd or Option (I STILL have to experiment) to get a &#8220;+&#8221; sign.</p>
<div class="wp-caption aligncenter" style="width: 382px"><img title="Today, you can make an alias (left) or a copy (right) by dragging from the titlebar icon" src="/wp-content/gui-titlebar-tweaks/drag-today.png" alt="Today, you can make an alias (left) or a copy (right) by dragging from the titlebar icon" width="372" height="110" /><p class="wp-caption-text">Today, you can make an alias (left) or a copy (right) by dragging from the titlebar icon</p></div>
<p style="font-size: 13px; line-height: 19px;">However, say you had quickly saved the file in some random place just to save it.  You were in a rush, or you didn&#8217;t want to lose your train of thought, or you were trying to quit the app, or you weren&#8217;t sure where to put it.  But now it&#8217;s time to put it in the right spot.  You will have to forget that dragging goodness; you need to dig out the document in the Finder and drag the icon to its new home the old fashioned way.</p>
<p style="font-size: 13px; line-height: 19px;">Two observations: First, why shouldn&#8217;t you be able to move a document using its titlebar mini-icon?  Second, those modifier keys have been with us since the 80&#8242;s.  They&#8217;re hard to discover and remember and a pain for the throngs of PC migrants to learn.  How about a more overt UI?</p>
<p style="font-size: 13px; line-height: 19px;">How about this: provide an in-place menu at the destination of the drag, with options to copy, move, or make an alias:</p>
<div class="wp-caption aligncenter" style="width: 485px"><img title="Drag out from the titlebar" src="/wp-content/gui-titlebar-tweaks/dragout1.gif" alt="1. Drag out from the titlebar, possibly with a modifier key or using the right mouse button." width="475" height="166" /><p class="wp-caption-text">1. Drag out from the titlebar, possibly with a modifier key or using the right mouse button.</p></div>
<div class="wp-caption aligncenter" style="width: 485px"><img src="/wp-content/gui-titlebar-tweaks/dragout2.jpg" alt="2. Select what you would like to do with the explicit menu" width="475" height="166" /><p class="wp-caption-text">2. Select what you would like to do with the explicit menu</p></div>
<p style="font-size: 13px; line-height: 19px;">This menu could be <a href="http://en.wikipedia.org/wiki/Pie_menu">pie menu</a> or a regular vertical menu.  It could open with a modifier key or when dragging with the right mouse button (a good idea that is in Windows).  Either way, it would permit moving and would be easier to learn.</p>
<p style="font-size: 13px; line-height: 19px;"><br style="font-size: 13px; line-height: 19px;" /></p>
<h3>3. Allow saving of untitled documents by dragging the icons.</h3>
<p style="font-size: 13px; line-height: 19px;">Curiously, untitled documents don&#8217;t have a titlebar icon to drag:</p>
<div class="wp-caption aligncenter" style="width: 524px"><img src="/wp-content/gui-titlebar-tweaks/untitled.png" alt="Unsaved documents dont have a mini-icon" width="514" height="59" /><p class="wp-caption-text">Unsaved documents don&#39;t have a mini-icon</p></div>
<p style="font-size: 13px; line-height: 19px;">This is surprising since this is when I need it the most.  I have my project folder open, I have my document folder open.  I need to put the document into the folder.  Alas, no dragging allowed. I have to go through the darned File/Save dialog even though the objects I need are right in front of me.</p>
<p style="font-size: 13px; line-height: 19px;">Why not put the mini-icon in the title bar as usual, let the user drag it to the Finder, and prompt for its name?  It would be a lot faster and more direct.</p>
<p style="font-size: 13px; line-height: 19px;">You could even tie this in with <a href="http://en.wikipedia.org/wiki/Expos%C3%A9_(Mac_OS_X)">Exposé</a>, to minimize the amount of advance window shuffling required:  Start dragging, then invoke Exposé to splay out the Finder windows, then drop into the appropriate Finder window. Provide a name, and you&#8217;re done.  Much faster than futzing with that File/Save dialog.</p>
<p style="font-size: 13px; line-height: 19px;">
<p style="font-size: 13px; line-height: 19px;">
<p style="font-size: 13px; line-height: 19px;">
<h3 style="font-size: 13px; line-height: 19px;">4. Make the File-&gt;Save dialog Finder-aware</h3>
<p style="font-size: 13px; line-height: 19px;">I haven&#8217;t tried to work out the exact rules, but all I know is that when I want to save an unsaved document, or when I want to do a Save As of an existing document, the File-&gt;Save dialog rarely guesses the right folder to save to.</p>
<p style="font-size: 13px; line-height: 19px;">Can we make the File-&gt;Save dialog a bit smarter?</p>
<ul>
<li>When doing a <strong>Save As</strong>, default to the folder of the original file.</li>
<li>When doing a <strong>Save for the first time</strong>, default to the frontmost Finder window.</li>
</ul>
<p style="font-size: 13px; line-height: 19px;">(I know there are utilities to help with them but last I checked they were quirky, ugly, and excessive.)</p>
<p style="font-size: 13px; line-height: 19px;">Saving files is an old and fundamental GUI problem, but we can still teach the dog some new tricks.</p>
<p style="font-size: 13px; line-height: 19px;">If you know someone who can do something about these, please pass this link along.  The permanent link for this post is:<strong> http://stealthisidea.com/articles/gui-titlebar-tweaks</strong></p>
<p style="font-size: 13px; line-height: 19px;"><br style="font-size: 13px; line-height: 19px;" />Related posts:<br style="font-size: 13px; line-height: 19px;" /></p>
<ul>
<li><a href="/articles/alt-tab-tweak/">Bring related windows forward during Alt-Tab</a></li>
<li><a href="/articles/060105_offset_browser_windows/">Making efficient use of big displays</a></li>
</ul>
<p style="font-size: 13px; line-height: 19px;">&#8212;&#8211;</p>
<p style="font-size: 13px; line-height: 19px;">Philip Haine is a product vision specialist and interactive product designer.  He founded <a href="http://obviousdesign.com">Obvious Design, LLC</a> in San Francisco in 1997.<br style="font-size: 13px; line-height: 19px;" /></p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/gui-titlebar-tweaks/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Idea (partially) stolen: Tilt-to-Scroll</title>
		<link>http://stealthisidea.com/articles/tilt-to-scroll/</link>
		<comments>http://stealthisidea.com/articles/tilt-to-scroll/#comments</comments>
		<pubDate>Thu, 04 Sep 2008 01:50:39 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Commentary]]></category>
		<category><![CDATA[Research Topics]]></category>
		<category><![CDATA[Stolen Ideas]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/?p=369</guid>
		<description><![CDATA[Tilt an iPhone to scroll]]></description>
			<content:encoded><![CDATA[<p>In April 2007 I threw out the idea of <a href="/articles/tilt-mouse/">tilting a mouse to pan or scroll</a> a document horizontally.</p>
<p>Looks like <a href="http://lonelysandwich.com/post/48198569/tilt-scrolling-instapaper-pro">someone implemented this concept</a> on the iPhone.  Click in to see a video.</p>
<p>Now we need a mouse manufacturer, or a university lab to design a mouse which does the same thing.</p>
<p>(By the way, when I say ideas documented here are &#8220;stolen&#8221; I&#8217;m kidding.  Different people walking down the same exploratory path will arrive at similar ideas.)</p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/tilt-to-scroll/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>1995 Palm calendar creams the 2008 iPhone&#8217;s</title>
		<link>http://stealthisidea.com/articles/palm-vs-iphone/</link>
		<comments>http://stealthisidea.com/articles/palm-vs-iphone/#comments</comments>
		<pubDate>Thu, 07 Aug 2008 09:00:10 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Analysis]]></category>
		<category><![CDATA[Commentary]]></category>
		<category><![CDATA[Critique]]></category>
		<category><![CDATA[Great Designs]]></category>
		<category><![CDATA[Product Design]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/?p=117</guid>
		<description><![CDATA[The iPhone has a few things to learn from its grandpa.]]></description>
			<content:encoded><![CDATA[<p>Let me just start off by saying, I think the iPhone is close to being a masterpiece.  I am blown away by the imagination and quality it exhibits.  Way to go, Apple designers; please get in touch with me and let me take you out to lunch.</p>
<p>That said, I&#8217;m disappointed in some of its designs.  The particular object of my ire is the <strong>calendar app</strong>.  The <a href="http://en.wikipedia.org/wiki/Pilot_1000">Palm 100</a> calendar UI from 1995 laps it in terms of moment-to-moment usage.  In this article I want to show how a thirteen year old UI designed for a 160&#215;160 pixel, monochrome display on a cheap, slow CPU is so much more effective than a 2008 iPhone with a larger, high-res screen and fast CPU.</p>
<p><span id="more-117"></span></p>
<p>Here is a real-world example of what I mean.  When I have a tentative appointment, I append a question mark to show that it isn&#8217;t confirmed.  For example: &#8220;Dinner with Rich?&#8221;  Later, when the appointment is confirmed, I will removed the question mark.  Here&#8217;s how to remove that question mark on every Palm device from the first <a href="http://en.wikipedia.org/wiki/Palm_Pilot">PalmPilot</a> to the latest <a href="http://www.palm.com/us/products/smartphones/centro/">Palm Centro</a>:</p>
<ol>
<li>Tap at the end of the appointment text, to place the cursor there</li>
<li>Press (or <a href="http://en.wikipedia.org/wiki/Graffiti_(Palm_OS)">gesture</a>) backspace</li>
</ol>
<p>That is it.  Two steps and you are done.  You can now turn off the device or navigate away to some other task.  The direct manipulation is similar to how you might do it with a paper agenda.</p>
<p>Now, here is how you remove that question mark on the iPhone 3G:</p>
<ol>
<li>You can&#8217;t edit the appointment text from the day view, so tap it to open it up in the &#8220;Event&#8221; details screen.</li>
<li>Well you can&#8217;t edit the text here either, so tap the &#8220;Edit&#8221; button in the top right corner</li>
<li>Unfortunatly the &#8220;Edit&#8221; view doesn&#8217;t let you edit.  Instead it shows the components of the appointment.  Go ahead and tap the event name to tell the iPhone you want to edit it.</li>
<li>You are now in the &#8220;Title &amp; Location&#8221; field with the cursor blinking on the appointment, with the on-screen keyboard shown.</li>
<li>Press backspace.</li>
<li>Press Save to get back to the &#8220;Edit&#8221; screen</li>
<li>Press Done to get back to the &#8220;Event&#8221; screen</li>
<li>Press the back button at the top left corner (labeled with the Date)</li>
</ol>
<p>Them&#8217;s a lot of steps.  And a lot of modes.  And a lot of thinking to do an every day task.  <strong>Four times as many steps</strong> as the 1995 Palm.  This design conduct is unbecoming of an Apple product.</p>
<p>This is not an obscure task.  We are not changing some technical configuration on a one-time basis.  We are making an adjustment to the title of an event.  It&#8217;s the sort of thing that everyone who uses the calendar needs to do all the time.  No excuses here: <strong>common, frequent tasks should be the most streamlined</strong>.</p>
<p>And it&#8217;s not just this task.  <strong>Creating a typical appointment</strong> on the Palm takes two steps versus about ten steps on the iPhone.  <strong>Five times</strong> more steps.  (And that is being generous with the horrendous spinning slot-machine style time picking UI.)</p>
<p>Palm, and in particular the guys chiefly responsible for its UI design, <a href="http://www.designinginteractions.com/interviews/RobHaitani">Rob Haitani</a> and <a href="http://en.wikipedia.org/wiki/Jeff_Hawkins">Jeff Hawkins</a>, understood that for a PIM device to replace the reliable, always-on paper-based planner, it would have to be  simple, direct and fast.  When you are trying to capture an appointment while on the phone, only a sliver of your attention is available to spend on the UI.  The Palm&#8217;s UI is direct enough that you can do it during a conversation.  With an iPhone, you&#8217;d better jot it down on paper and transcribe it into the device later if you want to avoid putting your caller on hold mentally.</p>
<p>Here are some other reasons why the old skool Palm&#8217;s calendar laps its young cousin.</p>
<p>In the day view:</p>
<ul>
<li>If you have appointments far apart in the day, the Palm is intelligently <strong>condenses hours of the day</strong>, so you can almost always see all your day&#8217;s appointments without scrolling.  This is important to give you the big picture.  If something is concealed you might very well miss it.  On the iPhone, if you set up an appointment at 7 AM, and another at 7 PM, it&#8217;s possible to look at the day view and completely miss one of them&#8230;or either!  We are talking missed appointments here.  The iPhone tries to help by auto-scrolling as you step between days, but this ostensible bit of cool just adds <a href="/articles/ui-friction/">UI friction</a>.</li>
<li>
<div style="padding: 10px 0pt 10px 15px; float: right; width: 192px;"><img src="/wp-content/palm-vs-iphone/iphone-spinner.jpg" alt="iPhone spinner UI" width="192" height="284" /></p>
<p class="imagecaption">The irritating iPhone slot-machine spinner UI.    Please, just give us a calendar to tap</p>
</div>
<p>To change the a date of an appointment the Palm gives a standard <strong>calendar UI</strong> that you have seen on every travel planning site.  Calendars are tried and true and have some great information visualization benefits.  You get to see where the dates are relative to the week and month and relative to other important dates.  Assigning a new date is a simple matter of tapping on it.  The iPhone instead gives an atrocious spinning slot machine picker.  It provides none of the contextual information and requires a lot of painstaking work to flick to the right date.  It&#8217;s easy to inadvertenly touch something in the wrong column without even knowing it.  I have had several appointments that have been off by hours because of this.  Form gave function a beating the day that one was designed in Cupertino.</li>
</ul>
<p>In the month view:</p>
<ul>
<li>The month view on the Palm shows you roughly how busy you are on each day.  The iPhone shows a dot on each day with an event.  Any event: appointment, birthday, multi-day.  The result is that just about every day has a dot, eliminating any useful information it might convey.</li>
<li>The Palm&#8217;s month view shows multi-day events with a dotted line that spans multiple days.  It shows me when trips are happening or when visitors are in town. The iPhone just gives me that dot on each day, which could just as well be a morning workout appointment as a business trip.  There is no way to distinguish those big multi-day events in the month view.</li>
<li>On the iPhone, when you tap a day of the month, it tries to be helpful by showing the day&#8217;s events in a little pane at the bottom. The problem is, in six-row months like this one (August 2007) there is only enough height to show one appointment.  You are supposed to scroll that little area vertically to see more.  It&#8217;s like looking at your appointments through a straw.  To make matters worse, there isn&#8217;t even an indication of there being more than one appointment.  The scrollbar only appears when scrolling.  If you are checking to see what you are doing on a certain day you must scroll that tiny text area, always. In contrast, the Palm lets you tap on any date to see everything.</li>
</ul>
<p>Furthermore:</p>
<ul>
<li>The Palm has a Go To date function.  You can get to most dates in two or three taps.  It&#8217;s a wonderfully tuned UI.  The iPhone makes you press and hold the Next Month button as it whirrs through the months.  It&#8217;s attention-consuming and clunky by comparison.</li>
<li>On the Palm, you can get to the calendar in one step, even if the device is off, by pressing the calendar button.  Brilliance!  On the iPhone this is three to seven steps which vary depending on the state in which the device was last left, which means you need to pay attention (cf. <a href="http://www.sensible.com/buythebook.html">Don&#8217;t Make Me Think</a>).   [Step 1. Press button on top.  2. Slide finger.  3. Press home if you were in another app. Step 4. Figure out where you are and slide the home screen left or right one or more times to get to the page with the calendar app.  5. Tap in the calendar.  6. Switch calendar modes if necessary.  7. Navigate to today if necessary.]  For a worker who checks her schedule twenty times a day, this makes a difference.  Apple&#8217;s <a href="http://stealthisidea.com/articles/buttonphobia/">buttonphobia</a> undoubtedly makes things look sleek and elegant but it <em>really does hurt, every single day, many times a day</em> to not have direct access to the most frequent and common tasks.  [11/14/08 Update: see some ideas for <a href="http://stealthisidea.com/articles/gestures-and-voice/">instant access without adding buttons</a>.]</li>
<li>The Palm lets you search for an event (&#8220;When is Peggy&#8217;s wedding?&#8221;); the iPhone does not offer this.  This is an important <a href="http://stealthisidea.com/articles/ssnifs/">SSNiF</a> that should be covered.  <em>[6/18/09: iPhone v3.0 software now allows this]</em></li>
<li>Why can&#8217;t you flick left and right to go to adjacent days in the day view, as you do with, say, the photo album?  There is already a left/right spatial paradigm established by the small arrow buttons.  Instead, you have to press those small arrows with your finger, obscuring the screen with your hand in the process.</li>
<li><em>[added 6/18/09] </em> There is no coherence or consistency between the calendar and alarms. The (non-calendar) alarm are more insistent, and therefore reliable, then the calendar reminders.  You get to choose the sound, unlike calendar reminders. (For instance, I use the &#8220;Vrrroom&#8221; sound to remind me of street cleaning times in San Francisco, when I have to move my car.)</li>
<li>[Added 6/18/09] You still cannot create repeating appointments that happen on, say, the second Thursday of the month.  This is basic, required functionality.  iCal on the Mac allows such appointments, but they do not sync to the iPhone.  (At least I don&#8217;t think so&#8230; I&#8217;ve been waiting&#8230; over 30 minutes&#8230; for my iPhone&#8230; to sync&#8230; with iTunes&#8230;)  I anticipate more parking tickets.</li>
</ul>
<p>In this giddy age of hi fidelity UIs, iPhone design team and those trying to emulate them would do well to carefully study the old, low-fi masters.  Get the function right, then make it pretty.  It&#8217;s the Apple way.</p>
<p><em>Please link to this article at: <strong>http://StealThisIdea.com/articles/palm-vs-iphone/</strong></em></p>
<p>See also: <a href="/articles/iphone-love-hate/">iPhone love/hate list</a></p>
<p><em>&#8212;</em></p>
<p><em>Philip Haine is principal of <a href="http://productvision.com/">Product Vision Associates</a>, a product innovation consultancy that helps product leaders and their teams envision new, breakthrough products and reboot older ones.  To follow him on Twitter <a href="http://twitter.com/dphaine">click here</a>.</em></p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/palm-vs-iphone/feed/</wfw:commentRss>
		<slash:comments>91</slash:comments>
		</item>
		<item>
		<title>The Design Pyramid</title>
		<link>http://stealthisidea.com/articles/design-pyramid/</link>
		<comments>http://stealthisidea.com/articles/design-pyramid/#comments</comments>
		<pubDate>Fri, 01 Aug 2008 05:33:15 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Commentary]]></category>
		<category><![CDATA[Design Tools & Resources]]></category>
		<category><![CDATA[Vision Process]]></category>
		<category><![CDATA[Design Process]]></category>
		<category><![CDATA[Design Pyramid]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/articles/design-pyramid/</guid>
		<description><![CDATA[How research, vision and design fit together to make breakthrough products]]></description>
			<content:encoded><![CDATA[<p style="font-size: 13px; line-height: 19px;"><img class="alignright" style="font-size: 13px; line-height: 19px;" src="/wp-content/design-pyramid/design-pyramid.png" alt="Philip Haine's Design Pyramid" width="226" height="211" />Why is great design so elusive?   Why do requirements so often shift late in the game, wasting months of effort and millions of dollars?  Where should we look to come up with breakthroughs product concepts?  And above all, how can we make our design process less chaotic?<br style="font-size: 13px; line-height: 19px;" /></p>
<p style="font-size: 13px; line-height: 19px;">For years, I have sketched out a simple diagram to explain my answers to these types of questions.</p>
<p style="font-size: 13px; line-height: 19px;">This diagram, the <strong>Design Pyramid</strong>, suggests that the design we can see and touch is just the tip of the iceberg.  It is supported by layers of information and prerequisite decisions that are largely invisible to the naked eye.  The four layers of the Pyramid are, from top to bottom: Design, Requirements, Vision, and Understanding.</p>
<p style="font-size: 13px; line-height: 19px;">The key premise of the Design Pyramid is that <strong>each layer can only be as good as those below it</strong>.</p>
<p style="font-size: 13px; line-height: 19px;">The Design Pyramid clarifies why many products and designs fail, and suggests what should be done differently in the product creation process to achieve breakthrough products.</p>
<p style="font-size: 13px; line-height: 19px;">Let&#8217;s go through each layer.</p>
<p style="font-size: 13px; line-height: 19px;"><span id="more-58"></span></p>
<h4>The Design Layer</h4>
<p style="font-size: 13px; line-height: 19px;">The Design layer is simply the solution to a design problem.</p>
<p style="font-size: 13px; line-height: 19px;">The solution takes different form depending on what is being designed.  For software products, the solution includes the user experience architecture, the interactions, conceptual model, and the internal software architecture.  For a process design, the output is a process map.  For public policy, it&#8217;s a legislative bill, and so on.  In all cases, the design is the solution to a functional problem.<br style="font-size: 13px; line-height: 19px;" /></p>
<p style="font-size: 13px; line-height: 19px;"><br style="font-size: 13px; line-height: 19px;" /></p>
<h4>The Requirements Layer</h4>
<p style="font-size: 13px; line-height: 19px;">Design requirements are detailed criteria that describe what the solution must accomplish.  They provide enough detail to give the team concrete guidance for designing and building the product, and for knowing when it is done.</p>
<p style="font-size: 13px; line-height: 19px;">Requirements can sometimes be a big, onerous deal.  When that&#8217;s the case it&#8217;s often because its authors are trying to do more than one thing at at time.  They are trying to write down requirements while they still figuring out the vision for the product.  Trying to do them both at the same time is like trying to paint a room while still deciding on a paint color.  It&#8217;s a lot easier to paint if you only have to worry about painting and not color schemes.</p>
<p style="font-size: 13px; line-height: 19px;">If the vision is flawed, incomplete or not properly thought through, the requirements will be difficult to write.  And they will be bound to shift radically, because the flaws in the vision can&#8217;t be swept under the rug forever.  Eventually they will make themselves known and will force the team to make major course corrections.</p>
<p style="font-size: 13px; line-height: 19px;">When the vision is clear and correct, the requirements fall out easily and are much more stable.</p>
<p style="font-size: 13px; line-height: 19px;">
<p style="font-size: 13px; line-height: 19px;">
<p style="font-size: 13px; line-height: 19px;"><strong>The Vision Layer</strong></p>
<p style="font-size: 13px; line-height: 19px;">If you&#8217;re going to cross the sea in search of riches, it helps to know where you’re going, and it helps to know that where you are going will be a worthwhile destination.</p>
<p style="font-size: 13px; line-height: 19px;">A product&#8217;s vision is like the destination port.  It establishes the direction in which everyone should be paddling.   If the destination is not well-defined, at best, time and energy will be wasted making course corrections.  (If the new direction is chosen by the same means as the original destination, I would start to worry. Who&#8217;s to say that the new destination is much better?)</p>
<p style="font-size: 13px; line-height: 19px;">In the worst case, the ship runs out of supplies and never I makes it.   With a badly chosen destination, the journey has actually failed before it begins.  It couldn&#8217;t have made it no matter how hard everyone paddled.</p>
<p style="font-size: 13px; line-height: 19px;">And so it goes with products: a faulty vision dooms the initiative before it sets off.  When you see requirements shift repeatedly, or when you see a product get canceled just before or after launch, it&#8217;s a sure sign that the vision was fundamentally flawed from the get-go.</p>
<p style="font-size: 13px; line-height: 19px;">How can we translate the idea of product vision in more concrete terms that we can do something with?</p>
<p style="font-size: 13px; line-height: 19px;">Think of it this way.  Any group of customers has not one, but a whole host of needs.  We can&#8217;t possibly solve all of them, especially in the near term.  Before even attempting to solve them, we must first select which needs are worthy of solving, and we need to formulate the set of needs into a cohesive package.</p>
<p style="font-size: 13px; line-height: 19px;">This is the purpose of product vision process.  The vision establishes <a href="http://productvision.org/blog/choosing-the-right-problem-to-solve/">which problems the design should solve</a>.  (This is equivalent to establishing which <a href="http://productvision.org/blog/products-by-needs/">profile of customer needs</a> we should address out of the universe of possibilities.)</p>
<p style="font-size: 13px; line-height: 19px;">That is the vision layer.  Where do the flaws in the vision arise?  They often stem from missing or erroneous assumptions, which reside in the Understanding layer below.</p>
<p style="font-size: 13px; line-height: 19px;">
<h3 style="font-size: 15.2111px; line-height: 19px;">The Understanding Layer</h3>
<p style="font-size: 13px; line-height: 19px;">If the vision is the destination port of the journey, then our Understanding is the map of the seas and ports.  We need the map to peruse our destination options.</p>
<p style="font-size: 13px; line-height: 19px;">This is where the Understanding layer comes in.</p>
<p style="font-size: 13px; line-height: 19px;">The Understanding layer is made up of pretty much any insight that help us come up with a good solution.  That is a pretty broad definition.  In practice, there is a core set of elements that we need to understand no matter what we are designing &#8212; a software product, a business process, a building, or a piece of legislation.  We need:<strong> </strong></p>
<ol>
<li><strong>Understanding of stakeholders:</strong> who the customers and users and others?  How they naturally segment themselves, so we are clear on who needs what?</li>
<li><strong>Understanding their specific <a href="http://stealthisidea.com/articles/ssnifs/">situations and needs</a>:</strong> we need to understand not only what matters to them, but <em>why </em>it matters.  Achieving the &#8220;why&#8221; is what lets us attain the deeper empathy with the stakeholders that lets us put ourselves in their situation.  It&#8217;s what allows us to interpolate and extrapolate beyond what they tell us they need &#8212;  beyond what they may even be capable of telling us &#8212; to what they <em>actually</em> need.  And this is what lets us create things that customers will want, but which they cannot anticipate  (Hint: this is a key source of innovation!)</li>
<li><strong>Understanding of the competition:</strong> It does us little good to address needs that are already <a href="http://productvision.org/blog/satisfy-important-needs/">solved well enough by the competition</a>.  We need to understand where the competition is now and where they are heading.</li>
<li><strong>Understanding of the status quo</strong>:if we are improving on an existing product, we need to get honest and lay bare its limitations, devoid of spin.</li>
<li><strong>Understanding of technology</strong>: Technology is not an end in and of itself.  It&#8217;s a means to addressing important unmet needs.  We need to understand the nature of current and emerging technology so we can connect what is needed by customers with what is possible thanks to technology.</li>
</ol>
<p>How well we understand all of these things determines the upper bound on the quality of our vision.  A shallow understanding begets shallow, unimpressive product visions.  Breakthrough insight leads to <a href="http://productvision.org/blog/hall-of-fame/">breakthrough product vision</a>.</p>
<p>Now that we&#8217;ve touched on all four layers, let&#8217;s use the Design Pyramid to get back to some of the questions I opened with.</p>
<h3>Why is great product design so elusive?</h3>
<p style="font-size: 13px; line-height: 19px;"><strong>Each layer of the Design Pyramid is only as good as those below it</strong>.  If the requirements don&#8217;t make sense, then neither will the design. If the vision is flawed, <strong>the design will be irrelevant</strong>; the product is solving a problem that is unimportant to customers.  If the understanding of customers and their needs is flawed, it will misinform the vision and undermine the whole effort.</p>
<p style="font-size: 13px; line-height: 19px;">Great product design is elusive not because of flaws in the design effort but because of inadequacies at the lower two levels of the Pyramid: Understanding and Vision.</p>
<p style="font-size: 13px; line-height: 19px;">The vision layer gets short shrift in common practice, despite its profound influence on the outcome.  Organizations have teams that are are eager to jump in the boat and get paddling, and they rarely allot time to properly draw a map and chart a course to a worthy destination.</p>
<p style="font-size: 13px; line-height: 19px;">Some organizations do put effort into arriving at breakthrough product visions.  But without clarity on the ingredients, without a good conceptual model and process, the efforts often fall flat.  (This is something I <a href="http://productvision.com/">help clients with</a>!)</p>
<p style="font-size: 13px; line-height: 19px;"><strong>Product vision is the missing discipline in product creation</strong>, and a ripe area to be matured over the next ten years.  (I&#8217;ll have <a href="http://ProductVision.org/blog/">heaps more to say about this</a> in the coming months!)</p>
<p style="font-size: 13px; line-height: 19px;">
<h3 style="font-size: 15.2111px; line-height: 19px;">Where does the Design Pyramid apply?</h3>
<p style="font-size: 13px; line-height: 19px;">The power of the Design Pyramid is that its lessons apply to all types of functional design.</p>
<p style="font-size: 13px; line-height: 19px;">I&#8217;m using the term &#8220;product&#8221; in this article, but <strong>the Design Pyramid also applies to any functional design problem</strong> including interaction design, information architecture, services, database design, new process workflow, retail store layout, public policy, architecture, legislation and more.</p>
<p style="font-size: 13px; line-height: 19px;">All of these type of functional problems have the same intrinsic nature: we need masterful <em>understanding</em> of customers, competitors and technology to sculpt a <em>vision</em> of a problem with solving.  The high-level vision needs to be translated into concrete and actionable <em>requirements </em>so we know the characteristics of a &#8220;good&#8221; <em>design.</em></p>
<p style="font-size: 13px; line-height: 19px;">[nb. Designs that are primarily about aesthetics, emotions, taste, and fashion operate under a different set of rules.  I would not look to the Design Pyramid for guidance on composing a song, writing a poem or painting a mural.]</p>
<p style="font-size: 13px; line-height: 19px;">
<h3 style="font-size: 15.2111px; line-height: 19px;">Where do breakthrough products come from?</h3>
<p style="font-size: 13px; line-height: 19px;"><strong>Breakthrough product ideas come from from breakthrough understanding</strong>.  The spark happens at the <em>understanding</em> level and bubbles its way up the Design Pyramid, inspiring the <em>vision</em> that guides the <em>requirements</em> that guides the <em>design</em>.</p>
<p style="font-size: 13px; line-height: 19px;">Take, for example, the overused example of the iPod.  <a href="http://www.amazon.com/Perfect-Thing-Shuffles-Commerce-Coolness/dp/0743285239/ref=sr_1_1?ie=UTF8&amp;s=books&amp;qid=1255545049&amp;sr=8-1">Apple noticed</a> that early batch of MP3 players played music well enough, but getting songs on the device was excruciatingly slow over the USB 1.0 interfaces common at the time.  Plus, the quirky, proprietary music transfer software was hard to manage.  This was a real problem.  The solid-state devices of the day had such small capacity that unless you liked listening to the same three albums over and over again, you had to spend a lot of time transferring new music onto the device.  Because of this cost, MP3 players often ended up gathering dust in a drawer.  These were Apple&#8217;s core insights, at the Understanding level of the Pyramid.</p>
<p style="font-size: 13px; line-height: 19px;">The iPod vision was sculpted to address these problems: make music management easy with great desktop software (iTunes); make transfers fast (using Firewire) and make transfers rarely necessary (with a high-capacity, hard-drive based player). Beyondthis, Apple understood that the that gadgets you are seen with in public are a reflection of your image, and that an MP3 player should look and feel cool.</p>
<p style="font-size: 13px; line-height: 19px;">Their easy, fast, high-capacity, cool looking iPod was a breakthrough product that virtually owned the digital music market through its entire arc (until smartphones and pocketable computers like the iPod Touch relegated the single-purpose music player to niche product).</p>
<p style="font-size: 13px; line-height: 19px;">If you examine other breakthrough innovations (see the <a href="http://productvision.org/blog/satisfy-important-needs/">product vision hall of fame</a>), you will find this same pattern: key insights into customer needs (understanding) leading to radically different problem definition (visions), translating into unique requirements.  When a good vision is followed through with excellent design (not to mention engineering, marketing, sales, distribution and support&#8230; you know, the easy stuff) the stage is set for a breakthrough product.</p>
<p style="font-size: 13px; line-height: 19px;">There is heaps more to say about <a href="http://ProductVision.org/blog">product vision</a>, so stay tuned!</p>
<p style="font-size: 13px; line-height: 19px; text-align: center;"><a href="/articles/design-pyramid"><img class="alignnone" title="Icon of the Design Pyramid" src="/wp-content/how-ssnifs-fit-in/pyramid-icon.gif" alt="" width="30" height="30" /></a></p>
<p style="font-size: 13px; line-height: 19px;"><em>Philip Haine is principal of <a style="color: #662625; outline-style: none; outline-width: initial; outline-color: initial;" href="http://productvision.com/">Product Vision Associates</a>, a product innovation consultancy that helps product leaders and their teams envision new, breakthrough products and reboot older ones.  To follow him on Twitter <a style="color: #662625; outline-style: none; outline-width: initial; outline-color: initial;" href="http://twitter.com/dphaine">click here</a>.</em></p>
<p style="font-size: 13px; line-height: 19px;"><em>Thanks to Michael Poremba and <a href="http://www.rated-best.org/">David Cortright</a> for reviewing earlier drafts of this article.</em></p>
<p style="font-size: 13px; line-height: 19px;"><em>[Updated 10/14/09 - Edited for clarity]</em></p>
<p style="font-size: 13px; line-height: 19px;"><em><br />
</em></p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/design-pyramid/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>Audio UI for Audio Players</title>
		<link>http://stealthisidea.com/articles/audio-ui-in-music-players/</link>
		<comments>http://stealthisidea.com/articles/audio-ui-in-music-players/#comments</comments>
		<pubDate>Sun, 10 Feb 2008 03:29:20 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Commentary]]></category>
		<category><![CDATA[Designs to Steal]]></category>
		<category><![CDATA[Product Design]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/articles/audio-ui-in-music-players/</guid>
		<description><![CDATA[Users of music players have their eyes busy and their ears free.  Why not use the ears to augment the UI?]]></description>
			<content:encoded><![CDATA[<p>Speaking of <a href="http://stealthisidea.com/articles/thumbs-up-music/">portable music players</a>, I&#8217;ve always been curious about why they don&#8217;t use audio more in the UI.  They are intrinsically audio devices, after all.   The only other way an iPod has to communicate to you is with its display, and that is useless when your eyes are on something else (like that mattress on the road, look out!).</p>
<p>With the <a href="http://en.wikipedia.org/wiki/Ipod_shuffle">iPod Shuffle</a> the point is moot because the device is mute.  There is no display at all, so you must navigate across and within songs by trial-and-error.  Playlists are precluded from the device because there is no good way to navigate them.  This makes it hard to use the same Shuffle for different situations.  If you don&#8217;t have one, believe me, stepping through tracks on a Shuffle is a real pain.</p>
<p>You already have the earphones in.  Why shouldn&#8217;t the iPod use them to speak with you?  Here are some details of how it could work.</p>
<p><span id="more-88"></span></p>
<p>The design to steal is for the music player to use the headphones to give you information to tell you information and enhance its usability.  What might the iPod whisper into your ear?</p>
<ul>
<li>a &#8220;rising&#8221; sound effect for next track and corresponding &#8220;falling&#8221; sound for previous track</li>
<li>better yet: verbal announcement of the track number as you skip forward and back: &#8220;Track four. <noscript>&amp;amp;lt;a href=&#8221;http://www.svenskacats.com&#8221; mce_href=&#8221;http://www.svenskacats.com&#8221;&amp;amp;gt;casino&amp;amp;lt;/a&amp;amp;gt; mirar sus oponentes hábitos.</noscript> (press forward) Five.  (press forward) Six. (press back) Five.&#8221;  This would help you know where you are on the disorienting Shuffle.</li>
<li>bips for every 10 seconds you are fast forwarding, because it&#8217;s really hard to know where you are without looking when fast forwarding a digital player</li>
<li>Better yet: verbal feedback to how far you are fast forwarding or rewinding in rising increments as you hold the button down: &#8220;(blah blah) bip (blah blah) bip (blah blah) ten seconds, twenty seconds, forty seconds, 60 seconds, 90 seconds&#8221;</li>
<li>For shuffles, pre-render text-to-speech of the tracks on the desktop before syncing to the device. The device would declare the names of the songs as you skip around: &#8220;Alicia Keys track three superwoman.  (forward) four: no one.  (forward) five: Like You&#8217;ll Never See Me Again.&#8221;</li>
<li>To bring badly needed playlists to the shuffle: &#8220;(press Up button) Playlist one: running mix.  (press next) two: <a href="http://www.ted.com/talks">ted talks</a> (press select) Track eight: <a href="http://www.kpao.org/2008/01/best-of-ted-theory-on-brain.html">Jeff Hawkins</a> (track then plays)&#8221;</li>
</ul>
<p>(I deliberately omitted sound effects for changes of volume level, which would interfere with enjoying the audio.)</p>
<p>Music players (including cellphones) have direct line to the user&#8217;s ear.  Why not make use of that for useful UI information?<br />
&#8212;&#8211;<br />
(Readers: Does the Zune or any other music player reinforce the user interface with sounds?)</p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/audio-ui-in-music-players/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Thumbs up/thumbs down button for music players</title>
		<link>http://stealthisidea.com/articles/thumbs-up-music/</link>
		<comments>http://stealthisidea.com/articles/thumbs-up-music/#comments</comments>
		<pubDate>Fri, 01 Feb 2008 16:17:48 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Commentary]]></category>
		<category><![CDATA[Designs to Steal]]></category>
		<category><![CDATA[Product Design]]></category>
		<category><![CDATA[Quick Ideas]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/articles/thumbs-up-music/</guid>
		<description><![CDATA[Life is too short to listen to music you don't like.]]></description>
			<content:encoded><![CDATA[<div style="padding: 10px 0pt 10px 15px; float: right; width: 300px;"><img src="/wp-content/thumbs-up-music/thumbs-up-down.jpg" alt="iPod Shuffle with mockup of thumbs-up and thumbs-down button" width="240" height="433" /></p>
<p class="imagecaption">Dedicated buttons for expressing your pleasure with the current song, or lack thereof</p>
</div>
<p>Music is so easy to come by these days.  We should be in sonic bliss, right?  But we aren&#8217;t, because so much of what we have on our music players is, well, crap.  Our shuffled music is a mix of stuff we love and stuff we don&#8217;t.  Not so pleasant.</p>
<p>Our goal is not just to get piles of music, it&#8217;s to have piles of music that we love.  We want our music collection to have a high <a href="http://en.wikipedia.org/wiki/Signal-to-noise">signal-to-noise ratio</a>.</p>
<p><span id="more-77"></span></p>
<p>The iPod has a clever function to let you rank a song you hear.  If a bad song comes on, you can rank it as one star and delete it from you collection when you get back to your computer.</p>
<p>The trouble is, it&#8217;s <strong>way too much trouble</strong> to do this. On a typical iPods it&#8217;s a multistep, multi-sensory operation: 1. Unlock the buttons 2. press the select button repeatedly while watching the device until you are in the rating mode (not the volume mode, not the progress bar mode, not the album cover mode) 3. turn the clickwheel while watching the screen to get the right number of stars  4. Click select to confirm 5. re-lock your buttons.  Then, later, you need to do the cleanup chore: return to iTunes, search for your one-star songs and destroy them.</p>
<p>Not only is this a lot of work, it&#8217;s also completely non-viable if you are driving, running, or doing anything else that occupies your eyes or attention.  The net result is you don&#8217;t.  You must endure the bad music until the next time you are able to take a few hours out to hone your music collection, which is to say, forever.</p>
<p>Here&#8217;s the <strong>design to steal</strong> for a modern music device: real, tactile, mode-less <strong>Thumbs-Up and Thumbs-Down buttons</strong> on the surface of the music player.  (Not the <a href="/articles/buttonphobia/">typical Apple non-button button</a>.)  (Thank you <a href="http://en.wikipedia.org/wiki/Pandora_%28music_service%29">Pandora</a> for the thumbs up/down inspiration).  Pressing the thumbs affects the song&#8217;s star rating, and thus their likelihood of it being selected by the elven DJ within the machine.</p>
<p>Here&#8217;s the fun part: <strong>Pressing and holding the Thumbs-down button banishes the song from your ears permanently </strong> (after a second confirmation press).  No further interaction needed.  You can do it while running or driving or conversing.  It&#8217;s gone from your portable player and after syncing, it&#8217;s gone from your desktop.</p>
<p>This gets even more interesting with <strong>subscription music services</strong> fed to portable music players, which let you listen to as much as you want as long as you keep paying.  The system feeds you songs you might like.  You <a href="http://en.wikipedia.org/wiki/Gong_show">gong</a> the songs you hate by pressing and holding the thumbs-down button.  The next song begins right away.  The banished song is kept on a do-not-play list forevermore.</p>
<p>Music subscription services sometimes let you capture and keep songs you like.  With this design you would do the opposite: press and hold the <strong>Thumbs Up button to keep the song locally</strong> for access anytime.</p>
<p>Thumbs Up/Down buttons should also appear on your <strong>home audio remote control</strong>, for the same reasons.</p>
<p>There are a couple of other <strong>bonus ideas to steal</strong>.  Now that rating information is facilitated, the information can be shared:</p>
<ul>
<li>with artists and advertisers, so they know whom to reward for appreciated songs</li>
<li>with your friends, so you can see who likes what (if you are into that sort of thing)</li>
<li>with the whole world, to do your part in sorting through the <a href="http://en.wikipedia.org/wiki/RPM_Challenge">gobs of indy music</a> being produced.  Later, those elven DJs in the machine can feed you the best indy music as rated by the collective.</li>
</ul>
<p>Very quickly, the signal:noise ratio of your music collection would go up, increasing our enjoyment of music and minimizing the hassle of managing it.  Which is nice, because life is too short to listen to bad music.</p>
<p><em>[Update 1/18/09: the <a href="http://stealthisidea.com/articles/idea-stolen-thumbs-updown-for-streaming-music/">Slacker G2</a> player, introduced 8 months after this article was published, has "Heart" and "Ban" buttons for tuning its 1-to-1 streaming audio service.]</em></p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/thumbs-up-music/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>10 UI Wishes for 2008</title>
		<link>http://stealthisidea.com/articles/2008-ui-wishes/</link>
		<comments>http://stealthisidea.com/articles/2008-ui-wishes/#comments</comments>
		<pubDate>Thu, 03 Jan 2008 20:10:21 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Analysis]]></category>
		<category><![CDATA[Commentary]]></category>
		<category><![CDATA[Critique]]></category>
		<category><![CDATA[Designs to Steal]]></category>
		<category><![CDATA[Product Design]]></category>
		<category><![CDATA[Quick Ideas]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/articles/2008-ui-wishes/</guid>
		<description><![CDATA[Basic UI deficiencies in common products we've suffered for for years or decades.]]></description>
			<content:encoded><![CDATA[<div style="float: right; width: 311px; padding: 10px 0 10px 15px;"><img src="/wp-content/2008-ui-wishes/2008-ui-wishes.jpg" alt="Crossed fingers and champagne glasses with caption: 2008 UI wishes" width="311" height="282" /></div>
<p>We&#8217;re so lucky.  We have cellphones and GPS, cheap high speed Internet, free shipping and Wiis.  I&#8217;m grateful, I really am.  The progress has been astounding.</p>
<p>But there are some perennial UI issues in everyday products that year after year never seem to get fixed.  Every year I expect someone will finally do something but year after year ticks by and nothing happens.  Perhaps if I wish real hard out loud here on StealThisIdea some of these these problems will finally be resolved.</p>
<p>Here is my wishlist for 2008:</p>
<ol>
<li><strong>Awesome speech recognition on Mac</strong>Speech recognition works and it&#8217;s here to stay.  It is one of the few remaining advantages that Windows has over the Mac.  Unfortunately the Mac has been second-class citizen for years.  It&#8217;s only worth using the best speech recognition system available, and that system is Dragon NaturallySpeaking, available for Windows only.  Apple, buy Nuance, willya?<em>[1/27/08 It's working already!  Within days of writing a draft of this article, <a href="http://www.nytimes.com/2008/01/24/technology/personaltech/24pogue.html">MacSpeech announced</a> they have ported the Dragon NaturallySpeaking engine to the Mac with a product called Dictate!  I can't wait.  I currently use NaturallySpeaking on WinXP within Parallels on a MacBook Pro, channeling input to the Mac side of my Mac using TightVNC on the Windows side and Vine Server 2.2 on the Mac side.  It works really well, and I depend on it.  But it's memory-intensive and cumbersome.  A Mac-native solution will be most welcome.]</em></li>
<li><strong>Put a real second mouse button on Macs</strong>In the mid-80s, I used a three button mouse on Sun workstations. It was a scourge of usability. There was no standardization of which button should do what.  The user was left to flounder, learning and relearning button definitions across applications.In that climate, it was refreshing for Apple to pronounce, &#8220;let there be but one button.&#8221;  One button, no ambiguity.  If you wanted a second action you could double click.  Advanced users could Option-click or Shift-click.  (Or Shift-Option-click. Usable indeed!)
<p>Later, Microsoft introduced a second button,  But they were careful to declare a clear and unwavering mandate: &#8220;Let there be a second mouse button, and let it be used only for contextual menus.&#8221;  It has been an unqualified success.  Every app uses it.  Even your proverbial mom knows how to right-click to get options on things.  Even on the Mac, support for second mouse button is ingrained in every serious app.</p>
<p>Apple seems to agree: Mac OS X, the iLife and iWork apps fully support the second mouse button.</p>
<p>The only thing missing is an actual second button on Apple mice and laptop trackpads.  It&#8217;s as if Steve Jobs himself is petulantly holding out on his 20-year-old pronouncement out of sheer stubbornness.  The only Apple-branded bone we&#8217;ve been tossed is an invisible, barely functioning fake second mouse button on the <a href="http://en.wikipedia.org/wiki/Apple_Mighty_Mouse">Mighty Mouse</a> that requires that you lift your fingers off the left part of the mouse in order for it to register a right button click.</p>
<p>A third-party mouse with a proper second button therefore remains a required purchase with any Mac.  Laptop users are still out of luck.  It is a point of confusion and an ongoing barrier for Windows users who would otherwise <a href="http://en.wikipedia.org/wiki/Apple_Switch_ad_campaign">switch</a> to the mac.</p>
<p>Apple is a well-known <a href="http://stealthisidea.com/articles/buttonphobia/">button hata</a> and we hope it gets over it in 2008.</p>
<p><em>[1/27/08 The signs on this one are not good; Apple looks like it's going to use <a href="http://www.macrumors.com/2008/01/17/mulitouch-on-the-macbook-air-and-beyond/">multitouch trackpad gestures</a> to get around having to desecrate its laptops with a second physical button.  Maybe that will work, but I'm skeptical, based on bad experience with gestures on Powerbooks]</em></li>
<li><strong>Put a real, physical keyboard on the iPhone</strong>We are evolved to sense things by touch, not just by sight.  Tactile, <a href="http://en.wikipedia.org/wiki/Haptic">haptic</a> user interfaces make use of that faculty.On-screen keyboards require much more user attention than physical keyboard.  The user must look not just at the text field but at the keyboard.  The user cannot trust that a keypress will be interpreted correctly like a real button and must therefore verify what has been entered.  It&#8217;s a &#8220;type-&gt;verify-&gt;proceed&#8221; mental loop instead of a more efficient &#8220;type-&gt;proceed&#8221; loop you use when you can unequivocally trust that a key press gave you what you expected.  Finally, keyboards with real buttons you can feel are easier, faster, and more gratifying to use.   Apple, please get over the <a href="http://stealthisidea.com/articles/buttonphobia/">buttonphobia</a>.  Stop trying to be clever with the workarounds and put a proper keyboard on the next iPhone.
<p><em>[Update 4/24/09 - Apple <a href="http://productvision.org/blog/ban-the-keyboar/">has said "emphatically" </a>that it does not believe in fixed keypads for phones.  This either means that they aren't going to do it, or they aren't yet ready to show their fixed keypad for the iPhone.]</em></li>
<li><strong>Put physical playback and volume controls on music devices</strong>There are very few universally-applicable UI principles.  Almost all have contingencies and caveats.  The only safe answer you can give to a general UI questions is, &#8220;It Depends.&#8221;But there is a solid, generally applicable principle that you could teach a monkey: <strong>identify and streamline the most common and frequent tasks</strong>.
<p>My first Sony Walkman cassette player got this right in 1979:  I could adjust the volume and pause the music instantly, without looking, without  changing modes, without unlocking anything, without even removing it from a belt clip.  Yet most iPods are horribly modal.  Turning down the volume on my current iPod requires pulling it out of the pocket, unlocking it, looking at it, turning the click wheel, locking it again and putting it back in my pocket. As I have pointed out, this makes the <a href="/articles/ipod-touch-reaction/">iPod touch flawed as a music player</a>.  So please, Apple, in 2008, put the volume and playback controls physical, pressable buttons that you can feel.</li>
<li><strong>Stop the bouncing</strong>On the Mac, icons of applications which require your attention bounce.  And bounce. And bounce.  Even if you&#8217;re in the middle of something else.   They clamor for your attention like a needy child.  Instead, icons should bounce once or twice and then stop. If they still require your attention, they may step forward from the dock, peeking out a little bit until a moment befitting the user.</li>
<li><strong>Cars should stop self-destructing</strong>How many products can you name, that you rely on for your life that self-destruct when the user makes a minor error?  This is what happens when you accidently walk away from most cars with the dome light or headlights on.  The car will dutifully shine that light all night long until your battery is dead and the car is no longer operable, leaving you stranded.In 2008, at this point in human history, all cars should be smart enough to know never to allow the battery level to get below what is needed to start and recharge itself.  This should be a national safety requirement.</li>
<li><strong>Allow graphics to be copied and pasted into web forms; allow files to be dragged in</strong>Blogging apps, SaaS apps like Google Docs, any webform requring a photo:  all of these require that you provide files.  Unfortunately you cannot interact with a web browser as you can with regular apps and the desktop.  You cannot copy and paste images one application into a web app.  And you cannot drag one or a dozen files from the desktop into an upload area.   Users must contend with a cumbersome file open dialog, and do so repeatedly to upload multiple files. These facilities are needed now to upload images in many web apps, and they will be needed for evermore in <a href="http://en.wikipedia.org/wiki/Rich_Internet_application">RIAs</a> and <a href="http://en.wikipedia.org/wiki/Software_as_a_Service">SaaS</a> apps.  <em>[Update 11/9/09 I was extremely surprised to discover that dragging a photo from my desktop into a Google Wave pane accepted the upload elegantly.  How'd they do that?!  Turns out it was <a href="http://gearsblog.blogspot.com/2009/05/gears-05210-released.html">Google Gears</a> at work, the offline extension that was created to let you work with your web apps when you had no connectivity.]</em></li>
<li><strong>Cell phone service with the clarity of VoIP and the low latency of landlines</strong>Cell phone service sucks.   It has always sucked and so we take for granted its suckitude.  But it doesn&#8217;t have to suck.  There are two key problems: latency and audio quality.  Latency is the delay from when you say something to when your friend hears it.  You can get a sense of how bad it is by having both parties clap on the count of three.  Latency affects cellphone service and VoIP and makes for awkward conversations.   Either you work out a telegraphic protocol with clear, unnatural pauses to clear the air, or you talk over one another clumsily.  Latency doesn&#8217;t have to suck so badly:  it is negligible on old fashioned landline service, so it should be possible with cellphone communications.The other problem is audio quality of phone calls.  You don&#8217;t know what you have been missing all along until you participate in a VoIP call using headphones.  The other person sounds like they are right next to you.  Puhs, buhs and duhs are clearly distinguishable, as are v&#8217;s and f&#8217;s.  It&#8217;s wonderful.  This is a mere matter of bandwidth and it should be solvable, not just for mobile phones but for landline phones as well.  <em>[Update 11/9/09 As of <a href="http://www.nytimes.com/2009/09/17/technology/17voicehd.html?_r=1">September 2009</a>, "France Télécom has become the first mobile operator to transmit voice calls and audio in high definition, part of an effort by telecommunications companies to improve the quality of cellphone conversations."  h/t <a href="http://www.portigal.com/blog/innovative-outcomes-take-years-to-launch-part-2/">Steve Portigal</a>]</em>
<p>How many more years must pass before we have clear, instant, reliable voice communications?  I hereby wish for someone to do something about it in 2008.  We have HDTV; the time is ripe for <strong>HD phone service. </strong></li>
<li><strong>Bring back OpenDoc</strong></li>
<p>OpenDoc was killed ten years ago, but the idea of mixing and matching components of applications has always made sense. I want to be able to put an <a href="http://www.omnigroup.com/applications/omnigraffle/">OmniGraffle</a> chart in a Pages document or a <a href="http://www.apple.com/iwork/numbers/">Numbers</a> table in <a href="http://www.stone.com/Create/">Stone Create</a>.  <a href="http://en.wikipedia.org/wiki/PenPoint_OS">PenPoint</a> did it pretty well in 1991, Microsoft botched it (with OLE), integrated apps like <a href="http://en.wikipedia.org/wiki/Clarisworks">ClarisWorks</a> approximated it, and some ISVs have been pushing the ball forward with <a href="http://www.macnn.com/articles/05/03/04/linkback.for.mac.os.x/">LinkBack</a>.  But it is still not yet a robust, well supported standard.  In 2008 I wish a proper standard and a workable cross-platform technology would emerge for embedding components of apps in other apps.</p>
<li><strong>Make it impossible to leave an ATM without your card and your cash.</strong>My Washington Mutual ATM seems designed to want you to leave your card behind: after it gives you your money, but before it gives you your card, it throws up a full screen ad for several seconds.  You&#8217;ve got your money, the message it&#8217;s sending you is that your transaction is over.  You start walking away, and if you&#8217;re lucky, you realize that you don&#8217;t yet have your card.  I saved myself several times but one day it happened to me and I left without my card.  When I returned to the bank later the teller told me that this happens several times a week.It&#8217;s not terribly difficult UI design problem, and it&#8217;s amazing that it persists after twenty years of ATMs.  The solution is to withhold all three items, card, cash and receipt, until all three are ready, and spit them all out at once.  The best design I saw was years ago in Tokyo, where the three slots where together and you could grab all elements at once.  Please, everyone who works at a bank: in 2008, make it impossible to leave without your card.</li>
</ol>
<p>That concludes my top 10 UI wish list for 2008.  Let&#8217;s check in again next year to see what has been fixed.</p>
<p><em>[<strong>Readers</strong>: if you know anyone involved with any of these products, please send them a link to this article.  It's: http://stealthisidea.com/articles/2008-ui-wishes]</em></p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/2008-ui-wishes/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Needs Analysis of Reusable Shopping Bags (plus a holiday gift idea)</title>
		<link>http://stealthisidea.com/articles/reusable-bags/</link>
		<comments>http://stealthisidea.com/articles/reusable-bags/#comments</comments>
		<pubDate>Mon, 10 Dec 2007 15:05:57 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Analysis]]></category>
		<category><![CDATA[Commentary]]></category>
		<category><![CDATA[Great Designs]]></category>
		<category><![CDATA[Needs Analysis]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/articles/reusable-bags/</guid>
		<description><![CDATA[MyOwnBags demonstrate a nice clean differentiation.  Plus, they make a great gift for stylish people!]]></description>
			<content:encoded><![CDATA[<p><em>[Cross-posted from <a href="http://kpao.org/">Kpao</a>!]</em><br />
Years ago, my friend Ania Moniuszko started<noscript> </noscript>a company making reusable shopping bags to help combat the waste of disposable bags.  She designed them herself and calls them MyOwnBag, as in: &#8220;Paper or plastic?&#8221; / &#8220;Thanks, I have <a href="http://www.myownbag.com/">MyOwnBag</a>.&#8221;</p>
<div style="padding: 10px 0pt 10px 15px; float: right; width: 302px;"><img src="/wp-content/reusable-bags/my_own_bag_assortment.jpg" alt="Assortment of MyOwnBags - cute reusable shopping bags" width="302" height="259" /></p>
<p class="imagecaption">MyOwnBags come in many fabrics and colors</p>
</div>
<p>Ania designed a bag that she would want to use:</p>
<p><span id="more-82"></span></p>
<ul>
<li><strong>strong</strong> enough to carry a heavy load of groceries</li>
<li><strong>light and compactable</strong> so it could be squished into its own little pouch and kept in a woman&#8217;s purse whenever she needed it</li>
<li><strong>large capacity</strong> so that multiple bags are not needed on a small shopping trip</li>
<li><strong>versatile</strong>, so it could be used not just for groceries but for yoga, gym, beach, clothes shopping, changes of clothes</li>
<li><strong>fashionable</strong>, to look good while being eco.  They come in many fabrics and do not have huge gaudy phrases trumpeting the owner&#8217;s environmental sensitivity</li>
<li><strong>washable</strong>, so the bag can withstand grocery detritus and can be used for a long time without looking dirty and ratty</li>
</ul>
<p>Ania created her reusable bags years before they became commonplace and way before progressive municipalities like <a href="http://www.sfgate.com/cgi-bin/article.cgi?f=/c/a/2007/03/28/SFSUPES.TMP">San Francisco started banning plastic bags</a>.  Now there are dozens of players<noscript>As &amp;amp;amp;lt;a href=&#8221;http://www.new-blackjack.com&#8221; mce_href=&#8221;http://www.new-blackjack.com&#8221;&amp;amp;amp;gt;online blackjack&amp;amp;amp;lt;/a&amp;amp;amp;gt; customers, the players are the main ingredients for prosperity and, of course, revenues. </noscript> in the game.  Amazingly, the MyOwnBag product vision has held up well against the flood of competitors:</p>
<ul>
<li>Grocery stores sell <strong>canvas bags</strong> that look like stiff green shopping bags.  Pretty good for reducing waste but you cannot keep it in your purse at the ready.</li>
<li>Many companies sell $5 <strong>nylon bags</strong> that fold into nothing.  They are commendable for making something that can be carried around, and cheap enough that anyone could buy them.  But they are typically over-branded and look like garbage bags when freed from their sac.  You wouldn&#8217;t be seen with it for other trips around town.</li>
<li>Hermès, Louis Vuitton and others have <strong>designer grocery bags</strong> for fashionistas <a href="http://www.bloggingstocks.com/2007/05/08/who-spends-960-on-a-reusable-shopping-bag/">willing</a> <a href="http://www.nydailynews.com/lifestyle/2007/11/30/2007-11-30_ecofriendly_shopping_bags_all_the_rage_e.html">to</a> <a href="http://www.azcentral.com/style/fashion/articles/050807designergrocery.html">pay</a> $500 &#8211; $1700.</li>
<li>Various <strong>gym, yoga or beach bags</strong> are optimized for their stated purpose but are not meant for groceries</li>
</ul>
<p>Here is what this comparison looks like in a needs table, which includes the original comparison points, paper and plastic bags (3 is better; 0 is worse):</p>
<div style="padding: 5px 0pt; margin-left: auto; margin-right: auto; width: 475px;"><img src="/wp-content/reusable-bags/reusable-bag-needs-table.gif" alt="Needs table comparing various types of shopping bags" width="475" height="334" /></div>
<p class="imagecaption" style="margin-left: auto; margin-right: auto; width: 475px;">Needs table comparing various types of shopping bags</p>
<p>The <a href="http://productvision.org/blog/products-by-needs/">needs analysis</a> clarifies the differentiation among these competitors.  For each customer need along the top you can see which solution does a good job of solving it.  You can compare any two solutions and immediately see the important differences between them and which niche each has carved out.</p>
<p>From this chart you can see that MyOwnBag is the only reusable shopping bag that squishes down to a little pouch, and is useful for for things other than grocery shopping, and is chic and may be worn proudly around town, without costing $500.</p>
<p>There is one other need which <a href="http://myownbag.com/">MyOwnBag</a> solves excellently: <strong>your need to find a unique gift</strong> for your chic, environmentally-sensitive friend, for about $40 to $60.</p>
<p>Warning: do <em>not</em> give her a plastic bag.</p>
<p>.</p>
<p>For more on needs analysis, please see:</p>
<ul>
<li><a href="http://productvision.org/blog/products-by-needs/">Needs analysis technique</a> at <a href="http://ProductVision.org">ProductVision.org</a></li>
<li><a href="http://productvision.org/blog/vehicle-needs/">Needs Analysis of Vehicles</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/reusable-bags/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>The Potential of Chumby</title>
		<link>http://stealthisidea.com/articles/chumby/</link>
		<comments>http://stealthisidea.com/articles/chumby/#comments</comments>
		<pubDate>Sat, 08 Dec 2007 22:43:52 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Commentary]]></category>
		<category><![CDATA[Great Designs]]></category>
		<category><![CDATA[Needs Analysis]]></category>
		<category><![CDATA[Product Vision & Strategy]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/articles/chumby/</guid>
		<description><![CDATA[The Chumby does nothing specific, a lot in general.]]></description>
			<content:encoded><![CDATA[<p><em>[Cross-posted from <a href="http://kpao.org/">Kpao</a>!]</em></p>
<p>I plunked down my credit card no more than five minutes after seeing <a href="http://www.kpao.org/2007/12/chumby.html">David Creemer&#8217;s mention of the Chumby</a>.</p>
<p>Here is the first product I have seen that embodies the future envisioned at the dawn of the Web era. An unobtrusive, wireless, sub-$200 Internet terminal with no specific purpose.</p>
<div style="padding: 10px 0pt 10px 15px; float: right; width: 350px;"><img src="/wp-content/chumby/chumby-cup.jpg" alt="Chumby next to a coffee mug" width="350" height="230" /></p>
<p class="imagecaption">The Chumby Internet device, about $195 shipped.</p>
</div>
<p>That no-specific-purpose part partitions people who hear about the <a href="http://www.chumby.com/">Chumby</a>. Some see it as its greatest weakness, others see it as its greatest strength.  I’m in the latter camp.   I think the potential and relevance of this class of device is enormous. Here are some scenarios:</p>
<p><span id="more-81"></span></p>
<p><strong>Alarms of every stripe:</strong> It’s time to wake up. It’s time to sell Google. It’s time to move the car for street cleaning.  My checking balance is getting low; better transfer some funds.  Oh my, something big exploded somewhere.  Oops, we left the garage door open.  Looks like a storm is brewing.  Uh-oh, traffic is bad on 101. Oooh, Tahoe got a huge dump of snow. Oh! Was that an earthquake? How big, and how far?  Hurry!  <a href="http://wiialerts.com/">Wii’s are available!</a> Shh!  Stay low!  There is someone at the front door and he’s carrying a clipboard!</p>
<p><strong>Ambient awareness:</strong> What time is it? How many minutes before my next appointment?  Ah, my web traffic is growing nicely, and I even made $0.42 this week with Adsense.  Cool, there’s the updated status of a bunch of my Facebook friends.  It’s Friday night and three of my friends have no plans; maybe I will call them.  Hmmm, it’s only <a href="http://www.wunderground.com/cgi-bin/satblast/satBlast?lat=37.793549&amp;lon=-122.419327&amp;zoom=6&amp;height=450&amp;width=900&amp;SatType=VIS&amp;brand=sfgate">foggy in my neighborhood of San Francisco</a>, not everywhere   How does it look in <a href="http://www.montrealcam.com/img/peel.gif">St. Catherine’s Street</a> in Montreal?   Does the baby look ok with the nanny?  We’ve been using a lot of energy this month.  Philip’s birthday is in a few days.</p>
<p><strong>Control:</strong> Time to put the house lights, climate and security in bed-time mode /  away for the evening mode /  away for vacation mode.   Time to put on ambient jazz or groove or drone or classical or acoustic chick rock or energetic rock throughout the house to suit the current mood.  Tell the DVR to record Heroes and Earl.</p>
<p><strong>Tools:</strong> Alarm clock.  Kitchen timer. Game timer.  My favorite Epicurious recipes. The <a href="/articles/kitchen-computer/">family calendar in the kitchen</a>.</p>
<p><strong>Decoration:</strong> Ah there are photos showing what I was doing every year this month for as long as I have been collecting digital pictures.</p>
<p><strong>Communication:</strong> Receive a video voicemail.  Press a couple of buttons and record a voice message to your spouse.</p>
<p><strong>On-demand radio:</strong> Listen to the latest NPR news broadcast in the bathroom, when you are shaving.</p>
<p>One could go on.  I could imagine several Chumby’s around the house as <a href="http://en.wikipedia.org/wiki/Model-view-controller">views and controllers</a> being fed by the same model.  (Our mobile phones would take part, too.)</p>
<p>One piece apparently missing on the platform is a coherent infrastructure for pulling together alarms, ambient awareness, control, and tools.  From what I can tell, the first batch of applets will be disjointed, inconsistent, mostly useless.  The signal-to-noise ratio of useful vs. demo applets is too low, as happened with Palm apps and <a href="http://www.apple.com/downloads/dashboard/">desktop widgets</a>.</p>
<p>But with the Chumby, the technology and price point have arrived.  The only thing in the way of most of these scenarios is a mere matter of design and code.</p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/chumby/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Streamlining the BART QuickPlanner interface</title>
		<link>http://stealthisidea.com/articles/bart-ideas/</link>
		<comments>http://stealthisidea.com/articles/bart-ideas/#comments</comments>
		<pubDate>Wed, 12 Sep 2007 19:12:50 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Commentary]]></category>
		<category><![CDATA[Designs to Steal]]></category>
		<category><![CDATA[Product Design]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/articles/bart-ideas/</guid>
		<description><![CDATA[A couple of tweaks to the BART schedule planner would make it much more useful.]]></description>
			<content:encoded><![CDATA[<div class="wp-caption alignright" style="width: 290px"><img src="/wp-content/bart-ideas/bart-map.gif" alt="BART system map" width="280" height="334" /><p class="wp-caption-text">BART, the San Francisco Bay Area Rapid Transit system </p></div>
<p>I had trouble with the BART (San Francisco Bay Area Rapid Transit) mobile phone user interface for checking out schedules, so I sent them the following email.</p>
<p>The improvements are just good old-fashioned information design and matching the solution to the situation.  I thought I&#8217;d share it here since it shows a bit of design thinking.</p>
<p><span id="more-72"></span></p>
<blockquote><p>May I make a couple of suggestions as a product design consultant about improving to the usefulness and usability of the QuickPlanner?</p>
<p>This goes for both the web and mobile versions of the QuickPlanner.</p>
<p>Have a notion of &#8220;today&#8221; and let the user bookmark routes results page.  For example a common route I take is from 24th &amp; Mission to Lake Merrit.  80% of the time I am planning this for today.  But every time I want to check the BART schedule I have to interact with the pop-ups.  This is cumbersome and slow, especially on a mobile phone.</p>
<p>Here are details.</p>
<ol>
<li>On the QuickPlanner form page, provide a radio choice for &#8220;today&#8221; vs. &#8220;another day&#8221;.</li>
<li>Default the choice to &#8220;today&#8221;.  (On the regular web version of the QuickPlanner you could hide or disable the date &amp; time controls until the user chooses &#8220;Another day&#8221;)</li>
<li>When &#8220;today&#8221; is selected, on the results page show all the remaining trains for that route today, no matter what the date is.This page is bookmarkable and always brings up the schedule for the rest of today, no matter what day it is.  Most of the time this is all the user will ever need.This would greatly reduces the amount of steps needed.  The user no longer has to operate two long drop-downs, doesn&#8217;t have to review the date and time and press submit.</li>
<li>On the results page, make it easy to skim the results by boldfacing key information and factoring out redundant information.<br />
- For a direct journey with no transfers the results would reflect today&#8217;s date, the start and destination stations just once, at the top of the results page (rather than with each hit) and the fee.</p>
<p>- To make it easier for the user to zero in on the key information, make the operative information boldface Each result might start with the boldface header: &#8220;Depart 11:19 am Arrive 11:40 am&#8221;.  Under that are the details of the journey and whether &#8220;Bikes are allowed&#8221; or &#8220;Bikes NOT allowed&#8221; (to make it stand out a bit more, but not too much).</p>
<p>- For journeys involving transfers, the cyclist only needs to know once whether the entire journey allows bikes.  (We save clutter and reduce errors by saying it once for the journey and not for each train.)</li>
<li>At the bottom of the results page, put a note in suggesting: &#8220;We suggest you bookmark this page for faster access&#8221;.   This line would only makes sense when the user has chosen &#8220;today&#8221; since specific dates would not be very useful to bookmark.</li>
<li>The notion of &#8220;today&#8221; would be common-sense enough to go over midnight barriers.  If it&#8217;s 11:30 pm, the user wants to see trains past midnight, not strictly today.</li>
<li>Rather than paging after a handful of results.   I suggest erring on the side of longer pages with more results.   It&#8217;s slow to initiate and transfer data on a mobile phone; faster to just get it in one fell swoop and scroll through a longer listing.</li>
<li>An instant bookmark to today&#8217;s schedule is handy, but sometimes the user does need to look ahead.  At the top of the results page next to the date there is a &#8220;change&#8221; link.  This goes to the QuickPlanner page.  The start and end stations are pre-set, saving the user the chore.</li>
</ol>
<p>Please compare this before and after mock-up of an itinerary involving a transfer:<br />
Before: <a href="http://tinyurl.com/2upzjg">http://tinyurl.com/2upzjg</a><br />
After: <a href="http://tinyurl.com/2pwrxo">http://tinyurl.com/2pwrxo</a><br />
You can try these URLs on a mobile phone.</p>
<p>Hopefully this would not be too difficult a change.  Please let me know if I can help further.</p>
<p>Thanks and best regards,<br />
Philip Haine<br />
Obvious Design<br />
phaine@obviousdesign.com</p></blockquote>
<p>Here is roughly what the before and after look like:</p>
<div style="padding: 5px 0pt; margin-left: auto; margin-right: auto; width: 454px;"><img src="/wp-content/bart-ideas/BART-mockups.gif" alt="Before and after of BART QuickPlanner search results page" width="454" height="633" /></div>
<p class="imagecaption" style="margin-left: auto; margin-right: auto; width: 454px;">Before and after of BART QuickPlanner search results page</p>
<p>To get a more accurate picture of the differences, browse the <a href="http://tinyurl.com/2upzjg">before</a> and <a href="http://tinyurl.com/2pwrxo">after</a> links above on a mobile phone.</p>
<p>Hopefully BART can implement bookmarkability and these improvements to the information design.  I&#8217;ll let you know what they say&#8230;</p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/bart-ideas/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Reading lists for Web Browsers</title>
		<link>http://stealthisidea.com/articles/browser-reading-lists/</link>
		<comments>http://stealthisidea.com/articles/browser-reading-lists/#comments</comments>
		<pubDate>Fri, 07 Sep 2007 17:03:41 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Commentary]]></category>
		<category><![CDATA[Designs to Steal]]></category>
		<category><![CDATA[Product Design]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/articles/browser-reading-lists/</guid>
		<description><![CDATA[It should be easier to store pages to read later.]]></description>
			<content:encoded><![CDATA[<p>Have you ever lined up a set of browser tabs of pages to want to read, but before you got to them, had to close your browser?  Or, have you wanted to close the browser to free up resources but hesitated because it would close the tabs you lined up?  It&#8217;s annoying that there is no way to restore that content so you can pick it up later.</p>
<p>This immediately leads to a quick idea to steal:  <strong>Give the option of saving and restoring all content when the browser is re-opened</strong>.</p>
<p>This scenario hints at something larger, an observation that browser makers seem to have missed:  The pile of tabs can be thought of as a <strong>reading list</strong>.  What if web browsers let you create reading lists, like music playlists in iTunes, but for web pages?  You could drag the current page or a tabs into a reading list to read later, or to save it forever.  You might have a reading list for sports, one for humor, one for macrame.</p>
<p>This concept is different from web bookmarks:  it is the content that is stored locally, not just the page&#8217;s location.  The benefits are convenience, speed, permanence and searchability.</p>
<p>You could have <strong>multiple reading lists</strong>, just as there are multiple play lists in iTunes.  </p>
<p>Reading lists are <strong>designed for transience</strong>.  Once a page is read, it is discarded, to keep the focus on unread material.  This differs from typical bookmark managers, which typically make you switch to a bookmark management mode to clean up bookmarks.</p>
<p>Sometimes there are <strong>pages you want to keep forever</strong> as reference or for a historical record.  There is no guarantee that the company serving the page will still be in business ten years from now, with the article still available for free and at the same location you bookmarked.  The New York Times, for one, expires its articles pretty quickly.  The user has the option of <strong>storing pages indefinitely</strong>, as a permanent archive.</p>
<p>Academic or scientific <strong>researchers, reporters and students</strong> would use this to collect read articles over time the way a reporter collects boxes of newspaper clippings.</p>
<p>The saved content within reading lists would be indexed and <strong>searchable</strong> from within the browser, making it easier to recall a useful article from the past.</p>
<p>Reading lists would help with mobility.  Before traveling you could load up on readings for future <strong>offline browsing</strong> on an airplane, or anywhere else the Internet don&#8217;t shine.  This is better than leaving your browser open with a lot of tabs &#8212; a running browser trickles off some CPU load and therefore battery life.</p>
<p>Engadget or SlashDot are examples of pages that have the useful content on the home page.  You rarely have to drill in further.  While pages in the reading list are normally <strong>static</strong>, for this scenario, the user might designate a page as <strong>automatically refreshed</strong>.   They would update automatically in the background and thus be instantly available when called upon.  Their freshness level would be clearly indicated so you always have a sense of how old the material is.  In the airplane scenario, pre-caching would save you from having to remember to load up on content beforehand and to spend frantic packing time doing so.</p>
<p>The latest <strong>RSS feeds</strong> would be available instantly and automatically, even when offline.</p>
<p>Pre-caching reading lists would be a boon for <strong>mobile users</strong>.  Today&#8217;s iPhone, for example, has poor digital bandwidth, making surfing painful.  And even the fastest wireless networks aren&#8217;t available everywhere, such as in a subway tube or in a different geography.  Reading lists would work with mobile devices in a couple of ways.  First, reading lists you line up on your desktop would be kept in constant sync with the handheld.  Stuff you didn&#8217;t have time to read at your desk is therefore available to you on the train or in the waiting room.</p>
<p>Secondly, the mobile device could load up piles of subscribed web pages, RSS feeds and video snippets while charging, so it doesn&#8217;t incur a hit to battery life.  If the device has WiFi like the iPhone, it could make use of it for faster fill-ups.  Then when you have a spare moment, calling up the pre-cached pages would be instantaneous.</p>
<p>This new capability is not much of a technical stretch over what browsers already do.  It is already possible in most browsers to save a page locally in the file system.  This concept provides a more streamlined and integrated experience for saving, grouping and recalling locally stored pages.</p>
<p>This is one of those ideas that could have been created years ago.  The last major innovation in web browsers was tabbed browsing.  Hopefully, we will see browser makers incorporate an elegant design of reading lists some time soon.</p>
<p><em>[If you know someone involved in browser technology, please send them this article!]</em></p>
<p><em>[Update 9/7/07:  <a href="http://www.omnigroup.com/applications/omniweb/">OmniWeb v5</a> seems to have some of this functionality in a feature they call Workspaces.  It seems to have much in common with this idea, but a different bent, more oriented to reconstructing configurations of tabbed window browers.]</em></p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/browser-reading-lists/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Making Backlit Keyboards More Useful</title>
		<link>http://stealthisidea.com/articles/keycap-backlighting/</link>
		<comments>http://stealthisidea.com/articles/keycap-backlighting/#comments</comments>
		<pubDate>Fri, 03 Aug 2007 18:17:43 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Designs to Steal]]></category>
		<category><![CDATA[Product Design]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/articles/keycap-backlighting/</guid>
		<description><![CDATA[Can we tweak a gratuitous feature to make it a little bit more functional?]]></description>
			<content:encoded><![CDATA[<p>If there&#8217;s anything that Apple has proven to the industry over the years, it&#8217;s that <strong>aesthetics matter</strong>.   Not everyone believes this yet: one need only look around at all the less than beautiful products to see that the message has not fully sunk in.</p>
<p>But when, at a 2003 keynote, Steve Jobs introduced the <a href="http://en.wikipedia.org/wiki/PowerBook#PowerBook_G4">backlit keyboard</a> to adulatory oohs and aahs, I was in the minority, waiting impatiently for the moment to pass.  The backlit keyboard <em>looks</em> good, but does it really solve a true need?  Are there really legions of hunters and peckers hunched over their keyboards in the dark, squinting to find the letters, praying for a flashlight?  </p>
<p>If you&#8217;re a touch typist, you keep your eyes on the screen.  Does it help you that the keyboard is backlit?   For non-touch typists, when you happen to be in dim lighting conditions, doesn&#8217;t the display illuminate the keyboard enough to find the key you need?</p>
<p>How often do you compute in the dark?  The clearest scenario might be the dimmed cabin of a night-time flight.  If you aren&#8217;t a touch typist a backlit keyboard would make it easier to type.  Wouldn&#8217;t you just turn on the overhead light?  Battery life is often the scarcest commodity, and there never seems to be enough of it.  I tend to turn the screen down as far as possible to stretch it to the bitter end.  Sure, a glowing keyboard might attract attention and earn me some desperately needed cool points, but it would come at a cost of frantic computing minutes.</p>
<p>When I got my first backlit PowerBook, my expectations were confirmed.  I used it for years, hardly ever needing the backlighting.  When I tried, there were issues.  You see, in good lighting, the keys are dark on light.   And in a dark room, the keys are supposed to be bright on dark.  With in-between lighting, the keys are mid-tone on mid-tone.  Yep, very low contrast.  Unreadable.   Imagine all the keys being like the &#8216;I&#8217; and &#8217;9&#8242; keys in this simulation:</p>
<div style="margin-left: auto; margin-right: auto;  width:334px; padding:5px 0 5px 0">
	<img src="/wp-content/keycap-backlighting/backlit-keyboard.jpg" width="334" height="254" alt="When the lights go down the MacBook Pro's keyboard lights up."/></div>
<p class="imagecaption" style="margin-left: auto; margin-right: auto;  width:380px">When the lights go down the MacBook Pro&#8217;s keyboard lights up.  When lighting is in-between, contrast can be low.</p>
<p>At the end of the day, the cool back-lighting was just as likely to make the keys less legible than more legible.  Oops.  (This issue has come up before:  The <a href="http://en.wikipedia.org/wiki/Palm_V">Palm V</a> also went from dark-on-light with the backlight off to reverse text (light-on-dark) with backlight on.  It was thus nearly impossible to read in medium ambient light.)</p>
<p>By the way, the newer MacBook Pros of 2006 have corrected the problem with much brighter backlighting.  At full blast it will burn holes in your retinas.  What this does for battery life, I cannot say.</p>
<p>Another issue with the first back-lit PowerBooks: the Function keys were not lit, only the QWERTY keys.  As a touch-typist, I don&#8217;t need help with the QWERTYs, thank you.  The QWERTYs I have had down cold since college.  If I ever needed backlighting it would be on on the function keys, the ones that are less used, small, un-bumped, un-clustered keys.  The ones that I sometimes have to look at the keyboard for.  The Function keys, which were dark on the original Powerbooks.</p>
<p>So backlighting on keyboards looks very cool but isn&#8217;t all that functional, at least for touch-typists.  </p>
<p>But it made me wonder: if we had to take backlighting as a given, is there a way to make it more functional and not just a fashion statement?</p>
<p>One annoyance I do run into is having an Num Lock key pressed accidentally.   Pressing Num Lock turns a parallelogram of keys on the right half of the keyboard into a faux numeric keyboard.  The rest of the keys are disabled.  The problem is, it&#8217;s maddeningly easy to accidentally enter Num Lock mode.  All you have to do is accidentally press F6 when you meant to press F5 or F7 or 6 or 7.  And it can be hard to figure out why the keyboard is not responding normally.</p>
<p>Meanwhile, who actually uses that faux-numeric keyboard for its intended purpose?  <em>[Readers?  Do you?]</em> It&#8217;s just too hard to find the tiny secondary numbers labels, and they are in an odd shape.</p>
<p>What if, in Num Lock mode, we could selectively brighten the little numbers and keep the other keys black? It would look like this:</p>
<div style="margin-left: auto; margin-right: auto;  width:334px; padding:5px 0 5px 0">
	<img src="/wp-content/keycap-backlighting/numpad-backlight.jpg" width="334; height="254" alt="Mock-up showing numeric keys active when Num Lock is activated"/>
</div>
<p class="imagecaption" style="margin-left: auto; margin-right: auto;  width:380px">Mock-up showing numeric keys backlit in a different color when Num Lock is activated and other backlighting turned off.</p>
<p>This would require another channel of light, preferably in a different color.  This is not an innovation that will solve global warming, just a nice, functional tweak.  Perhaps more people would learn, use and benefit from the embedded numeric keyboard.</p>
<p>Here&#8217;s a gratuitous tweak.  On the Mac, to enter an accented letter, you first type the accent with the Alt key, then you type a vowel.  Between the two strokes, the keyboard is in a transient mode, waiting for you to type the right letter to go under the ¨ or the ˆ. What if, during this mode, the possible letters that could be accented were highlighted?</p>
<div style="margin-left: auto; margin-right: auto;  width:334px; padding:10px 0 10px 15px">
	<img src="/wp-content/keycap-backlighting/backlit-vowels.jpg" width="334" height="129" alt="Backlit vowels on a keyboard."/>
</div>
<p class="imagecaption" style="margin-left: auto; margin-right: auto;  width:380px">The keyboard could highlight context-sensitive command keys.  For example, when an accent is entered, the vowels would highlight.</p>
<p>Okay, this is pretty gratuitous too.  It&#8217;s a stretch trying to make backlighting actually functional.</p>
<p>Maybe the backlit keyboard could help users find special glyphs like æ and ƒ and ®.  My first computer, the 128k Macintosh, had a great Key Caps desk accessory for just this purpose. (Curiously, this feature that used to be SO important that it was built into the cramped ROM of the 1984 Mac is now extremely hard to find in 2007 MacOS X. If you need it, try out the free <a href="http://www.versiontracker.com/dyn/moreinfo/macosx/23422">KeyViewer</a> utility.)</p>
<div style="margin-left: auto; margin-right: auto;  width:333px; padding:10px 0 10px 15px">
	<img src="/wp-content/keycap-backlighting/keycaps.gif" width="333" height="191" alt="Keycaps from the Mac System 1.1"/>
</div>
<p class="imagecaption" style="margin-left: auto; margin-right: auto;  width:380px">Keycaps from the 1984 Mac System 1.1 help you find alternate characters on the keyboard.</p>
<p>Maybe when you hold down option for a moment the keycap glyphs would emerge from the keyboards with backlighting as I describe for the numeric keys.  Unfortunately, this idea is not very practical. You would need different glyphs for Alt- and Alt-Shifted keys. What&#8217;s more, the glyphs depend on the font in use. If you really wanted to pull this off, you would need something like the exorbitant Optimus keyboard.</p>
<div style="margin-left: auto; margin-right: auto; width:334px; padding:10px 0 10px 15px">
	<img src="/wp-content/keycap-backlighting/optimus.jpg" width="334" height="254" alt="The Optimus keyboard concept demonstrates keycaps with small color displays under each key. "/></div>
<p class="imagecaption" style="margin-left: auto; margin-right: auto;  width:380px">The <a href="http://en.wikipedia.org/wiki/Optimus_keyboard">Optimus</a> keyboard concept demonstrates keycaps with small color displays under each key.</p>
<p>I am not bullish on this keyboard as the future of computing for [regular] users. Who wants to take eyes off the display to look at the input device?  There is some benefit to displays-on-keycaps for learning keyboard shortcuts, but the cost for that benefit is far too high.</p>
<p>[Update 9/13/07:  After seeing the video for the new $28,000 <a href="http://gizmodo.com/gadgets/keyboards/fairlight-28000-xynergi-keyboard-makes-optimus-look-cheap-299271.php">Xynergi keyboard</a> I'm a bit more bullish on the idea's potential, especially for pro users.  The demo video demonstrated new scenarios for arbitrary key cap images that the Optimus did not: 1. for color coding clusters of functions 2. to reflect modes (e.g. play/pause) and 3. to reflect system status.  The keyboard becomes not just an input device, but an output device as well, an extension of the display.  For professional media editing and other specialized fields, it would be a welcome luxury.  And maybe, when cheap enough, a luxury for the rest of us too.]</p>
<p>So perhaps the greatest function of the backlit keyboards is to make you look and Apple look cool.</p>
<p><em>Readers: When do you use keyboard backlighting on your Apple laptops?  How important is it to you?</em></p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/keycap-backlighting/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Buttonphobia, UI Friction, and the iPhone</title>
		<link>http://stealthisidea.com/articles/buttonphobia/</link>
		<comments>http://stealthisidea.com/articles/buttonphobia/#comments</comments>
		<pubDate>Thu, 05 Jul 2007 18:59:34 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Critique]]></category>
		<category><![CDATA[Designs to Steal]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/articles/buttonphobia/</guid>
		<description><![CDATA[Sacrificing simplicity for the appearance of simplicity.]]></description>
			<content:encoded><![CDATA[<p><a href="/articles/wikipedia-stats/"><img style="margin:0px 5px 0px 0px; border:1px solid;" src="/wp-content/buttonphobia/buttonphobia-thumb.jpg" border="1" alt="" width="75" height="75" align="left" /></a>In <a href="/articles/front-row-friction/">UI Friction and Apple’s Front Row</a> I describe gadgets that lack globally accessible buttons for most frequently used operations.  Let&#8217;s call it &#8220;buttonphobia,&#8221; the fear of adding buttons that are actually needed.  It is a form of <a href="/articles/ui-friction/">UI Friction</a> &#8212; design choices that impede the most frequent operations by adding steps or delays.</p>
<p>A design that avoids needed buttons is like a guy with poor eyesight avoiding glasses.  He looks pretty cool standing there, until he starts moving and bumping into things.</p>
<p>The iPhone, too, looks great on a <a href="http://www.appleinsider.com/articles/07/01/09/macworld_high_quality_images_of_apples_iphone_hardware.html">spinning pedestal</a>.  But the clumsiness of its outstanding but buttonphobic UI did not escape the <a href="http://www.cnn.com/2007/TECH/ptech/07/03/iphone/index.html">reviewers at CNN</a>:</p>
<blockquote><p>[..] the lack of buttons requires a lot of tapping to move about the interface.  For example, the Talk and End buttons are only displayed when the phone is in call mode. And since there are no dedicated Talk and End buttons, you must use a few taps to find these features. That also means you cannot just start dialing a number; you must open the dialpad first, which adds clicks to the process. The same goes for the music player: since there are no external buttons, you must call up the player interface to control your tunes. For some people, the switching back and forth may be a nonissue. But for mutlitaskers, it can grow wearisome.</p></blockquote>
<p>(To its credit, Apple included physical volume controls to the iPhone, controls that remain absent on the iPod.)</p>
<p>By adding these buttons back, are we giving up too much?  Would the iPhone or the iPod be what they are with another two to four buttons on the outside?  Here is the industrial design challenge for Apple:  find a way to give the products the buttons they need, while remaining sleek and cool.  Maybe blend them into the black surface to keep the device looking stark and minimal.  Maybe put little <a href="http://www.artlebedev.com/everything/optimus/">OLED displays</a> behind them.</p>
<p>This also constitutes a <strong>design to steal</strong> for cellphone makers scrambling to catch up with the iPhone: add a small number of globally-available mode switching buttons for key tasks.  Then, in your marketing, play up how much more efficient your user interface is than the iPhone&#8217;s.</p>
<p>And remember: the right pair of eyeglasses can actually make its wearer look cooler.</p>
<p><em><strong>7/26/07 Update:</strong> Wall Street Journal has an article specifically about <a href="http://online.wsj.com/public/article/SB118532502435077009.html">Steve Jobs&#8217; animus towards buttons</a>.</em></p>
<h3>See also:</h3>
<ul>
<li><a href="/articles/front-row-friction/">UI Friction and Apple’s Front Row</a></li>
<li><a href="/articles/ui-friction/">UI Friction</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/buttonphobia/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>UI Friction and Apple&#8217;s Front Row</title>
		<link>http://stealthisidea.com/articles/front-row-friction/</link>
		<comments>http://stealthisidea.com/articles/front-row-friction/#comments</comments>
		<pubDate>Thu, 19 Apr 2007 18:31:24 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Analysis]]></category>
		<category><![CDATA[Critique]]></category>
		<category><![CDATA[Designs to Steal]]></category>
		<category><![CDATA[Great Designs]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/articles/front-row-friction/</guid>
		<description><![CDATA[Reducing the needless UI overhead in Front Row.]]></description>
			<content:encoded><![CDATA[<p>Another glorious example of <a href="/articles/ui-friction/">UI friction</a> is Apple&#8217;s <a href="http://www.apple.com/imac/frontrow.html" rel="nofollow">Front Row</a>.  If you are watching a video, to get back to the computer desktop you have to press the &#8220;Menu&#8221; button several times to navigate up the strict menu hierarchy.</p>
<div style="float:right;  width: 281; padding:10px 0 10px 15px">
	<img src="/wp-content/front-row-friction/front-row-ui.jpg" width="281" height="177" alt="Apple's Front Row UI"/></p>
<p class="imagecaption">Apple&#8217;s Front Row UI</p>
</div>
<p>Each button press requires that you wait for the cool animation to complete.  Input is ignored while that is happening.  You cannot queue up several button presses, and there is no short-cut to get to the top of the menu tree. You have to press the button, watch carefully for it to finish, press again and repeat.  </p>
<p>It&#8217;s a tedious <strong>form-kills-function design</strong>.   It&#8217;s not long before the form undermines itself and becomes not cool, just irritating.  The experienced user cannot get faster through time and repetition &#8212; everyone must wait.</p>
<p><a href="/articles/ui-friction/">Once again</a>, the advice for interaction designers is: <strong>give snappy response first</strong>, animate second.  Do not let the latter get in the way of the first, and especially not for frequent tasks.</p>
<p>More can be said about UI friction and Front Row&#8217;s strictly hierarchical, iPod-like interface.  Before you can get to feature B you have to do a lot of mode management overhead work to get out of feature A.  Front Row&#8217;s Menu button is essentially a Back or Escape button.  There is no Home button.  </p>
<p>How might the strict hierarchy of Front Row and the iPod be done differently?  Imagine if there were not just a mode-relative Back button but a global Home button.  Also imagine menu choices that were always in the same place.  Operations could then be reached deterministically &#8212; with the same sequence of key presses.</p>
<p><strong>Determinism is a very valuable design requirement.</strong>  It allows users to learn key sequences through repetition and get faster over time.  (It also lets programmable remotes work reliably since they are not dependent on the starting state of the system.  Every piece of consumer electronics should accept distinct On and Off commands and not just a &#8220;toggle power&#8221; command.)</p>
<p>We could go a step further.  Top features could be accessed directly with separate, global Music, Video, Photos and DVD.  Each would always be one button press away, guaranteed.  (More buttons on the remote, yes, but that is the trade-off between <em>true simplicity</em> and merely <em>the appearance of simplicity</em>.)</p>
<p>The original <a href="http://en.wikipedia.org/wiki/Palmpilot">Palm Pilot</a> was wonderfully low-friction because of this simple idea.  It had independent, global buttons for calendar, contacts, to-do&#8217;s and memos.</p>
<p class="imagecaption"><img src="/wp-content/front-row-friction/palm-pilot-buttons.jpg" alt="Buttons of the original Palm Pilot" /><br />Globally accessible buttons on the original Palm</p>
<p>The PalmPilot always responded to these four hardware buttons.  No state the device was in could override them, no app, no dialog box, not even the state of the device being off!  It even had silk-screened buttons for four other most-frequent tasks: Applications (aka Home), Menu, Calculator, and Find.  </p>
<p>Palm&#8217;s friction-busting approach is a great <b>design to steal</b> for anyone wanting to improve an overly modal consumer electronic product.</p>
<h3>See also:</h3>
<ul>
<li><a href="/articles/ui-friction/">UI Friction</a></li>
<li><a href="/articles/buttonphobia/">Buttonphobia, UI Friction, and the iPhone</a></li>
<li><a href="/articles/ipod-touch-reaction/">Impressions of the iPod touch</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/front-row-friction/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Panning &amp; scrolling with a mouse by tilting</title>
		<link>http://stealthisidea.com/articles/tilt-mouse/</link>
		<comments>http://stealthisidea.com/articles/tilt-mouse/#comments</comments>
		<pubDate>Thu, 12 Apr 2007 21:34:26 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Designs to Steal]]></category>
		<category><![CDATA[Research Topics]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/articles/tilt-mouse/</guid>
		<description><![CDATA[Tilt the mouse to pan and scroll]]></description>
			<content:encoded><![CDATA[<p>Apple submitted a patent for a <a href="http://www.macrumors.com/2007/04/12/apple-patent-application-for-button-less-mouse-design/">button-less pan &amp; zoom ability on a mouse </a>:</p>
<blockquote><p><a href="http://appft1.uspto.gov/netacgi/nph-Parser?Sect1=PTO2&amp;Sect2=HITOFF&amp;u=%2Fnetahtml%2FPTO%2Fsearch-adv.html&amp;r=1&amp;f=G&amp;l=50&amp;d=PG01&amp;p=1&amp;S1=20070080945&amp;OS=20070080945&amp;RS=20070080945">Patent Application number 20070080945</a> details a mouse having a button-less pan and scroll switch. [..] the mouse would sense different hand positions and act in different ways according to how it is being held.</p>
<p>&#8220;In one embodiment, the first mode of operation of the mouse may be a cursor control mode and the first operations on the display screen may be cursor movements on the display screen. Additionally, the second mode of operation of the mouse may be a pan and/or scroll control mode and the second operations on the display screen may be scrolling and/or panning movements on the display screen.&#8221;</p></blockquote>
<p>So maybe this means if you hold the mouse normally you move the mouse; if you hold it a different way &#8212; maybe close to the bottom &#8212; it scrolls and pans.</p>
<p>How about this alternative as a <strong>design to steal</strong>:  Hold the mouse the usual way all the time, but tilt it to scroll in a given direction.  Tilt left and right to scroll horizontally or tilt to the top or bottom edge to scroll vertically.  The more you tilt, the faster it scrolls.</p>
<p>One advantage here is you wouldn&#8217;t have to lift &amp; shift the mouse to keep scrolling down a long page.  You could just tilt the mouse up at the right steepness to scroll down the page and lift again to keep scrolling.  Plus, you don&#8217;t have to shift your hand to start scrolling.</p>
<p>I think this idea is different than the patent application.  The patent seems focused on detecting the user&#8217;s grip and in having different modes of operation, interpreting the mouse motion in different ways.  This idea is about adding extra sensory input to the mouse and allowing it to remain modeless.</p>
<p>How might this be implemented?  There are probably a number of ways&#8230; Accelerometers may be tricky as regular mouse motions accelerate the mouse.  Presumably if the mouse was moving, it wouldn&#8217;t be scrolling or panning.  Alternatively, multiple distance sensors under the mouse would be able to measure the height of different edges of the mouse and from this, tilt angles can be computed.</p>
<p>The <strong>sensitivity</strong> would have to be done right to avoid excessive wrist twisting.  A little motion should go a long way.  It should be possible to lift the edges of the mouse only by lifting fingers while keeping the wrist flat.  Some rebalancing of the mouse may be in order to shift the center of mass closer to the center of the mouse.</p>
<p>Another consideration is the case of <strong>the mouse reaching the edge</strong> during normal mouse motions.  We need to reliably distinguish between tilting to scroll and tilting while shifting a mouse back into range.  One possible way would be to detect mouse movement while tilted.  (The sensors on the edge of the mouse would be full-fledged mouse position sensors.)  Another way would be to require the angle to pass a threshold before it&#8217;s interpreted as a scroll.  The user would snap an edge of the mouse up in one direction and then reduce the angle for finer control.  This topic calls for some <strong>research</strong>, starting with an analysis of how mice are brought back in-range.</p>
<h3>Alternative: Press and drag the heel to scroll</h3>
<p>If this tilting thing is too expensive or difficult to implement an <strong>alternative design</strong> is to construe pressure on the heel of the mouse to indicate scrolling.   Dragging the mouse while pressing the heel scrolls in either direction.  You can think of this as another button on the heel of the mouse that just happens to be used to initiate scrolling.</p>
<p>It would probably be better to interpret these movements as changes in scrolling velocity rather than in absolute scrolling position, to avoid having to shift the mouse back in range.  The further from the &#8220;heel down&#8221; location the mouse moves, the faster the scroll.  Releasing the heel stops the scroll.</p>
<p>This feels pretty good on my old, lightweight Logitech mouse: it&#8217;s easy to add pressure on the ball of the hand to press the heel.  Unlike the Apple patent this avoids having to shift the hand on the mouse.</p>
<p><em>[One other thought:  would it be possible to add detection for <a href="http://en.wikipedia.org/wiki/Yaw_angle"><strong>yaw</strong></a>?  Say the tip of the mouse is lifted off the desk and the mouse pivoted clockwise and counter-clockwise on its heel.  Could multiple optical mouse sensors detect the direction of the twisting?  Perhaps a nice <strong>research topic</strong>.]</em></p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/tilt-mouse/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>User Interface Friction</title>
		<link>http://stealthisidea.com/articles/ui-friction/</link>
		<comments>http://stealthisidea.com/articles/ui-friction/#comments</comments>
		<pubDate>Tue, 27 Feb 2007 21:25:56 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Analysis]]></category>
		<category><![CDATA[Critique]]></category>
		<category><![CDATA[Designs to Steal]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/?p=50</guid>
		<description><![CDATA[UI friction needlessly wastes the user's energy on delays and busywork.]]></description>
			<content:encoded><![CDATA[<p>&#8220;User interface friction&#8221; refers to the wasteful delays in the UI or needless overhead work in managing it.  User interface friction can take several forms:</p>
<div class="article_sidebar"><strong>Bonus design to steal:</strong> For multi-palette apps, introduce deliberate inconsistency in the palette appearance &#8212; give the trim unique colors.  This lets the user quickly find the olive Fonts palette or the brownish Alignment palette, even after the big monitor has been unplugged and they&#8217;ve been shuffled about.</div>
<ol>
<li><strong>Palettes that must be painstakingly re-arranged</strong> to get them off the content area (hello Photoshop and many others).  When switching display configurations, the user must get all palettes placed appropriately before doing real work.  We would like to see systems recognize common monitor configurations and intelligently partition a display into tool areas and content areas.  When switching between, say, a laptop screen and a 24&#8243; display, the user should be able to plug in and work without having to reconfigure the workspace.<br />
<strong>Vision to steal:</strong> This should be supported at the OS-level, for two main reasons: 1. For cross-app consistency, so the user can get used to finding tools at the right or left of the screen across all applications.  2. So the system can referee window positions and sizing.  For example, on the Mac a maximized window knows not to extend under the Dock, so it&#8217;s scrollbar and resize handles remain accessible.  See also:  <a href="/articles/060105_offset_browser_windows/">Making efficient use of big displays</a>.</li>
<li>Often-clicked <strong>buttons that are too small</strong> and hence difficult to target and click (hello <a href="http://en.wikipedia.org/wiki/Fitt%27s_Law">Fitt&#8217;s Law</a>).  Examples of this abound.  In GarageBand, for example, the user must often mute and isolate audio channels, yet the buttons to do are tiny:
<div style="text-align: center;"><img src="/wp-content/ui-friction/garage_band_tiny_buttons.gif" alt="" /></div>
<p>The principle is straight-forward: if the user must click a button frequently, make it big.  (Resistance may be expected from visual design quarters: tiny text and controls look cooler, especially surrounded by massive whitespace.)</li>
<li><strong>Unnecessarily modal UIs</strong> that require you to put the system in the right state before being granted access to an important function.  Try turning down a blaring iPod when it&#8217;s in its protected sleeve with the lock button on.  Worse: try turning down Nine Inch Nail&#8217;s latest while you are navigating the menu structure.  The very cool scroll wheel cannot be used as a volume control until you first navigate your way back to the current song. Better to just yank out those earbuds.<br />
Compare this against a 20-year-old Walkman: its physical volume dial can be adjusted without even having to de-holster it from your cargo pants.  (The upcoming iPhone mercifully brings back physical volume buttons.  Apple may have clued into this UI issue.)</li>
<li><strong>Gratuitous up-front animation</strong>.  A Windows XP user wanting to use a menu must first wait for it to fade in.  This behavior has reportedly gotten <a href="http://www.oreillynet.com/windows/blog/2007/02/is_xp_a_better_gui_than_vista.html">20% worse under Vista</a>.  Mac OS X is not immune:  dialog boxes slide down from the titlebar with lovely acceleration and deceleration motions.  The taller the dialog, the longer the slide. [Anyone know how I can hack this to make it stop?]<br />
Before complying with the user&#8217;s request to leave, <a href="http://en.wikipedia.org/wiki/Clippy">Clippy the insolent paperclip</a> would  sarcastically wave Buh Bye.  (The stupid bent wire <em>knows</em> that such cloying anthropomorphisms are what did him in to begin with.)</li>
</ol>
<div style="text-align: center;"><img src="/wp-content/ui-friction/clippy_hates_philip.gif" alt="" /></div>
<div style="text-align: left; padding-left: 30px;"><em>[Update 8/6/08 This problem with up-front animation slowing the user down is rampant.  It's typically associated with attempts to look cool.  The <strong>iPhone</strong> 2.0 software has lots of it, eg. in stepping from day to day in the calendar, or launching and exiting apps.]</em></div>
<p>People crave and buy ever faster machines for responsiveness.  Yet these up-front animations want you to chill out, take life a little slower.  We&#8217;re not opposed to elegant animations, but they need to be on the <em>tail end</em> of the user&#8217;s operations.  The simple principal is:  whenever productivity matters, UI elements should snap to attention when called upon but may fade away gently once the user has moved on to something else.</p>
<p><strong>The moral of the story is:</strong> when architecting systems, take a moment to isolate the most common and frequent tasks; think of the most efficient theoretical interface to these core tasks and keep comparing your design to this theoretical best.  Beware of design solutions that introduce delay or overhead in these core tasks and eliminate this UI friction</p>
<p><em>Question for readers: what productivity apps have the best palette management UIs?  How are Microsoft&#8217;s new tool ribbons and Adobe&#8217;s new palettes working out?</em></p>
<h3>See also:</h3>
<ul>
<li><a href="/articles/front-row-friction/">UI Friction and Apple’s Front Row</a></li>
<li><a href="/articles/buttonphobia/">Buttonphobia, UI Friction, and the iPhone</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/ui-friction/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Separate slurs from the content in message boards</title>
		<link>http://stealthisidea.com/articles/insultfirst/</link>
		<comments>http://stealthisidea.com/articles/insultfirst/#comments</comments>
		<pubDate>Tue, 31 Oct 2006 02:12:54 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Designs to Steal]]></category>
		<category><![CDATA[Research Topics]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/?p=49</guid>
		<description><![CDATA[If you can't beat down flame wars, how about formalizing them?]]></description>
			<content:encoded><![CDATA[<p>I was just reading a message board <a href="http://www.thinksecret.com/comments/0610macbookpro.shtml">thread</a> about nothing of import.</p>
<p>What struck me was how <a href="http://en.wikipedia.org/wiki/Monty_Python">Pythonesque</a> the whole thing seemed.  Each post began by insulting a prior user, followed by adding the writer&#8217;s alternate viewpoint.  Imagine this with an upper class British accent:</p>
<blockquote><p>
User 1: &#8220;The Proposition &#8216;A&#8217; is true.&#8221;</p>
<p>User 2:  &#8220;From the stunted logic of your post, your mother clearly must have smoked throughout your gestation.  &#8216;A&#8217; is certainly not true.&#8221;</p>
<p>User 1: &#8220;Eureka!  I thought the dodo extinct, yet here is one posting on this very bulletin board.  &#8216;A&#8217; is quite self-evidently true, as any animal evolved beyond the invertebrate knows reflexively.</p></blockquote>
<p>It&#8217;s as though everyone was following a ritual template:  insult, then comment.</p>
<p>Clearly, urging users to avoid flame wars is of no use.  That approach has failed for decades.  </p>
<p>Is there another way?  Perhaps try and go with the flow instead?</p>
<p>Here&#8217;s a <strong>design to steal</strong> (or at least a <strong>research project</strong>): In message boards, provide two input fields.  The first is an optional insult field.  The second is the body of the message, in which nothing insulting may be uttered.</p>
<p>Variants to try:
<ul>
<li>Allow readers to collapse/hide the insult field for all postings, until they are turned back on again.  If they don&#8217;t like that sort of thing they never have to be exposed to it.</li>
<li>Allow readers to police the postings and indicate whether the no-insult-in-the-body rule is violated.  A critical mass of readers reporting a violation automatically bounces a submission back to the sender for correction.</li>
<li>Allow readers to rate the quality of the insult. Give positive points to most good humored or creative or funny insults, negative points to the droll or crass.</li>
</ul>
<p>By acknowledging peoples&#8217; need to vent and by giving it an explicit place, could we separate out the content?  Someone please try and let us know.</p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/insultfirst/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>DabbleDB, FileMaker Pro, and Innovation</title>
		<link>http://stealthisidea.com/articles/dabbledb-thoughts/</link>
		<comments>http://stealthisidea.com/articles/dabbledb-thoughts/#comments</comments>
		<pubDate>Tue, 27 Jun 2006 20:16:47 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Critique]]></category>
		<category><![CDATA[Great Designs]]></category>
		<category><![CDATA[Visions to Steal]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/?p=46</guid>
		<description><![CDATA[Breakthrough innovations in generalist user databases]]></description>
			<content:encoded><![CDATA[<p>We&#8217;ve been let down by the software industry.  By now we should all be as comfortable with building and using everyday databases as we are with word processors and spreadsheets.  There are many uses for them, but because <strong>the tools are too complex</strong>, we don&#8217;t bother.  We <a href="http://en.wikipedia.org/wiki/Satisficing">satisfice</a>.</p>
<h3>FileMaker falls into the trap</h3>
<p><a href="http://www.filemaker.com/">FileMaker Pro</a> is probably still the best-in-breed product for <strong>mom-and-pop data management</strong>.  It&#8217;s a solid product, <strong>a product of integrity</strong>: fast, reliable and plays well with others.  I have used it daily for over a decade for many purposes.</p>
<p>But FileMaker long ago fell into the classic <a href="http://www.businessweek.com/chapter/christensen.htm">innovator&#8217;s dilemma</a>.  They paid too much heed to their most vocal users, database developers.  Database developers are not everyday people.  They are technical and they need to build sophisticated solutions for their clients.  They vociferously demand power, and are far more tolerant of complexities that stymie normal people.</p>
<p>By giving this vocal minority what it wants FileMaker neglected its roots: the everyday productivity worker &#8212; people like teachers, baseball coaches or small business owners.  While the product got increasingly powerful,  fundamentals that would have made the everyday user&#8217;s life better (such as a modern auto-complete data input controls or Google-like searching) were neglected.  Thus <strong>a strong unmet need has been left behind</strong> for a competitor to come along.</p>
<h3>Coulda Been Contenders</h3>
<p>What other everyman database contenders are there?  There&#8217;s <a href="http://office.microsoft.com/en-us/FX010857911033.aspx">Microsoft Access</a>, written by and for developers.  It sure ain&#8217;t a schoolteacher&#8217;s database.  Access just took the old relational database mentality and built a desktop app around it.  There was no new thinking about how normal people could and should go about managing and making sense of their data.  Access has always been far behind FileMaker in simplicity despite the opportunity to learn from it and do better.  Microsoft was going after a different audience: <a href="http://video.google.com/videoplay?docid=8913084255008000794">developersdevelopersdevelopers</a>, again leaving normal people without a simple tool for their jobs.</p>
<p>Anything else?  <a href="http://office.microsoft.com/en-us/FX010858001033.aspx">Microsoft Excel</a> probably had the best shot at consumerizing database management.  People use it as such and it actually is sufficient and flexible enough for many basic jobs.  Excel even has some useful, well-hidden features to help you manage and understand your data (I&#8217;m thinking of <a href="http://www.pcmag.com/article2/0,1895,1776345,00.asp">conditional formatting</a> and <a href="http://office.microsoft.com/en-us/assistance/HA011127901033.aspx">auto-filtering</a>).</p>
<p>But <strong>a few features don&#8217;t a paradigm make</strong>.  Excel never credibly broke beyond the paradigm of the <a href="http://en.wikipedia.org/wiki/Visicalc">VisiCalc</a> spreadsheet.  (That was a while ago; VisiCalc is a contemporary of <a href="http://en.wikipedia.org/wiki/Ms._Pacman">Ms. PacMan</a>.)  Don&#8217;t get me wrong &#8211; spreadsheets are useful in their own right, and it probably wasn&#8217;t Excel&#8217;s destiny to become a true database.  The point is, the holy grail of robust yet simple data management remains undiscovered.</p>
<p>(I should mention that if you are looking for a hosted database solution to use, check out Intuit&#8217;s <a href="https://www.quickbase.com/">QuickBase</a>.  It is a simple, flexible and well-established online database app giving FileMaker a run for its money.)</p>
<p>The <strong>Innovator&#8217;s Dilemma</strong> predicts that sooner or later someone will come along with a <strong>paradigm-busting innovation</strong> that renders the past thinking obsolete.  I&#8217;m not sure this is it yet, but <a href="http://dabbledb.com/">DabbleDB</a> is bursting with new thinking.  It should make the old skoolers think hard about how they are solving customer needs and what has been possible all the while, going back ten years, if only the problem had been looked at in a different way.</p>
<h3>DabbleDB&#8217;s Innovations</h3>
<p>DabbleDB is getting a lot of attention because of how it pushes the envelope on <strong>interactivity within a browser</strong> (need we say &#8220;<a href="http://en.wikipedia.org/wiki/Web_2.0">Web 2.0</a>&#8220;?).  It is an exemplary role model for a desktop app-like experience.  But it&#8217;s the thinking behind how users should be able to view and manipulate their data that excites me.  Some examples:</p>
<ul>
<li>DabbleDB lets you flip between table view and <strong>grouped lists</strong> like it&#8217;s no big deal.  This capability lets you group a list of names by profession, then by city then by company.  In FileMaker you can only see grouped information as printable reports.  You cannot edit or act on data in this view, an ancient limitation.</li>
<li>DabbleDB allows ad-hoc <strong>changes to the data structure</strong> &#8211; especially in converting flat tables into relational structures so you can look at your data inside out.  This type of conversion is a bear in FileMaker Pro, requiring that you set up tables, munge data, import multiple times and make sure things are connected.</li>
<li>DabbleDB rethinks the balance between optimizing for fine-tuned control over layouts versus quick &#038; dirty data analysis.  FileMaker gives very fine control over layout.  This control is no doubt needed in many realms but comes at a trade-off of convenience and speed.  DabbleDB instead emphasizes letting you twist your data around until it makes sense, and then letting you save that view.  It&#8217;s this ability for normal people to do <strong>ad-hoc data mining</strong> that is so badly needed.</li>
<li>DabbleDB lets the user <strong>search across all fields</strong> Google-style.  This is an everyday need that we&#8217;ve grown accustomed to thanks to search engines.  It&#8217;s basic functionality in DabbleDB, but requires advanced techniques in FileMaker.</li>
<li>DabbleDB attempts to pull off relational databases without invoking obtuse relational database theory.  I&#8217;m not sure yet whether it succeeded.  They may have just subbed in other concepts.  For example what we know of as a table, they call a category.</li>
<li>DabbleDB starts to integrate <strong>alternate data views</strong>, specifically a calendar view.  If you have timestamped data, DabbleDB lets you view, filter, edit it in a calendar view like it&#8217;s no big deal.  A calendar view is just the beginning though.</li>
</ul>
<h3>Let me see!  Let me see!</h3>
<p>It&#8217;s another disappointment that for the last fifteen years, in order to <em>see</em> your information you have needed to wrestle it into Excel&#8217;s charting feature.  </p>
<p>I&#8217;d like to see a <strong><a href="http://www.ecn.wfu.edu/SCS/Gallery/">data visualization</a> arms race</strong> with vendors competing on how well they can help you <strong>see &#8212; and therefore make sense of &#8212; your data</strong>.  There is no reason why we shouldn&#8217;t be able to explore scatters, trends, correlations, distributions, maps, timelines and networks by poking a few buttons directly from the database environment.  (There&#8217;s a <strong>vision to steal</strong>, by the way.)  It&#8217;s not the <em>data</em> that matters as much as the <em>insight</em> gleaned from that data.</p>
<p>(Another <strong>vision to steal</strong>: Someone please create a solid <strong>timeline view</strong> of data for mapping out historical events or future plans.  It&#8217;s hard for us humans to visualize chronologies.  We&#8217;ve been without a mainstream tool to help with this forever.)</p>
<h3>Tag, you&#8217;re it</h3>
<p>Here&#8217;s a specific <strong>design to steal</strong> for everyday database products, including DabbleDB:  <strong>Support tagging as a data type.</strong>  Tagging is just a new name for the old concept of <strong>keywording</strong>, but it&#8217;s useful whenever you need to assign an indefinite number of categories to something, from a growable list of possibilities.  (If you need examples, check out any blog or Flikr or Technorati.)  </p>
<p>A tagging feature in an end-user database app would let end-users apply zero or more tags to a record, provide an efficient input UI that facilitates applying existing tags, let the user search against tags, and support adding new tags on the fly as an option.</p>
<h3>The Big But</h3>
<p>As interesting as DabbleDB is, I cannot imagine trading Filemaker in for it.  DabbleDB and QuickBase are <strong>hosted web apps</strong>.  This can be great if you need to collaborate with distant colleagues.  But if you are just dealing with your own data there are some significant downsides.   I wish there was a native desktop app version of DabbleDB.  I&#8217;d be happy just to be able to run the DabbleDB web app on my personal laptop.</p>
<p>For more on the trade-offs between hosted versus local apps, see: <a href="http://stealthisidea.com/articles/hosted-vs-local/">hosted vs. local computing</a>.</p>
<p>Meanwhile, here&#8217;s hoping that Filemaker, or another plucky upstart builds a new generation, desktop-based generalist database product.</p>
<p><em><strong>Readers: </strong>If you know others involved in working on generalist databases, please forward this article.  The URL is: http://stealthisidea.com/articles/dabbledb-thoughts/</em></p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/dabbledb-thoughts/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Redesigning the Buffet Line</title>
		<link>http://stealthisidea.com/articles/buffet-design/</link>
		<comments>http://stealthisidea.com/articles/buffet-design/#comments</comments>
		<pubDate>Sat, 13 May 2006 23:08:58 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Critique]]></category>
		<category><![CDATA[Designs to Steal]]></category>
		<category><![CDATA[Product Design]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/?p=43</guid>
		<description><![CDATA[Applying design lessons between the analog and digital worlds]]></description>
			<content:encoded><![CDATA[<p>Have you ever had this problem at a restaurant buffet?  You wend your way through the line, collecting an armload of food and drink.  You reach the end, fully burdened, and suddenly realize you are without utensils or napkin. </p>
<p>You then turn around and dive back into the line, swimming upstream against the frowning hoards.  Everyone, including you, wonders how you could have made such a silly mistake.  It turns out the utensils were at the very start of the line, at a point where your mind was preoccupied with food, not the logistics of eating it.</p>
<p>But you are comforted to see you are no longer alone in your salmon run: others have realized they too have forgotten their knives and <a href="http://en.wikipedia.org/wiki/Spork">sporks</a>. </p>
<p>Once again, the system sets up a trap.  Once again, the users blame themselves for the &quot;error&quot; when a better designed system would have made the error impossible.</p>
<p>How might the buffet line be improved?</p>
<p>Although part of the analog world, the buffet line as a design problem is not much different than sequential tasks done on a computer.  Examples of this include placing an order on a web site or guiding the user through the initial setup of a new piece of software. </p>
<p>Some key considerations for such sequential problems:</p>
<ul>
<li>Sensitize people up-front about what to expect.</li>
<li>Only provide the essentials necessary for success at each step.  Don&#8217;t convolute what is needed here and now with future concerns.</li>
<li>Defer non-essential options to the end.</li>
</ul>
<h3>Idea to Steal: Guidelines for Buffet Line Design </h3>
<p>Applying such considerations to the design of a buffet line leads to the following sequence of items:</p>
<ol>
<li>First, show the <strong>complete menu</strong> with vegetarian options, common allergens and any other important information clearly called out, so the user can ponder their choices.
  </li>
<li>Offer the <strong>plates</strong> that will contain the food (preferably ones with separate compartments to help prevent plates from folding and to keep the liquid from individual dishes separated)
  </li>
<li>Next comes the <strong>food</strong>.  Space the serving dishes widely enough to allow people to temporarily put down their plates.  For those in a rush, serve grab-and-go foods such as pre-dressed salads and pre-made sandwiches.</li>
<li>Offer <strong>utensils and napkins</strong> at the very end, preferably in individually rolled-up packages for compactness and efficiency.</li>
<li><strong>Separate the drink and dessert stations</strong> to keep them out of the flow of the buffet line.</li>
</ol>
<h3>Deep Fried Food for Thought</h3>
<p>The buffet line is just one example of an interactive system in the analog world.  We normally take them for granted, but they are worthy of closer analysis.  Both good or bad examples can offer lesson on digital designs, just as design principles of the digital world can apply to the analog world as illustrated here.</p>
<p>And the next time someone cuts in front of you at a buffet line to grab a fork and napkin, smile at them knowingly and as you hand over the goods and say, &quot;No problem, it&#8217;s not your fault&quot;.</p>
<p><em>[Readers: Let us know if you run across other examples where design in the the analog or digital world informs one another.]</em></p>
<p><em><a href="http://360.yahoo.com/davidcortright">David S. Cortright</a> is a veteran Bay Area interaction designer currently at Yahoo! Inc. David&#8217;s previous stints included Microsoft&#8217;s Mac division, Claris Corporation and Oracle Corporation. David has a degree in computer science from Stanford University. You can read more from David at <a href="http://360.yahoo.com/davidcortright">http://360.yahoo.com/davidcortright</a>.</em></p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/buffet-design/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Captain Kirk&#8217;s Computer</title>
		<link>http://stealthisidea.com/articles/kirks-computer/</link>
		<comments>http://stealthisidea.com/articles/kirks-computer/#comments</comments>
		<pubDate>Sat, 08 Apr 2006 01:16:54 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Designs to Steal]]></category>
		<category><![CDATA[Research Topics]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/?p=41</guid>
		<description><![CDATA[Add speech and Wikipedia is it.]]></description>
			<content:encoded><![CDATA[<p><a href="http://localhost/articles/wikipedia-stats/">Speaking of Wikipedia</a>, here is a fun interaction design demo for some students to build:</p>
<ul>
<li>Build a kiosk with a PC and a nice microphone.  (Maybe a push-to-talk button if necessary.)</li>
<li>Hook up speech recognition software like <a href="http://www.amazon.com/exec/obidos/redirect?<br />
link_code=ur2&#038;tag=stealthisidea-20&#038;camp=1789&#038;creative=9325&#038;path=external-search%3Fsearch-type=ss%26index=software%26keyword=dragon%20naturallyspeaking">Dragon NaturallySpeaking</a>.</li>
<li>Write an applet that receives the spoken text, parses out filler tex, looks up key phrases in Wikipedia and &#8220;formats&#8221; it for output to speech</li>
<li>Have a text-to-speech synthesizer dictate the introductory paragraph of the Wikipedia article.</li>
</ul>
<p>Then videotape some interactions:</p>
<blockquote><p><strong>Human:</strong>  Computer, tell me about 419 scams<br />
<strong>Computer: </strong>Advance fee fraud, often also known as the Nigerian money transfer fraud, Nigerian scam or 419 scam after the relevant section of the Nigerian Criminal Code that it violates, is a fraudulent scheme to extract money from victims after making them believe they will get an immense fortune. Victims are requested to pay an upfront fee before their purported fortune is released.</p>
<p><strong>Human: </strong>Tell me more<br />
<strong>Computer: </strong>These scams have come to be associated in the public mind with Nigeria due to the massive proliferation of such confidence tricks from that country since the mid-eighties, although they are often also carried out in other African nations, including Togo, Côte d&#8217;Ivoire, [...]</p>
<p><strong>Human: </strong>(interrupting) That&#8217;s enough, thank you.<br />
<strong>Computer: </strong>You&#8217;re welcome.</p>
<p><strong>Human: </strong>Computer, tell me about Archaeopteryx<br />
<strong>Computer: </strong>Archaeopteryx, from the Late Jurassic of Germany, is the earliest and most primitive known bird. The discovery of the first intact specimen, Archaeopteryx lithographica, in 1861, two years after Charles Darwin published The Origin of Species, set off a firestorm of debate about evolution and the role of transitional fossils that endures to this day.</p>
<p><strong>Human: </strong>Computer, tell me about RSI  <em>[This is a topic with several articles.]</em><br />
<strong>Computer: </strong>I have nine topics about RSI.  Do you mean Repetitive strain injury, a disorder affecting bone and muscle from repetitive movement?  Or&#8230;<br />
<strong>Human: </strong>(interrupting) Yes.<br />
<strong>Computer:  </strong>Repetitive strain injury, also called repetitive stress injury or typing injury, is an occupational overuse syndrome affecting muscles, tendons and nerves in the arms and upper back. It occurs when muscles in these areas are kept tense for very long periods of time, due to poor posture and/or repetitive motions.</p>
<p><strong>Human: </strong>Computer, what happend in 1521?</p></blockquote>
<p>You get the idea.  Bonus points if you make it work well over the phone.  And if you get William Shatner to play the human.</p>
<p>Of course this mostly demo stuff.  <b>It will always be easier for humans to interact with machines primarily using hands and eyes, not voice and ears</b> (as long as eyes and hands are available).  And the human I/O ports of voice and hearing are certainly under-exploited today.) </p>
<p>Nevertheless, building <a href="http://en.wikipedia.org/wiki/Captain_Kirk">Captain Kirk&#8217;s</a> computer would be a cool and funny demo and a fun interaction research project. <em> [Has anyone done this yet?]</em></p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/kirks-computer/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>What&#8217;s on your mind, humanity?</title>
		<link>http://stealthisidea.com/articles/wikipedia-stats/</link>
		<comments>http://stealthisidea.com/articles/wikipedia-stats/#comments</comments>
		<pubDate>Sat, 08 Apr 2006 00:30:32 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Research Topics]]></category>
		<category><![CDATA[Visions to Steal]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/?p=40</guid>
		<description><![CDATA[Wikipedia knows what is on our collective mind, but it's not telling.]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.wikipedia.com/">Wikipedia</a> rules.  I use it dozens of times a week to patch decades-old holes in my understanding of the world or to get context around the news.  </p>
<h3>Wikipedia + Launchbar = <a href="http://www.microsoft.com/billgates/speeches/industry&#038;tech/iayf2005.asp">Information at Your Fingertips</a>.</h3>
<p>Accessing Wikipedia is greatly facilitated thanks to <a href="http://www.launchbar.com/">LaunchBar</a>.  As if a king, I get to invoke vast chunks of human knowledge with just four keystrokes:  [cmd-space]wp[space], plus a search term like, say, Scientology.  </p>
<p>[Here is that search template if you want to add it to LaunchBar: "http://en.wikipedia.org/w/wiki.phtml?search=*"]</p>
<p>But Wikipedia does not yet answer a juicy meta-question:  <b>Who else is curious about this topic?</b>  Wouldn&#8217;t it be fascinating to see how worldwide interest in topics like <a href="http://en.wikipedia.org/wiki/Islam">Islam</a>, <a href="http://en.wikipedia.org/wiki/Intelligent_design">Intelligent Design</a> or <a href="http://en.wikipedia.org/wiki/Louis_Armstrong">Louis Armstrong</a> wax and wane as the events of the world unfold?  This is the type of insight into <b>what is on everyone&#8217;s mind</b>, hitherto available only to the lucky few with access to search engine logs.</p>
<p>Wikipedia already has the raw ingredients of an amazing <b><a href="http://en.wikipedia.org/wiki/Meme">meme</a> tracking tool</b>: tons of traffic, tons of content, the ability to capture usage statistics.  They need only a little chopping and sauteeing.  </p>
<p>Here is a <b>vision to steal</b> for Wikipedia:  <b>Show how much interest this topic has garnered historically.</b>  </p>
<p>We&#8217;d like to be able to see, at a glance:</p>
<ul>
<li>How much traffic has this article been getting?</li>
<li>What is the popularity trend?  Spiking? Declining? Flat?  Over the short and long term?</li>
<li>How much editing activity has it been receiving?</li>
<li>How does it rank among all searches?</li>
</ul>
<p>I&#8217;ll leave it to as a <b>design research topic</b> to play out how this might look.  (Feel free to forward mockups my way.)<br />
A couple of other requirements:
<ul>
<li>The data would likely have to be normalized against the growth of general Wikipedia traffic so as not to confound the message.</li>
<li>We&#8217;d want this information to be available proactively (without clicking) but without interferering with the content of the article.</li>
<li>It&#8217;d be nice to be able to drill in deeper to discover the next level of information such as where in the world do people care about a given topic?</li>
</ul>
<p>[What other interesting types of questions could be gleaned from analyzing Wikipedia traffic?]</p>
<p>Also: wouldn&#8217;t it also be nice to have a set of <b>robust APIs</b>, so researchers could go wild analyzing the cause and effect of human curiosity over time and geography?  Software architects: how might you build such APIs and hook up a scalable traffic monitoring system to the open source <a href="http://meta.wikimedia.org/wiki/MediaWiki">MediaWiki</a> (the technological foundation of Wikipedia)? </p>
<h3>See also</h3>
<ul>
<li><a href="http://www.google.com/press/zeitgeist.html">Google Zeitgeist</a>, a form of meme tracker, scrubbed for your protection, that carries the fascinating message that pop culture is really popular.  (And that I&#8217;m really out of touch with it.)</li>
<li><a href="http://en.wikipedia.org/wiki/Wikipedia:Statistics">Wikipedia statistics</a> (such as they are)</li>
<li><a href="http://inventory.overture.com/d/searchinventory/suggestion/">Overture keyword searching</a> &#8211; enter keywords, see how popular they are with search engines today. (Then contrive ways to pepper your articles with the most popular phrases like &#8220;sharon stone&#8221; or &#8220;britney spears sculpture&#8221; or daylight savings&#8221;, in order to attract hits.)</li>
<li><a href="http://www.google.com/trends">Google Trends</a> is interesting. It lets you look up any search phrase, see its popularity over time and what geographies are most into it.  The <a href="http://www.google.com/trends?q=colbert+report&#038;ctab=1&#038;geo=all&#038;date=all">Colbert Report</a> searches are bigger in Canada than in the USA.  <a href="http://www.google.com/trends?q=digg&#038;ctab=1&#038;geo=all&#038;date=all">Digg</a> is on the rise.  Searching for <a href="http://www.google.com/trends?q=sex&#038;ctab=1&#038;sa=N">Sex</a> is especially popular in Islamic countries.  [Update 5/16/06]</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/wikipedia-stats/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Web interface to cellphone configuration</title>
		<link>http://stealthisidea.com/articles/cellphone_web_ui/</link>
		<comments>http://stealthisidea.com/articles/cellphone_web_ui/#comments</comments>
		<pubDate>Tue, 31 Jan 2006 04:26:24 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Designs to Steal]]></category>
		<category><![CDATA[Predictions]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/?p=37</guid>
		<description><![CDATA[Why are we still laboriously entering phone numbers into our cellphones' chintzy UIs?]]></description>
			<content:encoded><![CDATA[<p>It sure is a pain to have to enter phone numbers manually into a new cellphone.  The tiny screen and numeric keypad just aren&#8217;t optimized for the task.  Why can&#8217;t we manage our mobile phone books through a web site and have the data just appear on the phone?</p>
<p>Better yet: we already have our phone numbers recorded on our computers.  Shouldn&#8217;t we be able to leverage that data and all the effort it took to get it onto our computers?</p>
<h3>Design to steal</h3>
<ul>
<li>
Let the user <b>manage address book entries online,</b> from the website of the mobile carrier.  The actual experience would be akin to managing contact lists with Yahoo! Mail or eVite.  Changes made online are quickly, quietly synced down to the user&#8217;s mobile phone.  Just doing this much would be a godsend.
</li>
<li>
Cellular carriers: insist that all future phones be made to support a <b>single phone book standard</b>, to insure interoperability between the web user experience and all future phones.  (There is already precedent for carriers imposing standards on phone vendors: Sprint&#8217;s phones are converging on a standard battery charger connection.)
</li>
<li>
Let the user <b>import phone numbers</b> into the web app from any of the standard address book formats:  vCards, CSV, etc.  This is a quick and dirty way to leverage data that already exists somewhere.
</li>
<li>
Best yet, establish <b>live syncing</b> between the phone and the user&#8217;s data source (Outlook, Address Book).  The Palm and Blackberry devices have always had this.
</li>
<li>
Address books on the PC can get huge, with many old and obsolete entries.  So <b>let the user pick which numbers should be imported</b>.  Better yet, import everything so it&#8217;s there for reference, and let the user pick out the favorite numbers which take precedence when searching the address book.
</li>
<li>
Don&#8217;t stop at just phone book entries: <b>allow the configuration and management of the phone to be done using a web app</b>.  I&#8217;d like to be able to bring up a  web link to the alarm configuration screen and tell my phone to go off at a certain time, rather than fussing with the little buttons and hard-to-use menu structure.  I&#8217;d like to be able to add my preferred mobile websites to a bookmark manager on the phone, without using the clunky and slow phone web browser.
</li>
</ul>
<h3>The broader principle</h3>
<p>There have always been major compromises made when fitting an experience onto a small device, and there always will be.  The devices have smaller screens, smaller print and their input methods are less efficient than a regular PC, monitor and keyboard.</p>
<p><b>Mobile devices should allow for configuration and data management using the richer desktop or web UI.</b>  They can and should still allow for editing while on-the-go. (The iPod, unfortunately, does not.  If you hate a song, you have to delete it back at your computer.  If you want to sort songs into playlists while riding the bus, tough luck.)</p>
<p><b>Palm was the first to grok this principle</b> of managing a mobile device using a PC, with the very first PalmPilot.  Its predecessors, the <a href="http://images.google.com/images?svnum=50&#038;hl=en&#038;lr=&#038;ie=ISO-8859-1&#038;oe=ISO-8859-1&#038;q=sony+magic+link&#038;btnG=Search">General Magic device</a>, the <a href="http://images.google.com/images?svnum=50&#038;hl=en&#038;lr=&#038;ie=ISO-8859-1&#038;oe=ISO-8859-1&#038;q=GO+penpoint&#038;btnG=Search">Go Corp PenPoint tablet devices</a> (which I contributed to) and to a large extent the <a href="http://en.wikipedia.org/wiki/Apple_Newton">Newton</a> attempted to be worlds unto themselves; alternates or even replacements to the PC.  Only the Palm Pilot conceived of the mobile device as a satellite to the PC and shipped with a sufficient desktop-based PIM.  It was a visionary insight that, along with Graffiti input and long, forget-about-it battery life finally made the notion of a PDA viable.  (Unfortunately, Palm Desktop has languished for years.  The incompatibilities between its schema and that of the predominant desktop PIMs are a daily pain for millions.)  But it&#8217;s nevertheless preferable that today&#8217;s <a href="http://www.amazon.com/exec/obidos/redirect?link_code=ur2&#038;tag=stealthisidea-20&#038;camp=1789&#038;creative=9325&#038;path=external-search%3Fsearch-type=ss%26index=blended%26keyword=treo">Treos</a>  sync imperfectly than not at all.</p>
<p><b>The <a href="http://www.amazon.com/exec/obidos/redirect?link_code=ur2&#038;tag=stealthisidea-20&#038;camp=1789&#038;creative=9325&#038;path=external-search%3Fsearch-type=ss%26index=blended%26keyword=ipod">iPod</a> got this right.</b>  Earlier MP3 players had no integrated way to manage your songs on your PC and on your portable music player.  Because it was so hard to rotate the music, users wouldn&#8217;t bother.  The players gathered dust.  This integration between the iPod and iTunes desktop app was one of the key elements of the iPod&#8217;s breakthrough product vision.</p>
<p><b>The <a href="http://www.amazon.com/exec/obidos/redirect?link_code=ur2&#038;tag=stealthisidea-20&#038;camp=1789&#038;creative=9325&#038;path=external-search%3Fsearch-type=ss%26index=blended%26keyword=harmony%20remote">Harmony remote control</a> gets this right.</b>  Rather than laboring over one of those loathesome programmable remote UIs, you program the device from the web.  You pick out the model numbers of your home entertainment components, it downloads the codes to the remote via a docking cradle.</p>
<h3>A prediction</h3>
<p>The idea of setting up a cellphone from a web interface seems pretty self-evident, right?  Wouldn&#8217;t you expect everyone to be working on this?  </p>
<p>My guess is this won&#8217;t be mainstream any time soon.  Why not?  Because <b>the gadget guys and the software guys are different people</b> working in different companies.  The natural propensity of the gadget guys will be to apply ever greater mobile horsepower to increasingly sophisticated functionality to the devices, despite the inherent limitations of the medium&#8217;s user experience.</p>
<p>To bring these two worlds together will take industry leaders with competence in both worlds, plus a pinch or two of vision and <a href="http://en.wikipedia.org/wiki/Systems_theory">systems thinking</a>.  That gives Palm, Microsoft, RIM and Apple a sustained advantage, and will leave the commodity mobile phone vendors playing catch-up.</p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/cellphone_web_ui/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Making efficient use of big displays</title>
		<link>http://stealthisidea.com/articles/060105_offset_browser_windows/</link>
		<comments>http://stealthisidea.com/articles/060105_offset_browser_windows/#comments</comments>
		<pubDate>Fri, 06 Jan 2006 02:46:24 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Designs to Steal]]></category>
		<category><![CDATA[Research Topics]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/?p=36</guid>
		<description><![CDATA[GUI standards, apps and web pages have not kept up with ballooning displays]]></description>
			<content:encoded><![CDATA[<p>I&#8217;m fortunate enough to have a particularly wide display.  Unfortunately, today&#8217;s software isn&#8217;t yet very savvy about dealing with the extra real estate.</p>
<p>In <b>tabbed browers</b>, when I open a link in a new tab it loads the content in the background, without disturbing the current page.  Nice.</p>
<p>But when I select &#8220;open this link in a new window&#8221; to glance at what the link points to, Safari and Firefox both open the new window over the current one, obscuring the curent page.  It would be kinder for them to notice the copious space next to the open window and fill the new window there, so I can continue reading the original page while it does its business.</p>
<p>Here&#8217;s a quick &#038; dirty <b>design to steal</b>:  When opening a new window, look around for unused areas of the screen and put it there if possible.  Minimize overlap on existing windows.  This <b>applies to most multiple document apps</b>, not just browsers. </p>
<p><b>The point is even more general</b>.  Most apps and OS&#8217;s are not yet enlightened when it comes to huge monitors.  <b>Windows XP</b> has an archaic &#8220;maximize&#8221; button that offers up the entire screen to the lucky window.  This was reasonable in the era of the 15&#8243; or 17&#8243; monitor, but most apps have no clue about what to do with the acres of real estate on 20&#8243; or 24&#8243; displays.  (Don&#8217;t get me started on the <a href="http://en.wikipedia.org/wiki/Multiple_document_interface">MDI</a>/<a href="http://en.wikipedia.org/wiki/Single_document_interface">SDI</a> mess.)</p>
<p>On the Mac things are a bit better because the window zoom button is not sworn to fill the whole screen no matter how gargantuan.  A zoomed Safari window, for example, will take the full screen height but will contain itself to a reasonable width.  But these common sense limits are not universal.  An MS Excel 2004 spreadsheet with only a couple of columns of data will nevertheless fill the entire screen when maximized, obscuring all other windows and forcing the UI overhead task of resizing the window.</p>
<p>The point even extends to web sites.  Some of the most <b>common web sites</b> also take the lowest-common denominator approach, scrunching their content into a dense block even for users with larger monitors:</p>
<p class="imagecaption"><img src="/wp-content/big_screens/yahoo_24.jpg" title="Yahoo on a huge windows screen"/></p>
<p class="imagecaption">Yahoo.com on Windows XP, maximized on a 24&#8243; window: not the most effective use of whitespace.</p>
<p><b>Vision to steal:</b>The OS vendors need to describe and demonstrate best practices for making use of big screens and multiple monitors.</p>
<p><b>Design research topic:</b>What should those best practices be?  We need to account for different classes of applications including web pages that must scale between tiny and huge displays, &#8220;power apps&#8221; like photo, video, music editing that establish self-contained workspaces, and so forth.  How can window management overhead be minimized?  What is the best approach to floating palettes of tools?  How should they work with multiple monitors?  How should they adjust when monitors come and go?</p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/060105_offset_browser_windows/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Automatically Exchanging Encryption Keys</title>
		<link>http://stealthisidea.com/articles/exchanging-public-keys/</link>
		<comments>http://stealthisidea.com/articles/exchanging-public-keys/#comments</comments>
		<pubDate>Wed, 09 Nov 2005 19:45:21 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Designs to Steal]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/articles/exchanging-public-keys/</guid>
		<description><![CDATA[Let's let email clients deal with the hassle of exchanging public keys.]]></description>
			<content:encoded><![CDATA[<p>In an earlier <a href="/articles/email-encryption">article about email encryption</a> I wondered why it wasn&#8217;t in more common use. One of the barriers to its adoption is <strong>the hassle in exchanging public keys</strong>. </p>
<p>[A brief primer: for me to send you an encrypted message I have to lock it up with a public key that you provide to everyone. The message can then only be unencrypted with a private key, which you keep to yourself. Before I send you something secret I must first obtain your public key, which can be a hassle. Today the typical way to get someone's certificate is for them to send you a signed email.]</p>
<h3>Trading public keys for the first time</h3>
<p>The basis of this approach is to have the email clients talk to each other  about the public keys. Once that&#8217;s established then your secret message can be safely passed along.</p>
<p>Here is the outline of a typical interaction of sending an encrypted email to someone for the first time:</p>
<ol>
<li>User A tells his email client to send User B an encrypted email</li>
<li> A&#8217;s email client sees that it doesn&#8217;t have B&#8217;s public encryption key, so it can&#8217;t yet send the message </li>
<li>A&#8217;s email client keeps the email queued up and sends B&#8217;s client a request for her public key. This is just a regular email message in a format that will be automatically recognized by B&#8217;s client. </li>
<li>B&#8217;s email client automatically responds to the request with B&#8217;s public key. The request for public key is human-readable. So if B&#8217;s email client does not know this protocol, user B sees something like this: &quot;This message is a request from A a@a.com for your public key, in order to send you an encrypted message. Please reply to this message with yor public key. If you are not sure how, click here.&quot; </li>
<li>User A&#8217;s email client receives B&#8217;s public key, and incorporates into B&#8217;s contact information silently.</li>
<li>User A&#8217;s email client sees that it has messages awaiting B&#8217;s public key. It encrypts and sends the message.</li>
</ol>
<p>The net result is that secure email can be traded as usual, with the details worked out by the clients. It cuts out middlemen &quot;Certificate Authorities&quot; who collect and distribute public keys. If someone needs to send something sensitive to someone who is not yet setup for encryption, it lays a clear path for that user, alleviating the burden on the sender to educate the recipient.</p>
<h3>Bonus security: Making sure B is really B </h3>
<p>Security freaks may be concerned that someone who is not B may intercept my request, impersonate person B, give a fake public key and get me to send the secret message to the bad guy. This concern seems most directly addressed with a dose of lithium.</p>
<p>Nevertheless, if it really becomes necessary to make sure that B is who B claims she is, here is a more natural way:</p>
<ul>
<li>At step 2 above, A is prompted for a question to ask B that is something that only B could answer: &quot;To make sure this message is really going to John Smith, please enter a question that only this person will be able to answer (eg. your nickname or a piece of information you recently told B verbally).&quot;</li>
<li>Person B receives the request as an email message and replies with the answer to the question.</li>
<li>Person A receives the response with B&#8217;s answer to the question. A&#8217;s email client asks the user to accept or reject the answer. When the response is accepted the accompanying public key is associated with B&#8217;s contact record.</li>
</ul>
<p>Again, this is probably not necessary for 99.9% of cases and should be avoided, as it adds another geeky layer. </p>
<h3></h3>
<h3>Forcing corporate and government employees to exchange encrypted email </h3>
<p>What can executives appalled at the corporate secrets coming and going through the ether do? They could <strong>establish a corporate policy that blocks unencrypted emails from leaving the premises</strong>. This would quickly force insiders and outsiders to play by the rules: no unencrypted email exchange with the outside world. <em>[Anyone know of corporations with such policies?] </em></p>
<p>What about partners sending things in? Even more heavy-handed policy would be to prohibit incoming email from being delivered without encryption. The gateway at the corporate boundary would <strong> automatically bounce-back a message,</strong> telling outsiders to resend the message with encryption, and link to clear step-by-step instructions for setting this uip. </p>
<p>A <strong>more humane variant</strong> would allow the first x (say 3) messages through without warning, to allow for sporadic inquiries. The next y (say 5) messages would also be allowed through as a grace period. The outsider would be forewarned that ongoing communication will require that future messages be encrypted, and provided instructions for setting it up and the public key of the recipient. Finally, subsequent messages would be rejected. The recipient inside would be notified that a message from that user was rejected.</p>
<p>These policies would get outside partners onboard with encryption very quickly, plugging the inadvertent exposure of sensitive information to the open Internet.</p>
<h3>See also</h3>
<ul>
<li><a href="/articles/encrypted-wifi/">Open, yet encrypted Wi-Fi</a></li>
</ul>
<h3>Questions for Readers</h3>
<ul>
<li>Has public key trading been solved in a better way yet?</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/exchanging-public-keys/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

