<?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; interface</title>
	<atom:link href="http://johnnyholland.org/tag/interface/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>Perceived Affordances and Designing for Task Flow</title>
		<link>http://johnnyholland.org/2010/04/perceived-affordances-and-designing-for-task-flow/</link>
		<comments>http://johnnyholland.org/2010/04/perceived-affordances-and-designing-for-task-flow/#comments</comments>
		<pubDate>Fri, 02 Apr 2010 13:00:56 +0000</pubDate>
		<dc:creator>Adam Connor</dc:creator>
				<category><![CDATA[Psychology]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[flickr]]></category>
		<category><![CDATA[interface]]></category>
		<category><![CDATA[review]]></category>
		<category><![CDATA[usability]]></category>
		<category><![CDATA[user experience]]></category>

		<guid isPermaLink="false">http://johnnyholland.org/?p=6541</guid>
		<description><![CDATA[<img width="220" height="160" src="http://johnnyholland.org/wp-content/uploads/2011/12/flickr.jpg" class="attachment-index-categories wp-post-image" alt="flickr" title="flickr" />A few months ago we set up five Flickr groups around several UX topics. Every month we will try and [...]]]></description>
			<content:encoded><![CDATA[<img width="220" height="160" src="http://johnnyholland.org/wp-content/uploads/2011/12/flickr.jpg" class="attachment-index-categories wp-post-image" alt="flickr" title="flickr" /><p><img class="alignnone size-full wp-image-6884" title="johnny-flickr-groups" src="http://johnnyholland.org/wp-content/uploads/johnny-flickr-groups.jpg" alt="" width="416" height="160" /><br />
A few months ago we set up five Flickr groups around several UX topics. Every month we will try and make some sense of the uploaded material. This month we selected the UX Errors group and will look at examples of issues that arise when proper attention isn&#8217;t paid to two very important components of successful user interface design: Perceived Affordances and Designing for Task Flow.<span id="more-6541"></span></p>
<h2>Perceived Affordances</h2>
<p>In <em>The Design of Everyday Things</em> Don Norman introduced many designers to the concept of affordances, which he would later clarify as &#8220;perceived affordances&#8221;, or the actions the user perceives as being possible based on how an object is presented. For example, if your design includes a &#8220;button&#8221; make that button look pushable.</p>
<div style="overflow: hidden; margin-bottom: 24px;">
<div id="attachment_6545" class="wp-caption alignright" style="width: 260px"><a href="http://johnnyholland.org/wp-content/uploads/ATM-labels-as-buttons-e1268597108159.jpg"><img class="size-full wp-image-6545" title="ATM-labels-as-buttons" src="http://johnnyholland.org/wp-content/uploads/ATM-labels-as-buttons-e1268597108159.jpg" alt="ATM screen with button labels styled to appear 3-dimensional as if they were labels themselves" width="250" height="180" /></a><p class="wp-caption-text">Posted by Adam Connor</p></div>
<h3 style="font-family: Arial,Helvetica,sans-serif; font-size: 13px; font-weight: bold;">Push me. Wait&#8230; you can&#8217;t</h3>
<p>The ATM example suffers from some misrepresentation. The labels for the physical buttons are styled with bevels, commonly used to represent buttons in GUIs. As a result, many users try to press them, only to realize after a few attempts that the buttons are actually to the right and left of each label. In this case, objects give off an inaccurate perceived affordance.</p>
<p>It&#8217;s not uncommon for ATMs to have physical buttons and digital label displays. In this situation, it looks like someone thought that adding a little visual &#8220;excitement&#8221; to the labels would be an improvement. If simple, plain text labels had been used, people would most likely have experienced less confusion.</p>
</div>
<div style="overflow: hidden; margin-bottom: 24px;">
<div id="attachment_6547" class="wp-caption alignright" style="width: 260px"><a href="http://johnnyholland.org/wp-content/uploads/gas-pump-octane-selection-e1268596991897.jpg"><img class="size-full wp-image-6547" title="gas-pump-octane-selection" src="http://johnnyholland.org/wp-content/uploads/gas-pump-octane-selection-e1268596991897.jpg" alt="Photo of gas pump octane selection buttons" width="250" height="180" /></a><p class="wp-caption-text">Posted by Olivier Lorrain</p></div>
<h3 style="font-family: Arial,Helvetica,sans-serif; font-size: 13px; font-weight: bold;">Where&#8217;s the Button?</h3>
<p>In the gas pump example people tended to press the octane number, as evidenced by the fingerprints around the &#8220;87&#8243;, when choosing a fuel. This happened despite the &#8220;Push to start&#8221; label on the actual button and the arrows pointing to them. In this case, there isn&#8217;t enough emphasis given to the real button in comparison to the large yellow square label. Which begs the question, why not just make the yellow square the button to begin with?</p>
</div>
<div style="overflow: hidden; margin-bottom: 24px;">
<div id="attachment_6546" class="wp-caption alignright" style="width: 260px"><a href="http://johnnyholland.org/wp-content/uploads/elevator-up-lights-and-button-e1268597048426.jpg"><img class="size-full wp-image-6546" title="elevator-up-lights-and-button" src="http://johnnyholland.org/wp-content/uploads/elevator-up-lights-and-button-e1268597048426.jpg" alt="photo of elevator direction lights and call button" width="250" height="180" /></a><p class="wp-caption-text">Posted by Andreas Popp</p></div>
<h3 style="font-family: Arial,Helvetica,sans-serif; font-size: 13px; font-weight: bold;">Which way is up?</h3>
<p>In our last perceived affordances example, we have three components, all with a triangle/arrow pointing up, all beveled from the panel on which they are presented. Which one do you push to direct the elevator up?</p>
<p>The two arrows on the top are lights, which indicate the direction the elevator is traveling, while the lower button is the actual call button. Many users pressed the lights in order to call the elevator. Why? Most likely because the bevel caused people to perceive them as buttons. Also, the lights have a higher visual significance than the smaller triangle on the actual button. Had there simply been no bevel around the two lights, it&#8217;s likely there would be less confusion and more people would find the real button first. That&#8217;s not to say that the button itself couldn&#8217;t use a bit more visual prominence in it&#8217;s display too.</p>
</div>
<h2>Designing for Task Flow</h2>
<p>When I was in grade school there was an exercise we did where each student had to write instructions on how to construct a peanut butter and jelly sandwich. The teacher then attempted to construct the sandwich according to those instructions verbatim. If an instruction left something out, small details like removing a slice of bread from the bag containing the loaf, the teacher would stand there and act stumped until the student modified their instructions to be more specific.</p>
<p>The purpose of the exercise was to give students an appreciation of the fact that even simple tasks are comprised of a multitude of steps, and that finding the right level of detail and sequencing for those steps is critical to user&#8217;s success and satisfaction.</p>
<div style="overflow: hidden; margin-bottom: 24px;">
<div id="attachment_6622" class="wp-caption alignright" style="width: 260px"><a href="http://www.flickr.com/photos/46227389@N03/"><img class="size-full wp-image-6622" title="task-flow-sample1" src="http://johnnyholland.org/wp-content/uploads/task-flow-sample1.jpg" alt="Photo of device illustrating poor task flow" width="250" height="180" /></a><p class="wp-caption-text">Posted by Eugenia Ortiz</p></div>
<h3 style="font-family: Arial,Helvetica,sans-serif; font-size: 13px; font-weight: bold;">Follow the Arrows</h3>
<p>In the example to the right, there appears to be some attempt at sequencing in the digital display as well as from the large &#8220;2&#8243; at the bottom of the device. In this case however, some considerate and/or frustrated individual(s) has taken it upon themselves to try to make up for the devices inadequacies by adding additional instructions and labels.</p>
</div>
<div style="overflow: hidden; margin-bottom: 24px;">
<div id="attachment_6621" class="wp-caption alignright" style="width: 260px"><a href="http://www.flickr.com/photos/frankfarm/479560812/in/pool-uxerrors"><img class="size-full wp-image-6621" title="parking-ticket-dispenser" src="http://johnnyholland.org/wp-content/uploads/parking-ticket-dispenser.jpg" alt="photo of parking ticket dispenser" width="250" height="260" /></a><p class="wp-caption-text">Posted by Frank Farm</p></div>
<h3 style="font-family: Arial,Helvetica,sans-serif; font-size: 13px; font-weight: bold;">Easy as 1, 2, 3</h3>
<p>Our second example also uses numbers, in addition to a list of instructions, to provide guidance. Yet the arrangement of components and labels gives a perception of chaos that even a well written set of instructions can&#8217;t overcome.</p>
<p>Both of these interfaces exemplify that in user interface design, identifying a sequence of actions is not enough. Numbers and lists, while somewhat helpful, should be used in conjunction with a logical and sequential arrangement of controls and inputs.</p>
</div>
<h2>Johnny Holland&#8217;s Flickr Groups</h2>
<p>Observations are a critical tool in any designer&#8217;s tool set. They provide us with in-site on things we should do, shouldn&#8217;t do and could do better. Many of us photograph our observations to preserve them, to keep them as reminders, learning tools that won&#8217;t be lost in the background when our next big breakthrough comes along. We also share our observations so that we can learn from and educate others. So that we can build a stronger dialog and further conversation.</p>
<p>To that extent, Johnny Holland has established five Flickr groups, so that we can share, discuss and learn from eachother&#8217;s observations.</p>
<p>In addition to the <a title="Visit the UX Errors group" href="http://www.flickr.com/groups/uxerrors/">UX Errors</a> group, where we collect examples of design decisions that have a negative impact on individual&#8217;s interactions with a product and overall user experience, and from which this month&#8217;s examples were taken, we have:</p>
<ul>
<li><a title="Visit the Daily UX Flickr Group" href="http://www.flickr.com/groups/dailyux/">Daily UX</a>: collecting pictures of everyday user experiences, good or bad.</li>
<li><a title="Visit the UX Sketches Flickr Group" href="http://www.flickr.com/groups/uxsketch/">UX Sketches</a>: collecting sketches of products, interfaces and ideas</li>
<li><a title="Visit the UX Patterns Flickr Group" href="http://www.flickr.com/groups/uxpatterns/">UX Patterns</a>: collecting examples of interface and interaction patterns.</li>
<li><a title="Visit the UX Events Flickr Group" href="http://www.flickr.com/groups/uxevents/">UX Events</a>: collecting photos from UX conferences and meet-ups around the world.</li>
</ul>
<p>Like any collaborative effort, these groups are what we make of them. So please join, share your photos, comment and discuss. And if you have any ideas on how we can improve the groups or better utilize them, please <a title="Contact Johnyy Holland" href="http://johnnyholland.org/contact/">let us know</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://johnnyholland.org/2010/04/perceived-affordances-and-designing-for-task-flow/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>Creating Successful Style Guides</title>
		<link>http://johnnyholland.org/2010/02/creating-successful-style-guides/</link>
		<comments>http://johnnyholland.org/2010/02/creating-successful-style-guides/#comments</comments>
		<pubDate>Mon, 15 Feb 2010 13:23:42 +0000</pubDate>
		<dc:creator>Amy Quinn</dc:creator>
				<category><![CDATA[Methods & theory]]></category>
		<category><![CDATA[interface]]></category>
		<category><![CDATA[techniques]]></category>
		<category><![CDATA[usability]]></category>
		<category><![CDATA[user experience]]></category>
		<category><![CDATA[UX]]></category>

		<guid isPermaLink="false">http://johnnyholland.org/?p=5839</guid>
		<description><![CDATA[<img width="220" height="160" src="http://johnnyholland.org/wp-content/uploads/2011/12/style.jpg" class="attachment-index-categories wp-post-image" alt="style" title="style" />Style guides are a great way to ensure user experience consistency when developing an application and a way to communicate [...]]]></description>
			<content:encoded><![CDATA[<img width="220" height="160" src="http://johnnyholland.org/wp-content/uploads/2011/12/style.jpg" class="attachment-index-categories wp-post-image" alt="style" title="style" /><p><a href="http://johnnyholland.org/wp-content/uploads/style-guide.jpg"><img class="size-full wp-image-6080 alignnone" title="style-guide" src="http://johnnyholland.org/wp-content/uploads/style-guide.jpg" alt="" width="416" height="160" /></a><br />
Style guides are a great way to ensure user experience consistency when developing an application and a way to communicate user experience standards across an organization. They can be application specific, platform specific, and may encompass enterprise-wide standards. A style guide can help make the development of user interfaces more efficient and help ensure good user interface design practices.<span id="more-5839"></span></p>
<h2>Types of Style Guides</h2>
<p>Style guides for applications usually contain specific instructions on how to design and develop an application&#8217;s UI. In some instances, code snippets may also be provided to simplify development of the application.</p>
<div id="attachment_5896" class="wp-caption aligncenter" style="width: 310px"><a href="http://johnnyholland.org/wp-content/uploads/Example2.jpg"><img class="size-medium wp-image-5896   " title="Web grid example" src="http://johnnyholland.org/wp-content/uploads/Example2-300x154.jpg" alt="Example of specifying a grid for a web page template" width="300" height="154" /></a><p class="wp-caption-text">Example of an application style guide specifying a web page template grid</p></div>
<p><span style="font-size: small;"><span style="line-height: 19px;"><em>Enterprise-wide style guides</em> may include standards specific to an organization. These style guides may overlap with company branding style guides that are often defined by marketing departments. They can outline a variety of company-wide items such as standard colors, typography, logos and language.</span></span></p>
<div id="attachment_5915" class="wp-caption aligncenter" style="width: 310px"><a href="http://johnnyholland.org/wp-content/uploads/Example-3.jpg"><img class="size-medium wp-image-5915" title="Corporate style guide example" src="http://johnnyholland.org/wp-content/uploads/Example-3-300x255.jpg" alt="Corporate style guide example" width="300" height="255" /></a><p class="wp-caption-text">Example of branding color definitions found in a corporate style guide</p></div>
<p><span style="line-height: 19px; font-size: small;"><em>Platform specific guidelines</em> are often tailored to a specific platform, such as desktop, web, or mobile. These style guides often give particular guidance on how to design for that platform, such as control and content guidelines.</span></p>
<div id="attachment_5917" class="wp-caption aligncenter" style="width: 310px"><a href="http://johnnyholland.org/wp-content/uploads/Example4.jpg"><img class="size-medium wp-image-5917 " title="Link style guide example" src="http://johnnyholland.org/wp-content/uploads/Example4-300x162.jpg" alt="Example of a website style guide" width="300" height="162" /></a><p class="wp-caption-text">Example of a link control definitions in a website style guide</p></div>
<p><span style="line-height: 19px; font-size: small;">The style guide you choose to create can be any combination of these three types. It&#8217;s up to you to figure out what makes the most sense for you.</span></p>
<h2>Style Guides Are Not UI Specifications</h2>
<p>Style guides are different from user interface specifications:</p>
<ul>
<li>A specification document <em>details the functionality</em> of a UI design for developers building an application. It is usually more descriptive and is often accompanied by wireframes that act as blueprints for the design. In contrast, a style guide is often a general outline of the elements of a UI design.</li>
<li>Style guides have a <em>longer shelf-life </em>than specifications documents that are often tied to a project life-cycle. When an application is first created, some elements of the initial specification document might turn into the application style guide for long-term reference.</li>
<li>Elements of a style guide may be <em>referred to</em> from a specification. For example, the functionality of a web application enhancement would be captured in a specifications document; but the operation of standard UI controls found throughout the website would be outlined in the website style guide and referred to by the specifications document.</li>
</ul>
<h2>How to be Successful</h2>
<p>Over the years, I have had a chance to create a variety of style guides. The format and purpose of these style guides were variable and were suited to the task at hand: such as details of the grid layout, colors and typography used in a website and a general guidebook providing guidance on the use of website user interface controls and how to write web-based content. From these experiences, I’ve learned a lot about what makes a style guide a success and I’d like to share some of these tips with you.</p>
<h2>1. Keep the audience in mind</h2>
<p>Style guides can be written for numerous audiences (e.g. other user experience practitioners, developers, graphic designers, business analysts, etc.) and the content should be structured to match the audience. Graphic designers would benefit from knowing the colors used in a website elements and programmers may desire knowing the code used to create a control.</p>
<h2>2. Plan for success</h2>
<p>When planning a style guide, seriously consider what would make your style guide successful in your organization. Would it be ensuring your company understands how to better design usable applications? Or would it be ensuring the large-scale website you are creating has a consistent user experience? Or would it be something else?</p>
<h2>3. Keep it alive</h2>
<p>Documents produced in traditional document formats can become stale and quickly become outdated. Successful style guides are produced in a manner that supports easy maintenance and supports a living document.</p>
<h2>4. Define a review process</h2>
<p>Create a process that supports modification and review of the style guide to actively ensure style guide maintenance and buy-in. You may want to have a person or group of people responsible for periodically updating a style guide.</p>
<h2>5. Think of the platform differences</h2>
<p>Style guides can be platform specific or neutral. Design guidelines can be different depending on the platform (i.e. Windows vs. Mac, iPhone vs. Blackberry). Consider how you want to support communicating any platform differences when creating your style guide.<br />
<strong> </strong></p>
<h2>6. Socialize the document in your organization</h2>
<p>The use of your style guide should be communicated throughout all levels of your organization to ensure everyone knows the existence of the guide, understands how to use the guide, and actively works to use and maintain the guide. The more people about your style guide, the more successful you and your style guide will be.<br />
<strong> </strong></p>
<h2>7. Clearly define mandatory and flexible standards</h2>
<p>User interface design is part art and part science and user interface paradigms shift quickly. Ensure that your style guides support new platforms and creative ideas by specifying what standards are mandatory and what are flexible. For example, you may want to ensure certain usability rules are strictly adhered to throughout your applications (i.e. “Sans serif fonts must be used for text that will be read on a screen”), but be more flexible in other areas (i.e. “Radio buttons should be used when a user is asked to select one item from a list of items.”)</p>
<h2>8. Make the style guide as scannable and searchable as possible</h2>
<p>Style guides can be very dense and contain a lot of detailed information. Search and browsing capabilities will make it easier for people to find what they are looking for in your style guide. In addition, use as many visual examples as possible to support quick scanning of style guide elements.</p>
<h2>9. Provide real world examples</h2>
<p>Successful styles guides often show one or more examples from real applications for illustration. If you are writing a style guide for a specific application, use examples from that application to demonstrate your point. If you are writing a style guide for a large organization with many applications, ensure that your examples encompass all of the applications you are describing.</p>
<p>I hope you find these tips helpful when you are creating your own style guides. Do you have any additional tips you would like to share?</p>
<p>&#8212;&#8211;<br />
Header image by <a href="http://www.flickr.com/photos/sketch22/" rel="cc:attributionURL">nathanborror</a> / <a href="http://creativecommons.org/licenses/by/2.0/" rel="license">/CC by 2.0</a></p>
]]></content:encoded>
			<wfw:commentRss>http://johnnyholland.org/2010/02/creating-successful-style-guides/feed/</wfw:commentRss>
		<slash:comments>18</slash:comments>
		</item>
		<item>
		<title>Book Review: Designing Web Interfaces</title>
		<link>http://johnnyholland.org/2009/05/book-review-designing-web-interfaces/</link>
		<comments>http://johnnyholland.org/2009/05/book-review-designing-web-interfaces/#comments</comments>
		<pubDate>Sun, 03 May 2009 20:23:37 +0000</pubDate>
		<dc:creator>Jeroen van Geel</dc:creator>
				<category><![CDATA[Reviews]]></category>
		<category><![CDATA[design pattern]]></category>
		<category><![CDATA[interface]]></category>
		<category><![CDATA[web]]></category>

		<guid isPermaLink="false">http://johnnyholland.org/?p=2019</guid>
		<description><![CDATA[<img width="220" height="160" src="http://johnnyholland.org/wp-content/uploads/2011/12/des.jpg" class="attachment-index-categories wp-post-image" alt="des" title="des" />Design patterns are among the most underrated tools in the world of interaction designers. And that&#8217;s not because they are [...]]]></description>
			<content:encoded><![CDATA[<img width="220" height="160" src="http://johnnyholland.org/wp-content/uploads/2011/12/des.jpg" class="attachment-index-categories wp-post-image" alt="des" title="des" /><p><img class="alignnone size-full wp-image-2023" title="webinterface1" src="http://johnnyholland.org/wp-content/uploads/webinterface1.png" alt="" width="416" height="160" /><br />
Design patterns are among the most underrated tools in the world of interaction designers. And that&#8217;s not because they are difficult to apply, but mainly due to the fact that designer are stubborn. We want to come up with all the solutions ourselves. But why? If you use patterns you save time and money, and you are more sure that your product will be understood by it&#8217;s users. Fortunately there are still believers, and they even wrote a book for us.<span id="more-2019"></span></p>
<p>In 2005 Jenifer Tidwell published a book called Designing Interfaces, which can be considered as being the mother of the title I’m currently reviewing. The book gave us a solid overview of the most common design patterns around. It served as a superb handbook for any user interface designer. But as we all know, the digital world evolves in a very rapid way… new technologies aris and new solutions and patterns must be developed. So it isn’t strange that Bill Scott and Theresa Neil decided to publish a book full of great web patterns. And that&#8217;s the book we&#8217;re going to review now: Designing Web Interfaces.</p>
<h2>Contents of the book</h2>
<p>While Designing Interfaces had a very ‘physical’ structure (chapters with headers, navigation, footers and forms), Designing Web Interfaces has a different approach. It uses principles to structure the different patterns. With this method the authors learn us the main principles that are (in their mind) important to design web interfaces. So let’s take a look at the different principles and content of the book:</p>
<h4>Make It Direct</h4>
<p>In this chapter it’s all about making it clear for users when they can change something on a page. How do you make a page visually appealing and still make it very clear what can and can’t be edited?<br />
Chapters: in-page editing, drag and drop, direct selection</p>
<h4>Keep It Leightweight</h4>
<p>Websites are becoming more like software by the day. With this principle you learn to keep actions simple: provide sufficient feedback, but also keep it simple.<br />
Chapters: contextual tools</p>
<h4>Stay on the Page</h4>
<p>Not every click and action should result in loading a new page. Sometimes you only want to refresh part of a page (like with e-mail on Gmail) or you don’t want secondary information to cause users to leave a page (so you use overlays). This principle and the chapters give you great tips when and how to do that.<br />
Chapters: overlays, inlays, virtual pages, process flow</p>
<h4>Provide an Invitation</h4>
<h4><a href="http://johnnyholland.org/wp-content/uploads/webinterface.png"><img class="alignright size-medium wp-image-2024" title="webinterface" src="http://johnnyholland.org/wp-content/uploads/webinterface-300x224.png" alt="" width="300" height="224" /></a></h4>
<p>With websites becoming more complex you need every space you can use to provide good contextual information and support. In this principle you learn how to help visitors to discover the possibilities on a site, via inviations. For me this is one of the more interesting new ways of learning people how to use your site, by giving them a live tour through your site/page.<br />
Chapters: static invitations, dynamic invitations</p>
<h4>Use Transitions</h4>
<p>In this chapter you get a series of patterns on how you can use transition to tell the right story, stay in a flow and get the correct attention.<br />
Chapters: transitional patterns, purpose of transitions</p>
<h4>React Immediately</h4>
<p>You see it ever more often, getting suggestions in search boxes while you are typing. This, and other direct feedback, are becoming the standard. People expect nothing less from website than direct feedback. In two chapters the book shows us a series of lookup and feedback patterns that could help you fulfil many expectations.<br />
Chapters: lookup patterns, feedback patterns</p>
<h2>Conclusion</h2>
<p>What I really liked about this book is the detailed, but interesting to read, way that the patterns are described… Instead of just showing us the best way to do it, the book manages to give good context. In some cases it shows different appliances of a certain pattern, describing the advantages and disadvantages in detail. This is really usable material for interaction designers, because it makes us aware of the necessary detail. A lot of designers will just design a page and describe the interaction in general, leaving it to the programmer to come up with the best solution. But it’s not just his responsibility, but (also) that of the interaction designer. We must understand how a user will respond, and patterns and facts (like: making something respond after dragging for 3 pixels makes something feel smoother than after 5+ pixels) help us do that.</p>
<p>So, in my opinion, every interaction designer should have a book (or online source) with design patterns within reach. It helps making decisions faster, and saves time for the real innovation.</p>
<p><strong>Book details</strong><br />
Designing Web Interfaces<br />
author: <a href="http://looksgoodworkswell.blogspot.com/">Bill Scott</a>, <a href="http://www.designgenie.org/">Theresa Neil</a><br />
published: <a href="http://oreilly.com/">O&#8217;Reilly</a>, 2009<br />
details: 296 pages, softcover</p>
]]></content:encoded>
			<wfw:commentRss>http://johnnyholland.org/2009/05/book-review-designing-web-interfaces/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Book review: Designing Gestural Interfaces</title>
		<link>http://johnnyholland.org/2009/03/book-review-designing-gestural-interfaces/</link>
		<comments>http://johnnyholland.org/2009/03/book-review-designing-gestural-interfaces/#comments</comments>
		<pubDate>Wed, 18 Mar 2009 22:04:39 +0000</pubDate>
		<dc:creator>Jeroen van Geel</dc:creator>
				<category><![CDATA[Reviews]]></category>
		<category><![CDATA[book]]></category>
		<category><![CDATA[gestural]]></category>
		<category><![CDATA[interface]]></category>
		<category><![CDATA[review]]></category>
		<category><![CDATA[touch]]></category>

		<guid isPermaLink="false">http://johnnyholland.org/?p=1497</guid>
		<description><![CDATA[<img width="220" height="160" src="http://johnnyholland.org/wp-content/uploads/2011/12/gestural.jpg" class="attachment-index-categories wp-post-image" alt="gestural" title="gestural" />In the wake of the ever increasing popularity of gestural interfaces, Dan Saffer wrote his newest book: Designing Gestural Interfaces. [...]]]></description>
			<content:encoded><![CDATA[<img width="220" height="160" src="http://johnnyholland.org/wp-content/uploads/2011/12/gestural.jpg" class="attachment-index-categories wp-post-image" alt="gestural" title="gestural" /><p><img class="alignnone size-full wp-image-1499" src="http://johnnyholland.org/wp-content/uploads/gesturalinterfaces-1.png" alt="" width="416" height="160" /><br />
In the wake of the ever increasing popularity of gestural interfaces, Dan Saffer wrote his newest book: Designing Gestural Interfaces. In this publication by O’Reilly he tries to give us some valuable insights. But did he succeed?<span id="more-1497"></span></p>
<p>Gestural interfaces are not new, but they are more popular than ever. Everywhere around us you see new ones popping up. And before everybody is coming up with their own interpretation and translation of what they should be and do, we must evaluate what has happened in the past and how we must deal with the future. Dan Saffer’s book is a great starting point for this exercise.</p>
<p>Let’s go through the book chapter by chapter.</p>
<h2>The basics</h2>
<p>The first chapter is an introduction to the subject. It gives a good and basic explanation. One interesting part of this chapter is ‘matching the gesture to the behavior’. This approach states that the best designs are those that ‘dissolve in behavior’. Here the product must become part of what the user is doing fluently. This is what good gestures should be, combining peoples natural behavior with a related action.</p>
<h2>The human body</h2>
<p>In the second chapter Saffer focuses on the human body, something a lot of designers often forget. The importance of understanding the mechanics of a human body is really fundamental in order to design good gestural interfaces. What is you body capable of doing? And what not? And we should not forget ergonomics. This is important even though there is no mouse. Saffer goes into this subject rather well, describing possible limitations and pointing us on some simple, but valuable facts (10% of adults are left-handed).</p>
<h2>Patterns for touch, interactive &amp; free form</h2>
<p>After the first two chapters the book dives into possible patterns for gestural interfaces. It’s an important step Saffer tries to take here: trying to define an international set of patterns. Several companies are developing gestural interfaces and are creating their own patterns, independent of each other. Some, like Apple, are even trying to patent some patterns… so it’s really important to start describing a set that is recognized by users and freely usable by any company. It would be a great step if the patterns Saffer describes would be available online, open for discussion and growth.</p>
<h2>Documenting gestural interfaces</h2>
<p>Documenting static websites in the 90s was pretty straight forward. But with growing interactivity and gestural interfaces it is a challenge for designers to capture the way an environment or device interacts with a user. The fifth chapter of Designing Gestural Interfaces looks into different ways to document your project. The one I like the most is drawing storyboards, encapsulating not only the interface but also the context and how the user behaves in it. It’s a great way to test for yourself if the design works, but also a superb way of presenting the concept to clients.</p>
<img class="alignnone size-full wp-image-1500" src="http://johnnyholland.org/wp-content/uploads/gesturalinterfaces-2.png" alt="" width="640" height="296" />
<h2>Prototyping</h2>
<p>When you’re done with the sketching you want to prototype an interface. In the sixth chapter of the book you get some low- and high-fidelity ways of prototyping. Amongst the low-fidelity is the creation of paper prototypes, which I really like. It’s an easy and really fast way of making a ‘working’ version of your product. You can give it to a colleague and let him play around with it. But even playing around with it yourself is really helpful, since you will ‘feel’ and see what it does. Of course paper prototyping is not always the best solution, since gestural interfaces can also be about bigger objects or even spaces. But these are also easily prototyped. Saffer gives some nice examples of these.</p>
<h2>Communicating</h2>
<p>For me chapter 7 “Communicating Interactive Gestures” was one of the more interesting ones. It learned me the true importance of communicating that there are interactive gestures or not. Imagine that there are some public spaces that have gestural interfaces, and some don’t… but it’s not communicated well. This will cause real stress, since people won’t know if, when, how and what they will trigger an event. It’s really important to be clear about this, stating when there is an interaction possible… what it triggers and how. But in order to achieve this we will have to find an international language, explaining this to us. It could be something as simple as an RSS icon, but it has to be something clear.</p>
<h2>Future</h2>
<p><iframe style="width: 120px; height: 240px;" src="http://rcm.amazon.com/e/cm?t=httpjohnnyhoo-20&amp;o=1&amp;p=8&amp;l=as1&amp;asins=0596518390&amp;fc1=000000&amp;IS2=1&amp;lt1=_blank&amp;m=amazon&amp;lc1=000000&amp;bc1=000000&amp;bg1=FFFFFF&amp;f=ifr" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="320" height="240"></iframe>In the last chapter Saffer tries to sketch his vision for the future. Unfortunately he plays on the safe side and only describes the main trends going on in the field. So when you follow the important sites in the IxD and UX field, you are covered and can skip this chapter.</p>
<h2>Conclusion</h2>
<p>Before I started reading this book I thought it would dive deep into the world of gestural interfaces. But I should have known better… Since this is the first serious attempt to capture the subject it is logical that it needs to introduce us to a lot of new things. And although only the first chapter is called ‘Introducing Interactive Gestures’ I have to say that the entire book is an introduction to the subject. This doesn’t mean it doesn’t give helpful information, but it never goes into the subject deep enough to totaly cover it. This makes Designing Gestural Interfaces a great book for people new to the subject, like students. Let’s take this book as the fundament and see some new ones building upon it, going more in-depth.</p>
<p>Book Details<br />
<a href="http://www.designinggesturalinterfaces.com/">Designing Gestural Interfaces</a><br />
author: <a href="http://www.odannyboy.com/">Dan Saffer</a><br />
publisher: <a href="http://oreilly.com/">O&#8217;Reilly</a><br />
details: 247 pages, paperback</p>
]]></content:encoded>
			<wfw:commentRss>http://johnnyholland.org/2009/03/book-review-designing-gestural-interfaces/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Your kitchen table as a gesture based input device</title>
		<link>http://johnnyholland.org/2009/01/your-kitchen-table-as-a-gesture-based-input-device/</link>
		<comments>http://johnnyholland.org/2009/01/your-kitchen-table-as-a-gesture-based-input-device/#comments</comments>
		<pubDate>Wed, 28 Jan 2009 13:28:14 +0000</pubDate>
		<dc:creator>Dennis Koks</dc:creator>
				<category><![CDATA[Urban UX]]></category>
		<category><![CDATA[gesture]]></category>
		<category><![CDATA[interface]]></category>
		<category><![CDATA[physical]]></category>

		<guid isPermaLink="false">http://johnnyholland.org/?p=1140</guid>
		<description><![CDATA[Turn any flat surface in a gesture-based interface using 'Scratch it'.]]></description>
			<content:encoded><![CDATA[<img width="220" height="160" src="http://johnnyholland.org/wp-content/uploads/2011/12/scratch.jpg" class="attachment-index-categories wp-post-image" alt="scratch" title="scratch" /><a href="http://johnnyholland.org/wp-content/uploads/topper_scratch.png"><img class="alignnone size-full wp-image-1142" title="topper_scratch" src="http://johnnyholland.org/wp-content/uploads/topper_scratch.png" alt="" width="416" height="160" /></a>
<p>Chris Harrison and Scott Hudson (Carnegie Mellon University) came up with a way to use any flat surface as a gesture based input device (Scratch input). An absolute breakthrough which makes extraordinary interactions, like for example controlling your television or music player with your wooden kitchen table, possible.<span id="more-1140"></span></p>
<p><a title="Scratch input" href="http://www.chrisharrison.net/projects/scratchinput/index.html" target="_blank">Scratch input</a> is specifically designed to use augmented existing, passive surfaces as an input device. Using a simple sensor which is sticked on the surface, the sound-waves are captured. Due the fact that every movement produces a different sound-pattern, gestures can be recognized.</p>
<a href="http://johnnyholland.org/wp-content/uploads/picture-8.png"><img class="alignnone size-full wp-image-1141" title="picture-8" src="http://johnnyholland.org/wp-content/uploads/picture-8.png" alt="" width="314" height="158" /></a>
<p>Interesting about it is that in a lot of cases this will make an interface redundant. And if you do need one, you can design one that looks and feels much more natural and organic.</p>
<p>I could go on explaining how it works but this video does a much better job at that:</p>
<p><object width="640" height="505" 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/2E8vsQB4pug&amp;hl=nl&amp;fs=1" /><param name="allowfullscreen" value="true" /><embed width="640" height="505" type="application/x-shockwave-flash" src="http://www.youtube.com/v/2E8vsQB4pug&amp;hl=nl&amp;fs=1" allowFullScreen="true" allowscriptaccess="always" allowfullscreen="true" /></object></p>
<p>What has been explained in the video, and a bit more, can also be found in the paper they published which can be downloaded <a title="here" href="http://www.chrisharrison.net/projects/scratchinput/Harrison_122.pdf" target="_blank">here</a>.</p>
<p><a title="Chris Harrison" href="http://www.chrisharrison.net" target="_blank">Chris Harrison</a>, is a Ph.D. student in the Human-Computer Interaction Institute at Carnegie Mellon University. <a title="Scott Hudson" href="http://www.cs.cmu.edu/~hudson/" target="_blank">Scott Hudson</a> is a professor at the same institute where he directs the HCII PhD program.</p>
]]></content:encoded>
			<wfw:commentRss>http://johnnyholland.org/2009/01/your-kitchen-table-as-a-gesture-based-input-device/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Ford&#8217;s green dashboard tamagotchi</title>
		<link>http://johnnyholland.org/2008/12/fords-green-dashboard-tamagotchi/</link>
		<comments>http://johnnyholland.org/2008/12/fords-green-dashboard-tamagotchi/#comments</comments>
		<pubDate>Tue, 30 Dec 2008 13:11:02 +0000</pubDate>
		<dc:creator>Jeroen van Geel</dc:creator>
				<category><![CDATA[Digital UX]]></category>
		<category><![CDATA[Urban UX]]></category>
		<category><![CDATA[car]]></category>
		<category><![CDATA[environment]]></category>
		<category><![CDATA[green]]></category>
		<category><![CDATA[interface]]></category>

		<guid isPermaLink="false">http://johnnyholland.org/?p=771</guid>
		<description><![CDATA[<img width="220" height="160" src="http://johnnyholland.org/wp-content/uploads/2011/12/dash.jpg" class="attachment-index-categories wp-post-image" alt="dash" title="dash" />In an attempt to save the planet (and sell more cars in the proces) Ford is working on a new [...]]]></description>
			<content:encoded><![CDATA[<img width="220" height="160" src="http://johnnyholland.org/wp-content/uploads/2011/12/dash.jpg" class="attachment-index-categories wp-post-image" alt="dash" title="dash" /><p><a href="http://johnnyholland.org/wp-content/uploads/smartgauge1.png"><img class="alignnone size-full wp-image-775" title="" src="http://johnnyholland.org/wp-content/uploads/smartgauge1.png" alt="" width="416" height="160" /></a><br />
In an attempt to save the planet (and sell more cars in the proces) Ford is working on a new type of dashboard. The company came up with the idea that drivers will become eco-drivers when they are shown what the results of their driving style is. Unfortunately they completely missed the purpose of a dashboard in the process.<span id="more-771"></span></p>
<p>The dashboard they&#8217;ve been working on is called SmartGauge. It is actually a big LCD screen that can display all kinds of information. On the display they integrated EcoGuide. This EcoGuide translates your driving style into a plant: when you drive green it shows a full-grown vine with leaves, but when you start driving bad it starts to become brown and die. This way Ford is trying to make you more aware of your driving style. It&#8217;s actually the next generation <a href="http://www.tamagotchi.com/">Tamagotchi</a>, which lives or dies depending on your care.</p>
<img class="alignnone size-full wp-image-776" title="smargauge" src="http://johnnyholland.org/wp-content/uploads/smargauge.png" alt="" width="450" height="187" />
<p>While this may sound like a good idea, the implementation seems to fail. In a demonstration of SmartGauge it becomes clear that technology is leading, at the cost of usability. Because of the LCD screen the engineers must have thought: &#8216;Hey, this is a great way to pack away a lot of useless information in this car!&#8217; Now the driver will see different screens while driving and even needs a tutorial to explain all the functions. Why is this necessary?</p>
<p>I personally do like the idea of EcoGuide. Not all drivers will embrace this, because they like driving fast and in bursts. But more and more people will be proud to show of that they are indeed living green. This said: wouldn&#8217;t it be cool if you could take EcoGuide outside your car. Maybe the vines can be displayed on your carkey, so that people will know how green you really are.</p>
<p><object width="640" height="505" 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/5dRzx7YGBNM&amp;hl=nl&amp;fs=1&amp;rel=0" /><param name="allowfullscreen" value="true" /><embed width="640" height="505" type="application/x-shockwave-flash" src="http://www.youtube.com/v/5dRzx7YGBNM&amp;hl=nl&amp;fs=1&amp;rel=0" allowFullScreen="true" allowscriptaccess="always" allowfullscreen="true" /></object></p>
]]></content:encoded>
			<wfw:commentRss>http://johnnyholland.org/2008/12/fords-green-dashboard-tamagotchi/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Nissan&#8217;s concept car: Pivo</title>
		<link>http://johnnyholland.org/2008/11/nissans-concept-car-pivo/</link>
		<comments>http://johnnyholland.org/2008/11/nissans-concept-car-pivo/#comments</comments>
		<pubDate>Sat, 22 Nov 2008 10:31:47 +0000</pubDate>
		<dc:creator>Jeroen van Geel</dc:creator>
				<category><![CDATA[Observed]]></category>
		<category><![CDATA[Urban UX]]></category>
		<category><![CDATA[car]]></category>
		<category><![CDATA[concept]]></category>
		<category><![CDATA[future]]></category>
		<category><![CDATA[interface]]></category>

		<guid isPermaLink="false">http://johnnyholland.org/?p=493</guid>
		<description><![CDATA[<img width="220" height="160" src="http://johnnyholland.org/wp-content/uploads/2011/12/pivo.jpg" class="attachment-index-categories wp-post-image" alt="pivo" title="pivo" />It has been around since 2005, but is still interesting: the Nissan Pivo Concept Car. This weird looking vehicle owns [...]]]></description>
			<content:encoded><![CDATA[<img width="220" height="160" src="http://johnnyholland.org/wp-content/uploads/2011/12/pivo.jpg" class="attachment-index-categories wp-post-image" alt="pivo" title="pivo" /><p><img class="alignnone size-full wp-image-502" title="pivo-concept" src="http://johnnyholland.org/wp-content/uploads/pivo-concept.jpg" alt="" width="416" height="160" /><br />
It has been around since 2005, but is still interesting: the Nissan Pivo Concept Car. This weird looking vehicle owns some nifty technologies, changing the way we interact with the car. One of them is the ability to turn the cabin around in the direction you are driving, making parking a pleasure. And yes, the car can drive sideways.<span id="more-493"></span> To make this driving experience work they integrated an &#8216;Around View Monitor&#8217; which constantly generates a 360-degree view of the car&#8217;s surroundings on the dashboard.</p>
<a href="http://johnnyholland.org/wp-content/uploads/2005-nissan-pivo-concept-sa-top-studio-1280x960.jpg"><img class="alignnone size-full wp-image-494" title="Nissan Pivo" src="http://johnnyholland.org/wp-content/uploads/2005-nissan-pivo-concept-sa-top-studio-1280x960.jpg" alt="" width="500" height="375" /></a>
<p>But what makes it really interesting for Johnny is the way you interact with your navigation system, audio player and other technology. At Nissan they came up with the &#8220;Magic 4&#8243; concept, which is a new type of interface. Your hardware isn&#8217;t physically controlable anymore, but integrated in the car. Through a central display screen they can be controlled, but this display doens&#8217;t have a touchscreen or physical buttons&#8230; You simply have to point your finger at the IR system, while keeping your hands on the steering wheel. Pointing one finger will activate the first feature, while pointing three fingers will activate&#8230; the third (how surprising). And when you want to make the music louder, you simply motion your finger upwards. The display on the first Pivo was integrated directly below your windscreen, into the dashboard. While on the Pivo 2 it is a special screen again.</p>
<p>The dashboards of the Pivo 2 and Pivo:<br />
<a href="http://johnnyholland.org/wp-content/uploads/nissan_pivo_02.jpg"><img class="alignright size-medium wp-image-495" title="Nissan Pivo - dashboard" src="http://johnnyholland.org/wp-content/uploads/nissan_pivo_02-300x215.jpg" alt="" width="300" height="215" /></a><a href="http://johnnyholland.org/wp-content/uploads/nissan_pivo_dashboard.jpg"><img class="alignright size-medium wp-image-498" title="Nissan Pivo 2 - dashboard" src="http://johnnyholland.org/wp-content/uploads/nissan_pivo_dashboard-300x224.jpg" alt="" width="300" height="215" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://johnnyholland.org/2008/11/nissans-concept-car-pivo/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>The future of interaction. Is it multimodal?</title>
		<link>http://johnnyholland.org/2008/11/the-future-of-interaction-is-it-multimodal/</link>
		<comments>http://johnnyholland.org/2008/11/the-future-of-interaction-is-it-multimodal/#comments</comments>
		<pubDate>Tue, 11 Nov 2008 08:30:44 +0000</pubDate>
		<dc:creator>Utkarsh Seth</dc:creator>
				<category><![CDATA[Digital UX]]></category>
		<category><![CDATA[Featured]]></category>
		<category><![CDATA[Observed]]></category>
		<category><![CDATA[future]]></category>
		<category><![CDATA[interface]]></category>
		<category><![CDATA[multimodal]]></category>

		<guid isPermaLink="false">http://johnnyholland.org/?p=364</guid>
		<description><![CDATA[A look at multi sensor interaction.]]></description>
			<content:encoded><![CDATA[<img width="220" height="160" src="http://johnnyholland.org/wp-content/uploads/2011/12/point.jpg" class="attachment-index-categories wp-post-image" alt="point" title="point" /><img class="alignnone size-full wp-image-413" title="multimodal" src="http://johnnyholland.org/wp-content/uploads/multimodal.jpg" alt="" width="416" height="160" />
<p class="MsoNormal"><span>While using several of our senses in day-to-day life, we’re still limited by at-most one or two in our digital life… but behind the scenes researchers are working on the answer: multimodal interaction.</span> <span>Multimodal interaction gives user the liberty to interact with a system via more than a single human sense (touch, speech gesture etc). It is very much different from the traditional uni-modal interface where the interaction happens through one channel throughout. Multi-modal interaction has spread its wings to accommodate a wide gamut of users with a wide variety of profiles comprising of various ages. It has also addressed the issue of accessibility and universal use. The question now remains are how far have we come and where do we go now from here.</span><span id="more-364"></span></p>
<p class="MsoNormal"><span><strong>Introduction &amp; need of Multimodal interfaces</strong><br />
Remember December 9, 1968 when Douglas C. Engelbart made a first public debut of a cubical shaped block of plastic and used it for pointing and clicking? It went on to be called a mouse. Much has changed since then by the inclusion of multiple buttons on that plastic block and a scroll wheel at the center. Lasers, Bluetooth, and wireless technology rule the domain instead of the traditional wheel dancing around and getting stuck every now and then. The revolution was brought upon by the need of different interaction techniques as progress was made in the technological arena and human beings had to convey and receive data to/from the machine in multiple ways. </span></p>
<p class="MsoNormal"><span>In the last decade or so, the human-machine interaction has become more and more intricate. This is owed to the large amount of information coming along our way via multiple channels. The ever growing knowledge and the complexity of interaction have augmented the need for new ways of communication and interaction. The so called “information deluge” has been approached by researchers via integrating perceptual capabilities such as speech, vision, lip movement recognition etc. to the system. This type of interaction has been termed as Multi-modal interaction. </span></p>
<p class="MsoNormal"><span>In multi-modal style of interaction the system processes more than one input mode – such as speech, pen based input, touch, gestural information – in a parallel processing approach. This has given birth to a new paradigm in the world of computing and has crossed the limits of the traditional WIMP interfaces ((WIMP: Windows, Icons, Menu, Pointing Devices. An interaction style developed by XEROX and now used in all major UIs)) It has not only divided the information across multiple channels but has also allowed the human being to interact with the system in a more naturalistic kind of approach, where voice, gesture, pen based form a big part. One of the very simplest examples of such kind of system is a mobile phone which can record and react to touch, voice and tactical class of inputs.</span></p>
<p><strong>Comparison with WIMP style interaction</strong><span><br />
The traditional WIMP interfaces have the basic premise that the information can flow in and out of the system through a single channel or an event stream. This event stream can be in the form of input (mouse, keyboard etc) where the user enters data to the system and expects a feedback, or in the form of output (voice, visual etc) when the system responds. But the channel maintains its </span>singularity and can process information one at a time. For example, in today’s interaction the computer ignores the typed information (through a keyboard), when a mouse button is depressed.</p>
<p>This is very much different from a multimodal interaction where the system has multiple event streams and channels and can process information coming through various input modes acting parallel, such as those described above. For e.g in an IVR system, a user can either type of speak to navigate through the menu.</p>
<div id="attachment_377" class="wp-caption alignleft" style="width: 307px"><a href="http://johnnyholland.org/wp-content/uploads/telephone-rotary.jpg"><img class="size-medium wp-image-377" src="http://johnnyholland.org/wp-content/uploads/telephone-rotary.jpg" alt="Unimodal Interaction" width="297" height="199" /></a><p class="wp-caption-text">Unimodal Interaction</p></div>
<div id="attachment_376" class="wp-caption alignright" style="width: 280px"><a href="http://johnnyholland.org/wp-content/uploads/multi-modal.jpg"><img class="size-medium wp-image-376" src="http://johnnyholland.org/wp-content/uploads/multi-modal.jpg" alt="Multimodal Interaction" width="270" height="196" /></a><p class="wp-caption-text">Multimodal Interaction</p></div>
<h4><span><br />
The image on the left signifies a traditional unimodal system ((<a title="Left image" href="http://www.tribox.org/wp-content/uploads/2007/10/telephone-rotary.jpg">http://www.tribox.org/wp-content/uploads/2007/10/telephone-rotary.jpg</a>)) whereas the one on the right ((<a title="Right Image" href="http://www.stereoscopy.com/news/news-archive-8-2001.html">http://www.stereoscopy.com/news/news-archive-8-2001.html</a>)) denotes a multi-modal interaction. </span></h4>
<p class="MsoNormal"><span>Another noticeable difference lies in the fact that when traditional WIMP interfaces reside on a single machine, multimodal systems are generally spread across multiple networks and systems which all perform their specific action like speech processing, gesture recognition etc. </span></p>
<p class="MsoNormal"><span><strong>History &amp; Recent advances in Multi-modal interaction<br />
</strong>Richard A. Bolt (Architecture Machine Group, Massachusetts Institute of Technology) first introduced the concept of multi modal interaction in 1980. His research was called “Put that there” where he demonstrated a system which processed speech and touch pad pointing performing in a parallel way.One of the several examples which he demonstrated was by giving commands to “Create a blue square there”, with the intended location of “there” being pointed by a 2 dimensional cursor mark on the screen.</span></p>
<p><object width="425" height="344" 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/RyBEUyEtxQo&amp;hl=nl&amp;fs=1" /><param name="allowfullscreen" value="true" /><embed width="425" height="344" type="application/x-shockwave-flash" src="http://www.youtube.com/v/RyBEUyEtxQo&amp;hl=nl&amp;fs=1" allowFullScreen="true" allowscriptaccess="always" allowfullscreen="true" /></object></p>
<p class="MsoNormal"><span>Since then, many advances have been done in the way systems have changed in the way they process input. Simple mouse based and pen based inputs have been replaced by a richer way of communication by incorporating semantic information. Systems have become more complicated internally and now process dual modes of input. Keyboard and mouse based interactions have been disposed off. They have given way to lip movement recognition, gestural recognition systems and speech recognition systems.</span></p>
<p class="MsoNormal"><span> An example of a multimodal system has been developed at AT&amp;T labs in the form of a navigation system. ((<a href="http://www.research.att.com/~johnston/">http://www.research.att.com/~johnston/))</a></span></p>
<div id="attachment_382" class="wp-caption alignleft" style="width: 310px"><a href="http://johnnyholland.org/wp-content/uploads/device.jpg"><img class="size-medium wp-image-382" src="http://johnnyholland.org/wp-content/uploads/device-300x225.jpg" alt="Photo courtesy AT&amp;T Labs" width="300" height="225" /></a><p class="wp-caption-text">Photo courtesy AT&amp;T Labs</p></div>
<p class="MsoNormal"><span><strong>Uses of Multimodal system</strong><br />
The very nature of multimodal systems has expanded the world of computing by encompassing a more diverse spectrum of users and more unfavorable usage conditions. The introduction of this type of interaction has also given a choice to the users for which modality they want to use while interacting with a system. This proves to be very helpful as users have varied preferences while interacting with the system as to how do they wish to communicate. Apart from interaction preferences, multimodal interaction has also addressed a wide variety of individual differences such as different age groups, skill sets, mother tongue, cognitive styles, sensory impairments and so on.</span></p>
<p class="MsoNormal"><span>Example: A visually impaired person could use speech to communicate to the system. For faster responses, he/she could also use gestures. </span></p>
<p class="MsoNormal"><span>Another very common example of multimodal interaction is seen while driving and using a mobile phone. Distracting one-self from the road ahead, and dialing a number on the mobile phone could be very dangerous. The driver instead uses voice input to dial a number by suggesting a name already stored or speaking out a whole number. The system also gives auditory feedback so the driver does not have to look at the screen. </span></p>
<p class="MsoNormal"><strong>Future Directions</strong><span><br />
So what do we learn? How soon could we expect such an interaction being a part of our daily lives? Or before that, are we even ready to adapt? Or is the technology ready to make the interaction transparent? How does usability come into picture? All these questions are being answered. Research all around the world are going on to overcome challenges which are being faced. </span></p>
<p class="MsoNormal"><span>The current state of research has not produced robust implementations of algorithms and recognition based techniques. Further development of such interaction also involves a seamless behavior and synchronization between the input and output channels so that the user interacting does not enter a confused state. Another challenge would be to make the technology as much transparent as turning a knob of our living room. As much as the user is “aware” of the interaction, the less productive and efficient the interaction becomes.</span></p>
<p class="MsoNormal">
]]></content:encoded>
			<wfw:commentRss>http://johnnyholland.org/2008/11/the-future-of-interaction-is-it-multimodal/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Your body as an input device</title>
		<link>http://johnnyholland.org/2008/11/your-body-as-an-input-device/</link>
		<comments>http://johnnyholland.org/2008/11/your-body-as-an-input-device/#comments</comments>
		<pubDate>Wed, 05 Nov 2008 09:45:14 +0000</pubDate>
		<dc:creator>Jeroen van Geel</dc:creator>
				<category><![CDATA[Digital UX]]></category>
		<category><![CDATA[Urban UX]]></category>
		<category><![CDATA[body]]></category>
		<category><![CDATA[gesture-based]]></category>
		<category><![CDATA[interface]]></category>
		<category><![CDATA[paper]]></category>
		<category><![CDATA[research]]></category>

		<guid isPermaLink="false">http://johnnyholland.org/?p=322</guid>
		<description><![CDATA[<img width="220" height="160" src="http://johnnyholland.org/wp-content/uploads/2011/12/input.jpg" class="attachment-index-categories wp-post-image" alt="input" title="input" />Who isn&#8217;t hanging over his desk to read a text or view a picture on his computer screen? -to be [...]]]></description>
			<content:encoded><![CDATA[<img width="220" height="160" src="http://johnnyholland.org/wp-content/uploads/2011/12/input.jpg" class="attachment-index-categories wp-post-image" alt="input" title="input" /><p><img class="alignnone size-full wp-image-327" title="lean-forward" src="http://johnnyholland.org/wp-content/uploads/lean-forward.jpg" alt="" width="416" height="160" /><br />
Who isn&#8217;t hanging over his desk to read a text or view a picture on his computer screen? -to be honost&#8230; I&#8217;m doing it right now- The movement that you make as a result is almost exclusive for this reason (viewing details). And in a world where gesture-based interfaces are top notch, we could have expected some interesting experiments.<span id="more-322"></span></p>
<p>A.o. Chris Anderson from Carnegie Mellon University initiated a <a href="http://www.chrisharrison.net/projects/leanandzoom/index.html">research towards the possibilities to combine human behaviour with digital functions</a>. In this the digital function is the ability to zoom on your screen. In the video below you see what it actually looks like (<a href="http://www.chrisharrison.net/projects/leanandzoom/index.html">and/or read the paper</a>).</p>
<p>Everybody knows that it will definitely become irritating if your computer starts zooming in and out depending on your position&#8230; but this research doesn&#8217;t have to result in a 1:1 implementation. It would be interesting to put the researchers in one room with a physiotherapist and an interaction/industrial designer. I think they could come up with interaction solutions that can cut back RSI.</p>
<p><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="wmode" value="transparent" /><param name="allowFullScreen" value="true" /><param name="src" value="http://www.youtube.com/v/DXlCA995sjY&amp;fs=1" /><param name="allowfullscreen" value="true" /><embed width="640" height="518" type="application/x-shockwave-flash" src="http://www.youtube.com/v/DXlCA995sjY&amp;fs=1" wmode="transparent" allowFullScreen="true" allowfullscreen="true" /></object></p>
]]></content:encoded>
			<wfw:commentRss>http://johnnyholland.org/2008/11/your-body-as-an-input-device/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Future interfaces according to Hollywood</title>
		<link>http://johnnyholland.org/2008/10/future-interfaces-according-to-hollywood/</link>
		<comments>http://johnnyholland.org/2008/10/future-interfaces-according-to-hollywood/#comments</comments>
		<pubDate>Wed, 29 Oct 2008 16:49:59 +0000</pubDate>
		<dc:creator>Jeroen van Geel</dc:creator>
				<category><![CDATA[Digital UX]]></category>
		<category><![CDATA[interaction]]></category>
		<category><![CDATA[interface]]></category>
		<category><![CDATA[movie]]></category>

		<guid isPermaLink="false">http://johnnyholland.org/?p=209</guid>
		<description><![CDATA[<img width="220" height="160" src="http://johnnyholland.org/wp-content/uploads/2011/12/hollywood.jpg" class="attachment-index-categories wp-post-image" alt="hollywood" title="hollywood" />Not only games are a healthy source for innovative interface design. Hollywood also always tries to look into the future [...]]]></description>
			<content:encoded><![CDATA[<img width="220" height="160" src="http://johnnyholland.org/wp-content/uploads/2011/12/hollywood.jpg" class="attachment-index-categories wp-post-image" alt="hollywood" title="hollywood" /><p><img class="alignnone size-full wp-image-211" title="movie-interface" src="http://johnnyholland.org/wp-content/uploads/movie-interface.jpg" alt="" width="416" height="160" /><br />
Not only games are a healthy source for innovative interface design. Hollywood also always tries to look into the future and create impressive interfaces in their sci-fi and action movies. Most of the times the interfaces only have to look cool, and any professional would immediately spot the errors. But sometimes they are really impressive and cause jealous interaction designers, like in The Island and <span style="text-decoration: line-through;">Majority</span> Minority Report. A lot of these interfaces where <a href="http://www.coleran.com/">designed by Mark Coleran</a>. Check out what he creates<span id="more-209"></span></p>
<div><object width="520" height="437" 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.dailymotion.com/swf/k6meVGhYM5hQUqg5pd&amp;related=1" /><param name="allowscriptaccess" value="always" /><param name="allowfullscreen" value="true" /><embed width="520" height="437" type="application/x-shockwave-flash" src="http://www.dailymotion.com/swf/k6meVGhYM5hQUqg5pd&amp;related=1" allowFullScreen="true" allowScriptAccess="always" allowscriptaccess="always" allowfullscreen="true" /></object><br />
<strong><a href="http://www.dailymotion.com/video/x2a6cv_mark-coleran-interfaces-futuristes_creation">Mark Coleran : interfaces futuristes</a></strong><br />
<em>Geüpload door <a href="http://www.dailymotion.com/Imazine">Imazine</a></em></div>
<p>Another interface, which isn&#8217;t designed by Coleran, is the Minority Report interface. <a href="http://www.lukew.com/ff/index.asp">Luke Wroblewski</a> wrote an <a href="http://www.lukew.com/ff/entry.asp?104">article about this futuristic (but also realistic) interface</a>.<br />
<a href="http://johnnyholland.org/wp-content/uploads/minority-report-01.jpg"><img class="alignnone size-medium wp-image-210" title="minority-report-01" src="http://johnnyholland.org/wp-content/uploads/minority-report-01-200x300.jpg" alt="" width="200" height="300" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://johnnyholland.org/2008/10/future-interfaces-according-to-hollywood/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>

