<?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>Five Sketches™ &#187; GUI</title>
	<atom:link href="http://fivesketches.com/tag/gui/feed/" rel="self" type="application/rss+xml" />
	<link>http://fivesketches.com</link>
	<description>Ideation, design, and usability for development teams</description>
	<lastBuildDate>Wed, 26 May 2010 06:31:24 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Up and down the TV channels</title>
		<link>http://fivesketches.com/2009/08/up-and-down-the-tv-channels/</link>
		<comments>http://fivesketches.com/2009/08/up-and-down-the-tv-channels/#comments</comments>
		<pubDate>Mon, 17 Aug 2009 11:55:32 +0000</pubDate>
		<dc:creator>JeromeR</dc:creator>
				<category><![CDATA[Design, process, business]]></category>
		<category><![CDATA[business cases]]></category>
		<category><![CDATA[design processes]]></category>
		<category><![CDATA[GUI]]></category>
		<category><![CDATA[handheld devices]]></category>
		<category><![CDATA[industrial design]]></category>
		<category><![CDATA[interaction design]]></category>
		<category><![CDATA[remote controls]]></category>
		<category><![CDATA[scroll bar]]></category>
		<category><![CDATA[spin control]]></category>
		<category><![CDATA[television]]></category>
		<category><![CDATA[user research]]></category>
		<category><![CDATA[validation]]></category>

		<guid isPermaLink="false">http://fivesketches.com/?p=2468</guid>
		<description><![CDATA[My television lets me step through the channels. To do this, I use the remote control&#8217;s CH button. Similarly, my television lets me page through the list of programs, five channels at a time. To do this, I use the remote control&#8217;s PG button. In fact, it&#8217;s one button for the stepping and paging functions.

The programs in [...]]]></description>
			<content:encoded><![CDATA[<p>My television lets me step through the channels. To do this, I use the remote control&#8217;s <strong>CH</strong> button. Similarly, my television lets me page through the list of programs, five channels at a time. To do this, I use the remote control&#8217;s <strong>PG</strong> button. In fact, it&#8217;s one button for the stepping and paging functions.</p>
<p style="PADDING-LEFT: 30px"><img class="alignnone size-full wp-image-2473" title="My remote control" src="http://fivesketches.com/wp-content/uploads/2009/08/tv-remote-control.png" alt="My remote control" width="490" height="452" /></p>
<p>The programs in the list are shown in numeric order, so smaller numbers are higher in the list. Pressing &#8220;+&#8221; will page the list up, so &#8220;+&#8221; leads to smaller numbers. Similarly, pressing &#8220;–&#8221; will page the list down, to larger numbers. This follows the same mental model as scrolling in a computer window, including the one you&#8217;re reading in, now.</p>
<p style="padding-left: 30px;"><img class="alignnone size-full wp-image-2481" title="Scrolling up" src="http://fivesketches.com/wp-content/uploads/2009/08/scroll-bar-up.png" alt="Scrolling up" width="25" height="104" /></p>
<p>In contrast, when I&#8217;m watching one channel (full-screen, so with the program guide hidden), the same two buttons have the inverse effect. The &#8220;+&#8221; button increases the number of the channel (which is like moving <em>down</em> in the programs list, not <em>up</em>). This follows the same mental model as a spin control in many computer programs.</p>
<p style="padding-left: 30px;"><img class="alignnone size-full wp-image-2483" title="Spinning up" src="http://fivesketches.com/wp-content/uploads/2009/08/spin-control-up.png" alt="Spinning up" width="79" height="28" /></p>
<p>Imagine using the one button in succession for the two functions:</p>
<p style="padding-left: 30px;">first as <strong>PG</strong> to page through the menu<br />
  and then, after selecting a channel,<br />
as <strong>CH</strong> to step through the channels.</p>
<p>I see in this an excellent problem for a practicum student or as a class assignment that&#8217;s combining user research, design, GUI, and handheld devices. Possible questions:</p>
<ul>
<li>What research would confirm that this is, in fact, a problem?</li>
<li>If you confirm the problem, is it entirely on the hardware side? How many people are affected?</li>
<li>Is there a business case to fix the problem?</li>
<li>How could you fix it? What design methods and processes would you use? Why?</li>
<li>How could you demonstrate that your design fixes the problem? Is there a lower-cost way to validate the design, and, if so, what are the trade-offs?</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://fivesketches.com/2009/08/up-and-down-the-tv-channels/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Learning from a poke in the face</title>
		<link>http://fivesketches.com/2009/05/learning-from-facepoke/</link>
		<comments>http://fivesketches.com/2009/05/learning-from-facepoke/#comments</comments>
		<pubDate>Sat, 23 May 2009 11:55:54 +0000</pubDate>
		<dc:creator>JeromeR</dc:creator>
				<category><![CDATA[Design, process, business]]></category>
		<category><![CDATA[confirmations]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[Facebook]]></category>
		<category><![CDATA[Facepoke]]></category>
		<category><![CDATA[GUI]]></category>
		<category><![CDATA[social networking]]></category>
		<category><![CDATA[Undo]]></category>
		<category><![CDATA[usability testing]]></category>
		<category><![CDATA[user behaviors]]></category>
		<category><![CDATA[user behaviours]]></category>

		<guid isPermaLink="false">http://fivesketches.com/?p=1810</guid>
		<description><![CDATA[During usability testing, I&#8217;m always fascinated to see how creatively users misinterpret the team&#8217;s design effort. I&#8217;ve seen users blame themselves when our design failed, and I&#8217;ve seen users yell at the screen because our GUI design was so frustrating.
Wednesday, the tables were turned.
I unintentionally &#8220;agreed&#8221; to let Facepoke—that social-networking site—invite everyone with whom I&#8217;d ever exchanged e-mail. Think about [...]]]></description>
			<content:encoded><![CDATA[<p>During usability testing, I&#8217;m always fascinated to see how creatively users misinterpret the team&#8217;s design effort. I&#8217;ve seen users blame themselves when our design failed, and I&#8217;ve seen users yell at the screen because our GUI design was so frustrating.</p>
<p>Wednesday, the tables were turned.</p>
<p>I unintentionally &#8220;agreed&#8221; to let Facepoke—that social-networking site—invite everyone with whom I&#8217;d ever exchanged e-mail. Think about all the people you may have exchanged e-mail with. Former bosses and CEOs. Your kid&#8217;s teachers and the principal, too. People you used to date. Prospective business partners, or people you&#8217;ve asked for work but who turned you down. Your phone company, car-rental company, bank, and insurance company. Government agencies. The person you just told &#8220;I&#8217;m too busy to volunteer,&#8221; and your teammates from that course in 2005. Your e-mail records are full of people that you simply wouldn&#8217;t want on your Facepoke page.</p>
<h4>How could I be so stupid?</h4>
<p>See paragraph 1: <span style="background:#dcdc32;"> User blames self for poor design.</span></p>
<blockquote><p>Facepoke had been interrupting my flow for several days, offering to help me find Friends by examining my Gmail records.</p>
<p>1.    I gave in, chose three Friends, and clicked <strong>Invite</strong>.</p>
<p>The screen flashed, but the list was still there.</p>
<p>2.    I clicked <strong>Invite</strong> again.</p>
<p>Then came the moment of horror: I saw that the list had been changed! Switched! It was now a list of every e-mail address in my Gmail records that was <em>not</em> already associated with a Facepoke account.</p>
<p>With that second click, I had &#8221;agreed&#8221; to let Facepoke invite everyone with whom I had ever exchanged e-mail. There was no confirmation, no &#8220;Invite 300 people? Really?!?&#8221;</p>
<p>3.    I sought in vain for a way to Undo.</p></blockquote>
<p>With each passing minute, I thought of more and more people who would have received this inappropriate inivitation to join me on Facepoke.</p>
<h4><img style="float:right;" src="http://fivesketches.com/wp-content/uploads/2009/05/facepoke.png" alt="Facepoke" width="330" height="130" />Why wasn&#8217;t there a confirmation?</h4>
<p>See paragraph 1: <span style="background:#dcdc32;"> User emotes in frustration.</span></p>
<h4>Note to self: Always do better than this</h4>
<p>In my usability- and design work, I will continue to ask: &#8220;What&#8217;s the worst that can happen?&#8221; I will promote designs that prevent the worst that can happen. I will not present two apparently identical choices back to back, one of little consequence, one of great consequence. I will allow users to control their account and to Undo or recover from their unintended actions. I will not make users feel like they&#8217;ve been misled.</p>
]]></content:encoded>
			<wfw:commentRss>http://fivesketches.com/2009/05/learning-from-facepoke/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Internet Explorer leapfrogs Firefox?</title>
		<link>http://fivesketches.com/2009/03/ie-leapfrogs-firefox/</link>
		<comments>http://fivesketches.com/2009/03/ie-leapfrogs-firefox/#comments</comments>
		<pubDate>Sat, 21 Mar 2009 11:55:42 +0000</pubDate>
		<dc:creator>JeromeR</dc:creator>
				<category><![CDATA[Design, process, business]]></category>
		<category><![CDATA[browser wars]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[GUI]]></category>
		<category><![CDATA[Internet Explorer]]></category>
		<category><![CDATA[leapfrogging]]></category>
		<category><![CDATA[process]]></category>
		<category><![CDATA[software design]]></category>
		<category><![CDATA[software development]]></category>
		<category><![CDATA[standards]]></category>
		<category><![CDATA[web browsers]]></category>

		<guid isPermaLink="false">http://fivesketches.com/?p=854</guid>
		<description><![CDATA[Previously, I wrote about GUI—when to copy it and when to design it. When your competition has something better, I recommended you design, to leapfrog your competitor. Here&#8217;s an example of two competing web browsers:

At first glance, the new Internet Explorer 8 address bar looks like a copy of Firefox&#8217;s existing awesome bar, but click the image for [...]]]></description>
			<content:encoded><![CDATA[<p>Previously, I wrote about GUI—<a href="http://fivesketches.com/2009/03/gui-copy-it-or-design-it/" target="_self">when to copy it and when to design it</a>. When your competition has something better, I recommended you design, to leapfrog your competitor. Here&#8217;s an example of two competing web browsers:</p>
<p><a href="http://fivesketches.com/wp-content/uploads/2009/03/ie8-address-bar.png" target="_blank"><img src="http://fivesketches.com/wp-content/uploads/2009/03/ie8-address-bar.png" alt="Click to enlarge" width="300" height="162" /></a></p>
<p>At first glance, the new Internet Explorer 8 <em>address bar</em> looks like a copy of Firefox&#8217;s existing <em>awesome bar</em>, but click the image for an enlarged view. You&#8217;ll see that:</p>
<ul>
<li>The on-the-fly suggestions are grouped as History and Favourites.</li>
<li>Each group lists only five items, by default.</li>
<li>To remove an item (think stale links and mistyped URLs), highlight the item and then click the <span style="background-color: #FF8888"><strong> × </strong></span> that appears.</li>
</ul>
<p>Compared to Internet Explorer 7, Firefox had a better address bar. And just as clearly, the additional features of the Internet Explorer 8 address bar are an attempt to leapfrog Firefox. After the public has used IE8 for three months, it&#8217;ll be interesting to hear whether users think Microsoft succeeded.</p>
<p>Read the related post, <a href="http://fivesketches.com/2009/03/gui-copy-it-or-design-it/" target="_self">GUI: Copy it or design it</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://fivesketches.com/2009/03/ie-leapfrogs-firefox/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>GUI: copy it or design it?</title>
		<link>http://fivesketches.com/2009/03/gui-copy-it-or-design-it/</link>
		<comments>http://fivesketches.com/2009/03/gui-copy-it-or-design-it/#comments</comments>
		<pubDate>Sun, 15 Mar 2009 16:11:19 +0000</pubDate>
		<dc:creator>JeromeR</dc:creator>
				<category><![CDATA[Design, process, business]]></category>
		<category><![CDATA[Five Sketches™]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[GUI]]></category>
		<category><![CDATA[leapfrogging]]></category>
		<category><![CDATA[low-cost]]></category>
		<category><![CDATA[software design]]></category>
		<category><![CDATA[standards]]></category>
		<category><![CDATA[Vista User Experience Interaction Guide]]></category>
		<category><![CDATA[Vista UX Guide]]></category>

		<guid isPermaLink="false">http://fivesketches.com/?p=421</guid>
		<description><![CDATA[I&#8217;m a big believer in following the standards for GUI and interaction design. But when do you copy or reuse an existing design, and when do you design something new? Here&#8217;s my guideline for when to design and when to reuse or copy the GUI and interaction:



Reuse
When…
Design



…there is an external standard.
For example: the Vista UX Guide recommends [...]]]></description>
			<content:encoded><![CDATA[<p>I&#8217;m a big believer in following the standards for GUI and interaction design. But when do you <span style="color: #555555;"><strong>copy or reuse</strong></span> an existing design, and when do you <strong><span style="color: #555555;">design something new</span></strong>? Here&#8217;s my guideline for when to design and when to reuse or copy the GUI and interaction:</p>
<table border="0">
<tbody>
<tr>
<td style="text-align: center;" width="10%"><strong>Reuse</strong></td>
<td style="text-align: center;" width="80%"><strong>When…</strong></td>
<td style="text-align: center;" width="10%"><strong>Design</strong></td>
</tr>
<tr>
<td style="text-align: center;" valign="top"><img src="http://fivesketches.com/wp-content/uploads/2009/03/checkmark-small.png" alt="" width="15" height="14" /></td>
<td style="text-align: center;" valign="top">…there is an external standard.<br />
For example: the <a title="Opens in a new window" href="http://msdn.microsoft.com/en-us/library/aa511258.aspx" target="_blank">Vista UX Guide</a> recommends […].</td>
<td style="text-align: center;" valign="top"> </td>
</tr>
<tr>
<td style="text-align: center;" valign="top"><img src="http://fivesketches.com/wp-content/uploads/2009/03/checkmark-small.png" alt="" width="15" height="14" /></td>
<td style="text-align: center;" valign="top">…there is a GUI or interaction precedent in your software.<br />
For example: we distinguish between Import and Open.</td>
<td style="text-align: center;" valign="top"><img src="http://fivesketches.com/wp-content/uploads/2009/03/exclaimmark-small.png" alt="" width="9" height="14" /></td>
</tr>
<tr>
<td style="text-align: center;" valign="top"> </td>
<td style="text-align: center;" valign="top"> …the precedent uses an out-of-date interaction style.<br />
For example: the users cannot drag an object to move it.</td>
<td style="text-align: center;" valign="top"><img src="http://fivesketches.com/wp-content/uploads/2009/03/checkmark-small.png" alt="" width="15" height="14" /></td>
</tr>
<tr>
<td style="text-align: center;" valign="top"> </td>
<td style="text-align: center;" valign="top">…the precedent uses an incorrect mental model.<br />
For example: user preferences are saved in a text file.</td>
<td style="text-align: center;" valign="top"><img src="http://fivesketches.com/wp-content/uploads/2009/03/checkmark-small.png" alt="" width="15" height="14" /></td>
</tr>
<tr>
<td style="text-align: center;" valign="top"> </td>
<td style="text-align: center;" valign="top">…usability tests say the precedent reduces performance.<br />
For example: 70% of occasional users do this wrong.</td>
<td style="text-align: center;" valign="top"><img src="http://fivesketches.com/wp-content/uploads/2009/03/checkmark-small.png" alt="" width="15" height="14" /></td>
</tr>
<tr>
<td style="text-align: center;" valign="top"><img src="http://fivesketches.com/wp-content/uploads/2009/03/checkmark-small.png" alt="" width="15" height="14" /></td>
<td style="text-align: center;" valign="top"> …the developer wants to re-use existing GUI.<br />
For example: use a variable to change the dialog-box title.</td>
<td style="text-align: center;" valign="top"><img src="http://fivesketches.com/wp-content/uploads/2009/03/exclaimmark-small.png" alt="" width="9" height="14" /></td>
</tr>
<tr>
<td style="text-align: center;" valign="top"><img src="http://fivesketches.com/wp-content/uploads/2009/03/checkmark-small3.png" alt="" width="15" height="14" /></td>
<td style="text-align: center;" valign="top"> …competitors have implemented the feature better.<br />
For example: when <em>they</em> zoom in, it&#8217;s smooth, not stuttered.</td>
<td style="text-align: center;" valign="top"><img src="http://fivesketches.com/wp-content/uploads/2009/03/checkmark-small2.png" alt="" width="15" height="14" /></td>
</tr>
<tr>
<td style="text-align: center;" valign="top"><img src="http://fivesketches.com/wp-content/uploads/2009/03/checkmark-small3.png" alt="" width="15" height="14" /></td>
<td style="text-align: center;" valign="top"> …the market has a certain GUI expectations.<br />
For example: iPhone promoted gestures, others had to copy.</td>
<td style="text-align: center;" valign="top"><img src="http://fivesketches.com/wp-content/uploads/2009/03/checkmark-small2.png" alt="" width="15" height="14" /></td>
</tr>
<tr>
<td style="text-align: center;" valign="top"> </td>
<td style="text-align: center;" valign="top">…the product requires a certain strategic direction.<br />
For example: all data must be sharable, locally and remotely.</td>
<td style="text-align: center;" valign="top"><img src="http://fivesketches.com/wp-content/uploads/2009/03/checkmark-small.png" alt="" width="15" height="14" /></td>
</tr>
<tr>
<td style="text-align: center;" valign="top"> </td>
<td style="text-align: center;" valign="top">…there aren&#8217;t sufficient resources to design.<br />
For example: &#8220;There&#8217;s no time in the schedule for design.&#8221;</td>
<td style="text-align: center;" valign="top"><img src="http://fivesketches.com/wp-content/uploads/2009/03/exclaimmark-small.png" alt="" width="9" height="14" /></td>
</tr>
</tbody>
</table>
<p><img src="http://fivesketches.com/wp-content/uploads/2009/03/checkmark-small.png" alt="" width="15" height="14" />Reuse your existing design or<img src="http://fivesketches.com/wp-content/uploads/2009/03/checkmark-small.png" alt="" width="15" height="14" />design it using <a href="http://fivesketches.com/?page_id=8" target="_self">Five Sketches™</a>.<br />
<img src="http://fivesketches.com/wp-content/uploads/2009/03/checkmark-small3.png" alt="" width="15" height="14" />Copy the competitor&#8217;s design or<img src="http://fivesketches.com/wp-content/uploads/2009/03/checkmark-small2.png" alt="" width="15" height="14" />leapfrog their design.<br />
 <img src="http://fivesketches.com/wp-content/uploads/2009/03/exclaimmark-small.png" alt="" width="9" height="14" /> If you ship a feature with poor interaction or poor usability, where&#8217;s the user value and where&#8217;s your credibility? Not all design processes are lengthy. Five Sketches™ takes about a day for most features that you&#8217;re tempted not to design.</p>
<p>Here&#8217;s an example: did <a href="http://fivesketches.com/2009/03/ie-leapfrogs-firefox/" target="_self">Internet Explorer leapfrog Firefox?</a></p>
]]></content:encoded>
			<wfw:commentRss>http://fivesketches.com/2009/03/gui-copy-it-or-design-it/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Standard OK-Cancel button order</title>
		<link>http://fivesketches.com/2009/03/what-symbol-is-cancel/</link>
		<comments>http://fivesketches.com/2009/03/what-symbol-is-cancel/#comments</comments>
		<pubDate>Fri, 13 Mar 2009 12:00:14 +0000</pubDate>
		<dc:creator>JeromeR</dc:creator>
				<category><![CDATA[Design, process, business]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[corporate usability maturity]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[GUI]]></category>
		<category><![CDATA[Jakob Nielsen]]></category>
		<category><![CDATA[standards]]></category>
		<category><![CDATA[Vista User Experience Interaction Guide]]></category>
		<category><![CDATA[Vista UX Guide]]></category>

		<guid isPermaLink="false">http://fivesketches.com/?p=366</guid>
		<description><![CDATA[I have two stories about command buttons.
Quite a few years ago, a team member walked me through a new dialog box. He entered some data, and then unintentionally clicked the Cancel button. He made this error twice in a row, thus losing his changes twice in a row. I pointed out that the OK and Cancel buttons [...]]]></description>
			<content:encoded><![CDATA[<p>I have two stories about command buttons.</p>
<p>Quite a few years ago, a team member walked me through a new dialog box. He entered some data, and then unintentionally clicked the <span style="color: #555555;"><strong>Cancel </strong></span>button. He made this error twice in a row, thus losing his changes twice in a row. I pointed out that the <strong><span style="color: #555555;">OK</span></strong> and <strong><span style="color: #555555;">Cancel</span></strong> buttons were in the wrong order. The developer switched the buttons to the Windows-standard layout (below, right), and the user-performance problem was solved.<br />
<img src="http://fivesketches.com/wp-content/uploads/2009/03/ok-cancel-switched.png" alt="" width="330" height="50" /></p>
<p><img style="FLOAT: right;" src="http://fivesketches.com/wp-content/uploads/2009/03/ok-cancel-with-icons.png" alt="" width="222" height="50" />A few years later, on a different project, not only were the buttons in non-standard order, they used non-standard wording <em>and</em> they used coloured icons. My request to follow the Windows standard was met only half-way and then sent for Beta testing before I saw it again. The buttons were now in the correct order, but the button names were changed, and the names and icons were still non-standard. Beta testers loudly protested the change. (Beta testers are often expert users, and experts abhor any change that slows them down.) At the time, the company was only a few steps up the Neilsen <a title="Opens in a new window" href="http://www.useit.com/alertbox/maturity.html" target="_blank">Corporate Usability Maturity</a> model, so instead of completing the change to Windows-standard <strong><span style="color: #555555;">OK</span></strong> and <strong><span style="color: #555555;">Cancel</span> </strong>buttons, the buttons were rolled back, to appease the protesting Beta users. I found out too late to retest with Windows-standard buttons, so there was no data to convince the developers. For me, it was an opportunity to learn from failure. <img src='http://fivesketches.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p><img style="FLOAT: right;" src="http://fivesketches.com/wp-content/uploads/2009/03/blog-stroop-test-1.png" alt="" width="212" height="182" /></p>
<p><strong>Why is non-standard so hard?</strong></p>
<p>Try this Stroop test (right). Ignore the words. Instead, identify the colours, out loud. No doubt, the second panel went slower and took more effort.</p>
<p><img style="FLOAT: left;" src="http://fivesketches.com/wp-content/uploads/2009/03/blog-stroop-test-3.png" alt="" width="105" height="182" />Try the variation, at left. Find the first occurrence of the word Blue. Next, find the first occurrence of the colour <span style="color: #ff0000;">█</span>.</p>
<p>Just as mismatches between text and colour slow your Stroop-test performance, mismatches between standard and non-standard <strong><span style="color: #555555;">OK</span> </strong>and <strong><span style="color: #555555;">Cancel</span></strong> buttons slow user performance. Our Beta users clicked the wrong buttons—a huge waste of their time—because the new solution didn&#8217;t follow any standard. The Beta testers were right to protest, but wrong in their demand to revert to the original non-standard state. (See: <a href="http://fivesketches.com/?p=78" target="_self">Customers can&#8217;t do your job</a>.)</p>
<p>Users learn GUI patterns—patterns that are widely reinforced by user experience—and users expect GUI to behave predictably, so it&#8217;s unwise to deviate radically from the standards, unless there are product-management reasons to do so.</p>
<p>I&#8217;ll write more about following standards versus designing something new in the coming few posts.</p>
<p><span style="color: #9e5237;">P.S. It looks like </span><a title="Opens in a new window" href="http://www.useit.com/alertbox/ok-cancel.html" target="_blank">Jakob Nielsen got here before me</a><span style="color: #9e5237;">.</span></p>
]]></content:encoded>
			<wfw:commentRss>http://fivesketches.com/2009/03/what-symbol-is-cancel/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Rigid UCD methodology fails?</title>
		<link>http://fivesketches.com/2008/04/rigid-design-methodology-fails/</link>
		<comments>http://fivesketches.com/2008/04/rigid-design-methodology-fails/#comments</comments>
		<pubDate>Sun, 13 Apr 2008 15:10:19 +0000</pubDate>
		<dc:creator>JeromeR</dc:creator>
				<category><![CDATA[Design, process, business]]></category>
		<category><![CDATA[Five Sketches™]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[dogma]]></category>
		<category><![CDATA[generative design]]></category>
		<category><![CDATA[GUI]]></category>
		<category><![CDATA[IA Summit]]></category>
		<category><![CDATA[Jared Spool]]></category>
		<category><![CDATA[methodology]]></category>
		<category><![CDATA[process]]></category>
		<category><![CDATA[software design]]></category>
		<category><![CDATA[techniques]]></category>
		<category><![CDATA[tricks]]></category>
		<category><![CDATA[UCD]]></category>
		<category><![CDATA[user-centered design]]></category>
		<category><![CDATA[user-centred design]]></category>

		<guid isPermaLink="false">http://fivesketches.com/?p=952</guid>
		<description><![CDATA[I received an e-mail from someone at the 2008 IA Summit about Jared Spool&#8217;s declaration that UCD is dead:
&#8201;&#8212;&#8201;&#8201;&#8212;&#8201;&#8201;&#8212;&#8201;Forwarded message&#8201;&#8212;&#8201;&#8201;&#8212;&#8201;&#8201;&#8212;&#8201;
From: P
Date: Sun 13/04/2008, 2:54 PM
Hi Jerome,
I&#8217;m at the iA Summit in Miami right now, and hearing about all of the things that are going on makes me think of you. One of the interesting sessions was Jared Spool&#8217;s keynote [...]]]></description>
			<content:encoded><![CDATA[<p>I received an e-mail from someone at the <a title="Opens in a new window" href="http://iasummit.org/2008/" target="_blank">2008 IA Summit</a> about Jared Spool&#8217;s declaration that UCD is dead:</p>
<blockquote><p>&thinsp;&#8212;&thinsp;&thinsp;&#8212;&thinsp;&thinsp;&#8212;&thinsp;Forwarded message&thinsp;&#8212;&thinsp;&thinsp;&#8212;&thinsp;&thinsp;&#8212;&thinsp;<br />
From: P<br />
Date: Sun 13/04/2008, 2:54 PM</p>
<p>Hi Jerome,</p>
<p>I&#8217;m at the iA Summit in Miami right now, and hearing about all of the things that are going on makes me think of you. One of the interesting sessions was <a title="Opens in a new window" href="http://www.nonlinearcreations.com/blog/index.php/2008/04/13/journey-to-the-center-of-design-ia-summit-keynote-with-jared-spool/" target="_blank">Jared Spool&#8217;s keynote speech</a>. He conducted research into what makes certain companies better able to produce effective designs. He used this model to talk about the various approaches departments do to facilitate design:</p>
<p style="text-align: center;"><img src="http://fivesketches.com/wp-content/uploads/2008/04/spool-on-process.png" alt="Things that facilitate design" width="347" height="48" /></p>
<p>He said all design involves a process, whether it&#8217;s been formalized or not. Interesting, though not surprising: companies that have dogmatic UCD leadership or use a rigid UCD methodology are unlikely to create anything innovative. To innovate, you want to apply techniques in sometimes surprising ways to solve problems that they were not intended for (those are the &#8220;tricks&#8221;.)</p>
<p>OK, I&#8217;m going back out in the warm (hot!) weather.</p>
<p>- P</p></blockquote>
<p>Of course, the lack of process doesn&#8217;t guarantee innovation, either, nor does it guarantee you&#8217;ll be able to repeat your (accidental) successes. I believe a successful design process must involve some form of generative design—as <a href="http://fivesketches.com/about-five-sketches/" target="_self">Five Sketches™</a> does—that&#8217;s based on knowledge of user condition. I also beleive that, once you&#8217;ve internalised those two things, you can use almost any form of facilitation to design good products.</p>
]]></content:encoded>
			<wfw:commentRss>http://fivesketches.com/2008/04/rigid-design-methodology-fails/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Complicated GUI is fixable</title>
		<link>http://fivesketches.com/2008/04/complicated-gui-is-fixable/</link>
		<comments>http://fivesketches.com/2008/04/complicated-gui-is-fixable/#comments</comments>
		<pubDate>Thu, 03 Apr 2008 15:10:11 +0000</pubDate>
		<dc:creator>JeromeR</dc:creator>
				<category><![CDATA[Design, process, business]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[Alen Walendowski]]></category>
		<category><![CDATA[complexity]]></category>
		<category><![CDATA[dietician]]></category>
		<category><![CDATA[Ellen Isaacs]]></category>
		<category><![CDATA[frequency-commonality grid]]></category>
		<category><![CDATA[GUI]]></category>
		<category><![CDATA[Jakob Nielsen]]></category>
		<category><![CDATA[satisficing]]></category>
		<category><![CDATA[simplicity]]></category>
		<category><![CDATA[software design]]></category>
		<category><![CDATA[software development]]></category>
		<category><![CDATA[task commonality]]></category>
		<category><![CDATA[task frequency]]></category>
		<category><![CDATA[UCD]]></category>
		<category><![CDATA[user research]]></category>

		<guid isPermaLink="false">http://fivesketches.com/?p=877</guid>
		<description><![CDATA[According to usability guru Jakob Nielsen, the worst mistakes in GUI design are domain-specific. Usually, he says, applications fail because they:

solve the wrong problem.
have the wrong features for the right problem.
make the right features too complicated to understand.

Nielsen&#8217;s last point reminds me of what a product manager once told me: many users of highly specialised software [...]]]></description>
			<content:encoded><![CDATA[<p>According to usability guru Jakob Nielsen, the worst mistakes in GUI design are domain-specific. Usually, he says, applications fail because they:</p>
<ul>
<li>solve the wrong problem.</li>
<li>have the wrong features for the right problem.</li>
<li>make the right features too complicated to understand.</li>
</ul>
<p>Nielsen&#8217;s last point reminds me of what a product manager once told me: many users of highly specialised software think of themselves as experts, but only few are. His hypothesis? Elaborate sets of features are too numerous or complex to learn fully.</p>
<p><img style="float: right;" src="http://fivesketches.com/wp-content/uploads/2008/04/plate.png" alt="Cookie on a plate" width="124" height="97" />One of my projects involved software for dieticians. The software allowed users to enter a recipe. The software would calculate the nutritive value per portion. Users learned the basic settings for an adequate result. They ignored the extra features that could take into consideration various complex chemical interactions between the recipe ingredients. The extra features—the visual and cognitive complexity—got ignored. Ironically, their very presence increased the likelihood that users would satisfice, or avoid the short-term pain of learning something new. <span style="background-color: #deef7f;">When the product was developed, each extra bit seemed a good idea</span>, and they may also each have helped sell the product. But, good idea or not, those extra features needed to be removed, or hidden from the majority of users, or redesigned.</p>
<h5>Resolving the &#8220;extra features&#8221; problem</h5>
<ol>
<li>If the extra features are superfluous, remove them. Usage data can help identify seldom-used features, and many of our products are capable of collecting usage data, though we currently only collect it after crashes and mainly during Beta testing. However, removing a seldom-used part of an existing feature is a complex decision, and one for the Product Manager to make. The difficulty lies in determining whether a feature would be used more if it were simpler to use. In that case, it may not be superfluous.</li>
<li>If the extra features are used only occasionally by relatively few users, then hide them. The suggested GUI treatment for an occasional-by-few control is to expose it only in the context of a related task. Do not clutter the main application window, menu bar, or the main dialog boxes with controls for occasional-by-few tasks. Hiding the controls for an occasional-by-few task is supported by the Isaacs-Walendowski frequency-commonality grid:</li>
<table border="0" cellpadding="8" width="90%">
<tbody>
<tr>
<td style="text-align: center;" width="24%"> <strong> If the<br />
  feature is…</strong></td>
<td style="text-align: center;" width="33%"><strong>Used<br />
by many</strong></td>
<td style="text-align: center;" width="33%"><strong>Used<br />
by few</strong></td>
</tr>
<tr>
<td style="text-align: right;" valign="middle"><strong>Used<br />
frequently</strong></td>
<td>GUI treatment:<br />
•  Visible.<br />
•  Few clicks.</td>
<td>GUI treatment:<br />
•  Suggested.<br />
•  Few clicks.</td>
</tr>
<tr>
<td style="text-align: right;" valign="middle"><strong>Used<br />
occasionally</strong></td>
<td>GUI treatment:<br />
•  Suggested.<br />
•  More clicks.</td>
<td>GUI treatment:<br />
•  Hidden.<br />
•  More clicks.</td>
</tr>
</tbody>
</table>
<li>If the extra feature is to be a core feature, simplify it. I&#8217;m talking about a feature that the Product Manager believes would be used frequently or by many <em>if users could figure it out</em>. Burying or hiding such features isn&#8217;t the answer. You need to find ways to reduce complexity by designing the interaction well and by organising the GUI well. For this, <a href="http://fivesketches.com/about-five-sketches/" target="_self">Five Sketches™</a> can help.</li>
</ol>
<h5>What are the requirements, really?</h5>
<p>All this begs the question: who can tell us which features are the extra features (the features to omit), which ones are occasional-by-few (the features to hide), and which ones are used frequently or by many users (the features on which to focus your biggest design-guns)? Nielsen says &#8220;Base your decisions on user research&#8221; and then test the early designs with users. He adds:</p>
<blockquote><p>People don&#8217;t want to hear me say that they need to test their UI. And they definitely don&#8217;t want to hear that they have to actually move their precious butts to a customer location to watch real people do the work the application is supposed to support. The general idea seems to be that real programmers can&#8217;t be let out of their cages. My view is just the opposite: no one should be allowed to work on an application unless they&#8217;ve spent a day observing a few end users.  <a title="Opens in a new window" href="http://www.useit.com/alertbox/application-mistakes.html" target="_blank">…More</a>.</p></blockquote>
<p>Conclusion: conduct user research and use what you learn to inform the design.</p>
]]></content:encoded>
			<wfw:commentRss>http://fivesketches.com/2008/04/complicated-gui-is-fixable/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Simplicty is a feature</title>
		<link>http://fivesketches.com/2008/03/simplicty-vs-the-rest-of-us/</link>
		<comments>http://fivesketches.com/2008/03/simplicty-vs-the-rest-of-us/#comments</comments>
		<pubDate>Fri, 07 Mar 2008 15:10:26 +0000</pubDate>
		<dc:creator>JeromeR</dc:creator>
				<category><![CDATA[Design, process, business]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[What's so funny?]]></category>
		<category><![CDATA[cartoon]]></category>
		<category><![CDATA[complexity]]></category>
		<category><![CDATA[Eric Burke]]></category>
		<category><![CDATA[funny]]></category>
		<category><![CDATA[GUI]]></category>
		<category><![CDATA[humor]]></category>
		<category><![CDATA[simplicity]]></category>
		<category><![CDATA[software design]]></category>

		<guid isPermaLink="false">http://fivesketches.com/?p=870</guid>
		<description><![CDATA[This Eric Burke comic is funny because it reflects the way people in the software business feel, at times:

]]></description>
			<content:encoded><![CDATA[<p>This Eric Burke comic is funny because it reflects the way people in the software business feel, at times:</p>
<p style="text-align: center;"><a title="Opens in a new window" href="http://stuffthathappens.com/blog/2008/03/05/simplicity/" target="_blank"><img class="alignnone size-full wp-image-873" title="simplicity-vs-your-application" src="http://fivesketches.com/wp-content/uploads/2008/03/simplicity-vs-your-application.png" alt="simplicity-vs-your-application" width="200" height="315" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://fivesketches.com/2008/03/simplicty-vs-the-rest-of-us/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Make your project win</title>
		<link>http://fivesketches.com/2008/02/make-your-project-win/</link>
		<comments>http://fivesketches.com/2008/02/make-your-project-win/#comments</comments>
		<pubDate>Thu, 28 Feb 2008 15:10:49 +0000</pubDate>
		<dc:creator>JeromeR</dc:creator>
				<category><![CDATA[Design, process, business]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[GUI]]></category>
		<category><![CDATA[product management]]></category>
		<category><![CDATA[project management]]></category>
		<category><![CDATA[scheduling]]></category>
		<category><![CDATA[software design]]></category>
		<category><![CDATA[software development]]></category>
		<category><![CDATA[usability testing]]></category>

		<guid isPermaLink="false">http://fivesketches.com/?p=907</guid>
		<description><![CDATA[Here are two usability stories that are currently underway.
The first project
This weekend I got a Skype call from a usability consultant at a very large firm that is, in turn, working on a project for a very large insurance company. The usability consultant was just assigned, but the team is nearly finished building an online [...]]]></description>
			<content:encoded><![CDATA[<div>Here are two usability stories that are currently underway.</div>
<h5>The first project</h5>
<p>This weekend I got a Skype call from a usability consultant at a very large firm that is, in turn, working on a project for a very large insurance company. The usability consultant was just assigned, but the team is nearly finished building an online application form for household insurance. He told me:</p>
<ul>
<li>The design is due Friday. Developers will start building it on Monday.</li>
<li><img style="float: right;" src="http://fivesketches.com/wp-content/uploads/2009/03/how-easy-it-it.png" alt="how-easy-it-it" width="350" height="126" />The design is restricted by a related piece of the site that&#8217;s already being built (offshore).</li>
<li>Customers must answer potentially hundreds of questions, and the company wants every answer cumulatively displayed on screen. It&#8217;s not clear why, so designing alternatives means shooting in the dark.</li>
<li>Customers must provide their complete personal and confidential identification-before they get a quote or decide whether to buy. It&#8217;s not clear why.</li>
<li>After answering all questions and providing personal information, many customers will be deemed ineligible to buy insurance online, due to answers that sounded innocuous to me.</li>
<li>There&#8217;s no time to test the design by Friday.</li>
</ul>
<h5>The second project</h5>
<p>Today I spoke to a manager at a different company. Their current project is software that makes work schedules. So far, the team has:</p>
<ul>
<li>Asked users for problems in the current product.</li>
<li>Weighed the severity and frequency of user problems. The worst problems related to starting a new schedule, figuring out where to enter data, and understanding how the data and settings influence the schedule.</li>
<li>The worst problems became top priority in the current project.</li>
<li>A major GUI redesign is underway. This includes step-by-step workflow support, drag-and-drop interaction, and replacing data-entry spreadsheets with dialog boxes or task panes.</li>
<li>The product manager wants usability testing done on the redesigned GUI, while there&#8217;s still time to make changes.</li>
</ul>
<p><em>What can you do</em> to ensure your projects are like the one in the second story?</p>
]]></content:encoded>
			<wfw:commentRss>http://fivesketches.com/2008/02/make-your-project-win/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
