Skip to page content or Skip to Accesskey List.

Work

Main Page Content

Real World Hyperlinks

Rated 3.89 (Ratings: 0)

Want more?

 
Picture of aardvark

Adrian Roselli

Member info

User since: 14 Dec 1998

Articles written: 85

Sample QR code.You may be wondering what this graphic means. Perhaps it's your first time seeing it, but perhaps you've seen it here and there and not understood its significance. It is called a Quick Response Code, or QR code. Technically, it's nothing more than a two-dimensional bar code created back in 1994 by a Japanese company to track vehicle parts. The QR code is defined and published as an ISO standard and is free of any license. The SPARQCode standard builds on this by defining a standard for encoding data so that scanning software can agree on a common format for different data types.

The utility of the QR code was quickly recognized as a method to provide a real-world hyperlink that users can simply "photograph" to be transported to a web page. Now most Japanese mobile phones can read it with their built-in cameras. Google Android now has a reader built in, Nokia's Symbian operating system has a reader, and you can download readers for the iPhone or even Windows Mobile devices.

Essentially a QR code can store a URL and additional metadata, as well as other types of data. For example, contact information can be stored (phone numbers, addresses, vcards). In Japan, QR codes appear on mundane items such as food labels and bus stops. When users scan the code they may be presented food ingredients or recipes, or bus schedules. In the US they appear much less frequently and are largely unknown by the average mobile phone user.

How QR Codes can be used

The simple example is in print advertising or other print marketing. Every time you feel that you'd like to place a web site address on some collateral material, consider including that same URL in a QR code. Now you aren't asking readers to memorize an address and hope they'll visit it later, instead you can benefit from the immediacy the QR code gives by allowing your readers to jump right to your web page. You can encode a slightly different address so that you can better track response rates and even provide special promotions for visitors who use their mobile phones.

Consider using a QR code to encode your full contact information in the form of a vcard. Place this on your business card, your letterhead, your sales brochures, or anything you might hand out when speaking to people.

Encode an event within a QR code to allow people to put it on their calendars. This can work for everything from band fliers to trade show mailings. Granted, support for the ical format may not be very high in the readers right now, but the potential is there.

Given the explosion of social media based around checking into locations (Brightkite, Foursquare, Gowalla, Loopt, and so on), I think it would be great benefit to have a "check in" QR code on a wall. If the social media players could agree on a standard, then checking in via Foursquare, for example, could be far simpler than clumsily pecking a venue name into the tiny keyboard on your phone (followed up with search refinements). Simply wave your phone past the QR code to get to the place page and then press the "check in" button. In the Foursquare model, you can even award an extra point for the verified check-in directly from the venue.

While the technology has been around for a while, we haven't seen it used as much in the U.S. The advantage is that there is a lot of good historical use in Japan on which to base future use here. Even for those who have heard of QR codes the technology may seem daunting (it isn't), but providing some potential uses may be enough to get marketers (and others) interested in using them. For example, if you are already printing a document, the additional cost to add the QR code is nothing for the printing itself, and only a little extra time to work it into the layout.

Examples

Google recently launched their own campaign using QR codes. Google sent 100,000 window stickers to businesses for display in the business window as part of its Favorite Places campaign. These stickers, printed with QR codes, are intended to drive users to the Google Maps page for a business (restaurant, cafe, barber shop, etc). This helps explain why Google has put a QR code scanner on their Android phones.

Google provides these examples of how you can put the QR code to use:

  • Read reviews to see what other users think about the business
  • Find a coupon that the business has posted to their Place Page
  • Star the business to remember to check it out later, or to remember to visit again
  • Leave a review right after you leave the business. What's a better time to write what you think, than when you've just visited?

Finding QR codes in your daily life may be a bit trickier. I grabbed a few magazines and newspapers to try to find a QR code. I was able to locate just one in an ad in Wired magazine. The ad designer even explained just what the point of the code was and smartly included an incentive to help motivate people to try the link.

QR code in ad in Wired magazine.

Image of my phone scanning a QR code from Wired magazine

Since I have a Windows Mobile phone, I had to first download a QR code scanner before I could even try the ad (ok, I actually downloaded it a while back, but I think you get my point). Scanning the code brought me to mobile-optimized page showing me a discount code for an order. I have no need for the product, however, so even this one rare example I found didn't do me much good.

QR code on Brightkite page.In a curious twist, Brighkite includes a QR code in the right column of pages that show a single post. It sits at the bottom of the page, below the maps, and it is not a hyperlink on the web page. When printed, the QR code is often on a second page instead of alongside the post. Showing it on the page itself doesn't do much for the user since it simply links to the current page, but it does have value on the printed page — moreso if it prints right at the top.

Creating Your Own

Google has created the ZXing project (pronounced "zebra crossing") as an open-source, multi-format 1D/2D barcode image processing library. Along with that they have created a free QR code generator. The generator allows you to choose from types of data to store (URL, contact information, geo location, etc.) and lets you fill out a form with the information you want. Upon generating the QR code you can either download the image or you can embed it right from Google. The advantage to embedding the code is that it generates the image dynamically, allowing you to pass in different information each time it's generated. This is the code it generates for embedding a small version of the QR code for AdrianRoselli.com:

http://chart.apis.google.com/chart?cht=qr&chs=120x120&chl=http%3A%2F%2Fadrianroselli.com%2F

There are other sites that let you generate a QR code, but you can expect the same information to look different for each generator. It may be a function of the generator writing in some metadata (such as the source or some other information that you otherwise do not see). As an example, these two QR codes encode http://AdrianRoselli.com/, but look different from one another (forget the size difference, one embeds a big white border).

Example 1 of a QR code encoding AdrianRoselli.com. Example 2 of a QR code encoding AdrianRoselli.com.

If you do generate your own QR codes, be certain to test them first. A simple typo can ruin the experience for everyone who tries to use it.

Competing Code

Back in 2006, Microsoft announced the Windows Live Barcode project, which consisted of an online QR code generator and software for mobile devices to scan it. In time Microsoft let the project languish and has recently moved to the High Capacity Color Barcode (HCCB) standard, invented by Microsoft in 2007. Using a palette of 4 or 8 colors (plus black and white) and triangles instead of squares, it can hold more data, or 3,500 characters per square inch with off-the-shelf printers and scanners (cameras). Cnet covered this new initiative, called Microsoft Tag, in its early February article Microsoft tries to reinvent the bar code. Apparently the HCCB image doesn't need to be perfect triangles. The image below is from the Cnet article. I downloaded the free reader for my mobile device and it was able to read the image, even though the shapes are hearts.

HCCB code made up of hearts, from Cnet.

Additional Resources

A founder of evolt.org, Adrian Roselli (aardvark) is the Senior Usability Engineer at Algonquin Studios, located in Buffalo, New York.

Adrian has years of experience in graphic design, web design and multimedia design, as well as extensive experience in internet commerce and interface design and usability. He has been developing for the World Wide Web since its inception, and working the design field since 1993. Adrian is a founding member, board member, and writer to evolt.org. In addition, Adrian sits on the Digital Media Advisory Committee for a local SUNY college and a local private college, as well as the board for a local charter school.

You can see his brand-spanking-new blog at http://blog.adrianroselli.com/ as well as his new web site to promote his writing and speaking at AdrianRoselli.com

Adrian authored the usability case study for evolt.org in Usability: The Site Speaks for Itself, published by glasshaus. He has written three chapters for the book Professional Web Graphics for Non Designers, also published by glasshaus. Adrian also managed to get a couple chapters written (and published) for The Web Professional's Handbook before glasshaus went under. They were really quite good. You should have bought more of the books.

The access keys for this page are: ALT (Control on a Mac) plus:

evolt.org Evolt.org is an all-volunteer resource for web developers made up of a discussion list, a browser archive, and member-submitted articles. This article is the property of its author, please do not redistribute or use elsewhere without checking with the author.