What is NFC? NFC is a short-range connectivity technology. Connecting with NFC usually initiates apps or other systems within the device. NFC enables easy access to these applications by “touching” two NFC-enabled devices or an NFC “tag”.

So, with this shiny new hammer hitting the streets, what UX design considerations can we expose to help designers pound in some nails? Good places to start are the five guidelines that I listed below.

Note that these will not apply to every app out there, and please keep in mind these are still preliminary, as the NFC technology is still very young. We will of course, keep adding new ideas as they become available, so be sure to use the form below to sign up for the Tablet & Mobile Design Secrets newsletter.

#1) Consider app security.

With the new doorway into the phone’s innards, security is likely to be paramount. How is the access to the NFC chip’s impressive capabilities maintained? If you are using the app for NFC-enabled foursquare access, you may not even need a password. In the case of Google Wallet, we see a decidedly iPhone-esque 4-digit PIN screen below:

I guess the thinking behind this at Google HQ was that if a 4-digit code can be used to un-lock the ATM machine and get $300 at a time, this same security aught to be sufficient for a phone wallet. This may well be the case, but if we dig a bit deeper, we will discover a host of other important questions.

Such as, when the NFC-enabled app is launched, how long does it stay active? The ATM PIN is only active while the transaction is on-going. Pause for more than 20-30 seconds and your standard-issue Diebold ATM boots your session from the system. Although ATM can be considered to be a crude version of “mobile technology”,

strictly speaking, the ATM machine can virtually guarantee your physical presence at a particular location (in front of this specific ATM). The ATM can also guarantee to command your complete attention.

Your customers can not, for example, check your Facebook alerts while also taking the money out of the ATM.

In contrast to an ATM, in the case of the smart phone, we are dealing with the infinitely more complex device and multi-varied mobile environment.

Ladies and Gentlemen, this is where the rubber meets the road: this is the real mobile User Experience Design. Not complicated, but very sophisticated. UX Design phase is where we get to ask and attempt to answer difficult questions.

For example, on the mobile phone, the customer may be launching the app in preparation for payment, while waiting in line. This is tantamount to someone entering their PIN while waiting in line for an ATM. Should we allow it?

If we do allow it, how long do we allow the app to stay active? Five minutes? Four? Or until the phone is shut down? How about multi-tasking? Should we allow the customer to check their email while their digital wallet is “hanging open”?

How about the 4-digit PIN itself? Most consumers might just use for their digital wallet the same 4 numbers they use to withdraw money out of the ATM. That seems logical, if somewhat simple-minded.

How about locking the Digital Wallet with the same 4-digit PIN they use to unlock their phone? Now that seems like a decidedly terrible idea.

How designing the experience that the evil-doer that stole your customer’s phone and actually trying to break into the NFC app will have to endure? Should the app lock up after 3 tries? 10 tries? Give the customer a progressively longer cooling-off period after 3 unsuccessful tires, iPhone-style?

These are not straight-forward questions, and the answer just might be “it depends”. If the app is used to get on board a commuter train, perhaps a 2 minutes timeout with 10 tries to lock up might be a the right answer. But if the app happens to be a digital wallet, 2 minutes for a time-out and 10 tries for a lock-up might be a bit long. Security, PINs and time-outs all bear very careful consideration in the design of your ideal encounter of the NFC kind. Some field-testing is certainly necessary to pinpoint possible issues.

2) Have an alternative in place.

Most of the NFC-enabled functions are currently a novelty. In other words, they are “nice to have”. So, consider having a robust and tried alternative in place, in case the customer who wants to interact with your NFC smart tag did not run out and purchase Galaxy Nexus S yesterday.

Today, the iPhone is still the #1 mobile device on the market, and it has no NFC chip. Make sure you take care of your existing customers while making things a bit smoother for the new.

For example, let’s say your app can use NFC for checking in at a location. Consider the UX design of the entire service. It might strike some mobile peeps living in the San Francisco Bay Area as odd, but I can virtually guarantee you that some locations in the heart of the American Heartland may not yet have NFC-enabled card readers. Conversely, some of your cave-dwelling customers will not yet have NFC-enabled phones. Should you still provide the service to these folks? If you want more than 6 people to show up, the answer is Yes.

I’d like to suggest a way to marry the old and the new by combining the tried and true QR Code with an embedded smart NFC tag. To let customers know that there are two ways to interact with the tag, we can start by embedding the standard NFC “wave” symbol into the QR code to indicate dual functionality.

A sample is shown below:

This tag design makes it clear that NFC-enabled devices can simply tap the QR code sticker, while those iPhone 4GS carrying “cavemen” will just have to launch RedLaser in order skin (or scan) the thing.

3) Show how to use the NFC.

Wave Here! Tap there! Why is it that the simplest technology often seems the most complicated? It’s easy to miss this simple step, when it seems so obvious. Take a look at the Google Wallet home screen for example:

A naïve customer might ask, “How do I use this?” From the engineering stand-point for which Google is so famous, this seems obvious – just wave the damn thing over the payment terminal already!

However,

from the customers’ stand-point, the last thing they want is to look like a fool, with their stupid shiny new NFC phone, “that doesn’t even work”, fumbling for “real money” in front of their friends or their significant other.

Just search for Google Wallet on YouTube and watch some of the videos. People are unsure. This NFC thing is new – how do I use it? Until a new technology enters the consumer consciousness, you need an Inukshuk – an Inuit UX term coined by the incomparable Jared Spool to indicate content that provides little factual information. Instead, the sole purpose of Inukshuk content is to cradle the customer in the luxury of care and comfort.

Inukshuk is a little human touch in our information-dense digital universe. “Someone been this way. They used this. It works. You won’t look like an idiot. You won’t lose money. It’s alright. Let me show you.”

How much better a new comer’s experience would be if Google took the care to include just one tiny little Inukshuk. One additional button, “How to Pay”, as shown in my wireframe below:

The NFC functionality is currently pretty limited, which gives you plenty of real estate, even on the tiny mobile screen.

“How to Pay” section would also be the perfect place to educate the consumer about security, time-out and other useful considerations. And the perfect place to introduce the inevitable upcoming complete money movement functionality such as Bill Pay, Person-to-Person payments and Inter-Account (also called Me-to-Me) transfers. This Inukshuk can always move to the Settings screen after the customer reads the content and accomplishes a few successful scans, or with a “don’t show again” switch.

5) What are the defaults?

Then there is an important question of defaults. Today, most of us have multiple on-line identities. In my case, it is having a small business. Sometimes I act on my own, as Greg Nudelman, and sometimes I act as a corporate entity and the CEO of my company, DesignCaffeine, Inc.

Unless your customers will to be carrying two NFC-enabled phones, each with a different digital “identity” and a different digital wallet, they will have a real need to determine, very quickly and with high degree of precision, which of their identities is currently selected on the device (and which identity will be presented to the NFC reader).

Unfortunately, Google Wallet does not make that easy. Can you tell which credit card has been selected in the home screen below?

Actually, it is impossible to tell from only the home screen. You have to drill down into the “Payment Cards” screen shown below:

NFC makes it so easy (almost too easy!) to send the right message, but as a wrong person. Thus showing the default identity setting, user id, credit card, etc. is pretty important.

Fortunately, a fix like the one shown in the wireframe below would make default credit card easy to see and change:

In this version swiping across changes the card to the next one in the wallet, while double-tapping any card brings up the entire card list with thumbnails. Additionally, tap-and-hold can bring up a menu that will allow customers to see the list or add a new card. Implementing double-tap and tap-and-hold should make this virtually fool-proof, while not interfering with 95+% primary action of swiping across to get to the next card. The carousel is meant to be similar to viewing the actual stack of cards inside a physical wallet. Of course, this needs to be tested in the field to ensure that virtual fool-proof-i-ness.

You might say that we’ve taken a beautiful clean home screen designed by Google and made it a mess. And you would be right. The biggest take-away here is that until some of these questions are figured out, NFC can be quite messy where user experience is concerned.

4) Is this thing on?

The funny thing with NFC that few people give any consideration to is that often, by default, the NFC functionality is always on. Like the cell phone signal, NFC is continually transmitting and receiving even when the phone is “dark”, that is on stand by. Should this be the case, or should the customer have some control where and how NFC is presented? Should the NFC tag determine which app to call when the NFC signal is obtained or should the customer have some control over which app is launched? And should the mobile device confirm with a customer before launching that app, and what it will do? Or simply profess to the entire world your new adoration of “Bed Bath and Beyond” on Facebook with a single fool-hardy tap? How does a consumer (or, more properly, an actor in the NFC service) smoothly and naturally determine the extend of the role they wish to play, without going all the way to the advanced settings in the “Beyond” department?

It’s only a matter of time until complete strangers will be trying to “bump” or “wave” your customer’s phones. Often without their permission.

If we want to avoid dropping the NFC down into the same technological dead-end to which previous near-field attempts like Bluetooth have been relegated, we have to give very careful consideration to the question “is it on?” Does the app have to be active in order to interact with the external NFC tag? What if the app is active, but running in the back-ground in the multi-tasking mode? Does the phone itself have to be turned on, or can it be on stand-by? What information, if any, can be requested by the NFC terminal? How does a customer control what will be sent and to whom? What can be obtained from my phone without my permission? How hard or easy it is to connect to something that carries the NFC signal?

Sometimes, the rapid pace of mobile technology adoption gives us more questions than answers. But that’s exactly the mystery that makes mobile and tablet UX design so intriguing. And you can count on us to help you make the most of each new clue. Don’t miss a thing. Sign up for Tablet & Mobile Design Secrets, using the form below.

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.

Here is example from the chocolate bar wrapper we discussed in the previous article:

And here is another example of the same “buttons” on a high-end spa advertisement in a wellness journal.

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?

Personally, I’d like to propose the following 6 Reasons Printed Buttons Must Die:

1. Printed buttons are amateurish.

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)?”

2. Printed buttons require extra work and are error prone.

Let’s say that for some unfathomable reason, I really do want to follow Simply Lite chocolate company on Twitter. Really. Forget the why for a second, let’s concentrate on the how. 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:

Which one should I pick? How about simplylite? As it happens, simplylite, is not the droid I am looking for. But instead a rather single-minded young lady:

Other top picks include simplylites and simplylite1. The right choice happens to be behind door #4: the unfortunately named SimplyLiteChoc – the last search result!

By using the “buttons”, the company forces customers to guess the Twitter handle and 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.

3. Printed buttons deliver no value.

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.

Frankly, I find the simplylite 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 SimplyLiteChoc Twitter handle:

While 36 people (or about 50% more) are following the simplylite lady. In the words of Dr. Phil: “Simply Lite, how is that strategy working for ya?”. Not very well, obviously.

4. Printed buttons are fake.

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. They are not.

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:

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… 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.

For companies seeking to engage with their customers in social media, the hip printed digital “buttons” send the wrong message. They are not pretend. They are fake.

5. Printed buttons are not scalable.

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”:

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.

6. Printed button logos don’t mean a thing.

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:

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.

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 & Mobile Design Secrets newsletter.

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.  Click here to go to my contact page.

Tip #7: Mobile is about Vision, not Numbers

I often say in my presentations that

If your company does not have a mobile strategy, it does not have a growth strategy.

Yet many companies say that they simply “do not see the numbers” they need to convince themselves that mobile strategy is worth pursuing.

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 fundamental mistake. 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. 

Mobile context of use is as different from desktop web, as Internet was from the brick-and-mortar.

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 ten times the break-necking speed of the Internet growth of only a decade ago.

Today, it is patently absurd to think that any 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 exactly what I see going on in Mobile space.

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:

Others, like Red Envelope are sitting on the mobile sidelines waiting for the chickens to hatch:

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.

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.  

Make 2012 the year you develop and invest into your mobile strategy.

Tip #6: Mobile Apps Space is Oversaturated

Unless you are building the next Angry Birds or N.O.V.A., forget building an app. Shocking? I hope not.

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.

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. 

What does that leave you with?

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.

In contrast to mobile apps, the tablet app space is ripe for the taking (see Tip #2 below).

Tip #5: Hybrid Apps Must Die

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.

Sometimes, you get exactly what you pay for. The Coleman canoe I purchased was optimized for manufacturing and shipping, not paddling. 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.

The same rule applies to hybrid mobile apps. 

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.

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.

Why is this a problem?

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.

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.

2011 was a year of turbulent market consolidation for mobile platforms. With Nokia out of the picture, Windows Mobile’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.

Tip #4: Mobile Website First

Now that the mobile apps market is over-saturated, what’s left? Although one size does not fit all,

As a rule of thumb, a good mobile website should be the basis of your mobile strategy. 

There are many reasons for this. Not the least is the “Mobile First” 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.

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 naked skinny blondes eating burgers and other sacred mad-cows that should have been disposed as bio-hazard waste ages ago.

If you design and build mobile first, you will get to the core of your features and brand value.

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.

Tip #3: Build an App if you Have a Good Easter Egg

There is one exception to the mobile website first rule: what I call Easter Egg functionality. 

If your app can offer your customers something they frequently want to use in the mobile context, that mobile website cannot, it is worth building an app.

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.

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.

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:

There are many examples of great apps that I included in my book: “Designing Search: UX Strategies for Ecommerce Success” (Wiley 2011).  You can download a sample chapter here.

Tip #2: Mobile Offerings Do Not Work on Larger Tablets

Despite what the official Party Line towed by both Apple and Google mobile apps do not work on Tablets. More accurately,

Mobile apps do render 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.

Larger 9-10 inch tablets are a completely different type of device – a “Third Device”, 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 “Designing Search: UX Strategies for Ecommerce Success” exclusively to Tablet search designs.

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.

In contrast to mobile apps, tablet apps still offer an excellent expansion opportunity. Very few companies have figured out how to do them well.

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:

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:

Tip #1: Consider A Future-Friendly Responsive Website

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. 

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.

For example, Scott Jehl’s brilliant use of JavaScipt in the Boston Globe redesign has demonstrated some creative technical solutions to the challenges of responsive design.

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 Tablet & Mobile Design Secrets Newsletter. To make sure you do not miss out, be sure to sign up below.

We Wish You a Great Mobile 2012!

Once again, starting from the bottom, and without any further ado, coming at number 7 is:

#7 Offer More Info About Your Product

QR codes are unique, because they represent the first successful large-scale experiment for creating the “Internet of Objects” Bruce Sterling described in his thought-provoking book “Shaping Things”. Also been described as  “Near Field Computing”, the idea is to use mobile technology to connect the virtual and physical worlds. The idea is simple: to be able to track any product from it’s material source, through its manufacturing process, storage and ownership, to its current location and eventual disposal.

How is that adding value?

Think about it: each of us now has this incredibly capable and resourceful mobile device that is always with us, 24×7. This is an incredible gateway to a world of information, just waiting to be accessed. Like a hammer in want of a nail, just waiting for something to whack. 

Your QR code is just the nail you need to engage the consumer. A way to create the authentic, artesian, immersive product experience. A chance to tell a story. An opportunity to give a service that extends the relationship with your brand well beyond the current moment of consumption.

Here’s an example: I sometimes buy this fancy Simply Lite chocolate.  Suppose this chocolate bar had a QR code on it. What kind of additional product information could it link to?

You could, for instance, discuss the ingredients. Such as inulin, which adds sweetness to low calorie products and enhances taste and mouthfeel. You could let the consumer know that Chicory root is the best source of inulin, as are salsify, leeks and asparagus. And that another type of Chicory is commonly called Endive lettuce, grown underground in the dark.

(Image credit: http://en.wikipedia.org/wiki/Chicory)

Suddenly, your customer is no longer just biting into a somewhat disappointing chocolate bar. He is connecting with the subtle and precise science of creating inulin fibers. From, like, Real Plants.

And let’s not forget the lure of the roasting aroma of the premium coco beans.

(Image credit: http://en.wikipedia.org/wiki/Theobroma_cacao)

And the sweaty natives that pluck the beans skillfully from the giant coco pods that grow high in the trees, where the wily green monkeys jump from branch to branch… Somewhere in dense shade of the rainforest jungle in the heart of Ghana.

(Image Credit: http://www.localyte.com/services/48363–Ghana–Greater%2BAccra–Accra–YouthEX-Foundation)

Just by scanning a black and white square of jagged lines, your customer now has a chance to step away from the busy sounds of the city to savor the quietness, coolness and freshness of a cocoa farm. He is almost be able to hear the drums calling out another successful harvest…

(Image credit: http://www.cottontreelodge.com/community/blog2/)

And suddenly, just like that – your customer’s experience is transformed way beyond the boundaries of the humble chocolate bar object they hold in their hands. He is getting the history of your product. The one-of-a-kind artesian process. Maybe even “real” discussions about rainforest preservation and greenhouse gases and global warming. Most importantly,

you have just created for them a moment of flow: a precious, authentic instance of human understanding. A jewel of a story that you and your customer now share.

Does that enhance your customer’s enjoyment of your product? You bet.

In a very real way you have added value to your product, because you have provided entertainment and education that extends beyond the immediate gustatory relationship with the object and outside the timeframe of the act of consumption.

You have just transformed the experience of food into one of the shared human delight. Your customer has been initiated into your inner circle, and carries with him your story. Your meme. Your brand.

And maybe he will remember something about those shade grown beans next time he is at the chocolate counter, and the way he felt last time he held your particular chocolate bar. And maybe he will proudly tell his kids about the sweaty natives and the wily green monkeys. And the drums (one must particularly not forget The Drums, Best Beloved.) And maybe, if you are lucky, he may even let his friends know… But we are getting a wee bit ahead of ourselves – for the next secret QR code strategy you will just have to wait for our next installment.

Till then, I remain, Sincerely Yours,

P.P.S. Forget that fuzzy sweater! This Holiday Season, give yourself something you really need. The gift that keeps on giving. Practical information you will use again and again. A subscription to Tablet & Mobile Design Secrets. Enter your email above and click “Join Us” now.

A QR (Quick Response) code is a type of 2-dimensional matrix barcode that has become popular with mobile consumers due to its fast readability with an on-board mobile phone camera and comparatively large storage capacity. QR codes are seemingly everywhere this Holiday season. Small wonder: people who scan QR codes tend to have higher-end mobile devices (and so appreciate the finer things in life) and are likely to have some disposable income as well. People scan QR codes for price comparisons (81%), product reviews (63%), and to receive special offers (63%) (Source: ScanLife)

Here’s what reading a QR Code with an iPhone app Red Laser looks like:

According to comScore:

• 14 million Americans scanned a QR code in June 2011
• 60.5% of code scanners were male
• 53.4% were 18-34 years old
• 36.1 percent had a household income of at least $100,000.

How do you reach these millions of Olympic Caliber Shoppers?

While there are many finer points to a QR code campaign, there are 3 key strategies that help your campaign be successful.

Not surprisingly, getting these QR campaign secrets wrong causes serious problems that could repel customers instead. Here is one example. Mochi Massage is a high-end SF downtown spa. Mochi is running a QR code ad campaign, implemented using street signs, like the one shown below:

This strategy makes sense: stressed out Holiday shoppers might be willing to simply scan a barcode to get a comfortable 30-minute massage discount, as well as stress-free mobile directions on how to get to the establishment. Unfortunately, the Mochi Massage QR code falls far short of the goal. Why is that? Missing the sweet spot outlined in my QR campaign secrets (presented below in reverse order):

Secret #3: Track your QR code scans

In the Mochi Massage street sign example, the URL encoded in the QR code is simply a link to their desktop website:

Anything you value that you want to nurture must be measured, or it will be simply ignored. Not tracking the code means that no way exists for the company to track how often their QR code is used, when, or by whom.

Tracking is key for any new technology requiring some investment risk, such as QR code campaigns. Without tracking it will be impossible to tell if the company should put up more walk-up signs, provide coupon handouts with QR codes or employ a different marketing strategy altogether.

Fortunately, tracking QR codes is very easy using Google Analytics (ask me how), or by using a URL redirect service such as Bit.ly.

Secret #2: Use a mobile-optimized landing page

While many potential points of access are possible, QR codes are most often scanned with a mobile phone. The web page your customers will see after scanning your QR code should naturally support the device most people use to access the page. While this is a simple concept, it is astonishing how many companies do not take the time to create a mobile-optimized page. That is a mistake. After scanning the Mochi Massage QR code, the first page customer sees on his or her iPhone is the un-optimized desktop web page shown below:

Unoptimized web page does more harm than good for a stressed out shopper holding a mobile device.

Instead of providing comfort, the design irritates the customer by forcing them to poke and prod the page, zooming and panning multiple times. Especially unpleasant when browsing with one hand and holding heavy shopping bags in the other. So now, Mochi’s customers feel more stressed just trying to read the page; you can sense their shoulders getting tight as they crane their necks to see what the page is about in the glare of bright afternoon sunlight. Relaxing initial customer experience? In the words of immortal Rudyard Kipling, “Not so, but far otherwise.”

Which brings us to our #1 secret:

Secret #1: Provide a clear value proposition

All the panning and zooming necessary to see the page is certainly irritating, but they are minor compared to finding nothing of value once zoomed in:

That’s right.

A full 95% of a typical homepage is irrelevant in the mobile context of use.

How disappointing!

A customer has taken the time to open and unlock their phone, launch a special app and take a picture of your code. In our fast, post-Internet world, that’s a large amount of work and a high level of commitment to your ad campaign.

If the person who scanned the QR code does not get some immediate perceived value back for their trouble, the resulting outcome will be decidedly negative toward your brand.

Interestingly, Mochi Massage is showing some small value on their website, but because the page is not correctly formatted and the discount appears in the right bottom corner (the last place anyone would look while “keyhole browsing” on a mobile device) any value proposition is completely lost:

In addition to that, there is no clear call to action for the next step the customer should take, such as to get directions, email or call for an appointment, both actions that naturally integrate with mobile context of use.

Start with Value. Build for Mobile.

In your own QR code campaigns, be very clear to your potential customer what your offer is and what you want them to do with that offer on their mobile phone.

For example, here is a DesignCaffeine, Inc. QR Code for URL bit.ly/designingsearchbk that leverages all 3 secrets:

1) Clear value proposition:

By scanning this code, you will get:

• a free download of Chapter 1 of my book, Designing Search: UX Strategies for eCommerce Success
• ability to read the downloaded PDF right on your iPhone or Android
• a link to buy the book on Amazon.com, right on your phone
• instructions on how to get your free copy of Lou Rosenfeld’s Search Analytics for Your Site (when you leave an Amazon.com review for Designing Search)
• ability to easily share the link with your friends using a variety of sharing services available on your mobile device, so you look smart and helpful.

2) Mobile-optimized landing page:

While not precisely mobile, the web page you will see when you scan the code is Future-Friendly.

Future-Friendly means that HTML and CSS has been carefully optimized to work on the greatest possible number of today’s devices: mobile phones, tablets and desktop web browsers. It is also likely to support many of the future devices going forward.

The page is part of the new site that was designed by DesignCaffeine, Inc. and custom-built for us by Bill Erickson Word Press Consulting. (Incidentally, Bill is offering an amazing special of his own: “Design to Website, Five Days, $1,500” so check it out http://www.billerickson.net/wordpress-consulting/psd-to-genesis and let him know I sent you.) I will tell you more about Future Friendly designs in the next articles, but feel free to drop me a line today if you are curious.

3) Tracking QR code scans:

The encoded URL uses a Bit.ly redirect for tracking. While it’s also simple to implement a Google Analytics tracking code, I like Bit.ly, because it has fewer characters and so allows the barcode to be more compact and robust. A QR code with a shorter URL is more likely to be scanned successfully with greater number of mobile device QR code readers even when bent or partially defaced (although that depends also on error correction level, something we won’t get into here) The key point is: smaller URL is handy, if you are planning to put your QR code in the corner of your printed promotional material (instead of taking up space front and center).

Don’t let your customers walk out on you. Avoid the following 5 issues in your login process:

1. Forgetting the “Keep me Signed In” feature.

Unless you are a financial firm or responsible for securing a nuclear weapons cache, there is no reason for booting people off your system after a short time interval. Provide a “Keep me Signed In” checkbox and let your customers decide how secure they want to be. Delicious manages not to provide the option to remain signed in. It also tends to log people off at random intervals, with or without on-going activity. To add insult to injury, the sloppily executed password form does not even fit the popup window!

2. Forcing login name that is different from an email address.

Delicious requires sign in with a username that is different from the email address. Unless you are the next eBay (where anonymity is a big issue) your customers should be able to login either with their email or userid. Unfortunately, Delicious just keeps giving the generic “invalid credentials” error when users attempt to use their email to login.

When registering people, really think about whether your service needs to force creating a separate Id your customers will be forced to remember, or would email alone suffice? Or how about removing a separate registration entirely and using the simple Twitter or Facebook signup API as @lukew’s Bagcheck.com has done?

3. Creating arbitrary password rules.

No, really. Go ahead and try it — see how long you will remain in business. Delicious manages to take the password interrogation torture to another level: not only do they require a certain minimum number of special characters, and numbers, but they limit the maximum number of special characters in your password as well:

Adding an extra click to see the (incorrect) password error make the cute little message so very not funny for delicious customers.

Doing this forces people to create and memorize a unique password just for your site. Annoying? Absolutely. Couple this with a frequent time-outs mentioned in #1 and in-frequent login to use the tool, and you can almost guarantee people will not remember their passwords, creating tremendous obstacle to use and constant pain for your customers.

Password guidelines should be exactly what they sound like: Guidelines. Your system should not place upper limits on the number of special characters, numbers and letters your customers can have. Unless you are E*TRADE, it’s not your job to be the password policeman. Instead, provide a visual security goal and let your customers decide how secure they want to be. Google and Yahoo provide simple, sane plugins that display a meter displaying password strength.

The added benefit of using the consistent set of rules, is that it will let people can re-use their favorite passwords, so they will not have to, as Winnie the Pooh said, “frequently remember to forget such things.”

4. Making them click to get to login form.

Delicious requires customers to click “Sign In” button to open the sign in form. This extra click is as irritating as it is unnecessary. If the customer timed out, just take them straight to the login form.

5. Disabling deep linking.

Following the login form, Delicious popup simply closes, forcing their customers to click the desired action button again. This is contrary to expectations, so people end up waiting for the action they initially selected to continue automatically. When Delicious fails to deliver, people begin to wonder if something went wrong, while getting annoyed in the process. If the customer wanted to do something useful (in the case of Delicious, add a tag to a website, for example), make sure to take your customers to the page where they can complete the task they started to do before they were interrupted with a password form. This is especially key for money-generating ecommerce workflows like Add to Cart and Checkout.

Give your key flows some love

Are you unconsciously creating any of these pain-points for your customers? Drop us a line and we’ll help you find out and work with your team to design a better experience. A bit of investment into UX Design of critical workflows will typically yields ROI in 10-100X range. We provide everything from inexpensive Usability Audits to custom day-long UX Design Workshops for your team. We integrate with your process and cover topics you care about most. Drop us a line today. For more ecommerce design insights, pick up my book, Designing Search. Rated five stars on Amazon.com. You can get a sample chapter here.

Note: This post was originally quoted on Wired.com Gadget Lab post, How the Kindle Fire Could Make 7-Inch Tablets Huge.

Wired Magazine recently posed some interesting questions:

• 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?

Here are my thoughts on the subject:

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, Designing Search: UX Strategies for eCommerce Success (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.

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 book 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.

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.

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.

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) Free Chapter 1 is now available for download.)

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.

Interested in learning practical mobile and tablet design skills? Check out my workshop.

Connection

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:

Three Rings for the Elven-kings under the sky,
Seven for the Dwarf-lords in their halls of stone,
Nine for Mortal Men doomed to die,
One for the Dark Lord on his dark throne
In the Land of Mordor where the Shadows lie.
One Ring to rule them all, One Ring to find them,
One Ring to bring them all and in the darkness bind them
In the Land of Mordor where the Shadows lie.

Have we truly been given the Social Networking “Rings of Power” or have we been, as the kings of old Middle Earth “deceived”? After using Google + for only a few days, several things became apparent.

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 “from outside – in” 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 “Foundation”. 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.

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 “Fellowship of the Ring” 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 “Non-Humans” 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 “Kick Sauron’s Derriere” project, “Defend Minas Tirith” 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.

Before you start your own Mount Doom flame war, I know that yes, you can 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.

A Better Connection

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 “Family”, “Friends” and “Following” to help everyone get a head start.

Yet people are notoriously difficult to categorize. Instead, a much better model is tagging and folksonomies, as described in Gene Smith’s brilliant book “Tagging: People-powered Metadata for the Social Web” (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.

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 “cleaning up” your social network and getting rid of the ACME, Inc. Circle? Or do you move everyone into a different circle, “Ex-Job Contacts”? 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?

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).

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 “Client” ring you will be in the Big Apple? No way — unless your clients live in NYC, they think rightly think that you are spamming them. How about your “Aspirational contacts” list? Ditto. How about your friends? Well, none of them live in NYC. Would you create a special “NYC Trip August 5 2011″ Circle and add people to it? Way too much trouble. So you will instead post a lame general message “I’m off to NY, let me know if you want to connect” 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.

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?

Communication

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.

1) Superior Mobile App

When it comes to social networking, mobile strategy is 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.

2) Integrated Feeds

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 “One Circle to Rule them All” title should make a serious effort to separate the message from the technology medium.

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 they 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.

3) Integrated Alerts

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, Program or Be Programmed: Ten Commands for a Digital Age (OR Books, 2010) heavy mobile phone users are developing a “Phantom Vibration” 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 “Revenge of the Son of Planet of Alerts” has reached its climax.

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 “yet another place we need to check”. Instead, it should be able to recognize that our experience need not be about the technology of connecting, but rather about the goal 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.

To take a stab at prioritize alerts, we can try an approach proposed by David Allen in Getting Things Done: The Art of Stress-Free Productivity (Penguin, 2002) who advised people to prioritize incoming information into 5 buckets:

1. Important and Urgent (email from a client, client DM on Twitter, family phone call)

1. Important (email from your immediate team, voicemail)

1. Urgent (email from Groupon, @ message on Twitter, miscellaneous phone call)

1. Not Urgent and Not Important (FYI emails, Facebook friend request)

1. To Read (various friend feeds)

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 both our collective social intelligence and machine learning to deal with the overload of data our social networks produce.

Google certainly recognizes this and they have already made strides to do that using their “important” tag in Gmail, so far with mixed results. Facebook earlier attempted to do the same prioritization with the “more/less from this person” feature. However, relying on manual features to assign importance is missing the entire point. This is exactly 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 “more/less important” button is similar in many ways to the early “Spam/Not Spam” buttons – an “Ejection Lever” something we should never need unless things are going wrong with the software.

4) Integrated Publishing Solution

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.

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.

The network that wants to become the “One Circle to Rule Them All”, 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.

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.

The “One Circle” 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.

A Parting Word of Caution

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 “the One Circle to Rule Them All” 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.

Google + recently got a taste of the magnitude of the problem when they deleted a “striking number” of the accounts, explaining only “After reviewing your profile, we determined the name you provided violates our Community Standards.” (Google Plus Deleting Accounts En Masse: No Clear Answers. ZDNet, by Violet Blue, July 23, 2011)

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.

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 “One Circle to Rule Them All”? It’s certainly putting up one hell of an epic battle.

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.

Auto-Suggest: Mobile vs. Desktop Web

As John Ferrara wrote in his November 2010 UXMagazine article, “Psychic Search: a quick primer on search suggestions”, 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.

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:

• Typing Avoidance
  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.
• Slower Bandwidth
  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.

The Limitations of the Typical Mobile Auto-Suggest Flow

As I wrote in my UXmatters article, “Mobile Search: Turning Limitations into Opportunities”, 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 Alertbox, 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.”

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.

As shown in Figure 1 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:

Figure 1. Multi-step auto-suggest search on Amazon iPhone app.

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.

Although the “Harry Potter” does not completely match the query Anna is looking for, it gets her part of the way there and saves a lot of typing. 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.

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 interstitial search page — 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.

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 second search results page, 1-D — the search results page she was originally looking for.

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.

Fortunately, there is a better way: Tap-Ahead Auto-Suggest design pattern that avoids the need to load the interstitial results page and all of the associated problems. I created Tap-Ahead based on my user research specifically to handle typing avoidance and slower bandwidth and optimize the search experience for the way customers use auto-suggest on mobile devices.

Tap-Ahead: A Novel Way of Resolving Typing Avoidance and Slower Bandwidth

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.

The idea for the tap-ahead is simple: avoid serving the interstitial search results page 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:

Figure 2. Blue circle with an arrow is used to indicate “more actions” in the iPhone Contacts app.

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:

Figure 3: One Possible Andorid Tap-Ahead implementation.

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:

Figure 4: Auto-Suggest Search Process Optimized with Tap-Ahead.

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.

This searches through the keyword server for popular queries 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.

Allowing Ben to narrow down the initial auto-suggestion directly using the blue circle with an arrow offers several key user experience benefits:

• Faster Search
  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” against the keyword sever — a much faster process, which also returned useful search suggestions. Ben only had to hit the product server once, when he had the right search query.
• Less Typing
  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.
• Seamless Flow
  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.
• Flexibility
  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.
• Database Integrity
  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.

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 Contacts application.

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.

Tap-Ahead: From One-Shot to Step-Wise Refinement

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, “Designing Search: UX Strategies for Ecommerce Success” (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.

One-shot refinement is ill suited to this multi-faceted search paradigm, but after long practice, people on the desktop Web have learned to satisfice. 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.

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.

A more usable way of implementing auto-suggest on the mobile device is through step-wise refinement implemented through the Tap-Ahead interface. 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 guides 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.

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:

Figure 5: Anna enters “Harry Connick Jr.” using the traditional one-shot auto-suggest flow.

Figure 6: Ben enters “Harry Connick” using a step-wise tap-ahead refinement design pattern.

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.

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 one tap.

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.

In contrast, Ben receives only single keyword suggestions, so his second set of suggestions includes only a single instance of the keyword “potter”, which successfully covers all 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.

To summarize this comparison, after both Anna and Ben typed in the initial “ha”, Ben was able to finish entering the entire query in only 2 easy key-strokes — 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.

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.

In Conclusion

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:

“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.”

— Matt Brittin, Managing Director, UK & Ireland Operations, Google

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, “Designing Search: UX Strategies for Ecommerce Success” currently available from Wiley and Amazon.com.

References

• Brittin, Matt. “About Think Data.” Think Quarterly, May 15, 2011. Retrieved May 15, 2011.
• Ferrara, John. “Psychic Search: a quick primer on search suggestions.” UX Magazine, November 23 2010. Retrieved May 15, 2011.
• Kamvar, Sepandar D. et.al. “Anticipated query generation and processing in a search engine.” United States Patent # 20050283468, Google. June 22, 2004.
• Nielsen, Jakob. “Mobile Usability.” Alertbox July 20, 2009. Retrieved May 15, 2011.
• Nudelman, Greg. “Anticipated query generation in a search engine with refinement option.” United States Patent Application # 61477606, April 21, 2011.
• Nudelman, Greg. Designing Search: UX Strategies for Ecommerce Success, Wiley & Sons, 2011.
• Nudelman, Greg. “Mobile Search: Turning Limitations into Opportunities.” UXmatters, March 8, 2010. Retrieved May 15, 2011.
• PricewaterhouseCoopers, LLC. “Technology Forecast: Unleashing enterprise mobility.” Center for Technology and Innovation, issue 1, 2011. Retrieved May 15, 2011.

Video games and book readers have shown that it is possible to create interfaces that promote engaging, immersive experiences even on the tiny screens of mobile devices. Many mobile games make the gameplay experience more immersive by removing all navigation and chrome. Typically, a single, specialized drop-down menu provides convenient access to navigation controls that are not directly involved in gameplay.

In this article, I will explore the topic of using a specialized drop-down menu as one of the ways of creating immersive experience in mobile e-commerce search UIs, and I’ll introduce a novel design pattern, the status bar drop-down menu. In contrast to existing mobile search interfaces that devote 24-33% of the screen to navigation, the status bar drop-down menu allows 100% of the screen real estate to be dedicated to search results, while also providing convenient and intuitive access to navigation and filter functions.

This is just one among many ideas and design patterns for creating immersive mobile e-commerce search UIs. I’ve written much more on this subject in my book, “Designing Search: UX Strategies for eCommerce Success” (Wiley 2011).

Today’s Mobile E-Commerce Search Interfaces

Most of today’s mobile e-commerce search interfaces are built on the Web’s random-access navigation model, and devote 24-33% of the screen real estate to navigation and chrome. Although this model is usable, there remains considerable room for improvement. In particular, mobile search interfaces can be made more effective by:

• moving results higher
• displaying more results
• maintaining flow

Navigation is optimized for random access

Most of today’s mobile e-commerce apps seem to be variations of the Amazon iPhone app, which mirrors the web interface random-access navigation model, which makes the major areas of the site (home, shopping cart, etc.) available for one-click navigation from every page using tabs or links.

Searching, the display of search results, and the browsing of searched item detail pages constitute 80-90% of a typical e-commerce app’s traffic. That means a typical app lives and dies by what people find (or fail to find) in the search results.

However, looking at the search screen of the Amazon iPhone app, you would hardly guess that this is the case. The search screen interface carries a full complement of “chrome:” a device bar, an app bar, and a tab bar taking 24% of the screen real estate. For some mainstream apps, it’s common to devote as much as 33% of search screen real estate to app chrome, as in Yelp iPhone app.

Although the random-access interface model is time-tested and fairly intuitive for customers who are new to mobile e-commerce, there remains considerable room for improvement.

Increase engagement by moving results higher

People read from top to bottom, so it seems logical the first thing people see at the top of a search UI should be the search results rather than the app’s chrome. When this is the case, users are likelier to engage with the page to a greater extent. Although the real-world numbers supporting this hypothesis are generally not released by companies for strategic reasons, there is a lot of strong anecdotal evidence that people on the Web look at more results if the search results content is positioned higher on the page. Although it’s not yet proven, it is conceivable that removing some of the chrome and moving search results up higher on the mobile screen would have similar effect of increasing engagement.

Make search interfaces more useful by displaying more results

Displaying more search results improves the experience in two ways. First, it promotes more effective engagement with search results (you can read more about this in my UX Matters article on the subject). Second, it improves the overall relevance of the search results page. Showing more individual search results on the page above the fold increases the chance that the person will find what he is looking for with less scrolling. By removing some of the chrome that’s not required for the task at hand will allow the app to display more results.

Increase satisfaction by maintaining flow

Perhaps the greatest opportunity to improve search interfaces would be to change the entire approach to mobile e-commerce search interfaces to make search an immersive activity that is the core of the entire shopping process. Rather than using the random-access web page as a basis for experience, we can start by optimizing search for maintaining the sense of flow.

When the app maintains the sense of flow, people are likely to use it longer, enjoy it more, and presumably, buy more products and recommend the app to friends. What UI design approaches create opportunities for immersive experiences? In the next section of this article, I’ll start by looking at existing mobile apps that are designed to maintain flow: games and book readers.

Immersion and Flow in Games and Book Readers

Despite the inherent constraints of mobile UX (small screen, fat fingers, etc.) some mobile apps, such as Angry Birds and Amazon Kindle, manage to create truly immersive experiences that satisfy people’s need to escape their overcrowded surroundings.

As of this writing, Angry Birds has been both the top grossing and the number one most downloaded paid game in the Apple App Store. It has over 68,397 user ratings, nearly all of them 5-stars, that it earned by providing a clever, immersive gameplay experience.

Amazon’s Kindle for iPhone book reader is another best-in-class mobile app that is specifically designed to create immersive experiences.

At first glance, Angry Birds and Kindle are quite different; one is a colorful multi-touch game, and the other is a minimalistic book reader. However, if we look beyond the obvious differences dictated by function, we see that both apps use some of the same immersive interface design approaches:

1. Maximize the amount of screen real estate given to immersive content. In Angry Birds and the Kindle app, there are no app bars, tab bars, nor even the space typically devoted to the iPhone device status. This keeps the customer focused on the content and immerse in the activity.
2. Minimize navigation. The only navigation in Angry Birds is the “Pause” button. It’s a semi-transparent button located in left top corner, out of the way. In the Kindle app, the only navigation is the semi-transparent overlay menu that appears when the user taps the middle of the screen. When the user is focused on the content or immersed in the activity, any buttons and navigation tools that do not directly relate to the activity not only take up precious real estate, but are also a source constant distraction. People are forced to consciously avoid the areas of the screen devoted to controls areas such as tabs and buttons, lest they be activated by accident. Any effort thus spent avoiding accidentally activating unwanted navigation detracts from the immersiveness of the activity.
3. Maintain flow. In both apps, accessing the menu pauses the immersive activity, but does not yank the person into a different page. Instead, in both cases there is conscious effort to maintain the illusion of flow and continuity by making the action screen recede behind the transparent overlay. In addition, all of the parts of the screens and menus are completely custom, created specifically to enhance the immersive experience.
4. Remove branding. There are no branding elements in the menus or action screens. Once the user enters the immersive activity, all focus is on the content.

Creating Immersive Mobile E-Commerce Search Using Drop-Down Menus

Wells Fargo recently redesigned their mobile website by stowing all of the navigation away into a single, large menu button, radically departing from the usual random-access navigation model commonly found on the Web. The same pattern can be extended to display search results using the Status Bar Drop-Down Menu pattern. By using the Status Bar Drop-Down Menu, it is possible to remove chrome entirely, utilizing 100% of screen space for showing search results content and making the search interface more immersive.

Mobile web navigation via single drop-down menu

Wells Fargo improved their mobile website based on customer research findings. The new mobile website (designed by Wells Fargo Internet Services Group’s Dirk Gonzales, George Corzine, and Diana Macias), uses a novel approach to presenting site navigation. Instead of taking up screen space with the usual assortment of links or tabs for random-access navigation, the Wells Fargo mobile website sports a single drop-down menu that aggregates all of the mobile website’s navigation in one convenient drop-down panel.

Much like in the Angry Birds app, the menu unrolls downward like a Roman shade and covers up the page content without yanking the customer out of the process flow. This design represents a conscious departure from the traditional random-access information architecture, which would have surfaced an assortment of navigation devices on every page. Instead, Wells Fargo redesigned the page for a smaller mobile screen and fat fingers, optimizing the available real estate to focus on the task at hand.

Reclaiming screen space with the status bar drop-down menu

While definitely a huge step in the direction of creating a more immersive UI, Wells Fargo mobile website is somewhat limited. It is a mobile website for a large financial institution, so it has to display the Wells Fargo logo and masthead, as well as the browser chrome and the iPhone device status bar on the top of the browser. So how can we adopt this single drop-down menu idea to create a more immersive mobile e-commerce search?

One approach might be to use the semi-transparent status bar design pattern shown below.

I described the effectiveness of the semi-transparent status bar in Design Patterns for Mobile Faceted Search: Part 2 on UXmatters. Status bars are very effective because they don’t use up screen space; users can still see the search results behind them. At the same time, status bars are very effective at showing the keyword query and applied filters. They need not be very thick—just tall enough to display a single line of text, while remaining very noticeable because they remain stationary while the rest of the page scrolls under them.

In the original Amazon iPhone app design (shown below), note that the search results screen shows the status bar that displays the “Books” department selected using the filter page on the right.

Extending the status bar slightly to show a shape of a drop-down menu button, and moving all of the navigation and filters to the drop-down menu, creates a powerful new design pattern for immersive search: status bar drop-down menu. By using the status bar drop-down menu, Amazon iPhone app could reclaim 24% of the screen space previously used for app chrome. Thus 100% of the screen real estate could be used to show search results content, while still displaying the applied keywords and filters in the semi-transparent status bar. The resulting interface is shown below. I happen to prefer the yellow transparent status bar color for contrast, but you can use any color other than white (which is the color of background of search results).

Some of the features of this novel pattern include:

1. Unnecessary chrome is removed. No space is given to navigation and branding, so 100% of the real estate is utilized for search results. If the signal is weak or the battery is critical, a warning can be shown on the semi-transparent status bar, removing the need to display the device status bar.
2. Action screen is optimized for immersive experience. Just as is the case for games and book readers, on the search results screen the user’s attention is exclusively on search results, but she has the ability to access other functions via the menu.
3. Menu is optimized for filtering. If the menu is accessed while in search results, the menu also contains faceted search filters (as shown above). In this case, the status bar morphs into the actual filter values and keywords, creating a very effective transition that fits the user’s mental model.
4. Menu provides task-based access. The menu contains the standard Apple Human Interface Guidelines recommended tab bar. These tabs should be familiar to most mobile users. The difference in this pattern is that the tabs are out of the way until the customer needs them, helping to create a more immersive experience. In addition to the tabs, the rest of the menu could be contextual, presenting appropriate options and additional content on the shopping cart, home screen, and any other areas of the app.
5. Overlay menu maintains flow. Like the Angry Birds and Wells Fargo website, the menu overlay rolls down like a Roman shade on top of the search results, maintaining the user’s perception of staying on the same page and being engaged in the current flow.

Conclusion

Search is an activity that is at the center of the mobile e-commerce experience. However, today’s mobile e-commerce search interfaces are still being created using the Web’s random-access model. The status bar drop-down menu design pattern I propose in this article is uniquely suited for utilizing 100% of the screen’s real estate for search results, and is one way of creating more immersive mobile search experiences.

While it’s not right for every e-commerce application, this design pattern can be a powerful tool in a mobile designer’s toolkit. It is one of several key mobile search design patterns I discuss in detail in my book, “Designing Search: UX Strategies for eCommerce Success” (Wiley 2011).