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.

Date & Time: Sunday, 25 March 10:45am — 11:30am
Location: Room 2
Track: 2 – Exploring and Thinking

http://2012.iasummit.org/schedule/cross_channel_search.html

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

Pleasing every human is difficult. Different demographics have different preferences and we must design interfaces that work well for all of them. Designing an interface that is also easily crawlable for robotspandas – another animal entirely – will often present seemingly impossibly different considerations.

This session will introduce cutting-edge human interfaces from Greg Nudelman’s Designing Search: UX Strategies for eCommerce Success – and then consider the same interface from the view of the panda. The speakers will also explore the considerations in satisfying both audiences in each of these designs. When there is a conflict, they will present some alternatives and compromises, such as novel faceted search controls and super-powered breadcrumbs with information scent that both humans and pandas are sure to love.

• Speakers:
  Greg Nudelman, CTO, Design Caffeine Inc.
  Jaimie Sirovich, CTO, SEO Egghead Inc.

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.

Enterprise Search Summit website ⇒

Enter agile mobile paper prototyping. In this intensive, hands-on session, participants will learn how to use a pack of post-it notes to successfully simulate a mobile device and re-create and study key interactions, transitions and touch-screen control ergonomics cheaply, quickly and accurately. Participants will walk away with a set of completed paper-prototype screens of their next app, ready for testing. A limited number of Post-it notes packs will be provided, on a first-come basis.

http://www.drawcamp.net/