<?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>spking.com &#187; mockovers</title>
	<atom:link href="http://spking.com/tag/mockovers/feed/" rel="self" type="application/rss+xml" />
	<link>http://spking.com</link>
	<description></description>
	<lastBuildDate>Wed, 11 Apr 2012 04:19:38 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1</generator>
		<item>
		<title>Microsoft continues to fail at User Interface Design</title>
		<link>http://spking.com/2011/07/15/microsoft-sucks-at-user-interface-design/</link>
		<comments>http://spking.com/2011/07/15/microsoft-sucks-at-user-interface-design/#comments</comments>
		<pubDate>Fri, 15 Jul 2011 04:46:16 +0000</pubDate>
		<dc:creator>sean</dc:creator>
				<category><![CDATA[Usability]]></category>
		<category><![CDATA[User Interface Design]]></category>
		<category><![CDATA[bad]]></category>
		<category><![CDATA[microsoft]]></category>
		<category><![CDATA[mockovers]]></category>
		<category><![CDATA[user interface]]></category>

		<guid isPermaLink="false">http://spking.com/?p=34</guid>
		<description><![CDATA[I gave up on Microsoft improving their product interfaces a long time ago, but they still occasionally shock me with an especially terrible design decision.  Their new Outlook Web Access interface is an abomination.  I&#8217;ll eventually write up a post dissecting exactly why the whole UI is criminally awful, but for now I&#8217;m going to focus on [...]<div class="addthis_toolbox addthis_default_style" addthis:url='http://spking.com/2011/07/15/microsoft-sucks-at-user-interface-design/' addthis:title='Microsoft continues to fail at User Interface Design' ><a class="addthis_button_facebook"></a><a class="addthis_button_google_plusone"></a><a class="addthis_button_twitter"></a><a class="addthis_button_email"></a><a class="addthis_button_print"></a></div>]]></description>
			<content:encoded><![CDATA[<p>I gave up on Microsoft improving their product interfaces a long time ago, but they still occasionally shock me with an especially terrible design decision.  Their new Outlook Web Access interface is an abomination.  I&#8217;ll eventually write up a post dissecting exactly why the whole UI is criminally awful, but for now I&#8217;m going to focus on just one small example: Creating an Out of Office reply.  Imagine that you&#8217;re headed out on vacation, and the very last thing you need to do is set up an auto-reply to let people know you&#8217;re not around.  First off, this feature flops at an Information Architecture level, because it&#8217;s furtively buried in an &#8220;Options&#8221; dropdown menu cleverly disguised as simple text:</p>
<div id="attachment_43" class="wp-caption aligncenter" style="width: 570px"><a href="http://spking.com/wp-content/uploads/2011/07/owa_options1.jpg"><img class="size-large wp-image-43" title="OWA Options Dropdown" src="http://spking.com/wp-content/uploads/2011/07/owa_options1-1024x684.jpg" alt="Peekaboo!" width="560" height="374" /></a><p class="wp-caption-text">I spy with my little eye...</p></div>
<p>Once you are finally able to locate the Options menu, you&#8217;re presented with a cluttered, confusing collection of items:</p>
<div id="attachment_41" class="wp-caption aligncenter" style="width: 312px"><a href="http://spking.com/wp-content/uploads/2011/07/owa_options_dropdown.jpg"><img class="size-full wp-image-41" title="OWA Options Dropdown" src="http://spking.com/wp-content/uploads/2011/07/owa_options_dropdown.jpg" alt="Options Dropdown" width="302" height="332" /></a><p class="wp-caption-text">Now where&#39;s th--OH LOOK!  THEMES!!!</p></div>
<p>(By the way, these themes are just sad.  Not only do they suck on a creative level, they destroy basic usability.  Take a look at the horrifying space robots theme.  It completely obscures your profile and the Sign Out link with clip art diarrhea.)</p>
<div id="attachment_40" class="wp-caption aligncenter" style="width: 570px"><a href="http://spking.com/wp-content/uploads/2011/07/owa_pow.jpg"><img class="size-large wp-image-40" title="Space Robots from Redmond" src="http://spking.com/wp-content/uploads/2011/07/owa_pow-1024x686.jpg" alt="Horrible OWA Theme" width="560" height="375" /></a><p class="wp-caption-text">Camouflaging key links with crappy UFO clip art is generally a bad idea</p></div>
<p>Anyways, you&#8217;re back to trying to set up an Out of Office reply.  Why not just call it that?  I don&#8217;t know, but Microsoft chooses to call it &#8220;Set Automatic Replies&#8221;.  That could be it, but you still have to think about it for a second, which again depletes your user happiness reservoir by several percent.  You click and land on this travesty of a page:</p>
<div id="attachment_37" class="wp-caption aligncenter" style="width: 570px"><a href="http://spking.com/wp-content/uploads/2011/07/owa_ooo.jpg"><img class="size-large wp-image-37" title="Outlook Web Access" src="http://spking.com/wp-content/uploads/2011/07/owa_ooo-1024x714.jpg" alt="Terrible UI Design" width="560" height="390" /></a><p class="wp-caption-text">Where&#39;s Waldo?</p></div>
<p>Scanning the first sentence, you can see that this is in fact where you can set up an Out of Office reply, but now you really have to parse the details to figure out how the hell to work this thing.  A separate radio button and checkbox for sending automatic replies and specifying only specific times is Microsoft&#8217;s solution to accommodating two user types:  Folks who want to always send automatic replies (or who don&#8217;t know when they&#8217;ll return), and folks who wants to send  automatic replies only between two fixed dates and times.  The first user type is probably a minority of people using auto-reply; the vast majority using this feature know when they&#8217;ll be gone and for how long.  Aside from maybe celebrities and politicians who get tons of email every day, it&#8217;s unlikely too many users want to blanket auto-reply everyone who sends them a message.  Microsoft seems to have thought of that by nesting the &#8220;Send replies only during this time period&#8221; checkbox and settings under the &#8220;Send automatic replies&#8221; radio button, but it still takes an unnecessary cognitive toll on the user.</p>
<p>Once you&#8217;re able to get through that step, you get to actually type the message that people will get during your time away.  How many people are compelled to dress this up by customizing the font, font size, style, alignment, color, indentations, highlighting and footnotes?  Probably very few.  And those who are should go take a valium pill immediately and chill out.  A rich text editor has no place here.  Remove it and immediately reduce the visual noise by 10%.</p>
<p>Now you&#8217;ve typed your message, are about to look for the &#8220;Save&#8221; button but notice another checkbox lurking at the edge of the pointless iFrame container.  &#8221;Oh, I can set up a separate one for people who send me email while I&#8217;m gone, but who don&#8217;t work at Initech.&#8221;  And look, you can even customize this message differently than your other auto-reply message!  Purple 30pt Comic Sans, here we come!</p>
<div id="attachment_49" class="wp-caption aligncenter" style="width: 898px"><a href="http://spking.com/wp-content/uploads/2011/07/owa_scroll.jpg"><img class="size-full wp-image-49" title="OWA Scroll" src="http://spking.com/wp-content/uploads/2011/07/owa_scroll.jpg" alt="OWA Scroll" width="888" height="469" /></a><p class="wp-caption-text">Don&#39;t forget about &quot;The Others&quot;...</p></div>
<p>Yet again, you are blasted with settings overload.  This time it&#8217;s a checkbox with two nested radio buttons.  Reversies!  After you&#8217;ve muddled through those options, the time comes to actually save this damn thing and get on with your life.  Wait, where&#8217;s the Save button?</p>
<div id="attachment_51" class="wp-caption aligncenter" style="width: 570px"><a href="http://spking.com/wp-content/uploads/2011/07/owa_waldo.jpg"><img class="size-large wp-image-51" title="Where's Waldo?" src="http://spking.com/wp-content/uploads/2011/07/owa_waldo-1024x714.jpg" alt="OWA Save Button" width="560" height="390" /></a><p class="wp-caption-text">Awww...there&#39;s the little guy!</p></div>
<p>Uhhh, uhhh, OH!  There it is!  Microsoft must have been reading up on game mechanics and decided to make a challenge out of actually saving your auto-reply.  Find the save button, get 5 points!  Well, the save button isn&#8217;t really a button.  It&#8217;s a tiny blue link in the lower right corner with a checkbox next to it.  Why?  Well a big button with the word &#8220;SAVE&#8221; on it, positioned in a place the user might expect it to be, would just be too easy wouldn&#8217;t it?  If you want that vacation, Microsoft will make sure you earn it by winning a game of hide-and-seek first!</p>
<p>&nbsp;</p>
<p><strong>How I would fix it</strong></p>
<p>Now one thing I can&#8217;t stand is people who present problems without any sort of solution.  Since I&#8217;ve never been a huge fan of self-loathing, I took the liberty of creating a much more usable and simply cleaner UI for this feature.  Anyone in Redmond is welcome to it.  The first screen shows my proposed design in an &#8220;active&#8221; state, after the user has selected a time and date range and saved their messages:</p>
<div id="attachment_54" class="wp-caption aligncenter" style="width: 570px"><a href="http://spking.com/wp-content/uploads/2011/07/owa_mockover_1.jpg"><img class="size-large wp-image-54" title="OWA Design Fixes" src="http://spking.com/wp-content/uploads/2011/07/owa_mockover_1-1024x714.jpg" alt="OWA Design Fixes" width="560" height="390" /></a><p class="wp-caption-text">Ah, much better.  I can breathe now!</p></div>
<p>Just by stripping out unnecessary visual noise such as the rich editor toolbars, I&#8217;ve made the UI appear instantly easier to use.  Instructions are generally thrown in as compensation for bad design, so I stripped them all out.  Good User Interfaces strive to be as self-evident as possible.  The state of the feature (on or off) is now immediately clear , being indicated directly in the feature name (Out of Office Reply is on).  The Start and End dates and times have been repositioned into a much more logical layout, with the labels being color-coded red and green to provide better visual cues.  Gone are the confusing radio buttons.  If you&#8217;re among the minority who want to send auto-replies in perpetuity or until some undefined date in the future, you can simply check the &#8220;No End Date&#8221; box (see next screenshot).  If you want to send an auto-reply to people outside your company, you can simply add a separate message, no radio buttons or checkbox options to decipher.  There&#8217;s a warm and fuzzy feeling only opinionated software can provide.  And last but not least, I&#8217;ve added a big ass &#8220;Save Now&#8221; button, right smack in the middle where you can&#8217;t miss it.</p>
<p>Here&#8217;s how it would look for those folks who love Out of Office auto-replies so much they never want to stop:</p>
<div id="attachment_59" class="wp-caption aligncenter" style="width: 570px"><a href="http://spking.com/wp-content/uploads/2011/07/owa_mockover_21.jpg"><img class="size-large wp-image-59" title="OWA No End Date" src="http://spking.com/wp-content/uploads/2011/07/owa_mockover_21-1024x662.jpg" alt="OWA No End Date" width="560" height="362" /></a><p class="wp-caption-text">No end in sight!</p></div>
<p>I can hear you saying, &#8220;But Sean, what about auto-replies set for the future?  How would you communicate that?&#8221;  Great question, thanks for asking.  Since we&#8217;re indicating the state at the top of the page as being &#8220;on&#8221; or &#8220;off&#8221;, we have to clearly message the user about auto-replies scheduled for a date and time range in the future.  Here&#8217;s how I handled that:</p>
<div id="attachment_60" class="wp-caption aligncenter" style="width: 570px"><a href="http://spking.com/wp-content/uploads/2011/07/owa_mockover_3.jpg"><img class="size-large wp-image-60" title="OWA Future Date" src="http://spking.com/wp-content/uploads/2011/07/owa_mockover_3-1024x661.jpg" alt="OWA Future Date" width="560" height="361" /></a><p class="wp-caption-text">Back to the future</p></div>
<p>Since auto-replies aren&#8217;t currently running, the feature is &#8220;off&#8221;, but users can see their scheduled start date and time called out next to the status.</p>
<p>&nbsp;</p>
<p><strong>Conclusion</strong></p>
<p>Good User Interface design isn&#8217;t always (or even usually) sexy.  It&#8217;s almost like acting.  You don&#8217;t always appreciate a good actor until you suffer through a performance by a really bad one.  Lucky for us, it&#8217;s probably easier and cheaper to implement a better UI than it is to improve bad acting skills.  So come on, Microsoft.  Give us more Johnny Depp and less Keanu Reeves.</p>
<p>&nbsp;</p>
<div class="addthis_toolbox addthis_default_style" addthis:url='http://spking.com/2011/07/15/microsoft-sucks-at-user-interface-design/' addthis:title='Microsoft continues to fail at User Interface Design' ><a class="addthis_button_facebook"></a><a class="addthis_button_google_plusone"></a><a class="addthis_button_twitter"></a><a class="addthis_button_email"></a><a class="addthis_button_print"></a></div>]]></content:encoded>
			<wfw:commentRss>http://spking.com/2011/07/15/microsoft-sucks-at-user-interface-design/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

