<?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>Design Caffeine&#187; UX Design</title>
	<atom:link href="http://www.designcaffeine.com/tag/ux-design/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.designcaffeine.com</link>
	<description>We design what works.</description>
	<lastBuildDate>Fri, 27 Jan 2012 07:37:25 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>IA Summit * March 21 &#8211; 25, 2012 * New Orleans, Louisiana</title>
		<link>http://www.designcaffeine.com/workshops/ia-summit-march-21-25-2012-new-orleans-louisiana/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=ia-summit-march-21-25-2012-new-orleans-louisiana</link>
		<comments>http://www.designcaffeine.com/workshops/ia-summit-march-21-25-2012-new-orleans-louisiana/#comments</comments>
		<pubDate>Wed, 18 Jan 2012 23:05:53 +0000</pubDate>
		<dc:creator>Greg Nudelman</dc:creator>
				<category><![CDATA[Workshops]]></category>
		<category><![CDATA[android]]></category>
		<category><![CDATA[Design Strategy]]></category>
		<category><![CDATA[iPad]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[Mobile and Tablet UX Design Articles]]></category>
		<category><![CDATA[tablets]]></category>
		<category><![CDATA[UX Design]]></category>

		<guid isPermaLink="false">http://www.designcaffeine.com/?p=2128</guid>
		<description><![CDATA[<strong>Cross-Channel Search: Design Approaches for Mobile and Tablet</strong>
The rise of smartphones and tablets is an unprecedented opportunity for all kinds of search to escape traditional limits and become the single best way to access information. In context. Real-time. Come hear practical tips for designing search with tap-ahead, geo-location, still image and video input, voice and unprecedented personalization… While juggling crushing constraints: limited screen real estate, fat fingers, spotty connections, multi-tasking and shortened attention span. From the author of "<a href="http://www.designcaffeine.com/designing-search-ux-strategies-for-ecommerce-success/" target="_blank">Designing Search: UX Strategies for eCommerce Success</a>" (Wiley, 2011).]]></description>
			<content:encoded><![CDATA[<p><strong>Cross-Channel Search: Design Approaches for Mobile and Tablet</strong><br />
The rise of smartphones and tablets is an unprecedented opportunity for all kinds of search to escape traditional limits and become the single best way to access information. In context. Real-time. Come hear practical tips for designing search with tap-ahead, geo-location, still image and video input, voice and unprecedented personalization… While juggling crushing constraints: limited screen real estate, fat fingers, spotty connections, multi-tasking and shortened attention span. From the author of &#8220;<a href="http://www.designcaffeine.com/designing-search-ux-strategies-for-ecommerce-success/" target="_blank">Designing Search: UX Strategies for eCommerce Success</a>&#8221; (Wiley, 2011).</p>
<p>Date &amp; Time: Sunday, 25 March 10:45am — 11:30am<br />
Location: Room 2<br />
Track: 2 &#8211; Exploring and Thinking</p>
<p><a href="http://2012.iasummit.org/schedule/cross_channel_search.html" target="_blank">http://2012.iasummit.org/schedule/cross_channel_search.html</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.designcaffeine.com/workshops/ia-summit-march-21-25-2012-new-orleans-louisiana/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>7 Ways to Whip Up Viral Value Through QR Codes: #6 Connect Through Social Networks (Part 1 of 2)</title>
		<link>http://www.designcaffeine.com/articles/7-ways-to-whip-up-viral-value-through-qr-codes-6-connect-through-social-networks-part-1/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=7-ways-to-whip-up-viral-value-through-qr-codes-6-connect-through-social-networks-part-1</link>
		<comments>http://www.designcaffeine.com/articles/7-ways-to-whip-up-viral-value-through-qr-codes-6-connect-through-social-networks-part-1/#comments</comments>
		<pubDate>Mon, 16 Jan 2012 21:00:40 +0000</pubDate>
		<dc:creator>Greg Nudelman</dc:creator>
				<category><![CDATA[Articles]]></category>
		<category><![CDATA[Design Strategy Articles]]></category>
		<category><![CDATA[Featured UX Design Articles]]></category>
		<category><![CDATA[Mobile and Tablet UX Design Articles]]></category>
		<category><![CDATA[ads]]></category>
		<category><![CDATA[ecommerce]]></category>
		<category><![CDATA[iPad]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[landing pages]]></category>
		<category><![CDATA[QR code]]></category>
		<category><![CDATA[Social Networking]]></category>
		<category><![CDATA[tablet]]></category>
		<category><![CDATA[UX Design]]></category>

		<guid isPermaLink="false">http://www.designcaffeine.com/?p=2107</guid>
		<description><![CDATA[Installment #6 shows how to deliver QR code value by allowing your customers to connect to your company through social networks. As of the date of this writing, many companies have been implementing their social mobile engagement strategy by putting printed Facebook and Twitter “buttons” on everything from print advertising to packaging.  We think QR codes offer a much better solution. This is Part 1 of the article: 6 Reasons Printed Buttons Must Die.]]></description>
			<content:encoded><![CDATA[<p>The critical challenge of using QR codes is to <em>provide solid value in the mobile context of use</em>.  This series of 7 articles helps answer how to provide value for you, your company and your brand through creative use of a QR code. (If you are wondering what in world is a QR code and why you should care about it, you may want to start with <em><a title="(Open in a New Window)" href="http://www.designcaffeine.com/articles/3-secrets-for-a-successful-qr-code-campaign/" target="_blank">3 Secrets for a Successful QR Code Campaign</a>.)</em></p>
<blockquote><p>As of the date of this writing, many companies have been implementing their social mobile engagement strategy by putting printed Facebook and Twitter “buttons” on everything from print advertising to packaging.</p></blockquote>
<p>Here is example from the chocolate bar wrapper we discussed in the previous article:</p>
<p><a href="http://www.designcaffeine.com/wp-content/uploads/2012/01/7-ways-to-whip-up-viral-value-through-qr-codes-6-connect-through-social-networks-part-1-chocolate-wrapper.jpg"><img class="aligncenter size-medium wp-image-2108" title="7-ways-to-whip-up-viral-value-through-qr-codes-6-connect-through-social-networks-part-1-chocolate-wrapper" src="http://www.designcaffeine.com/wp-content/uploads/2012/01/7-ways-to-whip-up-viral-value-through-qr-codes-6-connect-through-social-networks-part-1-chocolate-wrapper-300x224.jpg" alt="" width="300" height="224" /></a></p>
<p>And here is another example of the same “buttons” on a high-end spa advertisement in a wellness journal.</p>
<p><a href="http://www.designcaffeine.com/wp-content/uploads/2012/01/7-ways-to-whip-up-viral-value-through-qr-codes-6-connect-through-social-networks-part-1-hotze.jpg"><img class="aligncenter size-medium wp-image-2109" title="7-ways-to-whip-up-viral-value-through-qr-codes-6-connect-through-social-networks-part-1-hotze" src="http://www.designcaffeine.com/wp-content/uploads/2012/01/7-ways-to-whip-up-viral-value-through-qr-codes-6-connect-through-social-networks-part-1-hotze-300x224.jpg" alt="" width="300" height="224" /></a></p>
<p>These “buttons” are supposed to drive engagement with the product or ad via social media on their mobile device, in context, e.g. while looking at the ad or opening a wrapper. Does this strategy work? Or would something else, like a QR code, be more appropriate in this situation?</p>
<p>Personally, I’d like to propose the following <em>6 Reasons Printed Buttons Must Die</em>:</p>
<h1>1. Printed buttons are amateurish.</h1>
<p>It’s quite accepted by now that every company worthy of its name has a presence on major social networks like Facebook and Twitter.  Adding this fact to a product packaging merely makes your company look like an amateur in social networking space: “Of course you are on Facebook. Isn’t everyone? Did they just get on there or something? And, does this mean you guys aren’t also on Google Plus/whatever (insert your favorite social network name here)?”</p>
<h1>2. Printed buttons require extra work and are error prone.</h1>
<p>Let’s say that for some unfathomable reason, I really do want to follow Simply Lite chocolate company on Twitter. Really. Forget the <em>why</em> for a second, let’s concentrate on the <em>how</em>. The first thing I have to do is type in a query. Typing on mobile phone is work. But even if I do this work, as you can see, I have plenty of results to confuse my next step:</p>
<p><a href="http://www.designcaffeine.com/wp-content/uploads/2012/01/7-ways-to-whip-up-viral-value-through-qr-codes-6-connect-through-social-networks-part-1-twitter.png"><img class="aligncenter size-medium wp-image-2110" title="7-ways-to-whip-up-viral-value-through-qr-codes-6-connect-through-social-networks-part-1-twitter" src="http://www.designcaffeine.com/wp-content/uploads/2012/01/7-ways-to-whip-up-viral-value-through-qr-codes-6-connect-through-social-networks-part-1-twitter-200x300.png" alt="" width="200" height="300" /></a></p>
<p>Which one should I pick? How about <em>simplylite</em>? As it happens, <em>simplylite</em>, is not the droid I am looking for. But instead a rather single-minded young lady:</p>
<p><a href="http://www.designcaffeine.com/wp-content/uploads/2012/01/7-ways-to-whip-up-viral-value-through-qr-codes-6-connect-through-social-networks-part-1-simplylite.png"><img class="aligncenter size-medium wp-image-2111" title="7-ways-to-whip-up-viral-value-through-qr-codes-6-connect-through-social-networks-part-1-simplylite" src="http://www.designcaffeine.com/wp-content/uploads/2012/01/7-ways-to-whip-up-viral-value-through-qr-codes-6-connect-through-social-networks-part-1-simplylite-200x300.png" alt="" width="200" height="300" /></a></p>
<p>Other top picks include <em>simplylites</em> and <em>simplylite1</em>. The right choice happens to be behind door #4: the unfortunately named <em>SimplyLiteChoc</em> – <em>the last search result</em>!</p>
<blockquote><p>By using the &#8220;buttons&#8221;, the company forces customers to guess the Twitter handle <em>and</em> type it in. The company further risks losing the possible connection through any Twitter handle that is the least bit unintuitive as it is easily lost in the over-abundance of information.</p></blockquote>
<h1>3. Printed buttons deliver no value.</h1>
<blockquote><p>Not only is engaging with the company through these “buttons” is difficult, there is simply no value to the customer holding the chocolate bar to engage with the company’s Twitter feed.</p></blockquote>
<p>Frankly, I find the <em>simplylite</em> young lady considerably more engaging. As it turns out, numbers support my conclusion: SimplyLite company’s social media strategy has yielded a whooping 26 followers (Wow!) under the <em>SimplyLiteChoc</em> Twitter handle:</p>
<p><a href="http://www.designcaffeine.com/wp-content/uploads/2012/01/7-ways-to-whip-up-viral-value-through-qr-codes-6-connect-through-social-networks-part-1-simplylitechoc.png"><img class="aligncenter size-medium wp-image-2112" title="7-ways-to-whip-up-viral-value-through-qr-codes-6-connect-through-social-networks-part-1-simplylitechoc" src="http://www.designcaffeine.com/wp-content/uploads/2012/01/7-ways-to-whip-up-viral-value-through-qr-codes-6-connect-through-social-networks-part-1-simplylitechoc-200x300.png" alt="" width="200" height="300" /></a></p>
<p>While 36 people (or about 50% more) are following the <em>simplylite</em> lady. In the words of Dr. Phil: “Simply Lite, how is that strategy working for ya?”. Not very well, obviously.</p>
<h1>4. Printed buttons are fake.</h1>
<blockquote><p>These printed “buttons” look modern, hip and digital. The “button” design borrowed from the iPhone App Store and Android Market implies that they are clickable. <em>They are not.</em></p></blockquote>
<p>It is as though the company is trying to play a game of pretend, much like my 6-year-old building a spaceship control panel from an old cardboard box, stickers and tape:</p>
<p><a href="http://www.designcaffeine.com/wp-content/uploads/2012/01/7-ways-to-whip-up-viral-value-through-qr-codes-6-connect-through-social-networks-part-1-spaceship.jpg"><img class="aligncenter size-medium wp-image-2113" title="7-ways-to-whip-up-viral-value-through-qr-codes-6-connect-through-social-networks-part-1-spaceship" src="http://www.designcaffeine.com/wp-content/uploads/2012/01/7-ways-to-whip-up-viral-value-through-qr-codes-6-connect-through-social-networks-part-1-spaceship-300x224.jpg" alt="" width="300" height="224" /></a></p>
<p>Note that she used tree leaves for take-off and landing buttons, proving that in the future green technology is really going to be huge&#8230; But I digress. For 6-year-olds, pretend is a fantastic game to play. If you are a company, however, the game of pretend simply does not work. Unless maybe if you are Disney, in which case, go right ahead.</p>
<blockquote><p>For companies seeking to engage with their customers in social media, the hip printed digital “buttons” send the wrong message. They are not <em>pretend</em>. They are <em>fake</em>.</p></blockquote>
<h1>5. Printed buttons are not scalable.</h1>
<p>What happens when your company expands past a 2 social networks? How does the fake printed “button” strategy “scale”? Here is an example from a recent print ad from Williams Sonoma with 4 different printed “buttons”:</p>
<p><a href="http://www.designcaffeine.com/wp-content/uploads/2012/01/7-ways-to-whip-up-viral-value-through-qr-codes-6-connect-through-social-networks-part-1-williams-sonoma-big.jpg"><img class="aligncenter size-medium wp-image-2114" title="7-ways-to-whip-up-viral-value-through-qr-codes-6-connect-through-social-networks-part-1-williams-sonoma-big" src="http://www.designcaffeine.com/wp-content/uploads/2012/01/7-ways-to-whip-up-viral-value-through-qr-codes-6-connect-through-social-networks-part-1-williams-sonoma-big-e1326687051983-224x300.jpg" alt="" width="224" height="300" /></a></p>
<p>When will this “mobile social engagement strategy” run out of print space? When they add Flickr, Tumblr, Gowalla, Google Plus? Obviously, this kind of growth is unsustainable.</p>
<h1>6. Printed button logos don’t mean a thing.</h1>
<p>Although Facebook, Twitter and YouTube enjoy almost universal recognition, at least among the 10,000 elite super-geeks of the San Francisco Bay Area’s High-Tech community, I have not the foggiest idea what obscure social network the fake button #4 is supposed to connect me to:</p>
<p><a href="http://www.designcaffeine.com/wp-content/uploads/2012/01/7-ways-to-whip-up-viral-value-through-qr-codes-6-connect-through-social-networks-part-1-willaims-sonoma2.jpg"><img class="aligncenter size-medium wp-image-2118" title="7-ways-to-whip-up-viral-value-through-qr-codes-6-connect-through-social-networks-part-1-willaims-sonoma2" src="http://www.designcaffeine.com/wp-content/uploads/2012/01/7-ways-to-whip-up-viral-value-through-qr-codes-6-connect-through-social-networks-part-1-willaims-sonoma2-e1326687426684-224x300.jpg" alt="" width="224" height="300" /></a></p>
<blockquote><p>Maybe if push this “button” really hard and make the modem beeping noise with my lips: “beeeep… chk….click…beeeeep…chk chk… pop…beeeep….” Nope, that didn’t work. Sorry Williams Sonoma. I guess it’s broken.</p></blockquote>
<p>There is a better way to help your customers engage with your print ad or product packaging using social media: a well-constructed QR code campaign. And I will give you the secrets of social media engagement through QR code in the exciting conclusion of this article (coming up in 2 weeks). Don’t miss a thing! Sign up below if you are not part of my Tablet &amp; Mobile Design Secrets newsletter.</p>
[signature]
]]></content:encoded>
			<wfw:commentRss>http://www.designcaffeine.com/articles/7-ways-to-whip-up-viral-value-through-qr-codes-6-connect-through-social-networks-part-1/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Mobile Websites, Tablet Apps and Hybrids: 7 Mobile Strategy Tips for 2012</title>
		<link>http://www.designcaffeine.com/articles/mobile-websites-tablet-apps-and-hybrids-7-mobile-strategy-tips-for-2012/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=mobile-websites-tablet-apps-and-hybrids-7-mobile-strategy-tips-for-2012</link>
		<comments>http://www.designcaffeine.com/articles/mobile-websites-tablet-apps-and-hybrids-7-mobile-strategy-tips-for-2012/#comments</comments>
		<pubDate>Tue, 03 Jan 2012 19:40:22 +0000</pubDate>
		<dc:creator>Greg Nudelman</dc:creator>
				<category><![CDATA[Articles]]></category>
		<category><![CDATA[Design Strategy Articles]]></category>
		<category><![CDATA[Featured UX Design Articles]]></category>
		<category><![CDATA[Mobile and Tablet UX Design Articles]]></category>
		<category><![CDATA[best practices]]></category>
		<category><![CDATA[Design Strategy]]></category>
		<category><![CDATA[ecommerce]]></category>
		<category><![CDATA[Inspiration]]></category>
		<category><![CDATA[iPad]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[Kindle Fire]]></category>
		<category><![CDATA[revenue]]></category>
		<category><![CDATA[tablet]]></category>
		<category><![CDATA[UX Design]]></category>

		<guid isPermaLink="false">http://www.designcaffeine.com/?p=2061</guid>
		<description><![CDATA[Sites like YouTube and Facebook are already projecting mobile use to surpass desktop use as early as *this year*. What’s your mobile and tablet strategy? Allow me to humbly present the wisdom I got from the experience of walking the last 365 miles. Barefoot. In the snow. Uphill both ways.]]></description>
			<content:encoded><![CDATA[<p>Last few years of mobile growth have been phenomenal. According to Luke Wroblewski’s well-documented blog post, “<a title="Mobile Monday: A Year From Now... (Opens in a New Window) " href="http://www.lukew.com/ff/entry.asp?1463" target="_blank">Mobile Monday: A Year From Now&#8230;</a>” major sites like YouTube and Facebook are projecting mobile use to surpass desktop use as early as <em>this year</em>!</p>
<p>Make 2012 the year you take ownership of your mobile and tablet strategy.  Here are 7 tips to help you get started. Not every tip will apply to every business. If you have a question, please don’t hesitate to set up your free 30 minute consultation where we can discuss what strategies may be right for you.  <a href="http://www.designcaffeine.com/contact/" target="_blank">Click here</a> to go to my contact page.</p>
<h2>Tip #7: Mobile is about Vision, not Numbers</h2>
<p>I often say in my presentations that </p>
<blockquote><p>
If your company does not have a mobile strategy, it does not have a growth strategy.
</p></blockquote>
<p>Yet many companies say that they simply “do not see the numbers” they need to convince themselves that mobile strategy is worth pursuing. </p>
<p>Relying on the current trickle of mobile traffic as a prediction of the tsunami that is just around the bend in mobile space is a <em>fundamental mistake</em>. Despite rocket growth, mobile is still in its infancy. Just like in the early days of the internet many people would dismiss the web as a “fad”, managers that compare mobile visit numbers to web visit numbers are completely missing the point.  </p>
<blockquote><p>
Mobile context of use is as different from desktop web, as Internet was from the brick-and-mortar.
</p></blockquote>
<p>Just like the early adopters of the Internet like Amazon, Staples, Yahoo, Facebook, Verisign and many others have been able to see the value of the new technology and take advantage of it, mobile land grab is going on right now.  And it’s moving at <em>ten times</em> the break-necking speed of the Internet growth of only a decade ago.</p>
<p>Today, it is patently absurd to think that <em>any</em> company would sit on a sidelines of the internet with a static brochure-ware site waiting for the visit numbers to catch up to their brick-and-mortar visitors before they invest into a transaction-capable ecommerce platform.  Yet this is <em>exactly</em> what I see going on in Mobile space.</p>
<p>Take fancy last-minute gift giving – a perfect example of mobile context of use. While some companies like 800 Flowers invest in building award-winning mobile experiences:</p>
<p><a href="http://www.designcaffeine.com/wp-content/uploads/2012/01/mobile-strategy_tips_800_flowers.png"><img src="http://www.designcaffeine.com/wp-content/uploads/2012/01/mobile-strategy_tips_800_flowers-200x300.png" alt="" title="mobile strategy_tips_800_flowers" width="200" height="300" class="aligncenter size-medium wp-image-2076" /></a></p>
<p>Others, like Red Envelope are sitting on the mobile sidelines waiting for the chickens to hatch:</p>
<p><a href="http://www.designcaffeine.com/wp-content/uploads/2012/01/mobile-strategy_tips_red_envelope.png"><img src="http://www.designcaffeine.com/wp-content/uploads/2012/01/mobile-strategy_tips_red_envelope-200x300.png" alt="" title="mobile strategy_tips_red_envelope" width="200" height="300" class="aligncenter size-medium wp-image-2077" /></a></p>
<p>And hatch they will – because any customer that uses a mobile phone to shop on the current version of RedEnvelope.com will be unlikely to face the pain of doing so again in the near future.</p>
<blockquote><p>
Investment in the mobile technology should be driven by Vision of what this new channel can do for your company, not simple game of number crunching.  
</p></blockquote>
<p>Make 2012 the year you develop and invest into your mobile strategy.</p>
<h2>Tip #6: Mobile Apps Space is Oversaturated</h2>
<p>Unless you are building the next Angry Birds or N.O.V.A., forget building an app. Shocking? I hope not.</p>
<blockquote><p>
Apple App store and Android Market each contain over 500,000 apps. Yet both marketplaces are still geared toward the browse model that does not scale past about 1,000 items, especially on the tiny screen of the mobile device.
</p></blockquote>
<p>To paraphrase the classic Jared Spool example, customers searching for “easy to use to do list” will get no better results than those searching for “mysteries that are not scary”.  In a word, not at all what they expected or can put to use.  </p>
<p>What does that leave you with? </p>
<p>Unfair, ridiculous competition for very limited attention span of a fickle mobile app consumer. While there will always be room for well executed specialized apps like Twitter or Gowalla, the truth is that mobile app space is simply oversaturated. People have figured out that they do not need your app if they plan to use it only occasionally. Outside of games, today’s mobile consumers will simply not put forward the time, phone space and bandwidth commitment required to download and update your app if your (or your competitor’s) mobile site will do just fine.</p>
<blockquote><p>
In contrast to mobile apps, the tablet app space is ripe for the taking (see Tip #2 below).
</p></blockquote>
<h2>Tip #5: Hybrid Apps Must Die</h2>
<p>Once I had a Coleman canoe. It cost only $300. The salesperson explained that a near 7X reduction in price is due to the new manufacturing process: the new hull design of the Coleman allows the canoes to be stamped out of a single sheet of plastic and transported from China with hulls stacked one inside another like Russian Matryoshkas, allowing the manufacturer to stuff about 1000 into a single shipping crate. In contrast, a typical canoe at that time cost over $2000, had to be built by hand and packaged individually, shipping at only about 50 per crate.</p>
<p>Sometimes, you get <em>exactly</em> what you pay for. The Coleman canoe I purchased <em>was optimized for manufacturing and shipping, not paddling.</em> My $300 canoe paddled not a penny more, nor less than the $300 I paid for it: flexing, twisting, warping, dragging and capsizing at every opportunity.</p>
<p>The same rule applies to hybrid mobile apps.  </p>
<blockquote><p>
Just because hybrid apps are cheap to build and maintain, does not mean they create the same experience as the higher-end custom mobile apps. Just the opposite.
</p></blockquote>
<p>Like the $300 Coleman canoe, Hybrid apps often create confusing architecture on either Apple or Android, and offer scant advantages over a mobile website, basically providing link to what is essentially the same website, but with about 20% less screen real-estate and no speed or functionality improvements. </p>
<p>Why is this a problem? </p>
<blockquote><p>
Downloading an app is a big commitment on the part of the customer, and people expect some extra functionality and convenience. And as a rule, hybrid apps simply don’t deliver, so people that download hybrid apps feel cheated.
</p></blockquote>
<p>It’s very easy to see which apps are Hybrid just by looking at the comments in the App Store. Mobile consumers are not fools, and they will let you know when your app just does not measure app to the dedicated full-fledged iPhone and Android experiences carefully crafted by your competitors.</p>
<p>2011 was a year of turbulent market consolidation for mobile platforms. With Nokia out of the picture, Windows Mobile&#8217;s consistently lagging IE browser, HP flushing the Palm Web OS down the toilet and Blackberry’s stubborn refusal to evolve past being an enterprise email platform, the mobile market is essentially down to only two competitors: iOS and Android. If you must, think of it as building desktop software for Windows and Mac. You have no excuse not to build a custom app optimized for at least one or the other. If you really must have an app that is – for most purposes a good mobile website makes a smarter investment.</p>
<h2>Tip #4: Mobile Website First</h2>
<p>Now that the mobile apps market is over-saturated, what’s left? Although one size does not fit all, </p>
<blockquote><p>
As a rule of thumb, a good mobile website should be the basis of your mobile strategy. 
</p></blockquote>
<p>There are many reasons for this. Not the least is the “<a title="(Open in a New Window)" href="http://www.lukew.com/ff/entry.asp?933" target="_blank">Mobile First</a>” concept popularized by Luke Wroblewski. If you take the Mobile First path, your design and development will be streamlined, your team more focused and empowered.  Your layout and Information Architecture simpler and more intuitive. Your forms will be devoid of the extraneous fields that some brilliant marketing professional (who is (un?)fortunately no longer with your company) decided it was a good idea to force your customers to fill out.</p>
<p>Like any birth, the process of transition to mobile will be painful. But happen it must, if your company is to survive the coming general shift from desktop to mobile use. And, if you allow this birth to happen, mobile will be the fresh wind that will blow through all of your digital offerings, removing the cobwebs of accumulated features no one uses, outdated circumlocution of lawyer-speak, useless hero images of <a title="Gratuitous reference to one of my favorite musicians (Opens in a New Window)" href="http://www.norahjones.com/discography/the-fall.php" target="_blank">naked skinny blondes eating burgers</a> and other sacred mad-cows that should have been disposed as bio-hazard waste ages ago. </p>
<blockquote><p>
If you design and build mobile first, you will get to the core of your features and brand value.
</p></blockquote>
<p>If you need to see this process in action, just compare the eBay.com – a bloated bling-encrusted Titanic, rule-bound and feature-laden to the point of near-unusability with its streamlined, slick mobile counterpart.</p>
<h2>Tip #3: Build an App if you Have a Good Easter Egg</h2>
<p>There is one exception to the mobile website first rule: what I call Easter Egg functionality.  </p>
<blockquote><p>
If your app can offer your customers something they <em>frequently want to use in the mobile context</em>, that mobile website cannot, it is worth building an app.
</p></blockquote>
<p>Examples include frequent GPS use, storing login information for faster login (or bypassing login altogether), clever integration of accelerometer, camera, voice recognition or other on-board mobile sensors.</p>
<p>You have to be perfectly honest with yourself about the “frequent use” part of the above statement. With the release of the HTML 5 standard, “occasional” use of the native phone functionality like GPS no longer qualifies. Let me give you an example: if you have a mobile ecommerce website that can also be used to track down store locations in your area, this does not qualify as “frequent use”, and can be implemented using HTML 5. The only difference will be that the site will ask permission on every occasion of using the GPS.</p>
<p>On the other hand, Yelp dictates strong preference for the app over the mobile website, due to local nature of almost every query that requires use of the GPS. Asking permission to use GPS ever time you use Yelp would be tedious and distracting. Another Easter Egg in the Yelp app is the Monocle, that creates a virtual reality overlay using the on-board camera, a neat and useful trick that would be very hard to implement using HTML alone:</p>
<p><a href="http://www.designcaffeine.com/wp-content/uploads/2012/01/mobile-strategy_tips_yelp_monocle.png"><img src="http://www.designcaffeine.com/wp-content/uploads/2012/01/mobile-strategy_tips_yelp_monocle-200x300.png" alt="" title="mobile strategy_tips_yelp_monocle" width="200" height="300" class="aligncenter size-medium wp-image-2078" /></a></p>
<p>There are many examples of great apps that I included in my book: “<a href="http://www.designcaffeine.com/designing-search-ux-strategies-for-ecommerce-success/" target="_blank">Designing Search: UX Strategies for Ecommerce Success</a>” (Wiley 2011).  You can download a sample chapter <a href="http://www.designcaffeine.com/designing-search-ux-strategies-for-ecommerce-success/" target="_blank">here</a>.</p>
<h2>Tip #2: Mobile Offerings Do Not Work on Larger Tablets</h2>
<p>Despite what the official Party Line towed by both Apple and Google <em>mobile apps do not work on Tablets</em>. More accurately,</p>
<blockquote><p>
Mobile apps do <em>render</em> on tablets, in a very limited and rather goofy way that does not take advantage of the tablet’s unique capabilities, ergonomics, context of use or the tablet’s status as a shared family device.
</p></blockquote>
<p>Larger 9-10 inch tablets are a completely different type of device – <em>a “Third Device”</em>, not simply a large iPhone. While specific Tablet design considerations are beyond the scope of this short article, I will discuss them in detail in later installments of this newsletter. I dedicate Chapter 17 of “<a href="http://www.designcaffeine.com/designing-search-ux-strategies-for-ecommerce-success/" target="_blank">Designing Search: UX Strategies for Ecommerce Success</a>” exclusively to Tablet search designs.</p>
<p>The main take-away is that while all mobile device traffic should be redirected to your mobile website, the larger 9-10 inch tablets should use a desktop web site or dedicated luxury custom tablet app. </p>
<blockquote><p>
In contrast to mobile apps, tablet apps still offer an excellent expansion opportunity. Very few companies have figured out how to do them well.
</p></blockquote>
<p>Many websites will work “as is” on the tablet. However, I recommend doing a thorough audit of key money-generating workflows and fix or redesign any functionality that doesn’t work on a tablet. Furthermore, if your mobile strategy includes attracting and retaining significant tablet traffic, I also recommend planning a version of your desktop web site with a tablet-optimized design and CSS. Google.com for tablet, with more whitespace between search results, “airy” page layout, and many other enhancements offers excellent inspiration:</p>
<p><a href="http://www.designcaffeine.com/wp-content/uploads/2012/01/mobile-strategy_tips_google_tablet.png"><img src="http://www.designcaffeine.com/wp-content/uploads/2012/01/mobile-strategy_tips_google_tablet-300x225.png" alt="" title="mobile strategy_tips_google_tablet" width="300" height="225" class="aligncenter size-medium wp-image-2079" /></a></p>
<p>Should you also build a special version of your website for a 7-inch tablet, such as Kindle Fire? This question brings us to our #1 tip:</p>
<h2>Tip #1: Consider A Future-Friendly Responsive Website</h2>
<p>For content-heavy websites, media publishing, and even ecommerce, future-friendly responsive design may be your best bet. Responsive design is a huge topic. With the redesign of the Boston Globe in 2011, the entire “Future Friendly” movement has moved beyond the geeks’ garage and into the world at large, capturing the imagination of many.  </p>
<blockquote><p>
The idea is deceptively simple: building a single website that adopts to render reasonably well on all existing and many of the future devices, in portrait and landscape modes. The reality is of course much more complicated.
</p></blockquote>
<p>For example, <a href="http://scottjehl.com/" target="_blank">Scott Jehl&#8217;s</a> brilliant use of JavaScipt in the Boston Globe redesign has demonstrated some creative technical solutions to the challenges of responsive design.</p>
<p>Recently, we also put our money where our mouth was with the responsive redesign of DesignCaffeine.com.  Our site now renders well on all of the modern devices. In the process, we learned a few things, which we’ll be sharing with you shortly, right here, in the <strong>Tablet &amp; Mobile Design Secrets</strong> Newsletter. To make sure you do not miss out, be sure to sign up below.</p>
<p>We Wish You a Great Mobile 2012!</p>
[signature]
]]></content:encoded>
			<wfw:commentRss>http://www.designcaffeine.com/articles/mobile-websites-tablet-apps-and-hybrids-7-mobile-strategy-tips-for-2012/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Enterprise Search Summit Fall * November 1-3, 2011 * Washington, DC</title>
		<link>http://www.designcaffeine.com/workshops/enterprise-search-summit-fall-november-1-3-2011-washington-dc/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=enterprise-search-summit-fall-november-1-3-2011-washington-dc</link>
		<comments>http://www.designcaffeine.com/workshops/enterprise-search-summit-fall-november-1-3-2011-washington-dc/#comments</comments>
		<pubDate>Tue, 01 Nov 2011 19:32:14 +0000</pubDate>
		<dc:creator>Greg Nudelman</dc:creator>
				<category><![CDATA[Workshops]]></category>
		<category><![CDATA[Mobile and Tablet UX Design Articles]]></category>
		<category><![CDATA[Presentation]]></category>
		<category><![CDATA[Search UX Design Articles]]></category>
		<category><![CDATA[UX Design]]></category>
		<category><![CDATA[Workshop]]></category>

		<guid isPermaLink="false">http://www.designcaffeine.com/?p=955</guid>
		<description><![CDATA[<strong>Ubiquitous Enterprise Search: New Design Approaches for Mobile and Tablet</strong>
Lessons from ecommerce and other consumer-oriented mobile designs will provide practical strategies on managing the high-risk mobile search investment and growing the scope of enterprise search offerings.]]></description>
			<content:encoded><![CDATA[<p><strong>Ubiquitous Enterprise Search: New Design Approaches for Mobile and Tablet</strong><br />
<a href="http://www.designcaffeine.com/wp-content/uploads/2011/03/ess_large.png"><img class="alignleft size-full wp-image-686" title="ess_large" src="http://www.designcaffeine.com/wp-content/uploads/2011/03/ess_large.png" alt="" width="343" height="89" /></a>The rise of smart phones and tablets is an unprecedented opportunity for enterprise search to escape traditional limits and become the single best way to access all enterprise information.   It has the ability to bring search to where the business processes and decisions actually happen, in real-time, connecting your employees with vital enterprise resources and with each other.  New features enabled by mobile devices include geo-location, still image and video input, voice search and unprecedented personalization. Yet mobile search also juggles some crushing constraints: limited screen real estate, fat fingers, slow and spotty connections, multi-tasking and shortened attention span, all of which dictate careful consideration of the design of search interface. Lessons from ecommerce and other consumer-oriented mobile designs will provide practical strategies on managing the high-risk mobile search investment and growing the scope of enterprise search offerings.</p>
<p><a href="http://www.enterprisesearchsummit.com/Spring2011/Speakers/GregNudelman.aspx" target="_blank"><strong>Enterprise Search Summit website ⇒</strong></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.designcaffeine.com/workshops/enterprise-search-summit-fall-november-1-3-2011-washington-dc/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>ScketchCamp Chi * October 22, 2011 * Chicago, IL</title>
		<link>http://www.designcaffeine.com/workshops/scketchcamp-chi-october-22-2011-chicago-il/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=scketchcamp-chi-october-22-2011-chicago-il</link>
		<comments>http://www.designcaffeine.com/workshops/scketchcamp-chi-october-22-2011-chicago-il/#comments</comments>
		<pubDate>Sat, 22 Oct 2011 01:01:10 +0000</pubDate>
		<dc:creator>Greg Nudelman</dc:creator>
				<category><![CDATA[Workshops]]></category>
		<category><![CDATA[drawing]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[paper prototypes]]></category>
		<category><![CDATA[post-it notes]]></category>
		<category><![CDATA[Presentation]]></category>
		<category><![CDATA[prototyping]]></category>
		<category><![CDATA[sketching]]></category>
		<category><![CDATA[UX Design]]></category>
		<category><![CDATA[UX Research]]></category>
		<category><![CDATA[Workshop]]></category>

		<guid isPermaLink="false">http://www.designcaffeine.com/?p=2092</guid>
		<description><![CDATA[<strong>Agile Mobile Design Sketching</strong>
In this intensive, hands-on session, participants will learn how to use a pack of post-it notes to successfully simulate a mobile device and re-create and study key interactions, transitions and touch-screen control ergonomics cheaply, quickly and accurately.  Participants will walk away with a set of completed paper-prototype screens of their next app, ready for testing.]]></description>
			<content:encoded><![CDATA[<p><strong>Agile Mobile Design Sketching</strong><br />
Mobile is the next frontier for designers and developers alike with explosive growth and universal appeal unlike that of any other technology. And nowhere more than in mobile, is it more important to distill the experience down to essentials. While it&#8217;s tempting to fantasize about getting the mobile experience right the first time, in reality this rarely, if ever happens. Partly, this is due to the limitations of the mobile platform itself: as a designer you can&#8217;t provide extensive navigation structures, helpful content or visuals to ameliorate information architecture issues or interaction disasters. These factors make accessible mobile prototyping and continuous customer testing a virtual necessity for a successful mobile project. Unfortunately, most reliable desktop web prototyping frameworks such as Axure, Fireworks, Dreamweaver and HTML are too heavy and cumbersome for rapid prototyping on mobile devices and require significant investment of money and time.</p>
<p>Enter agile mobile paper prototyping. In this intensive, hands-on session, participants will learn how to use a pack of post-it notes to successfully simulate a mobile device and re-create and study key interactions, transitions and touch-screen control ergonomics cheaply, quickly and accurately.  Participants will walk away with a set of completed paper-prototype screens of their next app, ready for testing. A limited number of Post-it notes packs will be provided, on a first-come basis.</p>
<p><a href="http://www.sketchcampchicago.com/" target="_blank">http://www.sketchcampchicago.com/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.designcaffeine.com/workshops/scketchcamp-chi-october-22-2011-chicago-il/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Designing for Mobile &amp; Tablet Workshop * October 21, 2011 * Milwaukee, WI</title>
		<link>http://www.designcaffeine.com/workshops/designing-for-mobile-tablet-workshop-october-21-2011-milwaukee-wi/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=designing-for-mobile-tablet-workshop-october-21-2011-milwaukee-wi</link>
		<comments>http://www.designcaffeine.com/workshops/designing-for-mobile-tablet-workshop-october-21-2011-milwaukee-wi/#comments</comments>
		<pubDate>Fri, 21 Oct 2011 01:01:16 +0000</pubDate>
		<dc:creator>Greg Nudelman</dc:creator>
				<category><![CDATA[Workshops]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[interaction design]]></category>
		<category><![CDATA[iPad]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[Mobile and Tablet UX Design Articles]]></category>
		<category><![CDATA[Presentation]]></category>
		<category><![CDATA[tablet]]></category>
		<category><![CDATA[UX Design]]></category>
		<category><![CDATA[Workshop]]></category>

		<guid isPermaLink="false">http://www.designcaffeine.com/?p=2131</guid>
		<description><![CDATA[Today, mobile experiences are beginning to dominate our connection with technology. Stories we read. Places we go. Stuff we buy. Food we eat. Who we interact with. Mobile is increasingly becoming the platform, the operating system on which we run our digital lives. In this intensive hands-on full-day workshop, you will learn to design authentic mobile and tablet websites and apps that deliver experiences your customers will love to come back to again and again.  And create a return on investment that will make your business people tremble with greed.]]></description>
			<content:encoded><![CDATA[<p><span style="font-family: arial,helvetica,sans-serif; font-size: small;">Today, mobile experiences are beginning to dominate our connection with technology. Stories we read. Places we go. Stuff we buy. Food we eat. Who we interact with. Mobile</span><span style="font-family: arial,helvetica,sans-serif; font-size: small;"> is increasingly becoming the platform, the operating system </span>on which we run our digital lives<span style="font-family: arial,helvetica,sans-serif; font-size: small;">. </span><span style="font-family: arial,helvetica,sans-serif; font-size: small;"><span style="font-family: arial,helvetica,sans-serif; font-size: small;">In this intensive hands-on workshop, you will learn to design </span></span><span style="font-family: arial,helvetica,sans-serif; font-size: small;"><span style="font-family: arial,helvetica,sans-serif; font-size: small;">authentic </span></span><span style="font-family: arial,helvetica,sans-serif; font-size: small;"><span style="font-family: arial,helvetica,sans-serif; font-size: small;">mobile and tablet websites and apps that deliver experiences your customers will love to come back to again and again.  And create a return on investment that will make your business people tremble with greed</span>.</span></p>
<table border="0" cellspacing="2" cellpadding="3">
<tbody>
<tr align="left" valign="top">
<td align="left" valign="top"></td>
<td align="left" valign="top"><span style="font-family: arial,helvetica,sans-serif; font-size: small;">Mobile design is challenging, and calls for a unique design approach. Instead of typing into search boxes, for example, people are increasingly learning to use augmented reality, voice search, recent search history, keyword suggestions, GPS locators, QR codes, NFC signals, multi-touch and motion interactions to obtain and navigate search results. Often, on mobile devices, the best search is no search at all, but being able to use a mobile device to get the results we want served to us without requiring any input or effort on our part—without any search interface whatsoever.</span></td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<p><span style="font-family: arial,helvetica,sans-serif; font-size: small;"><strong>DESIGNING FOR MOBILE? WE WROTE THE BOOK.</strong></span></p>
<table border="0" cellspacing="2" cellpadding="3">
<tbody>
<tr align="left" valign="top">
<td align="left" valign="top"></td>
<td align="left" valign="top"><span style="font-family: arial,helvetica,sans-serif; font-size: small;">The workshop is run by Greg Nudelman, Principal/CEO of DesignCaffeine, Inc. and author of the best-selling Wiley book “<a href="../designingsearch/" target="_blank"><em>Designing Search: UX Strategies for eCommerce Success</em></a>”, with particular focus on mobile design patterns and strategies.  Greg is a veteran of mobile and web UX design consulting, with over 12 years of creating elegant designs with abundant ROI, advising large companies (eBay, PayPal, WebEx, Cisco, Wells Fargo, CapitalOne, Rearden) and creative startups (Groupon, Ketera, ThirstyPocket, Grockit, Traveltipz). Greg wrote over 30 </span><span style="font-family: arial,helvetica,sans-serif; font-size: small;"><span style="font-family: arial,helvetica,sans-serif; font-size: small;">industry </span></span><span style="font-family: arial,helvetica,sans-serif; font-size: small;">articles and authored several patents and patent applications.</span></td>
</tr>
</tbody>
</table>
<p><span style="font-family: arial,helvetica,sans-serif; font-size: small;"><br />
</span></p>
<p><span style="font-family: arial,helvetica,sans-serif; font-size: small;"><strong>BRING QUESTIONS. RETURN WITH WIREFRAMES. </strong></span></p>
<table border="0" cellspacing="2" cellpadding="3">
<tbody>
<tr align="left" valign="top">
<td align="left" valign="top"></td>
<td align="left" valign="top"><span style="font-family: arial,helvetica,sans-serif; font-size: small;"><span style="font-family: arial,helvetica,sans-serif; font-size: small;">This workshop is limited to 45 people. We break up into small groups that will form a 1-day master-mind alliance that will help you, with our close individual attention, to turn your questions, ideas and new insights you will gain during the workshop into detailed, hand-drawn wireframes of your new tablet and mobile interface improvements. </span></span></td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<p><span style="font-family: arial,helvetica,sans-serif; font-size: small;"><strong>RULE THE WILD WEST.</strong></span></p>
<table border="0" cellspacing="2" cellpadding="3">
<tbody>
<tr align="left" valign="top">
<td align="left" valign="top"></td>
<td align="left" valign="top"><span style="font-family: arial,helvetica,sans-serif; font-size: small;">Mobile design is now in the Wild West mode, and many new ideas and design patterns are only just beginning to emerge. Well-executed mobile design seems deceptively simple, but it is highly sophisticated. Every little thing is important, and it’s hard to get everything right the first time, making expert guidance and user testing essential. Greg took two years to study and write down the most important mobile design patterns and ideas in his book. Now Greg brings his expereince into his workshop, to provide a solid foundation on which product teams could build their own mobile and tablet designs. This workshop is an opportunity to nurture and develop your unique ideas with Greg’s expert guidance so they blossom into amazing mobile experiences your customers will rave about.</span></td>
</tr>
</tbody>
</table>
<p><span style="font-family: arial,helvetica,sans-serif; font-size: small;"><strong><br />
</strong></span></p>
<p><span style="font-family: arial,helvetica,sans-serif; font-size: small;"><strong>DON’T DUMB DOWN. MOBILIZE.</strong></span></p>
<p><span style="font-family: arial,helvetica,sans-serif; font-size: small;"><span style="font-family: arial,helvetica,sans-serif; font-size: small;">With step-by-step instruction, targeted exercises and individual attention we will show you how to:</span></span></p>
<ul>
<li><span style="font-family: arial,helvetica,sans-serif; font-size: small;">Distill the experience down to essentials… and re-invent your interface with mobile-first approach </span></li>
<li><span style="font-family: arial,helvetica,sans-serif; font-size: small;">Create the zero search results page that will delight customers and deepen their connection with your brand</span></li>
<li><span style="font-family: arial,helvetica,sans-serif; font-size: small;">Pick the mobile faceted search pattern that’s right for you</span></li>
<li><span style="font-family: arial,helvetica,sans-serif; font-size: small;">Create brand and product landing pages that generate 10x the ROI</span></li>
<li><span style="font-family: arial,helvetica,sans-serif; font-size: small;">Correctly use the powerful More Like This pattern</span></li>
<li><span style="font-family: arial,helvetica,sans-serif; font-size: small;">Implement your auto-suggest using the patent-pending Tap-Ahead design pattern</span></li>
<li><span style="font-family: arial,helvetica,sans-serif; font-size: small;">Create immersive experience using lessons from popular mobile games like Angry Birds</span></li>
<li><span style="font-family: arial,helvetica,sans-serif; font-size: small;">Understand the use-cases and ergonomic differences between tablet and mobile phone and how to create the right UI for each device</span></li>
<li><span style="font-family: arial,helvetica,sans-serif; font-size: small;">Create mobile forms and mobilized content &#8212; everything you need to design your new application<br />
</span></li>
<li><span style="font-family: arial,helvetica,sans-serif; font-size: small;">Setup your guerilla mobile user research program on a shoe-string budget.</span></li>
</ul>
<p><span style="font-family: arial,helvetica,sans-serif; font-size: small;">Create a mobile &amp; tablet experience your customers will brag about. Register today.</span></p>
<p><span style="font-family: arial,helvetica,sans-serif; font-size: small;"> </span></p>
<p><span style="font-family: arial,helvetica,sans-serif; font-size: small;"><strong>WHO SHOULD ATTEND</strong></span></p>
<p><span style="font-family: arial,helvetica,sans-serif; font-size: small;">Anyone designing and building mobile &amp; tablet websites and apps.<strong> </strong>UX Designers.<strong> </strong>Interaction Designers. Graphic Designers. Content Managers/Producers. Educators. Programmers. Product Managers. VPs. CEOs.</span></p>
<p><span style="font-family: arial,helvetica,sans-serif; font-size: small;"> </span></p>
<p><span style="font-family: arial,helvetica,sans-serif; font-size: small;"><strong>LOCATION AND SCHEDULE</strong></span></p>
<table border="0" cellspacing="2" cellpadding="3">
<tbody>
<tr align="left" valign="top">
<td align="left" valign="top"></td>
<td align="left" valign="top"><span style="font-family: arial,helvetica,sans-serif; font-size: small;">Workshop location is:</span><span style="font-family: arial,helvetica,sans-serif; font-size: small;"> <strong>Marquette University</strong><br />
Johnston Hall room 103<br />
1131 W. Wisconsin Avenue<br />
Milwaukee, WI 53201-1881 </span></p>
<p><span style="font-family: arial,helvetica,sans-serif; font-size: small;">Workshop runs 1 full day, Friday, October 21st, from 9 am to 5 pm. Doors open at 8:30 for sign-in. There will be morning and afternoon beverage/snack breaks. Lunch will be on your own; a list of local restaurants will be provided.</span></td>
</tr>
</tbody>
</table>
<p><span style="font-family: arial,helvetica,sans-serif; font-size: small;"> </span></p>
<p><span style="font-family: arial,helvetica,sans-serif; font-size: small;"><strong>REGISTRATION RATES</strong></span></p>
<p><strong><span style="font-family: arial,helvetica,sans-serif; font-size: small;">Regular price: $399</span></strong></p>
<p><span style="font-family: arial,helvetica,sans-serif; font-size: small;">Each registration includes a copy of </span><span style="font-family: arial,helvetica,sans-serif; font-size: small;">“<a href="../designingsearch/" target="_blank"><em>Designing Search: UX Strategies for eCommerce Success</em></a>”</span><span style="font-family: arial,helvetica,sans-serif; font-size: small;"> by Greg Nudelman (Wiley, 2011).</span></p>
<p><span style="font-family: arial,helvetica,sans-serif; font-size: small;"> </span></p>
<p><span style="font-family: arial,helvetica,sans-serif; font-size: small;"><strong>GROUP DISCOUNT</strong></span></p>
<p><span style="font-family: arial,helvetica,sans-serif; font-size: small;"><strong>Groups of 3 or more get a 10% discount. </strong>Select a group discount rate when registering.</span></p>
<p><span style="font-family: arial,helvetica,sans-serif; font-size: small;"> </span></p>
<p><span style="font-family: arial,helvetica,sans-serif; font-size: small;"><strong>CANCELLATIONS<br />
</strong></span></p>
<p><span style="font-family: arial,helvetica,sans-serif; font-size: small;">Payment is required in advance; but it is refundable, less a $100 processing fee, if you notify us <em>at least one week</em> <em>before</em> the workshop. If you fail to attend and do not notify us at least one week in advance, your money will not be refunded. Notify us about cancellations by sending a message to <a href="mailto:Greg.Nudelman@DesignCaffeine.com">Greg.Nudelman@DesignCaffeine.com</a>.</span></p>
<p>&nbsp;</p>
<p><span style="font-family: arial,helvetica,sans-serif; font-size: small;"><strong>EVENT SPONSORS<br />
</strong></span></p>
<table border="0" cellspacing="2" cellpadding="3">
<tbody>
<tr>
<td></td>
<td><strong><a href="http://www.marquette.edu/" target="_blank">Diederich College of Communication at<br />
</a></strong><strong><a href="http://www.marquette.edu/" target="_blank">Marquette University</a></strong></td>
</tr>
<tr>
<td></td>
<td><a href="http://www.milwaukeeima.org/" target="_blank"><strong>Milwaukee Interactive Marketing Association</strong></a></td>
</tr>
</tbody>
</table>
<p><span style="font-family: arial,helvetica,sans-serif; font-size: small;"><br />
</span></p>
]]></content:encoded>
			<wfw:commentRss>http://www.designcaffeine.com/workshops/designing-for-mobile-tablet-workshop-october-21-2011-milwaukee-wi/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Designing for Kindle Fire and iPad? What you need to know now.</title>
		<link>http://www.designcaffeine.com/articles/designing-for-kindle-fire-and-ipad-here-is-what-you-need-to-know-now/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=designing-for-kindle-fire-and-ipad-here-is-what-you-need-to-know-now</link>
		<comments>http://www.designcaffeine.com/articles/designing-for-kindle-fire-and-ipad-here-is-what-you-need-to-know-now/#comments</comments>
		<pubDate>Mon, 03 Oct 2011 22:16:13 +0000</pubDate>
		<dc:creator>Greg Nudelman</dc:creator>
				<category><![CDATA[Articles]]></category>
		<category><![CDATA[Mobile and Tablet UX Design Articles]]></category>
		<category><![CDATA[iPad]]></category>
		<category><![CDATA[Kindle Fire]]></category>
		<category><![CDATA[tablet]]></category>
		<category><![CDATA[UX Design]]></category>

		<guid isPermaLink="false">http://www.designcaffeine.com/?p=924</guid>
		<description><![CDATA[How would an experience on a 7-inch tablet (like Amazon’s Kindle Fire) differ from one on a 9.7-inch tablet like the iPad? How does the size of the tablet device play into the application design, and how the user interacts with the device? Do smaller 7-inch tablets have the potential to be as popular as the larger iPad, from a user experience perspective?]]></description>
			<content:encoded><![CDATA[<p><img class="alignleft size-full wp-image-934" title="wired_logo" src="http://www.designcaffeine.com/wp-content/uploads/2011/12/wired_logo.png" alt="" width="133" height="30" /></p>
<p>Note: This post was originally quoted on Wired.com Gadget Lab post, <a title="Wired.com Gadget Lab post, How the Kindle Fire Could Make 7-Inch Tablets Huge (open in new window)" href="http://www.wired.com/gadgetlab/2011/09/7-inch-tablet-kindle-fire/" target="_blank">How the Kindle Fire Could Make 7-Inch Tablets Huge</a>.</p>
<h1>Wired Magazine recently posed some interesting questions:</h1>
<ul>
<li>How would an experience on a 7-inch tablet (like Amazon’s Kindle Fire) differ from one on a 9.7-inch tablet like the iPad?</li>
<li>How does the size of the tablet device play into the application design, and how the user interacts with the device?</li>
<li>Do smaller 7-inch tablets have the potential to be as popular as the larger iPad, from a user experience perspective?</li>
</ul>
<p><span id="more-924"></span></p>
<h1>Here are my thoughts on the subject:</h1>
<p><img class="alignleft size-full wp-image-935" title="ipad_kindle_fire_thumb" src="http://www.designcaffeine.com/wp-content/uploads/2011/12/ipad_kindle_fire_thumb.png" alt="" width="200" height="200" />I think mini-tablets (7 inch or smaller) have the potential to be as popular as iPad-sized tablets, but the types of applications and the context and length of use between might be very different. As I wrote in my book, <a title="About Designing Search Book (opens in a new window)" href="http://www.designcaffeine.com/designingsearch/" target="_blank"><em>Designing Search: UX Strategies for eCommerce Success</em></a> (Wiley, 2011) in doing tablet user research we find that most people purchase iPad sized tablets for use at home as a shared media-consumption device, the way an Alpha-TV was used in the 1950s. iPad-sized tablets are heavy, expensive and fragile enough for most people to think twice about traveling with them, and most larger tablets are being purchased without 3-G wireless connection plans.</p>
<p>Because the difficulty of text input and direct content manipulation make most office work activities a challenge, tablets in general tend to be somewhat biased toward specific “light” activities: reading news, playing video, and of course gaming. Tablets are also moving into the territory of email, social media, and light work tasks, but this dynamic is changing slowly, partly because iOS and Android are both “personal” operating systems, so they do not gracefully handle login by multiple members of the family, the way full-featured Mac OS and Windows do. Most people would not want their 6-year old tyke who loves to play Angry Birds, to also have direct access to their work email, or Amazon One-Click Checkout feature. Until OS and Android change to allow multiple login (or market penetration increases sufficiently to allow multiple large tablets within the same household) the larger, iPad-sized tablets are going to continue to be biased toward anonymous family-based media consumption. One of the “quick wins” I recommend in my <a title="About Designing Search Book (opens in a new window)" href="http://www.designcaffeine.com/designingsearch/" target="_blank">book</a> is having individual apps handle multiple logins or profiles – until the login is fixed, this is a must interim “design hack” for the privacy problem.</p>
<p>Although the jury is still out, this privacy dynamic could be very different for mini-tablets. Lower price-point could engender the public to purchase truly personal mini-tablets, thus removing the privacy issue. Mini tablets (especially in an attractive, durable, drop-resistant cases) can also be stowed away in purses and backpacks more easily and taken along on more outings than their heavier, more expensive and fragile iPad-sized counterparts. Essentially, smaller tablets can be thought of as individual mobile devices, with use patterns similar to those of mobile phones. Of course, on the flip side, few consumers can currently justify purchasing a second mobile phone, and that appears to be the Achilles’ Heel of the mini-tablets – the public’s perception that they are too close to smartphones (yet not as capable without the 3G wireless plans) to justify purchasing the second device.</p>
<p>From the standpoint of the interface design, it’s a mistake to think of larger iPad-sized tablets and their mini-counterparts the same way. The ergonomics of each device are fairly different. Most mini-tablets (as are most smartphones) can usually be held in one hand, while multi-tasking or literally on the move, while holding on to the overhead bar in the Metro car. One-handed mini-tablet operation is possible because the device is lightweight and a typical adult can reach most of the controls on the screen with their right thumb, while holding the device in the same hand. It makes sense then for designers to optimize the touch controls accordingly for a one-handed operation. Even in most games, milti-touch interface controls on the mini-tablet are also somewhat limited to a smaller sub-set of touch gestures (such as a simple swipe) that can be comfortably executed on a small screen. Instead, accelerometer-driven controls such as shaking, tilting and rotating the entire device are called upon to shoulder some of the interaction complexity.</p>
<p>The situation could not be more different for larger, iPad-sized tablets. Larger, heavier devices dictate that they be at a minimum, held in two hands or rested on some surface or the lap of their owner. In addition, the extra two inches of the screen make it impossible to reach all of the controls with one hand while also holding the device with the same hand. Thus it makes sense to place touch controls for larger tablets vertically, along each side of the device, while generally avoiding the bottom of the screen (because the bottom of the screen is awkward to reach while the tablet is partially resting on the lap or some other surface – the preferred position for most uses). Accelerometer controls such as shaking are usually impractical, and even tilting and rotating is done infrequently. On the flip-side, a larger surface and two free hands allow for a dizzying variety of possible multi-touch gestures, creating a rich, intuitive touch-screen interface. There are even rumors that the multi-finger tap, an excellent idea presented by Josh Clark, will be used in place of a home button on future versions of the iPad. (You can read much more about the iPad and mobile design quick wins in my book Designing Search: UX Strategies for eCommerce Success (Wiley, 2011) <a title="Download Free Ch 1 of Designing Search" href="http://www.designcaffeine.com/designingsearch/" target="_blank">Free Chapter 1 is now available for download.</a>)</p>
<p>In closing, the purchasing decision for larger vs. mini-tablet seems to be centered on how the device will be used. It is all about the niche benefit – if the customers can justify purchasing cheaper books or are attracted to being able to carry their entire library everywhere with them, they might very well be tempted to purchase a Kindle Fire before they buy an iPad. As anecdotal evidence, at least in the San Francisco Bay Area, it is now a fairly common sight on public transportation to see people who carry their mobile phone, laptop and a Kindle. One trend seems to be clear: market studies show that the iPad tablet sales do not cannibalize sales of any other device, except for e-readers. Thus it is safe to say that despite their ergonomic differences, mini-tablets and larger tablets are currently engaged in the head-to-head market competition.</p>
<p>Interested in learning practical mobile and tablet design skills? <a title="Designing for Mobile Workshop" href="http://www.designcaffeine.com/mobileuxworkshop/" target="_blank">Check out my workshop</a>.</p>
[signature]
]]></content:encoded>
			<wfw:commentRss>http://www.designcaffeine.com/articles/designing-for-kindle-fire-and-ipad-here-is-what-you-need-to-know-now/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>One Circle to Rule Them All: Winning the Battle for Social Network Domination</title>
		<link>http://www.designcaffeine.com/articles/one-circle-to-rule-them-all-winning-the-battle-for-social-network-domination/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=one-circle-to-rule-them-all-winning-the-battle-for-social-network-domination</link>
		<comments>http://www.designcaffeine.com/articles/one-circle-to-rule-them-all-winning-the-battle-for-social-network-domination/#comments</comments>
		<pubDate>Sun, 07 Aug 2011 04:50:48 +0000</pubDate>
		<dc:creator>Greg Nudelman</dc:creator>
				<category><![CDATA[Articles]]></category>
		<category><![CDATA[Social Networking]]></category>
		<category><![CDATA[UX Design]]></category>

		<guid isPermaLink="false">http://www.designcaffeine.com/?p=898</guid>
		<description><![CDATA[Twitter , Facebook, email, IM… Will the new Google + Circles become "the One Circle to rule them all", the social network everyone will want to join? While the jury is out, Google + is helping us frame the challenge to becoming The One Network: connection and communication.]]></description>
			<content:encoded><![CDATA[<p>Twitter , Facebook, email, IM… Will the new Google + Circles become &#8220;the One Circle to rule them all&#8221;, the social network everyone will want to join? While the jury is out, Google + is helping us frame the challenge to becoming The One Network: connection and communication.</p>
<h1>Connection</h1>
<p>Running a design consultancy like DesignCaffeine, means publishing large amounts of information on social networks. Image then how pleased I was to hear about the new Google +, a network organized around Circles (or rings) that determine how the information is shared and distributed. The new Circles sharing framework – one Circle was for your friends, one for family, one for promoting my new book, plus a Circle for each project – made sense. It also has certain familiar ring to it:<br />
<em><br />
Three Rings for the Elven-kings under the sky,<br />
Seven for the Dwarf-lords in their halls of stone,<br />
Nine for Mortal Men doomed to die,<br />
One for the Dark Lord on his dark throne<br />
In the Land of Mordor where the Shadows lie.<br />
One Ring to rule them all, One Ring to find them,<br />
One Ring to bring them all and in the darkness bind them<br />
In the Land of Mordor where the Shadows lie.<br />
</em></p>
<p>Have we truly been given the Social Networking &#8220;Rings of Power&#8221; or have we been, as the kings of old Middle Earth &#8220;deceived&#8221;? After using Google + for only a few days, several things became apparent.</p>
<p>There is little doubt that Rings (or Circles as Google calls them) are an improvement over the chaos and cacophony that has become Facebook. However, organizing my communication using Circles &#8220;from outside – in&#8221; just felt somehow wrong, like forcing incorrect information architecture on an art collection or trying (and failing) to predict behavior of future generations using mathematical sociology as in Asimov’s &#8220;Foundation&#8221;. In The Lord of the Rings epic, the Rings of Power are used to trick various races into separating along imagined lines, making them weaker. If there is one underlying current that runs through the entire Lord of the Rings epic is that we are all in this together, against great evil that is ignorance, close-mindedness, aggression and brutality.</p>
<p>Take Gimli, for example. How would we use Google + Circles to help us connect with and communicate with him? To begin with, we’ll probably set up a &#8220;Fellowship of the Ring&#8221; Circle and place Gimli there, based on a shared goal. We might stop there, but in great movies and real lives, things are rarely remain simple. Gimli also belongs in the &#8220;Non-Humans&#8221; Circle, and a Dwarves Circle (of which, at least in the movie version, he is the only member, but it should be included since it is such a central part of Gimli’s identity). Sliced in a different way, Gimli is part of the General Good Guys circle. He is also part of the Funny Circle, Does not Like Horses Circle, Questionable Table Manners Circle and the Ax Circle. He is also part of the &#8220;Kick Sauron’s Derriere&#8221; project, &#8220;Defend Minas Tirith&#8221; project, and many other projects that occur in the book. You can see how it would be take several screens worth of Circles just to manage our communication with Gimli.</p>
<p>Before you start your own Mount Doom flame war, I know that yes, you <em>can</em> add people to more than one circle and move them around. But this is hardly the focus of the Circles functionality. It’s more like an after-thought, further under-scored by the fact that you can’t copy or move multiple people together.</p>
<h2>A Better Connection</h2>
<p>Circles or Rings are certainly a much better model than the complex morass of sharing segmentation features hurriedly bolted-on by Facebook. But even Circles seems to be too limiting and intransigent. Circles once again feel like the early Microsoft Outlook contact categories. I think everyone was a bit stumped when it came to creating their Circles – that is why Google seeded the Circle space with the simplistic collections such as &#8220;Family&#8221;, &#8220;Friends&#8221; and &#8220;Following&#8221; to help everyone get a head start.</p>
<p>Yet people are notoriously difficult to categorize. Instead, a much better model is tagging and folksonomies, as described in Gene Smith’s brilliant book &#8220;Tagging: People-powered Metadata for the Social Web&#8221; (New Riders Press, 2008). Tagging is dynamic, flexible, limitless – it is a way to both describe and organize, and best of all it’s human-centric, and does not require people to impose any pre-determined IA (Information Architecture) structure onto their contacts.</p>
<p>Creating and maintaining the IA for your life is not easy. Because tags are more flexible and person-centric, they help us manage complexity and noise, while Circles and Categories confuse and befuddle. Let’s say for example that you have an ACME, Inc, circle that manages the communication with your co-workers. This circle works great as long as you remain gainfully employed making Roadrunner traps. Unfortunately, changing jobs throws this fine idea into havoc. Do you retain the ACME, Inc. Circle even though it is no longer relevant or lose associative data by &#8220;cleaning up&#8221; your social network and getting rid of the ACME, Inc. Circle? Or do you move everyone into a different circle, &#8220;Ex-Job Contacts&#8221;? Is that even a relevant category into which to sort people, now that your industry and job occupation has changed to designing better cages for Tweety Bird? Or is it better to create a job function Circles, like Engineering, IT, Business, Administration? And if you do, how will you share with your ex-coworkers any juicy Roadrunner trap news and ideas?</p>
<p>During the time of violent life changes, categories and circles can be confusing because it is hard to predict how you will want to communicate tomorrow, much less a week or a month from now. Yet it is during these times that we rely on our social networks for support. It is during those times that we look for unexpected intersections between the different the social rings looking to connect with the people that will help us find a job, a place to live or a good doctor. In contrast to Circles and categories, tags allow you to bypass any worry about how to categorize contacts. You can easily add as many tags as you want to every person in your life, and change them as needed. Best of all, you can effortlessly create lists of contacts that combine two or more tags. You can even exclude people based on tag, as needed. Instead of creating a single ACME, Inc. Circle you can assign everyone at the company an #acme tag, which does the same thing. But why stop there? You can also assign people individual job function and interest tags, while also adding #friend tag to people who you want to receive the link to the latest Ke$ha YouTube video while excluding #references (who you will not be introducing to the latest teen rock sensation).</p>
<p>Here’s another quick example – let’s say you are going to NYC for a conference and would love to get together for a quick pint at a local watering hole. But who to invite? People in your Clients Circle would be nice, both past and perspective. But would you tell everyone in your &#8220;Client&#8221; ring you will be in the Big Apple? No way &#8212; unless your clients live in NYC, they think rightly think that you are spamming them. How about your &#8220;Aspirational contacts&#8221; list? Ditto. How about your friends? Well, none of them live in NYC. Would you create a special &#8220;NYC Trip August 5 2011&#8243; Circle and add people to it? <em>Way</em> too much trouble. So you will instead post a lame general message &#8220;I’m off to NY, let me know if you want to connect&#8221; and we are right back where we started – with the ocean of noise on Twitter and SPAM-Ville on Facebook. When it comes to spontaneously finding and deepening un-expected connections, Rings, Circles and Categories definitely leave a lot to be desired.</p>
<p>Fortunately, tags provide a much better connection mechanism. All of your connections can be self-tagged with the city and state where they currently abide. Alternatively, you can manually tag interesting people with where they live or work: #NYC, #SF, #LA, including multiple tags for really interesting creative people like Josh Clark (@globalmoxie) who travels often and lives in multiple countries. Now all it takes is a couple of keystrokes of a quick tag-based search (just like Twitter!) and voila – your very own instant New York Drink Fellowship Ring/Circle! Now you can tell your Tagppeeps the exact dates, times and places you will be and set up a great get-together. Hug a friend. Score a gig. Connect your friends and clients with one another. All the while keeping noise to a minimum and maximizing your connection spontaneity. And isn’t this the whole point of this exercise, surely?</p>
<h1>Communication</h1>
<p>Being able to get the right information to the right people instantly, in context, and add value to the work processes as-they-happen is the near-future promise of our social networks. While this is the ideal, we are certainly not there yet. Here is my very incomplete and subjective list of features a new social network should consider having in order to win the bid for becoming the One Circle To Rule Them All.</p>
<h2>1) Superior Mobile App</h2>
<p>When it comes to social networking, mobile strategy <em>is </em>your strategy. There is no other. Mobile technology will determine whether your network lives or dies. The rocketing increase of mobile use of Twitter and Facebook, coupled with increased market penetration of smart phones and widening availability of cheap Android models makes Mobile the most important market to capture. There is little doubt that Google has a leg up on the competition, as they own the Android platform and can fully integrate Google + into the phones operating system. However, the jury is still out on the Google’s current mobile offering, especially the iPhone application. However, releasing apps for all of the major platforms is certainly a step in the right direction.</p>
<h2>2) Integrated Feeds</h2>
<p>The main reason we do not yet derive full value from mobile is that communication is tightly subdivided into technological silos: Email, IM, LinkedIn, Twitter, Facebook, etc. and information is not semantically labeled and sorted into buckets people can actually use. Instead, people are forced to continuously check various communication channels for fear of loosing an important communication and to get the constant dopamine hit of being able to stay in touch and up-to-date. Keeping up with all of our methods of communication takes a lot of time and almost super-human effort. Any new social network worth considering in a bid for the &#8220;One Circle to Rule them All&#8221; title should make a serious effort to separate the message from the technology medium.</p>
<p>One approach would be to integrate and prioritize various information feeds within a single unified inbox. Rather than switching apps to stay in touch on all the networks, we will be able to get all of the feeds in one place. Instead of tracking down the people we need to get in touch with, we will be able to select everyone we need and send a single communication with the right people in one shot, from one central location. Even better, people we want to reach will be able to receive our communication in the way <em>they</em> prefer. Anyone who ever tried to use the barely usable LinkedIn InMail can attest to the fact that creating a robust inbox is not easy. Here again, Google + has significant advantage over other social networks, because Google already owns Gmail – a very successful, highly usable product that forms the basis and the technology to create a fully integrated inbox. Google recently added a communication bar to Gmail, showing that they certainly interested in making Gmail more integrated with their other services.</p>
<h2>3) Integrated Alerts</h2>
<p>Every day new and different ways to communicate are popping up all over the mobile landscape. Facebook alone allows for more than 10 different ways to send and receive messages (poke, post on the wall, comment on photo, etc.). And every new social networking service takes it upon themselves to popup alerts, one after another, on our phone. And these alerts are multiplying: by default, multiple alerts are propagated through the networks, so we get an email alert about a DM Tweet or when receiving a Facebook friend request in addition to multiple alerts on our mobile phone. As noted by Douglas Ruskoff in his brilliant book, <em>Program or Be Programmed: Ten Commands for a Digital Age </em>(OR Books, 2010) heavy mobile phone users are developing a &#8220;Phantom Vibration&#8221; syndrome where we feel our phone vibrating on our hip even though the device itself is in the next room. Alerts are now conditioning our very nervous systems to salivate at every incoming message like Pavlov’s dogs. The &#8220;Revenge of the Son of Planet of Alerts&#8221; has reached its climax.</p>
<p>Proliferation and popularity of alert aggregating apps like Boxcar points to the fact that we are desperately searching for a way out of the alert jungle. Thus a new social network must avoid at all costs being &#8220;yet another place we need to check&#8221;. Instead, it should be able to recognize that our experience need not be about the <em>technology </em>of connecting, but rather about the <em>goal</em> of connecting, and the system should take upon itself the task of prioritizing various communication channels to alert only the most important and urgent messages.</p>
<p>To take a stab at prioritize alerts, we can try an approach proposed by David Allen in <em>Getting Things Done: The Art of Stress-Free Productivity </em>(Penguin, 2002) who advised people to prioritize incoming information into 5 buckets:</p>
<p>&nbsp;</p>
<ol>
<ol>
<li>Important and Urgent (email from a client, client DM on Twitter, family phone call)</li>
</ol>
</ol>
<p>&nbsp;</p>
<ol>
<ol>
<li>Important (email from your immediate team, voicemail)</li>
</ol>
</ol>
<p>&nbsp;</p>
<ol>
<ol>
<li>Urgent (email from Groupon, @ message on Twitter, miscellaneous phone call)</li>
</ol>
</ol>
<p>&nbsp;</p>
<ol>
<ol>
<li>Not Urgent and Not Important (FYI emails, Facebook friend request)</li>
</ol>
</ol>
<p>&nbsp;</p>
<ol>
<ol>
<li>To Read (various friend feeds)</li>
</ol>
</ol>
<p>&nbsp;</p>
<p>In other words, the new social network must help us deal with the digital noise by brutally enforcing ruthless alert hierarchy based on topic, content, messenger and recipients list. We are now at the point where we absolutely must leverage <em>both</em> our collective social intelligence and machine learning to deal with the overload of data our social networks produce.</p>
<p>Google certainly recognizes this and they have already made strides to do that using their &#8220;important&#8221; tag in Gmail, so far with mixed results. Facebook earlier attempted to do the same prioritization with the &#8220;more/less from this person&#8221; feature. However, relying on manual features to assign importance is missing the entire point. This is <em>exactly</em> the kind of job that we can and should rely on computers to automate. To assign urgency and importance to the message, the system can track how long it typically takes this particular recipient to open a message from this particular contact, on this particular topic. This data can be further re-enforced by how quickly recipients (and people similar to the recipient) respond to the person, and how often keywords and tags in the message occur in the recipient’s recent communications. This is certainly not trivial, but far from impossible. The manual &#8220;more/less important&#8221; button is similar in many ways to the early &#8220;Spam/Not Spam&#8221; buttons – an &#8220;Ejection Lever&#8221; something we should never need unless things are going wrong with the software.</p>
<h2>4) Integrated Publishing Solution</h2>
<p>Right now we rely on technology channel to some extent to specify the content and immediacy of the message. For example, a message sent to us in our LinkedIn InMail Inbox is likely to be a job of some sort, probably one fairly targeted to our skills. Twitter is likely to contain news and immediate updates deemed as important topics by people we wish we went to school with, such as titillating information about the kind of sandwich had for lunch. Finally Facebook (and we particularly mustn’t forget Facebook, Best Beloved) contains urgent pleas for Farmville livestock by people you actually went to school with, intermingled with pictures of happy children smothered in chocolate sauce who were allegedly fathered by those same people while they weren’t busy taking care of their virtual domestic animals or expanding their Mafia empires.</p>
<p>However, the lines between work and play commerce and friendship are becoming increasingly blurred. We connect with our friends on LinkedIn which also shows our Twitter feed, while creating professional company and product presence pages on Facebook. Depending on the particular relationship with the recipient, it is not unusual in an attempt to track down a busy person on an urgent, important matter by send them an email, followed up immediately by a DM on Twitter, and a message on Facebook asking them to read their urgent email. All of these messages multiply the cacophony that is drowning us in our social networking offal.</p>
<p>The network that wants to become the &#8220;One Circle to Rule Them All&#8221;, must transcend the lines currently drawn through underlying social network technologies, delivery methods and message lengths by creating the integrated publishing solution with a single system of tags and unified dynamic importance and urgency scale. I think Google + Circles is an early attempt to do just that. However, in terms of communication power it does not yet go far enough.</p>
<p>Importance and urgency of the message can be assigned by the sender, and verified continuously by his or her social network so the network can select the appropriate method of contacting the recipient based on his or her communication preferences and activity on the specific network channel. In addition, for someone like Google it would be entirely feasible to be able to detect our location, which activity we are engaged in, and on which device, and moderate the message urgency accordingly.</p>
<p>The &#8220;One Circle&#8221; social network must create an integrated publishing solution that moves beyond a single dimension or a single messaging technology and takes into consideration recipients, topic, keywords, length of content, importance and urgency.</p>
<h2>A Parting Word of Caution</h2>
<p>It is not unusual for digital natives to have 500+ world-wide connections situated in all imaginable time zones. A typical person maintains 20+ active projects and receives and sends upward of 100 messages a day. The social network that wants to avoid becoming yet another source of noise and instead become &#8220;the One Circle to Rule Them All&#8221; must provide a near-perfect solution blending connection and communication. But being a life-blood of the digital age is not going to be easy. Even after all of the connection and communication features work, reliability, transparency, customer service and above all, preserving user identity and control will be the key.</p>
<p>Google + recently got a taste of the magnitude of the problem when they deleted a &#8220;striking number&#8221; of the accounts, explaining only &#8220;After reviewing your profile, we determined the name you provided violates our Community Standards.&#8221; (<a href="http://www.zdnet.com/blog/violetblue/google-plus-deleting-accounts-en-masse-no-clear-answers/567">Google Plus Deleting Accounts En Masse: No Clear Answers.</a> <em>ZDNet</em>, by Violet Blue, July 23, 2011)</p>
<p>Community backlash has been enormous, and rightly so. The more we rely on one particular network to handle our digital connection needs, the more risky and committed that relationship becomes for consumers. Much like our near-complete reliance on electricity deprives us all at once of illumination, internet connectivity, ability to store and cook our food or even call for help should we be somehow separated from our electric grid, our entire digital lives and identities revolve around our social networks. Simply deleting someone’s data because they have chosen the unfortunate username, while leaving people no recourse to restore their identity can be absolutely devastating.</p>
<p>To put it mildly, social networking is not a simple problem. Keep in mind that this is Google’s third entry into the social arena (have you forgotten Wave and Buzz, Best Beloved?). Having had my share of spectacular social networking design blunders, I take my hat off for the Google+ team that is working really hard to make this new network a benefit for everyone. Will Google + become the &#8220;One Circle to Rule Them All&#8221;? It’s certainly putting up one hell of an epic battle.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.designcaffeine.com/articles/one-circle-to-rule-them-all-winning-the-battle-for-social-network-domination/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>SILVER SPONSOR: UX SketchCamp * May 28, 2011 * San Francisco, CA</title>
		<link>http://www.designcaffeine.com/workshops/sketchcamp-may-28-2011-san-francisco-ca/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=sketchcamp-may-28-2011-san-francisco-ca</link>
		<comments>http://www.designcaffeine.com/workshops/sketchcamp-may-28-2011-san-francisco-ca/#comments</comments>
		<pubDate>Sun, 29 May 2011 05:23:35 +0000</pubDate>
		<dc:creator>Greg Nudelman</dc:creator>
				<category><![CDATA[Workshops]]></category>
		<category><![CDATA[Mobile and Tablet UX Design Articles]]></category>
		<category><![CDATA[Presentation]]></category>
		<category><![CDATA[UX Design]]></category>
		<category><![CDATA[Workshop]]></category>

		<guid isPermaLink="false">http://www.designcaffeine.com/?p=670</guid>
		<description><![CDATA[<strong>Storyboarding iPad Transitions</strong>
In this session we will dig deep together into the frame-by-frame analysis of popular iPad interface transitions and discuss the animation principles behind the secrets of industrial design magic that makes iPad transitions such a compelling experience.]]></description>
			<content:encoded><![CDATA[<p><strong>Storyboarding iPad Transitions</strong><br />
<img class="alignleft size-full wp-image-681" title="sketchcamp_large" src="http://www.designcaffeine.com/wp-content/uploads/2011/12/sketchcamp_large1.png" alt="" width="301" height="53" />In this session we will dig deep together into the frame-by-frame analysis of popular iPad interface transitions and discuss the animation principles behind the secrets of industrial design magic that makes iPad transitions such a compelling experience. Then, I will demonstrate how to easily draw both existing transitions and any new design ideas in a fun storyboard format using post-it notes (provided). At the end of the session, the participants will gain understanding of the basic structure of iPad transitions, and be able to design and document both existing transitions and their own UI transitions ideas in storyboard format and create design deliverables necessary to achieve team consensus.</p>
<p><strong>Skill Level: </strong>Basic. No drawing talent is necessary! If you can draw a line and a box, I can show you how to draw transitions.</p>
<p><a href="http://sketchcamp.com/?page_id=6" target="_blank"><strong>SketchCamp website ⇒</strong></a><br />
<br />
<a href="http://www.designcaffeine.com/2011/articles/597/"><strong>Storyboarding iPad Transitions Article on BoxesandArrows</strong></a><a href="http://www.designcaffeine.com/2011/articles/597/"><img class="alignright size-full wp-image-491" title="bofa_ipad_transitions_thmb" src="http://www.designcaffeine.com/wp-content/uploads/2011/12/bofa_ipad_transitions_thmb.png" alt="" width="200" height="200" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.designcaffeine.com/workshops/sketchcamp-may-28-2011-san-francisco-ca/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Mobile Auto-Suggest on Steroids: Tap-Ahead Design Pattern</title>
		<link>http://www.designcaffeine.com/articles/mobile-auto-suggest-on-steroids-tap-ahead-design-pattern/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=mobile-auto-suggest-on-steroids-tap-ahead-design-pattern</link>
		<comments>http://www.designcaffeine.com/articles/mobile-auto-suggest-on-steroids-tap-ahead-design-pattern/#comments</comments>
		<pubDate>Sat, 28 May 2011 05:45:41 +0000</pubDate>
		<dc:creator>Greg Nudelman</dc:creator>
				<category><![CDATA[Articles]]></category>
		<category><![CDATA[Mobile and Tablet UX Design Articles]]></category>
		<category><![CDATA[Search UX Design Articles]]></category>
		<category><![CDATA[Patent]]></category>
		<category><![CDATA[Smashing Magazine]]></category>
		<category><![CDATA[UX Design]]></category>

		<guid isPermaLink="false">http://www.designcaffeine.com/?p=907</guid>
		<description><![CDATA[In contrast to desktop Web search, auto-suggest on mobile devices is subject to two additional limitations: typing avoidance and slower bandwidth. The new patent-pending design pattern, Tap-Ahead, uses continuous refinement to create an intuitive, authentically mobile auto-suggest solution. This helps dramatically reduce the amount of typing needed to enter queries, and utilizes slower mobile bandwidth in the most efficient manner. Using this novel design pattern, your customers can quickly access thousands of popular search term combinations by typing just a few initial characters.]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.smashingmagazine.com/2011/04/27/tap-ahead-design-pattern-mobile-auto-suggest-on-steroids/" target="_blank">Originally published in Smashing Magazine on April 27th, 2011 ⇒</a></p>
<p>In contrast to desktop Web search, auto-suggest on mobile devices is subject to two additional limitations: typing avoidance and slower bandwidth. The new patent-pending design pattern, Tap-Ahead, uses continuous refinement to create an intuitive, authentically mobile auto-suggest solution. This helps dramatically reduce the amount of typing needed to enter queries, and utilizes slower mobile bandwidth in the most efficient manner. Using this novel design pattern, your customers can quickly access thousands of popular search term combinations by typing just a few initial characters.</p>
<h3>Auto-Suggest: Mobile vs. Desktop Web</h3>
<p>As John Ferrara wrote in his November 2010 UXMagazine article, <a href="http://www.uxmag.com/technology/psychic-search">“Psychic Search: a quick primer on search suggestions”</a>, today auto-suggest is practically ubiquitous in desktop Web search. In contrast to desktop Web, auto-suggest on mobile is (at least for now) fairly rare. The only mobile Website that currently implements auto-suggest is Google.com, and a handful of mobile auto-suggest implementations that currently exist come from native mobile apps built by leading online retailers like Amazon and Booking.com.</p>
<p>Mobile auto-suggest is non-trivial and quite expensive to implement, but even a large investment does not guarantee a good experience on the mobile device. In many cases, it is not enough to simply transfer the existing successful desktop Web implementation of the auto-suggest to mobile space. Why not? Our recent study revealed that mobile space is subject to two unique limitations that affect customers’ expectations and their use of the auto-suggest feature:</p>
<ul>
<li><strong>Typing Avoidance</strong><br />
Typing on the mobile keyboard is much harder and more error prone than typing on the full-size desktop Web keyboard. Most people prefer to search using only a few characters — the fewer, the better.</li>
<li><strong>Slower Bandwidth</strong><br />
Mobile signal strength is unpredictable, as is the speed of the Internet connection. Yet the customer expectation is often shaped by their broadband desktop Web experience. Mobile auto-suggest interface must be optimized for slower bandwidth.</li>
</ul>
<h3>The Limitations of the Typical Mobile Auto-Suggest Flow</h3>
<p>As I wrote in my UXmatters article, <a href="http://www.uxmatters.com/mt/archives/2010/03/designing-mobile-search-turning-limitations-into-opportunities.php" target="_blank">“Mobile Search: Turning Limitations into Opportunities”</a>, mobile phones are notoriously difficult to type on and their Internet connection is often spotty at best. This is especially true in the mobile context of use — that is when the customer is being jostled and bounced around in the moving taxi or metro. In a July 2009 blog post on <em>Alertbox</em>, Jakob Nielsen called the mobile experience “miserable” and reported, “Text entry is particularly slow and littered with typos, even on devices with dedicated mini-keyboards.”</p>
<p>Although 3G networks are finally becoming more commonplace, the average speeds US users experience on mobile devices are sometimes as low as one-quarter of the average speeds advertised, according to the Federal Communication Commission (FCC). This implies download speeds of 100-500 Kbps or lower, compared to the speeds of 1 to 1.5Mbs under ideal conditions.</p>
<p>As shown in <em>Figure 1</em> below, the difficulty of typing coupled with frequently spotty download speeds of mobile context of use introduce some challenges into the typical auto-suggest process:</p>
<p><a href="http://www.designcaffeine.com/wp-content/uploads/2011/12/tap-ahead_gnudelman_figure_1b.png"><img src="/wp-content/uploads/2011/12/tap-ahead_gnudelman_figure_1b.png" alt="Tap-ahead Gnudelman Figure 1b in Mobile Auto-Suggest on Steroids: Tap-Ahead Design Pattern" width="365" height="597" /></a><br />
<em>Figure 1. Multi-step auto-suggest search on Amazon iPhone app.</em></p>
<p>In the example above, the customer (let’s call her Anna) is looking for a book called “Harry Potter and The Chamber of Secrets”. To begin the search process, Anna types in the first two letters “ha”. Using these first letters of the query, the auto-suggest function performs a call to the keywords server, retrieving most frequently used keywords that begin with “ha”. The keywords server then quickly returns with a populated auto-suggest layer shown in 1-A, that helpfully suggests “Harry Potter”, along with nine other likely queries.</p>
<p>Although the “Harry Potter” does not completely match the query Anna is looking for, it gets her part of the way there and <strong>saves a lot of typing</strong>. Thus, Anna selects the system recommendation, causing her original query “ha” to be replaced by “Harry Potter”. The system then performs a search against the product server, returning up to 50 actual products along with product descriptions, thumbnails, and other pertinent information, as shown in 1-B.</p>
<p>With a fast Internet connection available on the desktop Web, the difference between hitting the keyword server and the products server is negligible — both come back almost as quickly. On the slower mobile connection, however, the difference is not only noticeable, but actually quite annoying because Anna never actually wanted to view “Harry Potter” products, but instead used this auto-suggest query as an <strong>interstitial search page</strong> — a jumping off point on the way from “ha” to “Harry Potter and The Chamber of Secrets”. The only reason why the interstitial search results page shown in 1-B was loaded was to avoid typing the full query on the mobile device.</p>
<p>After the products finally load, Anna again taps the search box to recall the keyboard and adds the letters “ch” to the query, creating the new query “Harry Potter ch”. The auto-suggest again goes to work, this time serving up as a suggestion what looks like the entire query Anna is actually looking for, “Harry Potter and The Chamber of Secr…” as shown in 1-C. Anna taps the suggestion, and the system finally serves up the <em>second</em> search results page, 1-D — the search results page she was originally looking for.</p>
<p>The first search results page is not just annoying and unnecessary — it distorts and pollutes an important asset, the frequently used queries database. The increased frequency with which the query “Harry Potter” is executed in fact helps push it to the top of the most frequently used query list again and again, creating a negative feedback loop in the frequently used queries server. The more something is selected as a jumping off page, the more the interstitial query (and it’s accompanied search results) appears to rise in popularity. Avoidance of typing in conjunction with a slower bandwidth available on mobile devices results in an overall sub-par experience.</p>
<p>Fortunately, there is a better way: <em>Tap-Ahead Auto-Suggest</em> design pattern that avoids the need to load the interstitial results page and all of the associated problems. I created <em>Tap-Ahead</em> based on my user research specifically to <strong>handle typing avoidance and slower bandwidth</strong> and optimize the search experience for the way customers use auto-suggest on mobile devices.</p>
<h3>Tap-Ahead: A Novel Way of Resolving Typing Avoidance and Slower Bandwidth</h3>
<p>Typing avoidance and slower bandwidth are two limitations inherent in mobile devices. Together, these two forces shape how people behave when they search. Tap-Ahead design pattern converts these mobile limitations into opportunities to create a better experience by minimizing the amount of typing and maximizing the use of the limited bandwidth.</p>
<p>The idea for the tap-ahead is simple: <strong>avoid serving the interstitial search results page</strong> by giving customers a way to narrow their search query using popular keywords without typing. To implement the additional narrow down functionality, I used the established iOS “more actions” icon — a blue circle with an arrow that was familiar to most iPhone users because of its prominence in the Contacts application, shown in Figure 2:</p>
<p><a href="http://www.designcaffeine.com/wp-content/uploads/2011/12/tap-ahead_gnudelman_figure_2b.png"><img src="/wp-content/uploads/2011/12/tap-ahead_gnudelman_figure_2b.png" alt="Tap-ahead Gnudelman Figure 2b in Mobile Auto-Suggest on Steroids: Tap-Ahead Design Pattern" width="178" height="70" /></a><br />
<em>Figure 2. Blue circle with an arrow is used to indicate “more actions” in the iPhone Contacts app.</em></p>
<p>Of course, the same pattern can be applied on other platforms such as Android, Palm, BlackBerry and Windows 7 Mobile, by replacing the blue iOS arrow with the native platform’s standard “more actions” icon. Figure 3 shows what an implementation of the Tap-Ahead on Android might look like:</p>
<p><a href="http://www.designcaffeine.com/wp-content/uploads/2011/12/tap-ahead_gnudelman_figure_3b.png"><img src="/wp-content/uploads/2011/12/tap-ahead_gnudelman_figure_3b.png" alt="Tap-ahead Gnudelman Figure 3b in Mobile Auto-Suggest on Steroids: Tap-Ahead Design Pattern" width="202" height="409" /></a><br />
<em>Figure 3: One Possible Andorid Tap-Ahead implementation.</em></p>
<p>Let me show you how this feature works in the context of auto-suggest. In this example, the customer (let’s call him Ben) is again looking for “Harry Potter and The Chamber of Secrets”, but in contrast to Anna who we followed in the example above, Ben is using the Tap-Ahead auto-suggest interface. Figure 4 shows how this search would proceed using the Tap-Ahead design pattern instead:</p>
<p><a href="http://www.designcaffeine.com/wp-content/uploads/2011/12/tap-ahead_gnudelman_figure_4a.png"><img src="/wp-content/uploads/2011/12/tap-ahead_gnudelman_figure_4a.png" alt="Tap-ahead Gnudelman Figure 4a in Mobile Auto-Suggest on Steroids: Tap-Ahead Design Pattern" width="550" height="290" /></a><br />
<em>Figure 4: Auto-Suggest Search Process Optimized with Tap-Ahead.</em></p>
<p>To begin the search process, Ben also types in “ha” as shown in 4-A. Using the first two letters of the query, the auto-suggest function performs a call to the keywords server, retrieving 10 most frequently used keywords that begin with “ha”, among which is “Harry Potter”. Auto-suggestion “Harry Potter” does not completely match “Harry Potter and The Chamber of Secrets”, so instead of selecting the “Harry Potter” suggestion as Anna did in the example above, Ben hits the blue “narrow query” arrow.</p>
<p>This <strong>searches through the keyword server for popular queries</strong> that contain the keywords “Harry Potter”, serving up the next auto-suggest layer, which contains “Harry Potter and The Chamber of S…”, along with nine other suggestions, as shown in 4-B. This is the query Ben is looking for, so he taps this suggestion and the system serves up the search results page as shown in 4-C — the actual search results page Ben was originally seeking.</p>
<p>Allowing Ben to narrow down the initial auto-suggestion directly using the blue circle with an arrow offers several key user experience benefits:</p>
<ul>
<li><strong>Faster Search</strong><br />
As we discussed above, hitting the product server to retrieve interstitial search results is expensive, slow and unnecessary. By tapping the blue circle with an arrow, Ben bypassed the useless interstitial search results page and executed his second query, “Harry Potter” <em>against </em>the keyword sever — a much faster process, which also returned useful search suggestions. Ben only had to hit the product server <em>once</em>, when he had the right search query.</li>
<li><strong>Less Typing</strong><br />
Ben did not need to type in “ch” to find the popular auto-suggestion that contained his second query, “Harry Potter and The Chamber of Secrets”. Although this is not always going to be the case, quickly serving up the popular keyword suggestions upfront, without forcing the customer to type anything, increases the chances of being able to select the desired query faster.</li>
<li><strong>Seamless Flow</strong><br />
Instead of jumping between the auto-suggest list and search results, the system maintained flow by serving pertinent keywords quickly and remaining in the auto-suggest mode until the entire desired query has been entered. This optimized user’s attention on task and maintained flow.</li>
<li><strong>Flexibility</strong><br />
At any point, the customer retained the ability to select the keyword suggestions in a traditional manner or type into the search box or exit the auto-suggest flow. The new mechanism of tapping the blue circle with an arrow to narrow down the search is merely an optional feature that provided additional functionality, allowing the customer to enter his desired query faster and easier.</li>
<li><strong>Database Integrity</strong><br />
Because the interstitial query “Harry Potter” was never actually executed against the product server, it did not “accidentally” count toward the popularity of this query. “Harry Potter and The Chamber of Secrets” was the only query executed against the product server and therefore the only one that counted as a legitimate hit, preserving the integrity of the keyword popularity database.</li>
</ul>
<p>In our quick usability testing, we found the technique of tap-ahead to be both intuitive and useful. I theorized that this was in part because tap-ahead takes advantage of how people already use the auto-suggest functionality on the mobile device, so the entire process seemed natural and intuitive to our participants. Also, many people remarked that tap-ahead design pattern seemed somehow already familiar. This was because it did not require people to learn anything new: the design uses the established iOS “more actions” icon that most iPhone users already tap several times a day when they use the <em>Contacts </em>application.</p>
<p>Although tap-ahead is very useful when combined with the traditional auto-suggest database, its real power comes from redefining the way auto-suggest is used in the context of a mobile device.</p>
<h3>Tap-Ahead: From One-Shot to Step-Wise Refinement</h3>
<p>Typical auto-suggest on the desktop Web is structured around a one-shot approach: when the customer types in the query, the auto-suggest server attempts to bring back the one exact match to the query the customer is trying to type in. Clicking the auto-suggestion replaces the query the user was typing with the one the system recommended. It’s meant to be a one-shot deal: one goal, one query, one suggestion, and one set of results. While this is a decent initial model, in practice, we now know that this is not how people really search. As I describe in my book, <em>“Designing Search: UX Strategies for Ecommerce Success”</em> (Wiley, 2011), modern-day search is a multi-step process that takes place in multiple contexts, with the customer moving fluidly between keyword searching and browsing, multiple devices, locations, Web sites and social networks.</p>
<p>One-shot refinement is ill suited to this multi-faceted search paradigm, but after long practice, people on the desktop Web have learned to <em>satisfice</em>. It helps that the Internet connection is often blazingly fast and feedback in the form of suggestions and results is nearly immediate. Additionally on the desktop Web, it’s really not that difficult to type in the query again or delete some parts of the query auto-suggest has over-delivered using the mouse and keyboard after the interstitial search results page is loaded.</p>
<p>In contrast, on mobile, things are very different. Connection speeds are slower and more sporadic. Also, editing a query string on touch phones is quite a bit harder than doing it on the desktop: for example, on the iPhone, the user must tap and hold the finger on one of the query’s keywords, then scroll the tiny handles left and right to select just the right number of letters — not a trivial exercise while bouncing around in the moving vehicle or multi-tasking. Android, Palm and BlackBerry mobile devices require similarly awkward query editing acrobatics.</p>
<p>A more usable way of implementing auto-suggest on the mobile device is through <strong>step-wise refinement implemented through the Tap-Ahead interface</strong>. Instead of trying to guess the entire query the customer is trying to type in and offer the best one-shot replacement, Tap-Ahead design pattern <em>guides</em> the auto-suggest interface through the guessing process one word at a time — a much more natural, flexible and robust auto-suggest method, optimized to solve low bandwidth and fat finger issues people experience on mobile devices.</p>
<p>This is how the step-wise refinement Tap-Ahead interface works. Suppose our two customers, Anna and Ben, are both searching for “Harry Connick Jr.” Anna is using a one-shot auto-suggest flow for this query, shown in Figure 5. Ben, on the other hand, is using the new step-wise tap-ahead refinement alternative as shown in Figure 6:</p>
<p><a href="http://www.designcaffeine.com/wp-content/uploads/2011/12/tap-ahead_gnudelman_figure_5a.png"><img src="/wp-content/uploads/2011/12/tap-ahead_gnudelman_figure_5a.png" alt="Tap-ahead Gnudelman Figure 5a in Mobile Auto-Suggest on Steroids: Tap-Ahead Design Pattern" width="550" height="290" /></a><br />
<em>Figure 5: Anna enters “Harry Connick Jr.” using the traditional one-shot auto-suggest flow.</em></p>
<p><a href="http://www.designcaffeine.com/wp-content/uploads/2011/12/tap-ahead_gnudelman_figure_6b.png"><img src="/wp-content/uploads/2011/12/tap-ahead_gnudelman_figure_6b.png" alt="Tap-ahead Gnudelman Figure 6b in Mobile Auto-Suggest on Steroids: Tap-Ahead Design Pattern" width="550" height="290" /></a><br />
<em>Figure 6: Ben enters “Harry Connick” using a step-wise tap-ahead refinement design pattern.</em></p>
<p>When Anna types in “ha”, the interface suggests “harry potter”, “hard drive”, “halo reach”, “harry potter and the deathly” and a rather redundant “harry potter and the deathly…” as shown in Figure 5-A. On the other hand, Ben, who is using a step-wise refinement sees a much more humble top 10 one-word suggestions such as “harry”, “hard”, “halo”, “hair” and “hat” shown in Figure 6-A.</p>
<p>Because none of the query terms match the desired query “Harry Connick Jr.” exactly, Anna, who is using the traditional one-shot interface, is forced to keep typing the word “harry”. In contrast, Ben can tap the blue circle with an arrow next to the suggestion “harry”, filling in the entire keyword with <em>one </em>tap.</p>
<p>Once both customers enter the keyword “harry”, Anna again sees one-shot auto-suggestions which include “harry potter”, several variations of the “harry potter and the deathly…”, “harry potter dvd”, “harry potter wand” and many other “harry potter” variations, as shown in Figure 5-B. Unfortunately, the set does not include a “harry connick jr.” suggestion, so Anna is again forced to keep typing “c” in order to get the full one-shot auto-suggestion of “harry connick jr.”, shown in Figure 5-C.</p>
<p>In contrast, Ben receives only single keyword suggestions, so his second set of suggestions includes only a <em>single</em> instance of the keyword “potter”, which successfully covers <em>all</em> of the variations of the query “harry potter”, which had to be listed individually in Anna’s one-shot interface. Thus instead of 10 variations of the “harry potter” query, Ben’s single-word auto-suggestions include a rich set of 10 one-word complements of “harry”: “potter”, “connick”, “truman”, “smith”, “houdini”, “harrison”, “dent”, “david”, “eastwood” and “hendersons”, as shown in Figure 6-B. A one-tap selection selects “connick” which yields the query “harry connick” that is sufficiently close to the desired query “harry connick jr.”. Note that although in this case it was not needed, the addition of the word “jr.” can be easily accomplished with one more tap on the blue “narrow down” arrow.</p>
<p>To summarize this comparison, after both Anna and Ben typed in the initial “ha”, Ben was able to <strong>finish entering the entire query in only 2 easy key-strokes</strong> — by selecting two successive auto-suggestions, whereas Anna had to type in the additional “rry c” and select one auto-suggestion, a total of 6 keystrokes. In this quick demo task, tap-ahead interface provided a huge improvement, given how hard and error-prone typing has proven to be on the mobile device.</p>
<p>The advantage of the tap-ahead step-wise refinement interface is that the refinement keywords can be loaded asynchronously for each of the 10 auto-suggestions even while the customer is making the selection of the first keyword. Given that most queries are between two and three keywords long, and each successive auto-suggest layer offers 10 additional keyword suggestions, tap-ahead with step-wise refinement allows customers to reach between 100 (10 * 10) and 1,000 (10 * 10 * 10) of the top keywords through typing only a few initial characters. Tap-ahead allows the mobile auto-suggest interface to maintain flow and increase speed and responsiveness on tiny screens that is simply not possible to currently achieve with the traditional one-shot auto-suggestion interface.</p>
<h3>In Conclusion</h3>
<p>I want to close out with this quote from Google, the company that invented the original auto-suggest design pattern, which clearly inspired my tap-ahead design:</p>
<blockquote><p>“At Google, we often think that speed is the forgotten ‘killer application’ — the ingredient that can differentiate winners from the rest. We know that the faster we deliver results, the more useful people find our service.”</p>
<p>— Matt Brittin, Managing Director, UK &amp; Ireland Operations, Google</p></blockquote>
<p>I hope that you find the Tap-Ahead design pattern useful in improving the speed and responsiveness of your own auto-suggest mobile interface and that Tap-Ahead contributes to further experimentation and evolution of search design patterns. For more mobile search design ideas, check out my book, <a href="../DesigningSearch">“Designing Search: UX Strategies for Ecommerce Success”</a> currently available from Wiley and Amazon.com.</p>
[signature]
<h3>References</h3>
<ul>
<li>Brittin, Matt. <a href="http://thinkquarterly.co.uk/" target="_blank">“About Think Data.”</a> <em>Think Quarterly</em>, May 15, 2011. Retrieved May 15, 2011.</li>
<li>Ferrara, John. <a href="http://www.uxmag.com/technology/psychic-search" target="_blank">“Psychic Search: a quick primer on search suggestions.”</a> <em>UX Magazine</em>, November 23 2010. Retrieved May 15, 2011.</li>
<li>Kamvar, Sepandar D. et.al. <a href="http://patft.uspto.gov/netacgi/nph-Parser?Sect1=PTO2&amp;Sect2=HITOFF&amp;p=1&amp;u=%2Fnetahtml%2FPTO%2Fsearch-bool.html&amp;r=1&amp;f=G&amp;l=50&amp;co1=AND&amp;d=PTXT&amp;s1=20050283468&amp;OS=20050283468&amp;RS=20050283468" target="_blank">“Anticipated query generation and processing in a search engine.”</a> United States Patent # 20050283468, Google. June 22, 2004.</li>
<li>Nielsen, Jakob. <a href="http://www.useit.com/alertbox/mobile-usability.html" target="_blank">“Mobile Usability.”</a> <em>Alertbox</em> July 20, 2009. Retrieved May 15, 2011.</li>
<li>Nudelman, Greg. “Anticipated query generation in a search engine with refinement option.” United States Patent Application # 61477606, April 21, 2011.</li>
<li>Nudelman, Greg. <a href="../DesigningSearch" target="_blank"><em>Designing Search: UX Strategies for Ecommerce Success</em></a>, Wiley &amp; Sons, 2011.</li>
<li>Nudelman, Greg. <a href="http://www.uxmatters.com/mt/archives/2010/03/designing-mobile-search-turning-limitations-into-opportunities.php" target="_blank">“Mobile Search: Turning Limitations into Opportunities.”</a> <em>UXmatters</em>, March 8, 2010. Retrieved May 15, 2011.</li>
<li>PricewaterhouseCoopers, LLC. <a href="http://www.pwc.com/us/en/technology-forecast/2011/issue1/index.jhtml" target="_blank">“Technology Forecast: Unleashing enterprise mobility.”</a> Center for Technology and Innovation, issue 1, 2011. Retrieved May 15, 2011.</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.designcaffeine.com/articles/mobile-auto-suggest-on-steroids-tap-ahead-design-pattern/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

