<?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>Kieran Chapman Design &#187; UI</title>
	<atom:link href="http://kieranchapmandesign.com/category/ui/feed/" rel="self" type="application/rss+xml" />
	<link>http://kieranchapmandesign.com</link>
	<description>Web and user experience design by Kieran Chapman</description>
	<lastBuildDate>Mon, 12 Mar 2012 00:12:38 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	
		<item>
		<title>Android First Impressions</title>
		<link>http://kieranchapmandesign.com/2011/02/android-first-impressions/</link>
		<comments>http://kieranchapmandesign.com/2011/02/android-first-impressions/#comments</comments>
		<pubDate>Sun, 06 Feb 2011 02:26:08 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Android]]></category>
		<category><![CDATA[Mobile]]></category>
		<category><![CDATA[UI]]></category>

		<guid isPermaLink="false">http://kieranchapmandesign.com/?p=527</guid>
		<description><![CDATA[An Apple user's first impressions of his new Android phone.]]></description>
			<content:encoded><![CDATA[<p><img class="alignright size-medium wp-image-529" title="HTC Incredible" src="http://kieranchapmandesign.com/wp/wp-content/uploads/2011/02/htc_incredible-182x300.jpg" alt="HTC Incredible" width="182" height="300" />I&#8217;ve been a longtime Apple user, so it was something of a surprise to my friends (and, honestly, to myself) that I recently got an Android phone (especially with the iPhone coming to Verizon this month). But for work reasons I ended up with an HTC Incredible. The reasons I went with the Incredible over other Android phones is because of HTC&#8217;s reputation for attention to detail in the UI, and they have a good track record for updating the OS on a timely basis.</p>
<p>Anyway, my initial reactions after using it for the past two weeks are that it&#8217;s fast and the UI is better than I expected. It has most of the major apps you&#8217;d want to have, and most recent iPhone apps are available for Android, too, though many apps do lack the polish that iOS apps have. Still, the Android OS is very cool. Widgets are pretty useful (vs. having static buttons to apps); unfortunately you can&#8217;t have too much widget action without adversely affecting battery life. Initially I didn&#8217;t like the multiple buttons on the phone (home, menu, back, search) since I was accustomed to a single home button on the iPod touch &amp; iPad, but I have gotten used to them (and even rely on the back button).</p>
<p>What don&#8217;t I like?</p>
<ol>
<li>It doesn&#8217;t sync nicely with my Mac. If you use Google for everything you&#8217;ll be fine, but otherwise it&#8217;s kind of a pain to sync from my Mac to Google to phone. My contacts are set up now, but I still don&#8217;t have my iCal calendars synced.</li>
<li>The email app is merely OK. Compared to Apple&#8217;s really good mobile mail app, it&#8217;s annoying. Luckily I don&#8217;t use my phone for mail very much, and the Android mail app will likely keep it that way.</li>
<li>Taking screen shots on the phone — something I need to do for my job — is clunky. Turns out you can&#8217;t on an unrooted phone, so I need a desktop app to take screenshots. Probably not an issue for typical people, but an annoyance for me.</li>
</ol>
<p>Overall I think the Android is a very good mobile OS and so far I do like the Incredible. But if I had a choice between an iPhone and an Android phone, I would definitely choose the iPhone.</p>
]]></content:encoded>
			<wfw:commentRss>http://kieranchapmandesign.com/2011/02/android-first-impressions/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Never Said About Restaurant Websites</title>
		<link>http://kieranchapmandesign.com/2011/01/never-said-about-restaurant-websites/</link>
		<comments>http://kieranchapmandesign.com/2011/01/never-said-about-restaurant-websites/#comments</comments>
		<pubDate>Fri, 28 Jan 2011 02:02:14 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[UI]]></category>

		<guid isPermaLink="false">http://kieranchapmandesign.com/?p=524</guid>
		<description><![CDATA[Restaurant website are notoriously bad. This site of sarcastic comments calls them out.]]></description>
			<content:encoded><![CDATA[<p>“Why would anyone want to skip this intro? I think I’ll watch it again.”</p>
<p>“I like when the music blasts as soon as the site loads. It signals to everyone at work that I am going out to eat!”</p>
<p>“I hope the phone number and address are actually images so I can’t copy and paste them!”</p>
<p>I&#8217;ve always been surprised at how bad restaurant websites tend to be. I have a feeling that someone created a &#8220;great&#8221; circa-2001 restaurant site with intro movie, background music, hard-to-read script typefaces, and completely coded in Flash for that &#8220;cool, cutting-edge&#8221; effect. And every restaurant owner since has been copying that &#8220;website zero.&#8221; Meanwhile, actual visitors to the site can&#8217;t find the basic information they want: location, hours, phone number, and an easy-to-read (and up-to-date) menu. No amount of music, Flash, or &#8220;website ambiance&#8221; will reduce a user&#8217;s frustration. Instead, they&#8217;ll just find someplace else to eat.</p>
<p>Until restaurant owners build sites that their customers can use — and they realize that many of them are accessing their sites with mobile devices —  the site <a href="http://neversaidaboutrestaurantwebsites.tumblr.com/" target="_blank">Never Said About Restaurant Websites</a> will have plenty of fodder. (via Daring Fireball)</p>
]]></content:encoded>
			<wfw:commentRss>http://kieranchapmandesign.com/2011/01/never-said-about-restaurant-websites/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Mac App Store Makes Installation Simple</title>
		<link>http://kieranchapmandesign.com/2011/01/mac-app-store-makes-installation-simple/</link>
		<comments>http://kieranchapmandesign.com/2011/01/mac-app-store-makes-installation-simple/#comments</comments>
		<pubDate>Fri, 07 Jan 2011 16:59:57 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Apple]]></category>
		<category><![CDATA[UI]]></category>

		<guid isPermaLink="false">http://kieranchapmandesign.com/?p=516</guid>
		<description><![CDATA[Is this the end of .dmg files and disk images?]]></description>
			<content:encoded><![CDATA[<p><img class="alignright size-full wp-image-517" title="app store" src="http://kieranchapmandesign.com/wp/wp-content/uploads/2011/01/appstore.jpg" alt="app store" width="175" height="175" />For all of the Mac&#8217;s (mostly valid) reputation for being easy to use, installing new software on a Mac can be pretty confusing to novices and new users. Zips, .dmg files, <a href="http://en.wikipedia.org/wiki/Disk_image" target="_blank">disk images</a>: these are concepts many non-geeks often don&#8217;t understand.</p>
<p>On the Mac there&#8217;s a good chance someone will run a new application from the disk image instead of copying the app to their hard drive. <a href="/2010/02/ipad-a-huge-leap-forward-for-regular-folk/">I&#8217;ve mentioned before</a> how the iPhone made this issue go away: &#8220;iPhone and iPad app installation is easy: find the app you want to install, the icon appears, you move it to the screen you want.&#8221; Simple.</p>
<p>Enter Apple&#8217;s new <a href="http://www.apple.com/mac/app-store" target="_blank">Mac App Store</a> which makes software installation on the Mac as easy on the iPhone: Buy an app and it appears right in your dock. That kind of application installation simplicity has been missing from OS X for too long.</p>
]]></content:encoded>
			<wfw:commentRss>http://kieranchapmandesign.com/2011/01/mac-app-store-makes-installation-simple/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Is Apple Killing the Mouseover?</title>
		<link>http://kieranchapmandesign.com/2010/06/is-apple-killing-the-mouseover/</link>
		<comments>http://kieranchapmandesign.com/2010/06/is-apple-killing-the-mouseover/#comments</comments>
		<pubDate>Tue, 08 Jun 2010 21:30:42 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[UI]]></category>

		<guid isPermaLink="false">http://kieranchapmandesign.com/?p=472</guid>
		<description><![CDATA[The iPhone-ification of the web is taking :hover away from designers]]></description>
			<content:encoded><![CDATA[<p>Andy Croll writes in <a href="http://andycroll.com/writing/the-end-of-hover" target="_blank">the end of :hover?</a>:</p>
<blockquote><p>:hover as an web interface design tool going forward is going to be less and less important. As to whether this is a good or bad thing I’m not sure.</p></blockquote>
<p>He makes the point that as more and more sites and web apps optimize for the iPad and iPhone, designers aren&#8217;t going to be able to rely on mouseover states. Mouseovers are used both to provide feedback that an item is clickable and to reduce complexity on a screen by hiding controls until the cursor is moved over an area. But that ability goes away with the iPad. I&#8217;m running into this issue with a current project, and it takes a new way of thinking about the problem.</p>
<p>Andy sums up:</p>
<blockquote><p>I know that I’ll certainly be considering ‘tap to toggle’ as a user interface choice ahead of hover in the future. The iPhone-ification of interaction online continues.</p></blockquote>
<p>(via <a href="http://daringfireball.net/linked/2010/06/08/hover" target="_blank">Daring Fireball</a>)</p>
]]></content:encoded>
			<wfw:commentRss>http://kieranchapmandesign.com/2010/06/is-apple-killing-the-mouseover/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>yav Form Validation</title>
		<link>http://kieranchapmandesign.com/2010/04/yav-form-validation/</link>
		<comments>http://kieranchapmandesign.com/2010/04/yav-form-validation/#comments</comments>
		<pubDate>Tue, 27 Apr 2010 19:17:19 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[UI]]></category>

		<guid isPermaLink="false">http://kieranchapmandesign.com/?p=434</guid>
		<description><![CDATA[Make form validation (a little) easier with yav.]]></description>
			<content:encoded><![CDATA[<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">yav Form Validation</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">- Make form validation (a little) easier with yav.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Forms are a way for your site&#8217;s users to contact you, place orders, complete a survey — in general, provide you with important information. So, it&#8217;s very important that forms are clear, well-designed, and easy to use.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Validating online forms is a pain from a developer&#8217;s point of view, but necessary for a good user experience. If a user does make a mistake completing a form — such as omitting a required field or entering an invalid email address  — you want to let them know right away so they can fix it before submitting the data. And it&#8217;s best to show the error right away without refreshing the page or having to user search for what might be wrong. (A somewhat-old but still-relevant article by UIE is worth a read: &lt;a href=&#8221;http://www.uie.com/articles/form_design_wild/&#8221;&gt;Web Form Design in the Wild, Part II&lt;/a&gt;.)</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">&lt;a href=&#8221;http://yav.sourceforge.net/&gt;yav&lt;/a&gt; is Javascript form validation tool that does a great job handling form validation. It&#8217;s good for both simple validating (such as requiring a field or checking for a valid email address) and more complex rules (if your country = United States then require the State field; if your country = Canada, require province). You can even write custom Javascript functions if you need require even more specific validation rules.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">yav also gives you options for displaying form errors. You can list the errors in a single section above the form, which works well with shorter forms:</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 also display error messages inline, which is better for longer forms. You don&#8217;t want users to have to search for their error, so calling out the error next to the field that needs correcting makes it easy to find:</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;">yav&#8217;s config settings let you change error message text, and you have total control over the look of the errors using CSS. The only downside is that it&#8217;s not terribly well-documented, so if you&#8217;re unfamiliar with Javascript you&#8217;ll probably require some trial &amp; error to get things to work like you want them.</div>
<p>Forms are a way for your site&#8217;s users to contact you, place orders, complete a survey — in general, provide you with important information. So, it&#8217;s very important that forms are clear, well-designed, and easy to use.</p>
<p>Validating online forms is a pain from a developer&#8217;s point of view, but necessary for a good user experience. If a user does make a mistake completing a form — such as omitting a required field or entering an invalid email address  — you want to let them know right away so they can fix it before submitting the data. And it&#8217;s best to show the error right away without refreshing the page or having to user search for what might be wrong. (A somewhat-old but still-relevant article by UIE is worth a read: <a href="http://www.uie.com/articles/form_design_wild" target="_blank">Web Form Design in the Wild, Part II</a>.)</p>
<p><a href="http://yav.sourceforge.net" target="_blank">yav</a> is Javascript form validation tool that does a great job handling form validation. It&#8217;s good for both simple validating (such as requiring a field or checking for a valid email address) and more complex rules (if your country = United States then require the State field; if your country = Canada, require province). You can even write custom Javascript functions if you need even more specific validation rules.</p>
<p>yav also gives you options for displaying form errors. You can list the errors in a single section above the form, which works well with shorter forms:</p>
<p><img class="alignnone size-large wp-image-445" style="border: 1px solid black;" title="yav-2" src="http://kieranchapmandesign.com/wp/wp-content/uploads/2010/04/yav-2-541x550.png" alt="yav-2" width="541" height="550" /></p>
<p>You can also display error messages inline, which is better for longer forms. You don&#8217;t want users to have to search for their error, so calling out the error next to the field that needs correcting makes it easy to find:</p>
<p><img class="alignnone size-large wp-image-444" style="border: 1px solid black;" title="yav-1" src="http://kieranchapmandesign.com/wp/wp-content/uploads/2010/04/yav-1-550x124.png" alt="yav-1" width="550" height="124" /></p>
<p>yav&#8217;s config settings let you change error message text, and you have total control over the look of the errors using CSS. The only downside is that it&#8217;s not terribly well-documented, so if you&#8217;re unfamiliar with Javascript you&#8217;ll probably require some trial &amp; error to get things to work like you want them.</p>
]]></content:encoded>
			<wfw:commentRss>http://kieranchapmandesign.com/2010/04/yav-form-validation/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>iPad: a Huge Leap Forward for Regular Folk</title>
		<link>http://kieranchapmandesign.com/2010/02/ipad-a-huge-leap-forward-for-regular-folk/</link>
		<comments>http://kieranchapmandesign.com/2010/02/ipad-a-huge-leap-forward-for-regular-folk/#comments</comments>
		<pubDate>Wed, 03 Feb 2010 12:13:23 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[UI]]></category>

		<guid isPermaLink="false">http://kieranchapmandesign.com/?p=420</guid>
		<description><![CDATA[The iPad is not for the angry geeks.]]></description>
			<content:encoded><![CDATA[<p><img class="alignright size-full wp-image-422" title="ipad" src="http://kieranchapmandesign.com/wp/wp-content/uploads/2010/02/ipad.jpg" alt="Apple iPad" width="300" height="430" />There&#8217;s been so much reaction since the release of Apple&#8217;s iPad, a lot of it strangely underwhelming. Not that everybody needs to be an &#8220;Apple fanboy suckling at the teat of Steve Jobs&#8221; (as some people have put it) but the iPad is more than &#8220;just a big iPod Touch.&#8221; (As an aside, I realize nobody likes the name &#8220;iPad&#8221; —  <a href="http://www.theonion.com/content/infograph/apple_finally_unveils_ipad" target="_blank">The Onion&#8217;s comment</a> &#8220;Awkward name enables Twitter users to make the same joke over and over and over again&#8221; points out the obvious jokes — but why don&#8217;t IBM ThinkPads get the same treatment?)</p>
<p>On his blog, <a href="http://weblog.muledesign.com/2010/02/the_failure_of_empathy.php" target="_blank">Mike Monteiro suggested</a> that &#8220;The iPad isn’t the future of computing; it’s a replacement for computing.&#8221; I think he&#8217;s right, which is why so many people who &#8220;do computers&#8221; (geeks) are underwhelmed — or worse — by the iPad. It&#8217;s not going to replace computers for geeks, but it&#8217;s going to bring computers to the rest of the world.</p>
<p>So many things that it doesn&#8217;t do or have are actually perfect for non-geeks: The iPad has no file system, which is good for people who can&#8217;t find files they&#8217;ve saved. There&#8217;s no multitasking, so people who don&#8217;t realize that they left 10 applications open won&#8217;t wonder why their computer is running so slowly. And another big improvement is software installation.</p>
<p>Right now it&#8217;s pretty simple on a Mac — just copy the application from the disk image to your Applications folder — but even that can be confusing to novices. (How many non-geeks have run their newly downloaded application from the disk image?) iPhone and iPad app installation is easy: find the app you want to install, the icon appears, you move it to the screen you want. This simplicity alone is a huge step in the right direction for the non-geeks.</p>
<p>The iPad isn&#8217;t for everyone (I certainly can&#8217;t see it replacing my regular Mac) but I believe it <em>is</em> for a lot of people. The geeks may not be impressed (how could a UI designer <em>not</em> be impressed? Simplicity is not simple!) but perhaps the iPad isn&#8217;t supposed to impress them. It&#8217;s not for them; it&#8217;s for the regular folks.</p>
<p>Related reading:<br />
- <a href="http://northtemple.com/2010/02/01/on-ipads-grandmas-and-gam" target="_blank">On iPads, Grandmas and Game-changing<br />
</a>- <a href="http://flyosity.com/ipad/the-ipad-is-for-everyone-but-us.php" target="_blank">The iPad Is For Everyone But Us</a></p>
]]></content:encoded>
			<wfw:commentRss>http://kieranchapmandesign.com/2010/02/ipad-a-huge-leap-forward-for-regular-folk/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

