<?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>Blog Pav Blog &#187; UI Design</title>
	<atom:link href="http://www.pavley.com/tag/ui-design/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.pavley.com</link>
	<description>“A great leap in the dark” – Thomas Hobbes</description>
	<lastBuildDate>Thu, 05 Jan 2012 05:02:05 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Dungeonators Battle UI Redesign</title>
		<link>http://www.pavley.com/2011/12/21/dungeonators-battle-ui-redesign/</link>
		<comments>http://www.pavley.com/2011/12/21/dungeonators-battle-ui-redesign/#comments</comments>
		<pubDate>Thu, 22 Dec 2011 01:59:44 +0000</pubDate>
		<dc:creator>pav</dc:creator>
				<category><![CDATA[Cocos2d-iPhone]]></category>
		<category><![CDATA[Product Design]]></category>
		<category><![CDATA[Game Development]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[UI Design]]></category>
		<category><![CDATA[User Interface]]></category>

		<guid isPermaLink="false">http://www.pavley.com/?p=501</guid>
		<description><![CDATA[There is nothing quite like real user feedback. The Dungeonators game that I started coding about a year ago has been through several design iterations. Before I wrote a line of code I mocked up the whole UI and tested that on my friends and kids (paper prototype, an honorable UI design tradition). And with [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;"><a href="http://www.pavley.com/wp-content/uploads/2011/12/photo-1.png"><img class="aligncenter size-full wp-image-507" title="Current Dungeonators Battle UI" src="http://www.pavley.com/wp-content/uploads/2011/12/photo-1.png" alt="" width="461" height="307" /></a><a href="http://www.pavley.com/wp-content/uploads/2011/12/Dungeonators_new_battle_ui.png"><br />
</a></p>
<p>There is nothing quite like real user feedback. The <a href="http://itunes.apple.com/us/app/dungeonators/id463233923?mt=8">Dungeonators</a> game that I started coding about a year ago has been through several design iterations. Before I wrote a line of code I mocked up the whole UI and tested that on my friends and kids (<a href="http://www.alistapart.com/articles/paperprototyping/">paper prototype</a>, an honorable UI design tradition). And with each development build I tested everything again and even enlisted strangers. I must have played though the final release candidate a 100 times. (It was then that I realized that game programmers must get sick of their games if they properly test them!)</p>
<p>When I uploaded Dungeonators to the App Store on 14 October 2011 I was pretty confident about the game play and the user interface. <a href="http://en.wikiquote.org/wiki/Last_words">Famous last</a> words as they say <img src='http://www.pavley.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>After an initial healthily growth curve Dungeonators installs tanked:</p>
<p style="text-align: center;"><a href="http://www.pavley.com/wp-content/uploads/2011/12/Dungeonators_new_battle_ui.png"><br />
</a><a href="http://www.pavley.com/wp-content/uploads/2011/12/photo.png"><img class="aligncenter size-full wp-image-502" title="iTunes Connect Screen for Dungeonators 1.0" src="http://www.pavley.com/wp-content/uploads/2011/12/photo.png" alt="" width="384" height="576" /></a></p>
<p>The message I get from this user adoption curve was simple: Dunegonators stinks!</p>
<p>So I went back to the drawing board to search for the stinky bits. After much reflection I realized three things:</p>
<ol>
<li>Dungeonators is too hard for casual users and too easy/dumb for hardcore gamers. People who play MMORPGs like World of Warcraft punch through my game. People who play Angry Birds get stuck around level 1.6. (Which is as far as you can go if you don&#8217;t know what you&#8217;re doing.)</li>
<li>People don&#8217;t know what to touch. They want to touch the avatars and not the raid and spell frames. If you don&#8217;t know what raid frames and spell frames are then you are not going to <em>get</em> my game.</li>
<li>I was going to have to fix this. I could fix this problem with a lengthy tutorial or FAQs. But Dungeonators is causal game not productivity software. I never read manuals and skip tutorials. I expect my audience to have the same level of self respect!</li>
</ol>
<div>So here is the new battle UI that tries to clean this mess up:</div>
<div><a href="http://www.pavley.com/wp-content/uploads/2011/12/Dungeonators_new_battle_ui.png"><img class="aligncenter" title="Dungeonators_new_battle_ui" src="http://www.pavley.com/wp-content/uploads/2011/12/Dungeonators_new_battle_ui.png" alt="" width="480" height="320" /></a></div>
<ul>
<li>The good guy raid frames (on the left) are no longer touchable: They just display status. I couldn&#8217;t find a casual user who knew what a raid frame was so I got rid of raid frames.</li>
<li>Good guy spell frames are no longer associated with good guy raid frames: Spell frames are now modeless and never hidden. Each good guy has two spells available 24/7. As the game progress the spell are automatically upgraded. I&#8217;ll have to rewrite the game mechanics to handle the fact that the total number of available spells has gone from 4 x 6 (which I understand is 24) to a mere 8. But that actually makes Dungeonators a heck of lot simpler to program and to play.</li>
<li>The bad guy raid frames are still touchable and still enable the player to switch targets. But in the original UI you could have separate bad guy targets for every good guy. In the revised UI all the Dungeonators are synchronized. It&#8217;s a gross simplification that is all for the best.</li>
<li>Touching the center of the screen, where the avatars live, is still not part of the game play but if you do, the game will pause and bring up the main menu. I was able to kill two birds with one stone: No main menu button and a valid response to a user touch. Feedback is everything thing: In the original design touching the center of the screen was ignored and could have been interpreted as the game freezing up.</li>
</ul>
<div>In general I learned what I thought I always knew: iPhone games have to be simple and causal gamers don&#8217;t have the time or energy for complex mechanics. But in practice I learned a lesson that every battled hardened game developer must know after their first game is released: There is no better test case than the real world!</div>
]]></content:encoded>
			<wfw:commentRss>http://www.pavley.com/2011/12/21/dungeonators-battle-ui-redesign/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Mac OS 3 UX Simulator Updated!</title>
		<link>http://www.pavley.com/2009/11/24/mac-os-3-ux-simulator-updated/</link>
		<comments>http://www.pavley.com/2009/11/24/mac-os-3-ux-simulator-updated/#comments</comments>
		<pubDate>Tue, 24 Nov 2009 23:36:19 +0000</pubDate>
		<dc:creator>pav</dc:creator>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[Software Development]]></category>
		<category><![CDATA[UI Design]]></category>

		<guid isPermaLink="false">http://www.pavley.com/?p=155</guid>
		<description><![CDATA[A modal About the Finder dialog box appears! Click here to see if you can figure out how to make it appear.]]></description>
			<content:encoded><![CDATA[<p>A modal <em>About the Finder</em> dialog box appears! Click <a href="http://www.pavley.com/mac-os-3-ux-simulator/">here</a> to see if you can figure out how to make it appear.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.pavley.com/2009/11/24/mac-os-3-ux-simulator-updated/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Mac OS 3: User Center Design Exemplar</title>
		<link>http://www.pavley.com/2009/11/01/mac-os-3-user-center-design-exemplar/</link>
		<comments>http://www.pavley.com/2009/11/01/mac-os-3-user-center-design-exemplar/#comments</comments>
		<pubDate>Sun, 01 Nov 2009 23:05:08 +0000</pubDate>
		<dc:creator>pav</dc:creator>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[Tech Trends]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Software Development]]></category>
		<category><![CDATA[UI Design]]></category>

		<guid isPermaLink="false">http://www.pavley.com/?p=111</guid>
		<description><![CDATA[I nearly lost all my data a couple of weeks ago. Actually, I was in no danger at all of losing my data but the terribad UI of Apple&#8217;s Time Machine and Time Capsule made me think I did! Apple&#8217;s backup solution is like a good looking school yard bully with a hidden inferiority complex. [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="512" height="342" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://www.pavley.com/wp-content/uploads/2009/11/macpaint1.swf" /><embed type="application/x-shockwave-flash" width="512" height="342" src="http://www.pavley.com/wp-content/uploads/2009/11/macpaint1.swf"></embed></object></p>
<p>I nearly lost all my data a couple of weeks ago. Actually, I was in no danger at all of losing my data but the terribad UI of Apple&#8217;s <a href="http://www.apple.com/macosx/what-is-macosx/time-machine.html">Time Machine</a> and <a href="http://www.apple.com/timecapsule/">Time Capsule</a> made me think I did! Apple&#8217;s backup solution is like a good looking school yard bully with a hidden inferiority complex.</p>
<p>I used to back up everything manually and it was messy. To be fair Apple seemed to conserve all that backup mess with the Time Capsule wireless base station/terabyte network drive and its slick Time Machine backup application. It just seemed to work: No settings, no maintenance, no hunting for the disk with the 3rd season of <a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewTVSeason?id=314435367&amp;s=143441">Buffy</a> on it.</p>
<p>On the rare occasion when I did need a missing or deleted file Time Machine made it easy, and entertaining, to find (nothing like zooming back in time to give lulz).</p>
<p>One evening last week my MacBook Pro died and upon restart got stuck at the <a href="http://osxbook.com/book/bonus/chapter5/panic/">kernel panic screen</a>. I took it <a href="http://www.tekserve.com/">Tek Serve</a> in NYC (where they are a million time smarter than Apple&#8217;s Genius Bar) and learned that a fresh re-install of Mac OS X was the solution.</p>
<p>To make a long story short, when I connected my revived MacBook Pro to Time Capsule it restored a backup from 4 months ago! That&#8217;s a generation in Internet years! Also it took over 12 hours! I was aghast!</p>
<p>With grim determination I started the whole process over and tried to get support from Apple. But nothing helped until I just gave up and accessed Time Machine to confirm it was operational. And lo and behold: There was my data from the previous week. Right up to 30 minutes before the kernel panic attack!</p>
<p style="text-align: center;"><a href="http://www.netlingo.com/smileys.php">%*@:-(</a></p>
<p>Just before I joined Apple I got some coaching from Bruce Tognizzni (I was designing a set of never-to-be-released apps for Letraset back in 1991). <a href="http://www.asktog.com/">Tog</a> explained that good user centered design doesn&#8217;t just hide complexity&#8211;it enables the user to navigate it. Time Machine and Time Capsule are bad user centered design according to this definition since they are pretty faces and not much more.</p>
<p>I can&#8217;t think of any better example of user centered design than the original Mac OS (version 3) and apps like MacPaint and MacWrite. And since you can&#8217;t run it anymore (but you can see screen shots at the <a href="http://www.d4.dion.ne.jp/~motohiko/system3.htm">Vintage Mac Museum</a>) I decided to bring the Mac OS 3 back to life in flash. Embedded above is version 0.1 of the Mac OS 3 Flash Sim. It don&#8217;t do much but I promise to whittle away at it as time permits. I&#8217;ll post the source code shortly as well. Right now you can selected the trash can and pull down the apple menu.</p>
<p>It&#8217;s funny but the constrained yet expressive capabilities of the original Mac OS are much more like the user experience of the iPhone and iPod Touch then the current Mac OS X. There is something to be said for the <a href="http://www.wired.com/culture/design/magazine/17-03/dp_intro">power of limitations</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.pavley.com/2009/11/01/mac-os-3-user-center-design-exemplar/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

