Chinese Address Format and Input layout
In Part One of this feature I outlined some questions and provided answers regarding:
- The differences between an address in China and one in the UK or USA
- The information that a Chinese address includes and the importance of it
- Language aside, what else should we consider when designing the delivery and address fields for a website or app aimed at Chinese users
Address form and field design should follow general design principles and best practice. However, there are specific reasons and influences behind some of the UX decisions made for Chinese addresses.
Font Settings and Readability
For this particular part, I would recommend this blog post by Kendra Schaefer : “Chinese Standard Web Fonts: A Guide to CSS Font Family Declarations for Web Design in Simplified Chinese”.
Be aware, that just like their English counterparts, Chinese fonts can differ in readability at smaller sizes. Suggestion: don’t go any smaller than 12px.
Guidance and Clarification
Chinese addresses can be complex and users can easily become confused if they have to manually input their address information. Therefore, we must be careful when labelling each input field, making it as clear as possible.
A common solution seen on many local sites is dropdown selections. Providing a list of options can guide the user to choose the kind of information we need. By using a pre-formatted dropdown option, we can keep the address data unified and easy to manage.
In Part One I’ve shown examples of dropdown selections on the address form. Now we’ll dig a bit deeper into the dropdown usage. Take Tmall for example:
The example above shows a list of countries presented to the user when they select “overseas other”. The example below shows how a Chinese address would be formatted:
As I mentioned in Part One, due to the complexity of the residential communities in China, we should provide users with an input field where they can type in detailed address information. In addition to providing this option, we need to guide users on the best input information to input in this field, so they can provide the information we need. For example:
With guidance and clarification we can help users to provide us with accurate data. This benefits the users too, by helping to reduce confusion and lowering the number of errors they encounter.
Accessibility
Making the address form accessible on mobile devices is very important, and moreover, providing a convenient and smooth flow of the whole inputting experience would win over many fans.
A recent study by “We are Social” shows that China has 675 million unique mobile users. Furthermore, of the 668 million internet users in China 89% (594 million) are on mobile devices
Without getting too deep into the weighty issue of mobile accessibility, let’s take a look at some of the popular localised e-commerce sites in China and their approach in providing accessible forms and input fields:
When it comes to online shopping, delivery address input and its accuracy determines whether the customer receives their order on time. Furthermore, a correctly formatted, functional, accessible address input can help the user progress further with their purchase and complete the order.
Other Considerations
To provide a good experience with the address form for Chinese-speaking users, we should also consider:
- Convenience, convenience and more convenience! Typing Chinese isn’t easy sometimes, especially when you are on the go ;)
- The format of phone numbers — both landline and mobile. Consider extension, area code, etc.
- Postcode autofill or search
- Editing and managing addresses
- The length of the input’s label in Chinese characters compared with Latin glyphs
- Positioning of the labels
Through my research into address forms and the input field label positioning on various local e-commerce sites, I’ve discovered some interesting findings:
87% of the sites benchmarked displayed labels on the left on their desktop versions, but just 57% followed this practice on mobile. Notably, 2 of the sites featured don’t have mobile sites at all (1 of which is app-only).
Conclusion
In this two-part feature I have covered the essentials of Chinese address form layout, outlining areas where culture has a greater impact — that people sometimes overlook — and I’ve given some advice on what and how to enhance the UX for Chinese users.
If there is anything that I’ve missed out, or if you wish to discuss certain topics with me in more depth, please feel free to leave a comment or connect with me on Twitter: @g_han
Thank you for reading, have fun designing!
Here’s Part One of this feature.
