The UX of QR codes and scanning stuff with our phones
For better or worse, QR codes exist. You might have even seen or used one today, but have you ever thought about how they affect user experience? Do they add unnecessary steps into a user’s journey or simplify it?
QR codes can bring many benefits to users but are consistently used wrongly and usually end up acting as a barrier to user experience. I argue that as (it turns out) a collector of QR codes, with careful use, it could be time to embrace them finally. Or at least be prepared to use their new and improved successor, whenever that time comes.
QR what?
QR codes (quick response codes) are those funny looking blocks of squares you can scan on your phone. Usually, they send you to a website, open and do something on an app or use as a ticket or boarding pass. They can also contain data beyond text strings and commands. They’re one of a group of 2D barcodes called Matrix codes. Other recognisably distinct but similar patterns are Aztec Codes and Data Matrix codes. The differences are quite boring but important. *pushes glasses back up nose*
QR codes were first invented right back in 1994 by an automotive company in Japan for commercial tracking of car parts. When it comes to use in consumer-facing communications, they’ve had a bit of a chequered (no pun intended) history. Certainly here in the west, have never really, until now perhaps, made it into mainstream use. I think because easy access to a QR Code reader isn’t something many people have had until recently.
I think we’re at a tipping point when enough of the general public know what to do with one, even if they don’t have the technology to do it. After a few false starts over the years (see Google Goggles), I’d thank the native iPhone camera app for removing that barrier for a huge chunk of smartphone owners.
Before
See code > think what app to use (QR Reader/Google Goggles etc.) > unlock phone > close current app > find QR reader > open app > point at QR code > hit scan > get result (link/text/image)
Now
See code > quick-open camera app > point at QR code > get notification with link
The down-side to how the iPhone interprets QR codes is that it’s parsing is quite limited. In my experience, it’s limited to recognising any string of digits as a phone number, plain text latitude/longitude reference as just that (more on which later), and for everything else a URL — which isn’t always helpful.
Sometimes QR codes can also be good, if not great!
I’m not here to argue that we need to slap a QR code on everything or remove them from where they already are. I only want them to be used intentionally and in a way that they are useful, so they improve a user’s experience with a product or brand.
They are robust.
Erase or cover over a part of one it may still be readable. Useful if you’re trying to get across some information to users somewhere the printed code might be physically stressed. For example, a physically remote location, like panels along a walking route updated very infrequently or somewhere exposed to the elements.
If part of a page, product packaging or screen displaying a QR code is damaged, it’s still potentially readable and accurate for the end-user.
Sometimes, careful covering or reduction of sections of a QR code is a style brand decision — for example, to place a logo in the middle of a QR code.
QR codes do a recognisable job.
Despite not using them frequently in every day, I bet that many people encountering a QR code know it’s something digital. They’re recognisable, and they indicate a call to action and the affordance (in product design terms) is clear.
Those who have casually used QR codes before will potentially understand what a QR code does in the context its found in. This is useful.
As far back as 2011, Tesco Homeplus installed virtual supermarket shelves in a Korean metro station. QR codes under pictures of supermarket shelves add the desired products to the users’ digital shopping basket.
Users have learned that QR codes in proximity to a product or brand will activate some interactive element of it. On a shelf (virtual or not) or products will probably add it to a basket or at least show you more information. Similarly, a QR code on an ad for the next blockbuster movie will probably take you to the film trailer or maybe its website. These things have value to a customer, especially if spotted while out and about.
They’re compact but lose nothing if scaled up
Not to brag, but I once saw a giant QR code the side of a local government building in Düsseldorf. It looked weird but was eminently readable (sadly the website it links to is desktop only, that breaks one of my rules). Luckily for you, I snapped a picture so you can share in my glory:
They can accurately convey specific and incredibly relevant information in a controlled way.
The best use of a QR code I saw was on the Rotweinwanderweg in Germany’s Ahr Valley (I was on holiday and apparently my favourite relaxation activity is to collect QR codes, ok?).
This popular walking trail goes through the valley’s red wine heartlands and is long and winding. There are several routes to take of varying difficulty. Plenty of waypoints dotted along the way have prominent QR codes with plain-text longitude and latitude, readable by phones to open up the native mapping app without relying on a 3rd party redirect.
This one, on the other hand, is only readable to software that can decode the ticket. That gives it a layer of useful security.
QR codes can hinder good UX
Unfortunately, QR codes don’t contain any clue as to what they link to (is it an app, a picture, some text, a URL?), so without enough contextual clues, their affordances are limited. Unless truly necessary to the user’s journey, you’ve just added another step to them reaching their end goal and damaging conversion and satisfaction along the way. People want things quickly and easily.
I recently saw a QR code for pre-ordering food in a bar. The instructions were so complicated that I doubt many customers preserver. The example I spotted made the whole experience so confusing that it would be quicker and easier for the customer to just… you know… walk up the bar and order there. Call me old fashioned.
On product packaging, they look a bit like barcodes or stock checking markers. Yeah, they look cool and futuristic (I’m a horrible nerd) but honestly, do I need a QR code to visit the website of that particular brand of milk? Probably not. A written web address would suffice.
If the QR code is for internal tracking, hide it from your customers. They’ll expect to interact with it and be disappointed when nothing happens.
I tried scanning the code in the receipt above (you can try too), expecting to go to their social media or website, and this was the result.
Using QR codes in digital design
Option 1: A regular QR Code
After some experimentation, it’s become received wisdom that designers should avoid customer-facing QR codes. But maybe a QR code is right for your design — how do you know? How can you present it to the user and support its use on the back-end?
Readability
There are no WCAG standards for QR code readability, but perhaps there should be. Reducing the size too much, over-complication or lack of good contrast can cause as much of a problem to digital scanners as can our eyes. If the code can’t be scanned at a reasonable distance, with an unsteady hand in low-ish light, it’s pointless. Resist the temptation to overload your code with huge URLs or overly long codes. It’ll make your code denser, decreasing readability and making it more susceptible to degradation. Twitter’s code (below) is an excellent example of an attractively customised code with good contrast and personalisation.
These though…
Mobile-first
Your users will be using mobile devices to scan your QR code. With this in mind, why on earth would you direct them to a dense page of text designed for desktop? This example on a tourist sign routing to a desktop-only page would quickly turn off your users.
What happens?
There have been a few varieties of non-standard QR codes floated over the years, but nowadays, there are four recognisable versions in regular use. They vary depending on whether you’re designing for web, product packaging, social, video, location, and so on. It’s not as simple as you might think meaning that your margin for error (and thus, confusing, not aiding your users) is high.
Will it help the user achieve their goal faster?
If you’re going to dump the reader onto your homepage, a simple URL or a googleable company name is eminently better. Why add a layer of abstraction? Assuming that there’s a specific place you want to send your user, you’re going to need to make it worth the effort for them to go there. On the subject of apps — does the QR code require a proprietary app to decode it? If so, what happens if a standard QR code reader tries to read it?
Weird option 2: Invent your own machine-readable graphic
If you have the budget, design and development resources and market-spanning impact, you could create a proprietary machine-readable image that performs an action. An example would be playing a song (Spotify — see below) or connecting with someone on a social network (Facebook).
I particularly like the Spotify example. Quick to generate from a song, album or playlist, the album art, app logo and waveform style data pattern gives the user clues as to what will happen if they scan the image. The drawback is, unless the user has Spotify and is familiar with what the picture does, they won’t find any use in it. The flip-side being that it won’t be mistaken for an action you can take on another platform, and won’t be misinterpreted by a generic QR code reading app. Also, it looks pretty enough for it to just be a decorative image or poster.
Option 3: Here be dragons
There’s a third, terrible option to choose from. A matrix barcode that is not a QR code. There are many, most perform the admirable job of tracking stock around in a warehouse. They’re fine. Sometimes someone somewhere decides to create a new matrix barcode for general consumption.
The most egregious example I can think of is the multicoloured High Capacity Color Barcode. This is a gruesome, and thankfully retired, alternative created by Microsoft, a part of their Tag range of alternative and brand-friendly codes, which required a Microsoft server to parse the contents of the HCCB before passing the scanning device off to the relevant destination. I only ever saw these on timetables in some British railway stations for some reason.
Avoid like the plague.
Consider using QR codes but be careful
Ultimately, it’s the job of the designer to meet the user part-way. If QR codes are what the user expects, use them intelligently, but if they aren’t, don’t force them. If there’s already an expectation of a QR code or some similar affordance, for example on a ticket app or social profile sharing function, the balance tips further towards implementing one.
I expect that device-readable graphics aren’t going anywhere until something better comes along. Interestingly (for me anyway), you don’t need something that looks like it’s readable at all to interface with a device. There are a few proprietary apps like Layar or Uncovr that recognise graphics registered with their service. They use them to display AR graphics and video over the top of the scanned surface. I think we’re a while off finding a real-life use or market desire for that, but it feels like the future.
In the meantime, why not find me over on LinkedIn?
UPDATE
Since my original version of this article, I’ve started a twitter account — and some say movement — about QR codes I spot in the wild. Catch me over on Twitter at QRlityControl. Tweet your own using the #QRlityControl hashtag.
Originally published at naturalinteraction.com on 23 July 2019
