<?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>Fri, 20 Jan 2012 07:58:59 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>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 [...]]]></description>
			<content:encoded><![CDATA[
<p>Tuesday design rant.</p>

<p>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 <a href="http://www.usabilityfirst.com/glossary/main.cgi?function=display_term&#038;term_id=265" class="external">UsabilityFirst.com
glossary</a>:</p>

<blockquote>
T = k log2(D/S + 0.5), k ~ 100 msec.<br /><br />
T = time to move the hand to a target<br />
D = distance between hand and target<br />
S = size of target<br />
</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
infinite dimensions off screen; thus, Fitt&#8217;s law dictates that things
on the edge of the screen are the easiest to reach. Simple enough.
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
display multiple pages of information. Often this will be as a result
of a search, but you will also see this frequently in forums.
Commonly, they will show pages like so:</p>

<blockquote>
Pages (26):  [1] <a href="#">2</a> <a href="#">3</a> <a href="#">ï¿½</a> &#8230; <a href="#">Last ï¿½</a>
</blockquote>

<p>This is just crazy.  To navigate to the next page, <i>one of the
most common operations</i>, you need to carefully navigate the mouse
to a 8 pixel-wide area and click it. To make this worse, some sites
use a smaller font for the page numbers, which makes it even harder to
click on them. This has been mentioned elsewhere, as well[3]; but why
do people keep doing it?</p>

<h2>Ooops Corollary</h2>

<p>However, I would like to postulate the existence of a corollary to
Fitt&#8217;s Law, which I call the &#8220;Ooops Corollary.&#8221; It is based on the
simple observation that, if you misclick, you are most likely to click
something immediately next to the desired target. Obvious! You should
not make the consequences of a wrong click drastic. What this means in
<i>practice</i>, however, is that you shouldn&#8217;t put dangerous
operations next to common operations. And, if you <i>must</i> put
dangerous operations next to common operations, at least make them
undoable!</p>

<p>Want a concrete example?  How about something that has been a flaw
in just about every IDE in the world?  Here&#8217;s is the menu from VC
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 (&#8220;Build&#8221;)
is right next to a file destroying, potentially time-consuming,
non-undoable operation: &#8220;Rebuild All.&#8221; I&#8217;ve become particular creative
with my cursing after accidentally kicking off a ten-minute build; the
first thing the Rebuild All command does is delete all your object
files, leaving you no choice but to let the build finish.  Why are
these operations put next to each other?</p>

<p>It&#8217;s like putting the self-destruct button for your secret base right
next to the light switch: you&#8217;re just asking for problems later, when
you aren&#8217;t paying attention.</p>

<p>Microsoft is particularly bad at this. They want to put related
items close to each other for logical cohesion, which makes sense, but
it still leads the user into dangerous situations. Imagine, for
example, an executive that has a mailbox with thousands of messages in
it. He is in the habit of marking something as &#8220;unread&#8221; if he isn&#8217;t
ready to respond to it yet. It&#8217;s Friday afternoon, he has 98 different
unread messages from the past two weeks, and he&#8217;s getting ready for
the weekend. He reads a message, decides that he&#8217;ll answer it this
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
selected the menu item right next to it, &#8220;Mark All Read.&#8221; Sorry about
that, it&#8217;s an non-undoable operation. Have fun reading your hundreds of
messages to try and figure out which should be unread. At a
<i>minimum</i> the &#8220;Mark as Read&#8221; and &#8220;Mark as Unread&#8221; items should be
swapped, but I&#8217;d prefer &#8220;Mark All as Unread&#8221; to be separated from the
rest of the menu items by dividers, or maybe in a hierarchical &mdash;
anything to make the destructive, non-undoable, rare operation more
difficult to invoke.

<h2>Special Bonus Question</h2>

</p><p><b>Question</b>. In the context menu below for a USB Thumb drive, which two commands
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
to the &#8220;Eject&#8221; option?</p> 

<div class="moreinfo">
[1] <a href="http://ei.cs.vt.edu/~cs5724/g1/glance.html" class="external">Fitt&#8217;s Law &mdash; At a Glance</a><br />
[2] <a href="http://www.asktog.com/columns/022DesignedToGiveFitts.html" class="external">AskTog: A Quiz Designed to Give You Fitts</a><br />
[3] <a href="http://www.uiweb.com/issues/issue09.htm" 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>

