QR codes provide a seamless transition from the physical world to digital spaces or across digital channels. QR codes have a lower interaction cost than typing in a URL, but convenience does not guarantee that users will take action just because a QR code is presented to them.
Uses For QR Codes
- Progressive disclosure. QR codes can provide access to additional information that does not fit in limited spaces or is not relevant to all users. They can be like Learn more links for the physical world. For example, a small sign promoting a local initiative can’t fit much information on it, but more details can be accessed online by scanning a QR code in the corner of the sign. Very few users will take time to scan such codes because they lack interest or the interaction cost is too high, but the code allows the designer to design a simpler sign. The number of scans for this code can reveal meaningful insights about interest in the initiative.
- Transitions across different interaction channels. Most often, these transitions are from the physical to the digital space. For example, a parking meter presents a QR code that allows users to download the application for making a payment. In other cases, QR codes can support seamless transitions across digital devices like smartphones, computers, and TVs. For example, passkeys and other forms of authentication. These codes are for convenience, not awareness, so the number of scans the code receives is far less meaningful than the usability of the workflow the code affords. Use qualitative usability testing to evaluate how well these codes perform.
- Reducing print needs. QR codes provide a way to move printed information to a digital space. This offers cleanliness, convenience, and benefits for the environment. For example, providing a QR code that links to a restaurant menu reduces the spread of germs and the need for printing menus while allowing as many people to access it as desired.
Guidelines for QR-Code Usability
1. Tell Users What a QR Code Does and Where It Came From
Unlike links with labels or raw URLs that contain destination information, QR codes have no information scent by themselves. They tell users nothing about where they lead or what will happen when they are scanned. Designers must provide enough contextual information about the code to convince the user to scan it. Without contextual information, QR codes are not trustworthy or enticing.
Additional contextual information might include a short URL indicating where the code leads, a label, or styling with company branding. However, a logo by itself is not sufficient contextual information.
Many users won’t be willing to read a paragraph to find out what a code does; instead, they will ignore it — especially if it provides only additional information. Information telling users what will happen if they scan the code should be as clear and visually prominent as the code itself.
QR codes are not effective at promoting a website because users may not notice or remember the URL of the website associated with the code. If raising awareness of the website is important, show the URL next to the code. Displaying the URL alongside the code is also important if some users will want to visit the site on devices without cameras, such as laptops.
Other kinds of codes (like Apple’s app-clip codes) require the same level of contextual information, if not more. Users will be less familiar with new kinds of scannable codes than they are with traditional QR codes.
2. Clarify Which Devices and Applications Can Scan Codes (When Necessary)
If QR codes must be scanned within a certain application or by a certain device, this information must also be presented alongside the code. For example, in China, QR codes on some restaurant tables must be scanned with a specific app — such as WeChat or Alipay — while others can be scanned with either. Clearly indicating which applications (or devices) can scan the code prevents confusion.
3. QR Codes Should Lead to Mobile-Friendly Pages
You can assume that users scanning a QR code will visit the associated site on a mobile device. QR codes should lead to mobile-dedicated or responsive sites.
4. Deep-Link QR Codes Directly to Relevant Pages or Actions
Users expect a QR code to link to information directly related to the context of the code rather than to a generic homepage. It's annoying to scan a code that appears to offer a certain action or piece of information and end up on the website's homepage. This is like giving users a link with a high information scent, but not taking them where the link promises to go.
QR codes often afford an easy way to download mobile applications. QR codes used for that purpose should provide direct access to Apple’s App Store or Google’s Play Store.
If the QR code deep-links to something within the application, users who do not already have it downloaded should be immediately prompted to do so (or offered the equivalent information on a mobile-friendly page).
5. Use Direct Links Rather than QR Codes When Displaying and Accessing Information on the Same Mobile Device
Displaying a QR code on a mobile device is most valuable when it is intended to be presented by the user to someone else for scanning (such as to another user or to a scanner at a physical location).
Digital boarding passes or account connection codes within mobile applications are a great example of the types of QR codes that should be displayed on mobile devices. Neither of these codes are intended to be scanned by the users themselves.
However, if the information is intended to be accessed on the same mobile device displaying it, it will be more easily accessed through a direct link than through a QR code because a user won’t be able to easily scan a QR code displayed on their own device. (They may be able to take a screenshot of the QR code and then long-press it in the Photos app, but many users will not know that.)
In cases where direct links are blocked or prohibited, embedded QR codes can provide a workaround for accessing related content. For example, the popular Chinese superapp WeChat does not support links in messages. However, users commonly place QR codes in their posts so that others can access articles and images through a long press.
However, in most cases, a direct link is superior to a QR code on mobile devices. This is why mobile-dedicated sites and mobile applications should contain QR codes only if they are intended to be scanned by other devices (watch out for codes ported over from sites designed primarily for desktop).
6. Do Not Invert QR-Code Colors
QR codes should be presented in light mode with a dark foreground and a light background. Most cameras on updated phones and tablets can scan QR codes with inverted colors, but not all scanning technology used in physical locations can do so. Dark colors absorb more light, creating clearer edges for scanning technologies to detect the code's unique pattern. This can be particularly important when codes are likely to be scanned in extreme lighting conditions, such as in dark rooms or direct sunlight.
7. Use QR Codes for Authentication Between Devices
Allowing devices to collaborate in ways that support each other is fundamental to good omnichannel user experiences. QR codes provide a powerful way for users who are already signed into an account on a mobile device to easily authenticate on another device, such as a smart TV, a computer, or even another smartphone. While this form of authentication presents some risks, it is much more convenient than trying to recall and manually enter a password.
8. Use QR Codes to Provide Additional Details Through Progressive Disclosure
QR codes provide an easy way to hide additional details that are not interesting to most people. They are particularly useful in physical products with a limited display area, such as in advertisements, signage, or product packaging. However, simply making information available does not make it interesting — only a small percentage of people will access information relegated to the digital realm.
Avoid using generic Learn more labels for QR codes. Provide the richest contextual information you can about where the code leads.
9. Ensure that QR Codes Lead to Up-To-Date Information
Users who scan a QR code far in the future should still see relevant information. Once a QR code is put out in the world (especially in physical print), it cannot be taken back. Even if the code is relevant only for current, temporary information, such as a current ad campaign, some users might still scan it after the related information becomes irrelevant. Old codes should redirect to a relevant page that explains that the window has passed but provides easy access to current information related to the original purpose of the code.
10. Use a Short, Memorable URL Rather than a QR Code if Users Have Less than 15 Seconds to Scan It
Users require more time than you might think to scan a QR code. They have to:
- Notice the QR code
- Consider where the code might lead
- Decide to scan it
- Retrieve their phone
- Open the camera
- Aim the camera
- Focus the camera
- Tap the link
Formal approaches to analyzing the time required for each step of this process (such as GOMS) provide varied estimates, but, as a rule of thumb, assume users need at least 15 seconds to scan a QR code. Many users will require even longer if they are undecided about whether it is worthwhile to scan the code, are not very dexterous, have trouble navigating mobile devices, or must dig a phone out of a pocket or purse.
QR codes are not well-suited to roadside billboards that are passed very quickly or in rotating carousels (such as digital signage on large monitors) that show them only for a few seconds at a time. For quick-exposure scenarios, a short, meaningful, memorable URL will perform better because users can hold it in their working memory while deciding to visit the site.
11. Do Not Rely Solely on QR Codes for Frequent Site Visits
QR codes cannot be remembered. Although users rarely memorize URLs, they are still more memorable than QR codes. Relying solely on QR codes for access to a site means that most users will not be able to revisit the site without the code. Many people will have trouble looking through their browsing history to access previously visited links — especially on mobile.
12. Place QR Codes Where Users Are Likely to Look
The Gestalt principle of proximity indicates that people assume things that are near each other are related. It’s tempting to put the QR code off to the side or down in the corner to place it out of the way, but moving it far from where people will look makes it less likely to be noticed and less associated with related content. Codes must be noticed to be scanned.
13. Make Sure QR Codes Are Big Enough
Users must be close enough to QR codes to successfully scan them. While many phone cameras offer zooming capabilities, proximity is still essential. While the official minimum size for a QR code is 1 cm x 1 cm (0.4 inches x 0.4 inches), this size can be too small for reliable scanning. Aim for a minimum size of 2 cm x 2 cm (0.8 inches x 0.8 inches) for best results.
The farther away you expect users to be while scanning the code, the bigger you should make the code. As a rule of thumb, for every 10 cm of distance to the code, add an extra 1 cm to the length and width of the code.
For example, if you expect users to scan from 10 cm away, the code can be 1 cm x 1 cm; if users will likely scan from around 50 cm away, then the code should be at least 5 cm x 5 cm in size. It’s particularly important to make codes big when they will be scanned in dimly lit environments to increase visibility and scannability.
The Dangers of QR Codes and How to Stay Safe
QR codes are convenient but still deserve caution. Individuals with malicious intent have abused QR codes in the following ways:
- Phishing: Codes might lead to an alternative malicious website that resembles what the users anticipated. For example, a code that seems to lead to a restaurant menu might lead to a fake website stealing information.
- Malware: QR codes can serve as gateways for malware, stealthily infiltrating a device with harmful software when scanned.
- Payments: QR codes can be manipulated to trigger unauthorized payments from mobile-payment apps. Scammers achieve this by linking the code to their own accounts, effectively siphoning funds from unsuspecting victims.
- Tracking: The information gleaned from QR code scans can be employed for targeted advertising or even more intrusive forms of surveillance.
- Fake Codes: Malicious QR codes can be strategically placed over legitimate ones in public places, such as restaurants, parking meters, or transportation hubs, opening the door to all manner of harmful actions.
Tips for staying safe with QR codes:
- Scan only trusted sources.
- Preview destinations before committing.
- Avoid suspicious or unexpected codes.
- Look for secure connections (HTTPS, padlock).
- Protect your device with antivirus and antimalware.
- Control automatic actions (like opening links).
- Report suspicious codes to authorities.
As designers, we will do everything we can to protect users. However, it’s also important to recognize that few users interacting with QR codes will actively consider these risks.
Conclusion
While QR codes offer a convenient and seamless transition to mobile workflows, their effectiveness relies on thoughtful design that considers how they will be used. Add brief, clear, contextual information to each QR code. Ensure they lead to mobile-friendly destinations. Maintain awareness of potential security risks. Properly implementing these guidelines can enhance the user experience across a variety of channels.
