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.

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/

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.sketchcampchicago.com/

DESIGNING FOR MOBILE? WE WROTE THE BOOK.

BRING QUESTIONS. RETURN WITH WIREFRAMES.

RULE THE WILD WEST.

DON’T DUMB DOWN. MOBILIZE.

With step-by-step instruction, targeted exercises and individual attention we will show you how to:

• Distill the experience down to essentials… and re-invent your interface with mobile-first approach
• Create the zero search results page that will delight customers and deepen their connection with your brand
• Pick the mobile faceted search pattern that’s right for you
• Create brand and product landing pages that generate 10x the ROI
• Correctly use the powerful More Like This pattern
• Implement your auto-suggest using the patent-pending Tap-Ahead design pattern
• Create immersive experience using lessons from popular mobile games like Angry Birds
• Understand the use-cases and ergonomic differences between tablet and mobile phone and how to create the right UI for each device
• Create mobile forms and mobilized content — everything you need to design your new application
  
• Setup your guerilla mobile user research program on a shoe-string budget.

Create a mobile & tablet experience your customers will brag about. Register today.

WHO SHOULD ATTEND

Anyone designing and building mobile & tablet websites and apps. UX Designers. Interaction Designers. Graphic Designers. Content Managers/Producers. Educators. Programmers. Product Managers. VPs. CEOs.

LOCATION AND SCHEDULE

REGISTRATION RATES

Regular price: $399

Each registration includes a copy of “Designing Search: UX Strategies for eCommerce Success” by Greg Nudelman (Wiley, 2011).

GROUP DISCOUNT

Groups of 3 or more get a 10% discount. Select a group discount rate when registering.

CANCELLATIONS

Payment is required in advance; but it is refundable, less a $100 processing fee, if you notify us at least one week before the workshop. If you fail to attend and do not notify us at least one week in advance, your money will not be refunded. Notify us about cancellations by sending a message to Greg.Nudelman@DesignCaffeine.com.

EVENT SPONSORS

On the desktop Web, ecommerce landing pages get a bum rap—sometimes well deserved. Laden with ads and gimmicks, pushing items with higher markups, and confusing customers with complicated information architectures, these marketing monstrosities typically strongly underperform the search results pages from a simple keyword search. However, passing a death sentence on all landing pages may be premature. On the small screens of mobile devices, well-designed landing pages can provide a much better experience than keyword search results. Currently, few mobile sites use landing pages, which makes them the next big mobile ecommerce opportunity.

Introducing Landing Pages

Landing pages are simply pages a system serves up in place of search results pages—typically as a result of a keyword search query.

Landing pages were originally Web developers’ response to the deep links search engines started delivering, causing customers to land deep within their sites when they clicked an ad or link in an external search engine’s results. Although many different types of landing pages exist, I find it useful to differentiate between the following six types—from the standpoints of both design and information architecture:

• brand—brand name keywords, like Apple
• product—specific product names, like iPhone
• product family—broader keyword queries that cover more than one product, such as Mac
• category—keywords that signify broad category navigation, like laptop
• event—keywords that point to a specific event, such as Super Bowl
• item—keywords that are specific enough to narrow search results down to a single product, like iPhone 4G 32GB

Each type of landing page has its own purpose and design considerations, and you should consider each type on its own merits. In this column, I’ll cover some UX design guidelines for brand landing pages on mobile devices, leaving other types of landing pages for future columns.

Defined loosely, you can create brand landing pages to cover a great diversity of subjects that enjoy instant name recognition:

• major manufacturers—such as Canon and Nike
• music bands—like The Beatles and Madonna
• hero franchises—like Spiderman and Harry Potter
• sports teams—such as the SF Giants and NY Yankees
• cities—including San Francisco and New York
• and many more categories of brands

Brand landing pages typically fulfill one of the following four goals:

• disambiguate—When the same query could mean vastly different things—for example, Canon, which could mean either a Canon Camera or Pachebel’s Canon—a landing page can help customers convey a more precise meaning for their query.
• narrow—Some brand-name keyword queries could cover a lot of different products. A landing page can help customers do some preliminary filtering by category or by suggesting additional search keywords.
• introduce—Sometimes customers are really interested in just browsing the merchandise. A landing page can quickly show a variety of items from a particular brand, providing a brand catalog that shows the breadth of the available inventory and perhaps introducing some new or in-season products.
• entertain—Many people have strong emotional connections to certain brands. Landing pages can provide themed graphics and social media elements—such as discussions, gossip, editorial, or Twitter feeds—to engage customers.

Be ruthless when it comes to introducing landing-page features. Remember, landing pages will almost certainly catch your customers’ attention, but the impression they make depends, in part, on how focused they are—and this is especially true on mobile devices. Determine your primary and secondary goals for a landing page, then choose the best user-interface devices to implement solutions that meet those goals. Consider removing anything that does not directly contribute to satisfying a landing page’s primary goals. Customers’ attention is a limited and precious resource. Use it wisely.

Design Guidelines for Brand Landing Pages on Mobile Devices

“Brand landing pages may well present today’s biggest sleeper opportunity for mobile ecommerce. People love to search by brand names.”

Currently, none of the mobile Web sites I’ve examined use brand landing pages that I can present as examples. This is unfortunate, because according to my research, well-designed landing pages can provide a better experience than a simple set of search results from a keyword query.

In fact, my data indicates that brand landing pages may well present today’s biggest sleeper opportunity for mobile ecommerce. People love to search by brand names. And brand names make up the lion’s share of the top 100 keyword searches on a typical ecommerce site. This is hardly surprising. The companies that build brands invest billions in advertising and promotion to ensure this is the case. Yet, on most mobile sites, simply entering a keyword query often results in a subpar experience. Figure 1 shows search results for the query Dockers on the JC Penny mobile Web site. This represents a typical example of a brand-centered shopping experience on the mobile Web.

Figure 1—Results for Dockers query on JC Penny mobile site

The site sorts the results by Best Match, which, in the case of a basic brand-name query, is pretty much meaningless, because anything Dockers makes is as good a match as any other Dockers product. The top results happen to be a woven belt and two micro-suede slippers of exactly the same model, but in different colors. It is telling that the customer would have to scroll down by two screenfuls to see the most popular Dockers item: the classic khaki pant.

The paginated search results continue over eight more pages, showing, among other items, over 30 different khaki Dockers brand pants JC Penny offers for sale. This is certainly a user experience that leaves a lot to be desired, yet it remains a fairly typical one for mobile ecommerce customers. It is easy to see how a customized Dockers brand landing page that specifically addresses the primary landing-page goal Narrow and the secondary goal Introduce, with a clean, visually appealing navigation scheme, would offer a much better experience and likely result in customers buying more Dockers products, as well as coming back to shop more often.

How should you go about designing such a brand landing page? Here is a set of general guidelines, which cover both things that do not work and things that do. I’ve based these guidelines, in part, on a triangulation of my findings from qualitative usability and field studies, with key performance indicators I have obtained from search metrics I‘ve collected over the past seven years. Unfortunately, I cannot discuss specific designs I’ve tested, because of their confidentiality. However, I can present some general design guidelines. Of course, these guidelines are limited somewhat by their lack of specificity that would tie them to a specific brand and use case. Please keep this in mind, and rather than taking the guidelines I provide here as gospel, use them to guide, inform, and inspire your own creative designs. Above all, test your brand landing page designs thoroughly against keyword search results to determine which perform better, according to your own key performance metrics—such as conversion, item views, time on site, and customer loyalty.

Don’t Make All Brands Sing the Same Tune

“One of the most important guidelines for designing brand landing pages is to individualize them.”

That means using your information architecture, categories, layout, graphics, and the products themselves as tools that let you create a specific experience that is highly customized for the specific brand a customer is interested in.

Does this mean you can’t follow a “write code once, use everywhere” paradigm? Absolutely. I realize this goes against the conventional Web wisdom of building a single Web page template you can customize for different brands, but my data shows that making all brands sing the same tune is about the biggest mistake you can make. Invariably, when companies try this approach, a subpar and confusing experience always results, as shown in Figure 2.

Figure 2—Brands shouldn’t all sing the same tune

On the other hand, simple customizations can go a long way—for example, using elements such as whitespace between items to create an upscale feel on a page for luxury brands. For your Star Wars fans, a brand landing page is where it’s appropriate to use a dark background with star clusters. However, customization should reach deeper than just graphics. You need to customize a brand’s information architecture as well.

Most brands have a natural organizational model that requires a different information architecture—that is what makes them unique. It is silly to try to fit a landing page for the Star Wars brand—which should probably be organized by episodes 1–6 in order of their storylines, not the years in which the movies came out, and includes a massive toys and merchandise section—into the same information architecture as The Beatles landing page—which likely centers around music albums or their #1 hits and might be organized on a historical timeline, covering the band’s body of work.

For Brand Landing Pages, Fewer Are More

“Trying to create a landing page for each brand on your site is a mistake. Instead, … analyze the top 100 brand keywords on your site, realistically assessing what brand keywords are the best candidates for landing pages.”

Because brand landing pages require total customization, fewer are often more effective. Trying to create a landing page for each brand on your site is a mistake. Instead, a much more effective strategy is to analyze the top 100 brand keywords on your site, realistically assessing what brand keywords are the best candidates for landing pages.

Here is an example of how to use metrics to help you determine whether a particular brand (Brand X) is a good candidate for a landing page:

• Brand X has more inventory, and the inventory is more variable than that of other brands.
• People starting a search with the keyword brand X do more search refinements than average before starting to look at item details.
• People starting a search with the keyword brand X view a greater than average number of pages.
• Brand X has a lower conversion rate—as measured by searches per purchase or page views per purchase—for searches starting with the keyword brand X than other brands on the site.

Once you’ve determined which brands might benefit from having custom landing pages, pick one or two brands that are most familiar to your team and create a pilot landing page design, fitting each particular brand perfectly. Test your new design using A/B testing, initially letting only a small percentage of your customers view the landing page. Be sure to collect detailed metrics that let you determine whether the new design works better than a corresponding set of search results. If the landing page works better, you are in luck. Tackle the rest of the promising brands, one at a time, while continuously getting feedback from your customers, in the form of metrics and findings from field studies. It is important not to rush the process. Remember, when it comes to landing pages, fewer are more effective.

Make Your Information Architecture Simple and Easy to Grasp

“Simple, straightforward page organizations are the key to brand landing page success.”

Simple, straightforward page organizations are the key to brand landing page success. Remember, your customers are expecting to see a search results page. When, instead of getting search results, they find themselves on a brand landing page, you have approximately 3–5 seconds to communicate to them how the page is organized and enable them to use it effectively. If you’ve tried to make the page too clever, the effort it would take to understand the page would be too great, and people would become frustrated and leave your site.

Where should you start designing your information architecture? In his books Information Anxiety and Information Anxiety 2, Richard Saul Wurman wrote about LATCH, an acronym for five ways of organizing information. LATCH stands for:

• Location
• Alphabet
• Time
• Category
• Hierarchy

Wurman had this to say in his IA Summit 2010 Keynote:

“I’ve always said … I thought there was a huge number of ways of organizing things. I was surprised that I could only come up with five. Let’s say there [are] no more than ten. I don’t care if there [are] five or six or seven, but, if after 20 some years, nobody has come up with a sixth, I feel safe to say there [are] no more than ten, and there [are] probably not more than five. And it works, because you can decide when you start a project how you get into it.”—Richard Saul Wurman

In designing your brand landing pages, LATCH is certainly a great place to start. Remember, the same information architecture will not fit every single brand. For example, for clothing brands, it would make sense to separate accessories like belts from articles of clothing such as pants and shirts—an example of a hierarchical organization. Doing this simple categorization would do wonders in improving the seemingly random results of the Dockers query on the JC Penny mobile site in Figure 1. However, the same organization would not work well for a Harry Potter brand. Instead, an information architecture based on simple categories like Books, Movies, Toys, and More might be a better fit.

Regardless of which information architecture you choose, it is important to make sure your page design communicates it effectively. Your customers are expecting to see search results, so naturally, they’ll expect the page that appears to be a long list of products with facet filters. Because of their strong existing mental model, you’ll be fighting an uphill battle in communicating your page design. If your landing page is organized differently from search results, make sure the page’s layout and visual design communicate this difference clearly. The sooner customers understand that they are looking at a special kind of page—a brand landing page, not a search results page—the faster they can start navigating the new information architecture and succeed in their primary goals.

Avoid Tag Clouds

“The bottom line is that many people do not understand tag clouds, regardless of how they are organized on a landing page, and have trouble operating them effectively on mobile devices for several reasons.”

Tag clouds are aggregations of keywords that have different font weights and sizes—usually based on popularity or inventory. I’ve already discussed the popularity versus inventory, or demand versus supply, disambiguation strategy in a previous UXmatters column, “Cameras, Music, and Mattresses: Designing Query Disambiguation Solutions for the Real World,” so I won’t repeat that information here.

Based on my research, the bottom line is that many people do not understand tag clouds, regardless of how they are organized on a landing page, and have trouble operating them effectively on mobile devices for several reasons.

First, a giant collection of keywords is simply not that useful for narrowing down a query. Second, many people do not understand the order of keywords in a tag cloud or the logic behind the font weights and sizes. This finding was a bit counterintuitive for me, because I am a fan of tag clouds and use them to show the breadth of topics I cover in my DesignCaffeine blog. Unfortunately, as Figure 3 shows, tag clouds leave a lot to be desired when narrowing down the results for a query, within the context of brand landing pages on mobile devices.

Figure 3—Mockup of a category tag cloud for the Dockers query on JC Penny

Tag clouds introduce additional issues on mobile devices. Because of the narrow screens on most mobile devices, links in tag clouds often wrap and every link runs into the next, making it difficult to separate one link from another when glancing at a tag cloud, while being bounced around in a bus or metro. As I described in a previous column on UXmatters, “Designing Mobile Search: Turning Limitations into Opportunities,” people have trouble tapping links that are placed too close together. The phenomenon known as the fat-finger problem causes people to accidentally tap the wrong link in a tag cloud. This finding underscores the importance of testing. Remember, you are not your customer. It does not matter that you understand how something works on your site. It matters only that customers understand it and find it effective.

Use Popular Keyword Suggestions

“People find suggestions for popular search keywords very useful, particularly for query disambiguation….”

In contrast to tag clouds, people find suggestions for popular search keywords very useful, particularly for query disambiguation, as I described in my column “Cameras, Music, and Mattresses: Designing Query Disambiguation Solutions for the Real World.” Search user interfaces on mobile devices often use auto-suggest to display suggestions for search keywords, as shown in Figure 4.

Figure 4—Amazon iPhone app’s suggestions for the query Harry Potter

Because of a mobile device’s limited screen real estate, auto-suggest is the most effective design solution. However, if an auto-suggest capability is not available, you can provide suggestions for popular keyword as links. These are most effective when they appear just below the search box.

Be Careful with Best Bets

“Although Best Bets is a standard, well-developed UX design pattern …, designers often use this pattern incorrectly on landing pages.”

Although Best Bets is a standard, well-developed UX design pattern that Peter Morville describes in his book Search Patterns, designers often use this pattern incorrectly on landing pages. While certain categories of Best Bets such as New Arrivals and On Sale usually work well, companies too often create nebulous categories like Featured Items instead. Unfortunately, customers’ perception of a Featured Items category is often that it is pushing a collection of items that are overstocked, badly made, or overpriced—and thus, that a Featured Items category is essentially a large advertisement that it is best to ignore, in favor of browsing other items that might offer better features and value.

Even if people do browse Featured Items, nothing can change the fact that a typical mobile landing page can display only a very small number of items, usually considerably fewer than the number of items that appear in keyword search results. The likelihood that a smaller number of random Featured Items on a landing page would outperform the larger number of items in search results that are optimized for scrolling is actually quite low. As shown in Figure 5, a random grab bag of Featured Items in a gallery view is almost always inferior to the same collection of items presented as search results.

Figure 5—A gallery page underperforms keyword search results

The smaller number of items appearing in a gallery-page format almost always underperforms a similar collection of items in a search-results format. There are two reasons for this: First, it takes time and effort for the brain to adjust to an unfamiliar gallery layout. Second, on a mobile device, a gallery presents even less information and fewer items than keyword search results do.

Instead of hoping to hit it right with a random sampling of items, help people to navigate quickly and efficiently to the items they want by using the 2D More Like This pattern I described in my column “More Like This: A Design Pattern.” This pattern is very effective, and you can easily adapt it for use on mobile devices.

Let Your Interns Design Landing Pages

“Look for people who are passionate about the brands for which you are designing landing pages. They can help you design brand landing pages that perform extremely well.”

Look for people who are passionate about the brands for which you are designing landing pages. They can help you design brand landing pages that perform extremely well. One excellent strategy is to use customer input that you obtain during a participatory design exercise to elucidate important brand attributes and get ideas about how to express them using elements on a landing page.

Another effective strategy is to get ideas from mobile sites put together by the brands themselves. For example, Figure 6 shows the excellent home page on the mobile Web site for the Gap brand.

Figure 6—Gap mobile Web site’s home page

Keep in mind that, for many young brands, your design team is unlikely to understand the brand and relate to it in the same way younger folks would. That means they are less likely to be able to create an inspired page design that would resonate with younger customers who are passionate about the brand.

In such cases, design interns may provide a perfect solution. They are also more likely to create inspired designs that skirt the very edges of the official design guidelines, while keeping the important elements of your site intact. Most important, interns are inexpensive to hire, are often very creative, and have everything to prove, ensuring you’ll get the best landing page design. Try splitting your interns into teams and letting each of the teams own one of the brand landing pages. Have them design and develop the individual landing pages, then set up a sort of friendly competition to learn which team’s page outperforms or outsells the keyword search results by the greatest amount.

Parting Words

“Each brand is unique, so each brand landing page must be a unique reflection of a brand. Not every design strategy is appropriate or works for every brand.”

In this column, I have presented some strategies for improving the user experience of your brand landing pages. Each brand is unique, so each brand landing page must be a unique reflection of a brand. Not every design strategy is appropriate or works for every brand. So, remember to use these design strategies only as guidelines. They are not absolutes, but merely starting points for exploration and experimentation. Good design often means coloring outside the lines. Set a primary goal for each brand landing page and stick to it, trying multiple creative solutions, if necessary. Creating custom landing pages is certainly one area where experimentation and testing trumps the application of any general guidelines.

In Part I of “Design Patterns for Mobile Faceted Search,” I looked at the challenges and opportunities of mobile faceted search. To address the well-known challenge of limited screen real estate on mobile devices, I covered the Four Corners, Modal Overlay, Watermark, and Full-Page Refinement Options design patterns, which maximize the real estate available for search results on a mobile device. This month’s column covers strategies for making people more aware of the filtering options that are available to them, as well as methods of improving transitions between the various states a user encounters in a search user interface.

Teaser Mobile Design Pattern

Teasers are nothing new on mobile phones. Most mobile user interfaces implement this pattern in some manner or another. Consider, for example, the Yelp iPhone application, shown in Figure 1.

Figure 1—Teaser design pattern in Yelp’s mobile app

Yelp displays five complete search results, plus a teaser at the bottom of the page that shows a partial view of the next result set. The Teaser design pattern is very useful in showing that there are more search results below the fold. As I mentioned in a previous column, “Choosing the Right Search Results Page Layout: Make the Most of Your Width,” my usability testing has shown that Amazon is an absolute master of this pattern. Regardless of a screen’s resolution, they always display partial product descriptions and pictures just above the fold. Showing part of what is at the fold is a very effective means of inviting visitors to scroll down and see more content.

Recently, when Microsoft came out with Windows 7 Mobile, they extended the Teaser pattern well beyond just showing the availability of search results below the fold. In Figure 2, an excellent video from Luke Wroblewski’s blog entry “Windows Phone: User Interface Teases & Transitions” effectively demonstrates this concept. As you can see, Windows 7 Mobile shows there is more content available on the left, right, above, and below what’s currently visible on the screen.

Figure 2—Teasers and transitions in Windows 7 Mobile (Compiled by Luke Wroblewski)

In its implementation of the Teaser pattern, Windows 7 Mobile uses lots of very obvious cues, including screen titles that are cut off in midword, partially visible screen widgets, image fragments, and abundant use of animated transitions.

A teaser is a specific application of the more general design principle: fixing imperfection, in which a design immediately engages people by having them fix something that is intentionally not quite right with a user interface or object. In the process of fixing an imperfection, people learn the user interface’s interaction model. Studies have shown that this process of fixing imperfection, or seeking symmetry, is very natural to humans and quite immersive, even to the point of alleviating anxiety and pain in burn trauma.

The problem some may see with the Windows 7 Mobile design is that people cannot win at this particular game of fixing imperfection. There is absolutely no way to fix the user interface to simultaneously show all of a title, widget, or image that exceeds the size of the screen. It’s kind of like a blanket that is intentionally made too small: if you cover your legs, your chest is exposed; pull the blanket up to your chin and your legs get cold. As UX designers, we often seek a kind of minimalistic, authentic beauty and symmetry in our designs, so some designers might find this kind of user interface profoundly disturbing. However, one cannot argue against the effectiveness of this design approach.

The wireframe shown in Figure 3 takes advantage of the Teaser design pattern to show a partial view of some faceted search filters on the right and, thus, expand the available virtual screen real estate.

Figure 3—Teaser design pattern facilitates the discovery of faceted search filters

The search results are on the left in this wireframe; filters, on the right. Following a basic convention of mobile user interfaces, buttons on the right let people drill down deeper into the application’s information architecture (IA) space, while tapping buttons on the left moves them closer to the top of the IA or to the home page. In this example of what Microsoft calls panoramic applications, the mobile device acts as a sort of viewfinder that displays only a small part of a much larger virtual space.

The Teaser design pattern very effectively facilitates discovery through its use of partially exposed screen elements—in my example, faceted search results filters. This pattern also enables people to make rapid transitions from looking at search results to narrowing down the search results, so it is highly suitable for applications in which it is advantageous for people to discover a set of filters quickly and use them often.

Basic/Advanced Parallel Architecture Pattern

Another good design pattern for efficient discovery and use of filters is the Basic/Advanced Parallel Architecture design pattern, depicted in Figure 4. This design pattern is especially effective in applications that offer a fixed set of filters—for instance, booking air travel.

Figure 4—Basic/Advanced Parallel Architecture design pattern

The idea behind the Basic/Advanced Parallel Architecture design pattern is that there are two modes of interacting with filters: basic and advanced. The basic mode lets customers easily engage with your application and dramatically shortens their learning curve. However, people who want an advanced mode of filtering can easily obtain this functionality—in the example shown in Figure 4, by returning to the filter page and tapping the Advanced Search tab.

The parallel architecture part of this pattern comes in when a customer needs to adjust the filter values. For customers who started their query from the Basic Search tab, tapping Back returns them to that tab. For customers who started from the Advanced Search tab, tapping Back returns them to that tab, where they can adjust the expanded set of filters. While the relationships between these three contexts—Basic Search, Advanced Search, and Search Results—are a bit difficult to explain, they offer a very natural interaction model that most people have found very intuitive to use during testing.

The Basic/Advanced Parallel Architecture design pattern offers the added advantage of a flatter architecture. Instead of an advanced mode that requires people to go deeper into an application’s IA, the advanced flow sits in parallel with the basic flow, so both are equally accessible with a single tap.

It is important to note that, in both cases, the search results page has a persistent status bar across the top of the screen, displaying an entire search query, plus any applied filters. Recall that a persistent status bar was one of the features I described in Part I of “Design Patterns for Mobile Faceted Search.”

One application that successfully implements the Basic/Advanced Parallel Architecture design pattern is the Thirsty Pocket iPhone app, shown in Figure 5.

Figure 5—Basic/Advanced Parallel Architecture design pattern in Thirsty Pocket

Notice that, instead of labeling this feature Advanced, Thirsty Pocket uses the label More Search Options. In Thirsty Pocket, the purpose of the advanced search page is to provide options for searching outside the device’s current GPS location, as well as narrowing a search by price. Most people would not use the location filter, and the price filter might, in fact, severely limit the effectiveness of search by too frequently narrowing a search to zero search results. The price filter is a great example of the “ejector seat lever” Alan Cooper so eloquently describes in his book About Face 3. Therefore, this price filter is best hidden on a separate page. In the Thirsty Pocket app, the label More Search Options describes the purpose of the advanced search page perfectly and has the added bonus of being less intimidating.

In another variation on the Basic/Advanced Parallel Architecture design pattern, instead of Basic Search and Advanced Search tabs, Thirsty Pocket presents two buttons on its home page: a prominent Search Near Me button for basic search and a de-emphasized More Search Options button for advanced search options. Tapping More Search Options lets you set filters, then tap Advanced Search to see the filtered search results. Nevertheless, the Thirsty Pocket user interface still preserves the essential features of this pattern, because tapping Modify Search on the search results page takes you back to the appropriate search page—basic or advanced—depending on how you initiated a search.

In Conclusion

A lot of people have asked me about these design patterns and the best ways to use them. Thank you all for your questions. Unfortunately, the answer would go well beyond the scope of even a two-part article. The best recommendation I can make is that you learn as many design patterns as possible; understand why these patterns have emerged, what customer and business goals they support, and what limitations they have. Then, once you understand the unique goals of your own customers and business leaders, you can either choose the right design pattern or combination of patterns or develop your own design patterns that fit the task at hand. Our understanding of user interfaces is still evolving—and for mobile design, still in its infancy. Mobile design patterns and paradigms are just beginning to emerge, but they represent the beginning of something magnificent.

References

Bucolo, Sam et al. “The Design of a Tangible Interaction Device to Alleviate Anxiety and Pain in Pediatric Burns Patients.” CHI ’06 Extended Abstracts on Human Factors in Computing Systems, Montreal, Quebec, Canada, April 22–27, 2006.

Cooper, Alan, Robert Reimann, and David Cronin. About Face 3: The Essentials of Interaction Design. 3rd ed. Indianapolis, IN: John Wiley & Sons, Inc., 2007.

Nudelman, Greg. “Design Caffeine for Search and Browse UI.” Information Architecture Summit 2010, Phoenix, Arizona, April 9–11, 2010. Retrieved April 30, 2010.

—— “Design Patterns for Mobile Faceted Search.” UXmatters, March 8, 2010. Retrieved April 30, 2010.

—— “Experience Design for a Viral Mobile Community.” Net Squared Conference, San Jose, CA, May 2009. Retrieved April 30, 2010.

—— “Choosing the Right Search Results Page Layout: Make the Most of Your Width.” UXmatters, March 9, 2009. Retrieved April 30, 2010.

Wroblewski, Luke. “Windows Phone: User Interface Teases & Transitions.” LukeW Ideation + Design, February 17, 2010. Retrieved April 30, 2010.