• About Us
  • Blog
  • Basket
  • Account
  • Sign In
  •  

Blog

Using QR Codes - 3 Simple Tips

Published on Friday, September 19, 2014

Using QR Codes - 3 Simple Tips

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).

McDonalds - QR Code Call to Action
Marketing material with a QR code call to action

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.

McDonalds - Landing Page on an iPhone 5S
Resulting web page on an iPhone 5S

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.

McDonalds - Web browser performance measurements using Chrome desktop
Analysis of page load time, number of requests and total page weight

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.

Example of Google Analytics upgraded to segment visits by physical screen size
Example of Google Analytics upgraded to segment visits by physical screen size

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.

Optimise Server Side Enhance Analytics


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.

Comments (0)
James Rosewell
>

James Rosewell

Other posts by James Rosewell
Contact author

Name:
Email:
Subject:
Message:
x

Tags

.NET 2013 2014 4G 51Degrees 5G A.C.Roma A7 ABI Acer Affiliate Marketing Alcatel Amazon AMP Analysis Analytics Android Android 5.0 Lollipop Android Kitkat Android Lollipop Android Media Stick Apache API Apple Apple TV Archos Asha Asian Market ASP.NET Asus Australia Big Data Black Friday Blackberry Blink Browser C C# Case Study CeBIT CES Chrome Cloud CMS combinations Comparison Competition CoolPad COTW Cron CSS3 Data Data Blog Data File Data Model Daydream Denver Design Desire Eye Desktop Detection Developers Device Device Data Device Detection Device Intelligence Device Popularity Device property Device Types Device Use Display dmexco DoCoMo Doogee DotNetNuke Download Drupal Email EReader E-Reader Ericsson Evaluation Event Examples EXPLAY Rio Facebook feature Firefox Firefox OS Fly Foundation Framework France Galaxy S3 Galaxy S5 Galaxy Tab A Galaxy Tab A 8.0 Galaxy Tab A 9.7 Germany git repositories Global Google Google Daydream GSMA HAProxy Hardware Hisense HTC HTC ONE MAX HTC OS HTML5 HTTP Huawei HUAWEI. UPDATE HUDL Huwaei IBC Icemobile Prime 4.0 IE IFA IIS Image Optimiser Image Optimizer India Infographic Ingeniux Internet usage iOS iOS 7 iOS 8 ipad iPhone iPhone 6 IsEmailBrowser IsWebApp Italy Japan Java Javascript Jolla Kentico Keynote Kindle Kindle Fire Kindle Fire HD Leagoo Lenovo LG Location Log File Analysis LTE Lumia m.dot Map Memory Meta Data Mi 4S Micromax Microsoft Miia Style Mobile Mobile Analysis Mobile Analytics Mobile Devices Mobile Marketing Mixer Module Motorola MVC4 MWC MWC 2017 MWC16 MyPhone Native Native Apps NET New Release News News Letter Nexus Nexus 6 Nexus 9 NFC NGINX Nokia Non-Mobile NVIDIA Omate On7 OnePlus 5 Opera Opera Mini Operating System Optimisation OS OSX 10.10 OTA Panasonic Patent PC Pebble Performance phablet phone PHP Poland Presentation Press Release Price Band PRIV programmatic PS4 Python QMobile QR Codes Redirection Research Reseller Responsive Images Responsive web design RESS Review reviews RIM Ringmark RTB RWD Samsung Scala Screen Screen resolution Screen Size SEO Server Server-side optimisation Set Box Set Top Box Sharepoint Shark 1 SHIFT phones Sitecore SLUSH Smart TV Smartphone Smartphones Smartwatches Snapdragon Sony Sony Xperia Spain Swedish Beers Symbian Tablet Tablets Tesco Testing Tips Top 5 TOTW TV UDS UK Umbraco Update updates US User Agent UserAgent User-Agent Vendors Version 3 VoLTE VR Wearable Web Web Apps WebKit WebMatrix White Paper Widgets Widnows WiFi Wiko Wileyfox Windows Windows Phone Xbox XBox One Xiaomi Xperia Xperia z Yosemite Z10 ZenFon 2 ZOPO ZTE