<?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; standards</title>
	<atom:link href="http://fivesketches.com/tag/standards/feed/" rel="self" type="application/rss+xml" />
	<link>http://fivesketches.com</link>
	<description>Ideation, design, and usability for development teams</description>
	<lastBuildDate>Mon, 31 Jan 2011 04:24:42 +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>Train yourself in frustration, confusion, and inefficiency</title>
		<link>http://fivesketches.com/2009/09/train-yourself-in-frustration/</link>
		<comments>http://fivesketches.com/2009/09/train-yourself-in-frustration/#comments</comments>
		<pubDate>Fri, 04 Sep 2009 11:55:11 +0000</pubDate>
		<dc:creator>JeromeR</dc:creator>
				<category><![CDATA[Design, process, business]]></category>
		<category><![CDATA[Adrian Howard]]></category>
		<category><![CDATA[Brandon EB Ward]]></category>
		<category><![CDATA[CK Vijay Bhaskar]]></category>
		<category><![CDATA[confusion]]></category>
		<category><![CDATA[design thinking]]></category>
		<category><![CDATA[frustration]]></category>
		<category><![CDATA[GUI design]]></category>
		<category><![CDATA[iMac]]></category>
		<category><![CDATA[inefficiency]]></category>
		<category><![CDATA[interaction design]]></category>
		<category><![CDATA[iTunes]]></category>
		<category><![CDATA[IxDA]]></category>
		<category><![CDATA[Johnathan Berger]]></category>
		<category><![CDATA[language settings]]></category>
		<category><![CDATA[Microsoft Windows]]></category>
		<category><![CDATA[Paul Bryan]]></category>
		<category><![CDATA[regional settings]]></category>
		<category><![CDATA[rote users]]></category>
		<category><![CDATA[software design]]></category>
		<category><![CDATA[software development]]></category>
		<category><![CDATA[software engineering]]></category>
		<category><![CDATA[standards]]></category>
		<category><![CDATA[transfer users]]></category>
		<category><![CDATA[User-experience design]]></category>

		<guid isPermaLink="false">http://fivesketches.com/?p=2614</guid>
		<description><![CDATA[For professional reasons, I like to mess around with software. It&#8217;s a form of training, because some of the messing around leads to frustration, confusion, and inefficiency. And that&#8217;s good.
My hope is that my experiences will help me to better understand what I put various groups of software users through when they use the software [...]]]></description>
			<content:encoded><![CDATA[<p>For professional reasons, I like to mess around with software. It&#8217;s a form of training, because some of the messing around leads to frustration, confusion, and inefficiency. And that&#8217;s good.</p>
<p>My hope is that my experiences will help me to better understand what I put various groups of software users through when they use the software I helped design and build.</p>
<p>An easy way to mess around is by changing default settings. For example, my iTunes isn&#8217;t set to English. This helps me understand the experience of users who learned one language at home as children and now use another language at work as adults. It&#8217;s not just beneficial to experience the initial pain of memorising where to click (as I become a <em>rote</em> user in a GUI I cannot read), but also the additional moments of frustration when I must do something new—an occasional task whose command vector I haven&#8217;t memorised.</p>
<p style="text-align: center;"><img class="alignnone size-full wp-image-2617" title="Relating to the language challenges that some users face" src="http://fivesketches.com/wp-content/uploads/2009/09/itunes-detail.png" alt="Relating to the language challenges that some users face" width="382" height="256" /></p>
<p>Another easy way to mess around is to switch between iMac and Windows computers. It&#8217;s not just the little differences, such as whether the Minimise/Maximise/Close buttons are on the left or right sides of the title bar, or whether that big key on the keyboard is labelled <span style="color: #333333;"><strong>Enter</strong> </span>or <strong><span style="color: #333333;">Return</span></strong>.</p>
<p><img class="alignnone size-full wp-image-2628" style="float:right;" title="Switching between operating systems" src="http://fivesketches.com/wp-content/uploads/2009/09/os-logos.png" alt="Switching between operating systems" width="198" height="77" />It&#8217;s also the experience of inefficiency. It&#8217;s knowing you could work faster, if only the tool weren&#8217;t in your way. This also applies to successive versions of &#8220;the same&#8221; operating sytem. This is the frustration of the <em>transfer</em> user.</p>
<p>It&#8217;s noticing how completely <em>arbitrary</em> many design standards are—how <em>arbitrarily different</em> between operating systems—such as the <span style="color: #333333;"><strong>End</strong> </span>key that either does or doesn&#8217;t move the insertion point to the end of the line.</p>
<p>Another easy way to mess around is to run applications in a browser that&#8217;s not supported. I do it for tasks that matter, such as making my travel bookings.</p>
<p>All this occasional messing around is about training myself. The experiences I get from this <strong><span style="color: #333333;">broaden</span></strong> the range of details I ask developers to think about as they convert designs into code and into pleasing, productive user experiences.</p>
<table border="0" cellspacing="10" cellpadding="10">
<tbody>
<tr>
<td>In a <a title="Opens in a new window" href="http://www.ixda.org/discuss.php?post=45395" target="_blank">separate IxDA discussion thread</a>, a few people reacted to this blog post:</p>
<ul>
<li>Try a Dvorak keyboard instead of a Qwerty keyboard (Johnathan Berger).</li>
<li>Watch children&#8217;s first use of a design (Brandon E.B. Ward).</li>
<li>Use <em>only</em> the keyboard, not the mouse (CK Vijay Bhaskar).</li>
<li>Sit in at the Customer Support desk for a day (Adrian Howard).</li>
<li>Search <a title="Opens in a new window" href="http://search.twitter.com" target="_blank">Twitter</a> to find out how people feel about a product (Paul Bryan).</li>
</ul>
<p>See also the comment(s) below, directly in this blog.</td>
</tr>
</tbody>
</table>
]]></content:encoded>
			<wfw:commentRss>http://fivesketches.com/2009/09/train-yourself-in-frustration/feed/</wfw:commentRss>
		<slash:comments>2</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>What &#8220;standard&#8221; GUI means</title>
		<link>http://fivesketches.com/2009/03/what-standard-gui-means/</link>
		<comments>http://fivesketches.com/2009/03/what-standard-gui-means/#comments</comments>
		<pubDate>Mon, 16 Mar 2009 16:11:13 +0000</pubDate>
		<dc:creator>JeromeR</dc:creator>
				<category><![CDATA[Design, process, business]]></category>
		<category><![CDATA[Alan Cooper]]></category>
		<category><![CDATA[BarnRaising]]></category>
		<category><![CDATA[Boxes and Arrows]]></category>
		<category><![CDATA[MacOS]]></category>
		<category><![CDATA[Milan Guenther]]></category>
		<category><![CDATA[pen]]></category>
		<category><![CDATA[ribbon]]></category>
		<category><![CDATA[software design]]></category>
		<category><![CDATA[standards]]></category>
		<category><![CDATA[touch]]></category>
		<category><![CDATA[Vista User Experience Interaction Guide]]></category>
		<category><![CDATA[Vista UX Guide]]></category>
		<category><![CDATA[Wikipatterns]]></category>

		<guid isPermaLink="false">http://fivesketches.com/?p=511</guid>
		<description><![CDATA[If you decide to forego the design stage and reuse or copy an existing GUI or interaction design, your life is easier.
But how do you know when you have a standard to follow?
An obvious place to find standards is in the precedents set by your own Development team. If your standards are not documented, consider [...]]]></description>
			<content:encoded><![CDATA[<p>If you decide to forego the design stage and reuse or copy an existing GUI or interaction design, your life is easier.</p>
<p>But how do you know when you have a standard to follow?</p>
<p>An obvious place to find standards is in the precedents set by your own Development team. If your standards are not documented, consider a <a title="Opens in a new window" href="http://www.wikipatterns.com/display/wikipatterns/BarnRaising" target="_blank">BarnRaising</a> afternoon, once a month, until the high priority standards are documented.</p>
<p>And while many of us have enjoyed the comfort of a style guide to follow, there&#8217;s more flexibility now, as <a title="Opens in a new window" href="http://www.linkedin.com/in/milanguenther" target="_blank">Milan Guenther</a> wrote in <a title="Opens in a new window" href="http://boxesandarrows.com/view/photos-for" target="_blank">Photos for interaction</a>:</p>
<blockquote><p><img style="float: right;" src="http://fivesketches.com/wp-content/uploads/2009/03/boxes-and-arrows-logo.gif" alt="© Boxes and Arrows" width="202" height="25" />The barrier between web pages and desktop software is beginning to disappear, and modern rich client user interface technologies such as Silverlight/WPF, Air, or Java FX enables designers to take the control over the whole user experience of a software product. Style guides for operating systems like MacOS or Windows become less important because software products are available on multiple platforms, incorporating the same custom design independently from OS-specific style guides. Software companies and other parties involved begin to use the power of a distinct visual design to express both their brand identity and custom interactive design solutions to the users.</p></blockquote>
<p>But not everything needs to be reinvented. There are plenty of common user tasks that the operating system supports with default GUI, including Open, Save, Print, Search/Replace, Font, Color, and Page Setup tasks. These also defaults serve as <em>patterns</em> for the custom GUI that you design—the visible objects, and the invisible ones, such as:</p>
<ul>
<li>mental models</li>
<li>workflows</li>
</ul>
<p>The two traditional operating systems give us plenty of standard controls to meet any design challenge, including buttons, boxes, sliders, progress indicators, notifications, and much more. If you develop for MacOS, Apple publishes various guidelines, including for <a title="Opens in a new window" href="http://developer.apple.com/documentation/MacOSX/Conceptual/OSX_Technology_Overview/UserExperience/UserExperience.html#//apple_ref/doc/uid/TP40001067-CH274-SW1" target="_blank">user experience</a>. If you develop for Windows, the <a title="Opens in a new window" href="http://msdn.microsoft.com/en-us/library/aa511258.aspx" target="_blank">Vista UX Guide</a> is updated regularly, with new sections for <a title="Opens in a new window" href="http://msdn.microsoft.com/en-us/library/cc872782.aspx" target="_blank">ribbons</a>, <a title="Opens in a new window" href="http://msdn.microsoft.com/en-us/library/cc872774.aspx" target="_blank">touch</a>, <a title="Opens in a new window" href="http://msdn.microsoft.com/en-us/library/cc872775.aspx" target="_blank">pen</a>, and <a title="Opens in a new window" href="http://msdn.microsoft.com/en-us/library/cc872778.aspx" target="_blank">printing</a>.</p>
<p style="text-align: center;"> <img class="alignnone size-full wp-image-470" title="sample-controls" src="http://fivesketches.com/wp-content/uploads/2009/03/sample-controls.png" alt="sample-controls" width="330" height="125" /></p>
<p>Despite everything I just said about following standards, I&#8217;m also a big believer in changing things that are broken. An example: on my desk I can have two sheets of paper, copies of the same document. On my desk, they don&#8217;t need to have different names—even if each sheet has different comments written on it by different people. On my computer, the same two documents must either have different names or be in different folders. Surely the computer can keep track of both, uniquely, without forcing the user to choose different names? The unique-name requirement is an example of architecture dictating the interface. Alan Cooper wrote about this and other examples of tail wagging the dog in <a title="Opens in a new window" href="http://www.cooper.com/insights/books/#aboutface3" target="_blank">About Face: The essentials of user-interface design</a>.</p>
<p>If you&#8217;re wondering when to copy/reuse, and when to design, check out my blog 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/what-standard-gui-means/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>Napkin to Five Sketches™</title>
		<link>http://fivesketches.com/2008/10/napkin-to-five-sketches/</link>
		<comments>http://fivesketches.com/2008/10/napkin-to-five-sketches/#comments</comments>
		<pubDate>Sat, 18 Oct 2008 16:11:54 +0000</pubDate>
		<dc:creator>JeromeR</dc:creator>
				<category><![CDATA[Design, process, business]]></category>
		<category><![CDATA[Five Sketches™]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[What I am doing]]></category>
		<category><![CDATA[abstract thinking]]></category>
		<category><![CDATA[Bill Buxton]]></category>
		<category><![CDATA[conative preferences]]></category>
		<category><![CDATA[corporate usability maturity]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[developers]]></category>
		<category><![CDATA[experiencing]]></category>
		<category><![CDATA[GK Vanpatter]]></category>
		<category><![CDATA[heuristics]]></category>
		<category><![CDATA[ideating]]></category>
		<category><![CDATA[ideation]]></category>
		<category><![CDATA[Jakob Nielsen]]></category>
		<category><![CDATA[Jerome Ryckborst]]></category>
		<category><![CDATA[judging]]></category>
		<category><![CDATA[process]]></category>
		<category><![CDATA[prototyping]]></category>
		<category><![CDATA[sketching]]></category>
		<category><![CDATA[software design]]></category>
		<category><![CDATA[software development]]></category>
		<category><![CDATA[standards]]></category>
		<category><![CDATA[user personas]]></category>

		<guid isPermaLink="false">http://fivesketches.com/?p=687</guid>
		<description><![CDATA[It&#8217;s been a year since that flash of insight hit me. Looking back, getting to what I now call the Five Sketches™ ideation-design method was an interesting journey.
The setting. I was working on a two-person usability team faced with six major software- and web products to support. We were empowered to do usability, but not design. At the time, the team was in the [...]]]></description>
			<content:encoded><![CDATA[<p>It&#8217;s been a year since that flash of insight hit me. Looking back, getting to what I now call the Five Sketches™ ideation-design method was an interesting journey.</p>
<p><strong>The setting</strong>. I was working on a two-person usability team faced with six major software- and web products to support. We were empowered to do usability, but not design. At the time, the team was in the early stages of Nielsen&#8217;s <a title="Opens in a new window" href="http://www.useit.com/alertbox/maturity.html" target="_blank">Corporate Usability Maturity</a> model. Design, it was declared, would be the responsibility of the developers, not the usability team. I was faced with this challenge:</p>
<blockquote><p><img style="BORDER-RIGHT: white 8px solid; float: left;" src="http://fivesketches.com/wp-content/uploads/2008/10/process-problemsetting.png" alt="" width="37" height="65" />How to get <strong><span style="color: #555555;">usable</span> </strong>products<br />
from software- and web developers<br />
by using a method that is<br />
both <strong><span style="color: #555555;">reliable</span></strong> and <span style="color: #555555;"><strong>repeatable</strong></span>.</p></blockquote>
<p><strong>The first attempt</strong>. I introduced each development team to the usability basics: user personas, requirements, paper prototyping, heuristics, and standards. Some developers went for usability training. In hindsight, it&#8217;s easy to see that none of this could work without a formal design process in place.</p>
<p><strong>The second attempt</strong>. I continued to read, to listen, and to ask others for ideas. The answer came as separate pieces, from different sources. For several months, I was fumbling in the metaphorical dark, having no idea that the answer was within reach. Then, after a Microsoft product launch on Thursday, 18 October, 2007, the light went on. While sitting on a bar stool, the event&#8217;s <a title="Opens in a new window" href="http://bmannconsulting.com/blog/bmann/microsoft-expression-launch-event-canvas-lounge-gk-vanpatter-and-silverlight" target="_blank">guest speaker, GK Vanpatter</a>, mapped out an idea for me on a cocktail napkin:</p>
<ol>
<li>Design requires three steps.</li>
<li>Not everyone is comfortable with each of those steps.</li>
<li>You have to help them.</li>
</ol>
<p><object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="328" height="270" codebase="http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0"><param name="src" value="http://Fivesketches.com/images/video/vanpatter's-napkin.mp4" /><embed type="video/quicktime" width="328" height="270" src="http://Fivesketches.com/images/video/vanpatter's-napkin.mp4"></embed></object></p>
<p><em>The quadrants are the <strong><span style="color: #555555;">conative preferences</span> </strong>or preferred problem-solving styles.</em></p>
<p>I recognised that I already had an answer to step 3, because I&#8217;d heard Bill Buxton speak at the 2007 UPA conference, four months earlier. I could help developers be comfortable designing by asking them to sketch.</p>
<p>It was more easily said than done. Everyone on that first team showed dedication and courage. We had help from a Vancouver-based process expert who skilfully debriefed each of us and then served us a summary of remaining problems to iron out. And, when we were done, we had the beginnings of an ideation-and-design method.</p>
<p>Since then, it&#8217;s been refined with additional teams of design participants, and it will be refined further—perhaps changed significantly to suit changing circumstances. But that&#8217;s the story of the first year.</p>
]]></content:encoded>
			<wfw:commentRss>http://fivesketches.com/2008/10/napkin-to-five-sketches/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

