A few years back, QR codes, 2-dimensional “quick response” barcodes traditionally made up of black squares placed on a white square grid, were touted as the next big thing: you could use them to quickly scan a URL in a magazine or on a poster and read more information about the product. However, they never caught on and they have pretty much fallen into oblivion. If I asked you to scan a QR code on your phone today, chances are that you wouldn’t be able to.

A QR code for the Chinese company Juewei advertising its snacks on a subway car. The QR code takes users to a page in WeChat where they can purchase the products.

That is, in the US. In China QR codes are ubiquitous, partly due to the highly popular WeChat service, which had 700 million users in April 2016. In our diary study conducted in China with WeChat users, many participants mentioned this feature and assigned a central role to it in their mental model of WeChat. Our study participants also reported using the shake gesture in WeChat to interact with various TV shows and businesses, or to get more information about a song.

Why are these interactions widespread in China, yet they never caught on in the US? And what is the benefit that they provide to UX?

Adoption

How do you make an interaction technique adopted by a wide variety of people? Three conditions need to be satisfied:

  1. Usefulness: Foremost, the technique has to provide some sort of benefit. Nobody cares about useless innovations.
  2. Ease of use: The technique has to be easy to use — that is, it should be learnable and have low interaction cost once it’s been learned. If people have to jump many hurdles to take advantage of it, then most will give up.
  3. Discoverability: Last but not least, the technology has to be discoverable by a wide population — there are many useful, usable inventions that have fallen under oblivion simply because the word hasn’t spread fast enough.

QR codes and the shake gesture have met all these three criteria in China, but not in the US. In the US, to scan a QR code encountered on the street, in a store, or in a magazine, you’d need a QR-code scanner — that is, you’d need to install a special application dedicated to this operation. Just taking a picture of the code with the phone’s camera won’t work. Thus, QR codes fall the ease-of-use test in the US: to use them, people will have to do some initial work to find an app and download it, and, later on, they will have to remember what this app is to use it for more scanning.

In contrast, in China, WeChat’s mobile application has had an embedded QR-code scanner since 2012, so the millions of WeChat users don’t need to install any special app to have access to this functionality — they can simply take advantage of the preinstalled WeChat.

But that is not enough — WeChat has many other features that are hardly discoverable and rarely used by its customers. QR-code scanning was, however, quickly adopted in WeChat because, early on, it was associated with two popular features, both still widely used today:

  • Adding a new contact: People could become WeChat contacts by scanning each other’s codes. Because WeChat did not support searching for people by name, scanning a personal code saved both input effort and user memory, as users did not need to type anything, nor did they need to remember (or get access to) a user ID or a phone number. An added benefit was that two persons could become WeChat contacts without knowing each other’s phone numbers.
People can scan someone else’s QR code to add that person to their contact lists.
  • Group chat: Creating a group meant generating an associated QR code, and joining it was simply a matter of scanning the code. This new feature simplified a fairly complex process; because it provided a substantial ease-of-use benefit over the status quo, it made users willing to try it. Here’s a quote from one of our diary-study participants “I needed to start a WeChat group for work, so I created a group and added the people who are already my friends on WeChat. Then I emailed the [group] QR code to other people who should be included. I got more people joining the group in the afternoon.”

While users adopted the QR codes in WeChat because they shortened complicated processes, the adoption of the shake gesture took a different path. The shake gesture was available early on in WeChat for connecting with others who were shaking the phone at the same time, and a later plugin supported photo transfer from desktop to phone; however, these uses were not that common. What made WeChat’s shake gesture popular and relatively widespread was a tangible financial motivation. Users shaking the phones at specified moments during the most popular TV show of the year, New Year’s Spring Festival Gala 2014, were offered red envelopes (traditional monetary gifts). As a result of this promotion, the company saw hundreds of millions of shakes per minute and it’s probably safe to say that all Chinese smartphone owners had at least heard of the gesture, if not directly tried it. This campaign made the shake gesture well known to a large number of users, and afterwards Tencent could take advantage of its familiarity in other contexts and for other functionalities.

Last but not least, WeChat already enjoyed a wide audience when the QR-code scanning and the shake gesture became popular — many millions of users had already installed its app. Had its audience been smaller, it’s less likely that QR code scanning or shaking will have entered the public conscience so quickly.

In contrast, none of the big mobile players in the US have made any of their central functionality reliant on QR-code reading or on shaking; in fact neither iOS nor Android support QR code scanning in the proprietary apps (such as Camera) that get shipped with the phone. Shake is used in applications such as Mail for iOS to implement undo or Google Maps to send feedback, but many users never discover it, since it is not part of the core functionality of these apps. The other route for increasing motivation — that of offering some direct compensation (the equivalent of red envelopes in China) to those users who perform the gesture — is perhaps less culturally realistic or appealing for American users.

Mediation Between Online and Offline Worlds

In our Chinese diary study we found that, while people did use shake and QR codes fairly regularly, the principal function of these interactions was, however, not earning money or responding to advertisements; instead, the users’ goal was communication between the online and offline worlds: omnichannel UX made simple. (The term “O2O” — “online to offline” — is often used in the Chinese technology press.)

QR codes act as a convenient offline index into the online world: taking a picture of a QR code could expediently take users to the right webpage without having to type in any query (something that’s particularly arduous on mobile devices). You could for instance scan a company’s QR code to subscribe to its newsletter or to access its WeChat official-account page and interact with it. As one user put it, “I used an app which recommended their company’s official account. I don’t want to remember the name of the official account and search – there might be a lot of fake ones. So I just made a screenshot of their QR code and scanned it in WeChat.” Or, if you’ve just seen a movie and you want your WeChat friends to know about it, you could simply scan the QR code present on the movie poster, access the page corresponding to that code, and then share it in WeChat. It’s easier than typing the movie name (or a movie URL) in WeChat, and it offers more information to the readers.

Not only can QR codes provide quick access to websites and a replacement for URL typing, but they can also add information to physical objects. Many physical objects bear QR codes, and people can easily scan them to augment their interaction with these objects. One study participant reported, “I got a gift from a friend and didn’t know how to use it. So I just scanned the QR code to read the instructions (and awkwardly also saw the price).

There are countless examples of physical objects enriched by a QR code — they range from eggs in the refrigerator, to classified ads on a physical bulletin board, to postcards that embed pictures and audio on a piece of paper by simply affixing a QR code to it.

Scanning the QR code on this claw crane helps people buy the token needed for the machine.
Karaoke parlor: people can scan the QR code and pick the song they want to sing next.

 

Instructions for attaching a video or an image to a QR code on a paper postcard.

Not only do QR codes serve as an index into the online world, but they can also act as validations for processes that happened only virtually. For instance, a QR code can be a proof of purchase for a ticket that was bought online and never printed. (The Western world is most familiar with this use of passcodes: we’re using electronic bar codes to board airplanes or to get access to movie theaters and museums.)

The shake gesture also allows people to link the physical world to the online one and augment it, but usually the context — the timing or the location — of the interaction determines how the gesture is interpreted by WeChat. For example, people can shake their phones in the proximity of a store and WeChat will give them coupons or discounts about that store, or will provide information that is relevant to customers (e.g., parking, current sales). Participants in an event or watchers of a TV program may shake phones to vote in a poll, to express an opinion, or even to get a turn to ask a question. Shaking the phone while a song is being played will help the listener identify the song. People (collocated or not) could shake their phones simultaneously to exchange contact information and befriend each other on WeChat — this method makes it easy for complete strangers to connect if they wish to meet new people.

Payments

Payments are a major source of revenue for WeChat and are based on QR codes. Both WeChat Pay and AliPay, the two major online payment services in China, support the generation of a QR code for getting paid or sending money to a random person or business. Thus, in a store, people can scan the merchant’s QR code and pay it automatically using WeChat. Vendors can also scan a customer’s WeChat generated QR code to get paid. Small business with no credit card support can still enable cash-free transactions through QR codes. During our diary study, about a third of WeChat users’ activities were payments; the majority of these payments (more than half) were to offline businesses, followed payments to WeChat contacts. Many of our diary participants commented on the convenience of using QR codes for payment:

“I just wanted to grab some vegetables to cook for dinner in the market. I don’t want to take my wallet out of my backpack but luckily they accept WeChat! It’s much more convenient to take out my phone in my pocket.”

“All I need to do is scan the code, no more changes and coins! I can also get my expense recorded in real time so that I can track my money.”

WeChat Pay allows users to pay vendors or get paid.

 

Although to a lesser extent, QR codes are also used for online payment on the desktop or on other sites (similarly to checking out with PayPal in the US): people use an app such as WeChat or AliPay to scan a uniquely generated QR code presented by the site at checkout. Once users scan the QR code, their money is sent by WeChat to the site, and the payment is completed.

Communication Between Multiple Devices

QR codes are also used to authenticate WeChat users on a different device. The assumption is that users will be always logged in to WeChat on their smartphone. When they want to log in to WeChat on a different device (e.g., tablet or desktop), instead of typing their credentials, they could use WeChat’s phone app to scan a QR code presented on the second device. WeChat severs would then detect which mobile account was used to scan the QR code, and log in the user to that account. (We’ve seen this technique being used recently in the US as well — for instance, Dropbox users can log in on a desktop by scanning an image with the Dropbox mobile app.)

Users who attempt to log in to WeChat on a desktop computer are shown a QR code; when the code is scanned with the WeChat mobile app, the user is automatically logged in.

 

Dropbox: To log in on the desktop without typing their passwords, users scan this image displayed on the monitor using the Dropbox mobile app.

So standard have QR codes become that some webpages use them instead of links, especially when they point to WeChat official accounts (which are mini webpages that live inside WeChat). This use has probably emerged because, until iOS 9, it was fairly difficult to provide a deep link to a page inside an app. An added advantage is that QR codes support crossdevice handoff better than links — for example, if code is presented on a tablet or desktop screen, it can be scanned on a phone and the interaction can be continued on that device. (However, even some pages inside WeChat use QR codes instead of links, which seems to make little sense unless you assume that the user will want to open those links on a different phone — perhaps that of a friend.)

A long press on the QR code will allow the user to extract it and go to the WeChat subscription account for a show.

Usability Issues

In spite of QR codes being widely used, the WeChat implementation is still not perfect. For example, in our study, participants experienced difficulty extracting a QR code sent through chat. In order to do so, they had to tap the picture and view it on a separate page, then long press it. But many participants attempted the long press in the conversation-thread view and were disappointed when they could not extract the QR code there.

A QR code sent through chat cannot be scanned in the conversation view (left). Users must tap on it to open it in a separate view (right) and then they can scan the code by performing a long press on the picture.

Another more general problem with QR codes is that they traditionally have no information scent and need additional verbiage nearby to explain to the user what they stand for. However, nowadays QR codes can be customized and made to look almost like an icon, which provides an opportunity of adding some meaning to an otherwise nonsensical image.

Artistic QR codes add some information scent to an image devoid of meaning. Left: QR code for a Youtube video about New York; Right: A QR code for a personal blog includes a Chinese character standing for happiness and fortune.

When QR codes replace links, not only do they need extra screen space for communicating their meaning, but they also take more space than a regular link or a button. Especially on mobile, where screen real estate is particularly precious, too many QR codes on a page can degrade the user experience significantly.

How Does UX Benefit?

Although QR-code scanning and shake obviously brought Tencent a lot of revenue and substantially impacted the growth of its business into the behemoth that it is today, they also improved the overall user experience. These interaction techniques are examples of successful adoption of innovative technologies. Innovation often means going against the status quo, and it usually works only if users get the chance to use the new technology often (so they can learn it) and if the learning curve drops fast, so people can achieve optimal performance quickly.

Once a new interaction technique becomes common knowledge, designers can start using it in other contexts, and everybody benefits, users included. In China, QR codes are not the appanage of WeChat — other applications and services also use them. For example, in 2013, Alibaba created a QR-code based promotion for its 11.11 Shopping Festival (a big shopping day in China, similar to the Black Friday and Cyber Monday in the US), which enabled its customers to add physical products seen in stores to a virtual shopping cart to complete the process online.

Similarly, because the shake gesture enjoys a reasonable amount of familiarity in China, other apps can capitalize on it and take advantage of it to implement desired functionality. For example, beyond WeChat, the shake gesture is used in other apps for functions such as:

  • Report a bug (Zhihu; this ressembles the use of shake to send feedback in Google Maps)
  • Recover closed tabs (Smartisan mobile operating system)
  • Restore location if you lost your place in a long thread (Moke)
  • Stop the current song and jump to the next (Kugou)
  • Update the list of suggested apps (Yingyongbao)

Both code scanning and shake are two new interactions that enrich the omnichannel user experience: they make it easier for people combine the offline and the online worlds by speeding up tedious input. The shake gesture has to fight a lack of signifiers, since, barring an ad or specific instructions,nothing in the environment prompts people to shake, but as people become more and more familiar with it, they will be more likely to remember to use it even in the absence of external cues. As a result, this gesture also has the potential to improve the single-channel UX, because mobile designers can start to free up precious screen real estate by delegating a feature to an invisible, yet familiar gesture. There are many apps that use these interactions in the US, yet, because most users are not familiar with them, these apps cannot take full advantage of their UX benefits and must implement redundancy (e.g., shake functionality doubled in the visible UI) or relegate these interactions to noncore functionality to make sure that users are able to use the app. Once these interactions will become standard, there will be no need for redundancy.

Things may change as Western companies try to emulate the success of WeChat and learn from its example. Already, Facebook Messenger has introduced features reminiscent of WeChat (e.g., personal codes for users, the ability to pay friends, the ability to chat with merchants). We still have to see whether in the future we will be able to scan a Facebook code to pay a merchant, or shake our phone and get to chat with the sales representative in a physical store. It seems that Facebook’s task is more daunting in a world where we already have many other interaction alternatives (we could pay using Apple Pay, PayPal, or even an ubiquitously accepted credit card, so it’s unclear why we’d choose Facebook Messenger over all these other alternatives). But if Facebook does win and we get to use shake and QR codes on our phones every day, the user experience will also win, as we’ll be able to speed up the communication among different interaction channels and experience smoother transitions between all these different domains.