<?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>brool &#187; design</title>
	<atom:link href="http://www.brool.com/index.php/category/design/feed" rel="self" type="application/rss+xml" />
	<link>http://www.brool.com</link>
	<description>brool \brool\ (n.) : a low roar; a deep murmur or humming</description>
	<lastBuildDate>Sat, 26 Jun 2010 21:05:13 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Implications Of Fitt&#8217;s Law</title>
		<link>http://www.brool.com/index.php/implications-of-fitts-law</link>
		<comments>http://www.brool.com/index.php/implications-of-fitts-law#comments</comments>
		<pubDate>Sun, 09 May 2004 04:51:00 +0000</pubDate>
		<dc:creator>tim</dc:creator>
				<category><![CDATA[design]]></category>

		<guid isPermaLink="false">http://blog.brool.com/design/fittslaw.html</guid>
		<description><![CDATA[Tuesday design rant.
Fitt&#8217;s Law (discovered in 1954![1]) is a simple formula that
describes the amount of time that will be needed for the average user
to click on a target on the screen. From the UsabilityFirst.com
glossary:

T = k log2(D/S + 0.5), k ~ 100 msec.
T = time to move the hand to a target
D = distance between [...]]]></description>
			<content:encoded><![CDATA[<p>Tuesday design rant.</p>
<p>Fitt&#8217;s Law (discovered in 1954![1]) is a simple formula that<br />
describes the amount of time that will be needed for the average user<br />
to click on a target on the screen. From the <a href="http://www.usabilityfirst.com/glossary/main.cgi?function=display_term&#038;term_id=265" class="external">UsabilityFirst.com<br />
glossary</a>:</p>
<blockquote><p>
T = k log2(D/S + 0.5), k ~ 100 msec.</p>
<p>T = time to move the hand to a target<br />
D = distance between hand and target<br />
S = size of target
</p></blockquote>
<p>Really, it&#8217;s simple:</p>
<ul>
<li>The closer, the faster</li>
<li>The bigger, the faster</li>
</ul>
<p>Things at the edge of the screen are treated as if they have<br />
infinite dimensions off screen; thus, Fitt&#8217;s law dictates that things<br />
on the edge of the screen are the easiest to reach. Simple enough.<br />
Unfortunately, this rule is frequently broken.</p>
<h2>Search Results</h2>
<p>But let&#8217;s take a (bad) example. There are many sites that need to<br />
display multiple pages of information. Often this will be as a result<br />
of a search, but you will also see this frequently in forums.<br />
Commonly, they will show pages like so:</p>
<blockquote><p>
Pages (26):  [1] <a href="#">2</a> <a href="#">3</a> <a href="#">ï¿½</a> &#8230; <a href="#">Last ï¿½</a>
</p></blockquote>
<p>This is just crazy.  To navigate to the next page, <i>one of the<br />
most common operations</i>, you need to carefully navigate the mouse<br />
to a 8 pixel-wide area and click it. To make this worse, some sites<br />
use a smaller font for the page numbers, which makes it even harder to<br />
click on them. This has been mentioned elsewhere, as well[3]; but why<br />
do people keep doing it?</p>
<h2>Ooops Corollary</h2>
<p>However, I would like to postulate the existence of a corollary to<br />
Fitt&#8217;s Law, which I call the &#8220;Ooops Corollary.&#8221; It is based on the<br />
simple observation that, if you misclick, you are most likely to click<br />
something immediately next to the desired target. Obvious! You should<br />
not make the consequences of a wrong click drastic. What this means in<br />
<i>practice</i>, however, is that you shouldn&#8217;t put dangerous<br />
operations next to common operations. And, if you <i>must</i> put<br />
dangerous operations next to common operations, at least make them<br />
undoable!</p>
<p>Want a concrete example?  How about something that has been a flaw<br />
in just about every IDE in the world?  Here&#8217;s is the menu from VC<br />
6.0:</p>
<p style="text-align:center">
<img src="http://images.brool.com/blog/design/vc60.jpg" width=213 height=273/>
</p>
<p>Take a closer look at the menu. A very common operation (&#8221;Build&#8221;)<br />
is right next to a file destroying, potentially time-consuming,<br />
non-undoable operation: &#8220;Rebuild All.&#8221; I&#8217;ve become particular creative<br />
with my cursing after accidentally kicking off a ten-minute build; the<br />
first thing the Rebuild All command does is delete all your object<br />
files, leaving you no choice but to let the build finish.  Why are<br />
these operations put next to each other?</p>
<p>It&#8217;s like putting the self-destruct button for your secret base right<br />
next to the light switch: you&#8217;re just asking for problems later, when<br />
you aren&#8217;t paying attention.</p>
<p>Microsoft is particularly bad at this. They want to put related<br />
items close to each other for logical cohesion, which makes sense, but<br />
it still leads the user into dangerous situations. Imagine, for<br />
example, an executive that has a mailbox with thousands of messages in<br />
it. He is in the habit of marking something as &#8220;unread&#8221; if he isn&#8217;t<br />
ready to respond to it yet. It&#8217;s Friday afternoon, he has 98 different<br />
unread messages from the past two weeks, and he&#8217;s getting ready for<br />
the weekend. He reads a message, decides that he&#8217;ll answer it this<br />
weekend, so he right clicks and selects from the popup menu:</p>
<p style="text-align:center">
<img src="http://images.brool.com/blog/design/outlook.jpg" width=206 height=320/>
</p>
<p>Whoops! Instead of selecting &#8220;Mark as Unread,&#8221; he accidentally<br />
selected the menu item right next to it, &#8220;Mark All Read.&#8221; Sorry about<br />
that, it&#8217;s an non-undoable operation. Have fun reading your hundreds of<br />
messages to try and figure out which should be unread. At a<br />
<i>minimum</i> the &#8220;Mark as Read&#8221; and &#8220;Mark as Unread&#8221; items should be<br />
swapped, but I&#8217;d prefer &#8220;Mark All as Unread&#8221; to be separated from the<br />
rest of the menu items by dividers, or maybe in a hierarchical &mdash;<br />
anything to make the destructive, non-undoable, rare operation more<br />
difficult to invoke.</p>
<h2>Special Bonus Question</h2>
</p>
<p><b>Question</b>. In the context menu below for a USB Thumb drive, which two commands<br />
should <i>not</i> be located together?</p>
<p style="text-align:center">
<img src="http://images.brool.com/blog/design/usbdrive.jpg" width=357 height=327/>
</p>
<p><b>Answer</b>. That&#8217;s right, why is the &#8220;Format&#8221; option right next<br />
to the &#8220;Eject&#8221; option?</p>
<div class="moreinfo">
[1] <a href="http://ei.cs.vt.edu/~cs5724/g1/glance.html" onclick="javascript:pageTracker._trackPageview('/outbound/article/ei.cs.vt.edu');" class="external">Fitt&#8217;s Law &mdash; At a Glance</a><br />
[2] <a href="http://www.asktog.com/columns/022DesignedToGiveFitts.html" onclick="javascript:pageTracker._trackPageview('/outbound/article/www.asktog.com');" class="external">AskTog: A Quiz Designed to Give You Fitts</a><br />
[3] <a href="http://www.uiweb.com/issues/issue09.htm" onclick="javascript:pageTracker._trackPageview('/outbound/article/www.uiweb.com');" class="external">Fitt&#8217;s UI Law Applied To The Web</a><a><br />
</a></div>
]]></content:encoded>
			<wfw:commentRss>http://www.brool.com/index.php/implications-of-fitts-law/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
