I use the diagram initially to figure out where the design is positioned currently across each horizontal line and pinpoint one or more points that define the experience on a particular channel.  Then I use a combination of empathy, understanding of technology and team’s vision to shift the implementation of the design along the desired axis.

The Cross Channel UX Elements framework is a practical tool you can use to create “Magic Moments” of flow and delight for your customers across the different channels in a more deliberate fashion, rather than arriving at great designs only through occasional happenstance.

The framework consists of 10 UX design elements, arranged in complimentary pairs. Each pair exists as a tension of complimentary left- and right- brained elements, with the logical, deliberate thought-form on the left, and it’s right-brained compliment that relies on intuition and integration on the right side of the diagram.

Here is a brief description of each elemental pair:

• Typing vs. Multi-Touch/Sensors. How much button-pushing does one have to do in the particular stage of the workflow? Does the workflow allow users to bypass buttons in favor of using natural motions or by gathering data from the on-board sensors?
• User-Inputs vs. Environmental Inputs. How much of the data input is driven by a deliberate action from a user, and how much gathered from the environment using on-board sensors or through natural interactions that “dissolve in behavior”?
• Small Screen vs.  Large Screen. Device ergonomics (for which screen size is often a good proxy) drive the mode of interaction, common gestures and movements, as well as mode of use.
• Personal vs. Social. Is the data personal or is it shared? If shared, then with whom? Can the burden of input, decision or selection be shifted to the user’s social network?
• Task Switching vs. Flow. How does this experience feel on a macro-level? Is the experience one of immersion and flow, or is it fragmented? What opportunities exist for empowering the user through making the task switching clean and simple?

The pairs are arranged in order, from the Micro-level on the top (e.g. inputs) to Macro-level UX design elements that deal with the overall task control and flow arranged on the bottom. Each “Magic Moment” can be thought of as falling somewhere along the line in the continuum of each of the 5 pairs, emphasizing one or more elements.

Rather than being an exhaustive catalog of each experience, the Cross Channel UX Elements framework is meant to start a conversation about how we can model unique opportunities to engage customers across different channels, and create more “Magic Moments” for our customers. If you’d like to experience how this process works for mobile and tablet, be sure to sign up for my Virtual Seminar: Cross-Channel Design: Magic Mobile Moments.  Hope to see you there!

Expert Strategy ™ Series Virtual Seminar Presentation

1 hour 30 minutes, Presentation + Q&A. Wednesday, May 16th, 10 am PDT.

• Create “Magic Moments” in your own mobile and tablet app.
• Learn the new Cross Channel UX Design framework.
• Take advantage of all sensors and capabilities of the mobile platform

2 Minute Preview

Why do some million-dollar apps fail, while simple apps like Instagram make billions?

The answer is “Magic Moments”

And on May 16th, the author of best-selling book Designing Search: UX Strategies for eCommerce Success will show you how to create “Magic Moments” in your own Mobile and Tablet apps.

Mobile calls for a thinking differently. A unique opportunity to redesign our workflows to trim the fat, while at the same time taking advantage of the myriad sensors and unique mobile capabilities.

When mobile or tablet design is executed well, device feels like the extension of our bodies. Because interfaces respond even before we consciously give them a command. This kind of design “dissolves in behavior”. We feel empowered, as though we are wearing the Iron Man suit of cybernetic exoskeleton armor, or a Batman’s utility belt.

This is the “Magic Moment”. A burst of delight that turns your customer into raving fans. Fans that can’t help but insist their friends try your app. Right Now.

Greg will show you how to take full advantage of the new mobile and tablet capabilities to create these “Magic Moments” in your own Mobile and Tablet apps, using the avant-garde Cross Channel UX Design framework (recently presented at the Information Architecture Summit 2012 in New Orleans).

Using the Cross Channel UX Design framework, Greg will teach you how to:

Fully utilize the incredible assortment of mobile and tablet sensors

• Minimize inputs by taking advantage of environmental inputs
• Turn the lemons of low bandwidth and fat fingers into delightful lemonade using patent-pending Tap-Ahead suggestions interface
• Cleverly combine history with new environmental sensors like NFC (Near Field Communication)

Induce and retain a state of flow

• Balance task switching with designing for re-engagement and best-bets
• Retain flow using in-context UI elements like popovers, real-time and local results
• Answer the question of using responsive design vs. custom mobile and tablet flows

Put it all together to design digital magic

• Create immersive experiences using lessons from games like Angry Birds and N.O.V.A.
• Use content as navigation and create multi-touch gestures appropriate for device size and ergonomics
• Use an emerging “Virtual Personal Assistant” UX pattern

Learn practical tools and concepts you need create “Magic Moments” in your mobile and tablet apps. All without leaving the comfort of your own office.

This seminar is not for beginners. However, if you are designing iPhone, iPad or Android apps and looking for mastery of the subject, while making the most out of the amazing opportunities these new platform offer, you can’t afford to miss this unique virtual seminar.

“Thank you for making me realize that I understand/utilize 20% of my iPhone’s capabilities and 2% of mobile technology.”
– Riley Gerszewski, (@Rileygersh) on Twitter

“Greg’s Designing for Mobile workshop at Marquette University was the best hands-on workshop I’ve attended this year… Greg loaded us up with useful tools and design patterns sharing the knowledge he gained designing for firms like eBay, Groupon, and Wells Fargo. He really knows his stuff. I highly recommend his workshop.”
– Daria Kempka, Web and Interactive Producer, Marquette University

Mobile EssentialsSeries Virtual Seminar Presentation

You’ll Learn to:

• Provide value. With every scan.
• Connect 10x more customers with your social media offerings.
• Use a single QR code to download any app: iPhone, Android or BlackBerry.

You heard the rap before.
“Juice ain’t worth the squeeze”
“QR codes don’t convert”
“Nobody can figure how to scan them”

Truth is, unless bedbugs are somehow involved, people love using their mobile phone to engage with environment around them. And QR codes (short for Quick Response) are a wonderful tool in a mobile UX toolkit – and given the right motivation, people will gladly scan them and engage with your content.

But don’t take my word for it.

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.

So how do you effectively engage with these millions of Olympic Caliber Shoppers?

Real, practical advice that tells you exactly how to do that is the subject of my virtual seminar.

Using loads of examples, UX patterns and anti-patterns, you will learn:

1. What is a QR Code? – all the tools you need to make effective decisions about which to size and error correction level to choose.
2. What’s up with Decorations? – how to create great-looking QR code ads without spending a fortune.
3. How do I get one? – best places to get QR codes, from free servers to high-end dedicated ad campaigns.
4. Providing Content – enhance the product experience with relevant information and create a “longing for the sea”.
5. Driving Social Engagement – Use QR Codes to connect 10x more customers with your social media offerings.
6. Personal Connections – why LinkedIn page is a poor choice and how to create personal landing pages that drive real value.
7. Driving App Downloads – use a single QR code to download any app, iPhone, Android or BlackBerry.
8. Connecting Physical and Virtual – take advantage of amazing opportunities to create magical mobile experiences.
9. QR Code Bloopers & Antipatterns – mistakes to avoid and best practices.
10. Interactive Exercises – applying what you learned to three different real-world problems.

All without leaving the comfort of your own office.

If you are considering using QR codes as part of your customer engagement strategy, or want to improve adoption and make the most of your current QR code investment, this virtual seminar is for you.

“The QR Codes that Convert webinar has already paid for itself. I was able to tweak a client’s QR campaign today, using what I learned, and it started increasing their customer engagement right away. I would recommend this webinar to anyone using QR codes in their marketing campaigns or anyone advising clients who use QR Codes.”
– Marty Diamond, Diamond Website Conversion

Last time we discussed how to drive social traffic to your business. This week, I will show the best practices for using QR Codes for personal and social.

I had a QR code on my business card for years, and studied how to engage people after the initial QR Code scan, and how to drive tangible value. Here I will reveal everything I learned about using QR Codes for personal and social connection, including using special formats like MECARD, and the secrets of linking to Twitter, LinkedIn, blog posts and custom landing pages.

BTW, if you are serious about getting the most value out of your QR Code campaign, be sure to check out the recording of my virtual seminar, QR Codes That Convert: Mobile UX Strategies for Success.

The Networking Dance

To my knowledge, a popular conference SXSW has been the first major conference to put barcodes on conference badges to identify the individual attendees. Recently I saw the same QR Code device being used at the Intel computing Summit in New Orleans.  This trend is of course part of the larger movement to extend the physical connection into the virtual space during and after the initial encounter.

From what I observed, after the novelty has worn off to some extend, people tend to connect as they usually do and network in the same way they always did. However, if a certain level of connection has been made, people tend to scan each other’s bar codes, in the same way the business cards are currently exchanged, that is usually right before the end of the interaction. As in the business card exchange, one person’s action of scanning the barcode is usually reciprocated by the other, so unspoken physical information exchange “rules” translate nicely to the virtual connection space.

One way the QR Codes differ from the typical business cards exchange, is that by scanning the QR Code, one can get all sorts of meta-information about the person they just encountered including Twitter, Facebook, LinkedIn profile and recommendations, and their personal or professional website.

This makes it very easy to connect and follow-up virtually almost immediately after the physical encounter. However, I have personally not noticed any difference in the speed of the follow-up before or after the barcode.  This would anecdotally suggest that

while QR Code may increase the convenience of following up, convenience alone is not enough impetus for following up.  As with any QR Code scan, additional tangible value is needed to create action.

How do you provide this value?

I give you a couple of ideas at the end of this article. But first, let’s talk more about the impact of convenience.

The World of Convenience is not Enough

I bet you knew that QR Codes can be used to encode URLs. But did you also know that they can be used to encode phone numbers, SMS messages, text and a wide variety of other special-purpose formats?

One of these formats, MECARD speed up data entry and offering the ultimate in convenience. Unfortunately, convenience is not enough to warrant the most important thing we are after: the engagement after the scan.

MECARD

One of the most potentially useful formats for our current discussion is MECARD.  MECARD allows you to encode standard business card information along with its meta-data, so that recipient device can understand information such as first and last name, phone number, cell number, email, homepage and the like.

I had the experience of having a MECARD QR Code on the back of my business card for several years. When scanned with a RedLaser or similar scanner on Android and iOS, the information that is revealed is the Contact record that is ready to be added to your Contacts application on the phone. This is a huge improvement over having to type in all of the information all over again.  However, despite the convenience, I noticed no difference in the QR code driving increased engagement after the encounter.

The value one gets from scanning the MECARD QR Code is limited to convenience only. And while convenience may be enough to warrant a scan, convenience alone is not enough to engage your conversation partner.

A word of caution: I found that while many readers will scan MECARD successfully, certain types of readers and “dumber” devices such as older Blackberry phones will not scan the code correctly or will not know what to do with a MECARD tag, displaying it as XML text. Not the best experience.

Another disadvantage to using MECARD QR Code is that it makes tracking problematic, so you have no idea how many people actually scanned your QR Code. (I discussed the importance of tracking QR Code scans previously) Internet browsers do not understand the MECARD tag, so you can’t for example encode a URL that redirects to a MECARD. MECARD has to be the primary payload of the QR Code itself, to be read and interpreted by the QR Code reader, not the browser. Keep that in mind if you do decide to use the MECARD.

CardMunch

Speaking of convenience, LinkedIn just came out with a fantastic mobile app called CardMunch. If you don’t already use it, download it now.  Just like MECARD, CardMunch allows you to translate any business card into a Contacts record and a LinkedIn connection.

All you have to do is take a picture of the business card with your phone. The CardMunch app does the rest. CardMunch sends the image to the server where it is decoded using a combination of OCR (Optical Character Recognition) and Mechanical Turk, having multiple people physically reading and transcribing the writing on the card. The service is surprisingly excellent. And free. This is another argument against using MECARD or other special formats and instead use a URL to drive real value with every scan of your QR Code.

When we meet someone in person, we are looking to make a connection, to engage. Simply exchanging information, no matter how convenient you make it, will not drive that engagement after the meeting. You have to provide value – whether with a URL, phone number, follow-up activity or sending a message chiseled on a stone pyramid. The format does not matter, value does. Scanning the QR Code just happens to be more convenient than sending a carrier pigeon (with the cost of real estate for cages and pigeon feed being what it is now a days.)

Value, One Person at a Time

How does one provide value with a QR code that is meant to be scanned during or right after a personal encounter?

That’s a very personal question and your unique value proposition must be a very important part of your personal QR Code strategy.  Below are a couple of ideas.

Twitter

Put a QR Code and a short link URL on the back of your card that points to Twitter. This is usually the easiest way to engage after the initial contact. If you send out useful bits of data, keep up with trends or have unique micro blogging offerings, especially if you plan to do some coverage of the topic related to the event. Don’t bother with this if your Twitter stream consists mostly of pictures of your breakfast, unless you are trying to drive value for the members of the Association of Food Journalists.

The advantage of using Twitter is that you can completely customize the page the person will see with just a few tweets and make it very relevant to the event where you me the person. Thus you can use full disclosure and tell people exactly where the QR Code will take them on or near the QR Code itself. This makes it more likely that they will scan and possibly engage with you, provided the personal encounter itself was interesting.

LinkedIn

LinkedIn is the staple of the professional associations, so this would appear to be an obvious choice to point people to your profile there. However, it is of limited value to the person doing the scan beyond simply connecting (as we discussed above). CardMunch app will do this for you without bothering with the scan.  LinkedIn is a given – a baseline. Thus I personally don’t recommend it.

Your Blog’s Homepage

This is a good option, if you can ensure that the information displayed there is relevant to the person doing the scan. If you update your blog often, and have interesting things to say that’s a pretty good option. In this case, definitely write down where the QR code will go and what to expect.

Article, Blog Post or Whitepaper

If you have a favorite article or something of note that might be useful to the event attendees, a good option is to point them to a specific article or blog post on your site. In this case, you may want to say something more general next to the QR Code and change where the shortcut tracking URL within the QR Code is pointing, depending on the event you are attending. Anecdotal evidence points to most QR codes being scanned either immediately or within a few days after the event, so don’t worry about changing the destination URL to another article a week later (to fit a different event for example).

This strategy also has the advantage of being able to tell the people you meet in person where the QR Code will take them, and that it will only work for a limited time, thus introducing a sense of urgency – always a good thing when it comes to driving positive action.

One disadvantage is that it is not clear what action should occur after the person scans the QR Code and reads the post. What do you want them to do? Subscribe to your blog? Offer you a job? The call to action should be clear. However, unless you are using a special custom blog template, that may also be hard to implement on the individual blog post, which brings us to my next recommendation:

Custom Landing Page

This is the Cadillac of QR Code experiences, and my personal favorite approach.  First, you create a virtual URL, such as http://www.designCaffeine.com/qr/

And the QR Code that points to that URL:

Then you redirect the URL as needed to an event-specific landing page.

Tracking
Custom landing page approach has several important advantages. Because the only “reasonable” way to get to that virtual redirect URL is to scan the QR Code, this method makes it easy to track the scans using Google Analytics or similar tool.

Custom Call to Action
With this method, you create a custom page with a clear call to action and supplementary materials relevant to the event. More importantly, you retain the ability to change the page as needed to fit the timeline and needs of a particular event. For example, I gave a presentation recently at the IA Summit 2012 in New Orleans on designing cross-channel mobile and tablet experiences.  Before the presentation, I might point people to a special landing page that talks more about the presentation, such as time and place: http://www.designcaffeine.com/workshops/ia-summit-march-21-25-2012-new-orleans-louisiana/

With a call to action to add to their calendar.

After the presentation, I might change the call to action to point them to the page that allows the download of my slides as a PDF.  And maybe add a sign-up feature that requires people to register for my newsletter before they can obtain the slides. Thus the content on the page and call to action will evolve along with your timeline – allowing you complete freedom to customize the QR Code scanner’s experience.

A/B Testing
Not only are you able to customize the page, you may also consider using a plugin that allows http://www.designCaffeine.com/qr/ page to send the reader to two different versions of the same page. This in turn allows you to test quantitatively, which page design converts better.

Future-Proof Experiences

One of the biggest criticisms of QR Codes is that they are not future proof.

I agree.

I consider QR Codes a band-aid solution at best. However, at the moment, it is still the easiest and most reliable way to connect on-line world with the off-line, physical world (otherwise known as “physical reality”).

Once the RFID chips cross the threshold of a couple of cents or less per chip, we can expect a much greater proliferation of the NFC (Near Field Communication) technology to replace the QR Codes as a more convenient means of connecting physical with virtual. Yes, even on business cards and conference badges.  More technologies, perhaps even high-resolution real-time image recognition (or “computer vision”) will then follow in rapid succession, and our connectivity strategies will adopt accordingly.

However, no matter the connection technology, if there is one thing that I learned is that the world of convenience is not enough.

One thing that will remain unchanging even as connection technologies evolve, is the central concept of delivering value.  Whether you do it through a QR Code, carrier pigeon, or by chiseling a URL on a stone tablet, you have to give the person you meet some value in order for them to engage with your on-line offerings.

The strategies I discussed here stood the test of time, and will be just as applicable for the NFC technologies as they are for the QR Codes.

Instead I conduct RITE (Rapid Iterative Testing and Evaluation) studies: the only methodology that I’ve actually experienced in the real life yielding more delightful, usable and successful mobile products in less time.

What is the difference between the usability test and a RITE study you might ask?

Usability tests, as they are popularly run, involve testing by 8-10 participants of a fairly elaborate prototype using a set of pre-defined tasks in a laboratory setting. There are minimal prototype changes during the study and at the end of the study a usability report is produced outlining issues and recommendations.

In contrast, a RITE study I typically run is conducted using 9-12 participants in 3-4 rounds, with 3 people per round. The critical difference is that in between the rounds I allow time update the prototype to fix the issues discovered during the previous day’s testing. To enable that, I usually employ the simplest possible mobile prototype for the job, usually paper or linked HTML.

Those practitioners that love usability tests might object that in essence, a RITE study is just like 3-4 smaller usability tests strung together, and that the differences between the two are just semantics.

I disagree.

Usability tests come to us from the processes of developing digital products and software for mature platforms of Internet and Desktop. On the desktop, people tend to perform predefined, complex tasks, while sitting down, using keyboard and the mouse.

Mobile is fundamentally different. It involves moving around, interacting with the environment, taking in a whole bunch of environmental inputs like GPS, Voice and Camera feed, all the while multi-tasking and operating the device one handed, using a fat meat-pointer.

Doesn’t it make sense that mobile teams should update the existing user-centered methodologies to meet the demands of this new platform?

Let me explain what I mean, in the following 3 points, comparing mobile RITE studies and usability tests (as they are typically conducted).

#1: Mobile usability tests encourage project managers to treat user-testing as something to check-off, not lead the design process.

In my experience, I find that most companies typically view mobile usability tests as an optional, expensive undertaking. There is a good reason for this, as mobile usability tests run by a third party contractor cost anywhere from 10-20K per round (plus facility fees, participant fees, prototype creation costs, etc.) For that reason,

Organizations usually end up waiting until the design is fairly well baked to conduct usability tests.

This in turn encourages project managers (and other team members) to misunderstand the whole purpose of the exercise and to treat usability tests as some sort of an elaborate QA process.

Testing late in the game is not effective in helping the team bring about a better product. The entire point of the usability testing is to improve the design. Instead, it is conducted too late in the process to affect the very thing it is supposed to fix.

While mobile design itself is usually fairly simple, most issues come up are more fundamental, deeper and wider in scope than typical web project. For example, information architecture could be confusing. Or flows too long and badly sequenced. Too many form fields or confusing form interactions. Too much text. Confusing screen names. Flows that try to accomplish too many tasks. Flows that try to mimic web. Ignoring one-handed meat-pointer software ergonomics. Jack-in-the-boxiness. …and these are just some of the mobile-specific issues that can befuddle potential customers.

Unfortunately, by the time the usability test is conducted, many of these deeper fundamental issues are already “baked into” the design and can’t be changed.

This is the fundamental draw-back of conducting mobile usability tests and one of the main reasons I don’t do them in the middle of the design process.

Instead, I conduct light-weight Agile RITE studies.

In contrast to a typical usability test, a RITE study is conducted as early as possible as part of the design process, and is not a test. Even the name is purposefully different: test vs. study.  Study implies something will be learned as part of the process so that the mobile digital product is given a chance to evolve to a better state, even if it involves changing more fundamental aspects such as IA and flow sequences.

#2: Mobile usability test prototypes are often too rigid for demands of mobile.

Typical mobile usability findings report is presented up the food-chain and quoted many times over, encouraging elaborate video-taping contraptions and creation of the costly hi-fi prototype, because the design is fairly baked at that point and “in case an executive might want to stop by” so the test needs to “look good”. Furthermore, many usability test moderators tend to demand this. There is general erroneous industry perception that the prototype needs to match closely the transitions and visual design of the final product. Fixing an elaborate Flash or worse yet, hand-coded dynamic prototype becomes costly and complicated, and the main purpose of the user-centered process is irretrievably lost.

In contrast to a typical usability test

My mobile RITE prototypes are suitably rough, reflecting the overall degree of completion of the product.

I rarely build Flash or hand-coded prototypes, because the cost/benefit ratio is just too high. Instead, I find that paper, specifically post-it notes or flashcards (more on our testing methodology in my Free Webinar: Agile Mobile Design – Why we don’t do mobile usability tests (and neither should you)) allows me and the client team to model most interactions effectively. Simple paper prototypes can even be used to effectively model more complex mobile and tablet design elements like transitions (see Storyboarding iPad Transitions) Most importantly, simpler paper or linked-HTML prototypes allow designers to quickly and inexpensively explore multiple design approaches, while dispensing with elaborate camera equipment and other gadgets.

At the same time, study participants can be comfortable brainstorming valuable ideas, which can actually be incorporated in the prototype because the design is not yet finalized. Rough prototype also allows many changes to the prototype on the fly, sometimes immediately after the first participant is done, and before the next evaluator has a chance to see the prototype.

#3: Mobile usability tests are focused on reports, not solutions.

Usability tests (as they are typically run) produce reports.  These reports contain vivid descriptions of usability issues and best practices designed to help designers work around the issues.

The problem is that mobile is just too young to have much in the case of solid best practices. Instead, the best that can be said after a given mobile usability test is that “Facebook mobile app does it this way” or “Amazon mobile website does it that way”. Thus

Mobile usability test recommendations are typically perceived internally within the organization as adversarial, because everyone has their favorite app and no one can agree which pet design pattern should be followed.

These types of recommendations are also not helpful in creating design solutions, because there are likely to be many mobile designs that can work better than the recycled standard fare for your specific customer and situation at hand.  In a rapidly evolving mobile industry, designers need space to explore creative solutions.

And the best way to do that, is to

Focus on getting rapid feedback on what works.

A RITE study provides such a creative space and rapid feedback because it is focused on a solution. For this reason, I rarely video-tape my studies or provide elaborate reports. At most, I show what the design change progression during the study looked like, and insights we, as a team, gained along the way to arrive at the present improved design.

Instead of the usability report, the product of the RITE study is the improved design solution. Thus,

As a valuable fringe benefit, RITE helps build effective mobile design teams.

Because RITE methodology is focused on solutions, it tends to be less adversarial.
Have a cool idea? Let’s try it. Right Now.

RITE approach is inherently Agile, making it a perfect fit for the Agile/SCRUM projects.

When I work with the client’s team, I request that at least 80% of the entire project team is present 80% of the time during the RITE study, so there is little need for a report. The entire team is there — driving and experiencing the design process together, in real time. Most importantly, during our typical RITE study, everyone on the team is focused on coming up with creative solutions to touch mobile problems.

Not on producing reports.

Usability studies and elaborate reports have their place. But the middle of a mobile design process is not one of them.

When it comes to mobile usability testing, don’t keep doing what you’ve always done for the Internet and Desktop software products. Instead, do the RITE thing.

Need a little help?

Need to implement Agile or RITE testing methodology in your organization? Or simply want to try RITE out on your next mobile project?  I might be able to help. Set up your free 30-minute consultation here. 

How to make Agile work for your Mobile Design project

Why we don’t do mobile usability tests (and neither should you)

Mobile Design Essentials ™ Series Virtual Seminar Presentation

I recently had dinner with one of my heroes and fellow Rosenfeld Media workshop leaders, Steve Krug. We had a long conversation about how to make mobile usability testing work for Agile mobile design projects. This webinar is the result.

Learn the essential techniques that will make Agile mobile design work for you:

• How to replace boring kick-off meeting with a fun Design Workshop
• How to do fast, effective mobile RITE testing with PostIt Notes
• Get the complete case study with wireframes

Mobile is the perfect platform to engage with your customers through social media.

Here is why:

1. You have a chance to capture your customers attention right at the moment of engagement and in the context of browsing your ad or opening the wrapper on your product. This allows people to immediately share their experience (good or bad) with their friends on the social media.
2. Most people already use mobile phone as the primary device to access social networks, making engaging with your brand simply an extension of their existing mobile pattern of use.
3. Most social networks already have excellent mobile websites and apps on iPhone and Android platforms. And social media sites are constantly striving to improve the mobile experience, making them some of the most robust and reliable ways to engage your customers through mobile devices.
4. It’s easy to create social media pages and keep them updated. This means that in most cases, you have to do very little infrastructure work to create engaging mobile social experiences. The social networks already done all of the heavy lifting, all you have to do is provide the content.

So how do you engage your customers and enhance the (hopefully) pleasant memory of use of product or viewing of an ad by en equally easy and fun social media engagement process? In the 7 Ways to Whip Up Viral Value Through QR Codes: #6 Connect Through Social Networks, part 1 (A.K.A. Printed Buttons Must Die) we mentioned that printed buttons like the one below simply do not work:

Instead, I recommend using a QR Code to help connect your customers with your social media offerings. Here are four tips that will help you make the most of the QR Code technology:

Tip #4: Connect with only a single social network in each campaign.

This may seem obvious, but for many companies, it’s far from that. Just consider all of these silly “buttons” used by a Williams Sonoma ad:

We discussed why these “buttons” is a bad idea in Part1 of this article, Printed Buttons Must Die. Simply converting these 4 buttons into 4 little QR codes is an equally bad idea. Instead,

figure out which social network produces the desired result and which one is most appropriate for this campaign, based on the value proposition (more on this below).

Tip #3: Provide a URL anyway.

Even though most people will scan the QR code, occasionally, some will want to by-pass it for some reason (camera is broken, crinkled paper, low light conditions, etc.) and engage directly.

Allow customers to do that by showing something like this: twitter.com/designcaffeine

Of course, the URL you show will almost never be the URL that the QR code will go to, because QR code URL must go through some kind of analytics engine as we discussed in 3 Secrets for a Successful QR Code Campaign.

Tip #2: Brand the QR code. Make it Fun.

Printed QR codes don’t need to be uniform black squares. They also don’t need to be social network brand logos, as the silly printed “buttons” in the Williams Sonoma ads.

Social networks are doing just fine. They don’t need you to advertise for them on your own printed materials.

Instead, take the time to beautify your code to make it more fun and match your campaign. Up to 30% of the area may be obscured by a logo or picture appropriate to your print content. In addition, QR code itself can be done in various colors and other embellishments, like this amazing QR art work from Mashable:

Tip #1: Make Value Obvious.

The most important thing you can do to ensure a satisfying experience for your customers is to provide as much value as possible up-front. Ask yourself: why would anyone engage with your company through social media? The kind of value you provide will also determine the best social media channel for your campaign.

The value does not always have to be monetary (though it helps).

To use some examples from the Part 1 of the article:

• Williams Sonoma could provide recipes and links to new products when customers follow them on Twitter, and instructional videos, such as cooking, knife sharpening, house cleaning, etc. on YouTube.
• Simply Lite chocolate bar company could use Twitter to provide ideas for healthy lifestyle and tips for type II diabetes sugar management, along with a healthy dose of support and encouragement.
• Hotzie spa could showcase testimonials from previous customers, special discounts and spa service packages if customers follow them on Facebook.

Whatever value you choose to showcase, make sure it is appropriate and obvious for the customers you are trying to attract into your network.

At DesignCaffeine, Inc. we give you our excellent 29-page Killer Special Report on Search UI Best Practices as well as regular access to special features and workshop discounts when you sign up for our Tablet & Mobile Design Secrets newsletter. You can how we do it here.

Which social network should you choose?

Which is the best social network? This will depend solely on what you are trying to do and the kind of value you are providing.

At the moment of this writing, Facebook, Twitter and YouTube seem to be some of the best choices for companies to engage their customers.

However, no channel is perfect, and

The up and comer Google Plus may be the juggernaut in a gorilla suit that will dramatically change the landscape in the next few years.

Google recently allowed companies to create Google+ presence. If Google makes it easier to build and maintain HTML pages without the need for the silly F*$%edup Bullsh*t Markup Language (otherwise known as FBML) and make the profile pages simple to customize and maintain (the way WordPress does for example) they further drive market network adoption.

However, the key will be rethinking the consumer experience as a mobile-first integration with the Android devices, unified inbox dashboard and other services I wrote about in One Circle to Rule Them All: Winning the Battle for Social Network Domination.

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.