<?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>Johnny Holland &#187; iphone</title>
	<atom:link href="http://johnnyholland.org/tag/iphone/feed/" rel="self" type="application/rss+xml" />
	<link>http://johnnyholland.org</link>
	<description>It&#039;s all about interaction</description>
	<lastBuildDate>Wed, 23 May 2012 18:35:28 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>Motion and The Clay of Interaction Design</title>
		<link>http://johnnyholland.org/2011/03/motion-and-the-clay-of-interaction-design/</link>
		<comments>http://johnnyholland.org/2011/03/motion-and-the-clay-of-interaction-design/#comments</comments>
		<pubDate>Wed, 23 Mar 2011 15:13:52 +0000</pubDate>
		<dc:creator>David Malouf</dc:creator>
				<category><![CDATA[Digital UX]]></category>
		<category><![CDATA[Methods & theory]]></category>
		<category><![CDATA[gesture]]></category>
		<category><![CDATA[gowalla]]></category>
		<category><![CDATA[ipad]]></category>
		<category><![CDATA[iphone]]></category>
		<category><![CDATA[motion]]></category>
		<category><![CDATA[twitter]]></category>

		<guid isPermaLink="false">http://johnnyholland.org/?p=10544</guid>
		<description><![CDATA[<img width="220" height="160" src="http://johnnyholland.org/wp-content/uploads/2011/12/malouf-motion.jpg" class="attachment-index-categories wp-post-image" alt="malouf-motion" title="malouf-motion" />I am in constant pursuit of the “clay” of interaction design (IxD). Even if that clay is intangible, if we [...]]]></description>
			<content:encoded><![CDATA[<img width="220" height="160" src="http://johnnyholland.org/wp-content/uploads/2011/12/malouf-motion.jpg" class="attachment-index-categories wp-post-image" alt="malouf-motion" title="malouf-motion" /><p><a href="http://johnnyholland.org/2011/03/motion-and-the-clay-of-interaction-design/motion/" rel="attachment wp-att-10570"><img class="alignnone size-full wp-image-10570" title="Motion" src="http://johnnyholland.org/wp-content/uploads/motion.jpg" alt="Motion" width="416" height="160" /></a><br />
I am in constant pursuit of the “clay” of interaction design (IxD). Even if that clay is intangible, if we are to consider ourselves a true design discipline there must be something that we are manipulating. Once we understand what it is that we are manipulating we will be better able to communicate to all our stakeholders the intentions of what it is the interaction designer designs. One possible property of said “clay” may be motion or movement.<span id="more-10544"></span>For almost all interactions we place our body in motion. Even speaking requires muscles to move in order to work. There has been a ton of work done on motion as an aesthetic quality towards an audience, even if that audience is just perceived. What I’m interested in is motion as an aesthetic regardless of perceived or real audience. The question I ask is if certain movements just feel better than others at an aesthetic level and further that perception is manipulated by other interacting factors.</p>
<h2><span style="font-weight: normal;">The Foundations: A Recap</span></h2>
<p>A couple of years ago I <a title="Boxes and Arrows: Foundations of Design" href="http://www.boxesandarrows.com/view/foundations-of">started</a> <a title="Boxes and Arrows Podcast" href="http://www.boxesandarrows.com/view/podcast-with-david">positing</a> <a title="Johnny Holland: Foundations of Interaction Design: Interaction ‘09 reprise" href="http://johnnyholland.org/2009/03/09/foundations-of-interaction-design-interaction-09-reprise/">that</a> there are foundational elements to IxD. If we are to discuss material and medium in IxD there must be properties that we can use to describe and differentiate and even qualify what it is.</p>
<p>Why I pursue foundations as a concept is strongly influenced by <a href="http://www.amazon.com/Elements-Design-Kostellow-Structure-Relationships/dp/1568983298/ref=sr_1_fkmr0_1?ie=UTF8&amp;qid=1296057172&amp;sr=8-1-fkmr0">Roweena Reed Kostellow</a> (founder of the Pratt Institute’s Industrial Design Department) and her six foundations for three-dimensional design: <em>line</em>,<em> luminance &amp; color</em>,<em> space</em>,<em> volume</em>,<em> negative space</em>, and<em> texture</em>. It isn’t just that these foundations exist for their own sake. They are a basis for two important requirements for the education and practice of design—educating craft and a basis for criticism.</p>
<p>Another growing influence is the work of <a href="http://en.wikipedia.org/wiki/Bill_Verplank">Bill Verplank</a>. His three areas of concern for the interaction designer are articulated beautifully in his <a href="http://www.youtube.com/watch?v=C3rxCLhzmXY">video taped lecture</a> he gives in <em><a href="www.designinginteractions.com">Designing Interactions</a></em> for his former colleague Bill Moggridge. In it he suggests that the Interaction Designer is concerned with three things that all start with “How do you &#8230;”. It’s worth the watch.</p>
<div style="width: 480px; height: 390px; margin: 0 auto;"><object width="480" height="390" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/C3rxCLhzmXY?fs=1&amp;hl=en_US" /><param name="allowfullscreen" value="true" /><embed width="480" height="390" type="application/x-shockwave-flash" src="http://www.youtube.com/v/C3rxCLhzmXY?fs=1&amp;hl=en_US" allowFullScreen="true" allowscriptaccess="always" allowfullscreen="true" /></object></div>
<p>What is unclear to me from Bill’s explanation is how do I manipulate things to achieve the outcomes that he describes. Further it seems that he is only discussing the end result or point of interface that people interact with. This did not seem to map against my idea of what interaction design is. For me interaction design supports the interface by defining both the desired behavior of a product or service and the desired behavior of the people who will interact with that system.</p>
<p>So, with this in mind I’ve been working out a collection of foundations that I believe make up the “clay” of how to do just that. I have three original elements: <strong>Time, Metaphor, </strong>and <strong>Abstraction</strong>.</p>
<ul>
<li><strong>Time</strong> is in many ways the most multi-facetted of the three. It breaks down into the following attributes: <em>pacing, rest, duration, frequency, attention</em>. These properties all combine to create a relative sense of time amongst people using the system, the same way that one experiences anything.</li>
<li><strong>Metaphor</strong> is related to what Richard Buchanan calls the “<a href="http://www.jstor.org/pss/1511474">Poetics of Design</a>”. It is the way we need to use analogy as the bridge between the intangible complexities that are forged through digital technologies (and other complex intangible and abstracted systems such as services) and the tangible world where our senses and cognitive abilities evolved to embody.</li>
<li><strong>Abstraction</strong> is really a value property. It relates to combined physical and cognitive activities that takes place to initiate an activity and when it is perceived to have been occurred.</li>
</ul>
<p>The rest of this article though is about a new type of foundation that I alluded to when I presented at <a href="http://interaction09.ixda.org/">Interaction 09</a> on<a href="http://vimeo.com/groups/8942/videos/4500315"> motion or movement</a>.</p>
<h2><span style="font-weight: normal;">Background on Motion</span></h2>
<p>We are using a larger variety of motions with our primary computing devices than ever before. The devices are in motion like when we shake an iPhone to initiate an undo, or we are in motion &amp; our devices can sense the movements we make. The previous tap which mapped almost exclusively to a mouse-click has been extended with new gestures like pinch, flick and swipe. Like the ubiquitous mouse-click there are a variety of contexts where these gestures are used changing their meaning, and emotional contexts. Mouse down, move, mouse up is commonly called &#8220;drag &amp; drop&#8221;. How we combine movements within specific contexts can effect how we interpret their interpersonal meaning and the feelings we have associated with them.</p>
<p>One aspect of motion and movement comes from dance and martial arts. I love to dance and I used to practice both Tae Kwon Do and capoeira (two fairly different martial arts). Dance and martial arts requires a practitioner to be fairly aware of how they move in the world. Yes, you can say this is about balance and agility, but it is also about understanding what brings about balance and agility. It also forces you to understand your place in the world physically compared to everything around you. To me, this spatial awareness is to motion the equivalent that attention is to time.</p>
<blockquote><p>spatial awareness is to motion what attention is to time</p></blockquote>
<p>I spent more focused attention on my practice of capoeira as an adult. In doing so I realized quickly that how I felt emotionally doing a movement directly correlated to whether or not the movement itself was successful. On watching capoeira I noticed similarly as an audience member that beauty occurred within the success of those playing (you play capoeira instead of fighting it because of its history as a covert mechanism to learn how to defend yourself within the context of being a slave in Brazil.)</p>
<p>Compare the act of moving a file from one container to another with the act of panning a map. In this example the motion is almost the same but there is a clear difference that effects the aesthetic quality. The level of precision required for panning a map is substantially less than that of file-folder management depending on the level of graphic resolution and other factors related to Fitt’s Law. The motion of panning can in fact have a comparable flick like quality to it, especially when the user knows they are several lengths of motion away from their desired target. Targets themselves are usually approximations as well. Applying Fitt’s Law to this activity, an approximate target has a cognitive equivalent of just being a fairly larger target than an absolute target.</p>
<h2><span style="font-weight: normal;">The Case for both good &amp; bad motion design: Twitter for iOS</span></h2>
<p>What got me to return to thinking about motion almost two years later was my own impressions using the newly released Twitter for iPad app and comparing those to my other iPad and iPhone apps I use. Specifically, there are new gestures introduced by the designer of both Tweetie for iPhone (now Twitter for iPhone) and Twitter for iPad, Loren Brichter formerly of <a href="http://www.atebits.com/">Atebits</a>.</p>
<p><object width="640" height="360" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://vimeo.com/moogaloop.swf?clip_id=21389124&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=1&amp;color=00ADEF&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" /><embed width="640" height="360" type="application/x-shockwave-flash" src="http://vimeo.com/moogaloop.swf?clip_id=21389124&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=1&amp;color=00ADEF&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" allowfullscreen="true" allowscriptaccess="always" /></object></p>
<p>On Tweetie, Loren brought to the iPhone world a whole new gesture. Playing on the existing metaphors of gravity &amp; friction in other iPhone gestural interfaces, he used the existing playful springiness at the end of a list as a spring-loaded trigger to call for a refresh of the results of that same list.</p>
<div id="attachment_10563" class="wp-caption aligncenter" style="width: 650px"><a href="http://johnnyholland.org/wp-content/uploads/process.jpg"><img class="size-full wp-image-10563" title="The now-standard spring refresh on iPhone" src="http://johnnyholland.org/wp-content/uploads/process.jpg" alt="The now-standard spring refresh on iPhone" width="640" height="229" /></a><p class="wp-caption-text">The now-standard spring refresh on iPhone</p></div>
<p>This first gestural innovation was so successful that a <a href="http://foursquare.com/devices/iphone">host</a> <a href="http://gowalla.com/iphone">of</a> <a href="http://www.facebook.com/iphone">other</a> <a title="Linkedin for Iphone" href="http://www.linkedin.com/iphone">applications</a> have taken it on as their primary means of refreshing a result list. For me the adoption of the new gesture so permeated my standard use of my iPhone that I now expect this gesture to be available in every app that I use. That is a pretty successful independent major UI paradigm to design.</p>
<p>When I opened up the new Twitter for iPad app, I was ready for some goodness because of all the hype I read before I downloaded. It is very well designed and is completely different from its iPhone sister. It takes advantage of the unique properties of the iPad. (For those not familiar with the app, the motions are all shown below).</p>
<p><object width="640" height="360" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://vimeo.com/moogaloop.swf?clip_id=21389588&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=1&amp;color=00ADEF&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" /><embed width="640" height="360" type="application/x-shockwave-flash" src="http://vimeo.com/moogaloop.swf?clip_id=21389588&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=1&amp;color=00ADEF&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" allowfullscreen="true" allowscriptaccess="always" /></object><br />
The new iPad app puts the details of a single tweet in a right column, but instead of putting an &#8220;X&#8221; icon or other &#8220;button&#8221; to close or collapse the detail view, Loren invented a new gesture/action combo where the user swipes (a common gesture for deletion) to literally push aside the right column, which disappears for portrait view and squeezes it and clips it in landscape view. In so doing he both creates a new motion gesture and uses that new gesture as a means of reducing abstraction through what appears to be a tangible equivalent of pushing aside a pile of paper on your desk. (Yes, it is also an abstract metaphor and also has attributes of time associated with it.)</p>
<div id="attachment_10569" class="wp-caption aligncenter" style="width: 650px"><a href="http://johnnyholland.org/wp-content/uploads/flick-right.jpg"><img class="size-full wp-image-10569" title="flick-right" src="http://johnnyholland.org/wp-content/uploads/flick-right.jpg" alt="Clipping Columns" width="640" height="108" /></a><p class="wp-caption-text">Clipping Columns</p></div>
<h2><span style="font-weight: normal;">Understanding Aesthetics of Motion</span></h2>
<p><span style="font-weight: normal;">Using all these apps I began to get new critical thinking that I could apply to the foundations I mentioned above. Whether it is the original flick-scroll that Apple designed with the launch of the iPhone, or the spring-refresh, or the swipe-dismiss there is a commonality for how the gestures are engaged. The movements share a lack of control and/or precision. This has as much to do with the size of the targets as it does with the complete lack of target for ending. These free-ending gestures work because of their ease, but also because of the extended range of motion creates an aesthetic quality to them that more precise and controlled gestures do not. In turn they add to the overall aesthetic quality of the interface around feelings of play &amp; personal satisfaction.</span></p>
<p>I&#8217;ve also noticed some other key areas when using my iPad that have, compared to my iPhone, triggered similar emotional responses due to gestural differences. In general, scale of motion adds a lot aesthetically. As in dancing, extensions are just more beautiful.</p>
<p>The area that I find really different is in typing and general tapping. When I compare the typing experience on my iPhone to my iPad I notice the difference greatly. To really feel it open an iPhone app that requires data entry. Normally though we type on an iPhone with the single finger peck or by thumbing. I&#8217;m a big thumber. Even when in the correct form factor (and I&#8217;m pretty good at thumbing on my iPhone) the feeling of being more constrained &amp; swaddled is there when compared to the openness &amp; bounce you feel when typing on an iPad.</p>
<p>I&#8217;ve equated this feeling to the scene in Star Trek Generations when Data, with his new emotion chip, is singing while tapping away on his glass console screen. I&#8217;ve felt this so strongly that I’ve even been searching for a Star Trek console wall paper. I&#8217;m also constantly singing Data&#8217;s refrain when using my iPad, &#8220;Life forms. Tiny little life forms. Where are you? Da da da Da!&#8221; (Star Trek: Generations. 1994).</p>
<div style="width: 640px; height: 390px; margin: 0 auto;"><object width="640" height="390" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/dWBmaKk32fE?fs=1&amp;hl=en_US" /><param name="allowfullscreen" value="true" /><embed width="640" height="390" type="application/x-shockwave-flash" src="http://www.youtube.com/v/dWBmaKk32fE?fs=1&amp;hl=en_US" allowFullScreen="true" allowscriptaccess="always" allowfullscreen="true" /></object></div>
<p>The added scale of space allows one to almost feel like they are dancing with their two hands on a glass dance floor.</p>
<p>When looking at any system of evaluation it isn’t only important to look at what works, but also understand what doesn’t work. My example here also comes from the iPad Twitter app. It has 2 other gestures that are applied to new outcomes. Both are related to revealing something in a new context without any visual cues that it is there. Like the swipe to reveal actions in the iPhone app.</p>
<p>The first of these is is two-finger gesture. With two fingers target a touch holding it down and swipe down. If there is a conversation related to the targeted tweet then it will reveal itself.</p>
<div id="attachment_10565" class="wp-caption aligncenter" style="width: 650px"><a href="http://johnnyholland.org/wp-content/uploads/ipad-replies1.jpg"><img class="size-full wp-image-10565" title="iPad Twitter Replies—two finger swipe" src="http://johnnyholland.org/wp-content/uploads/ipad-replies1.jpg" alt="iPad Twitter Replies—two finger swipe" width="640" height="276" /></a><p class="wp-caption-text">iPad Twitter Replies—two finger swipe</p></div>
<p>The other one also requires two fingers. It uses the the reverse pinch to reveal the detailed view of the tweet.</p>
<div id="attachment_10566" class="wp-caption aligncenter" style="width: 650px"><a href="http://johnnyholland.org/wp-content/uploads/pinch.jpg"><img class="size-full wp-image-10566" title="Pinch Open" src="http://johnnyholland.org/wp-content/uploads/pinch.jpg" alt="Pinch Open" width="640" height="224" /></a><p class="wp-caption-text">Pinch Open</p></div>
<p>Without going into why we need these gestures (I kinda feel they are “easter eggs” more than really usable functionality), they both have properties that lead to their lower performance or evaluation.</p>
<p>First, because they are two-fingered gestures it is less likely that a person will discover these behaviors accidentally. People do not use two fingers regularly accept in specific contexts that are well understood like zooming. For example, I was recently struggling to figure out how to scroll an inset frame without scrolling the surrounding container. It never occurred to me that I should use 2 fingers to scroll. When hearing that, I thought, “that’s messed up” and I tested it on 5 avid iPad users who all failed to figure it out as well and all complained that they were having the same problem.</p>
<p>The second problem is more about the reverse pinch activity then it is about the downward two-fingered swipe. With the reverse pinch the amount of fidelity required to do it is just too high. While the ending point is unimportant there is something about how to start the gesture that might require more precision and higher resolution than the system can handle consistently. For the two-finger swipe down to reveal the conversation, the difficult part is that you need to remember to keep your fingers on the glass or it will disappear. This leads to the constant repetition of the task lowering its utility. It is just easier to tap once on it and have it reveal itself that way.</p>
<h2><span style="font-weight: normal;">How to Design for Motion</span></h2>
<p>So what does all this mean for me?</p>
<p>First it means there is a huge opportunity. Loren made a huge name for himself as an accomplished iPhone designer/developer by innovating a new gestural paradigm. It catapulted his app into the limelight and eventually got him &#8220;<a href="http://blog.twitter.com/2010/04/twitter-for-iphone.html">acquired</a>,&#8221; in this case by Twitter itself.</p>
<p>I don&#8217;t know what methods Loren used to come up with his spring-refresh design, but I can look at the work of <a href="http://www.kickerstudio.com/">Kicker Studio</a> and their c<a href="http://www.kickerstudio.com/blog/2009/03/case-study-gestural-entertainment-center-for-canesta/">ase study they published for the gestural TV remote control they designed</a>. What is clear is that sketching &amp; prototyping now requires a new methodology. We all need to learn to become solid actors if we are going to design interfaces that require the user to move in new ways outside of buttons, pointing devices &amp; keyboards. When it comes to mobile devices and touch screens especially, we need to all become actors.</p>
<p>I&#8217;m reminded of the case study that Bill Buxton wrote about in his amazing book <em><a href="http://www.amazon.com/Sketching-User-Experiences-Interactive-Technologies/dp/0123740371">Sketching User Experiences</a></em> on how the Palm Pilot was designed. They used a block of wood &amp; a cut off pencil and played with various forms &amp; felt how various gestures would play out. Binging our prototypes into the physical is going to be key as we design for mobile gestural platforms. We are going to have to act out scenarios of use, dance out gestures to complete new choreographies. We need to see gestures both as dancer and as audience.</p>
<p>One of the reasons these gestures work is also related to the visual cues for all the states of availability, direction, activity and completion. Rehearsing the gestures in front of others will cause people to ask questions like how do you know it will do something? And how do you know it when it is complete?</p>
<p>Gestural interface design is still very new. We can deeply appreciate the work of Apple , Microsoft, and Google in their leadership efforts but there are still lots of opportunities in this area to innovate even more. Having an understanding of all four of the foundational elements of interaction design will help you design more solid interfaces &amp; interactions for better overall experiences.</p>
<h2>Concluding Thoughts</h2>
<p>I am cautious about adding this as a foundation of interaction design because it feels like it might fit within the context of “interactive design” or “interface design”. For now though I believe that there is a behavioral property that moves beyond the point of interaction itself towards embedding behaviors within human beings that become embedded culturally. The motions themselves then become akin to affordances of there own even though they do not connect to any visually perceived markers. They just become expected on one hand and they imbue an emotional aesthetic all their own.</p>
<p><em>References:</em><br />
<a href="http://www.boxesandarrows.com/view/foundations-of">Foundations of Interaction Design</a> article on Boxes &amp; Arrows, and <a href="http://www.boxesandarrows.com/view/podcast-with-david">related podcast</a>,<br />
<a href="http://johnnyholland.org/2009/03/09/foundations-of-interaction-design-interaction-09-reprise/">Revised article </a>on Johnny Holland<br />
Interaction09 Motion and Movement <a href="http://vimeo.com/groups/8942/videos/4500315">video</a> and <a href="http://www.slideshare.net/dmalouf/interaction09-foundations-of-interaction-design">slides</a></p>
]]></content:encoded>
			<wfw:commentRss>http://johnnyholland.org/2011/03/motion-and-the-clay-of-interaction-design/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Mac&#8217;s Petit Inventions: Making it Human</title>
		<link>http://johnnyholland.org/2009/09/personification/</link>
		<comments>http://johnnyholland.org/2009/09/personification/#comments</comments>
		<pubDate>Wed, 23 Sep 2009 13:38:05 +0000</pubDate>
		<dc:creator>Mac Funamizu</dc:creator>
				<category><![CDATA[Observed]]></category>
		<category><![CDATA[browser]]></category>
		<category><![CDATA[dock]]></category>
		<category><![CDATA[iphone]]></category>
		<category><![CDATA[personification]]></category>

		<guid isPermaLink="false">http://johnnyholland.org/?p=3886</guid>
		<description><![CDATA[<img width="220" height="160" src="http://johnnyholland.org/wp-content/uploads/2011/12/mac-window.jpg" class="attachment-index-categories wp-post-image" alt="mac-window" title="mac-window" />When I design new gadgets I  try to think of a human behavior that can be associated with it. Then [...]]]></description>
			<content:encoded><![CDATA[<img width="220" height="160" src="http://johnnyholland.org/wp-content/uploads/2011/12/mac-window.jpg" class="attachment-index-categories wp-post-image" alt="mac-window" title="mac-window" /><p>When I design new gadgets I  try to think of a human behavior that can be associated with it. Then I make up a personified character based on that movement. The character naturally decides what kind of gadget it will become, how it should be formed and what other functions it should have.<span id="more-3886"></span></p>
<h2>Page visitors</h2>
<p>I want to know how many other people are browsing the website I&#8217;m watching. If there are a lot of people visiting the page, the article must be worth reading. But it is very boring checking out statistics or numbers of replies.</p>
<p>&#8220;Visit the page&#8221; sounds like a person physically comes to the website from somewhere else, so that&#8217;s what I wanted to visualize. If there are actual human figures we can see around the web browser (on the desktop), we can instantly see how popular the site is at least at that moment. When people walk away very fast it isn&#8217;t that interesting, if they stay for some time&#8230; it must be worth my time.</p>
<img class="alignnone size-full wp-image-3894" title="crowd_browse1" src="http://johnnyholland.org/wp-content/uploads/crowd_browse1.jpg" alt="" width="500" height="500" />
<img class="alignnone size-full wp-image-3895" title="crowd_browse2" src="http://johnnyholland.org/wp-content/uploads/crowd_browse2.jpg" alt="" width="500" height="500" />
<h2>iPhone relaxation</h2>
<p>I have an iPhone and always have it with me: at work and at home. When at work, I change the setting to the silent (vibration) mode in the office, but when it vibrates on my desk, it makes even louder noise than a beep. But it won&#8217;t rattle on something soft such as a sofa. An iPhone slacking off on a sofa? But (human) lazybones must love hammocks much better than sofas&#8230;.</p>
<p>So I thought a hammock style would be more fun. I also added a parasol, which would be requested by such an idle guy, that works as a solar power battery charger. You open and flip the parasol in the sun to get electricity and close and fix it on the hammock to charge your iPhone.</p>
<img class="alignnone size-full wp-image-3888" title="hammock1_image" src="http://johnnyholland.org/wp-content/uploads/hammock1_image.png" alt="" width="500" height="313" />
<img class="alignnone size-full wp-image-3889" title="hammock2_image2" src="http://johnnyholland.org/wp-content/uploads/hammock2_image2.png" alt="" width="500" height="313" />
<img class="alignnone size-full wp-image-3890" title="hammock3_imagec" src="http://johnnyholland.org/wp-content/uploads/hammock3_imagec.png" alt="" width="500" height="500" />
<img class="alignnone size-full wp-image-3891" title="hammock3b_image" src="http://johnnyholland.org/wp-content/uploads/hammock3b_image.png" alt="" width="500" height="500" />
<img class="alignnone size-medium wp-image-3892" title="hammock4_image" src="http://johnnyholland.org/wp-content/uploads/hammock4_image-300x187.png" alt="" width="300" height="187" />
<img class="alignnone size-full wp-image-3893" title="hammock5_image" src="http://johnnyholland.org/wp-content/uploads/hammock5_image.png" alt="" width="500" height="500" />
]]></content:encoded>
			<wfw:commentRss>http://johnnyholland.org/2009/09/personification/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>The iPhone is not easy to use: a new direction for UX Design</title>
		<link>http://johnnyholland.org/2009/08/the-iphone-is-not-easy-to-use-a-peek-into-the-future-of-experience-design/</link>
		<comments>http://johnnyholland.org/2009/08/the-iphone-is-not-easy-to-use-a-peek-into-the-future-of-experience-design/#comments</comments>
		<pubDate>Mon, 17 Aug 2009 13:57:45 +0000</pubDate>
		<dc:creator>Fred Beecher</dc:creator>
				<category><![CDATA[Digital UX]]></category>
		<category><![CDATA[Featured]]></category>
		<category><![CDATA[Psychology]]></category>
		<category><![CDATA[Reviews]]></category>
		<category><![CDATA[game design]]></category>
		<category><![CDATA[gestural user interfaces]]></category>
		<category><![CDATA[interaction design]]></category>
		<category><![CDATA[iphone]]></category>
		<category><![CDATA[play]]></category>
		<category><![CDATA[user experience design]]></category>

		<guid isPermaLink="false">http://johnnyholland.org/?p=2879</guid>
		<description><![CDATA[Playfulness over usability.]]></description>
			<content:encoded><![CDATA[<img width="416" height="160" src="http://johnnyholland.org/wp-content/uploads/2009/08/uxiphone.png" class="attachment-index-categories wp-post-image" alt="uxiphone" title="uxiphone" /><p><img class="alignnone size-full wp-image-3311" title="uxiphone" src="http://johnnyholland.org/wp-content/uploads/uxiphone.png" alt="" width="416" height="160" /><br />
I live and breathe user experience design, and yet it took me two years to get myself the device referenced by almost every single presentation about user experience since 2007… Apple’s iPhone. My reasons were very specific and perhaps boring, but what <em>is</em> interesting is the perspective this wait has afforded me. Since it was released, the iPhone has grabbed an astonishing share of mobile Web traffic, been regarded as a “game-changer” in both the design and business worlds, and has even been referred to as the “Jesus Phone.” Now that I’ve owned one for two weeks I’ve developed a different perspective. The iPhone is surprisingly difficult to use, but it sure is fun! And <em>that</em> is why it’s a game-changer.<span id="more-2879"></span></p>
<h2><strong>A Lack of Affordances Leads to Low Learnability</strong></h2>
<p>Learnability contributes greatly to the usability of a system. If a system is designed for a specific context, it should be easy for people in that context to approach it, assess its controls, and manipulate it. Granted, <a href="http://www.codinghorror.com/blog/archives/000376.html" target="_blank">learnability isn’t everything</a>, but when it’s tough to figure out how to do things you’re on the express bus to a frustrating experience. There are two things about the iPhone that contribute to its difficult learnability. It lacks physical affordances and suffers from inconsistent visual cues.</p>
<p>Gestural user interfaces (UIs) are the 21st century’s version of the command line interface… they’re really fast and easy provided you’ve memorized a bunch of commands. This is fine for those who are accustomed or inclined to explore a device, but many people just want to check their calendar, write an email, or make a grocery list. These people will react to what they see on the screen rather than explore possibilities, which leaves them out of luck with a gestural UI.</p>
<p>The iPhone’s featureless touchscreen is Don Norman’s proverbial <a href="http://www.jnd.org/dn.mss/when_bugs_becom.html" target="_blank">glass door</a>. Apple has done a stunning job of making things that are pressable <em>look</em> like they’re pressable, but that will never be as effective as an actual button. With physical, simple buttons we can rely on motor memory to manipulate a device without paying attention. But the iPhone’s buttons are highly contextual, which forces us to pay attention to the device to remain aware of its context even after extensive use of the system. The “problem” is that the iPhone is a convergent device, a device with multiple functions. With 50,000 apps, you might even say infinite functions. The <em>only</em> way to build a device that serves 50,000 different purposes is to make it almost entirely free of physical affordances. Of course, the big value proposition of the iPhone is that it is the first mobile device to achieve an <em>effective</em> convergence.</p>
<p>Pressing a button is an action that a gestural UI can communicate visually, but there are a number of other actions that have no visual cue. Direct manipulation gestures such as tap (on something other than a button), double-tap, tap-and-hold, swipe, and pinch/zoom are far more difficult to communicate. These rely on user experimentation and memory.</p>
<p>Even worse are the modal gestures such as shake to undo and swipe to delete. If users discover them at all it’s usually by accident. They don’t map to anything (outside of an Etch-a-Sketch) and there are no clues to indicate that they’re available. Being mentioned in a WWDC keynote does not count as a clue.</p>
<div id="attachment_3304" class="wp-caption aligncenter" style="width: 210px"><a href="http://johnnyholland.org/wp-content/uploads/undo.jpg"><img class="size-medium wp-image-3304" title="Undo Error" src="http://johnnyholland.org/wp-content/uploads/undo-200x300.jpg" alt="My phone displayed this message several times while I was simply using it. The message is without context, and what’s worse reveals an important feature without showing how to access it on purpose." width="200" height="300" /></a><p class="wp-caption-text">My phone displayed this message several times while I was simply using it. The message is without context, and what’s worse reveals an important feature without showing how to access it on purpose.</p></div>
<div id="attachment_3305" class="wp-caption aligncenter" style="width: 210px"><a href="http://johnnyholland.org/wp-content/uploads/delete.jpg"><img class="size-medium wp-image-3305" title="Delete Error" src="http://johnnyholland.org/wp-content/uploads/delete-200x300.jpg" alt="The red Delete button also showed up unexpectedly. I had no idea how I made it appear. Its appearance made me feel uneasy because I didn’t want to delete anything." width="200" height="300" /></a><p class="wp-caption-text">The red Delete button also showed up unexpectedly. I had no idea how I made it appear. Its appearance made me feel uneasy because I didn’t want to delete anything.</p></div>
<h2><strong>Inconsistent Visual Cues Don’t Help Either</strong></h2>
<p><strong></strong>Apple has gone to great lengths to make the UI consistent, even publishing the iPhone Human Interface Guidelines, but some inconsistencies remain. Application buttons can have labels or not. Some applications, like TweetDeck, AP Mobile, and others, obligingly label their buttons:</p>
<div id="attachment_3306" class="wp-caption aligncenter" style="width: 210px"><a href="http://johnnyholland.org/wp-content/uploads/tweetdeck.png"><img class="size-medium wp-image-3306" title="Labeled Buttons" src="http://johnnyholland.org/wp-content/uploads/tweetdeck-200x300.png" alt="An example of an iPhone application with button labels." width="200" height="300" /></a><p class="wp-caption-text">An example of an iPhone application with button labels.</p></div>
<p>Others, mostly Apple applications, do not:</p>
<div id="attachment_3307" class="wp-caption aligncenter" style="width: 210px"><a href="http://johnnyholland.org/wp-content/uploads/mail.png"><img class="size-medium wp-image-3307" title="Unlabeled Buttons" src="http://johnnyholland.org/wp-content/uploads/mail-200x300.png" alt="The iPhone Mail app's buttons have no labels and don't clearly communicate their function." width="200" height="300" /></a><p class="wp-caption-text">The iPhone Mail app</p></div>
<p>Does the circular arrow mean reload like in Safari? Or reply? If it means reply, what does the other arrow mean? Labeled buttons communicate their functionality much more clearly. (The circular arrow <em>does</em> mean reload, but makes no sense in the context of a message. The swoosh arrow does mean reply.)</p>
<p>The landscape keyboard, despite being a basic device function, isn’t supported by all applications. When it <em>is</em> supported, there are no visual or other cues that indicate it. Not only is it difficult to learn when the landscape keyboard is available, cues as to its availability are stored in only one place, user memory.</p>
<p>Even the iPhone’s implementation of its standard gestural interactions is inconsistent. This is most frustrating on simple interactions like tap. There are obvious tap targets like buttons and non-obvious targets like received calls, tweets, emails, etc. In some cases, a tap on a non-obvious target means “open” or “get detailed info.” But in others it means “take action.” The worst example of this is the Recent Calls list. I can’t tell you how many times I’ve accidentally called someone when what I wanted to do was get more details about the call. Yes there is an arrow button, but it’s on the right side away from my focus. Other applications (like Mail) have trained me to tap an object to get a detailed view of it, so my natural tendency is to tap the contact name or number.</p>
<div id="attachment_3325" class="wp-caption aligncenter" style="width: 210px"><a href="http://johnnyholland.org/wp-content/uploads/recents.png"><img class="size-medium wp-image-3325" title="Recents List" src="http://johnnyholland.org/wp-content/uploads/recents-200x300.png" alt="Clicking a contact name makes a call instead of revealing details about the call." width="200" height="300" /></a><p class="wp-caption-text">Clicking a contact name makes a call instead of revealing details about the call.</p></div>
<p>When applications do not implement buttons, device functions, and non-obvious gestural interactions consistently, this increases the learnability problem. Not only do users have to learn and memorize what the device does, they have to learn how <em>each application</em> makes use of those functions! This is much less of an issue in point-and-click interfaces, which require fewer physical interactions and present most options on the screen for users to react to.</p>
<p>If the iPhone is so difficult to use, why is it still regarded as a game changer by both the design and business worlds? Because it does several important things right, but most of all because it’s <em>fun.</em></p>
<p><strong>Fun is the New Usable</strong></p>
<p>As a user experience designer, I thought my job was to make things not suck. Until recently. As technology has evolved, human behavior has evolved along with it. Since behavior is the basis of user experience design, my job has evolved as well. Now, my job is to make things people love. At the 2009 IA Summit, <a title="Karl Fast bio" href="http://www.slis.kent.edu/content/view/245/140/" target="_blank">Karl Fast </a>articulated the value proposition of user experience design with sparkling clarity. “Engineers make things,” he said, “we make people <em>love them</em>.” And then he held up an iPhone as an example.</p>
<p>This is a <em>crucial</em> change, the importance of which cannot be overstated.</p>
<p><strong>Play</strong></p>
<p>Any new system or gadget has a learning curve, but where the iPhone differs is that the nature of traversing that curve is more fun than frustrating. You swipe and pinch and tap and shake your way to familiarity instead of pressing awkward buttons and navigating byzantine menu structures. You learn the iPhone by playing with it, which <em>encourages</em> interaction because <a title="National Institute for Play" href="http://nifplay.org/states_play.html" target="_blank">humans are built to play</a>. Even in a system like this, we could quickly be dissuaded from doing so if wrong actions had negative consequences, such as getting online or sending messages accidentally. The iPhone is mostly devoid of these sorts of consequences. The only time I’ve run into this is repeatedly calling people I didn’t want to call while viewing my Recent Calls list.</p>
<p>The iPhone goes further than encouraging play; it <em>rewards</em> play. If you explore the phone’s applications, you will often find them anticipating your needs. When viewing a video you’ve shot and press the action button, you can email it or upload it to YouTube. If you try to email it and the video is too large, it will ask if you want to send a smaller clip from the video instead of preventing you from sending it. The iPhone then presents you with the UI to trim a clip and continue with your message. The original video remains untouched. Simple, sensible, satisfying.</p>
<p><strong>Effective &amp; Delightful Convergence</strong></p>
<p>On the day I got my phone, someone sent me an email that contained a physical address. The phone turned it into a link. I clicked it, got a map, and the phone asked me if I wanted directions. From my current location. I giggled excitedly.</p>
<p>The delight induced by how well the iPhone’s applications interact with each other is another reason for its success. This is the point at which usability and playfulness intersect. The experience of having needs not just met but anticipated creates the joy that encourages users to continue exploring. This intelligent interaction between applications is absolutely key to making a convergent device <em>delightfully</em> convergent.</p>
<p>But you can’t have a delightfully convergent device that isn’t <em>effectively</em> convergent. What converges are contexts of use. The interactions between applications that I described above represent relatively minor, detailed contextual shifts. These small shifts result in delight <em>only</em> if the device handles major shifts effectively as well.</p>
<p>Before I had an iPhone, I would switch major contexts by switching devices. If I got a call while listening to my iPod I’d stop it, put it down, and pick up my phone. This was intuitive to the point of being instinctual. But now my iPhone must handle that switch of context for me. If it failed to do that in a sensible way, I would think the iPhone sucks. An effectively convergent device is one that, like the iPhone, can handle major shifts in context in a way that supports the user’s transition between those contexts.</p>
<p><strong>Implications for User Experience Designers</strong></p>
<p>iPhones fly off the shelves despite being difficult to learn.</p>
<p>Why?</p>
<p>Because they let you do what it says you can do and they make you happy while you do it. This proves that my job as a user experience designer has evolved rather than simply changed. While it’s still my responsibility to prevent things from sucking, now it’s also my responsibility to add a little playfulness. As Kim Goodwin said in her <a title="Video of Kim Goodwin's Interaction09 Keynote" href="http://library.ixda.org/node/9" target="_blank">Interaction09 keynote</a>, we have a limited window in which to prove how valuable design can be to business. There are three ways in which user experience designers can learn to incorporate play into the systems they design.</p>
<p><strong>Experience and Research Play</strong></p>
<p>You can’t build playfulness into your designs without experiencing playfulness yourself. Play games and pay attention to what makes them fun. For example, the only rule in the card game Fluxx is that the rules constantly change. Completing a level in Peggle gives you the “Ode to Joy,” rainbows, unicorns, and fireworks! Use these elements as inspiration for working playfulness into your designs. You might not be able to play the “Ode to Joy” when people complete a purchase, but can you delight them in another way?</p>
<p>Play is a behavior. As a user experience designer, you should explore research about play and playfulness just as you’d explore research about gestalt perception or information seeking. <a title="The National Institute for Play" href="http://www.nifplay.org/" target="_blank">The National Institute for Play</a> is a good place to start. The ACM digital library has some <a title="Papers on playfulness in computing" href="http://portal.acm.org/citation.cfm?id=264704" target="_blank">resources on playfulness and computers</a>. Questia has <a title="Research on play" href="http://www.questia.com/library/sociology-and-anthropology/leisure-and-recreation/psychology-of-play.jsp" target="_blank">resources on play in general</a>. (Both ACM and Questia are paid services.)</p>
<p><strong>Become Familiar With Game Design</strong></p>
<p>Game designers put a lot of thought into how to design a fun experience. We can learn a lot from the principles they use to make this happen. Much of game design seems to revolve around creating, sustaining, and developing a narrative. This aspect is less important to user experience designers than game mechanics and the design of casual games.</p>
<p>A game mechanic is anything that guides the play of a game. Most mechanics take the form of either rules or possible actions. In cribbage, players must discard two cards to the crib (rule) and they keep track of their progress by placing pegs on a board (possible action). Game mechanics translate into the user experience design world as interaction patterns. Understanding how game designers make games fun by designing pleasing game mechanics will help you design pleasing interactions. The Critical Gaming Network’s Game Design 101 has <a title="A discussion of game mechanics of use to UX designers" href="http://critical-gaming.squarespace.com/blog/2008/10/10/dw-prerequisites.html" target="_blank">a great discussion of game mechanics</a>.</p>
<p>Casual games are those that are meant to be picked up and played simply for the joy of playing them. They are always enjoyable, often compelling, but not engrossing. Peggle and Paper Toss are canonical examples of casual games. Casual game design is important to user experience designers because they place special emphasis on learnability and delightful interactions. When we design systems that are fun, delightfulness should be a side effect of interacting with them even though it is not the goal. People still have tasks to complete and we can’t let fun get in the way of that. For more on casual games, read the <a title="Game design blog of use to UX designers" href="http://www.casualgamedesign.com/" target="_blank">Casual Game Design</a> blog as well as <a title="Research on what makes games compelling" href="http://www.xeodesign.com/whyweplaygames.html" target="_blank">Nicole Lazarro’s “Why We Play Games.”</a></p>
<p><strong>Re-Learn the Art of the Tutorial</strong></p>
<p>My experience with the iPhone has led me to think that maybe fun doesn’t need to be intuitive. Maybe fun is so valuable that people will make the effort to learn a system built on fun interaction patterns. If I had the opportunity to change one thing about the iPhone, I would add a tutorial. By tutorial I <em>don’t</em> mean a boring list of stuff you can do with it. I’m specifically thinking of some sort of mini-game. It would introduce users to all the different gestures they can do and the contexts in which they’re appropriate, challenging them to choose and perform the right one.</p>
<p>Tutorials in the casual games I’ve played take one of two forms. The first is much like the mini-game I described above. This type of tutorial is composed of levels in which the goal is to learn, explore, and practice one or more game mechanics. The player then begins the “real” game. The iPhone games Isotope and TaxiBall contain good examples of this type of tutorial.</p>
<p>The second is the in-game tutorial. In games with this type of tutorial you simply start playing. Early on the game will put you in simple situations that require you to use one or more of the game’s mechanics. The game will then display a short description or demonstration of the mechanic you need to use to get over the current hurdle. The frequency with which the game shows these descriptions decreases over time. The iPhone games Spore Origins and Rolando contain good examples of this type of tutorial.</p>
<p>Both types of tutorials have their advantages and drawbacks. Mini-game tutorials are very focused. They allow users to learn everything at once. They keep out of the player’s way as they play the game. But what mini-game tutorials lack is context. In a game, context is less important because the world is rigidly defined. But in real-world systems, context is key to good user experience design. In-game tutorials are all about context, but they interrupt the flow of play. This is less of an issue in a game than it is in real-world systems. In a game, the frequency and temporal location of tutorial elements can be highly controlled. They appear when players expect them to appear, when beginning a game. The contextuality required to make these work in the real world means that they could interrupt important tasks and cause frustration.</p>
<p>Casual Game Design has <a title="A collection of articles on how to design game tutorials" href="http://www.casualgamedesign.com/?cat=11" target="_blank">several good articles on game tutorials</a> if you are interested.</p>
<p><strong>The Way Forward</strong></p>
<p>I strongly believe that play is an integral part of the future of user experience design, and I am looking forward to making that future happen. To do that, I’m going to take the words of Mary Poppins to heart:</p>
<blockquote><p>For every job that must be done, there is an element of fun. You find the fun and SNAP! The job’s a game!</p></blockquote>
<p>I dub this the Mary Poppins Principle, and I challenge you to use it to find the fun in the jobs that your users must do. But for now, go have an ice cream cone. You deserve a treat for reading this whole thing.</p>
]]></content:encoded>
			<wfw:commentRss>http://johnnyholland.org/2009/08/the-iphone-is-not-easy-to-use-a-peek-into-the-future-of-experience-design/feed/</wfw:commentRss>
		<slash:comments>88</slash:comments>
		</item>
		<item>
		<title>Mac&#8217;s petit inventions: merging concepts</title>
		<link>http://johnnyholland.org/2009/04/weird-fusion/</link>
		<comments>http://johnnyholland.org/2009/04/weird-fusion/#comments</comments>
		<pubDate>Wed, 01 Apr 2009 19:20:31 +0000</pubDate>
		<dc:creator>Mac Funamizu</dc:creator>
				<category><![CDATA[Observed]]></category>
		<category><![CDATA[concept]]></category>
		<category><![CDATA[invention]]></category>
		<category><![CDATA[iphone]]></category>

		<guid isPermaLink="false">http://johnnyholland.org/?p=1593</guid>
		<description><![CDATA[<img width="220" height="160" src="http://johnnyholland.org/wp-content/uploads/2011/12/mac-merging.jpg" class="attachment-index-categories wp-post-image" alt="mac-merging" title="mac-merging" />I like merging completely different things into one, stealing a fun aspect of one item and adding it to another. [...]]]></description>
			<content:encoded><![CDATA[<img width="220" height="160" src="http://johnnyholland.org/wp-content/uploads/2011/12/mac-merging.jpg" class="attachment-index-categories wp-post-image" alt="mac-merging" title="mac-merging" /><p>I like merging completely different things into one, stealing a fun aspect of one item and adding it to another. Or even better, I love finding a solution to a problem from something that seems totally different from it. Thinking seriously of how to solve a problem (sometimes) leads me to the most fun moment of concepting. That&#8217;s why I can&#8217;t stop creating weird things, no matter what others say.<span id="more-1593"></span></p>
<h2>iAcqua</h2>
<p>Anyway, this is a fountain + iPhone speaker stand + projector kind of fusion. Place your iPhone in the doc and use it as a faucet to run photos, songs and music as water. You can have fun with them on this transparent touch screen, but to have more fun, tilt the stand to spill the images on the floor (or just turn up the faucet). The projected images on the floor look as if they were spilled from the dish.</p>
<img class="alignnone" src="http://petitinvention.files.wordpress.com/2009/03/iacqua1.jpg" alt="" width="500" height="500" />
<p><img class="alignnone" src="http://petitinvention.files.wordpress.com/2009/03/iacqua2.jpg" alt="" width="500" height="500" /><br />
<img class="alignnone" src="http://petitinvention.files.wordpress.com/2009/03/iacqua3.jpg" alt="" width="500" height="500" /><br />
<img class="alignnone" src="http://petitinvention.files.wordpress.com/2009/03/iacqua4.jpg" alt="" width="500" height="500" /></p>
<p>When you play music, you can see the visualizer working. Spill the visualizer on the floor and you see &#8220;full-screen&#8221; projected visualizer!<br />
<img class="alignnone" src="http://petitinvention.files.wordpress.com/2009/03/iacqua5.jpg" alt="" width="500" height="500" /><br />
<img class="alignnone" src="http://petitinvention.files.wordpress.com/2009/03/iacqua6.jpg" alt="" width="500" height="500" /><a href="http://petitinvention.wordpress.com"><br />
</a></p>
<h2>PMS Toaster</h2>
<p>Another crazy combination is this toaster. I thought there should be a toaster like this: no matter how long/short it takes to toast a slice of bread, I don&#8217;t care&#8230; just toast it until it becomes my favorite color.</p>
<img class="alignnone" src="http://petitinvention.files.wordpress.com/2008/05/toaster1_petitinvention.jpg" alt="" width="500" height="500" />
<img class="alignnone" src="http://petitinvention.files.wordpress.com/2008/05/toaster2_petitinvention2.jpg" alt="" width="500" height="500" />
<p>You just choose your favorite color first before toasting. Then it automatically stops toasting when the bread becomes the specified color.</p>
]]></content:encoded>
			<wfw:commentRss>http://johnnyholland.org/2009/04/weird-fusion/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>A Truly Haptic Touch Screen</title>
		<link>http://johnnyholland.org/2008/12/a-truly-haptic-touch-screen/</link>
		<comments>http://johnnyholland.org/2008/12/a-truly-haptic-touch-screen/#comments</comments>
		<pubDate>Fri, 05 Dec 2008 07:14:18 +0000</pubDate>
		<dc:creator>David Farkas</dc:creator>
				<category><![CDATA[Observed]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[haptic]]></category>
		<category><![CDATA[iphone]]></category>

		<guid isPermaLink="false">http://johnnyholland.org/?p=594</guid>
		<description><![CDATA[<img width="220" height="160" src="http://johnnyholland.org/wp-content/uploads/2011/12/haptic.jpg" class="attachment-index-categories wp-post-image" alt="haptic" title="haptic" />Since its inception, the iPhone has been praised for its clean interface and responsive touch screen. Usability gurus have both [...]]]></description>
			<content:encoded><![CDATA[<img width="220" height="160" src="http://johnnyholland.org/wp-content/uploads/2011/12/haptic.jpg" class="attachment-index-categories wp-post-image" alt="haptic" title="haptic" /><p><img class="size-full wp-image-595 alignnone" src="http://johnnyholland.org/wp-content/uploads/01_top_image1.jpg" alt="" width="416" height="160" /><br />
Since its inception, the iPhone has been praised for its clean interface and responsive touch screen. Usability gurus have both praised its interface and scoffed at its touch screen. Say what you want about the benefits of a touch screen, there is nothing that matches the physical feedback of a real button and no indications or assistance for those with disabilities. That could not be more true for the visually impaired, where an all touch screen interface is as useful as a handle on the spout side of a teapot. Until now.<span id="more-594"></span></p>
<p>Product designer <a href="http://critica.us/">Bruno Fosi</a> has offered a solution to this dilemma: a physical skin to cover the iPhone’s touch screen to allow accessibility to the visually impaired. <a href="http://www.core77.com/blog/object_culture/iphone_case_enables_the_blind_to_access_touchscreens_11982.asp">Described on the Core77 site</a>, the product is said to be paired with text to speech and could open a world of options to a new user group.</p>
<a href="http://johnnyholland.org/wp-content/uploads/01_case1.jpg"><img class="size-full wp-image-597 alignnone" src="http://johnnyholland.org/wp-content/uploads/01_case1.jpg" alt="" width="468" height="476" /></a>
<p>I am curious how this system actually works though. The iPhone is notorious for moving buttons from the center of the screen to the top, the left to the right, not to mention the fact the keyboard has three different modes. So how is one to navigate a touch screen device with a dynamic interface if the mapping of the buttons keeps changing? Sure, the simple solution is the device notifies them when the screen has changed and the user flips to a new cover, with the alphabet or symbols on it. Still, I want to see a touch-screen device that does this for the user.</p>
<p>Braille printers exist to provide hard copies of text to the visually impaired. Research is being performed on Braille computer monitors that can refresh at a constant rate as the user interacts with the system. So what is the proposal here? Merge the two. Set up an OLED display with a Braille monitor so that as the user navigates the screen the keyboard changes quite literally beneath their fingertips. This would truly be haptics at its finest. It would not be limited to assisting the visually impaired either. Think of the applications in games and education. Rubbing a finger along an image of gravel could provide rough feedback, or maybe when Mario falls into the pit of spike a sharp poke is given to the user to immerse them further into the world.</p>
<p><a href="http://www.core77.com/blog/object_culture/iphone_case_enables_the_blind_to_access_touchscreens_11982.asp">As mentioned in the Core77 article</a>, this is just a prototype and it will be some time until this reaches the market on any level. It is interesting to see how designers are attempting to broaden the accessibility of touch-screens and the next five years of haptic technology will open new doors.</p>
]]></content:encoded>
			<wfw:commentRss>http://johnnyholland.org/2008/12/a-truly-haptic-touch-screen/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Search by voice and location</title>
		<link>http://johnnyholland.org/2008/11/search-by-voice-and-location/</link>
		<comments>http://johnnyholland.org/2008/11/search-by-voice-and-location/#comments</comments>
		<pubDate>Tue, 18 Nov 2008 20:58:20 +0000</pubDate>
		<dc:creator>Jeroen van Geel</dc:creator>
				<category><![CDATA[Digital UX]]></category>
		<category><![CDATA[application]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[iphone]]></category>
		<category><![CDATA[voice]]></category>

		<guid isPermaLink="false">http://johnnyholland.org/?p=488</guid>
		<description><![CDATA[<img width="220" height="160" src="http://johnnyholland.org/wp-content/uploads/2011/12/voice.jpg" class="attachment-index-categories wp-post-image" alt="voice" title="voice" />Yesterday Google launched their new Google Mobile App for the iPhone. The biggest innovation is that it allows people to [...]]]></description>
			<content:encoded><![CDATA[<img width="220" height="160" src="http://johnnyholland.org/wp-content/uploads/2011/12/voice.jpg" class="attachment-index-categories wp-post-image" alt="voice" title="voice" /><p><img class="alignnone size-full wp-image-491" title="googlemobile" src="http://johnnyholland.org/wp-content/uploads/googlemobile.jpg" alt="" width="416" height="160" /><br />
Yesterday Google launched their new <a href="http://www.google.com/mobile/apple/app.html">Google Mobile App for the iPhone</a>. The biggest innovation is that it allows people to search by voice. And not the geeky command based sentences we use behind a computer (&#8216;restaurant Rotterdam&#8217;), but actual sentences (&#8216;show me restaurants in Rotterdam that serve pizza&#8217;). It also monitors where I am and uses this data to enhance the search results. View the Google promo video<span id="more-488"></span><br />
<object width="640" height="518" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="src" value="http://www.youtube.com/v/y3z7Tw1K17A&amp;color1=0xb1b1b1&amp;color2=0xcfcfcf&amp;fs=1" /><param name="allowfullscreen" value="true" /><embed width="640" height="518" type="application/x-shockwave-flash" src="http://www.youtube.com/v/y3z7Tw1K17A&amp;color1=0xb1b1b1&amp;color2=0xcfcfcf&amp;fs=1" allowFullScreen="true" allowfullscreen="true" /></object></p>
]]></content:encoded>
			<wfw:commentRss>http://johnnyholland.org/2008/11/search-by-voice-and-location/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>SMule: flute playing made fun</title>
		<link>http://johnnyholland.org/2008/11/smule/</link>
		<comments>http://johnnyholland.org/2008/11/smule/#comments</comments>
		<pubDate>Tue, 18 Nov 2008 17:09:54 +0000</pubDate>
		<dc:creator>Jeroen van Geel</dc:creator>
				<category><![CDATA[Digital UX]]></category>
		<category><![CDATA[Urban UX]]></category>
		<category><![CDATA[application]]></category>
		<category><![CDATA[iphone]]></category>
		<category><![CDATA[live]]></category>

		<guid isPermaLink="false">http://johnnyholland.org/?p=449</guid>
		<description><![CDATA[<img width="220" height="160" src="http://johnnyholland.org/wp-content/uploads/2011/12/smflute.jpg" class="attachment-index-categories wp-post-image" alt="smflute" title="smflute" />The iPhone has changed from a great phone into a multitouch device that is redefining interaction design. It has changed [...]]]></description>
			<content:encoded><![CDATA[<img width="220" height="160" src="http://johnnyholland.org/wp-content/uploads/2011/12/smflute.jpg" class="attachment-index-categories wp-post-image" alt="smflute" title="smflute" /><p><a href="http://johnnyholland.org/wp-content/uploads/smule.jpg"><img class="alignnone size-full wp-image-458" title="smule" src="http://johnnyholland.org/wp-content/uploads/smule.jpg" alt="" width="416" height="160" /></a><br />
The iPhone has changed from a great phone into a multitouch device that is redefining interaction design. It has changed in a gameboy, planner, fishpond and even a DJ tool. I&#8217;m starting to suspect that it is actually a Transformer, but have not yet found proof&#8230; until now. I would have suspected the iPhone to change into a walking robot or an ice cream machine, but never&#8230; ever would I have thought that it could actually change into a flute. But with Ocarina it just did.<span id="more-449"></span></p>
<p><a href="http://ocarina.smule.com/">Ocarina is an application that changes your phone into a working flute</a>. When you blow into the microphone it will generate the sound of an ocarina; the flute originating from the <a href="http://en.wikipedia.org/wiki/The_Legend_of_Zelda_(series)">Zelda games</a>. If you want to play tunes you can put your fingers on the holes displayed on the screen. And it actually sounds quite nice:<br />
<object width="640" height="361" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://vimeo.com/moogaloop.swf?clip_id=2131612&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" /><embed width="640" height="361" type="application/x-shockwave-flash" src="http://vimeo.com/moogaloop.swf?clip_id=2131612&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" allowfullscreen="true" allowscriptaccess="always" /></object><br />
<a href="http://vimeo.com/2131612">SMule: Ocarina [Zeldarian]</a> from <a href="http://vimeo.com/smule">SonicMule, Inc.</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
<p><a href="http://johnnyholland.org/wp-content/uploads/product-ocarina.png"><img class="alignright size-medium wp-image-457" title="product-ocarina" src="http://johnnyholland.org/wp-content/uploads/product-ocarina-295x300.png" alt="" width="295" height="300" /></a>But what makes this application really special is the additional feature: the ability to listen to other people playing the Ocarina at that exact moment. You&#8217;ll see a globe of the world, on which lights around the world are displayed, showing people playing the Ocarina. One moment you&#8217;re listening to somebody trying out the Ocarina in Japan and the next moment to a beautiful play in New York. You get the feeling that you are eavesdropping, which is something special.</p>
]]></content:encoded>
			<wfw:commentRss>http://johnnyholland.org/2008/11/smule/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Google Earth for your iPhone</title>
		<link>http://johnnyholland.org/2008/10/google-earth-for-your-iphone/</link>
		<comments>http://johnnyholland.org/2008/10/google-earth-for-your-iphone/#comments</comments>
		<pubDate>Thu, 30 Oct 2008 21:02:40 +0000</pubDate>
		<dc:creator>Jeroen van Geel</dc:creator>
				<category><![CDATA[Digital UX]]></category>
		<category><![CDATA[Urban UX]]></category>
		<category><![CDATA[google earth]]></category>
		<category><![CDATA[iphone]]></category>
		<category><![CDATA[mobile]]></category>

		<guid isPermaLink="false">http://johnnyholland.org/?p=269</guid>
		<description><![CDATA[<img width="220" height="160" src="http://johnnyholland.org/wp-content/uploads/2011/12/google-earth.jpg" class="attachment-index-categories wp-post-image" alt="google-earth" title="google-earth" />Until now Google Maps was the tool to use as a digital map on your iPhone (and iPod Touch). But [...]]]></description>
			<content:encoded><![CDATA[<img width="220" height="160" src="http://johnnyholland.org/wp-content/uploads/2011/12/google-earth.jpg" class="attachment-index-categories wp-post-image" alt="google-earth" title="google-earth" /><p><img class="alignnone size-full wp-image-270" title="google-earth" src="http://johnnyholland.org/wp-content/uploads/google-earth.jpg" alt="" width="416" height="160" /><br />
Until now Google Maps was the tool to use as a digital map on your iPhone (and iPod Touch). But it&#8217;s sexier brother Google Earth is taking over the show, because Google just announced it&#8217;s availability.<span id="more-269"></span></p>
<p>The biggest advantage of Google Earth over Google Maps is the ability to view the landscape from any angle you want. You can tilt the map in every possible degree. And when adding this up with the capability to view landscapes in 3D, with actual height differences&#8230; this makes for an interesting step for the iPhone to become a serious wayfinding tool. And besides the landscapes users themselves can add 3D versions of actual buildings into Google Earth, thus generating realistic looking cities. I would be very happy when driving through Manhattan with a map that can change instantly from a top down overview into a 3D presentation of my surroundings.</p>
<p>And these aren&#8217;t even all the extra possibilities&#8230; because there is the possibility to import KML files in Google Earth (at least on the Mac and PC version, so hopefully also on the mobile version). This can add an extra layer of interesting data, such as a live broadcast of the weather and traffic. But also events, photographs and air traffic&#8230; the possibilities are endless. At the moment there are a lot of different uses, but I bet with Google Earth becoming mobile that a lot of new uses will be found.</p>
<p>Last but definitely not least is the always interesting and good use of the iPhones gyroscope. This subtle, but very effective interaction enables people to easily change the angle of the map. The movement of changing the angle is so natural for people that it will definitely become a good pattern. The only unfortunate aspect is that the hardware can&#8217;t detect which direction you&#8217;re looking in&#8230; but nothing is perfect.</p>
<p>Look at the official video from Google:<br />
<object width="425" height="349" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/v6BPuKaLel4&amp;hl=nl&amp;fs=1&amp;rel=0&amp;border=1" /><param name="allowfullscreen" value="true" /><embed width="425" height="349" type="application/x-shockwave-flash" src="http://www.youtube.com/v/v6BPuKaLel4&amp;hl=nl&amp;fs=1&amp;rel=0&amp;border=1" allowFullScreen="true" allowscriptaccess="always" allowfullscreen="true" /></object></p>
]]></content:encoded>
			<wfw:commentRss>http://johnnyholland.org/2008/10/google-earth-for-your-iphone/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

