Ultimate Guide to Designing NFC Mobile Apps You Won’t be Ashamed Of


Telecoms and mobile phone manufacturers have long been promising us mass-market mobile Near Filed Communication (NFC). With a brand-new Galaxy Nexus S, the first NFC-enabled smart phone on the market, the consumer mobile Near Field Communication has suddenly become our new reality.

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.

Greg Nudelman

P.S. Like what you are reading? Go VIP.

4 UX Books (opens in a new window)
Join 6,000+ subscribers getting exclusive content, Q&As, book giveaways, and more. No spam. Just design that works.