McDonalds. I could love it more.
QR codes have been around for 20 years and have now appeared everywhere. They're an ideal method of gaining instant feedback, entering competitions, providing additional information to customers or all 3. What self-respecting marketing agency isn't getting their customers to slap a QR code on everything from soft drink cups, burger boxes and menus, to table displays?
McDonalds have been no slouch when it comes to using QR codes. I'll be using a recent UK campaign to demonstrate 3 simple tips to improve QR code usage.
1. Mobile First
The following photo is of the tray leaflet highlighting the quality of chicken breast used (Ed: after you ate your food it would appear).
There's a nicely positioned QR code in the bottom right corner surrounded by a small amount of text providing initial information. It's clear the intention is to get the reader to visit the web site. However when scanned on an iPhone 5S the following appears.
The page is optimised for large screen laptop computers, or at best bigger screen tablets. How many of McDonalds' customers are really going to be using laptops and tablets to scan the QR Code and view the content? Less than 20% would be my guess, but more on that shortly.
It's 3 years since Luke Wroblewski published "Mobile First" and web designers embraced mobile. It's really very easy to create a web page which works well on any device whether using responsive web design alone, or speeding it up and optimising further with server side logic.
Tip 1 - Optimise the web page layout for all smartphones and tablets.
2. Performance
Restaurants, particularly McDonalds, have WiFi, and it's pretty good. But not everyone is connected to it. As such there's no guarantee that the device scanning the QR Code is going to enjoy a high bandwidth low latency connection. Therefore it's essential to keep the amount of data transferred and the number of HTTP requests for content such as jQuery, CSS and image as low as possible. The web page from McDonalds QR Code had a total page weight of 1.9MB, 146 separate HTTP requests and took 3.58 seconds to load on a 100MBs broadband connection. The following image is taken from the Chrome network console and shows this information.
These times ignore the redirection from the short URL to the full URL which will typically take 1 or 2 seconds, plus the time taken for the mobile device to establish a radio connection after the code is scanned which can be 2 seconds. As such the real world load time could have been 7.58 seconds.
Using server side device detection a light weight page could have been returned focused on the core information and any data capture. The ideal page would have had a total page weight of less than 250Kb and contain no more than 7 includes. The user should be able to switch to the more data/processing intensive version if they wish. As the URL works based on the device rather than QR Code the same URL can be used across other channels such as social media, email and banner advertising producing a great user experience with them all.
Tip 2 - Ensure the web page returned from the QR code responds quickly.
3. Analysis
The web page returned uses both Google Analytics and Webtrends for subsequent web traffic analysis. Assuming all best practices are followed McDonalds will be able to tell the channel of the request based on the redirect from the short URL contained in the QR code. Both Webtrends and Google Analytics can be configured with 3rd party data sources to provide additional dimensions concerning the type of device accessing a web site. Examples include; screen size, price band, supported input methods and processor information. Using this information outcomes for a marketing campaign can be analysed by these additional dimensions. The following chart from Google Analytics configured with these enhancements shows web traffic segmented by the diagonal screen measurement in inches.
Tip 3 - Ensure web site analytics tools have been upgraded to measure QR code as a channel and provide additional device information.
Conclusion
If QR codes are worth using then they're worth using well. None of these tips are hard to implement and produce a far better user experience. Context is everything. After all no self respecting digital agency would use precisely the same design on the side of a bus and a half page advert in a fashion magazine.
For more information about the history of QR Codes this presentation from Terence Eden covers the key points and includes some amusing examples of how not to do it.