In today's article on QR code UX, we will discuss the use of QR codes, what it is for UX, and why they exist in the first place.
QR codes exist almost everywhere these days. Since we had the pandemic, QR codes again gained popularity due to their "noncontact" features, which were commonly used to order and purchase items, among many others.
However, have you ever thought about how they affect the user experience? Have you asked if they add unnecessary steps into a user’s journey or if they simplify it?
There is no doubt that QR codes can bring many benefits to users but are consistently used incorrectly, which can end up as a barrier to user experience.
However, this can be avoided if QR codes are utilized properly. As a UX practitioner, this may be something to consider in the user interface.
In this article, we will also discuss the following in support of why QR code is essential in UX:
A quick QR code history
Let’s step back for a moment. QR (Quick Response) codes were not always used in marketing and advertising. This pattern of squares can be simple or complex, but they store a plethora of information that is unlocked when scanned with the right type of reader. They were originally designed in 1994 and found in manufacturing plants, designed to be read by automated equipment.
While they are still used in this context, the invention of the smartphone brought the QR code to the average consumer. Well, sort of. When QR codes started rising in popularity around 2012, marketers saw an opportunity to bridge print and digital. Instead of simply printing a website address on a piece of collateral, QR codes app were added for ease of use and to provide a portal to more content than could reasonably fit on a piece of paper.
It was the golden ticket. The possibilities were endless. Marketers use QR codes to connect to websites, augmented reality experiences, or loyalty programs. It was genius.
Early QR code issues
The inspiration behind utilizing the QR code app in marketing was the ease of use. A consumer would not have to take the time to type in a URL from a flyer. They could simply scan the code and take the information home in their pockets.
However, in the early days, QR code scanner were difficult for consumers. Knowledge about what they were was not widespread, so designers had to print instructions on their marketing piece that typically went like this: “Download a QR code reader app on your phone and scan the code below.”
That is way too much work to ask someone to get some information from you, especially if they are anywhere near the top of the funnel. It wasn’t easier than simply typing a website address into their browser. Adoption rates and effective rates of QR codes were painfully low. This ugly thing was taking up space and not producing any ROI.
Then the QR code scanner got a competitor, the SnapTag. Instead of downloading special software to read the code, you could snap a photo of it and text it to a shortcode. This solved the major adoption hurdle because everyone had phone text capabilities. However, people still didn’t know what they were, and now you were asking someone intending to passively and anonymously consume your content to give up personal data. They didn’t take off. SpyderLynk, the company behind SnapTag, went under in 2016.
Why do people scan?
People scan to get something, something that will make them feel better. People feel better when they’re entertained or have learned something new and useful. Or, best of all, when they can make or save money.
The Japanese have been using QR codes much longer than the rest of us, which is no surprise since the QR (Quick Response) code was invented there in 1994. Why do today’s Japanese scan the codes? A June 2009 study from NetAsia Research showed that their reasons for scanning include:
- 31.76% use a coupon
- 22.7% apply for a special promotion
- 22.7% have more information on a product
In short, the Japanese scan to save money and to spend money more wisely.
In February 2011, the marketing firm MGH in Baltimore conducted an online survey of 415 mobile or smart phone users. The results indicated that 53 percent of those surveyed scanned QR codes to get a coupon, discount, or deal, and 52 percent scanned for additional information. Thirty-three percent scanned to enter sweepstakes, and 26 percent of scans were to receive more information in the future. Twenty-four percent wanted to watch a video, 23 percent bought something, and another 23 percent of users scanned to interact with online social media service.
QR codes functions
Anyone concerned with user experience using QR codes should be aware of the wide variety of opportunities that the codes can provide. The primary use of QR codes app is to initiate actions by Internet-connected smartphones, including:
- To initiate a telephone call; to place an event into a phone’s calendar; to place information into a phone’s contacts list; to place an email address into your phone’s email application; to download an application to the user’s phone (a major use by phones running the Android operating system); to send/receive a text message; to see/send a social network post.
- To download audio or video about an object, location, or surroundings—particularly useful in tourist areas, art galleries, museums, and for real estate information; to display a map and navigational directions; to view schedules of entertainment and transportation; to see news, stock market, weather, sports, and traffic reports; to view a webcam for real-time visual information.
- To link to a website; to initiate a web search; to provide a menu of options; to download a document, such as an article, letter, newspaper, spreadsheet, menu, manual, e-book, coupon, or entry form; to download photographs or other images.
- To search for, find reviews, and purchase a product; to download a ticket; to enable online or mobile payment for products and services.
How QR codes affect user experience
QR codes seem straightforward enough. The consumer hovers their phone over a QR code and waits for a link or file. However, behind the scenes, it’s not as simple for the team to stick it onto a receipt or sign and check it off as done. You don’t want to wait until a QR code app is live to realize that it’s affiliated with the wrong link, unscannable, or smaller than you expected.
For instance, a customer may scan a QR code expecting to be directed to a company website they’re interested in, only to find that the link never appears or that it only exists for data tracking purposes. While they may have been originally interested in your product, this one-time experience may be enough for them to immediately lose interest, leave a negative review, or look for a competitor. After all, the likelihood of successfully selling to a new customer is low—at 5% to 20%, and a faulty QR code could be enough for them never to look back.
Planning and testing your QR code prevents customer churn and frustration and gets you closer to your bottom line.
The dos in QR code user testing
Do supply context to test participants
With the amount of competing information and noise in the digital space, QR codes need to be accompanied by some explanation of what users can expect upon scanning—and why they should. For example, consider adding the text, “scan to download our app” or “scan for authenticity.”
Data privacy is more of a concern than ever, and users expect transparency about what a QR code offers and how it can benefit them before taking out their smartphones. And with QR code scams becoming more pervasive, users need reassurance that what they’re scanning is legitimate. Scammers have quickly jumped on the QR code bandwagon, encouraged by the ease and low cost of its creation, to target consumers’ personal or banking information.
Reduce any wariness by branding your QR code and showing some ownership, ensuring any linked files or URLs are secure and accurate, and being upfront with your customers about the type of information they can expect to be asked (or not asked).
Organizations have become more creative with their QR code designs, adding a personal spin like logos and color schemes other than the traditional black and white.
Do ask the participants open-ended questions
When testing a QR code, frame open-ended questions around functionality, efficiency, and emotional response.
Consider asking the following questions:
- Why do you think it exists?
- What value are you receiving?
- What do you feel is the convenience that’s being provided to you with this QR code?
- Is a QR code the best choice for this medium?
- Do you feel compelled to take action through this QR code?
Do consider mobile friendliness
QR codes previously required users to download an app to be able to scan. Thankfully, those days are over, and smart device users can now simply open their cameras to get the job done. While that hurdle has been jumped, ensure your content is optimized for all devices. Just as you would ensure a website is clean and functional on mobile as much as on desktop, the same goes for QR codes—and their affiliated files.
You should even factor in differences in device models, whether a user has the latest release or an older version. Users want to feel included, and you may be limiting your audience without realizing it if your QR code design is only compatible with high-quality cameras or high-speed phones. This influences the type of printing ink and medium or surface you opt for, and the larger the physical size of QR code, the more important the quality. As a backup, consider even including a short link or contact information to accompany the code.
Do consider either moderated or unmoderated testing
Both moderated and unmoderated tests work for testing QR codes, but the decision ultimately comes down to your needs and budget. Moderated tests stand out for their interview-like format, where a moderator can chat with a test participant and get real-time feedback. While more costly and time-consuming than unmoderated tests, they provide the opportunity for follow-up questions and extra insight—and may even inspire you to ask a question you may not have originally thought of. They’re especially ideal if you’re testing a prototype with limited functionality, requiring a high level of interaction with the contributor.
Meanwhile, unmoderated tests may be the better choice if you have a fairly straightforward test, and don’t anticipate the test participant getting stuck mid-task. Unmoderated tests offer more flexibility and quick results, with most tests returning to our customers in as little as minutes or hours. Their lower price point also means the chance to acquire feedback from a larger, diverse group of test participants.
For example, you may test a website’s QR code that leads to a mobile app or website listing page. Consider asking (and observing):
- How easy is it to find the code?
- Is the code aesthetically pleasing?
- Does the location make sense?
- How easy is it to scan or did it take a few tries?
- How fast does the link appear? Is it accurate?
Now that you understand testing must-haves, here’s what to avoid.
The dont's in QR code user testing
Don’t use the wrong audience
Keep in mind that some customers are quick to adopt the latest technology while others aren’t. While mocking up a QR code, consider adding accompanying instructions instead of assuming the viewer will know exactly what to do.
You may think targeting a more advanced demographic that regularly uses QR codes to test website or app functionality would make more sense. Or, you may consider widening your audience. If diversification is your goal, you may decide to include those that don’t use scan QR codes in their day-to-day to test the beginner-friendliness of your website or app design.
Don’t ignore size in UX design
A QR code that’s too small isn’t optimal, and neither is too big. Keep size and ratio at the forefront of design, and consider how far away you anticipate the user to be—as well as the intended medium.
It’s recommended to stick to a 10:1 distance-to-size ratio. This means a smart device should scan from 10 times the width of a QR code away. As a general rule of thumb, to ensure proper scanning by a mobile phone, a QR code should be a minimum of two centimeters long and two centimeters wide. Smaller codes are ideal for items like print magazines, menus, flyers, and product packaging.
While there’s no maximum measurement if your QR code can only be scanned from a far distance, whether from signage, displays, or windows, make sure to boost its size. And don’t let a large size compromise quality; the last thing you want is blurry pixels that interfere with proper scanning.
A QR code’s size is more than just how much physical space it takes up. Remember that the denser your QR code, meaning the longer the URL, the lower its readability will be.
Don’t forget about accessibility
Organizations have come up with more and more creative ideas to place QR codes and some which are not so great. For example, seeing a QR code on the back of a car or highway billboard may be eye-catching. However, mid-traffic. This could be a safety hazard. And placing an advertisement at an underground transportation station may seem like a no-brainer to target waiting for commuters—but for an advertisement requiring cell service, this may fall flat. Meanwhile, adding it to a small, uneven surface, like a pen, would likely bring about some technical issues. You get the idea.
What to consider when testing QR codes
While creating a QR code reader may be appealing because it’s becoming more adopted in your field or among competitors, it may be more damaging if they don’t make sense for your organization, product or website or app —for the sake of keeping up. QR codes are only valuable if they speed up the customer journey and shouldn’t overcomplicate the process.
For instance, a QR code doesn’t always need to substitute a solid, old-fashioned link. If a user reads an email on mobile and sees a QR code reader included, they won’t be able to scan it because they’re already using their mobile device. They may find this repetitive at best and at worst, this would be their last email. It’s a similar concept for adding QR codes to websites, unless you have a very specific reason—like taking the user to an app store listing.
However, there are times when a QR code is preferred and even optimal. Whether it’s a landing page that consolidates all social media accounts, digital coupons, a giveaway entry form, or further product information, all of these factors are convenient and can boost brand loyalty and awareness.
When it comes to QR codes if you don’t know your “why,” your customer won’t either. The next innovative feature will always be on the horizon, so if QR codes don’t align with your current needs, you’re better off waiting for one that does. And if they do, you’re now that much closer to getting your customer to go for that scan.
At the end of the day, it is still the designer's job to meet the user part-way. And this means that when QR codes are what the user expects, then utilize them properly. Otherwise, if they are not needed, then don’t force them.
We expect that QR codes and other device-readable graphics are here to stay until something better comes along. Interestingly, there are tools that you can utilize that look like readable graphic user experience interfaces with a device. There are a few proprietary apps like Layar or Uncovr that recognize graphics registered with their services. You can use them to display AR graphics and video over the top of the scanned surface.