<?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>David Simpson &#187; ui patterns</title>
	<atom:link href="http://davidsimpson.me/tag/ui-patterns/feed/" rel="self" type="application/rss+xml" />
	<link>http://davidsimpson.me</link>
	<description>Developing the web, one page at a time.</description>
	<lastBuildDate>Thu, 02 Feb 2012 13:02:50 +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>Dear Apple Inc.</title>
		<link>http://davidsimpson.me/2010/02/10/dear-apple-inc/</link>
		<comments>http://davidsimpson.me/2010/02/10/dear-apple-inc/#comments</comments>
		<pubDate>Wed, 10 Feb 2010 19:52:52 +0000</pubDate>
		<dc:creator>David</dc:creator>
				<category><![CDATA[usability]]></category>
		<category><![CDATA[apple]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[ui patterns]]></category>
		<category><![CDATA[ux]]></category>

		<guid isPermaLink="false">http://davidsimpson.me/?p=571</guid>
		<description><![CDATA[Please fix the search UI in Safari on the iPhone. I&#8217;ve been using the iPhone for some time now and overall, the interface is really slick. The buttons are consistently placed and this gives a really strong user experience. Everything appears to be in the obvious place. The trouble is, I like to search the [...]]]></description>
			<content:encoded><![CDATA[<div id="tweetbutton571" class="tw_button" style=""><a href="http://twitter.com/share?url=http%3A%2F%2Fdavidsimpson.me%2F2010%2F02%2F10%2Fdear-apple-inc%2F&amp;text=Dear%20Apple%20Inc.&amp;related=&amp;lang=en&amp;count=horizontal&amp;counturl=http%3A%2F%2Fdavidsimpson.me%2F2010%2F02%2F10%2Fdear-apple-inc%2F" class="twitter-share-button"  style="width:55px;height:22px;background:transparent url('http://davidsimpson.me/wp-content/plugins/wp-tweet-button/tweetn.png') no-repeat  0 0;text-align:left;text-indent:-9999px;display:block;"></a></div><p><img align="right" src="/wp-content/uploads/2010/02/UK_Mailred.png" alt="UK postage stamp" title="UK postage stamp" width="128" height="128" class="alignleft size-full wp-image-596" /></p>
<p><strong>Please fix the search <acronym title="user interface">UI<acronym> in Safari on the iPhone.</strong>  </p>
<p>I&#8217;ve been using the iPhone for some time now and overall, the interface is really slick.  The buttons are consistently placed and this gives a really strong user experience.  Everything appears to be in the obvious place.  </p>
<p>The trouble is, I like to search the web and it looks like you&#8217;ve forgotten your own iPhone user interface rules for this area.<br />
<span id="more-571"></span></p>
<h3>Let me explain</h3>
<p>In all your other applications, the primary action button is located top-right with a secondary action button top-left.  </p>
<p><strong>Here&#8217;s some examples:</strong></p>
<p><img src="/wp-content/uploads/2010/02/Calendar-Add-Event.png" alt="Calendar - Add Event" title="Calendar - Add Event" width="320" height="480"  /></p>
<p><img src="/wp-content/uploads/2010/02/Mail-New-Message.png" alt="Mail - New Message" title="Mail - New Message" width="320" height="480" /></p>
<p><img src="/wp-content/uploads/2010/02/Safari-Basic-Authentication-dialog.png" alt="Safari Basic Authentication dialog" title="Safari Basic Authentication dialog" width="320" height="480" /></p>
<p><img src="/wp-content/uploads/2010/02/Messages-Edit.png" alt="Messages - Edit" title="Messages - Edit" width="320" height="480"  /></p>
<p>You get the picture, right?</p>
<p>Over time the user learns this convention and without realising it assumes that the top-right button means &#8220;OK&#8221;, &#8220;Submit&#8221;, &#8220;Search&#8221; or whatever the primary action is.</p>
<h3>Now, let&#8217;s have a look at the Safari search screen</h3>
<p>What&#8217;s in the top-right button position?</p>
<p><img src="/wp-content/uploads/2010/02/Safari-Search-Currently.png" alt="Safari Search - Currently" title="Safari Search - Currently" width="320" height="480" /></p>
<p> It&#8217;s the &#8220;Cancel&#8221; button i.e. the secondary action.  </p>
<p><strong>Oh dear.  How did that get there?</strong></p>
<p>At first, I thought that I was at fault because I hadn&#8217;t properly learned the interface.  Then I remembered one of the first observations you make when usability testing.  <strong>Users blame themselves</strong> for the mistakes in the design of the interface.</p>
<p>That the reason I was making the mistake so often was precisely because I <em>had</em>  learned the conventions of the user interface.</p>
<h3>So what can we do?</h3>
<p>The interface needs a subtle redesign.  Nothing major, just an increment to correct the problem.</p>
<p><strong>There are 2 options that immediately spring to mind</strong></p>
<p><strong>Option 1:</strong>  Move the Cancel button to the top-left &#8220;secondary action&#8221; position</p>
<p><img src="/wp-content/uploads/2010/02/Safari-Search-Enhancement-Option-2.png" alt="Safari Search Enhancement - Option" title="Safari Search Enhancement - Option" width="320" height="480" /></p>
<p>This should be really easy.  The basic premise of the current design is left intact and the secondary action is returned to the correct place in the interface &#8211; the top-left position.</p>
<p><strong>Option 2:</strong> Add a &#8220;Search&#8221; button in the top-right position and move the Cancel button to the top-left &#8220;secondary action&#8221; position.</p>
<p><img src="/wp-content/uploads/2010/02/Safari-Search-Enhancement-Option-1.png" alt="Safari Search Enhancement - Option" title="Safari Search Enhancement - Option" width="320" height="480"  /></p>
<p>We&#8217;ve got an additional button now, but it&#8217;s consistent with the overall design of the other apps you produce.</p>
<p>I know you&#8217;re really busy right now, especially with all the activity around the iPad, but please fit this into the next version of the OS.  It is such a minor UI change, but would markedly improve the way the browser search interface works.</p>
<p>Best of luck with iPhone OS 4.0.  I hope you bundle some of <a href="http://www.tuaw.com/2010/01/10/dear-apple-what-we-want-to-see-for-iphone-4-0-part-1?icid=sphere_blogsmith_inpage_tuaw">these ideas</a>, but don&#8217;t worry too much about Flash.</p>
<p><a href="http://twitter.com/dvdsmpsn">David</a></p>
<p><strong>P.S.</strong> If you can&#8217;t manage this for me, then I&#8217;d be happy to settle for <a href="http://www.opera.com/press/releases/2010/02/10/">Opera Mini</a> being approved in the App Store instead &#8211;  I quite like the idea of being able to browse <a href="http://my.opera.com/haavard/blog/2010/02/10/opera-mini-iphone">6 times faster than Safari</a>.</p>
<p>Image credit: <a href="http://www.tonysmac.pwp.blueyonder.co.uk/2007/02/uk-stamp-icons.html">UK stamp</a></p>
<!-- PHP 5.x -->]]></content:encoded>
			<wfw:commentRss>http://davidsimpson.me/2010/02/10/dear-apple-inc/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Portal UI Design Patterns</title>
		<link>http://davidsimpson.me/2009/11/24/portal-ui-design-patterns/</link>
		<comments>http://davidsimpson.me/2009/11/24/portal-ui-design-patterns/#comments</comments>
		<pubDate>Tue, 24 Nov 2009 10:48:06 +0000</pubDate>
		<dc:creator>David</dc:creator>
				<category><![CDATA[usability]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[luminis]]></category>
		<category><![CDATA[portal]]></category>
		<category><![CDATA[sungardhe]]></category>
		<category><![CDATA[ui patterns]]></category>
		<category><![CDATA[university of nottingham]]></category>
		<category><![CDATA[ux]]></category>

		<guid isPermaLink="false">http://davidsimpson.me/?p=448</guid>
		<description><![CDATA[Here are the slides from a talk I gave at the European Luminis User Group in Nottingham last week. Outlined are some thoughts behind reusable UI elements in the Luminis portal at the University of Nottingham. Portal UI Design Patterns]]></description>
			<content:encoded><![CDATA[<div id="tweetbutton448" class="tw_button" style=""><a href="http://twitter.com/share?url=http%3A%2F%2Fdavidsimpson.me%2F2009%2F11%2F24%2Fportal-ui-design-patterns%2F&amp;text=Portal%20UI%20Design%20Patterns&amp;related=&amp;lang=en&amp;count=horizontal&amp;counturl=http%3A%2F%2Fdavidsimpson.me%2F2009%2F11%2F24%2Fportal-ui-design-patterns%2F" class="twitter-share-button"  style="width:55px;height:22px;background:transparent url('http://davidsimpson.me/wp-content/plugins/wp-tweet-button/tweetn.png') no-repeat  0 0;text-align:left;text-indent:-9999px;display:block;"></a></div><p>Here are the slides from a talk I gave at the European Luminis User Group in Nottingham last week. </p>
<p>Outlined are some thoughts behind reusable UI elements in the Luminis portal at the University of Nottingham. </p>
<div style="width:425px;text-align:left" id="__ss_2544097"><a style="font:14px Helvetica,Arial,Sans-serif;display:block;margin:12px 0 3px 0;text-decoration:underline;" href="http://www.slideshare.net/dvdsmpsn/portal-ui-design-patterns" title="Portal UI Design Patterns">Portal UI Design Patterns</a><object style="margin:0px" width="425" height="355"><param name="movie" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=elug-portaluidesignpatternstoshare-091120054329-phpapp02&#038;stripped_title=portal-ui-design-patterns" /><param name="allowFullScreen" value="true"/><param name="allowScriptAccess" value="always"/><embed src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=elug-portaluidesignpatternstoshare-091120054329-phpapp02&#038;stripped_title=portal-ui-design-patterns" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="355"></embed></object>
</div>
<!-- PHP 5.x -->]]></content:encoded>
			<wfw:commentRss>http://davidsimpson.me/2009/11/24/portal-ui-design-patterns/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>

