QR Codes

QR Codes - The Magic of Networking

QR codes are beginning to pop up everywhere in our increasingly connected world, but no one has really pulled us aside and taught us what they are or why they're here. We’re familiar with barcodes, but those are typically reserved for grocery stores and inventorying items. Why do we need to scan QR codes? Who can make them? To answer these questions, we must first start with “What is a QR code?”

The QR Code Generator, a tool powered by link shortening company bit.ly, defines a QR code as “... a two-dimensional barcode that is readable by smartphones … QR Codes may be used to display text to the user, to open a URL, save a contact to the address book or to compose text messages.”1 As we can see here, QR codes can do more than just take us to a website! They are a kind of compression tool that allows us to share data quickly, efficiently, and with less potential for user error, such as typos when someone tries to enter a web address in the browser on their smartphone or tablet.

 

The Anatomy of a QR Code - How it Works

anatomy of a QR code

Pictured above are the various landmarks of a typical QR code with features compatible with the current version.2 As you can see, there are different features that enhance the camera’s ability to interpret the black and white pixel patterns in terms of the position of the data bits (binary ones and zeroes). Not all versions of QR codes utilize these features, but as the specification evolves, the developers of the standard add ways to improve accuracy, even when the QR code is distorted, for example, even wrapped around a cylindrical object such as a beverage can!

One possible answer to ''Why do we need to scan QR codes ''could be the age-old adage of ''Well, that’s how we’ve always done it.” QR codes are not new technology, in fact, they are nearly 3 decades old! QR Codes were developed in 1994 by Toyota, specifically, a division called Denso Wave. They used QR codes as a quick means of tracking automobile parts during the assembly process.3 Since then, with the ubiquity of smartphones, QR Codes are commonly used in advertising, and frequently used for tracking unique tickets at sporting events and concerts.

 

 

The Dangers of User Error

 

URLs, coupon codes, and the serial number for an automobile part. What do all of these items have in common? They are specific, long, and just not immediately comprehensible to the human eye without additional context. It is for this reason that unless we are particularly careful when entering them in, a single digit or letter could be off and the entire item loses all value. QR codes were made specifically to help with this - to take that exact information and put it into a format that doesn’t need to be entered (possibly numerous times over and over again), just scanned by an application that knows how to translate the information back from a QR code to its original format.

So if the scanning is handled by the camera app, who is making these QR codes, and how? Just like there are online applications and websites that can help you design a flyer, there exist free and premium QR code generator applications online. A variety of these QR code generation tools exist, most with zero cost, but many revolve around a freemium revenue model so many features are unavailable at a free tier. Because of this, just about anyone with a smart device and an internet connection can make a QR code! Or for areas where it 's better to share text rather than an image, use a URL shortener (does exactly what it says on the tin). For some examples of these applications, please see “URL Shortening Methods” below.

 

 

Short vs. Long URLs

 

Observe the difference between the two QR codes below:

 

simpler QR code

https://ysu.edu/web-team

 

complex QR code

https://ysu.edu/office-marketing-and-communications/marketing/web-team

 

You can plainly see that the longer URL is encoding more characters, and thus requires higher pixel density in the image. Ideally, you will want to use the shortest Web address possible, and display the QR code graphic in as large of a format as possible. This has the added benefit of allowing people to scan the image at a greater distance. Always display the image against a white background to allow for as much contrast as possible, so that it can work in a wide variety of lighting conditions.

 

URL Shortening Methods

 

  1. Drupal CMS path aliasing and redirection: Observe that both https://ysu.edu/web-help and https://ysu.edu/office-marketing-and-communications/marketing/web-team/department-website- update-request-form takes you to the same place, but the former using a much shorter URL. Please note that as long as a particular URL path is currently unused, the Web Team can create one of these unique path redirects for your content pages to help create a smaller QR code.

  2. Bit.ly short codes: YSU Marketing &Communications has an account with Bit.ly for generating shortcodes/QR codes, the number of click-throughs and QR scans can be tracked, and this service is well suited for conveying engagement information about 1-off events (for example, Alumni Engagement uses these for contactless check-in via link to the webform for the Penguin Day event).

 

Security Concerns of QR Codes and Link Shorteners

 

As they become more widely used, the bad habit with QR codes then becomes to “just scan it” and ask questions later.

This is a terrible habit, and can take a user from scanning a QR code for an alleged “charity event” to “accidentally giving away personal information to a stranger on the internet”. For this reason, we recommend that everyone always inspect the context of the QR code, to look for information around it before scanning it. Most QR code apps will even let you preview the translated URL and see that that website may not be what the QR code said it was! Be sure to take note of the domain and ensure it is taking you to the website you expect.

For those who are creating QR codes and shortened links, be genuine in your context! Not because you want to trick the viewer, but because you want to give them tools to see the difference between a convenient way of sharing information and a clear attempt to steal personal data.

 

 

Accessibility Tip: Always include the text of the hyperlink. If you are publishing a QR code to a webpage, use the HTML <figure> and <figcaption> elements if you have the option.

Otherwise, include the hyperlink separately, directly under the image, and mention in the <img>

element alt attribute that it is a QR code that links to that URL below, e.g.:

<img src="/path/to/QR_image.jpg "alt="This image is a camera-readable QR code that links to the (insert purpose) webpage at the hyperlink below ">

 


References

1 https://www.the-qrcode-generator.com/whats-a-qr-code

2 https://en.wikipedia.org/wiki/QR_code#/media/File:QR_Code_Structure_Example_3.svg

3 https://www.britannica.com/technology/QR-Code