<?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; foundations</title>
	<atom:link href="http://johnnyholland.org/tag/foundations/feed/" rel="self" type="application/rss+xml" />
	<link>http://johnnyholland.org</link>
	<description>It&#039;s all about interaction</description>
	<lastBuildDate>Wed, 08 Feb 2012 18:15:24 +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>Move beyond function towards connection</title>
		<link>http://johnnyholland.org/2009/04/function-to-connection/</link>
		<comments>http://johnnyholland.org/2009/04/function-to-connection/#comments</comments>
		<pubDate>Tue, 21 Apr 2009 10:09:09 +0000</pubDate>
		<dc:creator>David Malouf</dc:creator>
				<category><![CDATA[Featured]]></category>
		<category><![CDATA[Methods & theory]]></category>
		<category><![CDATA[aesthetics]]></category>
		<category><![CDATA[art]]></category>
		<category><![CDATA[foundations]]></category>

		<guid isPermaLink="false">http://johnnyholland.org/?p=1786</guid>
		<description><![CDATA[Do we need to create a sense of connectedness in our design?]]></description>
			<content:encoded><![CDATA[<img width="220" height="160" src="http://johnnyholland.org/wp-content/uploads/2011/12/dave-connec.jpg" class="attachment-index-categories wp-post-image" alt="dave-connec" title="dave-connec" /><p><img class="alignnone size-full wp-image-1876" title="connected" src="http://johnnyholland.org/wp-content/uploads/connected.png" alt="" width="416" height="160" /><br />
Last December I posted a small blog post entitled <a href="http://davemalouf.com/?p=1453">&#8220;Designs with Soul&#8221;</a>. In it I discussed the importance of the designer in product design.  Some feedback about the piece is leading the formation of my upcoming presentation at the From <a href="http://businesstobuttons.com" target="_blank">Business to Buttons conference</a> in Sweden this coming June. <span id="more-1786"></span></p>
<p>Here&#8217;s my summary of the original thesis:</p>
<p><em>Most successful products create a sense of connectedness between the consumer and the designer and that this connection occurs when designers balance the pull towards the rational, functional, &amp; expedient with the natural &amp; emotional.<br />
</em></p>
<p>But let&#8217;s take the thesis deeper. What is really being connected here? What does it mean for the end-user to feel connected? What are the examples in the real world where we get this at the various layers of design.<br />
<strong></strong></p>
<h2>Great design is connected to art</h2>
<p>Great art isn&#8217;t just beautiful. It creates a sense of connection between artist and audience. Here is my attempt at what makes great art evoke a sense of connection to the artist:</p>
<div>
<ul>
<li><strong>nature &#8211; </strong>Even the &#8220;ugly&#8221; in nature can and often does inspire a sense of connection to &#8220;something&#8221;. As a devout atheist (not even close to agnostic anymore) I call this sense of awe created by the magnificance of chaos and how time works out so much beauty.</li>
<li><strong>emotion </strong>- emotion expressed, or otherwise given space, demonstrates a connection to the society around us and the people who embody society.</li>
<li><strong>analog</strong> &#8211; This means a few things. 1) it means non-digital. Our senses are set up to understand the analog; whenever we digitize something we are asking our minds to perceive elements that they are not used to and it throws them. 2) Metaphors that map to our expectations.</li>
<li><strong>technology</strong> &#8211; demonstrating we have an intellect, a sense of rationality is key to remaining connected, as it holds us towards the hope that all is not chaos. It is balanced, because too much technology negates the previous two ideals.</li>
<li><strong>referencing the world</strong> &#8211; even if your audience doesn&#8217;t get it, referencing the world (the many cultures we share this blue ball with) will bring an added sense of connectedness.</li>
<li><strong>aesthetics</strong> &#8211; this isn&#8217;t just about color, layout, form, line, texture, etc. but rather it is about engaging all facets of the mind, as it moves through an experience. How one moves during its use, the conversation it engages, the fit to motivation &amp; goals.</li>
<li><strong>amazing craft</strong> &#8211; I think we all know that craft is hard and we have an internal appreciation of the skill it takes to make something wondrous.</li>
</ul>
<p>I&#8217;m sure there are more, but when these properties of art are also applied to products &amp; services, it upgrades the overall experiences surrounding them from &#8220;getting the job done&#8221; to &#8220;How did I ever live without this tool?&#8221; to &#8220;I will not only use this product, I will pay a premium for it, and be its greatest advocate.&#8221; To be great doesn&#8217;t require applying all these elements, but balancing a few really well. When it comes to a product even one of these attributes done well can have a great effect.</p>
<h2>Let&#8217;s focus on art a little more&#8230;</h2>
<div id="attachment_1861" class="wp-caption alignleft" style="width: 214px"><a href="http://en.wikipedia.org/wiki/David_Michaelangelo"><img class="size-medium wp-image-1861" src="http://johnnyholland.org/wp-content/uploads/michelangelo-sculptures-11-204x300.jpg" alt="Michaelangelo's David" width="204" height="300" /></a><p class="wp-caption-text">Michaelangelo&#39;s David</p></div>
<p><em>David</em> by Michaelangelo (not just a past relative) is one of the best known statues in the world. What is so special? Is it the perfection of the body? Or is it also the amazement we feel when we sense the magic of the craft that carved that vision out of the marble. It also has to be the choice of subject. Taking a story of the Bible and portraying this &#8220;Boy&#8221; as someone robust &amp; perfect, but also oddly vulnerable.</p>
<p>The Renaissance offers up a ton of examples that accomplish this goal&#8211;Mona Lisa, Sistine Chapel, Birth of Venus. Just the application of depth added a truer naturalism than previously present. Not until the Impressionists and post-Impressionists do we see again this great sense of human connection &amp; soul in the art of Europe. The emotion against nature that Monet explores is unparalleled. Van Gogh obviously increases the intensity of the emotion, but also adds more abstraction through what can be called the addition of technology to his painting.  Art has always waxed and waned in trying to remain connected while advancing its means of self-expression. Even if we look at seemingly non-natural art like Kandinsky, Pollock, Warhol, Picasso, Miro, etc. some elements of the above are mixed together at the most abstract levels to draw connection between the artist and the audience.</p>
<h2>Now let&#8217;s look at design &#8230;</h2>
<p>One can&#8217;t ignore architecture&#8217;s primary mandate going back to Roman times which states: Firmness, Utility &amp; Delight. I would argue, though, that all 3 of these are attainable in the most basic sense without achieving the soulful sense of connectedness that I believe moves a product out of the territory of contemporary success into the heavens of &#8220;How did I ever live without this?&#8221;</p>
<p>Great design using the attributes noted above is referential to something global. Most references that work best exist in nature. The Elephant of the Kitchen Aid food processor, or the natural lines on most cars (cats, fish, sharks, whales, etc.) begin the process of creating the scene for a story for the consumer or end-user that, if maintained, can be the track guiding them through their connected life with the product.</p>
<div id="attachment_1862" class="wp-caption alignright" style="width: 248px"><a href="http://fuseproject.com/cs_ywater_overview.php"><img class="size-medium wp-image-1862" src="http://johnnyholland.org/wp-content/uploads/y-water_fuseproject.png" alt="Y-water by Fuseproject" width="238" height="239" /></a><p class="wp-caption-text">Y-water by Fuseproject</p></div>
<p>Another more recent product (Nope! I&#8217;m not going the Apple route&#8230;yet) that feels this way for me uses another tactic in product design that is seldom thought about: playfulness. Yves Behar&#8217;s design of the water bottles for <a href="http://fuseproject.com/cs_ywater_overview.php" target="_blank">Y-water</a> is a great example of using the story behind the product and twisting it with appropriate playfulness. It creates a sense of connection to the children who are the chief consumers and the parents who are the chief purchasers all at the same time.</p>
<h2>It&#8217;s at 2 levels of the design &#8230;</h2>
<p>Great design is carved out of an amazing story. In some cases the design itself is a story, but more likely the design is referencing and creating a story within its interaction.  Too often the story used doesn&#8217;t play to the aesthetic elements noted above and we feel the product&#8217;s design value becomes contrived&#8211;even the most awarded designs. Motorola&#8217;s products fall into this category. I don&#8217;t know if I can say there is a story around &#8220;The Razor&#8221; but I do know that the subsequent design language used to create a dozen post-Razor replicants is totally devoid of meaningful connection between designer &amp; user. The initial design upon which all that followed is based, is devoid of any balance of the 8 properties noted above. It attempts to only speak to our most base levels of aesthetic understanding through great technologies. This strategic design flaw can probably be used to point squarely at the downturn of Motorola.</p>
<p>But as an interaction designer there is another level. This level is a lot more tactile. Some may be familiar with my <a href="http://johnnyholland.org/magazine/2009/03/foundations-of-interaction-design-interaction-09-reprise/" target="_blank">Foundations of Interaction Design</a>. In it I discuss 3 primary foundations that make up the clay of Interaction Design: time, metaphor &amp; abstraction. Two of these are directly related to the topic at hand. I alluded to one, metaphor, earlier in the examples of referencing the natural. The other is abstraction.</p>
<p>I describe abstraction as the movements of our body in direct or indirect correlation (abstraction) to how the system communicates that it understands those motions in a meaningful way. The least abstract thing one can do is tap on a screen or speak a natural language command. I don&#8217;t want to say that &#8220;direct manipulation&#8221; is always the best aesthetics as I could imagine that directness may be less natural in some circumstances in terms of mapping against expectations in the mind. There are also possible efficiencies within the most indirect and abstracted of all interfaces the command line interface.</p>
<div id="attachment_1863" class="wp-caption alignleft" style="width: 310px"><a href="http://maps.google.com/"><img class="size-medium wp-image-1863" src="http://johnnyholland.org/wp-content/uploads/g-maps-300x179.png" alt="Google Maps" width="300" height="179" /></a><p class="wp-caption-text">Google Maps</p></div>
<p>When the abstraction layer is in balance with the metaphors being used to communicate the responses to those abastracted commands, then something great can happen. My favorite example of abstraction done well with metaphor is Google Maps. The clipping metaphor maps against what I would do if I had a paper map on my table in front of me. I have a naturally occurring clip due to the focus area of my eyes. When I want to bring something from the south west into centered view I grab the page and slide the whole page <em>towards</em> the north east. The only breakdown here is the notion of &#8220;grabbing&#8221;, but in the context of mouse-usage this breakdown seems to be easily overcome through the extension of the metaphor of the mouse that is so ubiquitously well understood.</p>
<p>Let&#8217;s take a step and examine the evolution of the iPod. The iPod is arguably a soulless (yet attractive) form design, despite <strong><em>huge</em></strong> success. I say that because of its almost complete lack of obvious natural or analog tendencies. (I&#8217;m not delusional; there are a ton of reasons why iPhone is a success; I&#8217;m trying to make a point here.) It is in the interaction design and the information architecture where its soul shines through. A circle is infinite&#8211;its that simple. Compare the wheeled navigation of an iPod to all the previous attempts at non-circular navigation of music players. The circle afforded something that other modes of interfacing could not and that is a sense of &#8220;forever&#8221;. It also added the element of gears shifting in an easily translatable way. If I went slow I wanted it to proceed slowly and if I hit the gas on my thumb I wanted it to go to warp speed and skip through the alphabet. The kicker is that when I slowed it didn&#8217;t mean go to individual songs again, but just slow the alphabet and only after stopping and starting again would I move the individual items again.  The wheel was an advance in UI convention that reduced the level of abstraction within a mapping to a winning metaphor that was also a key instrument to the product&#8217;s success.</p>
<div id="attachment_1864" class="wp-caption alignright" style="width: 259px"><a href="http://apple.com/iphone"><img class="size-medium wp-image-1864" src="http://johnnyholland.org/wp-content/uploads/apple-iphone-3g-249x300.jpg" alt="Apple iPhone (3G)" width="249" height="300" /></a><p class="wp-caption-text">Apple iPhone (3G)</p></div>
<p>But it doesn&#8217;t stop there. The iPod advanced. It moved from wheel to touch screen. The make up of the screen however removed the physical affordances of a wheel. Moving around a circle without physical guides would have never worked. So it meant returning to up and down again. But it had to be improved upon. The <em>flick</em> in terms of a gesture against the touch screen actually increased the level of abstraction successfully. If it was truly unabstracted movement would cease when the finger left the screen of the device. But not only does it continue, it continues using a fairly complex algorithm used to replicate the physical analog of a wheel. This &#8220;gravity&#8221; metaphor is a big part of the iPhone story.  Couple this with the jump navigation in the right margin and you gain a combined interaction design model that successfully brings the infinity metaphor of the wheel to the iPhone. Not by re-creating infinity but by mapping against other metaphors with newly appropriate metaphors.</p>
<h2>Back to humanness &#8230;</h2>
<p>As I said, soul comes through a feeling of connectedness. The above mentioned <em>flick</em> of the iPhone is more than just a great metaphor: it is a calling card. It is that random sign that is completely analog in its interpretation. No machine could have ever conceived that. Apple through almost all of their products have become expert at adding these &#8220;human&#8221; touches in their designs. Washington Mutual Bank did this with the language they used in their ATMs (I&#8217;m sure it is gone now). I was always amused with their use of slang in the system.</p>
<p>Sometimes even &#8220;bad&#8221; design choices can lead to more connectedness. The allowance of mistakes (tolerable ones) increase the sense of humanity&#8217;s imperfection in the system. Think about how the best heroes in literature are always ones with flaws. Perfect heroes are untouchable and beyond our ability to relate to them.</p>
<p>Great design in the end will give us something to relate to, to feel connected with, and to reinforce our humanity. Tapping that right balance between emotion and logic, chaos and control, analog and digital, is the key to this success. We can no longer rely on &#8220;form follows function&#8221;. Form has to be parallel to function, as function is growing in commodity. &#8230; more on this in Malmo in June! I hope to see you there!</p>
</div>
<h4>About From Business to Buttons</h4>
<p>Held in lovely Malmö in southern Sweden, <a href="http://www.businesstobuttons.com/" target="_blank">From Business to Buttons</a> is the meeting place in Europe for interaction designers, business strategist and usability experts. This year it will be held on June 11-12.</p>
]]></content:encoded>
			<wfw:commentRss>http://johnnyholland.org/2009/04/function-to-connection/feed/</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
	</channel>
</rss>

