<?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>20three &#187; apple</title>
	<atom:link href="http://www.20three.com/tag/apple/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.20three.com</link>
	<description></description>
	<lastBuildDate>Fri, 03 Feb 2012 14:41:46 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Metaphors &amp; skeuomorphs in touchscreen UI design</title>
		<link>http://www.20three.com/2012/01/metaphors-skeuomorphs-in-touchscreen-ui-design/</link>
		<comments>http://www.20three.com/2012/01/metaphors-skeuomorphs-in-touchscreen-ui-design/#comments</comments>
		<pubDate>Mon, 30 Jan 2012 15:21:06 +0000</pubDate>
		<dc:creator>Owen</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[op]]></category>
		<category><![CDATA[android]]></category>
		<category><![CDATA[apple]]></category>
		<category><![CDATA[Ice Scream Sandwich]]></category>
		<category><![CDATA[interaction]]></category>
		<category><![CDATA[interface design]]></category>
		<category><![CDATA[IOS]]></category>
		<category><![CDATA[iphone]]></category>
		<category><![CDATA[iphone 4]]></category>
		<category><![CDATA[Kindle Fire]]></category>
		<category><![CDATA[metaphor]]></category>
		<category><![CDATA[mobile]]></category>
		<category><![CDATA[Nexus]]></category>
		<category><![CDATA[Samsung]]></category>
		<category><![CDATA[skeuomorph]]></category>
		<category><![CDATA[touchscreen]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[user experience]]></category>
		<category><![CDATA[UX]]></category>

		<guid isPermaLink="false">http://www.20three.com/?p=2007</guid>
		<description><![CDATA[
Skeuomorph:
(Greek: skeuos—vessel or tool, morphe—shape), is a derivative object that retains ornamental design cues to a structure that was necessary in the original. Skeuomorphs may be deliberately employed to make the new look comfortably old and familiar.


There is no question that Android interface design has caught up with Apple IOS in terms of delivering a [...]


Related posts:<ol><li><a href='http://www.20three.com/2011/09/design-process-for-mobile-devices-part-1/' rel='bookmark' title='Permanent Link: Design process for mobile devices:  Part 1'>Design process for mobile devices:  Part 1</a></li>
<li><a href='http://www.20three.com/2010/03/wordagon-a-kerb-iphone-app/' rel='bookmark' title='Permanent Link: Wordagon: A Kerb iphone app'>Wordagon: A Kerb iphone app</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<blockquote>
<div><strong>Skeuomorph:</strong><br />
(Greek: skeuos—vessel or tool, morphe—shape), is a derivative object that retains ornamental design cues to a structure that was necessary in the original. Skeuomorphs may be deliberately employed to make the new look comfortably old and familiar.</div>
</blockquote>
<p><a href="http://www.20three.com/wp-content/uploads/2012/01/floppy1.gif"><img class="aligncenter size-full wp-image-2075" src="http://www.20three.com/wp-content/uploads/2012/01/floppy1.gif" alt="" width="369" height="370" /></a></p>
<p>There is no question that Android interface design has caught up with Apple IOS in terms of delivering a premium user experience, and with the release of <a href="http://www.android.com/about/ice-cream-sandwich/" target="_blank">Android 4 (or Ice Cream Sandwich)</a> it appears that two opposing philosophies are emerging in mobile UI design.</p>
<p>An interview at <a href="http://www.fastcodesign.com" target="_blank">fastcodesign.com</a> with Android UX Design Chief Matias Duarte makes interesting reading. Duarte’s design thinking seems to be opposite of Apple’s &#8211; while Apple go for a skeuomorphic design heavy on using metaphors, Duarte opts for the opposite. His rational (and I’m para-phrasing here, you can check out <a href="http://www.fastcodesign.com/1665890/5-ways-that-android-is-trying-to-break-the-mobile-ui-paradigm" target="_blank">his interview here</a>) is that people don’t care for real looking buttons or metaphors &#8211; they are a hang up of  a <a href="http://kare.com/portfolio/03_apple_macicons.html" target="_blank">30 year old computer interface design</a>, and over-designed buttons with a 3D effect look great on their own but overwhelming when all put together. In his words: <em>“&#8230;when you assemble the individual elements on a screen, each one becomes prominent on its own&#8230; Each is very pretty, but when you try to make a wall or a house out of them, all the embellishments fight with the larger building.”</em></p>
<p>In the fastcodesign.com interview with Duarte, references to Android’s new UI design being ‘like a magazine’ crop up rather a lot &#8211; although never directly attributed to Duarte as far as I can tell, the magazine as UI metaphor gets mentioned a few times &#8211; on the surface this seems at odds with his design thinking, as a magazine inspired layout, complete with turning pages, is of course&#8230; a metaphor. Magazines have been around a lot longer than computer interfaces, and can hardly be called a current and modern interaction model.</p>
<p style="text-align: center">
<p>And then there is that problem of the ‘Pictures Under Glass’ technology, a phrase nicked from the very insightful Bret Victor. In <a href="http://worrydream.com/ABriefRantOnTheFutureOfInteractionDesign/" target="_blank">this great blog post</a>, Victor rants (his word) that <em>“Pictures Under Glass is an interaction paradigm of permanent numbness.”</em> &#8211; we can’t ‘feel’ the pages of a magazine through the interface of a touch screen device. Using &#8216;real&#8217; objects as interactive elements within an interface helps a little with this problem &#8211; buttons under the glass of a touch screen will never be tactile, but they can have the <em>appearance</em> of being tactile, which can only help.</p>
<p>I am not a huge fan of using metaphors but I often find myself encouraging their use. I have found them useful for quickly communicating functionality &#8211; the one great advantage of using metaphors and skeuomorphic design is that you already know how something is going to work &#8211; if there is a dial, I know that I have to turn up or down. A toggle? I can toggle it. The big downside is that we tie ourselves to the limitations of the objects we are basing our metaphors on, we lose the chance to innovate or create new methods of interaction.</p>
<p>I would like to think that the average smart phone user is capable of learning new interactive conventions and can get by without the blatant signposting of metaphors, and that decent UI design can be accomplished with new interaction conventions; but to make sure a UI is understandable quickly, without instruction and by a broad demographic I will choose a metaphor. This piece of advice I have lifted from <a href="http://developer.android.com" target="_blank">http://developer.android.com</a> sums it up: <em>“Real objects are more fun than buttons and menus: Allow people to directly touch and manipulate objects in your app. It reduces the cognitive effort needed to perform a task while making it more emotionally satisfying.”</em></p>
<p>Android 4 is promising a much more refined and improved user experience. As more people upgrade and as Android&#8217;s market penetration continues to grow it will be interesting to see how Apple reacts.</p>
<p><em><a href="http://twitter.com/#!/owen20three" target="_blank">op</a></em></p>
<p>Related links:</p>
<ol>
<li><a href="http://arstechnica.com/apple/reviews/2011/07/mac-os-x-10-7.ars/5" target="_blank">John Siracusa at arstechnica.com writing about Lion and Apple&#8217;s use of the Skeuomorph. (Part of a much larger article)</a></li>
<li><a href="http://www.android.com/about/ice-cream-sandwich/" target="_blank">Info on Android 4</a></li>
</ol>
<p><strong> </strong></p>


<p>Related posts:<ol><li><a href='http://www.20three.com/2011/09/design-process-for-mobile-devices-part-1/' rel='bookmark' title='Permanent Link: Design process for mobile devices:  Part 1'>Design process for mobile devices:  Part 1</a></li>
<li><a href='http://www.20three.com/2010/03/wordagon-a-kerb-iphone-app/' rel='bookmark' title='Permanent Link: Wordagon: A Kerb iphone app'>Wordagon: A Kerb iphone app</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://www.20three.com/2012/01/metaphors-skeuomorphs-in-touchscreen-ui-design/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Wordagon: A Kerb iphone app</title>
		<link>http://www.20three.com/2010/03/wordagon-a-kerb-iphone-app/</link>
		<comments>http://www.20three.com/2010/03/wordagon-a-kerb-iphone-app/#comments</comments>
		<pubDate>Fri, 05 Mar 2010 17:01:51 +0000</pubDate>
		<dc:creator>Owen</dc:creator>
				<category><![CDATA[Computing]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Typography]]></category>
		<category><![CDATA[op]]></category>
		<category><![CDATA[app]]></category>
		<category><![CDATA[apple]]></category>
		<category><![CDATA[application]]></category>
		<category><![CDATA[blue]]></category>
		<category><![CDATA[casual gaming]]></category>
		<category><![CDATA[game]]></category>
		<category><![CDATA[iphone]]></category>
		<category><![CDATA[itouch]]></category>
		<category><![CDATA[kerb]]></category>
		<category><![CDATA[puzzle]]></category>
		<category><![CDATA[word]]></category>
		<category><![CDATA[words]]></category>

		<guid isPermaLink="false">http://www.20three.com/?p=633</guid>
		<description><![CDATA[I have not posted work from the agency I work for before on this blog, (Kerb &#8211; website due for a face-lift soon) but thought I would make an exception in the case of our iphone game Wordagon, mainly because it is a project we produced internally &#8211; it is not attached to a client, [...]


No related posts.]]></description>
			<content:encoded><![CDATA[<p>I have not posted work from the agency I work for before on this blog, (<a href="http://kerb.co.uk" target="_blank">Kerb</a> &#8211; website due for a face-lift soon) but thought I would make an exception in the case of our iphone game Wordagon, mainly because it is a project we produced internally &#8211; it is not attached to a client, therefore not trying to &#8216;<a href="http://img.dailymail.co.uk/i/pix/2007/08_02/ReidAsFrank_468x663.jpg" target="_blank">sell</a>&#8216; anything &#8211; and it&#8217;s free.</p>
<p><a href="http://www.20three.com/wp-content/uploads/2010/03/wordagon_011.jpg"><img class="aligncenter size-full wp-image-655" src="http://www.20three.com/wp-content/uploads/2010/03/wordagon_011.jpg" alt="" width="179" height="186" /></a></p>
<p>The design was produced by Kerb designer <a href="http://youmayalsolike.co.uk" target="_blank">Will Weaver</a> and the game concept came out of the head of Kerb Interactive Director <a href="http://hodler.com/" target="_blank">Carl Hodler.</a> There are still a few tweaks to be made: some re-working of some of the interface elements, extra work laying out the instructions (and re-writing them too) and a little bit of colour correction. We are also going to implement a global high score table with the next Wordagon release &#8211; and we will possibly then start to charge for the app.</p>
<p>With absolutely no promotion apart from Kerb employees spreading the word, Wordagon has managed over 900 downloads with a user rating of 4+ (as of Febuary 2010).</p>
<p>Some screenshots:</p>
<p><a href="http://www.20three.com/wp-content/uploads/2010/03/word01.png"><img class="aligncenter size-full wp-image-671" src="http://www.20three.com/wp-content/uploads/2010/03/word01.png" alt="" width="320" height="480" /></a></p>
<p><a href="http://www.20three.com/wp-content/uploads/2010/03/word01.png"></a><a href="http://www.20three.com/wp-content/uploads/2010/03/word02.png"><img class="aligncenter size-full wp-image-672" src="http://www.20three.com/wp-content/uploads/2010/03/word02.png" alt="" width="320" height="480" /></a></p>
<p><a href="http://www.20three.com/wp-content/uploads/2010/03/word03.png"><img class="aligncenter size-full wp-image-673" src="http://www.20three.com/wp-content/uploads/2010/03/word03.png" alt="" width="320" height="480" /></a></p>
<p><strong>From the itunes store description: </strong>(please excuse the excessive use of exclamation marks!)<strong><br />
</strong></p>
<p>Wordagon is a game of high pressure and mental agility. Battle against time and space&#8230; and by space, we mean words!</p>
<p>With each letter tile having a value, the bigger the word, the more points you score! The longer it takes it to find a word and submit it, the closer you get to falling foul of the onslaught of new letters taking their place.</p>
<p>Before you get trapped beneath an alphabet avalanche, you need to find words and remove them, but as you progress through the levels, the words you must come up with keep getting longer!</p>
<ul>
<li>Key features:</li>
<li>Bonus tiles for letters</li>
<li>Bonus tiles for words</li>
<li>5 levels of difficulty</li>
<li>Highscore table to allow you to challenge yourself or your friends</li>
</ul>
<p>Get it for free from the itunes store <a href="http://itunes.apple.com/gb/artist/kerb/id341754954" target="_blank">here</a></p>
<p><em>op</em></p>


<p>No related posts.</p>]]></content:encoded>
			<wfw:commentRss>http://www.20three.com/2010/03/wordagon-a-kerb-iphone-app/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

