<?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>Solid State UX &#187; Todd Toler</title>
	<atom:link href="http://www.solidstateux.com/author/ttoler/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.solidstateux.com</link>
	<description>The art and science of interaction design.</description>
	<lastBuildDate>Wed, 01 Sep 2010 13:25:39 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<image>
  <link>http://www.solidstateux.com</link>
  <url>http://www.solidstateux.com//wp-includes/favicon.ico</url>
  <title>Solid State UX</title>
</image>
		<item>
		<title>The User Experience of F1 Telemetry</title>
		<link>http://www.solidstateux.com/interaction-design/the-user-experience-of-f1-telemetry/</link>
		<comments>http://www.solidstateux.com/interaction-design/the-user-experience-of-f1-telemetry/#comments</comments>
		<pubDate>Mon, 30 Aug 2010 18:55:37 +0000</pubDate>
		<dc:creator>Todd Toler</dc:creator>
				<category><![CDATA[Interaction Design]]></category>
		<category><![CDATA[scienceUI]]></category>

		<guid isPermaLink="false">http://www.solidstateux.com/?p=1610</guid>
		<description><![CDATA[Formula One fans know that competing at auto racing&#8217;s highest level is as much an act of technological bravado as it is one of sport, and F1 teams are undoubtedly the sporting world&#8217;s must gluttonous consumers of information and statistics.  Telemetry refers to the automatic measurement and transmission of data  by wire, radio, or [...]]]></description>
			<content:encoded><![CDATA[<div id="attachment_1649" class="wp-caption alignleft" style="width: 352px"><img class="size-full wp-image-1649 " title="brakes" src="http://www.solidstateux.com/wp-content/uploads/2010/08/brakes.png" alt="" width="342" height="218" /><p class="wp-caption-text">Despite the glowing brakes, you can&#39;t tell much about an F1 car&#39;s performance by just looking at it.</p></div>
<p>Formula One fans know that competing at auto racing&#8217;s highest level is as much an act of technological bravado as it is one of sport, and F1 teams are undoubtedly the sporting world&#8217;s must gluttonous consumers of information and statistics.  Telemetry refers to the automatic measurement and transmission of data  by wire, radio, or other means from a remote source &#8211; in this case, an F1 racing car moving at speeds up to 250mph.  Massive amounts of data are involved.  For example, 150,000 measurements are made by the Williams F1 BMW FW26&#8217;s on-board  computer from almost 200 separate sensors on the car during a typical test run.  All of this is shipped back to the pit lanes via live radio transmission or downloaded from the car&#8217;s on-board computer, and is then sent to engineers back home in the UK control room in Woking on dedicated pipes of fiber optics.   (There is a good reason F1 teams seek out sponsorships from telecoms companies such as Vodaphone.)  During actual races, around 25 key functions are actively monitored, with about 1MB of data per second sent back from the car.  Some stats won&#8217;t surprise you since you can monitor them on your own vehicle&#8217;s dashboard, such as engine revs, water and oil temperatures, ground speed and fuel.   However, you are unlikely to have a team of analysts scrutinizing the exact moment of your gear changes, your tire temperature, or your breaking efforts.   What do the interfaces look like that these engineers are using?</p>
<p><span id="more-1610"></span></p>
<div id="attachment_1612" class="wp-caption aligncenter" style="width: 610px"><a href="http://www.nytimes.com/2010/06/27/automobiles/27TELEMETRY.html"><img class="size-large wp-image-1612 " title="F1-Williams_telemetry" src="http://www.solidstateux.com/wp-content/uploads/2010/07/F1-Williams_telemetry-600x415.png" alt="" width="600" height="415" /></a><p class="wp-caption-text">Photo of McLaren&#39;s Data Operations Center from a June 24,2010 NYTimes article.</p></div>
<p>The data from the car&#8217;s engine control unit (ECU) and a panoply of other sensors is, of course, dense and multivariate.  This being sport, those that need to interpret the data need to do so in real-time, as a quick decision may affect the outcome of the race.  The display configurations need to be highly flexible and personal, and show powerful relationships through visualizations.  McLaren engineers are so good at interpreting data like this in order to understand complex systems that they have been involved in modeling air-traffic and taxi-ways at Heathrow, the world&#8217;s busiest airport, as well as streamlining emergency room traffic at a London hospital.   What sorts of fancy software do they use? For the most part, the race engineers use MS Excel, which is hooked via ODBC to a special real-time relational database served directly from the pit lanes.   (To be exact, they use a special racing-oriented client built on top of Excel, typically one of two variants provided from McLaren Electronic Systems.   One is called ATLAS, the other is called System Monitor.  Both clients work with a special pair of servers connected to an advanced data acquisition system.  All teams use the same basic telemetry rig during the race as part of F1 regulations since 2008, but are free to use what they want during testing.)</p>
<p>ATLAS breaks out the various measures from the data acquisition system into three generic categories:</p>
<ul>
<li>Engine:  Revs per minute, fuel and oil pressure, water, oil, and exhaust temperatures, battery voltage, inlet air temperatures, and throttle position sensor.</li>
<li>Chassis:  Wheel speed, steering angle, braking and cornering g-forces, damper movement, brake pressure and temperature, suspension loads, tire pressure and temperature, and various air flow and air pressure measures around key points of the car.</li>
<li>Driver: basically anything controlled by the driver, such as throttle, gear, steering angle, and brake pressure.</li>
</ul>
<p>The sensors basically measure &#8220;anything and everything that  moves or gets warm,” according to Sir Frank Williams in a recent <a href="http://www.nytimes.com/2010/06/27/automobiles/27TELEMETRY.html">NYTimes article</a> on the subject.  Movement is measured through instruments such as dynamometers and air flow sensors.  Heat is measured with non-contact infra-red imaging (via thermal imaging, or thermography) and direct contact thermometers. The data from each sensor is split off as a separate &#8220;channel&#8221;, which the engineers can configure in their ATLAS client software.  When an engineer is configuring their display, they have a choice of display options for any given data-stream.   A single channel or combination of overlaid channels can be chosen for each tile in the monitoring interface.  Time-series plots, waveforms,  scatterplots,  and histograms are popular choices to visualize the datastreams themselves.  3d wireframe maps of the car and 2d maps of the circuit are common display backgrounds to data-map against.  Often two or more channels are overlaid &#8211; such as the delta time between laps over braking pressure &#8211; in order to tell a story with the data.  In order to do this, disparate measures must share a common scale &#8211; such as % based on pre-programmed thresholds.   This leads to a climate where each screen is set up to that users&#8217; preference &#8211; not unlike the market data terminals configured for financial traders.</p>
<div id="attachment_1625" class="wp-caption aligncenter" style="width: 507px"><img class="size-full wp-image-1625" title="an_atlas_waveform" src="http://www.solidstateux.com/wp-content/uploads/2010/08/an_atlas_waveform.png" alt="Example of a waveform visualization on an F1 datastream in the Atlas client." width="497" height="327" /><p class="wp-caption-text">Example of a waveform visualization using a datastream from an F1 car.  The software is Atlas, which is based on MS Excel connected to a real-time database via ODBC.</p></div>
<p style="text-align: center;">
<p>Race engineers are basically focused on two areas:  1) monitoring anything that can cause the car to break down, such as gearbox and various hydraulic temperatures, and 2) looking at areas that can be tuned during the race, such as the car&#8217;s differential (which allows the two rear wheels to spin at different rates and is crucial for things like corner entry and exit).   This year in F1 the regulations allow telemetry to be only one way -meaning that engineers can no longer radio changes directly to the car &#8211; but they use the information coming from the car to communicate strategy to the driver and make any changes they can in the pit lanes.  Drivers use the telemetry data to study their own input, such as braking, steering trajectories, and throttle.   You will see drivers looking at &#8220;traces&#8221; in the pit lanes to help monitor and improve their performance.</p>
<div id="attachment_1633" class="wp-caption aligncenter" style="width: 610px"><a href="http://www.jamesallenonf1.com/tag/f1-technical/"><img class="size-large wp-image-1633" title="telemetry_traces" src="http://www.solidstateux.com/wp-content/uploads/2010/08/telemetry_traces-600x340.png" alt="" width="600" height="340" /></a><p class="wp-caption-text">Example of the telemetry &quot;traces&quot; of driver inputs such as steering, braking, and throttle.  source: James Allen on F1</p></div>
<p>You will see, in any bank of monitors focused on telemetry data, that   about half of the screens have a black background and half of them have a   white background.  The black background displays tend to be time-series plots where the most important information to follow are the wavy lines &#8211; which are often high resolution, very subtly distinguished in terms of color, and closely packed to one another.  The black background provides excellent contrast against colors with high luminosity, such as yellow, or the alerting colors of green and red.  White background displays tend to be used for numeric data that is viewed in grid form, providing a quieter environment of increased scannability and readability.  There are no hard and fast rules here, however.  Partly the black backgrounds are cultural &#8211; a holdover from days when serious looking interfaces were called &#8220;terminals&#8221; and had a look and feel to match.</p>
<div id="attachment_1638" class="wp-caption aligncenter" style="width: 610px"><img class="size-large wp-image-1638 " title="telemetry_traces_3ng" src="http://www.solidstateux.com/wp-content/uploads/2010/08/telemetry_traces_3ng-600x503.png" alt="Telemetry traces of a single lap at Silverstone, shown as a histogram from logged data." width="600" height="503" /><p class="wp-caption-text">Telemetry traces from a single lap at Silverstone, displayed as a time-series plot from logged data.  Laps are marked with the thin purple lines (that extend above and below the grid lines.) Note how, as with many time-series data visualizations, the mere passage of time is not a good explanatory variable.  Things look very similar from the &quot;10,000 foot view.&quot;</p></div>
<p style="text-align: center;">
<div id="attachment_1639" class="wp-caption aligncenter" style="width: 610px"><img class="size-large wp-image-1639  " title="telemetry_traces4ng" src="http://www.solidstateux.com/wp-content/uploads/2010/08/telemetry_traces4ng-600x444.png" alt="" width="600" height="444" /><p class="wp-caption-text">Zooming in on turn 1 at Silverstone (&quot;Copse Corner&quot;.)  The Blue line is the throttle, the white line is the engine RPM, and the yellow line is the road speed.  You&#39;ll notice that road speed and throttle are tightly correlated. This is because F1 cars have very low inertia (they slow down rapidly when not accelerating).</p></div>
<p style="text-align: center;">
<div id="attachment_1642" class="wp-caption aligncenter" style="width: 610px"><img class="size-large wp-image-1642   " title="green_and_red_indicator" src="http://www.solidstateux.com/wp-content/uploads/2010/08/green_and_red_indicator1-600x475.png" alt="" width="600" height="475" /><p class="wp-caption-text">A real-time car monitoring interface is set up to warn the race engineer about key reliability indicators.   Green and red warning lights are used to create awareness of when conditions are within a safety threshold, and supporting data is nearby for troubleshooting.  Notice how some of the telemetry channels are grouped in buckets corresponding to the warning lights, but that they are spatially discontiguous.  Other channels do not correspond to the warning lights and are themed separately, such as &quot;car status.&quot;  The telemetry interfaces are, as a rule, highly personalized.</p></div>
<p>F1 engines are different from road car engines in a few notable ways, one of them being increased TE (thermal efficiency).  Of the fuel energy that is initially put into a cylinder, only about 1/3 emerges as horsepower in any engine &#8211; but an F1 car optimizes this by at least 30% using minutely controlled ignition timing, fuel flow to the cylinders, air flow, and via advanced materials in the engine&#8217;s construction.    All of this is accomplished through careful monitoring of the data in accordance with each team&#8217;s performance model.   F1 engines also rev outrageously high compared to an engine on a road car, or even other racing cars &#8211; up to 18K RPMs.  This generates an incredible amount of mechanical wear, which is another reason why F1 engines are carefully monitored during their short life spans (about 400km!).   Some parts, such as valves, need to be very lightweight to handle such rapid and repetitive movement.  This can create complex engine designs where software is needed to deal with the fragility.  But while all  F1 teams use the same information from the same ECU now, the exact data used to tune the engine varies and is a key part of race engineering strategy.</p>
<div id="attachment_1646" class="wp-caption aligncenter" style="width: 610px"><img class="size-large wp-image-1646 " title="rFactor" src="http://www.solidstateux.com/wp-content/uploads/2010/08/rFactor-600x479.png" alt="" width="600" height="479" /><p class="wp-caption-text">It&#39;s hard to snoop on a real F1 team&#39;s telemetry strategy due to the competitive nature of the sport, but enthusiasts can use the rFactor simulation software to supposedly get close to the real thing.  Here&#39;s a fictional look at various engine temperature paramaters and how they respond to subtle changes to factors such as air intake, etc.</p></div>
<p>Some Formula One teams now provide the telemetry data from the car to the public, and an interesting sub-culture of mash-ups and experimental visualizations has emerged.</p>
<p style="text-align: center;">
<div id="attachment_1645" class="wp-caption aligncenter" style="width: 610px"><a href="http://blog.ouseful.info/2010/04/07/f1-data-junkie-driver-dna/"><img class="size-large wp-image-1645   " title="mashup3" src="http://www.solidstateux.com/wp-content/uploads/2010/08/mashup3-600x549.png" alt="" width="600" height="549" /></a><p class="wp-caption-text">A Driver DNA chart for Lewis Hamilton - not based on his biology, of course, but his driving habits such as throttle and braking.  This is an example of the sort of experimental visualizations that are now popping up since McLaren has made their telemetry stats public.  Source: OUseful.info </p></div>
<p>Further Reading from Around the Web:</p>
<p><a href="http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0000ck">Ask E.T.:  Formula 1 real-time telemetry (a discussion on Eward Tufte&#8217;s site)</a></p>
<p><a href="http://www.jamesallenonf1.com/tag/f1-technical/">F1 Technical: James Allen on F1 </a></p>
<p><a href="http://www.wired.co.uk/wired-magazine/archive/2010/04/features/work-smarter-mclaren?page=all">Work Smarter: McLaren (From Wired UK) </a></p>
<p><a href="http://www.babelgum.com/113455/telemetry-an-f1-car.html">Video: Telemetry in an F1 Car, Babelgum</a></p>
<p><a href="http://">Racing Under a Watchful Eye that&#8217;s a Thousand Miles Away (NY Times)</a></p>
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
]]></content:encoded>
			<wfw:commentRss>http://www.solidstateux.com/interaction-design/the-user-experience-of-f1-telemetry/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>10 More Great Interaction Designs &#8211; in Cut and Folded Paper</title>
		<link>http://www.solidstateux.com/interaction-design/10-more-great-interaction-designs-in-cut-and-folded-paper/</link>
		<comments>http://www.solidstateux.com/interaction-design/10-more-great-interaction-designs-in-cut-and-folded-paper/#comments</comments>
		<pubDate>Thu, 17 Jun 2010 21:19:28 +0000</pubDate>
		<dc:creator>Todd Toler</dc:creator>
				<category><![CDATA[Interaction Design]]></category>

		<guid isPermaLink="false">http://www.solidstateux.com/?p=1549</guid>
		<description><![CDATA[My take on simple, satisfying interaction designs made out of that most humble of all materials &#8211; paper &#8211; is my most trafficked blog post ever, so I&#8217;ve gone out and found 10 more examples for you.  To begin with part one, go here.  Otherwise, continue after the jump.

1.Micro-fluidic Diagnostic Sheets , by George Whitesides [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignleft size-thumbnail wp-image-1565" title="dream_ball_2" src="http://www.solidstateux.com/wp-content/uploads/2010/06/dream_ball_2-150x150.png" alt="dream_ball_2" width="150" height="150" />My take on simple, satisfying interaction designs made out of that most humble of all materials &#8211; paper &#8211; is my most trafficked blog post ever, so I&#8217;ve gone out and found 10 more examples for you.  To begin with part one, go <a href="http://www.solidstateux.com/reviews/10-great-interaction-designs-in-cut-folded-paper/">here</a>.  Otherwise, continue after the jump.</p>
<p><span id="more-1549"></span></p>
<p>1.Micro-fluidic Diagnostic Sheets , by George Whitesides Lab @ Harvard University</p>
<p style="text-align: left;">Simple paper sheets that use advanced chemistry to cheaply diagnose a range of diseases.  A small drop of liquid, such as blood or urine, wicks in through the corner or back of the paper and passes through channels to special testing zones.  Not only are they small, simple, and inexpensive &#8211; they are beautiful.<br />
<img class="aligncenter size-large wp-image-1551" title="white_sides" src="http://www.solidstateux.com/wp-content/uploads/2010/06/white_sides-447x600.png" alt="white_sides" width="358" height="480" /></p>
<p>2.Teabag Coasters , by Yuree S Lim and Jleun Yang</p>
<p>These may not help to cure world diseases, but these delightful teabag covers also embrace the science of micro-fluidics.   Placing a soaked bag on top of the empty package it came in reveals artwork.  I love the way they embrace a common user behavioral &#8220;externality&#8221; (e.g. resting the wet teabag on the package it came in) and turn it into beautiful, interactive fun.</p>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-1553" title="teabag_1" src="http://www.solidstateux.com/wp-content/uploads/2010/06/teabag_1.png" alt="teabag_1" width="430" height="322" /><img class="aligncenter size-full wp-image-1554" title="teabag_2" src="http://www.solidstateux.com/wp-content/uploads/2010/06/teabag_2.png" alt="teabag_2" width="428" height="343" /></p>
<p>3. Universal Packing System by <a href="http://www.yankodesign.com/2010/04/20/ups-universal-packaging-system-recyclable-corrugated-cardboard-sheet-by-patrick-sung/">Patrick Sung</a></p>
<p>If Buckminister Fuller worked for a while in the Amazon.com shipping and distribution center, maybe he would have come up with something like this &#8211; a single sheet of triangularly scored cardboard that can be folded to fit nearly anything.  The material is designed to save wasted space in those UPS trucks, although I&#8217;d think that packages wrapped in this stuff would be about as easy to stack as wet cats.</p>
<p style="text-align: center;"><img class="aligncenter size-large wp-image-1555" title="universal_packing_system" src="http://www.solidstateux.com/wp-content/uploads/2010/06/universal_packing_system-600x420.png" alt="universal_packing_system" width="480" height="336" /></p>
<p><img class="aligncenter size-full wp-image-1572" title="UPack2" src="http://www.solidstateux.com/wp-content/uploads/2010/06/UPack2.png" alt="UPack2" width="495" height="327" /></p>
<p>4. &#8220;View Source&#8221; Business Cards by <a href="http://www.spotofcolour.co.uk/">Spot of Color</a><a href="http://www.yankodesign.com/2010/04/20/ups-universal-packaging-system-recyclable-corrugated-cardboard-sheet-by-patrick-sung/"></a></p>
<p>This business card peels away to reveal its HTML source code.</p>
<p style="text-align: center;"><img class="aligncenter size-large wp-image-1556" title="view_source" src="http://www.solidstateux.com/wp-content/uploads/2010/06/view_source-600x426.png" alt="view_source" width="480" height="341" /></p>
<p>5. The Dream Ball Project by <a href="http://http://www.unplugdesign.com/">Unplug Design</a></p>
<p>This is packaging for aid relief which is cleverly designed to be re-lifed into a football for poor children.  In the world of extemporaneous sporting equipment, this beats a plastic bag full of coconut palm leaves, hands down.</p>
<p><img class="aligncenter size-large wp-image-1565" title="dream_ball_2" src="http://www.solidstateux.com/wp-content/uploads/2010/06/dream_ball_2-430x600.png" alt="dream_ball_2" width="430" height="600" /><img class="aligncenter size-full wp-image-1566" title="dream_ball_1" src="http://www.solidstateux.com/wp-content/uploads/2010/06/dream_ball_1.png" alt="dream_ball_1" width="565" height="430" /></p>
<p>6. Polyhedral &#8220;Fractal Pack&#8221; by Laurence Gregoire</p>
<p>This proposal for chocolate packaging features a triangular package that unwinds into a string of 10 connected prism-shaped boxes.</p>
<p><img class="aligncenter size-large wp-image-1568" title="polyhedral" src="http://www.solidstateux.com/wp-content/uploads/2010/06/polyhedral-600x218.png" alt="polyhedral" width="600" height="218" /></p>
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<p>7. Obamitas  from <a href="http://www.neosbrand.com/">Neosbrand</a></p>
<p>Lift up the lid from this cute looking cookie package, and the four walls spill out like the pedals of a flower to reveal messages of hope from President Obama.</p>
<p><img class="aligncenter size-large wp-image-1571" title="obamitas" src="http://www.solidstateux.com/wp-content/uploads/2010/06/obamitas-415x600.png" alt="obamitas" width="415" height="600" /></p>
<p>8. Wolven Lenticular Book Cover</p>
<p>Some interactive paper technologies that have been around since the 1940&#8217;s are those based on 3D holographic and lenticular printing, which display different images depending on which angle the images are viewed.   Such covers are making a huge comeback this year in publishing, with Random House&#8217;s major new release &#8220;The Passage&#8221; by Justin Cronin leading the way.  I like this one the best &#8211; the two images are bold, hi-res, and strikingly differentiated.</p>
<p><img class="aligncenter size-full wp-image-1573" title="wolven" src="http://www.solidstateux.com/wp-content/uploads/2010/06/wolven.png" alt="wolven" width="393" height="400" /></p>
<p>9.  Brown Tedstrom Holiday Card by <a href="http://ebd.com/">EBD</a></p>
<p>Concertina folds are an interactive paper standby.  I love the micro-macro pattern displayed here, as the birds in the opening image are used to punctuate and add lift to the words within the card.  Classic and subtle, but satisfying.</p>
<p><img class="aligncenter size-large wp-image-1574" title="concertina_png" src="http://www.solidstateux.com/wp-content/uploads/2010/06/concertina_png-600x250.png" alt="concertina_png" width="600" height="250" /></p>
<p>10. Miss June 3D Centerfold by Playboy</p>
<p>With the movie Avatar and 3D television all the rage, it&#8217;s not surprising that people in the paper-pushing business want to get in on the act.  What&#8217;s more delightful than the airbrushed, gauzy lensed goodness of playmate Hope Dworacyzk jumping out of the page at you.  A cheap gimmick if you wear your interaction designers&#8217; hat, but a brilliant one if you put your marketing one on &#8211; and really, what&#8217;s the difference?</p>
<p><img class="aligncenter size-large wp-image-1575" title="hope_playboy" src="http://www.solidstateux.com/wp-content/uploads/2010/06/hope_playboy-600x299.png" alt="hope_playboy" width="600" height="299" /></p>
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<h4>Other Resources</h4>
<p><img class="alignleft size-medium wp-image-1590" title="box_bottle_bag" src="http://www.solidstateux.com/wp-content/uploads/2010/06/box_bottle_bag-271x300.png" alt="" width="158" height="180" /><a id="aptureLink_TtB9x4pVEk" href="http://www.amazon.com/gp/product/1600614191?tag=sostux-20">Box Bottle Bag : the world&#8217;s best packaging design</a></p>
<p>by The Dieline</p>
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
]]></content:encoded>
			<wfw:commentRss>http://www.solidstateux.com/interaction-design/10-more-great-interaction-designs-in-cut-and-folded-paper/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>R/GA Has Stage Presence in Corporate Website&#8217;s Design</title>
		<link>http://www.solidstateux.com/reviews/rga-has-stage-presence-in-corporate-website-design/</link>
		<comments>http://www.solidstateux.com/reviews/rga-has-stage-presence-in-corporate-website-design/#comments</comments>
		<pubDate>Thu, 03 Jun 2010 20:50:33 +0000</pubDate>
		<dc:creator>Todd Toler</dc:creator>
				<category><![CDATA[Reviews]]></category>
		<category><![CDATA[consulting firm]]></category>
		<category><![CDATA[corporate sites]]></category>
		<category><![CDATA[website reviews]]></category>

		<guid isPermaLink="false">http://www.solidstateux.com/?p=1531</guid>
		<description><![CDATA[Dave Malouf coined a prescient phrase in the title of a recent blog post regarding the design of websites.  It&#8217;s not really a page anymore, but more of a stage. &#8220;Like the real stage itself,&#8221; he wrote, &#8220;we can create sub-stages where sub-dominant contexts have great significance and focus if only but for a short [...]]]></description>
			<content:encoded><![CDATA[<div id="attachment_1532" class="wp-caption alignleft" style="width: 310px"><a href="http://www.rga.com"><img class="size-medium wp-image-1532   " title="home1" src="http://www.solidstateux.com/wp-content/uploads/2010/06/home1-300x215.png" alt="R/GA's Corporate Website is a radical design in IA terms, hiding in plain site." width="300" height="215" /></a><p class="wp-caption-text">R/GA&#39;s main corporate website has a radical design in information architecture terms, which it hides in plain sight.</p></div>
<p>Dave Malouf coined a prescient phrase in the title of a recent blog <a href="http://bit.ly/cG4GB7">post</a> regarding the design of websites.  <em>It&#8217;s not really a page anymore, but more of a stage.</em> &#8220;Like the real stage itself,&#8221; he wrote, &#8220;we can create sub-stages where sub-dominant contexts have great significance and focus if only but for a short while, while contextually relevant to the whole.&#8221;  This is a tidy way of characterizing the very essence of the <a id="aptureLink_nhI5SXM7oC" href="http://en.wikipedia.org/wiki/Rich%20Internet%20application">RIA</a> movement, and an excellent conceptual framework for understanding the information architecture of the post-page web.   Web designers have traditionally constructed virtual buildings, not narratives, out of information &#8211; with pages as their rooms and sitemaps and breadcrumbs as their planning tools and system of wayfinders. But this is changing fast and stagecraft is soon to become a key skill of all employed web IAs.</p>
<p><span id="more-1531"></span>Perhaps the most subtle and clear evidence of this shift towards the modal and the temporal over the structural is in the interactive agency, R/GA&#8217;s, corporate website.  This site looks absolutely basic.  Mostly white space and type, it fetishizes a simpler time and a simpler web.  In fact, it is the anti-R/GA site, avoiding just the types of bells and whistles the agency dishes out for it&#8217;s high-end clients like Nike, Nokia, and HBO.  There is no fancy photography, no use of animations, not a single gradient fill or rounded corner, not one lightbox overlay, and &#8211; perhaps a first for an R/GA design &#8211; no homepage carousel.   In fact, its fanciest interaction is that most old-school of all in-page transitions &#8211; the anchor-link.</p>
<div id="attachment_1533" class="wp-caption alignleft" style="width: 610px"><img class="size-large wp-image-1533" title="home_scroll_upwards" src="http://www.solidstateux.com/wp-content/uploads/2010/06/home_scroll_upwards-600x436.png" alt="The site is comprised of one large home page that scrolls under a fixed upper pane where the navigation lives.  All interior pages are launched modally from this page." width="600" height="436" /><p class="wp-caption-text">The site is comprised of one large home page that scrolls under a fixed upper pane where the navigation lives.  All interior pages are launched modally from this page.</p></div>
<p>Yet, on my first visit, I overlooked the subtle charms of the site.  In fact, it took me a minute of poking around to realize the site has no persistent global navigation that extends to it&#8217;s interior pages (unless you ask for it by hovering over the logo in the upper left), no breadcrumbs to keep a user oriented, and not even category pages!  It is simply one long home page, divided into sections that are scrollable via a set of links in a fixed upper pane over a scrollable body.  From this home page, one launches the site&#8217;s content one sub-dominant context at a time.</p>
<p>This design is simple enough that it feels radical in this day and age.  In fact, I can&#8217;t imagine one of their fancy brand clients agreeing to it, which must be why they dogfooded the design for their own company website. Yet it is surprisingly satisfying to use, with it&#8217;s subtle animated transitions adding true delight &#8211; perhaps because they are used so sparingly.  I have one minor critique &#8211; which is that the X&#8217;s used to close out of modal pages are more of a designer&#8217;s artifice than something a user would understand.  The X is too large to suggest a familiar window control, it occurs too far to the right, and though it looks cool, it takes too long to realize that the page is indeed modal.  Overall, this is a great design, hiding in plain site.</p>
<div id="attachment_1536" class="wp-caption alignleft" style="width: 610px"><img class="size-large wp-image-1536" title="detail_closed_top_nav" src="http://www.solidstateux.com/wp-content/uploads/2010/06/detail_closed_top_nav-600x426.png" alt="All content is luanched modally.  Notice the lack of persistent global navigation, encouraging the user to close out and return to previous context." width="600" height="426" /><p class="wp-caption-text">All content is launched modally.  Notice the lack of persistent global navigation, encouraging the user to close out and return to previous context.</p></div>
<div id="attachment_1539" class="wp-caption alignleft" style="width: 610px"><img class="size-large wp-image-1539" title="news_list" src="http://www.solidstateux.com/wp-content/uploads/2010/06/news_list-600x452.png" alt="Even list pages are launched modally.  Which allows for the unusual modal-on-modal if a user opens a news item from here." width="600" height="452" /><p class="wp-caption-text">Even list pages are launched modally.  Which allows for the unusual modal-on-modal if a user opens a news item from here.</p></div>
<div id="attachment_1540" class="wp-caption alignleft" style="width: 610px"><img class="size-large wp-image-1540" title="case_study" src="http://www.solidstateux.com/wp-content/uploads/2010/06/case_study-600x416.png" alt="Such an &quot;anti-design&quot; for a fancy agency serves a purpose - it makes the client work look that much more striking in the case study area of the site." width="600" height="416" /><p class="wp-caption-text">Such an &quot;anti-design&quot; for a fancy agency serves a purpose - it makes the client work look that much more striking in the case study area of the site.</p></div>
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
]]></content:encoded>
			<wfw:commentRss>http://www.solidstateux.com/reviews/rga-has-stage-presence-in-corporate-website-design/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>How to Name Your Website and Write A Tagline like a Pro</title>
		<link>http://www.solidstateux.com/reviews/how-to-name-your-website-and-write-a-tagline-like-a-pro/</link>
		<comments>http://www.solidstateux.com/reviews/how-to-name-your-website-and-write-a-tagline-like-a-pro/#comments</comments>
		<pubDate>Mon, 24 May 2010 15:00:09 +0000</pubDate>
		<dc:creator>Todd Toler</dc:creator>
				<category><![CDATA[Interaction Design]]></category>
		<category><![CDATA[Reviews]]></category>
		<category><![CDATA[UX-Driven Company]]></category>
		<category><![CDATA[book reviews]]></category>
		<category><![CDATA[online branding]]></category>

		<guid isPermaLink="false">http://www.solidstateux.com/?p=829</guid>
		<description><![CDATA[I am a reluctant brander. Like most User Experience designers, I like to think of myself as a high-minded design thinker &#8211; not a marketer.  You know the arguments.  Designers  think about solving real human problems and obsess on the essence of something&#8217;s purpose.  Marketers define essence as that which gets noticed and remembered. Designers [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignleft size-medium wp-image-1428" title="brand_it_yourself" src="http://www.solidstateux.com/wp-content/uploads/2009/10/brand_it_yourself-242x300.png" alt="brand_it_yourself" width="242" height="300" />I am a reluctant brander. Like most User Experience designers, I like to think of myself as a high-minded <em>design</em> thinker &#8211; not a marketer.  You know the arguments.  Designers  think about solving real human problems and obsess on the essence of something&#8217;s purpose.  Marketers define <em>essence</em> as that which gets noticed and remembered. Designers are empathically creative. Marketers are exploitatively creative.  Designers seek timeless truths.  Marketers are trend-chasers.  Designers live in Brooklyn and sell artisanal pickles between freelance gigs.  Marketers live in Manhattan and coin phrases like FroYo.   Yet it didn&#8217;t take me long working in this field to realize that making such distinctions is wrong-headed.  If anything, I relate more to the marketer these days.  Marketers trend  towards the pragmatic.  Designers? At their worst: ideologues,  aesthetes,  navel-gazers.  Design and marketing ultimately chase the same goal, &#8220;marketplace magic,&#8221; so why not think like a good branding brain in order to name and position your digital business?  At a minimum you should know a little about the work of Lynn Altman before you set about trying to name your site and write a tagline for it.  Her firm, <a href="http://www.brandnow.com/">BrandNow</a>, and her book, <a id="aptureLink_m8iEYCwHMd" href="http://www.amazon.com/gp/product/1591841062?tag=sostux-20">Brand it Yourself</a>, are excellent starting points for demystifying the creative process behind successful product branding.</p>
<p><span id="more-829"></span></p>
<h4>The First Key to Success &#8211; Counting to One</h4>
<p>Like design, branding involves creating an illusion of clarity  out of that which is fundamentally indeterminate.   Whether you are publishing a blog or building iPhone apps, you are looking for a singular, but simple and strong, idea at the center.  Or to put it Altman&#8217;s terms, you should learn to count to one.   &#8220;We don&#8217;t buy a shampoo that doubles as a face wash and a hand soap,&#8221; she writes.  Consumers want to believe, whether it is true or not, that &#8220;certain brands and certain products perform best at certain tasks.&#8221;   Domino&#8217;s Pizza built their mega-brand on a single promise &#8211; delivery in under 30 minutes.  There was no mention of whether the pizza was also delicious.  Less successfully, Advil tried to position their product to the marketplace with two core benefits. <em>Fast. Strong. Advil.</em> &#8220;Do you remember that campaign?&#8221; Altman asks.  &#8220;Of course you don&#8217;t.  Neither does anyone else.&#8221;</p>
<p>Practicing this sort of reductionism is harder than it sounds.  Odds are that your product or website does more than one thing well, or at least that you want it to.  For instance, if you think your express passport service is both easy and fast, you will be hard-pressed to give up one of those benefits.  You may make the mistake of naming your service ABC Passport Express as a result.  &#8220;ABC&#8221; connotes easiness and guarantees good phone book placement (a valuable business benefit before Google came along in 1997), and &#8220;express&#8221; sounds fast.  Good, right?  No, in fact, because you will probably  lose out to your more focused competition, RushMyPassport.com, who commits to the single benefit of fast turnaround.  Being perceived as having one clear benefit usually wins the battle for the prospect&#8217;s mind &#8211; which is all that matters.</p>
<div id="attachment_1431" class="wp-caption aligncenter" style="width: 534px"><img class="size-full wp-image-1431    " title="ABC_Passport_Express" src="http://www.solidstateux.com/wp-content/uploads/2009/10/ABC_Passport_Express.png" alt="ABC_Passport_Express" width="524" height="415" /><p class="wp-caption-text">The name, &quot;ABC Passport Express,&quot; simultaneously promises ease and speed of service, not to mention the benefits of being local area specialists as captured in their tagline.  The result is generic.</p></div>
<p style="text-align: center;">
<div id="attachment_1432" class="wp-caption aligncenter" style="width: 511px"><img class="size-full wp-image-1432  " title="rush_my_passport" src="http://www.solidstateux.com/wp-content/uploads/2009/10/rush_my_passport.png" alt="RushMyPassport.com focuses on one core promise, speed of turnaround time, and creates a coordinated impression that this is what they do - get your passport fast." width="501" height="407" /><p class="wp-caption-text">RushMyPassport.com focuses on one core promise, speed of turnaround time, and creates a coordinated impression that this is what they do - get you your passport fast.</p></div>
<h4>The Second Key to Success &#8211; Work Fast and Loose (at least at the beginning)</h4>
<p>Ok. So now you can count to one, but how do you arrive at the <em>right</em> one? The most sure-fire way is to start with the many.  Ideas are cheap, so you should generate lots of them, and you should do it fast.   The design firm IDEO, more famous for their brainstorming methods than any other design firm in history, once re-designed that most familiar and time-tested of objects, the supermarket shopping cart, in only 5 days.   &#8220;Maybe we should acknowledge it&#8217;s kind of insane to do an entire project in just a week,&#8221; said Peter Skillman of IDEO, as their team proceeded to do exactly that &#8211; on national television!   The project was done in response to a challenge set forth by the producer&#8217;s of ABC&#8217;s television news magazine, <em>Nightline</em>, in 1999.   One of IDEO&#8217;s key premises is to throw lots and lots of ideas out in the early phases &#8211; then cull them down to the key ideas later.   In <a id="aptureLink_gnNae9hvJl" href="http://www.amazon.com/gp/product/0385499841?tag=sostux-20">The Art of Innovation,</a> Tom Kelley shares the IDEO brainstorming rules which are written on the wall during brainstorming sessions there. <em>Go for Quantity. Encourage Wild Ideas. Be Visual.</em> And always, always &#8211; work fast and loose in the early stages, because winning ideas will get refined in the later stages.  And, guess what? Winning ideas can come from anywhere, so generate lots of them!</p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="480" height="385" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="align" value="aligncenter" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/M66ZU2PCIcM&amp;hl=en_US&amp;fs=1&amp;rel=0" /><param name="allowfullscreen" value="true" /><embed type="application/x-shockwave-flash" width="480" height="385" src="http://www.youtube.com/v/M66ZU2PCIcM&amp;hl=en_US&amp;fs=1&amp;rel=0" allowscriptaccess="always" allowfullscreen="true" align="aligncenter"></embed></object></p>
<p>And if we return to the <em>Brandmaker Express</em> method that Altman writes about in her book, we will find an approach for generating names and taglines that is very much in the spirit of IDEO.   For each naming challenge, Altman and her team design a set of creative workshop exercises to generate lots and lots of ideas.   The workshops are run twice, once with the employees and internal stakeholders at the client company, and once with a team of &#8216;creative souls&#8217; (an eclectic group of creative professionals who do this as a moonlighting gig.)  The workshop games are developed on a custom basis for each product being named, but there are a few favorites which appear over and over.  For instance, to generate tagline ideas there is usually an exercise to write an attention-grabbing headline like you might find in a famous publication, but the publication that serves as a setting is varied based on the tone of the product (e.g. NY Daily News for &#8220;sensational&#8221; headlines, NY Times for straightforward and sophisticated.)  Then she might add another exercise to push the creativity further, such as &#8220;Now in Three Words,&#8221; where the headline has to be compressed to it&#8217;s 3-word essence.  There are also specific exercises for arriving at names, such as &#8220;Word Smash,&#8221; which involves taking two English words that fit the concept and shoving them together to make a nonsense word &#8211; like Celebrex or MaxiPro. The point with these games is to do lots of them, coming at your naming challenge from several angles.  As you are doing the exercises, you should be furiously writing down the things that your brainstormers are saying in response to the challenge.</p>
<h4>The Third Key to Success &#8211; Synthesize the ideas into a few powerful concepts, then visualize them</h4>
<p>My favorite part of working with Altman is when the professional graphic designer she hires comes back with about 20 full-color 10 by 14 print-style ads with names, taglines, and corresponding imagery.  This is where the ideas from the brainstorming are synthesized and come to life, and this is also the appropriate time to critique the ideas and vote on them as a group.  The book has many insights on how to get to the right 20.  For instance, find out the dealbreakers early.  Maybe your CEO hates purple so there is no use in developing the <em>purple people eater</em> concept that someone threw out in one of the brainstorming exercises.  Concision is essential.   You should develop taglines that could tell the story of the site (along with a name and a logo) if everything else on the page was removed.  And she provides several known pitfalls that lead to writing bad, consumer alienating taglines.  Rampant use of the gerund, e.g. using a verb with no subject and adding &#8220;ing&#8221; to the end, as in Nokia&#8217;s &#8220;connecting people,&#8221; is a big no-no.   Altman calls this kind of tone &#8220;self-congratulatory, self-praising, and seriously superior.&#8221;  She also likes second person taglines, not first person.  Telling your customer what you are trying to do in a first person tagline is not the point (e.g. Lucent&#8217;s &#8220;creating value through true convergence.&#8221;)   Second person taglines, like &#8220;you deserve a break today,&#8221; bring the customer into the brand&#8217;s narrative.</p>
<p style="text-align: center;">
<div id="attachment_1487" class="wp-caption aligncenter" style="width: 490px"><img class="size-large wp-image-1487 " title="monster.com" src="http://www.solidstateux.com/wp-content/uploads/2009/10/monster.com-600x430.png" alt="Lynn Altman uses print-style ads, along the lines of this one for monster.com, to present name and tagline concepts.   " width="480" height="344" /><p class="wp-caption-text">Lynn Altman uses print-style ads, along the lines of this one for monster.com, to present name and tagline concepts.   </p></div>
<p>So by now, I hope you&#8217;re convinced that it&#8217;s time to think like a marketer, not a business development person or -god forbid- a designer, when you are naming and positioning websites.  Don Norman, in a recent<a href="http://bit.ly/ax9ODU"> interview</a> in upstart UX magazine, Want, said outright that the distinction between designers and marketers is really very small.  They both ask the same question, &#8220;How do we make it so that people will enjoy the product?&#8221;  And if you are wondering who is more creative &#8211; marketers of designers? &#8211;  you should sit in on one of Brand Now&#8217;s creatives-only brainstorming  sessions and you will realize that we are indeed talking about two sides  of the same coin.</p>
<blockquote style="padding-left: 60px;"><input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" /></blockquote>
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
]]></content:encoded>
			<wfw:commentRss>http://www.solidstateux.com/reviews/how-to-name-your-website-and-write-a-tagline-like-a-pro/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Eight Homepage Designs That Would Work as Billboards</title>
		<link>http://www.solidstateux.com/reviews/eight-homepage-designs-that-would-work-as-billboards/</link>
		<comments>http://www.solidstateux.com/reviews/eight-homepage-designs-that-would-work-as-billboards/#comments</comments>
		<pubDate>Sun, 09 May 2010 16:48:10 +0000</pubDate>
		<dc:creator>Todd Toler</dc:creator>
				<category><![CDATA[Interaction Design]]></category>
		<category><![CDATA[Reviews]]></category>
		<category><![CDATA[homepages]]></category>

		<guid isPermaLink="false">http://www.solidstateux.com/?p=1438</guid>
		<description><![CDATA[Increasingly users think of the homepage as that place where the search box lives. Web analytics data bears this out.  A typical homepage, particularly if there is a large and diverse set of products or information on a site, will see a vast majority of it&#8217;s clicks consolidated around the global navigation and search [...]]]></description>
			<content:encoded><![CDATA[<div id="attachment_1457" class="wp-caption alignleft" style="width: 310px"><a href="http://www.flickr.com/photos/andrewcanion/306230607/"><img class="size-medium wp-image-1457" title="Blurry_billboard" src="http://www.solidstateux.com/wp-content/uploads/2010/05/4be2f83254fb2-300x208.png" alt="Think of a homepage as something a user takes in at 65mph.  (photo credit: Andrew Canion)" width="300" height="208" /></a><p class="wp-caption-text">Think of a homepage as something a user takes in at 65mph.  (photo credit: Andrew Canion)</p></div>
<p>Increasingly users think of the homepage as that place where the search box lives. Web analytics data bears this out.  A typical homepage, particularly if there is a large and diverse set of products or information on a site, will see a vast majority of it&#8217;s clicks consolidated around the global navigation and search box.  If you think of a user flying by your homepage at 65 mph on their way to the search box, then how much information are they likely to take in?  How can you make a statement about the value of your site that a user can tune in out of the corner of their eye?  The best homepages confront this behavioral reality and offer the same concise, impactful designs as those on highway billboards.<span id="more-1438"></span></p>

<a href='http://www.solidstateux.com/reviews/eight-homepage-designs-that-would-work-as-billboards/attachment/about_com_w_inlays/' title='about_com_w_inlays'><img width="600" height="398" src="http://www.solidstateux.com/wp-content/uploads/2010/05/about_com_w_inlays-1024x680.png" class="attachment-large" alt="Given that About.com has almost a million articles spread over hundreds of topics, the homepage shows unusual restraint and clarity of message.  Competitors ehow and dummies.com are more typical, deploying a page with extensive amounts of carousels and &quot;featured&quot; content boxes that serves more as portal than billboard." title="about_com_w_inlays" /></a>
<a href='http://www.solidstateux.com/reviews/eight-homepage-designs-that-would-work-as-billboards/attachment/apple_ipad_home/' title='apple_ipad_home'><img width="600" height="376" src="http://www.solidstateux.com/wp-content/uploads/2010/05/apple_ipad_home-1024x643.png" class="attachment-large" alt="Few companies understand the limitations of consumer attention span better than Apple, and their corporate website&#039;s homepage is exactly as one would expect:  bold, visual, simple, and most importantly - fully digestible in about 2 seconds of viewing time." title="apple_ipad_home" /></a>
<a href='http://www.solidstateux.com/reviews/eight-homepage-designs-that-would-work-as-billboards/attachment/air_force_home_w_inlays/' title='air_force_home_w_inlays'><img width="600" height="319" src="http://www.solidstateux.com/wp-content/uploads/2010/05/air_force_home_w_inlays-1024x546.png" class="attachment-large" alt="Airforce.com is far more engaging than it&#039;s rivals among the armed forces (Us Navy &amp; US Marines), with it&#039;s animated homepage making a strong commitment to it&#039;s central theme, &quot;It&#039;s Not Science Fiction.&quot;  This page shows one of the challenges of creating simplified homepages: excellent creative ideas are needed when one can&#039;t fall back on the old stand by - the page of links." title="air_force_home_w_inlays" /></a>
<a href='http://www.solidstateux.com/reviews/eight-homepage-designs-that-would-work-as-billboards/attachment/google_w_inlays/' title='google_w_inlays'><img width="600" height="318" src="http://www.solidstateux.com/wp-content/uploads/2010/05/google_w_inlays-1024x543.png" class="attachment-large" alt="The original billboard homepage.  In fact, this one&#039;s so simple it could be a tattoo.  Yahoo is a cluttered disaster by comparison.  Bing splits the differece, but it&#039;s decorative (and unrelated imagery) adds little impact from the branding perspective." title="google_w_inlays" /></a>
<a href='http://www.solidstateux.com/reviews/eight-homepage-designs-that-would-work-as-billboards/attachment/daffys_w_inlays/' title='Daffys_w_inlays'><img width="600" height="325" src="http://www.solidstateux.com/wp-content/uploads/2010/05/Daffys_w_inlays-1024x555.png" class="attachment-large" alt="Retailer&#039;s web sites were quick to embrace the catalogue aesthetic, which is highly visual and showcases the merchandise over the cliched vernacular of a typical website.  Daffy&#039;s pulls off something more subtle here than a catalogue.  This page makes a bold and impactful visual statement about their brand promise, yet functions as a starting point for interacting with popular features on the site like the store locator and gift cards.  And all elements work within the constraints of billboard inspired design." title="Daffys_w_inlays" /></a>
<a href='http://www.solidstateux.com/reviews/eight-homepage-designs-that-would-work-as-billboards/attachment/rga_w_inlays/' title='Rga_w_inlays'><img width="600" height="328" src="http://www.solidstateux.com/wp-content/uploads/2010/05/Rga_w_inlays-1024x561.png" class="attachment-large" alt="Interactive agency R/GA deploys a common trick, but a nice bridge for those not willing to give up the notion that a home page should be crammed with links.   Above the fold we are in billboard territory, yet a user who bothers to scroll will find an enormous amount of content on one of the longest homepages I&#039;ve ever seen." title="Rga_w_inlays" /></a>
<a href='http://www.solidstateux.com/reviews/eight-homepage-designs-that-would-work-as-billboards/attachment/chemistry_home_w_inlays/' title='chemistry_home_w_inlays'><img width="600" height="318" src="http://www.solidstateux.com/wp-content/uploads/2010/05/chemistry_home_w_inlays-1024x544.png" class="attachment-large" alt="The non logged-in homepage of a dating site has only one goal - get prospects to sign up.  All the major sites have similar approaches in their design, but Chemistry.com&#039;s is the one whose value proposition is immediately clear.  Chemistry.com makes better matches because of better personality testing.  It is no coincidence that the best branded page is also the one that would make the best billboard." title="chemistry_home_w_inlays" /></a>
<a href='http://www.solidstateux.com/reviews/eight-homepage-designs-that-would-work-as-billboards/attachment/herman_miller_w_inlays/' title='herman_miller_w_inlays'><img width="600" height="403" src="http://www.solidstateux.com/wp-content/uploads/2010/05/herman_miller_w_inlays-1024x689.png" class="attachment-large" alt="Herman Miller takes perhaps the most common of all home page design components, the rotating central carousel, and creates an impactful statement by fully commiting to it.  Little else clutters up the page: carousel controls are minimal, imagery is striking, and messaging is impactful.  A more typical implementation of the home page carousel, as one of many features cluttering up the page, can be found at Bestbuy.com and Hulu.com." title="herman_miller_w_inlays" /></a>

<h4>Related Posts on SolidStateUX:</h4>
<p><a href="http://www.solidstateux.com/ux-driven-company/dont-fight-over-the-homepage/">Don&#8217;t Fight Over the Homepage</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.solidstateux.com/reviews/eight-homepage-designs-that-would-work-as-billboards/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Think Like An Instructional Designer &#8211; IA Summit 2010</title>
		<link>http://www.solidstateux.com/interaction-design/think-like-an-instructional-designer-ia-summit-2010/</link>
		<comments>http://www.solidstateux.com/interaction-design/think-like-an-instructional-designer-ia-summit-2010/#comments</comments>
		<pubDate>Sat, 10 Apr 2010 12:55:52 +0000</pubDate>
		<dc:creator>Todd Toler</dc:creator>
				<category><![CDATA[Interaction Design]]></category>
		<category><![CDATA[instructional design]]></category>
		<category><![CDATA[learning theory]]></category>
		<category><![CDATA[presenting]]></category>

		<guid isPermaLink="false">http://www.solidstateux.com/?p=1411</guid>
		<description><![CDATA[I&#8217;m in Phoenix this weekend for the IA Summit 2010 &#8211; which is organized by the American Society of Information Science &#38; Technology (ASIS&#38;T) and is one of the major national get-togethers for Information Architects and User Experience Designers.  I&#8217;m not sure if there is a distinction between the two titles anymore, but from what I hear [...]]]></description>
			<content:encoded><![CDATA[<p>I&#8217;m in Phoenix this weekend for the IA Summit 2010 &#8211; which is organized by the American Society of Information Science &amp; Technology (<a href="http://www.asis.org/">ASIS&amp;T</a>) and is one of the major national get-togethers for Information Architects and User Experience Designers.  I&#8217;m not sure if there is a distinction between the two titles anymore, but from what I hear this is the first IA Summit in years not to have a session on what to call ourselves in this profession &#8211; so that&#8217;s progress I suppose.  Did you know that Wiley publishes the <a href="http://www3.interscience.wiley.com/journal/117946195/grouphome/home.html">journal</a> of ASIS&amp;T?  This is my first IA Summit and I was pleased to be a presenter.  My talk, &#8220;Think Like an Instructional Designer,&#8221; was inspired by the fact that e-learning professionals and interaction designers are in silo&#8217;d professions.  The two fields rarely work together and get a chance to learn each other&#8217;s theoretical frameworks.   Yet all interaction designers face instructional design challenges everyday, and learning theories can be used to make more persuasive, better converting interactive experiences.   Think of e-learning as &#8220;everyday&#8221; learning.</p>
<div id="__ss_3682771" style="width: 425px;"><strong><a title="Toler Presentation Iasummit2010" href="http://www.slideshare.net/toddtoler/toler-presentation-iasummit2010">Toler Presentation Iasummit2010</a></strong><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="355" 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://static.slidesharecdn.com/swf/ssplayer2.swf?doc=tolerpresentationiasummit2010-100410071323-phpapp01&amp;stripped_title=toler-presentation-iasummit2010" /><param name="allowfullscreen" value="true" /><embed type="application/x-shockwave-flash" width="425" height="355" src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=tolerpresentationiasummit2010-100410071323-phpapp01&amp;stripped_title=toler-presentation-iasummit2010" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
<div style="padding:5px 0 12px">View more <a href="http://www.slideshare.net/">presentations</a> from <a href="http://www.slideshare.net/toddtoler">toddtoler</a>.</div>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.solidstateux.com/interaction-design/think-like-an-instructional-designer-ia-summit-2010/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Learning Theories for Interaction Designers #5 &#8211; Case-based Reasoning</title>
		<link>http://www.solidstateux.com/interaction-design/learning-theories-for-interaction-designers-5-case-based-reasoning/</link>
		<comments>http://www.solidstateux.com/interaction-design/learning-theories-for-interaction-designers-5-case-based-reasoning/#comments</comments>
		<pubDate>Wed, 07 Apr 2010 02:52:40 +0000</pubDate>
		<dc:creator>Todd Toler</dc:creator>
				<category><![CDATA[Interaction Design]]></category>
		<category><![CDATA[instructional design]]></category>
		<category><![CDATA[learning theory]]></category>

		<guid isPermaLink="false">http://www.solidstateux.com/?p=1393</guid>
		<description><![CDATA[In leading up to my presentation at IA Summit 2010, &#8220;Think Like an Instructional Designer,&#8221; I&#8217;m posting on the important learning  theories that any interaction designer would be well served to know the   basics of.
Theory #5 &#8211; Case-Based Reasoning
Most famous learning theories seem to be closely associated with a personality (sometimes a [...]]]></description>
			<content:encoded><![CDATA[<div id="attachment_1397" class="wp-caption alignleft" style="width: 310px"><img class="size-medium wp-image-1397 " title="4bbbe7040e395" src="http://www.solidstateux.com/wp-content/uploads/2010/04/4bbbe7040e395-300x232.png" alt="Roger Schank's most ambitious idea, The Reminding Machine, would be a massive collection of stories about what smart people know and how they deal with complex situations." width="300" height="232" /><p class="wp-caption-text">Roger Schank&#39;s most ambitious idea, The Reminding Machine, would be a massive collection of stories cataloguing what &quot;smart people&quot; know and how they deal with complex situations.</p></div>
<p>In leading up to my presentation at IA Summit 2010, <a href="http://2010.iasummit.org/talks/9721">&#8220;Think Like an Instructional Designer,&#8221;</a> I&#8217;m posting on the important learning  theories that any interaction designer would be well served to know the   basics of.</p>
<p>Theory #5 &#8211; Case-Based Reasoning</p>
<p>Most famous learning theories seem to be closely associated with a personality (sometimes a pair of them), but few stand so fully in their author&#8217;s shadow as case-based reasoning does in that of <a href="http://www.rogerschank.com/">Roger Schank</a>.   Schank is a bit of a rarefied character in the world of educational psychology &#8211; probably because he has serious chops in the far sexier field of Artificial Intelligence(AI).   UX people will relate to this theory, because it is basically saying people learn by prototyping stuff.    In Schank&#8217;s model, learners create generalizations from a rich set of case histories, rather than from explicitly rendered rules or other forms of procedural knowledge.   Schank&#8217;s theories might be likened to a branching network of potential outcomes in which the learner induces her way to the correct path by failing in the other ones.   This is often not the byproduct of actual failure, but the more subtle letdown that occurs when something is not what the learner expects to see.  He calls these &#8220;expectation failures,&#8221; which he proposes are more easily indexed by the brain and therefore are a higher form of learning than, say, rote memorization.  It won&#8217;t surprise you that a variant of CBR, <a id="aptureLink_JKuSGuKZdw" href="http://en.wikipedia.org/wiki/Rule%20induction">rule-induction</a>, is a cornerstone of machine learning theory.</p>
<p><span id="more-1393"></span>In applying CBR to instructional design, there are a few basic strategies.   Designers of expert systems are very fond of the theory, and you will see it referred to in the type of case-database applications used by customer service help desks.  But of more generalized interest, any design where cases, stories, or narrative are used to communicate instructional material can be thought of as being influenced by CBR.   Business and Law Schools are addicted to this sort of learning, of course.  But why not apply it to your web designs in order to increase their persuasive power?  To make your environment more compliant with case-based reasoning theory, there are all sorts of practical solutions you can implement:</p>
<ul>
<li>Develop multimedia content as a &#8220;set&#8221; of realistic and specific situations</li>
<li>Be like a business school &#8211; set forward realistic examples then provide your user with a heuristic for evaluating them</li>
<li>Consider the &#8220;fixed choice&#8221; option &#8211; describe a case, then provide a fixed number of plausible solutions</li>
<li>Clearly articulate problem, question, or dilemma</li>
<li>Allow users a safe place to test predictions, and give feedback on incorrect paths</li>
</ul>
<div id="attachment_1401" class="wp-caption aligncenter" style="width: 624px"><img class="size-full wp-image-1401 " title="4bbbf123801ec" src="http://www.solidstateux.com/wp-content/uploads/2010/04/4bbbf123801ec.jpg" alt="The McKinsey careers site uses a nicely designed case-study approach.  By exploring the profiles of various employees at the firm, a prospect can inference the answer to the basic questions poised below - such as &quot;What will it be like if I join?&quot; (design: IconNicholson)" width="614" height="258" /><p class="wp-caption-text">The McKinsey careers site uses a nicely designed case-study approach.  By exploring the profiles of various employees at the firm, a prospect can inference the answer to the basic questions poised below - such as &quot;What will it be like if I join?&quot; (design: IconNicholson)</p></div>
<div id="attachment_1406" class="wp-caption aligncenter" style="width: 457px"><img class="size-full wp-image-1406 " title="la_salle" src="http://www.solidstateux.com/wp-content/uploads/2010/04/la_salle.png" alt="La Salle University offers a virtual MBA online that is highly influenced by Roger Schank's work.  Students study cases and simulted business scenarios in a computerized environment.  This is also a great example of situated learning theory." width="447" height="250" /><p class="wp-caption-text">La Salle University offers a virtual MBA online that is highly influenced by Roger Schank&#39;s work.  Students study cases and simulted business scenarios in a computerized environment.  This is also a great example of situated learning theory.</p></div>
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
]]></content:encoded>
			<wfw:commentRss>http://www.solidstateux.com/interaction-design/learning-theories-for-interaction-designers-5-case-based-reasoning/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Learning Theories for Interaction Designers #4 &#8211; Cognitive Flexibility Theory</title>
		<link>http://www.solidstateux.com/interaction-design/learning-theories-for-interaction-designers-4-cognitive-flexibility-theory/</link>
		<comments>http://www.solidstateux.com/interaction-design/learning-theories-for-interaction-designers-4-cognitive-flexibility-theory/#comments</comments>
		<pubDate>Tue, 06 Apr 2010 16:17:56 +0000</pubDate>
		<dc:creator>Todd Toler</dc:creator>
				<category><![CDATA[Interaction Design]]></category>
		<category><![CDATA[instructional design]]></category>
		<category><![CDATA[learning theory]]></category>

		<guid isPermaLink="false">http://www.solidstateux.com/?p=1377</guid>
		<description><![CDATA[In leading up to my presentation at IA Summit 2010, &#8220;Think Like an   Instructional Designer,&#8221; I&#8217;m posting on the important learning   theories that any interaction designer would be well served to know the   basics of.
Theory #4 &#8211; Cognitive Flexibility Theory
If ever there was a learning theory that was tailor-made [...]]]></description>
			<content:encoded><![CDATA[<div id="attachment_1379" class="wp-caption alignleft" style="width: 310px"><img class="size-medium wp-image-1379" title="Orson_Welles-Citizen_Kane1" src="http://www.solidstateux.com/wp-content/uploads/2010/04/Orson_Welles-Citizen_Kane1-300x210.jpg" alt="KANE - short for &quot;Knowledge Acquisition in Non-Linear Environments&quot; was an interactive laser-disc based on the film Citizen Kane.  An early example of cognitive flexibility theory put into practice. " width="300" height="210" /><p class="wp-caption-text">KANE - short for &quot;Knowledge Acquisition in Non-Linear Environments&quot; was an interactive laser-disc based on the film Citizen Kane.  An early example of cognitive flexibility theory put into practice. </p></div>
<p>In leading up to my presentation at IA Summit 2010, <a href="http://2010.iasummit.org/talks/9721">&#8220;Think Like an   Instructional Designer,&#8221;</a> I&#8217;m posting on the important learning   theories that any interaction designer would be well served to know the   basics of.</p>
<p>Theory #4 &#8211; Cognitive Flexibility Theory</p>
<p>If ever there was a learning theory that was tailor-made for the web interaction designer, it is cognitive flexibility theory.  In fact, the theory&#8217;s emphasis on the power of <em>hypertext</em> would imply that it was developed with the world-wide web specifically in mind.  Yet it came to prominence in 1992, right about when the Mosaic browser started development, and before the ubiquity of the modern web .  So ironically, its most famous implementation deploys a special laserdisc of the movie Citizen Kane that serves up scenes in non-linear &#8220;random access&#8221; mode.</p>
<p><span id="more-1377"></span>KANE, short for &#8220;Knowledge Acquisition in Nonlinear Environments,&#8221; is intended to show that literary &#8220;texts&#8221; offer more than one interpretation.  Random it is not. A CFT based learning environment modularizes content into &#8220;mini-cases,&#8221; then links these mini-cases to conceptual themes.  Any one mini-case can, and should, be used in multiple themes for complex schema acquisition in the learner.  The user can thus criss-cross the same material from a variety of thematic contexts.   In KANE, the film was re- edited to show just those scenes that illustrate a selected  conceptual theme of the film (e. g., ‘Wealth Corrupts,” ”Hollow,  Soulless Man,” etc.). &#8220;Using this option, the learner could, for example,  see five scenes in a row, taken from various places in the film, that  illustrate different varieties or &#8216;flavors&#8217; of the ‘Wealth Corrupts&#8217;  theme.  Each scene essentially forms a miniature case of the Kane  character’s behavior that illustrates the targeted theme.&#8221; (<a href="http://cter.ed.uiuc.edu/JimL_Courses/edpsy490i/su01/readings/spiro.htm">Spiro,  Feltovitch, Jacobson, Coulson 1992</a>)   Rand Spiro is the father of the theory, writing first about it in 1987.  He is also the co-creator of KANE and continues to write and <a href="http://postgutenberg.typepad.com/newgutenbergrevolution/">blog</a> about modern applications of the theory to domains such as Wiki-pedia and YouTube and was even interviewed by the NYTimes in 2008 about the <a href="http://www.nytimes.com/2008/07/27/books/27reading.html?hp">future of reading</a>.</p>
<p>Cognitive Flexibility Theory is an argument for complexity, one of my personal favorite themes in this new age of googly-ness.  People always want interaction designers to keep things simple, yet Spiro was highly suspicious of the <em>reductive bias</em> in terms of oversimplifying instructional material.   His central argument was that other instructional theories work fine when the domain is ordered and linear, but for higher order inference-based understanding of complex and ill-structured domains, most prescribed theories fall over.  And like Cognitive Apprenticeship Theory, CFT provides a nice middle ground between discovery learning and structured environments.  It&#8217;s limitation lies in the difficulty in applying it beyond the &#8220;text&#8221; based models of Spiro&#8217;s work (even if &#8220;text&#8221; is used in the widest Barthesian sense of the word), which is probably why Spiro has emerged as such a guru in textual based modern applications such as search and e-reading.   It also may explain why it&#8217;s very difficult to find examples of CFT used in modern applications. Hypertext (and hyperlinking) was once the <em>de facto</em> way of describing interactivity but feels like such an inadequate metaphor in the world of Modern Warfare 2.</p>
<p>To design a learning environment so that it is consistent with Cognitive Flexibility Theory:</p>
<ul>
<li> Use multiple case studies to insure that a variety of  possible situations are presented.</li>
<li> Focus on cross-case differences in how concepts and  principles are applied.</li>
<li>Allow users to &#8216;criss-cross&#8217; the materials in flexible ways, to see the same content in different contexts</li>
<li>Modularize content to exist in multiple contexts (or provide enough background information for each concept to be understood in each context)</li>
<li> Consider multiple perspectives (individual points of  view) as an aid to understanding the connected nature of the domain  concepts and promoting flexible knowledge building.</li>
</ul>
<p>(partial source: <a href="http://edutechwiki.unige.ch/en/Cognitive_flexibility_hypertext">edutech wiki</a>)</p>
<p style="text-align: center;">
<div id="attachment_1381" class="wp-caption aligncenter" style="width: 500px"><img class="size-full wp-image-1381   " title="modern_warfare2" src="http://www.solidstateux.com/wp-content/uploads/2010/04/modern_warfare2.png" alt="Like many learning theories, cognitive flexibility theory could use some updating. The metaphor of mini-cases linked via hypertext feels inadequate when describing an environment like Modern Warfare 2. " width="490" height="307" /><p class="wp-caption-text">Like many learning theories, cognitive flexibility theory could use some updating. The metaphor of mini-cases linked via hypertext feels inadequate when describing what&#39;s possible with modern technology (such as Modern Warfare 2.)</p></div>
<div id="attachment_1383" class="wp-caption aligncenter" style="width: 501px"><img class="size-large wp-image-1383   " title="faceted navigation" src="http://www.solidstateux.com/wp-content/uploads/2010/04/faceted-navigation-1024x833.png" alt="It seems to me that we already have the perfect design pattern for cognitive flexibilty theory - faceted navigation.   Here it's used to sort images by all sorts of thematic criteria.  If the pattern was used to present learning content, it could be very powerful." width="491" height="400" /><p class="wp-caption-text">It seems to me that we already have the perfect design pattern for cognitive flexibilty theory - faceted navigation.   Here it&#39;s used to sort images by all sorts of thematic criteria in order to sell them.  If the pattern was used to present learning content, it could be very powerful.</p></div>
<div id="attachment_1385" class="wp-caption aligncenter" style="width: 578px"><img class="size-full wp-image-1385 " title="dvd_menu" src="http://www.solidstateux.com/wp-content/uploads/2010/04/dvd_menu.png" alt="Dvd menus allow users to navigate to scenes but rarely to reorder them by theme. Adding such a feature could make the Reservoir Dogs dvd into a cognitive flexibility environment." width="568" height="311" /><p class="wp-caption-text">Dvd menus allow users to navigate to scenes but rarely to reorder them by theme. Adding such a feature could make the Reservoir Dogs dvd into a cognitive flexibility learning environment.</p></div>
]]></content:encoded>
			<wfw:commentRss>http://www.solidstateux.com/interaction-design/learning-theories-for-interaction-designers-4-cognitive-flexibility-theory/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Learning Theories for Interaction Designers #3 &#8211; Cognitive Apprenticeship Theory</title>
		<link>http://www.solidstateux.com/interaction-design/learning-theories-for-interaction-designers-3-cognitive-apprenticeship-theory/</link>
		<comments>http://www.solidstateux.com/interaction-design/learning-theories-for-interaction-designers-3-cognitive-apprenticeship-theory/#comments</comments>
		<pubDate>Mon, 05 Apr 2010 21:32:04 +0000</pubDate>
		<dc:creator>Todd Toler</dc:creator>
				<category><![CDATA[Interaction Design]]></category>
		<category><![CDATA[cognitive science]]></category>
		<category><![CDATA[instructional design]]></category>
		<category><![CDATA[learning theory]]></category>

		<guid isPermaLink="false">http://www.solidstateux.com/?p=1320</guid>
		<description><![CDATA[In leading up to my presentation at IA Summit 2010, &#8220;Think Like an  Instructional Designer,&#8221; I&#8217;m posting on the important learning  theories that any interaction designer would be well served to know the  basics of.
Theory #3 &#8211; Cognitive Apprenticeship Theory
Cognitive Apprenticeship Theory can be a powerful instructional framework for interaction design, in [...]]]></description>
			<content:encoded><![CDATA[<div id="attachment_1363" class="wp-caption alignleft" style="width: 310px"><img class="size-medium wp-image-1363   " title="tomb_raider" src="http://www.solidstateux.com/wp-content/uploads/2010/04/tomb_raider-300x224.png" alt="Verner Von Croy mentors Lara Croft directly within the main game play of Tomb Raider: The Last Revelation, not in a dedicated training module.   " width="300" height="224" /><p class="wp-caption-text">Verner Von Croy mentors Lara Croft directly within the main game play of Tomb Raider: The Last Revelation. Most games have dedicated training modules and are therefore less compliant with cognitive apprenticeship theory.  </p></div>
<p>In leading up to my presentation at IA Summit 2010, <a href="http://2010.iasummit.org/talks/9721">&#8220;Think Like an  Instructional Designer,&#8221;</a> I&#8217;m posting on the important learning  theories that any interaction designer would be well served to know the  basics of.</p>
<p>Theory #3 &#8211; Cognitive Apprenticeship Theory</p>
<p>Cognitive Apprenticeship Theory can be a powerful instructional framework for interaction design, in fact it&#8217;s one of my favorites to think about, but it&#8217;s best not to take the theory too literally.  <a id="aptureLink_oc3fIsvoLs" href="http://en.wikipedia.org/wiki/Cognitive%20apprenticeship">Collins and Brown</a>, most closely associated with the theory, were writing some 20-odd years ago and they did not have computerized environments in mind at the time (they were mostly interested in classroom pedagogy.) Their genius lay in the recognition of a theoretical gap between students&#8217; learning to integrate sub-skills and conceptual knowledge. Despite the educator&#8217;s best intentions, when the two were unintegrated, the information remained inert.  They started to notice that the most successful in-school learning had very similar characteristics to out-of-school learning (most notably the concept of &#8220;apprenticeship&#8221;.) They observed a strong interplay between observation, scaffolding, and increasing amounts of independent practice.  And while many before them had emphasized the power of conceptual learning and independent practice (see <a id="aptureLink_JREYQpqTri" href="http://en.wikipedia.org/wiki/Jean%20Lave">Lave</a>), they thought more about how to provide  “internalized guides” during periods of <em>relatively</em> independent practice.   CAT is an extension of <a href="http://www.solidstateux.com/interaction-design/learning-theories-that-interaction-designers-should-understand-1-situated-learning/">situated learning theory</a>, but rather than leave things as a purely sociological construct (e.g. Lave &amp; Wegner&#8217;s &#8220;communities of practice&#8221;) they placed a strong emphasis on methods (modeling, coaching, scaffolding, fading, articulation) and sequence (global before local, increasing complexity, increasing diversity.)</p>
<p><span id="more-1320"></span></p>
<div id="attachment_1366" class="wp-caption alignright" style="width: 310px"><img class="size-medium wp-image-1366" title="reciprocal teaching" src="http://www.solidstateux.com/wp-content/uploads/2010/04/reciprocal-teaching-300x223.png" alt="The reciprocal teaching method in reading instruction is the most famous example of Cognitive Apprenticeship Theory in action." width="300" height="223" /><p class="wp-caption-text">The reciprocal teaching method in reading instruction is the most famous example of Cognitive Apprenticeship Theory in action.</p></div>
<p>Its weaknesses lie in the limitations of its description: dated, hard to  extrapolate beyond well-structured domains, overlapping with similar-sounding theories, and too committed to it&#8217;s inspiration within the apprentice-master models found in non-formal instructional environments (you know, traditional crafts like blacksmithing).  Unfortunately, the theory is not well applied to technological environments and modern notions of interactivity.   When it has been applied, it&#8217;s been done so mostly in classrooms in highly rigid lesson formats such as those used in Palincsar and Brown&#8217;s <a id="aptureLink_1RZ2wkGdOq" href="http://en.wikipedia.org/wiki/Reciprocal%20teaching">reciprocal teaching</a> methods for reading instruction. But the theory does an excellent job of abstracting successful non-formal (or &#8220;out-of-school&#8221;) learning attributes into a set of principles for instructional designers to work with.  In fact, the theory does exactly what Collins and Brown claim a good educator should do &#8211; &#8220;make the invisible visible.&#8221;  It is also one of the only formal learning theories that strikes the right balance between discovery learning and structured learning &#8211; the sort of balance that video game designers have intuitively found but educational designers seem woefully behind in.  What attributes does a learning environment have if it&#8217;s influenced by cognitive apprenticeship theory?</p>
<ul>
<li>Expert modeling (particularly the notion of &#8220;distributed expertise&#8221; &#8211; or multiple mentors to learn from)</li>
<li>Combination of scaffolding (adding help when needed) + fading (removing help gradually)</li>
<li>Reflection on performance (e.g. replay and abstracted replay)</li>
<li>Articulation (student demonstrations of expert performance)</li>
<li>Exploration (<em>relatively</em> independent practice)</li>
</ul>
<p>.</p>
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
]]></content:encoded>
			<wfw:commentRss>http://www.solidstateux.com/interaction-design/learning-theories-for-interaction-designers-3-cognitive-apprenticeship-theory/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Learning Theories For Interaction Designers #2:  Schema Theory</title>
		<link>http://www.solidstateux.com/interaction-design/learning-theories-for-instructional-designers-2-schema-theory/</link>
		<comments>http://www.solidstateux.com/interaction-design/learning-theories-for-instructional-designers-2-schema-theory/#comments</comments>
		<pubDate>Mon, 05 Apr 2010 18:33:12 +0000</pubDate>
		<dc:creator>Todd Toler</dc:creator>
				<category><![CDATA[Interaction Design]]></category>
		<category><![CDATA[cognitive science]]></category>
		<category><![CDATA[instructional design]]></category>
		<category><![CDATA[learning theory]]></category>

		<guid isPermaLink="false">http://www.solidstateux.com/?p=1331</guid>
		<description><![CDATA[
Schema theory is a foundational element in almost all cognitivist descriptions of learning, and this one will likely make immediate sense to user experience practitioners because it is tightly entwined with the familiar concept of mental models.  The theory emphasizes the role of prior knowledge and provides a robust explanatory framework for how expert performance [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;">
<div id="attachment_1354" class="wp-caption aligncenter" style="width: 412px"><img class="size-full wp-image-1354  " title="egg_schema" src="http://www.solidstateux.com/wp-content/uploads/2010/04/egg_schema2.png" alt="A diagram of a someone's possible schema for the concept of &quot;egg.&quot; Source: P.Davis 1991" width="402" height="336" /><p class="wp-caption-text">A diagram of a someone&#39;s possible schema for the concept of &quot;egg.&quot; Source: P.Davis 1991</p></div>
<p>Schema theory is a foundational element in almost all cognitivist descriptions of learning, and this one will likely make immediate sense to user experience practitioners because it is tightly entwined with the familiar concept of <em>mental models</em>.  The theory emphasizes the role of prior knowledge and provides a robust explanatory framework for how expert performance is attained.  Ok, so what&#8217;s a schema?  Piaget defined the term in 1926 as a mental representation of an associated set of perceptions, ideas, and/or actions.   Think of a schema as a network of connected facts and concepts into which any newly-formed structures can  be fitted.  Then think of your brain as a bigger network of overlapping schema and sub-schema.  The schema themselves are a markup language for the brain, cognitive XML if you will.  Schema theory explains why we remember things so subjectively (In <a id="aptureLink_rL0lJupeQg" href="http://en.wikipedia.org/wiki/Frederic%20Bartlett">Bartlett&#8217;s</a> 1932 research on people&#8217;s memory of stories such as the &#8220;The War of the Ghosts,&#8221; he found that in reconstructing a story they added elements of their own culture.  This is famously considered evidence of schema theory&#8217;s existence.)   More interestingly to designers, the theory can be exploited to provide more effective instructional materials.</p>
<p><span id="more-1331"></span>Learners generally want to read for &#8220;gist&#8221; and &#8220;theme.&#8221;  Why? So they can incorporate the new knowledge within their existing schema framework. When learners lack specific schema-based prior knowledge, they tend to apply general problem solving strategies in inefficient, even unsuccessful, ways. (see Driscoll&#8217;s 1994 <a id="aptureLink_eCsuLC584f" href="http://www.amazon.com/gp/product/0205375197?tag=sostux-20">book</a> on this topic)  Worse, a lack of a proper conceptual model can transform learning into the ‘rote’ memorization of a seemingly arbitrary series of steps.  While this is an effective method in learning to tie one’s shoes or to master the alphabet, it leads to problems when things get more complex &#8211; as in, say, learning how to use a modern software application.  Donald Norman (<a id="aptureLink_RxxwsVdNWw" href="http://www.nngroup.com/reports/life_cycle_of_tech.html">1998</a>) has called this disconnect between what we can conceptualize and what we are being asked to learn the “bane of modern existence.” <em>hmm&#8230; to make a new layer in Photoshop, just press</em> CONTOL-ALT-SHIFT-N.</p>
<p>Of course, the rub is that it is difficult to determine what schema a potential user already possesses and to develop an instructional method that guides them towards the task at hand.  According to Driscoll, users arrive at most learning opportunities with an “imprecise, partial, and idiosyncratic” set of mental models.  This is where schema theory dovetails nicely with situated learning theory &#8211; the more grounded the instruction is in authentic contexts and shared cultural references, the more likely it is to activate prior-knowledge and allow for the acquisition of new schema.   If you strip situated learning theory from it&#8217;s socio-cultural agenda of &#8220;authentic thoughts in authentic contexts&#8221; (I don&#8217;t believe that &#8220;situated&#8221; learning is the opposite of “symbolic-computational” learning, as some do), the two theories can work nicely together.  Pull the conceptual world into your designs by providing context.  Context can include both the “atmosphere” of the learning environment and the “background events.”  To make a design better at activating prior knowledge in learners:</p>
<ul>
<li>Understand and &#8217;segment&#8217; your audience</li>
<li>Draw upon information that is likely to be familiar to learners</li>
<li>Contextualize material with analogies and background events (for &#8220;gist&#8221; and &#8220;theme&#8221;)</li>
<li>Develop a sense of &#8220;situational intent&#8221; (focus on benefits, outcomes, applications, examples)</li>
<p><strong><br />
Photoshop Unsharp Mask Tutorial &#8211; Typical Example.</strong> Layers Magazine provides beautiful tutorials of how to use the software but nothing about the concepts behind the tool.</p>
<p style="text-align: center;"><img class="size-full wp-image-1345  aligncenter" title="unsharp_mask_layersmag" src="http://www.solidstateux.com/wp-content/uploads/2010/04/unsharp_mask_layersmag.png" alt="The Photoshop Unsharp Mask Tutorial - Typical Example.  Layers magazine provides beautiful tutorials of how to use the software but nothing about the concept behind the tool." width="451" height="444" /></p>
<p><strong><br />
Photoshop Unsharp Mask Tutorial &#8211; Schema Building Example.</strong> Cambridge in Colour takes what could be a description of an arbitrary software feature and embeds it with conceptual meaning and background information.</p>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-1349" title="cambridge_in_color_1" src="http://www.solidstateux.com/wp-content/uploads/2010/04/cambridge_in_color_11.png" alt="cambridge_in_color_1" width="498" height="289" /><br />
<img class="aligncenter size-full wp-image-1347" title="cambridge_in_color_2" src="http://www.solidstateux.com/wp-content/uploads/2010/04/cambridge_in_color_2.png" alt="cambridge_in_color_2" width="513" height="371" /></p>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-1348" title="cambridge_in_color_3" src="http://www.solidstateux.com/wp-content/uploads/2010/04/cambridge_in_color_3.png" alt="cambridge_in_color_3" width="505" height="351" /></p>
</ul>
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
]]></content:encoded>
			<wfw:commentRss>http://www.solidstateux.com/interaction-design/learning-theories-for-instructional-designers-2-schema-theory/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
