Web site Developer I Advertising I Social Media Advertising I Content material Creators I Branding Creators I Administration I System SolutionBest Practices And Pitfalls — Smashing Journal

Web site Developer I Advertising I Social Media Advertising I Content material Creators I Branding Creators I Administration I System SolutionBest Practices And Pitfalls — Smashing Journal

Web site Developer I Advertising I Social Media Advertising I Content material Creators I Branding Creators I Administration I System Resolution

Fast abstract ↬

Whereas QR codes have many makes use of and may be leveraged at many contact factors, they’re simply certainly one of dozens of applied sciences that may enhance the client’s journey. Stanislav Khrustalev shares his recommendation with a listing of issues to remember when utilizing QR codes for what you are promoting.

QR codes are a helpful know-how that simplify and enrich the client journey. The know-how is presently used virtually in every single place: e-menus in eating places, digital enterprise playing cards, buyer suggestions assortment after meals supply, boarding passes on the airport. Nevertheless, as with all the pieces else, a enterprise proprietor ought to take into account a number of issues when utilizing this know-how in the event that they need to create a optimistic buyer expertise.

On this article, I’ve assembled a guidelines of things to remember as you attempt to leverage QR codes for what you are promoting, damaged down by the steps of the client journey. So, on this mini-journey, our buyer:

  • Sees the QR code for the primary time,
  • Examines the code,
  • Scans it,
  • Follows the hyperlink from the code.

Let’s take a better have a look at what to contemplate in every stage.

Observe: This listing can and might be up to date because it continues to develop, so if in case you have any concepts on what might be included, please do let me know. Let’s make this content material much more beneficial for everybody!


A fundamental level: When applicable, QR codes are value utilizing. The pandemic and the emergence of built-in code-scanning on our smartphones have set the stage: The general public is prepared for this know-how. It’s a great time to make use of QR codes and to alleviate your prospects from having to memorize an extended URL or kind it in manually.

Gruzovichkof (a transport firm), for example, states on its automobiles that its app is obtainable within the App Retailer and Google Play, but it surely doesn’t present prospects with any hyperlink to it:

A van with an advertisement written in Cyrillic script

(Massive preview)

Technopark (a retailer) performs this process extra intelligently, permitting you to obtain the app by scanning the QR code positioned on the floor of its supply automobiles:

A van with Cyrillic script that shows a retailer ad

(Massive preview)

Code Visibility

Attempt to place the QR code in such a manner that it’s clearly seen from varied factors of the trail that your prospects are following. For instance, if the QR code shouldn’t be at eye degree, you then run the danger of consumers not noticing it in any respect.

IKEA is nice at this, though initially I considered mentioning it as a nasty instance. By putting QR codes beneath the suggestions assortment terminal, which appears illogical, it simplifies the method of offering suggestions for guests on wheelchairs:

Cyrillic script in an IKEA store with a screen to assist folks in wheelchairs

(Massive preview)

Free Area

If doable, place the QR code in a manner that it doesn’t “stick” to the opposite design parts on the floor. And reduce the visible noise round it, in order that the consumer’s consideration doesn’t dissipate and the code is simpler to note.

Extra after bounce! Proceed studying under ↓

2. Analyzing The Code

Name To Motion

Don’t present a QR code with out a proof. Let prospects know explicitly what they’re being requested. To extend the chance that prospects will scan your QR code, place an specific name to motion (CTA) subsequent to it:

A QR code alongside Cyrillic script

(Massive preview)

Rationalization Of Worth

Along with the CTA, clarify to prospects why scanning the QR code could be beneficial to them. By managing their expectations, you additional enhance the chance that they are going to take motion.

For instance, the decision to obtain the app in Nespresso’s boutique is accompanied by an infographic with key advantages:

A Nespresso advertisement poster showing a QR code explained in an infographic

(Massive preview)

Contact Particulars

Some companies additionally place contact particulars subsequent to their QR codes. It’s necessary to not overwhelm, however in some circumstances these particulars could be applicable, similar to for a hotline:

An ad shown on window glass with Cyrillic script and a QR code for customers to access the website

(Massive preview)

Most QR code turbines mean you can model the code by putting your organization emblem at its centre. It will make your code look extra skilled and enhance the prospect of drawing your prospects’ consideration.

A QR code with a company’s logo placed right in the middle

(Massive preview)

Model Colours

QR code turbines additionally mean you can choose a coloration in your code. This can be a nice alternative to make use of your model’s colours and make the code extra visually interesting.

3. Scanning A QR Code


Be sure that any QR code you place in offline media shouldn’t be too small. Additionally account for the gap from which the code might be scanned. If it’s too small, prospects may have hassle scanning it, and the code might be ineffective.

Non-Contact Floor

Decrease direct bodily contact together with your QR code. In any other case, the floor will erode over time, and the code will change into tougher to scan. For instance, for a storefront, stick the code contained in the window, quite than exterior.

In certainly one of Road Beat’s shops (a sports activities attire retailer), QR codes are positioned on the checkout counter. The thought is kind of good, however as a result of it’s a contact floor, the sticker will come off step by step, after which it’s going to look untidy and finally have to get replaced.

QR codes placed on a checkout counter

(Massive preview)

Consolation Of Scanning

Place your QR code in a location the place it’s comfy to scan, with out speeding. For instance, a freeway billboard is not going to solely be inconvenient for purchasers, however can even enhance the danger of accidents.

Cell Community Availability

Many QR codes are hyperlinks to web sites. If yours is, be certain that it’s someplace the place a cellular community or Wi-Fi is available. In any other case, the worth of the code might be near zero.

Correct Floor

You’ll see some QR codes positioned on clear surfaces, which makes them troublesome to scan or not scannable in any respect.

A QR code placed on window glass of an Etam Paris boutique

(Massive preview)

In Nespresso’s boutique, this difficulty is clear: The code is nearly unscannable. Retailer personnel discovered an answer: Each time a buyer tries to scan the code, they maintain up a sheet of paper as a background (which continues to be not the most effective buyer expertise on the finish of the day):

A Nespresso advertisement placed on window glass making it unscannable due to the interior design of the boutique

(Massive preview)

X5 Retail Group (a meals retailer) makes use of billboards alongside the streets to point out its QR codes for downloading its app. Because of the format of the billboards, the codes should not as straightforward to learn as they might be on a stable floor.

A billboard advertisement with tiny ad text and a QR code that are impossible to access from the street

(Massive preview)

Environmental Elements

If you happen to place a QR code exterior, take into account environmental components similar to lighting and climate. If the poster might be poorly highlighted at evening, the code might be a lot more durable to scan. If you happen to’re utilizing automobiles (similar to supply automobiles or cabs), be certain that they’re cleaned recurrently, particularly in unhealthy climate — the usefulness of a code coated with dust is near zero.

Explaining The Scanning Course of

Regardless of the prevalence of QR codes, not everyone seems to be conscious of what to do with them. That’s why it’s a great follow to obviously clarify this subsequent to the code. For instance, you would write, “Level your smartphone digicam on the QR code to scan it”, together with an icon of a digicam.

A QR code on a bill explaining how to scan it and access the site

(Massive preview)

Scanning With Native Digicam App

Set prospects’ expectations appropriately about the right way to scan the QR code, and if doable, don’t implement an answer that requires individuals to put in a specialised digicam app.

When Auchan launched its revolutionary “Scan & Pay” system, corresponding QR codes have been positioned everywhere in the retailer. Lots of of holiday makers tried to scan the codes with a regular digicam and encountered an error. They weren’t taken to the touchdown web page however got here throughout a system code. (The QR codes needed to be scanned with the digicam in Auchan’s app.)

An advertisment in a mall showing a QR code that needs to be scanned with a phone camera

(Massive preview)

Scanning From Totally different Units

A QR code could also be simply scannable on some units and never scannable in any respect on others. Examine the scannability of your code on totally different smartphone fashions earlier than sending it for printing.

Shade Distinction

Normal QR codes are black and white. If you happen to use your model’s coloration, be sure that it contrasts with the background sufficient to be scanned with none difficulty.

Darkish On Mild

At all times use a coloration distinction of darkish on gentle — that’s, a darkish QR code on a lightweight background. Not all units can scan the other appropriately.


Earlier than submitting the code for printing, be certain that the code is at a decision excessive sufficient to not blur or pixelate. In any other case, your effort and cash might be wasted.

Web site Code: Desktop

QR codes may also be utilized in a digital atmosphere. For instance, if I’m visiting an internet site on a desktop laptop, the usefulness of an HTML button to obtain an app is questionable. Nevertheless, a QR code may be scanned from the web page with a smartphone, leading to a smoother obtain course of:

A QR code that can be scanned from a website from a phone camera

(Massive preview)

Web site Code: Cell

In contrast to on a desktop web site, the place a transition to a cellular atmosphere may be justified, assume twice about whether or not to place a QR code in your cellular web site. If a consumer encounters a code on their smartphone display, they will be unable to learn it with their digicam. On this case, utilizing a button makes extra sense.

Some time in the past, I seen that each the desktop and cellular variations of Auchan’s e-commerce web site contained QR codes. Whereas the previous was justified, the usefulness of the latter was questionable:

A QR code on a mboile website that doesn’t seem that useful

(Massive preview)

An exception is when customers can share a code with others. A specific and fairly widespread case these days is the verification of an individual’s COVID-19 vaccination standing utilizing the QR code from the cellular model of a public-service web site.

This can be a fundamental level, however I made a decision to incorporate it nonetheless. Errors typically occur on the execution degree of a enterprise. Earlier than sending a QR code for printing, test that the hyperlink within the code doesn’t include any errors and is lively. Additionally, test recurrently that every one current QR codes are lively and dealing.

Content material Relevance

Don’t overlook to recurrently test the relevance of content material each on the web page that’s accessible by way of the hyperlink and within the space surrounding the QR code, particularly for those who’re utilizing the code for a limited-time provide, an occasion invitation, or the like. In any other case, it might end in unmet expectations and a unfavourable buyer expertise.

Touchdown Web page vs. A number of Codes

If you’d like your buyer to take a number of actions, don’t create a QR code for every motion. A greater answer could be to current one QR code, after which define the CTAs on the web page that’s accessible by way of the hyperlink within the QR code. This manner, the presentation of the code will look neater, and the client gained’t be distracted when scanning it.

Beneath is an instance of a case when this level was not thought by means of (by Persona Sport, a gymnasium and wellness membership). Hyperlinks to Google My Enterprise, Yandex.Maps, and 2GIS might have been positioned on the touchdown web page that’s accessible by way of the QR code:

Too many QR codes are being shown all in one place

(Massive preview)

Some time in the past, Coffeemania (a restaurant) used one QR code for patrons to submit opinions, and one other one for patrons to ship tricks to servers (whereas these actions might have been mixed in a single code):

A QR code placed in a menu to allow patrons to submit reviews as well as tips

(Massive preview)

Lenta (a retailer) does this extra effectively, permitting prospects to decide on the medium by which to speak with assist on the degree of the online web page, quite than from printed media:

A poster in a shop showing a QR code allowing customers to communicate with the support team

(Massive preview)

Managing Expectations

The content material accessed by way of the hyperlink ought to match the CTA subsequent to the QR code. If an invite to subscribe to a social media account is the CTA, and the client is prompted to take a number of unrelated actions upon scanning the code, then their consideration would possibly get diverted, and they may not take any motion in any respect.

The disadvantage of the final instance is that the QR code, which permits the client to decide on the medium by which to speak with buyer assist, leads to not a devoted touchdown web page, however merely to the primary e-commerce web page, blurring the client’s focus:

A screenshot of an e-commerce page to which the phone user was taken to instead of customer support

(Massive preview)

Cell Optimization

It’s necessary to grasp that scanning a QR code is only one a part of the journey {that a} buyer takes. That’s why pondering by means of the entire steps is necessary. Particularly, if the client scans a QR code with their telephone and finally ends up on a web page that isn’t optimized for cellular units, it gained’t do them (otherwise you) any good.

App Downloads

You need to use deep linking to scale back your variety of QR codes and to simplify the client journey. This technique permits you, amongst different issues, to establish the kind of system that the client is utilizing when scanning your QR code. It’s helpful if you’re offering a hyperlink to obtain an app. iPhone customers who’ve scanned the QR code will go to the App Retailer, whereas Android customers, having scanned the identical code, will go to Google Play. The shopper’s focus shouldn’t be distracted by a number of QR codes, and there’s no want to decide on, whereas the worth is similar.

Coffeemania’s loyalty program gives a number of QR codes, relying on the way in which the consumer needs to register. This might be overwhelming:

Showing too many QR codes can be quite overwhelming to users

(Massive preview)

Uniqlo, alternatively, doesn’t ask what sort of smartphone I’ve. The related app retailer will open mechanically after I observe the hyperlink from the QR code:

A poster found on an elevator wall displaying a QR code that allows people to access relevant stores regardless of what type of smartphone they have

(Massive preview)


You’ll be able to personalize the client’s expertise by leveraging UTM parameters within the hyperlink from the QR code. For instance, to permit prospects to guage a restaurant server’s work, you may add the server’s ID as a hyperlink parameter and personalize the suggestions web page with their identify.


In addition to personalization, UTM parameters may also be used for analytics. For instance, when putting QR codes on totally different banners across the metropolis, you may add corresponding parameters with the ID of every banner to see which banners get extra visitors and which of them needs to be relocated sooner or later.

To Be Continued

QR codes can simplify the client journey and make it extra handy. As with all the pieces else, nevertheless, the effectiveness of this contact level is determined by the main points, and poorly carried out particulars can flip your vibrant prospects into a nasty buyer expertise.

If you happen to use QR codes in what you are promoting, pay attention to the pitfalls alongside the way in which, and leverage the entire know-how obtainable, and don’t depend on having to be taught from your individual errors. I hope this text was beneficial, and if in case you have one thing so as to add, drop me a message — we’ll proceed to refine the most effective practices.

Good luck and keep up a correspondence!

Smashing Editorial
(vf, il, al)

Supply hyperlink

Leave a Reply