User Experience Design Guidelines

For payment codes (UPM)

See More information.

For collection codes (MPM)

Generation of QR codes

Select an appropriate error correction level

Error correction rate indicates the percentage of data that can be corrected. A higher error correction level makes the QR code to be more recognizable under bad environmental conditions.

Four error correction levels exist for QR codes, which are L, M, Q, and H. Table U.1 lists the approximate error correction capability of the four levels:

Table U.1: Error correction rates for each correction level

Generally, level Q is most frequently selected for code-scanning payment. However, if there is a need to place a canvas area (such as a logo) in the QR code, level H should be selected.

Figure U.1 illustrates some example QR codes with different error correction levels:

Figure U.1: QR codes with different error correction levels

Use a lower encoding version

There are 40 versions of QR codes, which contain different sizes of dot matrices ranging from 21x21 (Version 1) to 177x177 (Version 40).

For QR code images of the same physical size, a lower encoding Version creates a less dense dot matrix, which is easier to be recognized even when the scanner is not well-focused. To increase the recognition rate, a lower encoding version should be selected.

Table U.2 lists the maximum capacity (in 8-bit byte) of each Version with different error correction levels (ECL).

Table U.2: Capacity of different Versions and error correction levels

Considering both the error correction level and the recognition rate, Version 4 or lower is recommended. Consequently, the length of the code string should be no more than 46 Bytes.

Use a shorter code string

For QR code images of different physical sizes, a larger image size can support a higher encoding Version and longer code string.

Considering the physical size of Alipay+ Collection Codes is usually larger than 3cm*3cm, to ensure the recognition rate, it is recommended that the length of the code string should be no more than 50 characters.

The following measures can be used to optimize the code string:

• Shorter URL

Change a long URL name into a short one.

For example, http://www.alipay.com/?name=s&auth=12d1a32d12e325e9d to http://t.co/aX1bddS.

Figure U.2: QR codes before and after optimization: shorter URL

• Optimize the encoding content

Optimize or compress the code content by removing redundant characters. For example, YXNka2poYXNkICAgICAgICAgICAgICAgCg to YXNka2poYXNkICAg+5.

• Use consecutive upper-case letters or digits

Consecutive upper-case letters or digits can reduce the number of bits in the bit stream and thus makes a lower encoding version applicable.

Figure U.3: QR codes before and after optimization: consecutive upper-case letters

Visual design of QR codes

Use contrasting colors

Use contrasting foreground and background colors in your QR code visual style. It's recommended to set #FFFFFF (white) as your foreground color, and #000000 (black) as the background color.

Avoid using multiple colors in the visual area of the QR code.

The following examples illustrate color settings that are not recommended:

Figure U.4: Color settings not recommended

Use standard position detection patterns

Use squares or circles as the position detection patterns of QR codes. If possible, use squares only. Avoid using special shapes such as triangles, rhombi, or round rectangles.

Use dark colors for the position detection patterns in the three corners. Avoid putting a logo in the fourth corner.

The following examples illustrate some wrong shapes of the position detection patterns:

Figure U.5: Wrong shapes of the position detection patterns

Size

Depending on business requirements, the QR code should fill more than 80% of the scan box at a suitable distance.

For example, since the common scanning distance is 20 cm, and the code width should not be less than 80% of the scan box, it is recommended that the physical width should not be less than 4 cm.

Reduce the covered area of QR codes

QR Codes have error correction capability. Data can be restored even if the symbol is partially covered or damaged. However, reducing the covered or damaged area of the QR code can improve the error correction capability and the recognition rate.

If there is a need to put a logo inside the QR code image, it's recommended that the logo area only covers 10% and no more than 15% of the image area.

The following examples illustrate some QR codes that are partially covered:

Figure U.6: QR codes partially covered

Space around the code image

Leaving some blank space around the QR code image can reduce the influence of environmental factors on position detection.

The blank space around the code image should be no less than 4 times the minimum data cell.

Figure U.7: Blank space around code image

Deployment of QR codes

Check the light condition of the environment

The light condition of the environment where a QR code is posted can greatly impact the recognition rate. Therefore, when posting the QR code, you must assess whether there is suffient light, whether the light source is clear, whether the material surface reflects light, and so on.

The following examples illustrate QR codes presented in poor light conditions:

Figure U.8: QR codes in poor light conditions

Avoid distorting the QR code

Distortion of the QR code tends to decrease the recognition efficiency, and even leads to recognition failure. Therefore, when you post a QR code, avoid folding, bending, or distorting the QR code. Ensure that the QR code is posted on a flat surface.

The following examples illustrate some distorted QR codes:

Figure U.9: QR codes distorted

Avoid obscuring or damaging the QR code

The key step for recognizing a QR code is to find position detection patterns. The QR code will not be recognized if position detection patterns are obscured or damaged. In addition, avoid obscuring or damaging the data area so as not to exceed the error-correction capability.

The following examples illustrate QR codes that are improperly posted:

Figure U.10: QR codes improperly posted

Avoid exceeding the scanning angle range or distance limit

To achieve a better user experience, you are encouraged to make the following settings:

• Scanning distance: Keep the distance between the QR code and your camera within 1 meter.
• Scanning angle: Keep the elevation angle of your phone camera within 45 degrees.

Self-test case for offline deployment

The offline environment for posting QR codes is complex, therefore, the deployment staff can conduct some basic tests to ensure that the QR code can be properly recognized.

You can check the following items when you conduct the test:

• The light condition. Adjust the scanning angles, and then check whether the QR code can be properly recognized from different angles.
• The print quality. Use different printers to print out the QR code, and then check whether the QR code can be recognized.
• The angle and distance. Scan the QR code from different angles and distances, and then check whether the QR code can be recognized.

If the QR code is hard or failed to be recognized in the test, you can change either the posting environment or the QR code itself.

More information

For details about brand display guidelines, see Brand Display Guidelines for In-store Payment.