<?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; Designs to Steal</title>
	<atom:link href="http://stealthisidea.com/articles/category/product-design/designs-to-steal/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>Wed, 01 Sep 2010 18:54:19 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>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>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>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>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>3</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><span style="overflow: hidden; position: absolute; height: 0pt; width: 0pt;"><a href="http://vtsc.info/en/publication/">composite triple beat</a></span> 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>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>1</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>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>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>0</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>3</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>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>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>
		<item>
		<title>Bring related windows forward during Alt-Tab</title>
		<link>http://stealthisidea.com/articles/alt-tab-tweak/</link>
		<comments>http://stealthisidea.com/articles/alt-tab-tweak/#comments</comments>
		<pubDate>Wed, 31 Aug 2005 18:38:35 +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=31</guid>
		<description><![CDATA[Here is a tweak to the micro-interaction of Alt-Tabbing]]></description>
			<content:encoded><![CDATA[<p>Alt-Tab behavior has been around a long time [since Windows 3.0? 3.1?]. It has become a computing standard. Even Apple stole &amp; refined this design from Microsoft.  Good for them and their users. We wish Apple would be quicker to pick up on innovations not invented there.</p>
<p>Apple made Alt-tabbing prettier, but they didn&#8217;t fundamentally improve the interaction. So Alt-tabbing has remained fundamentally unchanged for about fifteen years. Here is a  refinement on the  micro-interaction, that applies to both Macs and Windows.</p>
<p><strong>What&#8217;s to improve?</strong> The issue is that using Alt-Tab to switch between apps is mentally  indirect. When using the mouse, the user can just point and click, effectively saying, &#8220;Go there, assuming the target window is visible. Very direct.</p>
<p><strong>Alt-Tabbing requires more mental effort</strong>. The user must first figure out which app owns what they are looking for, then locate the app&#8217;s corresponding &#8216;s icon, then tab to it. It is not a visual process of just pointing to what you want. This is not a big deal if you only have a couple of apps open.  But today&#8217;s  fat PCs encourage the user to use many apps simultaneously.  And if those apps are similar and  confusable, such as with multiple text apps, or graphics apps, or web apps, it can be a real distraction to the work at hand.</p>
<h3>Design to steal</h3>
<p>When the user Alt-Tabs between apps, <strong>bring forward each app in succession, dimming back the rest</strong>.  Users can Alt-Tab until they see the window they are looking for.</p>
<p style="text-align: center;"><img src="/wp-content/alt-tab-tweak/alt-tab-1.jpg" alt="" width="400" height="287" /></p>
<p class="imagecaption" style="text-align: center;"><strong>1) Starting point</strong> &#8211; App A is the front-most app. Windows B1 and B2 belong to the same app. App C is hidden or minimized. App D is visible.</p>
<p style="text-align: center;"><img src="/wp-content/alt-tab-tweak/alt-tab-2.jpg" alt="" width="400" height="287" /></p>
<p class="imagecaption" style="text-align: center;"><strong>2) </strong>User presses Alt-Tab;<strong> windows B1 and B2 come forward </strong>because they belong to the same app. Everything else dims back.</p>
<p style="text-align: center;"><img src="/wp-content/alt-tab-tweak/alt-tab-3.jpg" alt="" width="400" height="287" /></p>
<p class="imagecaption" style="text-align: center;"><strong>3) </strong>User presses Alt-Tab again; <strong>app C becomes temporarily visible,</strong> from its minimized or hidden state.</p>
<p style="text-align: center;"><img src="/wp-content/alt-tab-tweak/alt-tab-4.jpg" alt="" width="400" height="287" /></p>
<p class="imagecaption" style="text-align: center;"><strong>4) </strong>User presses Alt-Tab again;<strong> app C hides again and app D comes forward</strong>.</p>
<p style="text-align: center;"><img src="/wp-content/alt-tab-tweak/alt-tab-5.jpg" alt="" width="400" height="287" /></p>
<p class="imagecaption" style="text-align: center;"><strong>5) </strong>User releases the Alt key; <strong>app D is now front-most.</strong></p>
<p>This approach is more direct and visual &#8212; users no longer need to mentally map what they are looking for to the application and its icon.</p>
<p>The windows for hidden apps or minimized documents become temporarily visible as the user cycles through them.</p>
<h3>Refinements and variants</h3>
<p><strong>Smoothing it out</strong> &#8211; This solution may cause a lot of inelegant flash as windows come and go. One way to smooth this out is to experiment with bringing forward and brighten the next app instantly (because we must minimize <a href="http://stealthisidea.com/articles/ui-friction/">UI friction</a>).  Then  fade the others back, over the course of a half second or so. This would help make the transitions feel more organic and gratifying.</p>
<p><strong>Switching between documents</strong> &#8211; In the course of juggling work, one is  as likely to need to switch <em>between documents within an app</em> as <em>between  apps</em>. Despite these being sister tasks, document switching is done very differently than app switching. On the Mac, the user presses Alt-` to cycle among documents.  Each keystroke reveals the next document.  Unlike app switching, no Alt-Tab UI is shown.</p>
<p>How might  document switching and app switching be <a href="http://stealthisidea.com/articles/blend-vs-bolt/">blended</a>? <strong>What if the  document cycling  worked analogously to app cycling?</strong> Instead of merely bringing document apps forward, Alt-` would reveal a row of document miniatures.  Successive key presses would step through these.  Releasing the Alt key would bring the selected document to the forefront.</p>
<p><em>[Update 7/27/09 Here is a mock-up of the idea that uses the style of Exposé]</em></p>
<p><em><br />
</em></p>
<p><em><img class="aligncenter size-full wp-image-754" title="doc-switch" src="http://stealthisidea.com/wp-content/uploads/2005/08/doc-switch.png" alt="doc-switch" width="450" height="356" /><br />
</em></p>
<p>The user then gets to navigate to a document using either of the two strategies: the old way, by Alt-`ing and releasing until the document is frontmost, or by keydowning on Alt-` to see the line up of available documents spotting the desired document in the line-up and then repeating the Alt-` keystrokes until it is highlighted, then releasing.</p>
<p>Combining both ideas: the user could get to any document by first Alt-tabbing to the right application, then Alt-`ing to the right document.</p>
<h3>Follow-up Research work</h3>
<p>This is not the end of the story with updates to be made to application switching. Here are some related problems.</p>
<ul>
<li><strong>Apple&#8217;s vaunted <a href="http://en.wikipedia.org/wiki/Expos%C3%A9_%28Mac_OS_X%29">Exposé</a> feature</strong> exists to solve the same needs and scenarios of switching between windows, yet it does so in a completely different way. It scatters all the visible windows out on the desktop in miniature, so the user can select one. This s fine if you have few windows open, but not if you have many. It&#8217;s just too much to scan through a dozen windows, finding a needle in a haystack.  It&#8217;s even more work if the windows are splayed out on a large, modern display.  And in a frustrating oversight, your efforts are in vain if you&#8217;re looking for an app you happen to have hidden or a document you  minimized. How might Exposé, app cycling, document cycling and even the <strong><a href="http://en.wikipedia.org/wiki/Dock_%28computing%29">Dock</a></strong> be consolidated into a simpler, coherent, continuous system? <em>[See <a href="http://stealthisidea.com/articles/blend-vs-bolt/">Blending it in versus bolting it on, and Alt-Tabbing</a> for part of the answer.]</em></li>
<li>On Windows, how can app cycling be melded with some improvement on the painful <strong>system tray</strong>?  How can document switching be added to the mix?</li>
<li>This proposal works with the fundamental conceptual model of applications owning documents. Is there a better way?</li>
</ul>
<h3>Related questions</h3>
<p>Does anyone know what logic Mac OS X uses to determine the order of the icons in its Alt-Tab UI?  The first two are  the last you used but the rest seem to be in a random order.  Is this a bug or a feature?  <em>[7/27/09 This was answered in a comment to <a href="http://StealThisIdea.com/articles/alt-tab-order/">What is the alt-tab order?</a>]</em></p>
<p>See also:</p>
<ul>
<li> <a href="http://stealthisidea.com/articles/blend-vs-bolt/">Blending it in versus bolting it on, and Alt-Tabbing</a></li>
<li><a href="http://stealthisidea.com/articles/alt-tab-order/">What is the alt-tab order?</a></li>
</ul>
<p><em>[Updated 2/22/06 to clarify the document Alt-` idea] </em></p>
<p><em>[Updated 7/27/09 to further clarify and add mock-up of the document switching UI]<br />
</em></p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/alt-tab-tweak/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Resize browser text without losing your place</title>
		<link>http://stealthisidea.com/articles/browser-zoom-2/</link>
		<comments>http://stealthisidea.com/articles/browser-zoom-2/#comments</comments>
		<pubDate>Wed, 15 Jun 2005 01:35:51 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Critique]]></category>
		<category><![CDATA[Designs to Steal]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/?p=26</guid>
		<description><![CDATA[Ever lose your place when zooming into a browser page?  It's not just you!]]></description>
			<content:encoded><![CDATA[<p>Do you ever click the font size up button in your browser?  (If not, enjoy your young eyes while they last! When you click that button, do you ever lose your place? Do you have to scroll down to find where you last left off?</p>
<p>Have you gotten into the habit of selecting a block of text before you click that  button, so you have a distinct point of reference to look for after the zoom? </p>
<p>Browsers are doing something strange when you increase or decrease the font sizes.</p>
<p>For example:</p>
<ul>
<li>In <strong>Safari</strong>, scrolling to the middle of an article and repeatedly clicking the font up button to zoom in progressively scrolls to the top of the article until its headline is visible at the top.</li>
<li>Clicking font down repeatedly scrolls down until the bottom of the article is visible.</li>
<li><strong>Firefox</strong> and <strong>Internet Explorer</strong> do something similar.</li>
</ul>
<p>Does it have to be this way? Not every app has this problem: <strong>Microsoft Word&#8217;s zoom feature</strong>, for one,  keeps the content where you expect it when you zoom in and out.</p>
<h3>Designs to steal</h3>
<p>The effect should be akin to moving closer and farther from the screen. </p>
<p>Here are three possible heuristics to try out:</p>
<blockquote>
<p>Alternative 1.  When the user clicks the font size up/down, keep the line at the top of the page where it is after the zoom. </p>
<p>Alternative 2.  Keep the line of text at the center of the page where it is after a zoom. </p>
<p>Alternative 3.  If there is a selection active, keep its top edge where it is after a font up/down</p>
</blockquote>
<p>I expect number 2 to feel most natural because it should give the brain the effect of zooming in and out.</p>
<p><em>[Readers: do you notice this too?  Are there any browsers who do this well? Anyone know why most browsers  have this issue?]</em></p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/browser-zoom-2/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Easier layer selecting in Photoshop</title>
		<link>http://stealthisidea.com/articles/selecting-layers/</link>
		<comments>http://stealthisidea.com/articles/selecting-layers/#comments</comments>
		<pubDate>Sun, 12 Jun 2005 05:01:52 +0000</pubDate>
		<dc:creator>Philip Haine</dc:creator>
				<category><![CDATA[Designs to Steal]]></category>

		<guid isPermaLink="false">http://stealthisidea.com/?p=24</guid>
		<description><![CDATA[Selecting objects in Photoshop can be a pain.  Here's a remedy.]]></description>
			<content:encoded><![CDATA[<p><img src="/wp-content/selecting-layers/palette.png" alt="Photoshop's layer palette" width="234" height="372" align="right"/>
<p>Much as we wish otherwise, <a href="http://www.amazon.com/exec/obidos/redirect?link_code=ur2&#038;camp=1789&#038;tag=stealthisidea-20&#038;creative=9325&#038;path=ASIN/B0000DBOAX/qid=1118543916/sr=2-1/ref=pd_bbs_b_2_1">Photoshop</a> does not have an object-oriented conceptual model. You can&#8217;t just click and act on an element of a composition. You need to find and select the layer on which the element resides.</p>
<p>Someday someone will demonstrate how much funner graphics work can be if the bitmap manipulation capabilities of Photoshop were combined with the object-oriented approach of <a href="http://www.amazon.com/exec/obidos/redirect?link_code=ur2&#038;camp=1789&#038;tag=stealthisidea-20&#038;creative=9325&#038;path=tg/detail/-/B00009YUGN/qid=1118543606/sr=8-1/ref=pd_csp_1?v=glance%26s=software%26n=507846">OmniGraffle</a>, <a href="http://www.amazon.com/exec/obidos/redirect?link_code=ur2&#038;camp=1789&#038;tag=stealthisidea-20&#038;creative=9325&#038;path=http://www.amazon.com/gp/product/customer-reviews/B0000BZ54T/ref=cm_cr_dp_2_1?%5Fencoding=UTF8%26s=software">Visio</a>, <a href="http://www.stone.com/Create/Create.html">Stone Create</a>,  the old ClarisImpact and many others. With those apps you select an item merely by clicking on it. </p>
<p>In the mean time, Photoshop users are stuck with having to select layers. Unfortunately they don&#8217;t make it easy. To select one of the rounded rectangles in this example, you have to try and discern the layout from the nasty layers palette (at right): </p>
<p align="center"><img src="/wp-content/selecting-layers/original.png" width="244" height="146" align="top"/> </p>
<p>To make life a bit easier, Photoshop lets you right click to see a list of layers under the cursor (assuming you are in the right mode):</p>
<p align="center"><img src="/wp-content/selecting-layers/menu.png" alt="Photoshop's layer selection menu" width="340" height="145"/></p>
<h3>So what&#8217;s the problem?</h3>
<p>To come up with a  better solution, it&#8217;s important to get precise<br />
about what you&#8217;re trying to fix. Here, the issues are:</p>
<ol>
<li>Who knows what the name of the layer is? Most layers are never labeled.</li>
<li>And even those that are labeled requires the designer to mentally map what they see into its name, which <a href="http://www.amazon.com/exec/obidos/redirect?link_code=ur2&#038;camp=1789&#038;tag=stealthisidea-20&#038;creative=9325&#038;path=tg/detail/-/0321344758/qid=1118541642/sr=8-1/ref=pd_csp_1?v=glance%26s=books%26n=507846">requires   thought</a>.   Is there a more direct way?</li>
<li>Photoshop doesn&#8217;t indicate what layer is selected on the canvas. So even   if you have the right layer selected, you can&#8217;t be sure. You either have   to assume you do (which leads to the frequent and maddening wrong-layer error),   or look over at the layers palette to check.</li>
<li>Even if you check with the layers palette you may not succeed: the thumbnails   are small and you may have multiple layers with similar looking thumbnails.   The remedy is to hide and show the layer and see if it&#8217;s the one you were   expecting. </li>
</ol>
<p>Can we do better? Is there a more direct and sure-fire way to select a layer without guesswork? Can we do it visually so the user doesn&#8217;t have to enter the world of words?</p>
<h3>Selecting layers graphically </h3>
<p>Here is how a graphical layer selection menu could look:</p>
<p align="center"><img src="/wp-content/selecting-layers/shape3.png" alt="Graphical layer selection menu" width="373" height="317"/> </p>
<p align="center"><em>a graphical layer selection menu </em></p>
<p>Some elements of this approach:</p>
<ul>
<li> The graphical menu includes the name of the layer for the use cases where   that is needed and used.</li>
<li>Rolling over an item in the menu highlights the corresponding item in the layout. This helps when there are multiple similar looking layers. </li>
</ul>
<h3>Variants of the idea </h3>
<p> 1. Skew the layers to emphasize that you&#8217;re looking at a stack of layers:</p>
<p align="center"><img src="/wp-content/selecting-layers/perspective.png" alt="Layer menu, skewed" width="370" height="219"/></p>
<p>2. For some extra (Mac OS X-inspired) bling, rapidly animate proxies of the layers from their spot on the canvas to the stack of layers.</p>
<p>3. Let the user press a modifier key with the right-click to line up <em>all</em> the currently visible layers. Maybe even the invisible ones, too, to facilitate finding and turning on a wanted hidden layer. </p>
<p>This idea isn&#8217;t limited to Photoshop and its layer issues, by the way. It can be hard to select the right object in a layered composition even with the object-oriented graphics apps.</p>
<p><em>[Readers: Do any current apps do this well?] </em></p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/selecting-layers/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>The curse of the magnetic strip</title>
		<link>http://stealthisidea.com/articles/cardreaders/</link>
		<comments>http://stealthisidea.com/articles/cardreaders/#comments</comments>
		<pubDate>Wed, 25 May 2005 08:04:20 +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/19/</guid>
		<description><![CDATA[Murphy would say that the right way to insert a magnetic card is the fourth one you try.]]></description>
			<content:encoded><![CDATA[<p>It&#8217;s happened to you, hasn&#8217;t it?  You try inserting your card at an ATM, gas pump or hotel door, and nothing registers, so you have to keep trying different ways until it works.</p>
<p>  <img src='/wp-content/cardreaders/magnetic_card1.jpg' alt='Does the card go this way?' />  <img src='/wp-content/cardreaders/magnetic_card2.jpg' alt='Or this way?' /></p>
<p><img src='/wp-content/cardreaders/magnetic_card3.jpg' alt='Or maybe this way?' />  <img src='/wp-content/cardreaders/magnetic_card4.jpg' alt='Darn!  Murphy's law strikes again.' /><br />
  And it&#8217;s all your fault, isn&#8217;t it?  For not knowing by now which way to insert it?  For not looking at the little pictogram that makes it all clear?  </p>
<p>I conducted some <strong>quick &amp; dirty product research</strong>, asking several supermarket checkout clerks how often customers mis-swipe. The estimates they gave ranged from <strong>1/3rd to 50% error rate</strong>, a critically high rate. Since so many people make the error, it&#8217;s not your error at all, but a <strong>trap built into the system</strong>.</p>
<h3>What is the problem?</h3>
<p>There are two main sources of the problem:</p>
<ol>
<li>There are four possible ways to insert a card, but <strong>only one way is considered &#8220;correct.&quot;</strong></li>
<li><strong>Card readers are inconsistent among themselves</strong>.  Some have a horizontal slot, some a vertical slot, some a face that you swipe.  These different experiences tug the  user in different directions, with the training imparted by one device reversed by the next.  As a result, one never really get good at inserting the retched card in the retched slot.</li>
</ol>
<p>Different card readers try  to show a diagram of how you&#8217;re supposed to hold and insert your card.  The best of these show it in perspective, making the mapping from reality to the diagram easier. But these efforts are beside the point. To  process instructions, even visually, requires you to halt your conversation, break your train of thought, read and think. This is expecting too much of someone doing a cursory activity. </p>
<p>Some ATMs detect the leading edge of the card and  block the card if it&#8217;s not going in the right way. This is a bit better, but it still requires experimentation to get right. </p>
<p>Regular keys  don&#8217;t typically have this problem.  Must card keys?</p>
<h3>Vision</h3>
<p>We need a solution that is as automatic and thoughtless as inserting a regular key into a keyhole.  One that doesn&#8217;t require you to stop, think, experiment; one that is obvious. Why can&#8217;t the slot just accept the card <strong>however you insert it?</strong></p>
<h3>Possible remedies</h3>
<p>Instead of just one solution, let&#8217;s show a range of possibilities that might be appropriate depending on the circumstances: whether we need to worry about backwards-compatibility of legacy cards, economic constraints, and so forth:</p>
<ol>
<li><strong>Make the shape of the card asymmetric</strong>, so there is only one way it can be inserted.  (Precedent: the punch card of the 60&#8242;s or the SD card of today).  The downside is you still have to insert the card before discovering that it&#8217;s the wrong way.<br />
  <img src="/wp-content/cardreaders/sd-card.jpg" alt="SD card, showing asymmetry" width="90" height="118"/>  </li>
<li><strong>Include two or four magstripe readers in the slot</strong>.  This makes the machine tolerant of other ways of inserting the card. Two readers reduces the error rate greatly; four readers eliminates it altogehter. No instructions needed!<em>[5/26/05 Update: I came across a soda vending machine that allowed bills to be inserted face up, either way]</em></li>
<li><strong>Put the stripe down the middle of the card</strong>, not against one edge.  Have the reader read the information backwards or forwards.  Then you only have to insert the card up or down.  This solution works if you don&#8217;t have to worry about the &#8220;installed base&#8221; of users.  Here&#8217;s the before (left) and mocked-up after (right):<br /> <br />
  <img src='/wp-content/cardreaders/stripe-before.jpg' alt='Regular magstripe' />  <img src='/wp-content/cardreaders/stripe-after.jpg' alt='Magnetic stripe in the middle of the card' /> </li>
<li><strong>Have a strip in the middle of the card and include two magstripe readers in the reading device.</strong> (hybrid of 2 and 3):  This allows all four ways of inserting the card, with the lower cost of only two readers.</li>
<li><strong>Avoid having to insert the card to begin with</strong>. There are office doors that require only a wave of a card key across a reader. Prius owners never have to insert a key into the ignition; it just detects your presence through a key fob and lets you open the door and start the car. (But be wary of the unintended consequences of RFIDs.)</li>
</ol>
<h3>Applies to</h3>
<ul>
<li>Any device that accepts magnetic cards:  ATMs, Credit card readers, check-in kiosks in airports, parking ticket kiosks, transit turnstiles, library self-checkout kiosks.</li>
<li>Vending machines that accept <strong>bills</strong> </li>
</ul>
<h3>Follow-up Research Topic </h3>
<p>For the interaction design researchers or card reader companies:  create a prototype card reader which accepts cards in any orientation.  Try out different orientations of the reader.  Measure the natural ways that people insert the cards to inform the design solution.</p>
<p>(Hypothesis:  vertically orientated would have fewer errors than horizontally-oriented readers, because there is a clearer &#8220;up&#8221;.  If so, it reduces the necessity &#8212; and cost &#8212; of including magstripe readers for two of the orientations.)  </p>
]]></content:encoded>
			<wfw:commentRss>http://stealthisidea.com/articles/cardreaders/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
