All About QR Codes

Posted by in White Papers

I wrote this white paper for the NREL Communications and Public Affairs Office. It explains what QR codes are and provides guidelines and best practices for their use. At the time of this writing, QR codes were just starting to be used in our office and I wanted to encourage responsible usage. Please note that this includes process specific to our office.

What is a QR code?

A QR (quick response) code is a barcode image made up of squares (or “modules”) of encoded data. Unlike a UPC code, which is a one-dimensional barcode, QR codes are two dimensional and store data in both directions. They can be scanned vertically or horizontally to be decoded.1 QR codes are scanned using QR code decoding software on a mobile phone or other camera-enabled mobile device such as an iPad.

UPC vs. QR

QR codes can store a variety of information, including website URLs, contact information, text messages, social media actions, or links to apps, videos, maps, or other content. The most common use for QR codes in our office has been for website URLs.

The readability of a QR code is dependent on many variables, including the type and amount of data encoded, size, contrast, amount of error correction, printing method and material, and camera resolution. We have developed a set of recommendations to help improve the success rate of your QR codes. The most important recommendation is to test, test, test!

Anatomy of a QR Code General QR code considerations

  • Don’t create a QR code that will take users to a non-mobile URL. Mobile phones are used to scan the code; therefore, the site must be optimized for mobile viewing or it will have failed its purpose.
  • Don’t place a code where there’s no data signal. Users will likely not wait until later to view a site. If you’re creating a banner or sign, make sure you know where it will be placed and test the connection if possible.
  • Don’t place a code where it’s difficult to scan. Consider how users will scan the code, and make sure it’s easily accessible (e.g., not at knee level, above the head, etc.).
  • Make it worth it. The most successful QR codes add value beyond just taking a user to a website they could easily visit anytime.
  • Make it clear. The reason for scanning the code should be obvious to the user.

Creating a QR code

Stats and URL shorteners

The first step in creating a URL QR code is setting up a campaign in Google Analytics to track the code. Communications reps should contact the web development team to have a campaign set up. Provide the URL(s) and what the code is being used on (be concise since that information is going to be encoded in the QR code). The developer will provide a new URL that will be unique to the QR code being made, and which will allow you to clearly see in your web stats the traffic from people scanning the code.

The next step is to run the resulting URL through the URL shortener at https://go.usa.gov/. You will need to create an account using your nrel.gov email address, which only takes a minute. This is the only URL shortener allowed for .gov addresses. Either the designer or the communications rep can do this.

The final step is to actually create the QR code using the shortened, trackable URL. The designer should do this to ensure they get the file types they need, and so they can re-generate the code with different inputs if there’s a problem.

Generating a QR code

QR codes should be created in vector format. Vector format codes can be sized for any application without loss of image quality. A QR code generator should output codes in EPS, PDF, SVG or another vector format. Other considerations in selecting a QR code generator are the types of data it will let you encode, whether or not the site is tracking the codes being created, and default or adjustable error correction settings.

We recommend using http://esponce.com/ for generating QR codes. It outputs multiple file types, including vector format; includes error correction options; and allows you to download all file types in one zip package.

Error correction

Error correction is “backup data” encoded into the QR code that allows the code to work in adverse conditions. That can mean anything from the code being a little smudged or dirty, to it being printed on a shiny or textured surface. The more error correction you build in, the more complex the code becomes.

There are four levels of error correction, each level successively adding more backup data based on how much damage the QR code is expected to take.2

  • Level L – up to 7% damage
  • Level M – up to 15% damage
  • Level Q – up to 25% damage
  • Level H – up to 30% damage

Levels L and M are typically considered a good trade-off between density and durability, suitable for fact sheets and brochures. Levels Q and H should be used for pieces that will be outdoors or on potentially difficult-to-scan surfaces (high gloss or textured). Many QR code generators build in error correction using a default level can’t be adjusted. If you find your QR code is too dense, try using a generator like esponce.com that allows you to select a lower error correction level. Level M (15%) is most typically selected.3

You can find the error correction level by looking at two modules in the lower left area of a QR code, as shown below.

Error Correction

 Density

The more data present in a QR code, the smaller and more dense the modules become as the code adjusts itself to increase its data storage capacity.4 Data consists of the URL or whatever other information you are encoding along with the amount of error correction.

The “version” of a code describes its density based on how many rows and columns of modules are present. The code’s version is not something you have to dictate; QR code generators dynamically choose the version based on the amount of data you are encoding. Version 1 codes have 21 rows and 21 columns of modules, while Version 40 codes have 177 rows and 177 columns. Older mobile devices with lower-resolution cameras will have trouble scanning dense codes, so the physical size of the code will need to be increased if the code is dense. Again, remember to test, test, test!

Versions

Designing with a QR code

Size

When considering the size of a QR code, the density of the code, size of the piece and the distance the scanner will be from the piece must be taken into account. A 1-inch QR code on a fact sheet is fine, but that same size on a pull-up banner sitting behind a table at a booth would make scanning difficult.

Our recommended minimum size for a low- to medium-density QR code on a handheld print piece is 1-inch square (plus the 4-module clear space). A minimum of 1-inch square for a low-density QR code covers about 90% of the phones on the market, and many new phones now can scan QR codes that are less than 0.4-inch square. Always remember to test.

The table below provides some very general size recommendations for QR codes.

Type of piece Density Scan distance Recommended size of code
(+ 4-module clear space)
Handheld
(brochure, fact sheet, report, etc.)
Low
(Versions 1 – 4)
6 inches 1 inch
Medium
(Versions 5 – 10)
1.4 inches
High
(Versions 11 +)
4.25 inches
Display
(pull-up banner, signage, etc.)
Low
(Versions 1 – 4)
3 feet or more 4.75 inches
Medium
(Versions 5 – 10)
8.2 inches
High
(Versions 11 +)
25.5 inches

There are some complex formulas for determining the exact size a QR code should be based on the number of modules (called the version), the exact scan distance, and even the printer resolution. Check out the following resources for more information about sizing.

Clear space

QR codes require a 4-module-wide “quiet zone” or clear space around all sides.5 Remember, a module is a single square of data in the QR code, so larger QR codes will have a larger quiet zone.

Contrast and color

Many QR readers begin to have difficulty reading codes below a contrast ratio of 4:1. If you are making a QR code in any color other than black and white, test the contrast ratio with the WebAIM color contrast checker. This also applies to the quiet zone.

Contrast Checker

Testing the QR code

Mobile devices

Because different mobile devices have cameras of varying resolution, it’s important to test with as many different devices as possible. This would include iPhones, Blackberries, Windows and Android phones, iPads, and other tablets of varying ages.

Scanning apps

There is an ISO specification for QR code scanning apps but not all apps out there adhere to them. Be aware that despite your best efforts in creating, designing, and printing a QR code, some users may be scanning the code with a sub-standard app that will not work.6 Below is a list of reliable QR code scanners, but when testing, use any scanners that are available because you never know what your audience will be using.

  • Optiscan for iPhone
  • QRafter for iPhone
  • Barcode Scanner for Android
  • QR Pal For Android
  • PhraseMeme for Windows Mobile
  • Blackberry Messenger 5.0 for Blackberry

Texture

The texture of the substrate—whether high gloss paper, canvas, cloth, or anything else—can impact the way the modules are printed and the ability of some cameras to scan them. Creating a QR code with higher levels of error correction (Q or H), and increasing the size can help offset this, but as always, testing on a sample of the substrate is important.

Tips for improving your QR code if it won’t scan

  • If your QR code is too dense, try selecting a lower error correction level.
  • Make the code larger.
  • Check the clear space around the code. It should be at least 4 modules wide all the way around.
  • Increase the contrast of the code versus its background.