<?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; Reviews</title>
	<atom:link href="http://www.solidstateux.com/category/reviews/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.solidstateux.com</link>
	<description>The art and science of interaction design.</description>
	<lastBuildDate>Wed, 07 Jul 2010 16:08:00 +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>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>Interaction Design &amp; Sustainability Case Study:  Ford SmartGuage with EcoGuide</title>
		<link>http://www.solidstateux.com/reviews/interaction-design-sustainability-case-study-ford-smartguage-with-ecoguide/</link>
		<comments>http://www.solidstateux.com/reviews/interaction-design-sustainability-case-study-ford-smartguage-with-ecoguide/#comments</comments>
		<pubDate>Fri, 04 Dec 2009 22:31:59 +0000</pubDate>
		<dc:creator>Todd Toler</dc:creator>
				<category><![CDATA[Interaction Design]]></category>
		<category><![CDATA[Reviews]]></category>
		<category><![CDATA[dashboards]]></category>
		<category><![CDATA[environmental]]></category>
		<category><![CDATA[pervasive]]></category>
		<category><![CDATA[sustainability]]></category>

		<guid isPermaLink="false">http://www.solidstateux.com/?p=1093</guid>
		<description><![CDATA[Ok, so I admit that I have a tendency to overvalue the impact of my own profession.  I believe Malcom McCullough when he says that interaction design is likely to be one of the great liberal arts of the 21st century.  The great American novel, when it finally arrives, will be planned in Omnigraffle.  And [...]]]></description>
			<content:encoded><![CDATA[<div id="attachment_1138" class="wp-caption alignleft" style="width: 310px"><img class="size-medium wp-image-1138" title="dash" src="http://www.solidstateux.com/wp-content/uploads/2009/11/dash-300x202.png" alt="dash" width="300" height="202" /><p class="wp-caption-text">The dashboard that monitors what the driver is doing, not the machine.</p></div>
<p>Ok, so I admit that I have a tendency to overvalue the impact of my own profession.  I believe Malcom McCullough when he says that interaction design is likely to be one of the great liberal arts of the 21st century.  The great American novel, when it finally arrives, will be planned in Omnigraffle.  And the fact that most of us deploy our tradecraft in the service of streamlining the movie rental process, selling sunglasses or laminate flooring, facilitating the sharing of snapshots and how-to articles on pumpkin carving does not diminish our greatness.  In fact, in my world, interaction designers are likely to be key players in all forms of meaningful societal change from here on in.   (Just try and tell me that Obama&#8217;s website wasn&#8217;t pivotal in his election!)  But what role does I.D. have in making the planet greener?  Even I struggled with that one.</p>
<p><span id="more-1093"></span>For industrial designers, who work with physical products that consume materials both in their manufacture and their ongoing usage, the links to sustainable design principles are clear.  But for information product designers whose work is consumed primarily on <em>screens</em>, a claim to designing &#8217;sustainably&#8217; often feels like a stretch.  What is being conserved &#8211; pixels? CPU cycles? Yet recently I am learning that I need not feel that way.  It turns out there are many designers who leverage interactivity to directly make the world a more livable place &#8211; not only by raising awareness of sustainable principles but by directly affecting the way people use and think about their environment on a day-to-day basis.  On Nov. 12, while hosting a panel discussion on sustainability and interaction design for NYCUPA, I met Ted Booth &#8211; Director of Interaction Design at Smart Design.  Smart collaborated with IDEO in researching and designing the SmartGuage with EcoGuide for client, Ford &#8211; a true example of the unique power of interaction design to change human behavior.</p>
<div id="attachment_1149" class="wp-caption alignright" style="width: 310px"><img class="size-medium wp-image-1149" title="ford_fusion" src="http://www.solidstateux.com/wp-content/uploads/2009/12/ford_fusion-300x179.png" alt="ford_fusion" width="300" height="179" /><p class="wp-caption-text">The 2010 Ford Fusion is one of the first models to ship with the new SmartGuage desing in place.</p></div>
<p>The Ford SmartGuage with EcoGuide is an innovative instrument cluster (a reinterpreted automobile dashboard if you will)  for a new line of Ford hybrid cars.   IDEO did the user research, at the heart of which was an ethnographic look at the world of hybrid owners &#8211; including the cult-like &#8220;Hypermilers&#8221; who make a fetish out of squeezing every last drop of fuel efficiency out of their machines.  Smart did the design work itself.   The 2010 Ford Fusion is among the first models to hit the market with the new dashboard in place and immediately garnered considerable press and recognition for the novel philosophy behind it&#8217;s design (see further reading links at the end of this post.)   The  instrument panel design is purely digital, essentially one integrated monitor built into the car&#8217;s dash.   Being screen-based enables some interesting affordances that are perfect for a dual-engine automobile, for instance truly modal displays.   The tachometer toggles into &#8220;EV mode&#8221; when the electric motor is running, which makes sense given that electric motors don&#8217;t speak the language of &#8220;RPM&#8217;s,&#8221; and being modal allows the two gauges to share the same piece of real estate in the display.   The dash even has a tutorial mode that shows descriptive help text next to each type of instrumentation, seriously threatening the future existence of 10th grade drivers ed teachers.</p>
<p style="text-align: center;">
<div id="attachment_1148" class="wp-caption aligncenter" style="width: 624px"><img class="size-large wp-image-1148  " title="modal_display" src="http://www.solidstateux.com/wp-content/uploads/2009/12/modal_display-1024x292.png" alt="The Tachometer in typical RPM mode displays when the combustion engine is running, then toggles into a differently scaled &quot;EV&quot; mode when the electric motor is running." width="614" height="175" /><p class="wp-caption-text">A modal tachometer displays in typical RPM mode when the combustion engine is running, then toggles into a differently scaled &quot;EV&quot; mode when the electric motor is running.</p></div>
<p>What&#8217;s most profoundly innovative about the SmartGuage design is that it turns the traditional role of a car&#8217;s driver interface exactly on it&#8217;s head.  &#8220;A guiding principle was to give the driver feedback about their driving,&#8221; Booth told me in the pre-interview for our panel discussion.   &#8220;Up to now, car dashboards have communicated information about what the machine is doing, not the driver.&#8221;    The reason behind the shift in emphasis is a simple business problem.  Many hybrid purchasers, who are socio-politically predisposed to choosing such cars for their green benefits, are unhappy customers.  They just aren&#8217;t getting the increased fuel mileage they hoped for.  Some aren&#8217;t getting anything near the optimal mileage recorded by the test drivers and car reviewers.  It turns out a lot of this has to do with the way one drives a hybrid.</p>
<div id="attachment_1146" class="wp-caption alignleft" style="width: 310px"><img class="size-medium wp-image-1146 " title="prius_dash" src="http://www.solidstateux.com/wp-content/uploads/2009/12/prius_dash-300x180.png" alt="The Prius dashboard shows how much energy is recaptured by braking, but the display reinforces a misperception." width="300" height="180" /><p class="wp-caption-text">The Prius dashboard shows how much energy is recaptured by braking, but the display reinforces a misperception that braking harder is better.</p></div>
<p>How hard one brakes, for instance, is a key variable.    Hybrids, as many know, recharge their batteries through the principle of regenerative braking &#8211; a process of recapturing the kinetic energy generated by braking and storing it for later use rather than dissipating it in the form of heat.     The energy can be stored mechanically in the form of compressed air or a flywheel (as the high end KERS systems in Formula One racing cars do), or electrically in a capacitor or battery (as regular consumer hybrids do).  It is standard procedure in a hybrid dashboard to inform the driver about how much power has been regenerated.  But according to Booth, the existing instrument design gave drivers a mistaken perception about how to brake in order to maximize that number.  &#8220;Existing gauges show a spike of energy when a driver brakes,&#8221; he said, &#8220;which actually makes drivers think they should wait until the last minute to brake so they can brake harder and increase the amplitude of the spike.  In fact, it’s the opposite… slow steady braking delivers more of a charge, so we factored this into our design.&#8221;</p>
<p>It&#8217;s one thing to communicate to the driver a complex set of information about their driving and quite another to do that in a way that they can process &#8211; especially while trying to keep their eyes on the road!  The Smart design team did a couple of novel things here with the design.  The most famous is the use of a simple metaphor to give the driver an almost game-like sense of optimizing their driving performance &#8211; the &#8220;efficiency leaves.&#8221;    Initially worried that the leaves metaphor was going to be skewered by the car reviewers, it turned out to be exactly the opposite.</p>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-1151" title="efficiency_leaves" src="http://www.solidstateux.com/wp-content/uploads/2009/12/efficiency_leaves.png" alt="efficiency_leaves" width="479" height="321" /></p>
<blockquote><p><em>The hardest thing was to process all the inputs that affect fuel economy and feed them into a display in a way that a driver can process. We came up with the metaphor of leaves… drivers earn leaves as they conserve fuel. &#8211; Ted Booth, Smart Design<br />
</em></p></blockquote>
<div id="attachment_1150" class="wp-caption alignright" style="width: 247px"><img class="size-full wp-image-1150 " title="fuel" src="http://www.solidstateux.com/wp-content/uploads/2009/12/fuel.png" alt="Prius uses bold visual and information design to create highly &quot;glanceable&quot; instruments." width="237" height="209" /><p class="wp-caption-text">Smart Guage uses bold visual and information design to create highly &quot;glanceable&quot; instruments.</p></div>
<p>The team also focused on a bold, clear information design that embraced the limitation of &#8220;look-away&#8221; time &#8211; which implies that drivers have less then a second to safely take something in before returning their eyes to the road.   The fuel gauge, for instance, abandons the traditional needle design for a boldly rendered bar-graph that looks at first glance like amber liquid.   The leaves themselves represent an easily glanced at indication of driving success, but can be toggled into a more detailed mode showing feedback in the form of hard numbers.</p>
<p>Few examples better illustrate the centrality of the UX trade &#8211; and the potential opportunity to affect change for the better in places we never thought of- than this reinvention of the car dashboard.   These are heady, exciting times to be in the business of designing screens.</p>
<p>Further Reading:</p>
<p><a href="http://www.fastcompany.com/blog/alissa-walker/designerati/fords-smartgauge-helps-hybrid-drivers-increase-mileage-better-instrum">Ford&#8217;s SmartGauge Improves Fuel Efficiency Through Better Instrument Design </a> Fast Company</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" />
]]></content:encoded>
			<wfw:commentRss>http://www.solidstateux.com/reviews/interaction-design-sustainability-case-study-ford-smartguage-with-ecoguide/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>10 Great Interaction Designs &#8211; in Cut &amp; Folded Paper</title>
		<link>http://www.solidstateux.com/reviews/10-great-interaction-designs-in-cut-folded-paper/</link>
		<comments>http://www.solidstateux.com/reviews/10-great-interaction-designs-in-cut-folded-paper/#comments</comments>
		<pubDate>Wed, 30 Sep 2009 21:40:37 +0000</pubDate>
		<dc:creator>Todd Toler</dc:creator>
				<category><![CDATA[Interaction Design]]></category>
		<category><![CDATA[Reviews]]></category>
		<category><![CDATA[design inspiration]]></category>
		<category><![CDATA[RIAs]]></category>

		<guid isPermaLink="false">http://www.solidstateux.com/?p=743</guid>
		<description><![CDATA[
Experience designers who work in digital media such as RIAs, video games, and DVD menus are already well conditioned to thinking beyond the page as a metaphor for organizing information structures.   But paper itself is not the villain.  In fact, paper can be transformed into all sorts of interesting interactive possibilities  [...]]]></description>
			<content:encoded><![CDATA[<p><img class="size-medium wp-image-824 alignleft" title="tabs" src="http://www.solidstateux.com/wp-content/uploads/2009/09/tabs-300x226.png" alt="Tabs - One of Many Great UI Ideas Inspired by Paper" width="194" height="147" /></p>
<p>Experience designers who work in digital media such as <a id="aptureLink_ufu2ruSrjH" href="http://en.wikipedia.org/wiki/Rich%20Internet%20application">RIAs</a>, video games, and DVD menus are already well conditioned to thinking beyond the <em>page</em> as a metaphor for organizing information structures.   But paper itself is not the villain.  In fact, paper can be transformed into all sorts of interesting interactive possibilities  &#8211; including graceful and surprising transitions, progressive disclosure of information, impactful visuals, and above all, a compelling and satisfying simplicity.</p>
<p><span id="more-743"></span></p>
<p>1.  Relocation Card, by <a href="http://www.cpb.co.uk/blog/index.php">Clay Porter Bell</a></p>
<p>In this playful RSVP card, the message &#8220;Please pop round for drinks&#8221; is a double entendre.   &#8220;Pop &#8217;round&#8221; are the casual brit invitation words, but also the die-cut circular window literally <em>pops around</em> to reveal a simple, witty reply form.</p>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-841" title="pop_round" src="http://www.solidstateux.com/wp-content/uploads/2009/09/pop_round1.png" alt="pop_round" width="613" height="523" /></p>
<p>2.  Matisse Picasso Exhibition Invitation by <a href="http://www.salterbaxter-rethinktank.com/">Salterbaxter</a></p>
<p>Concertina folds can create complex and playful transitions in paper.   Here the faces of the artists are cut-up and spliced together, with the individual faces appearing only when the card is held upright and obliquely.</p>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-860" title="mattise_picasso" src="http://www.solidstateux.com/wp-content/uploads/2009/09/mattise_picasso.png" alt="mattise_picasso" width="595" height="632" /></p>
<p>3.  Discovery Networks Europe Mailer by <a href="http://www.salterbaxter-rethinktank.com/">Salterbaxter</a></p>
<p>Double gatefold panels fold in symmetrically to meet in the middle.   The <em>reveal</em> here is delightful, with the choice of transition perfectly reinforcing the message of using the service to gain surprising reach.</p>
<p><img class="aligncenter size-full wp-image-872" title="big_fish" src="http://www.solidstateux.com/wp-content/uploads/2009/09/big_fish1.png" alt="big_fish" width="621" height="673" /></p>
<p>4. Invitation for Smiths of Smithfield by <a href="http://www.fitch.com/index.aspx">Rodney Fitch</a></p>
<p>Here the simple use of a die-cut &#8220;cowhide&#8221; cover sleeve is evocative of a layer mask in Photoshop.</p>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-863" title="cow_print" src="http://www.solidstateux.com/wp-content/uploads/2009/09/cow_print.png" alt="cow_print" width="571" height="569" /></p>
<p>5.  Tri-Ply&#8217;s Right Triangle Box by <a href="http://www.nicepond.com/">Nicepond</a></p>
<p>Packaging designers use the term <em>close-packing</em> to describe shapes designed to fit together on retail shop floors. In this great design the spines are embellished with index images of the object inside on one orientation, and a bold decorative pattern on another.</p>
<p><img class="aligncenter size-full wp-image-892" title="close_pack_1" src="http://www.solidstateux.com/wp-content/uploads/2009/09/close_pack_11.png" alt="close_pack_1" width="554" height="292" /><img class="aligncenter size-full wp-image-893" title="close_pack_3" src="http://www.solidstateux.com/wp-content/uploads/2009/09/close_pack_3.png" alt="close_pack_3" width="374" height="416" /></p>
<p>6.  Rabih Hage Invitation by <a href="http://www.hat-trickdesign.co.uk/main.htm">Hat-trick</a></p>
<p>Another double-gatefold transition, but used here to create a sense of depth and perspective in an invite for an interior design company.   Looking through the cut-out rectangle helps to reinforce the illusion of an elegant room.</p>
<p><img class="alignleft size-medium wp-image-864" title="rabih_1" src="http://www.solidstateux.com/wp-content/uploads/2009/09/rabih_1-300x217.png" alt="rabih_1" width="270" height="195" /><img class="aligncenter size-full wp-image-865" title="rabih_2" src="http://www.solidstateux.com/wp-content/uploads/2009/09/rabih_2.png" alt="rabih_2" width="379" height="333" /></p>
<p>7. Altus Promotional Booklet by <a href="http://www.andrewmacphee.com/">Andrew MacPhee</a></p>
<p>The muse for many interactive paper designers is no doubt the pop-up book.     Here the designer uses restraint to show the power of breaking out of 2D planes to focus attention and give potential condo buyers a feeling of living above it all.</p>
<p style="text-align: center;"><img class="size-full wp-image-835 aligncenter" title="7_Altus" src="http://www.solidstateux.com/wp-content/uploads/2009/09/7_Altus.png" alt="7_Altus" width="605" height="371" /></p>
<p>8.  Skin Jewellery packaging  by J. Maskrey/Artomatic</p>
<p>Transparent overlays are used here in the paper equivalent of a film-maker&#8217;s rack focus.  Controlling the &#8216;depth of field&#8217; via use of shifting focus is a cunning way to draw the user through an interactive narrative.</p>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-877" title="butterfly" src="http://www.solidstateux.com/wp-content/uploads/2009/09/butterfly1.png" alt="butterfly" width="505" height="655" /></p>
<p>9.  Animated wine label  by <a href="http://www.thedieline.com/blog/2009/09/studio-spotlight-elhombredelalata.html">Elhombredelalata</a></p>
<p>A clever low tech animation leverages one of the wine bottle&#8217;s great built-in affordances &#8211; it&#8217;s ability to be spun.</p>
<p><img class="aligncenter size-full wp-image-894" title="elhombredealata" src="http://www.solidstateux.com/wp-content/uploads/2009/09/elhombredealata.gif" alt="elhombredealata" width="378" height="283" /></p>
<p style="text-align: center;">
<p>10.  Nexus DVD Reel Packaging  by <a href="http://www.about-julia.com/">Julia</a></p>
<p>A truly sustainable design, this DVD&#8217;s case is also it&#8217;s mailer.   It&#8217;s clever zip opening gives the user the satisfying feeling of opening a package that comes in the mail, without any of the fuss &#8211; or mess!</p>
<p><img class="aligncenter size-full wp-image-897" title="DVD_1" src="http://www.solidstateux.com/wp-content/uploads/2009/09/DVD_1.png" alt="DVD_1" width="539" height="357" /><strong> </strong></p>
<p><img class="aligncenter size-full wp-image-921" title="DVD_2" src="http://www.solidstateux.com/wp-content/uploads/2009/09/DVD_2.png" alt="DVD_2" width="538" height="360" /></p>
<p><strong>Further Reading on Solid State UX:</strong></p>
<p><a href="http://www.solidstateux.com/interaction-design/10-more-great-interaction-designs-in-cut-and-folded-paper/">10 More Great Interaction Designs – in Cut and Folded Paper</a></p>
<p><strong>Sources:</strong></p>
<p>Luke Herriott&#8217;s <a id="aptureLink_K9KHSafkXw" href="http://www.amazon.com/gp/product/2940361738">&#8220;The Packaging and Design Templates Sourcebook.&#8221;</a></p>
<p>Natalie Avella &#8217;s <a id="aptureLink_53eXvIHMhZ" href="http://www.amazon.com/gp/product/2940361193">Paper Engineering (Revised and Extended)<em>3-D design techniques for a 2-D material</em></a></p>
<p>Smashing Magazine&#8217;s June, 2008 post  <a href="http://www.smashingmagazine.com/2008/06/16/beautiful-brochures-and-booklets/">Beautiful Brochures and Booklets</a></p>
<p>And, finally,  the amazing packaging blog at  <a href="http://www.thedieline.com/blog/">The Dieline.com</a> and their great new book:</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" />
<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" /></p>
<p><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>
<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/10-great-interaction-designs-in-cut-folded-paper/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Wired Misses the Point in Craigslist Cover Story</title>
		<link>http://www.solidstateux.com/reviews/wired-misses-the-point-in-craigslist-cover-story/</link>
		<comments>http://www.solidstateux.com/reviews/wired-misses-the-point-in-craigslist-cover-story/#comments</comments>
		<pubDate>Fri, 21 Aug 2009 18:19:41 +0000</pubDate>
		<dc:creator>Todd Toler</dc:creator>
				<category><![CDATA[Interaction Design]]></category>
		<category><![CDATA[Reviews]]></category>
		<category><![CDATA[emotional design]]></category>

		<guid isPermaLink="false">http://www.solidstateux.com/?p=661</guid>
		<description><![CDATA[The men behind the Internet's greatest anti-brand are portrayed in Wired as Internet Neanderthals.  But the urge to redesign misses the point.]]></description>
			<content:encoded><![CDATA[<div id="attachment_666" class="wp-caption alignleft" style="width: 244px"><img class="size-medium wp-image-666" title="wired_cl" src="http://www.solidstateux.com/wp-content/uploads/2009/08/wired_cl-234x300.png" alt="wired_cl" width="234" height="300" /><p class="wp-caption-text">The September, 2009 Issue of Wired</p></div>
<p>For several years now, I&#8217;ve been showing a screen capture of the craigslist.org home page to audiences at various presentations on usability.   I ask a simple question.   Is this website usable?   The audience members, who are generally students, programmers and business people and not members of the design community, invariably return a resounding <em>yes</em> in response to my question.  It&#8217;s taken for granted.  Craigslist, in all it&#8217;s glorious straightforwardness, <em>defines</em> usable.  Then I proceed to show them how the design breaks a lot of rules &#8211; at least by the conventional wisdom of modern web UI designers.   For instance, the craigslist home page is crammed full and almost completely lacks any sense of visual heirarchy or prioritization.   It provides little to no opportunity for serendipitous discovery of content, only myriad starting options for those who already know what they are looking for.   It&#8217;s chock-full of cryptic abbreviations.  It&#8217;s un-visual.  It squanders precious screen real-estate on seldom used features.  For instance, a full third of the screen is devoted to displaying all the cities where the various Craigslists are located &#8211; something which the average user rarely, if ever,  has the need to change.  Let&#8217;s face it, this site  is a usability train wreck, right?</p>
<p><span id="more-661"></span>Well, few people think so.  In fact, most think the opposite.   The September issue of Wired hits the newstands soon and the cover story is called <a href="http://www.wired.com/entertainment/theweb/magazine/17-09/ff_craigslist">&#8220;The Tragedy of Craigslist.&#8221;</a> The article is a fascinating take on the world&#8217;s greatest anti-brand and the Forest Gump-like savants who run it.  But at the heart of the piece is a condemnation of Craigslist&#8217;s stubborn refusal to evolve it&#8217;s UI design and functionality.   &#8220;On this site, contrary to every principle of usability and common sense, you can&#8217;t easily browse pictures of the apartments for rent.&#8221;    The job postings are a &#8220;wasteland of hypertext links, one line after another, without recommendations or networking features or even protection against duplicate postings.&#8221;  The author, Gary Wolf, rightfully acknowledges craiglist.org&#8217;s role as a cultural force and community asset.  Indeed, he&#8217;s almost offended that the People&#8217;s greatest online resource is so stuck in 1995.   Don&#8217;t the plebes deserve better?   Wired goes so far as to commission four &#8220;extreme makover&#8221; redesigns of the Craigslist homepage by top designers, including a team from Obama&#8217;s site and one from the NYTimes.com.     All in all, it&#8217;s a great piece of writing, and the makeover feature is a lot of fun and I hope they make it a regular feature.   After all, serious criticism of UI is rare compared to other cultural works such as books or movies, and I&#8217;m thrilled to see it here.</p>
<div id="attachment_668" class="wp-caption alignright" style="width: 310px"><img class="size-medium wp-image-668" title="cl_home" src="http://www.solidstateux.com/wp-content/uploads/2009/08/cl_home-300x200.png" alt="Most People Consider This Highly Usable.  Why?" width="300" height="200" /><p class="wp-caption-text">Most People Consider This Highly Usable.  Why?</p></div>
<p>But they missed the point of why the site works in the first place.  It&#8217;s anti-design is no accident at this point.  In fact it&#8217;s carefully curated as the Craigslist &#8220;brand.&#8221;   This design screams utilitarian &#8220;grass roots&#8221; community content that&#8217;s built from the ground up.   The fact that there is not a professional designer within a 1000 miles of the place is exactly where the site&#8217;s authority comes from &#8211; and Craig Newmark knows this.   The site was already comparitavely underdesigned when it was launched in it&#8217;s modern incarnation in 1998.  The results of that exercise that I do in my presentations would seem to indicate that the branding works.  This site is <em>perceived</em> as more usable than almost anything else out there.    This gap between how a user values something because it suits their behavior and how they value it because it hits them on a contemplative, reflective level is at the heart of modern user experience design.  Don Norman sounded the call to think this way in <a id="aptureLink_VJPOBponVb" href="http://en.wikipedia.org/wiki/Emotional%20design">Emotional Design</a>, and here&#8217;s a great example of the reflective aspects of good design in play.   If Craigslist adopted one of the makeover designs in the magazine article they might be dead in the water (although I must admit the contestants showed great restraint and stayed more or less true to the &#8220;brand.&#8221;)  Another example of a product like this is the Bloomberg terminal &#8211; a usability nightmare of dense screens and arcane keyboard shortcuts whose users define their self-worth and status in their Wall St. milieu based on their ability to use it.    Somewhere in portraying the Craigslist guys as the Internet&#8217;s biggest Neanderthals, they seem to have missed the point that the end result is pure UX genius.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.solidstateux.com/reviews/wired-misses-the-point-in-craigslist-cover-story/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>Zooming in on Prezi: A Review</title>
		<link>http://www.solidstateux.com/reviews/zooming-in-on-prezi-a-review/</link>
		<comments>http://www.solidstateux.com/reviews/zooming-in-on-prezi-a-review/#comments</comments>
		<pubDate>Tue, 21 Jul 2009 17:42:18 +0000</pubDate>
		<dc:creator>Todd Toler</dc:creator>
				<category><![CDATA[Reviews]]></category>
		<category><![CDATA[presenting]]></category>
		<category><![CDATA[prezi]]></category>
		<category><![CDATA[productivity tools]]></category>

		<guid isPermaLink="false">http://www.solidstateux.com/?p=310</guid>
		<description><![CDATA[Rid your life of sucky PowerPoints forever.]]></description>
			<content:encoded><![CDATA[<div id="attachment_312" class="wp-caption alignleft" style="width: 310px"><a rel="attachment wp-att-312" href="http://www.solidstateux.com/reviews/zooming-in-on-prezi-a-review/attachment/prezi_nav/"><img class="size-medium wp-image-312 " title="Prezi_nav" src="http://www.solidstateux.com/wp-content/uploads/2009/07/Prezi_nav-300x234.gif" alt="The Prezi Menu" width="300" height="234" /></a><p class="wp-caption-text">The Prezi Menu</p></div>
<p>PowerPoint slide shows are like commercial jet aircraft– ubiquitous in business life, but with technology that hasn’t seemed to budge in decades.   As a communication medium, PowerPoint is one of the great corrupting influences for those of us who trade in the office arts.  It’s the junky sit-com of authoring environments, with it’s crammed toolbars full of lazy visualizations and transitions, text distorters, prix fixe layouts and color schemes, royalty free clip-art hokum and assorted other information-free nonsense.   Its worst trait of all is more fundamental – that it constrains our ideas to the <em>slide</em> as the uniformly sized chunk of information.  Once we commit to dealing in slides, we take an immediate hit on our mental agility and the level of focus we bring to the simple act of conveying our ideas.</p>
<p><span id="more-310"></span>What&#8217;s the problem with slides, anyways?  Well, there&#8217;s two main ones:</p>
<ul>
<li>Problem one:  blank slides beg to be filled.  Our natural sense of pacing is compromised by a feeling that we need to have a roughly equal amount of information on each slide – not too much, not too little.</li>
<li>Problem two:  slides can only be strung together with one-way linearity, each slide presented without the context of the larger organization.   I’ve long struggled with this problem of maintaining context in a PowerPoint deck – particularly when I’m working on a long, multi-concept behemoth with lots of nested ideas that are trying to build to some sort of impactful conclusion.</li>
</ul>
<p>But here’s the thing.  Everyone’s life is plagued by sucky PowerPoint presentations yet it’s not clear at all what will replace them.   If you’re an Apple user, you can tap into a slightly more rarefied set of look-and-feel choices by using Keynote, but with essentially the same end result.  If you’ve got the time and resources, you can work in the media of video or custom Flash animations – but if this were to go mainstream enough to threaten PowerPoint it would have happened by now.</p>
<div id="attachment_311" class="wp-caption alignright" style="width: 310px"><a rel="attachment wp-att-311" href="http://www.solidstateux.com/reviews/zooming-in-on-prezi-a-review/attachment/prezi_tutorial/"><img class="size-medium wp-image-311" title="Prezi_tutorial" src="http://www.solidstateux.com/wp-content/uploads/2009/07/Prezi_tutorial-300x239.gif" alt="The Prezi User Tutorial is a Prezi Itself" width="300" height="239" /></a><p class="wp-caption-text">The Prezi User Tutorial is a Prezi Itself</p></div>
<p>Enter <a href="http://prezi.com/">Prezi</a>, the innovative “zooming” presentation editor that is making a serious bid to change the very concept of <em>business presentation</em> by taking the slide out of the equation altogether. <em> </em> In Prezi, you start by creating a large macro-design, such as a map, then zoom in to add detail to your creations.  Born in Hungary by a youthful tech start-up, Prezi is masterfully designed with an interface that is breathtakingly unfamiliar yet strangely learn-as-you-go.  Indeed, the design is so unusual, that you can bet it would have never seen the light of day at a company with even the smallest degree of risk aversion (even you, Apple).   Gimmicky it may feel, but Prezi’s zooming capability solves a key cognitive problem of PowerPoint – maintaining context – primarily through the Tuftean concept of micro-macro views.  It also easily affords nonlinear authoring of ideas with the option to add the linear presentation “path” later.  This is a liberating way of working.</p>
<p>I’ll take the suspense out of this review right now by saying I’m a huge fan of Prezi, but I’m still trying to find a role for it in my working life.   It is not likely to replace PowerPoint for me, for the simple reason that vertigo-inducing zooms and pans during an in-person presentation are exactly the kind of distractions that I strive to avoid when I speak.  My preferred in-person presentations (that I have either seen or given myself) are straight series of slides that are made up entirely of images.  The first priority should be to concentrate on what the speaker is saying, with background imagery used to illustrate points and for entertainment value.   But Prezi’s true brilliance is in the authoring environment.  With its limited but carefully chosen and artful tools, it inspires creativity but makes it nearly impossible to create anything aesthetically vulgar.  The freedom of working on a single canvas in three dimensions (I’ll count zooming in as a third dimension here) is amazing.  And what’s annoying when projected on the large screen (as during an in-person presentation) is quite engaging on the small screen.  Note that Prezi automatically outputs to Flash and the files can be easily embedded in a website.   So I’m more likely to use this as an alternative to Flash for authoring simple animations intended for the blogs and websites I work on than I am as an alternate to Powerpoint for in-person presentations.</p>
<h4>Related Resources</h4>
<p><img class="alignleft size-thumbnail wp-image-1587" title="prezi_for_dummies" src="http://www.solidstateux.com/wp-content/uploads/2009/07/prezi_for_dummies-150x150.png" alt="" width="105" height="105" /> <a id="aptureLink_hFnu8UIcP9" href="http://www.amazon.com/gp/product/0470625864?tag=sostux-20">Prezi for Dummies </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" />
<p><!--Session data--></p>
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<p><!--Session data--></p>
<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" />
<p><!--Session data--></p>
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<input id="jsProxy" onclick="jsCall();" type="hidden" />
<input id="gwProxy" type="hidden" />
<p><!--Session data--></p>
<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/zooming-in-on-prezi-a-review/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>
