<?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; Vista User Experience Interaction Guide</title>
	<atom:link href="http://fivesketches.com/tag/vista-user-experience-interaction-guide/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>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>
	</channel>
</rss>

