<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss 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/" version="2.0">

<channel>
	<title>Usability Post</title>
	
	<link>http://www.usabilitypost.com</link>
	<description>Design and usability blog</description>
	<lastBuildDate>Fri, 06 Nov 2009 18:42:44 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" href="http://feeds.feedburner.com/usabilitypost" type="application/rss+xml" /><feedburner:emailServiceId xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0">usabilitypost</feedburner:emailServiceId><feedburner:feedburnerHostname xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0">http://feedburner.google.com</feedburner:feedburnerHostname><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com" /><item>
		<title>A Better Distribution Channel for Desktop Apps</title>
		<link>http://www.usabilitypost.com/2009/11/06/better-distribution-channe-for-desktop-apps/</link>
		<comments>http://www.usabilitypost.com/2009/11/06/better-distribution-channe-for-desktop-apps/#comments</comments>
		<pubDate>Fri, 06 Nov 2009 18:42:44 +0000</pubDate>
		<dc:creator>Dmitry</dc:creator>
				<category><![CDATA[Miscellaneous]]></category>

		<guid isPermaLink="false">http://www.usabilitypost.com/?p=671</guid>
		<description><![CDATA[My Tuesday&#8217;s post was about the iPhone and what it does right. Apart from being a usable device it has another great feature: the App Store. You can browse all the apps available for the phone and get them with just a tap of the finger (or two, together with password input to be precise). [...]]]></description>
			<content:encoded><![CDATA[<p>My Tuesday&#8217;s post was about the iPhone and what it does right. Apart from being a usable device it has another great feature: the App Store. You can browse all the apps available for the phone and get them with just a tap of the finger (or two, together with password input to be precise). The apps you download are also updated through the App Store &#8212; so whenever there&#8217;s a new version of the app out, you see a little number pop up above the App Store icon. That number says: you&#8217;ve got a new update available. Going to the update window lets you see what&#8217;s been updated and download the update.</p>
<p>This is a great delivery channel for apps. There are two big benefits to this approach: 1) you get to browse all the apps available for your platform in one place and 2) you can keep all your apps up to date with ease.<span id="more-671"></span></p>
<p>There is no such delivery system for all our desktop apps. Some might say: well&#8230; the Web is now that system. Search for whatever you need on Google and buy the app online. This is an open system without constraints on developers or consumers. But it&#8217;s also not very good for consumers because Googling for apps isn&#8217;t very efficient. Sometimes there are little tools that do exactly what you want, but they have poorly optimised websites that just don&#8217;t show up in the search results you&#8217;re looking at. Also, in an integrated marketplace you can track the most popular apps and read user reviews, which help you make purchase decisions.</p>
<p>Also: updating apps today can be simplified. A lot of apps have some sort of auto-update system where the app will automatically monitor itself for updates and then download them when required. That&#8217;s great, but not all desktop apps have this. Sometimes you have to go to the app&#8217;s website and download the new files. The ideal is an automatic system that keeps everything up to date without requiring much effort on the user&#8217;s part to maintain. The system should do the checking and updating, leaving the user with just one task: confirming whether they want to update or not &#8212; and even that should be optional.</p>
<p>My OS of choice is Mac OS X. There&#8217;s this great website called <a href="http://osx.iusethis.com/">I use this</a>. It&#8217;s basically a database of all apps available for OS X (Windows and iPhone sites are also available). It&#8217;s a bit like a social news site for apps &#8212; instead of voting up stories, you vote up apps. This lets you see the most popular apps overall, and also in individual categories. This is a great method of finding software to solve your problem &#8212; just search for your keyword and look through the top entries. User comments/reviews also come in handy.</p>
<p>This solves the selection problem, but it doesn&#8217;t solve updating. I think there&#8217;s an opportunity here for Apple, or whomever, to build an application manager like this that will 1) let you find the right apps to solve your problems and 2) update these apps through a simple integrated interface.</p>
<p>A great example of this done right is the <a href="http://store.steampowered.com/">Steam</a> platform on Windows. Steam is a game delivery channel developed by Valve that basically does exactly what I&#8217;m talking about above: it offers you a catalog of games to browse through, it offers you an interface to purchase and download them, and it offers you instant updates when they become available. One of the more important benefits of Steam is that when you log on to a new PC, or say, reformat your current one, you can easily re-download all the stuff you&#8217;ve purchased because it keeps a record of that. This means you don&#8217;t need to keep any registration codes or CDs around &#8212; all the apps you own are instantly available to you when you log in.</p>
<p style="text-align: center;"><img class="alignnone" title="Valves steam" src="http://img.usabilitypost.com/0911/steam.png" alt="" width="540" height="409" /><br />
<em>Valve&#8217;s Steam</em></p>
<p>Perhaps this is the right model for distributing today&#8217;s desktop apps. Offer an App Store for desktop apps that lets you find, purchase and download what you need, keep a track of all your purchases in case you need to get them again and offer integrated updates. Apple and the App Store have been under some heavy fire lately for hand picking apps they do and don&#8217;t want to include in their store, and although that is a real concern with this distribution model I think the benefits for consumers outweigh those problems.</p>
<p>What do you think? Do we need a better app delivery system? Leave your comments below.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.usabilitypost.com/2009/11/06/better-distribution-channe-for-desktop-apps/feed/</wfw:commentRss>
		<slash:comments>16</slash:comments>
		</item>
		<item>
		<title>3 Things Phone Manufacturers Should Get Right to Beat the iPhone</title>
		<link>http://www.usabilitypost.com/2009/11/03/3-things-phone-manufacturers-should-get-right-to-beat-the-iphone/</link>
		<comments>http://www.usabilitypost.com/2009/11/03/3-things-phone-manufacturers-should-get-right-to-beat-the-iphone/#comments</comments>
		<pubDate>Tue, 03 Nov 2009 23:03:07 +0000</pubDate>
		<dc:creator>Dmitry</dc:creator>
				<category><![CDATA[Usability]]></category>
		<category><![CDATA[User Experience]]></category>

		<guid isPermaLink="false">http://www.usabilitypost.com/?p=652</guid>
		<description><![CDATA[It&#8217;s interesting to see the latest developments in the phone market. Everyone is scrambling to match the iPhone in form and function in order to hold on to their market share. Sure, the iPhone is a high end phone, so not everyone is going for it, but it at is also a very very successful [...]]]></description>
			<content:encoded><![CDATA[<p>It&#8217;s interesting to see the latest developments in the phone market. Everyone is scrambling to match the iPhone in form and function in order to hold on to their market share. Sure, the iPhone is a high end phone, so not everyone is going for it, but it at is also a very very successful phone that gets a lot of things right, and the competition knows it.</p>
<p>Which is why we&#8217;re seeing all those Storms, Pres and Droids on the market lately. They come close, but always seem to fall short. It&#8217;s not the features &#8212; these phones usually have more features and better specs than Apple&#8217;s offering &#8212; it&#8217;s something else. To me, it all boils down to just 3 things. If any phone manufacturer gets these 3 things right, they&#8217;ll beat the iPhone at its own game:<span id="more-652"></span></p>
<p>1. Flow<br />
2. Responsiveness<br />
3. Polish</p>
<h3>1. Flow</h3>
<p>Usable devices are all about flow. What&#8217;s flow? For every task that people perform on their device there is a sequence of actions they go through. Sometimes it&#8217;s just one action &#8212; you click a button and whatever you wanted to happen, happens: e.g. pushing the Home button to get back to the main screen. For other tasks you may go through dozens of actions before you reach your desired end.</p>
<p>Good flow means the designers have anticipated common tasks, reduced the number of actions required to accomplish them, and ensured the next actions are always there in front of the user so they don&#8217;t even have to think about what to push next. Here&#8217;s a great <a href="http://www.viddler.com/explore/fowd/videos/16/">presentation by Ryan Singer</a> from 37signals talking about usability &#8212; Ryan talks about flow at about 38 minutes in with some great examples.</p>
<h3>2. Responsiveness</h3>
<p>Responsiveness here is all about speed. Stuff should happen when you press buttons or slide your finger across the screen. That&#8217;s obvious, right? Yet most phones on the market aren&#8217;t very responsive. You slide your finger, and half a second later the screen begins to move in a choppy manner. The device is laggy and slow &#8212; it&#8217;s not responsive.</p>
<p>All of the lag, the waiting between screens, the waiting for applications to launch and for the screen to scroll creates serious friction with the user. When you want to do something you have to wait for the device to catch up. That&#8217;s frustrating.</p>
<h3>3. Polish</h3>
<p>Polish is craftsmanship. When you&#8217;re finalising the user interface, make it look good. This doesn&#8217;t mean adding gradients, shiny gloss, reflections, shadows or a plethora of other visual effects &#8212; most of that stuff is superfluous &#8212; it means tasteful typesetting, choice of palette and contrast calibration. The important things should pop out at you, while the secondary and tertiary elements should fade into the background. There should be enough whitespace to make things easy to read and scan. That&#8217;s all you really need, yet we&#8217;re still seeing a lot of blunders in this department.</p>
<p>Just look at the settings panels of a Blackberry &#8212; there isn&#8217;t even any left padding on the text there, which means its touching the left edge of the screen. A little bit of polish will go a long way.</p>
<p>Get those 3 things right and you&#8217;ll beat the iPhone, or will at least match it. Why? Because the phone is a different device to say, a PC. The phone is always there with you, and its used primary for quick, almost mechanical, tasks. Calling people, checking SMS, checking the time, checking the map, snapping a quick picture. There are many different things you can do with a phone, but all of them are quick actions. This means the phone should aim to be closer to how a mechanical device works.</p>
<p>Think about a toaster. You put in the bread, you push the lever, and that&#8217;s it. Your action is done, and now you just wait for the bread to toast. The interface is dead simple and its instantly responsive. That&#8217;s because it&#8217;s mechanical. There&#8217;s not a lot to get between you and what you want to achieve. In electronic devices though, there is a lot of &#8220;interface&#8221; in your way, which tends to also be very laggy and confusing. What you want to do though is get closer to the mechanical toaster and do the users&#8217; actions easily and quickly.</p>
<p>That&#8217;s why the iPhone is so effective. It&#8217;s fast and responsive. It&#8217;s also very polished, which raises it even higher. Apple doesn&#8217;t care about features because it knows that that stuff just doesn&#8217;t matter. What people want is a device that doesn&#8217;t get in your way.</p>
<p>Other phone manufacturers are too focused on the hardware. Most of them produce really great hardware. But the problem is that hardware is only half the problem &#8212; the OS is just as, if not more, important than the hardware it runs on. The OS is the interface &#8212; it&#8217;s what lets people do the stuff they want to do with their phones. The OS is also the thing that my 3 points above are governed by.</p>
<p>Forget features, forget specs, forget <a href="http://mashable.com/2009/10/29/droid-vs-iphone/">comparison charts</a>. A comparison chart will never tell you about user experience and usability, and in the end, that&#8217;s what matters most in a pocket device.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.usabilitypost.com/2009/11/03/3-things-phone-manufacturers-should-get-right-to-beat-the-iphone/feed/</wfw:commentRss>
		<slash:comments>34</slash:comments>
		</item>
		<item>
		<title>Mouse Cursor Affordance</title>
		<link>http://www.usabilitypost.com/2009/10/26/mouse-cursor-affordance/</link>
		<comments>http://www.usabilitypost.com/2009/10/26/mouse-cursor-affordance/#comments</comments>
		<pubDate>Mon, 26 Oct 2009 19:18:07 +0000</pubDate>
		<dc:creator>Dmitry</dc:creator>
				<category><![CDATA[HTML/CSS]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[User Interface]]></category>

		<guid isPermaLink="false">http://www.usabilitypost.com/?p=638</guid>
		<description><![CDATA[One important interaction indicator on the web is the mouse cursor. The default cursor arrow changes into a pointing hand when you hover over links for example, which indicates they are indeed links and can be clicked on. It also changes into other things to differentiate context, for example it can change into a text [...]]]></description>
			<content:encoded><![CDATA[<p>One important interaction indicator on the web is the mouse cursor. The default cursor arrow changes into a pointing hand when you hover over links for example, which indicates they are indeed links and can be clicked on. It also changes into other things to differentiate context, for example it can change into a text input cursor when hovering over text fields to indicate you can type there.</p>
<p>When styling your website with CSS, in some cases you may lose the correct cursor type for certain elements. It&#8217;s important to retain this indicator as it will inform the user about how the item they&#8217;re hovering over can be used (see <a href="http://www.uxbooth.com/blog/foundations-of-affordances/">affordances</a>). The solution is easy: if the cursor type is wrong, specify it using the CSS &#8220;cursor&#8221; property.<span id="more-638"></span></p>
<p>Here are a couple of examples.</p>
<p>There&#8217;s a technique for simplifying forms where you place the text field labels inside the actual text fields &#8212; not to the side, not above, but as pre-filled values. When the user clicks on the field, the label disappears and they can start typing. <a href="http://www.alistapart.com/articles/makingcompactformsmoreaccessible">One way of doing this</a> is to use absolute positioning for the label and simply place it above the field. When the field is in focus, use JavaScript to hide the label.</p>
<p>The following problem arises: when the user hovers over the text field, their cursor changes into the text input cursor &#8212; however, when they hover over the area with the label, the cursor doesn&#8217;t change &#8212; it remains the default arrow. This is because you&#8217;re hovering over a label element, not a text field element underneath it. To fix this, we simply add this CSS code to the label field:</p>
<pre>.your_overlabel_class { cursor: text; }</pre>
<p>Now when you hover over any area of the input field, the mouse cursor will change properly to the text input cursor.</p>
<p style="text-align: center; "><img class="alignnone" title="form field arrow cursor" src="http://img.usabilitypost.com/0910/form_cursor_arrow.png" alt="" width="314" height="61" /><br />
<em>Arrow cursor shown when hovering over a label.</em></p>
<p style="text-align: center; "><img class="alignnone" title="text cursor" src="http://img.usabilitypost.com/0910/form_cursor_text.png" alt="" width="321" height="61" /><br />
<em>Text type cursor. Let the user know they can type here.</em></p>
<p>Ok, another example. I like styling form elements on my sites &#8212; text fields, text areas, buttons and so on. Form buttons don&#8217;t actually change the cursor type when you hover over them &#8212; they&#8217;re buttons, not links. Their appearance alone is enough to indicate their purpose. However, when you change their appearance they become something else. Their look is unique to your site, and even though they may look like buttons and are most likely clickable, when the user hovers over them the mouse cursor won&#8217;t change. This is confusing.</p>
<p>Adding the following code to your styled buttons will change the cursor into a pointing hand, indicating the element is clickable:</p>
<pre>.your_button_class { cursor: pointer; }</pre>
<p style="text-align: center;"><img class="alignnone" title="button cursor arrow" src="http://img.usabilitypost.com/0910/button_cursor_arrow.png" alt="" width="92" height="64" /><br />
<em>Standard arrow cursor shown over this styled button</em></p>
<p style="text-align: center;"><img class="alignnone" title="button cursor pointer" src="http://img.usabilitypost.com/0910/button_cursor_pointer.png" alt="" width="92" height="65" /><br />
<em>Pointer cursor on this styled button indicates clickability.</em></p>
<p>I think this is better. Hovering over styled buttons now assures the user that they&#8217;re clickable.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.usabilitypost.com/2009/10/26/mouse-cursor-affordance/feed/</wfw:commentRss>
		<slash:comments>23</slash:comments>
		</item>
		<item>
		<title>Everyday Usability Heuristics: Visibility Of System Status</title>
		<link>http://www.usabilitypost.com/2009/10/23/everyday-usability-heuristics-visibility-of-system-status/</link>
		<comments>http://www.usabilitypost.com/2009/10/23/everyday-usability-heuristics-visibility-of-system-status/#comments</comments>
		<pubDate>Fri, 23 Oct 2009 16:41:59 +0000</pubDate>
		<dc:creator>Guest post</dc:creator>
				<category><![CDATA[Usability]]></category>

		<guid isPermaLink="false">http://www.usabilitypost.com/?p=627</guid>
		<description><![CDATA[
Guest post by Ondřej Válka
Ondřej is a freelance front-end Web developer &#38; designer, currently
helping Pixmac to make its front-end bulletproof.
Two weeks ago, I was watching my 45-year old father browsing the Internet. Every time I watch him I learn a lesson in usability. I&#8217;m sure you know with situations like this one – valuable opportunities [...]]]></description>
			<content:encoded><![CDATA[<div class="guest_author_box">
<div class="guest_author_name">Guest post by <strong>Ondřej Válka</strong></div>
<p><a href="http://www.valka.info">Ondřej</a> is a freelance front-end Web developer &amp; designer, currently<br />
helping <a href="http://www.pixmac.com">Pixmac</a> to make its front-end bulletproof.</div>
<p>Two weeks ago, I was watching my 45-year old father browsing the Internet. Every time I watch him I learn a lesson in usability. I&#8217;m sure you know with situations like this one – valuable opportunities to learn from the ordinary users for whom we design.</p>
<p>As he is using Windows XP the very first thing he did was that he ran Firefox clicking an icon on the desktop. No response. Nothing happened so after a few seconds he clicked the icon one more time. With his eyes focused on the Firefox icon he clicked the icon again. Everything he got was three Firefox windows opened. Sounds familiar?<span id="more-627"></span></p>
<p>The moment I saw this process I realized how applications are launched at my Mac OS X. Being clicked, the Firefox icon starts jumping in the dock. It&#8217;s not just a fancy effect, but a really useful feature. Clicking an icon user gets apparent immediate response. Moreover realize what you do: anytime you want to click an element, your eyes sticks to it. You are not watching the pointer, you just use a mouse and click. The same did my father.</p>
<p><img class="alignnone" title="OS X Dock icon bouncing" src="http://img.usabilitypost.com/0910/up-system-status.png" alt="" width="530" height="80" /></p>
<p style="text-align: center;"><em>Application icons in the OS X Dock bounce during launch to indicate activity.</em></p>
<p>Is a small flickering sand-glass beside the pointer more apparent than a big jumping Firefox icon that user&#8217;s eyes are sticked to? Keep this in mind and try to design thoughtful user interfaces. It&#8217;s not just about applying the <a href="http://www.useit.com/papers/heuristic/heuristic_list.html">Nielsen&#8217;s rules</a>.</p>
<p>Of course it doesn&#8217;t matter what, but it also matters how.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.usabilitypost.com/2009/10/23/everyday-usability-heuristics-visibility-of-system-status/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>Remember Me</title>
		<link>http://www.usabilitypost.com/2009/10/05/remember-me/</link>
		<comments>http://www.usabilitypost.com/2009/10/05/remember-me/#comments</comments>
		<pubDate>Mon, 05 Oct 2009 14:59:45 +0000</pubDate>
		<dc:creator>Dmitry</dc:creator>
				<category><![CDATA[Usability]]></category>
		<category><![CDATA[User Experience]]></category>
		<category><![CDATA[User Interface]]></category>

		<guid isPermaLink="false">http://www.usabilitypost.com/?p=621</guid>
		<description><![CDATA[Last month David Heinemeier Hansson posted a micropost on the 37signals blog asking if it&#8217;s time to kill off the &#8220;Remember me&#8221; checkbox on login forms and simply assume that the user wants the app to remember them the next time they load it, automatically logging them in.
I think this falls in the same category [...]]]></description>
			<content:encoded><![CDATA[<p>Last month David Heinemeier Hansson posted a micropost on the 37signals blog <a href="http://37signals.com/svn/posts/1920-has-the-time-come-to-kill-the-remember-me">asking if it&#8217;s time to kill off the &#8220;Remember me&#8221; checkbox</a> on login forms and simply assume that the user wants the app to remember them the next time they load it, automatically logging them in.</p>
<p>I think this falls in the same category as <a href="http://www.useit.com/alertbox/passwords.html">Jakob Nielsen&#8217;s recent suggestion to drop password masking</a>. Yes, it would make life easier in many cases, but it would also pose problems. The consensus seems to be that the problems outweigh the benefits. Forgetting to log out and thus compromising your data is worse than having to check a &#8220;Remember me&#8221; box.</p>
<p>But this isn&#8217;t the only solution to the problem. There is another way you can do this that leans closer to the automatic remembering, but doesn&#8217;t go quite as far:<span id="more-621"></span> check the &#8220;Remember me&#8221; box by default.  This is exactly what Google is doing:</p>
<p><img class="alignnone" title="Google Reader login box" src="http://img.usabilitypost.com/0910/google_reader_login.png" alt="" width="321" height="221" /></p>
<p>And you know, I think it works. Most of us probably check that remember box all the time anyway and having the form automatically help you out saves you having to take your hands off your keyboard and mouse over that checkbox. It&#8217;s a small thing, but it makes the login form more usable and faster to process.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.usabilitypost.com/2009/10/05/remember-me/feed/</wfw:commentRss>
		<slash:comments>43</slash:comments>
		</item>
		<item>
		<title>Restraint</title>
		<link>http://www.usabilitypost.com/2009/10/02/restraint/</link>
		<comments>http://www.usabilitypost.com/2009/10/02/restraint/#comments</comments>
		<pubDate>Fri, 02 Oct 2009 21:38:57 +0000</pubDate>
		<dc:creator>Dmitry</dc:creator>
				<category><![CDATA[Design]]></category>

		<guid isPermaLink="false">http://www.usabilitypost.com/?p=602</guid>
		<description><![CDATA[Restraint in design
There is one attribute of good design that I often see overlooked: restraint. Restraint in design is the quality of holding yourself back and implementing something which solves the problem in the simplest way possible. Oftentimes designers want to show off, imprint their own identity on a piece of work or simply get [...]]]></description>
			<content:encoded><![CDATA[<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Restraint in design</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">There is one attribute of good design that I often see overlooked: restraint. Restraint in design is the quality of holding yourself back and implementing something which solves the problem in the simplest way possible. Oftentimes designers want to show off, imprint their own identity on a piece of work or simply get carried away, producing work that is good but losing simplicity and elegance in the process.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Giving your work an identity certainly doesn&#8217;t mean you&#8217;re losing restraint &#8212; it&#8217;s actually a good practice &#8212; but it may lead down the road of implementing too many design elements for the sake of design elements &#8212; things that don&#8217;t really need to be there in order to solve the problem. Instead, apply your identity to the core elements &#8212; things that you absolutely cannot take out &#8212; and throw away the rest. What you&#8217;ll achieve is a product that&#8217;s simple, yet bears your own mark upon it.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Let&#8217;s take a look at a set of modern mobile phones:</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">[image]</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">You can see how one phone stands out from the rest: the iPhone. Ok, an obvious example, but it&#8217;s only obvious because it&#8217;s good.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">The iPhone uses the minimal design possible. There is only one button and the whole phone is essentially just one big display. Apple always use simple geometric shapes &#8212; there are no unique curves or design elements sticking out &#8212; it&#8217;s just symmetrical curves, circles, rectangles and lines carefully arranged to form their iconic minimalist, industrial design.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">The other phones may feature fashionable, sleek shapes, but they lack simplicity because these shapes are unique to each phone and there are too many elements involved. There is the keyboard, the accept and decline buttons, the Ok and Cancel buttons, menu buttons in some cases, and also the button wheel. The lines and curves are not made out of simple symmetrical shapes &#8212; they&#8217;re unique to each phone. Yes, this makes the new phones look sleek, but it also makes them look less iconic and less memorable when compared to the brilliant simplicity of Apple&#8217;s design that uses only the simplest shapes.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">You can sketch the iPhone with just a few lines and the resulting shape is clearly identifiable.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">[image]</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">This is minimalist design. It&#8217;s iconic. Of course minimalism isn&#8217;t a requirement for creating successful designs but by reducing the phone&#8217;s construction to the bare minimum and composing it out of simple geometric shapes Apple consistently delivers products that stand out and products that people love. The same design principles are seen in all their work: iPods, iMacs, MacBooks and so on.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Restraint plays a huge part in this because you have to stop yourself and think: hang on &#8212; I don&#8217;t need all these lines and shapes. I don&#8217;t need this button here. I can make this whole section out of one piece of material. I don&#8217;t need to use these complex lines where simpler shapes would suffice. And so on. Restrain yourself &#8212; think about accomplishing your goal with less &#8212; what you&#8217;ll achieve is simplicity.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Let&#8217;s take a look at some more examples of restraint. This is Dan Cederholm&#8217;s website SimpleBits:</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">[image]</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">It&#8217;s not spartan by any means &#8212; there are visual elements throughout, like the subtle background texture in the header and the lighter gradient at the top of the content &#8212; but it would be impossible to call it anything other than simple and clean. It&#8217;s a beautiful minimalist design that works.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Is restraint always good? No, it only works in the right circumstances. Sometimes, you need to forget restraint and embrace complexity. Some work just needs to be complex &#8212; needs to be unique, elaborate and remarkable. Not all design should be utilitarian and industrial, some things are made for self expression and art.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">For example, portfolio sites of artists and web designers are usually very intense in use of visuals and eye candy. Here are a couple of great examples:</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">[image]</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">[image]</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">This isn&#8217;t simply design &#8212; it&#8217;s art. The aim here isn&#8217;t to make a clean and usable website, but to create a unique, branded identity and to impress and delight the sites&#8217; visitors.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">On the Red Square, in Moscow, stands an impressive cathedral: Saint Basil&#8217;s Cathedral. The cathedral was commissioned by Ivan IV (Ivan the Terrible) and was built in 1561. It&#8217;s a very remarkable building, with a unique design and several very colourful and intricately decorated domes. There is a legend that says that the architect of this cathedral, Postnik Yakovlev, was blinded after its construction by Ivan&#8217;s orders to ensure that he doesn&#8217;t build anything more magnificent for anyone else.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">And so it is with work like this. Forget restraint and create something truly spectacular &#8212; something that inspires and takes your breath away, something that nobody else can replicate because of its intricacy and unique technique involved in its design.</div>
<p>There is one attribute of good design that I often see overlooked: restraint. Restraint in design is the quality of holding yourself back and implementing something which solves the problem in the simplest way possible. Oftentimes designers want to show off, imprint their own identity on a piece of work or simply get carried away, producing work that is good but losing simplicity and elegance in the process.</p>
<p>Giving your work an identity certainly doesn&#8217;t mean you&#8217;re losing restraint &#8212; it&#8217;s actually a good practice &#8212; but it may lead down the road of implementing too many design elements for the sake of design elements &#8212; things that don&#8217;t really need to be there in order to solve the problem. Instead, apply your identity to the core elements &#8212; things that you absolutely cannot take out &#8212; and throw away the rest. What you&#8217;ll achieve is a product that&#8217;s simple, yet bears your own mark upon it.</p>
<p>Let&#8217;s take a look at a set of modern mobile phones:</p>
<p><img class="alignnone" title="Phones" src="http://img.usabilitypost.com/0910/phones.jpg" alt="" width="530" height="194" /></p>
<p>You can see how one phone stands out from the rest: the iPhone. Ok, an obvious example, but it&#8217;s only obvious because it&#8217;s good.<span id="more-602"></span></p>
<p>The iPhone uses the minimal design possible. There is only one button and the whole phone is essentially just one big display. Apple always use simple geometric shapes &#8212; there are no unique curves or design elements sticking out &#8212; it&#8217;s just symmetrical curves, circles, rectangles and lines carefully arranged to form their iconic minimalist, industrial design.</p>
<p>The other phones may feature fashionable, sleek shapes, but they lack simplicity because these shapes are unique to each phone and there are too many elements involved. There is the keyboard, the accept and decline buttons, the Ok and Cancel buttons, menu buttons in some cases, and also the button wheel. The lines and curves are not made out of simple symmetrical shapes &#8212; they&#8217;re unique to each phone. Yes, this makes the new phones look sleek, but it also makes them look less iconic and less memorable when compared to the brilliant simplicity of Apple&#8217;s design that uses only the simplest shapes.</p>
<p>You can sketch the iPhone with just a few lines and the resulting shape is clearly identifiable.</p>
<p><img class="alignnone" title="iPhone outline" src="http://img.usabilitypost.com/0910/iphone_outline.jpg" alt="" width="140" height="194" /></p>
<p>This is minimalist design. It&#8217;s iconic. Of course minimalism isn&#8217;t a requirement for creating successful designs but by reducing the phone&#8217;s construction to the bare minimum and composing it out of simple geometric shapes Apple consistently delivers products that stand out and products that people love. The same design principles are seen in all their work: iPods, iMacs, MacBooks and so on.</p>
<p>Restraint plays a huge part in this because you have to stop yourself and think: hang on &#8212; I don&#8217;t need all these lines and shapes. I don&#8217;t need this button here. I can make this whole section out of one piece of material. I don&#8217;t need to use these complex lines where simpler shapes would suffice. And so on. Restrain yourself &#8212; think about accomplishing your goal with less &#8212; what you&#8217;ll achieve is simplicity.</p>
<p>Let&#8217;s take a look at some more examples of restraint. This is Dan Cederholm&#8217;s website <a href="http://www.simplebits.com">SimpleBits</a>:</p>
<p><img class="alignnone" title="Simplebits" src="http://img.usabilitypost.com/0910/simplebits.png" alt="" width="530" height="343" /></p>
<p>It&#8217;s not spartan by any means &#8212; there are visual elements throughout, like the subtle background texture in the header and the lighter gradient at the top of the content &#8212; but it would be impossible to call it anything other than simple and clean. It&#8217;s a beautiful minimalist design that works.</p>
<p>Here&#8217;s <a href="http://www.flickr.com">Flickr</a>:</p>
<p><img class="alignnone" title="flickr" src="http://img.usabilitypost.com/0910/flickr.jpg" alt="" width="530" height="506" /></p>
<p>Notice that there are almost no visual elements &#8212; this design really is spartan. If you look very closely, you&#8217;ll notice there are tiny rounded corners on the little buttons and frames, and 1 pixel highlights, so the design is by no means unpolished &#8212; it&#8217;s restrained. It accomplishes its objective by being clean, quick to load and putting the actual content to the front.</p>
<p>Here&#8217;s the <a href="http://www.basecamphq.com">Basecamp</a> project management app:</p>
<p><img class="alignnone" title="Basecamp" src="http://img.usabilitypost.com/0910/basecamp.png" alt="" width="530" height="373" /></p>
<p>Same thing here &#8212; the designers didn&#8217;t try to show off or add eye candy &#8212; everything is styled very simply. It&#8217;s actually fairly polished, but it&#8217;s not polished in the sense of being beautiful, it&#8217;s polished in the sense of being clear and usable. The designers restrain themselves from adding unnecessary lines, textures and eye candy &#8212; what&#8217;s left is all there for a reason.</p>
<p>These designs are simple not because their designers lack the skill to create more complicated visuals; they&#8217;re simple because their designers restrained themselves from doing so.</p>
<p>Is restraint always good? No, it only works in the right circumstances. Sometimes, you need to forget restraint and embrace complexity. Some work just needs to be complex &#8212; needs to be unique, elaborate and remarkable. Not all design should be utilitarian and industrial, some things are made for self expression and art.</p>
<p>For example, portfolio sites of artists and web designers are usually very intense in use of visuals and eye candy. Here are a couple of great examples:</p>
<p><a href="http://www.webdesignerwall.com/"><img class="alignnone" title="Web designer wall" src="http://img.usabilitypost.com/0910/wall.jpg" alt="" width="530" height="427" /></a></p>
<p><a href="http://www.ndesign-studio.com/"><img class="alignnone" title="ndesign" src="http://img.usabilitypost.com/0910/ndesign.jpg" alt="" width="530" height="355" /></a></p>
<p>This isn&#8217;t simply design &#8212; it&#8217;s art. The aim here isn&#8217;t to make a clean and usable website, but to create a unique, branded identity and to impress and delight the sites&#8217; visitors.</p>
<p><img class="alignright" style="margin-left: 15px;" title="St Basils Cathedral" src="http://img.usabilitypost.com/0910/st_basil.jpg" alt="" width="250" height="212" />On the Red Square, in Moscow, stands an impressive cathedral: Saint Basil&#8217;s Cathedral. The cathedral was commissioned by Ivan IV (Ivan the Terrible) and was built in 1561. It&#8217;s a very remarkable building, with a unique design and several very colourful and intricately decorated domes. There is a legend that says that the architect of this cathedral, Postnik Yakovlev, was blinded after its construction by Ivan&#8217;s orders to ensure that he didn&#8217;t build anything more magnificent for anyone else.</p>
<p>And so it is with work like this. Forget restraint and create something truly spectacular &#8212; something that inspires and takes your breath away, something that nobody else can replicate because of its intricacy and unique technique involved in its design.</p>
<p>But when you&#8217;re working on something like a web app, where clarity and usability comes first &#8212; focus on that and restrain yourself from adding eye candy that will do nothing but distract the user from what they&#8217;re doing. Simplicity doesn&#8217;t need to look barren either, as we&#8217;ve seen in the case of products like the iPhone it can be beautiful and iconic. If the visuals don&#8217;t help, they don&#8217;t need to be there. What&#8217;s left can be fashioned by you to create the look and feel unique to your brand.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.usabilitypost.com/2009/10/02/restraint/feed/</wfw:commentRss>
		<slash:comments>28</slash:comments>
		</item>
		<item>
		<title>Contextual Interviews and Ethnography: Two Different Types of Home Visits</title>
		<link>http://www.usabilitypost.com/2009/09/09/contextual-interviews-and-ethnography/</link>
		<comments>http://www.usabilitypost.com/2009/09/09/contextual-interviews-and-ethnography/#comments</comments>
		<pubDate>Wed, 09 Sep 2009 21:05:54 +0000</pubDate>
		<dc:creator>Dmitry</dc:creator>
				<category><![CDATA[Usability]]></category>
		<category><![CDATA[User Experience]]></category>

		<guid isPermaLink="false">http://www.usabilitypost.com/?p=590</guid>
		<description><![CDATA[
Guest post by Demetrius Madrigal
Demetrius is a co-founder of ActiveComm Labs, who specialize in user experience and human factors research.
It’s important to make a distinction between these two different research methodologies and the kind of data you get from each. Both involve visiting a participant in their homes or other environments but they are distinctly [...]]]></description>
			<content:encoded><![CDATA[<div class="guest_author_box">
<div class="guest_author_name">Guest post by <strong>Demetrius Madrigal</strong></div>
<p>Demetrius is a co-founder of <a href="http://www.activecomm.net">ActiveComm Labs</a>, who specialize in user experience and human factors research.</div>
<p>It’s important to make a distinction between these two different research methodologies and the kind of data you get from each. Both involve visiting a participant in their homes or other environments but they are distinctly different. Contextual interviews, which rely on self-report data, and ethnography, focusing on objective behavioral data, are sometimes confused as being the same, but they actually provide different types of data and have different strengths. We’ve had clients engage with us requesting ethnography when what they actually wanted was a contextual interview in a person’s home.</p>
<p>I always make a point of clarifying what they mean as the difference in price and approach between the two can be dramatic. Understanding the differences between these two types of methodologies can help you to more effectively plan your user research, maximizing the value of the research while keeping cost in line. To cut to the chase, here are the different research approaches and their strengths and weaknesses.<span id="more-590"></span></p>
<h3>Contextual Interviews</h3>
<p><img class="alignleft" style="margin-right: 15px;" title="Contextual interviews" src="http://img.usabilitypost.com/0909/contextual.jpg" alt="" width="250" height="160" />Contextual interviews are interviews that are conducted in the context in which the behavior of interest occurs. For example, if someone were trying to understand the needs of doctors, one would interview a doctor in his office or operating room or other relevant location. A typical contextual interview consists of a visit to a home or place of business, usually for an hour or two. The participant demonstrates certain processes of interest for the researcher, such as posting an item for sale on an ecommerce website or sitting down to watch a movie. The researcher asks questions about the process to get a clear understanding of it and identify pain points for the participant. In this way, the researcher can get an inventory of activities in which the participant engages when going through a process. In formal human factors research, this is referred to as a <a href="http://en.wikipedia.org/wiki/Task_analysis">task analysis</a>.</p>
<p>Contextual Interviewing is a superior form of interviewing as it allows the researcher to understand the person’s environment and get actual demonstrations of behaviors of interest. It also has another advantage; it helps the interviewee remember specific details about performing actions. A contextual interview is not perfect. It is a type of self-report research and is subject to the same weaknesses as all other forms of <a href="http://www.creative-wisdom.com/teaching/WBI/memory.shtml">self-report research</a>. People often distort, misremember, or overlook important facts when providing information. These inaccuracies in data are usually unconscious and extremely difficult to eliminate or control. In addition, people can get very accustomed to their pain points, adapting to them and working around them to such a point that they become practically unaware of them. It takes someone objective to identify these kinds of needs.</p>
<p>Thus, while contextual interviews are very useful for identifying more obvious needs, they don’t provide an objective and in-depth understanding of consumers or their needs. There’s always a difference between what people do and what they say they do.</p>
<h3>Ethnography</h3>
<p><img class="alignleft" style="margin-right: 15px;" title="Ethnography" src="http://img.usabilitypost.com/0909/ethnography.jpg" alt="" width="250" height="166" />The ethnography that is used in design research was adapted from the field of anthropology in which anthropologists would study different cultures by immersing themselves in the culture for months or years at a time. Design research cannot accommodate the same kind of budgets and schedules as traditional ethnography; however, the principle of in-person observation of behavior remains at the core of ethnography as a research method. In true ethnography, a researcher will spend one or more entire days with a research participant, profiling the person’s life from waking up in the morning to going to bed at night.</p>
<p>An ethnographer might travel with the participant to work, riding together on the train and noting behavior in transit. He might sit with him in the office, eat with him during lunch, or observe him at the gym after work. Rather than relying on self-report data, the goal of ethnography is to directly observe and document the actual behavior of the participant and search for patterns and the needs underlying those patterns, rather than relying on the participant to recall them.</p>
<p>In other forms of true ethnography, the researcher may setup a camera and record the participant’s behavior for extended periods of time rather than being in the room with him or her. For example, if you wanted to understand how a surgeon functions with certain instruments when performing a procedure, a camera may be installed above the operating table to record the operation. This allows the researcher to review the recording over and over until behaviors of interest are uncovered.</p>
<p>Like contextual interviews, ethnography has its strengths and weaknesses. Not the least among these weaknesses is the high cost and schedule requirements. Ethnography is definitely one of the more expensive and time consuming forms of research, as a result it is not regularly used, nor is it appropriate for every project. On the other hand, there are researchers like us who are developing new ethnographic methodologies that would reduce costs.</p>
<p>From a methodological perspective, ethnography is subject to participant reactivity sometimes called the “<a href="http://en.wikipedia.org/wiki/Reactivity_%28psychology%29">Observer Effect.</a>” The Observer Effect occurs when a research participant alters his or her behavior in response to the knowledge of being observed. A classic example is when a participant performs a thorough cleaning of his home rather than allowing the researcher to see how his environment exists normally. This is one of the reasons why ethnography requires a significant amount of time with a participant, the reason being that the participant’s behavior will gradually return to normal as he or she becomes accustomed to the researcher’s presence.</p>
<p>In traditional ethnography, the participants get so accustomed to the researcher’s presence that the observer effect is believed to be almost eliminated. Unfortunately, design cycles and budgets don’t allow for these kinds of commitments, which can stretch out months or even years. Despite these shortcomings, ethnography is currently the most in-depth form of need-finding user research.  It allows the researcher and design team to have a thorough understanding of the consumer and identify needs that the consumer might not be aware of. It is best used when making a major investment into a product that is positioned to revolutionize the market such as email or the automobile.</p>
<h3>Conclusion</h3>
<p>All research has its place and all research provides value when applied properly. The key is to understand each methodology and where they can be most effectively used. Contextual interviews are an excellent way of understanding consumers and identifying their needs and ethnography is an excellent way to dig deep to identify needs that are more difficult to find. Using ethnography when iterating a current product or technology probably wouldn’t result in much added value beyond performing a contextual interview, but it is essential when creating something entirely new and different.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.usabilitypost.com/2009/09/09/contextual-interviews-and-ethnography/feed/</wfw:commentRss>
		<slash:comments>13</slash:comments>
		</item>
		<item>
		<title>Should There Be a Unified Set of Styles For Web Interfaces?</title>
		<link>http://www.usabilitypost.com/2009/08/24/unified-set-of-styles-for-web-interfaces/</link>
		<comments>http://www.usabilitypost.com/2009/08/24/unified-set-of-styles-for-web-interfaces/#comments</comments>
		<pubDate>Mon, 24 Aug 2009 22:48:00 +0000</pubDate>
		<dc:creator>Dmitry</dc:creator>
				<category><![CDATA[Browsers]]></category>
		<category><![CDATA[HTML/CSS]]></category>
		<category><![CDATA[User Experience]]></category>
		<category><![CDATA[User Interface]]></category>

		<guid isPermaLink="false">http://www.usabilitypost.com/?p=582</guid>
		<description><![CDATA[If we look at interfaces in operating systems, we&#8217;ll see that there is usually a set of unified interface elements that&#8217;s shared not only by the operating system&#8217;s own tools, but also by third party programs running on that operating system.
For example, Apple&#8217;s OS X had a UI called &#8220;Aqua&#8221; for quite a few years [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignright" title="all the styles" src="http://img.usabilitypost.com/0908/allthestyles.png" alt="" width="300" height="255" />If we look at interfaces in operating systems, we&#8217;ll see that there is usually a set of unified interface elements that&#8217;s shared not only by the operating system&#8217;s own tools, but also by third party programs running on that operating system.</p>
<p>For example, Apple&#8217;s OS X had a UI called &#8220;Aqua&#8221; for quite a few years now that gave the buttons and other interface elements a certain look a feel &#8212; a liquid look for the buttons and a more metallic/plastic look for the texture of the windows themselves. They&#8217;re now moving towards a more aluminum look that will bring it closer to the look and feel of their hardware products.<span id="more-582"></span></p>
<p>Until OS X Leopard, there were actually several &#8216;branches&#8217; of the UI spread around Aqua. There were the plastic windows, the brushes metal windows and the darker aluminum windows. Buttons looked different in each one of these &#8217;styles&#8217;. Leopard, the latest release of OS X, has unified the look across the board.</p>
<p style="text-align: center;"><img class="aligncenter" title="osx leopard ui" src="http://img.usabilitypost.com/0908/osx_leopard.png" alt="" width="544" height="315" /></p>
<p style="text-align: center;"><em>The interface in OS X looks the same on (almost) every app</em></p>
<p>Companies making apps for OS X don&#8217;t reinvent the wheel and go with the toolset given to them by Apple, so the UI in their apps looks and feels like that of OS X. The same thing on Windows &#8212; Windows XP may look different to Vista and 7, but the apps running on each system tend to use the interface elements provided by the OS, so they fit in and feel &#8216;native&#8217; to the system. Well&#8230; most apps do &#8212; some don&#8217;t, and choose to fashion their interface with a completely unique look.</p>
<p>Why&#8217;s a unified interface important? The main argument is that people learn what each interface element looks like &#8212; what a button looks like, what a tab looks like, what a scrollbar looks like, and so on. With a unified interface you only need to learn this element once. If every other tool or third party app on the system then re-uses the same graphics and styles, the user can easily recall the function of that element. It also just looks good to have a consistent style across the board. It&#8217;s clear and orderly.</p>
<p>That&#8217;s the situation on the desktop OS at least &#8212; it&#8217;s mostly unified, with a few exceptions. On the web though, it&#8217;s a different story. CSS allows us to style interface elements displayed inside a browser &#8212; things like form input fields, buttons and navigation menus. Without any styling, these elements take on the look of the operating system the browser is running under &#8212; or even that of the custom styles provided by the browser itself.</p>
<p>A lot of web applications style their elements with CSS. A lot of others just leave them as they are. Using the same, un-styled, application then on different computers and on different browsers will give you a different experience. UI elements will look different each time. You might even get different fonts, depending on what fonts you have installed on that particular computer or device.</p>
<p>Using styled applications is another story. The interface remains consistent across different computers (more or less). Each styled application looks different from other styled applications though because the developers create their look themselves from scratch every time. There is no consistency &#8212; you have to learn the interface when you begin using the app.</p>
<p>This leads me to the question of the post: <strong>should there be a unified set of styles for web interfaces?</strong></p>
<p>Just as Apple has consolidated their shattered OS look and feel in Tiger with their unified interface in Leopard, it&#8217;s possible to unify the look of interfaces of the web with CSS. Not just a framework &#8212; but a set of carefully crafted and good looking styles for forms, menus and windows that would remain consistent across devices and browsers. Such a stylesheet will give developers a strong foundation on which to design their app, and will provide a consistent experience for all the users of the apps sharing these styles.</p>
<h3>Why now and how?</h3>
<p>The reason why I bring up this topic is because an adoption of a certain technology is beginning to grow. That technology is CSS3. While CSS3 is still not fully supported by the browsers, all of the modern browsers support some of the common elements of it. These advanced styling properties allow for things like rounded corners, box shadows and text shadows, allowing the designer to create beautiful interface elements without resulting to many images (or indeed, any images).</p>
<p>More important, these advanced properties do away with useless markup bloat which was essential for things like rounded corners. With CSS3 you can style HTML elements without additional markup &#8212; just target each element directly and apply the advanced properties.</p>
<p>Here&#8217;s an example of two inputs, a text input and a submit input, that I&#8217;ve styled earlier. The markup for both elements is pure &#8212; no wrapping divs or custom classes &#8212; the CSS targets each by type &#8212; e.g. input[type=text]. This will look the same in all modern browsers across different operating systems (the font may differ slightly as it falls back to the next available one):</p>
<p style="text-align: center;"><img class="aligncenter" title="css3 styling" src="http://img.usabilitypost.com/0908/css3_styling.png" alt="" width="306" height="136" /></p>
<p style="text-align: center;"><em>Text field and a submit button styled with CSS3</em></p>
<p>Now.. Internet Explorer 6 doesn&#8217;t support these kinds of type selectors &#8212; or any other advanced CSS3 properties for that matter. Newer Explorers support type selectors but won&#8217;t give you the fancy stuff like rounded corners or shadows (although this stuff should degrade gracefully because after all, sharp corners aren&#8217;t the end of the world as long as everything else functions properly).</p>
<p>The other modern browsers support enough right now to start styling buttons and other interface elements without additional markup though.</p>
<p>So it&#8217;s possible to make a comprehensive CSS that will provide attractive, and more importantly, unified styles to form elements and menubars (which will need minimal markup and classes, specified by the stylesheet) &#8212; but is this a good idea?  This is a project I&#8217;d like to do but I&#8217;m wondering whether it&#8217;s worth it. I&#8217;d love to read your comments.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.usabilitypost.com/2009/08/24/unified-set-of-styles-for-web-interfaces/feed/</wfw:commentRss>
		<slash:comments>63</slash:comments>
		</item>
		<item>
		<title>OpenHallway — A New Usability Testing App</title>
		<link>http://www.usabilitypost.com/2009/08/06/openhallway-usability-testing/</link>
		<comments>http://www.usabilitypost.com/2009/08/06/openhallway-usability-testing/#comments</comments>
		<pubDate>Thu, 06 Aug 2009 17:50:32 +0000</pubDate>
		<dc:creator>Dmitry</dc:creator>
				<category><![CDATA[Resources]]></category>
		<category><![CDATA[Reviews]]></category>
		<category><![CDATA[Usability]]></category>

		<guid isPermaLink="false">http://www.usabilitypost.com/?p=577</guid>
		<description><![CDATA[We&#8217;re starting to see more and more new tools appearing for the purpose of conducting usability testing. A while back I wrote a review of UserFly, a web app that lets you record your visitors actions, from mouse movements to clicks and keyboard strokes, and then play it back as if you&#8217;re sitting behind the [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignright" style="float: right; margin-left: 15px;" title="OpenHallway logo" src="http://img.usabilitypost.com/0908/oh_logo.png" alt="" width="312" height="74" />We&#8217;re starting to see more and more new tools appearing for the purpose of conducting usability testing. A while back I wrote a review of <a href="http://userfly.com/">UserFly</a>, a web app that lets you record your visitors actions, from mouse movements to clicks and keyboard strokes, and then play it back as if you&#8217;re sitting behind the user&#8217;s screen.</p>
<p>The biggest problem with UserFly is that the information you receive is fairly basic. Yes, it&#8217;s objective &#8212; you see exactly what the users are doing, without the pressure of a developer standing behind their shoulder examining their every action. But at the same time, it&#8217;s very one dimensional &#8212; you don&#8217;t know what the user is thinking and you don&#8217;t know how they feel &#8212; you can only guess.</p>
<p><a href="http://www.openhallway.com">OpenHallway</a> is a tool that lets you perform usability testing without having to be in the same room as the tester. <span id="more-577"></span>How? By recording all of the users screen and sound. Users participating in OpenHallway tests are asked, just like in real usability tests, to speak their mind as they browse the website or use the app. They&#8217;re also asked to perform a series of actions &#8212; so everything they do is focused on certain things they have to accomplish. This makes OpenHallway a solution that comes very close to that of actually performing in person user testing.</p>
<p style="text-align: center;"><img class="aligncenter" title="OH mains creen" src="http://img.usabilitypost.com/0908/oh_mainscreen.png" alt="" width="530" height="233" /></p>
<p style="text-align: center;"><em>Main screen of OpenHallway</em></p>
<p>So how does it all work? What the developer does is first set up a project and then a scenario on OpenHallway. The scenario is basically a list of instructions and a URL for the testers who will perform the test. You then get a link that you email out to your testers. When a tester clicks on that link they&#8217;re taken to a page with your instructions and a button to start recording their session.</p>
<p style="text-align: center;"><img class="aligncenter" title="OH Test screen" src="http://img.usabilitypost.com/0908/oh_testscreen.png" alt="" width="530" height="355" /></p>
<p style="text-align: center;"><em>The instructions page that testers will see</em></p>
<p>The link to the specified URL will be opened in a new window so they can always come back to check the instructions and also end the recording when they&#8217;re done. OpenHallway then is a simple way to record user tests without your testers having to install any software.</p>
<p style="text-align: center;"><img class="aligncenter" title="OH playback screen" src="http://img.usabilitypost.com/0908/oh_videoscreen.png" alt="" width="530" height="335" /></p>
<p style="text-align: center;"><em>The video playback page</em></p>
<p>Is there any downsides to testing remotely? Yes. The main downside is the loss of two-way communication. You cannot ask the user questions or encourage them to speak out. Speaking out every thought as you browse a website isn&#8217;t the most natural thing in the world, so it often takes a bit of encouragement for this to happen. If the user behind the screen is holding back their feelings and thoughts, there will be no developer standing by to help bring them out. Neither will you be able to read the testers body language &#8212; although you may be able to pick up certain cues ustration.</p>
<p>The other thing I should note is that OpenHallway solves just one of the two parts of user testing &#8212; the other being the testers themselves, i.e. having to find them. There are some tools that make it easier, for example, <a href="http://www.ethnio.com">Ethnio</a> is an app that lets you to put a little widget on your site to recruit testers. It will be interesting to see if OpenHallway expands into this area by introducing some tools, or a marketplace, to allow developers and testers find each other with the ease of a few mouse clicks &#8212; then, the remote testing solution would really be complete.</p>
<p>But OpenHallway is not <a href="http://www.usertesting.com">UserTesting.com</a> who offer the whole solution by recording videos and writing reports on your site. OpenHallway is a focused tool that keeps your options open and allows you to recruit anyone you like. It also allows testers to do the tests without having to install any software, which means that anyone can do it.</p>
<p>Even though I mentioned a couple of issues, I really like OpenHallway. It&#8217;s very simple and it works. There is a free plan you can use to set up one test scenario and see how it works for yourself. Paid accounts begin at $49 , which will give you 1 GB of storage (about 20 ten minute tests), up to $199 a month for 9 GB (about 180 ten minute tests). Go ahead and check out <a href="http://www.openhallway.com">OpenHallway</a> site if you&#8217;re interested  &#8212; there is a screencast there as well that shows the app in action.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.usabilitypost.com/2009/08/06/openhallway-usability-testing/feed/</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
		<item>
		<title>How To Observe the User and Tap Into the Experience</title>
		<link>http://www.usabilitypost.com/2009/07/27/how-to-observe-the-user-and-tap-into-the-experience/</link>
		<comments>http://www.usabilitypost.com/2009/07/27/how-to-observe-the-user-and-tap-into-the-experience/#comments</comments>
		<pubDate>Mon, 27 Jul 2009 21:34:50 +0000</pubDate>
		<dc:creator>Guest post</dc:creator>
				<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[User Experience]]></category>

		<guid isPermaLink="false">http://www.usabilitypost.com/?p=569</guid>
		<description><![CDATA[
Guest post by Demetrius Madrigal and Bryan McClain
They are the founders of ActiveComm Labs, who specialize in user experience and human factors research.
Imagine if a person could know almost everything about you by simply looking at you. He could tell your profession by looking at your hands and wrists. He could tell where you were [...]]]></description>
			<content:encoded><![CDATA[<div class="guest_author_box">
<div class="guest_author_name">Guest post by <strong>Demetrius Madrigal</strong> and <strong>Bryan McClain</strong></div>
<p>They are the founders of <a href="http://www.activecomm.net">ActiveComm Labs</a>, who specialize in user experience and human factors research.</div>
<p><img class="alignright" title="Sherlock Homles" src="http://img.usabilitypost.com/0907/homles.jpg" alt="" width="250" height="261" />Imagine if a person could know almost everything about you by simply looking at you. He could tell your profession by looking at your hands and wrists. He could tell where you were from by your dress and speech. He could tell what you like to eat and drink from your teeth and lips. With little effort he could know your deepest secrets and know you better than your best friend. These are the attributes of Sherlock Holmes, a fictional private detective from turn of the century literature. Holmes may at times have seemed like a super hero with a near omniscient power of the criminals he chased, but his abilities were based on real skills that are honed by real-life detectives every day.</p>
<p>A few months ago, we shared with you a way to communicate with research participants to help them to feel more comfortable and speak openly. In this article, we are going to delve into Observation Skills that can really help you to get the most out of your research.</p>
<p>Much like the Active Listening Skills that we discussed previously, Observation skills can help you to better understand the user during a research session. All of the small bits and pieces of information that is emitted by a person at any given moment amount to so much more than the words that they speak. Non-verbal communication can account for as much as 93% of total communication with spoken words accounting for only 7%. On top of that, there is a popular saying here at ActiveComm Labs, “behavior doesn’t lie.” You’ll never have to worry if a person is being completely open with you or if they are remembering incorrectly, what you observe from them is undoubtedly what they are experiencing. By combining the information you gather from observation with your ability to communicate using Active Listening skills, you will have a powerful tool to inquire about the emotional experience that you are observing, and truly tap into the user experience.<span id="more-569"></span></p>
<h3>The Act of Observing</h3>
<p>There are myriad aspects of human behavior, too many to observe and record comprehensively in real time. However, it’s because of this massive amount of information that we can tap into an experience. Of all the different types of communication, verbal communication provides people with the greatest control. Many people feel safer communicating through email or text message rather than speaking in-person because they are nervous about the messages that their involuntary body language and facial expression will convey. We’ll have to pick and choose which aspects of observable behavior we will attend to based on what we expect to find relevant to the user experience. With that said, we’ll discuss behavior and how it can be observed and interpreted. We’ll also discuss how to apply the information you gather through observation and combine those observations with communication skills like Active Listening. One thing to keep in mind as you become aware of all of the information you gather through observation, is that it’s imperative that you avoid jumping to conclusions. There is almost always an alternative explanation to any observed behavior; this is where verification through communication will be essential.</p>
<p>Through this article, we’ll start with the most general behaviors (physical characteristics) and work our way to the most specific (eye movements).</p>
<h4>Physical Characteristics</h4>
<p>Physical characteristics include factors such as height, weight, body type, hair color, eye color, complexion, and so on. There’s quite a bit that you can glean about a person’s general lifestyle by looking at these characteristics. For example, a person with a muscular build is likely to exercise on a regular basis. A person with fair skin probably doesn’t spend much time in the sun. Health of the hair and skin can provide hints as to the food that a person eats and whether they smoke. These are all clues that are part of an overall puzzle. Keep these lifestyle factors in mind when you are forming your questions and interpreting answers, it’s not unusual for lifestyle to shape product usage.</p>
<h4>Personal Style</h4>
<p>Personal style tells you more about a person’s lifestyle and also their values. Observing a person’s hair and clothes can tell you how the person wants to be perceived by the world. A woman with a glamorous hair style that’s reminiscent of a Hollywood movie star is a person that cares about her appearance and is willing to spend money to achieve it. On top of that, it’s reasonable to think that she has the means to pay for expensive hair care. A man wearing a suit during the day probably has a job in which he interacts with clients that are considering spending a significant amount of money. A person wearing tight-fitting athletic gear is very likely to spend some time at the gym or some other physical activity. There are a variety of different aspects of a person’s lifestyle that can be gleaned from their personal style, it’s important to be aware of these things and think about what these observable characteristics tell you about the person.</p>
<h4>Body Language</h4>
<p>Body language is great for gauging a person’s mood and comfort level. A person that’s comfortable will seem relaxed, maybe he’ll slouch a bit in his chair, his arms and legs will be uncrossed and open. A person that’s uncomfortable will be sitting up straight and changing position often, fidget, and cross his arms in front of him.  A person that’s interested and engaged will lean forward, literally on the edge of her chair; her body will be oriented toward the point of interest. A person that’s feeling sad will seem to droop down, her head will hang, her eyelids will be heavy, and her shoulders will slump. Use these clues adjust your communication. Try to make someone nervous feel more at ease, recognize that a person that’s relaxed will communicate with you more freely, and tread lightly around intense emotions like sadness or anger all of these actions will help you to build rapport and maximize the amount of information you can get from a research session.</p>
<h4>Facial Expression</h4>
<p>Facial expressions, like body language, can provide specific information about a person’s emotional state. Unlike body language, some elements of facial expression are wholly involuntary and respond almost instantly to the person’s immediate experiences. It takes quite a bit to learn all of the different microexpressions, but if you do, you can function like a human lie detector and more. Rather than drudge all of the myriad different types of facial expressions and their underlying meaning, I’ll direct you to the foremost authority in the world, <a href="http://en.wikipedia.org/wiki/Paul_Ekman">Dr. Paul Ekman</a>. Dr. Ekman has spent decades studying facial expressions and produced some easy to consume training programs, I highly recommend this program (http://face.paulekman.com/default.aspx) to anyone that is more interested in understanding the people around you. Being able to make sense of facial expressions will help you tremendously when observing a research participant interact with a product.</p>
<h4>Vocal Rate and Tone</h4>
<p>Vocal rate and tone further indicates emotional states and also provides clues to specific things that a person finds valuable or interesting. The rate of speech will indicate a person’s energy level and vocal tone will indicate excitement, sadness, anger, or fear. Aside from that, a person will tend to emphasize words that he considers important. For example, by listening to a person speak about her life and extracting only the words she emphasized, you can arrive at a list that includes such words as career, travel, health, and family. You can use these clues to guide your communication and extract more information about the person while also making her feel more at ease by letting you know that you understand where she’s coming from. This can also give you clues as to which product features are most interesting to the participant.</p>
<h4>Eye Movement</h4>
<p>Eye movement is an excellent indicator of attention and can provide clues to a person’s specific thoughts. Where a person’s eyes land is usually what he is thinking about. If the person repeatedly looks at the clock, you can reasonably assume that he is thinking about the time, maybe because he has someplace they need to be at a certain time or he may be bored. Eye movement happens fast, and it is one of the most ambiguous of observable behavior, so be very careful not to jump to conclusions and also be aware of yourself enough to know if you’re staring. During a research session, look for patterns in eye movement. A person’s gaze might tend to fixate on parts of the product that really catch the person’s attention, whether that’s part of the interface or part of the casing for a physical product or even an advertisement for a web-based product. There are no easy rules when it comes to interpreting eye movements, you’ll have to think about what the movements could mean and communicate closely with the person to see what your observations really mean. Because eye movements can be so tricky, don’t try to make any sense of them if you are not in direct communication with the person.</p>
<h4>Practice</h4>
<p>I had some of the best observation practice that I’ve had in my life through a job that I had while I was working my way toward an undergraduate degree at a mere 19 years of age. That job was as a security guard. At the time, I thought of the job as just a job. After all, how much can one get out of guarding a mostly empty building through the night? On the other hand, it provided me my first chance at observation training and many, many empty hours to hone my craft.</p>
<p>As a security guard, it was my primary job to observe. My training amounted largely to observing and recording the characteristics of any suspicious individual and contacting police as well as my supervisor. It turns out that the liability involved with me actually trying to physically restrain someone was just too great and litigation was more expensive than most of the products that might be stolen. I spent many an hour mentally recording height, weight, hair color, eye color, facial characteristics and more. With that in mind, that is a great place to start your training.</p>
<p>When you set out to develop your observation skills, there’s a simple exercise that you can do to help. When you encounter a person while in a public place, in the time that you are with that person, see what you can observe about him or her. Catalogue the person’s height, weight, build, hair color, eye color, clothing and any distinguishing marks as though you will have to describe the person to the police afterwards. Notice important and telling details like whether the person is wearing a wedding ring. Also notice the person’s body language, facial expressions and eye movements, see what hypothesis you can form about their emotional state. Be careful not to stare while you’re observing all of these things, you don’t want to come off as creepy. If you feel comfortable, engage the conversation and see which of your estimates were on the mark. Once you feel comfortable with this exercise, up the ante and see if you can observe 2, 3 or 4 people at once. As you go through these exercises, you’ll notice that your ability to observe will increase tremendously.</p>
<h3>Conclusion</h3>
<p>It’s important to remember that observing these elements of non-verbal communication provide clues to what is going on for a person. Be cautious and don’t jump to conclusions based on what you see. Instead, use your communication skills to verify anything that you see. If a person’s wearing a Billabong shirt, rather than assuming that the person is surfer, say something like “Nice shirt, do you like to surf.” The person’s response will tell you if she is really a surfer or if she borrowed the shirt from her sister. The active listening skills we discussed in our previous post can provide you with guidelines to responding to emotional states. These skills are powerful and extremely useful, you’ll find by using them that it will seem that the world will open up and every experience will seem richer.</p>
<p>We at<a href="http://www.activecomm.net/"> ActiveComm Labs </a>are big believers in communication and forging a personal connection while conducting research. We also love talking about communication and its role in research, so we invite anyone to contact us if you’re interested in discussing research or communication or learning more about our approach to tapping into the User Experience.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.usabilitypost.com/2009/07/27/how-to-observe-the-user-and-tap-into-the-experience/feed/</wfw:commentRss>
		<slash:comments>15</slash:comments>
		</item>
	</channel>
</rss><!-- Dynamic Page Served (once) in 0.658 seconds --><!-- Cached page generated by WP-Super-Cache on 2009-11-09 09:48:46 -->
