Sharing a UI design across Chinese and English

Resolve meaning before comparing length

Build a terminology list containing actions, states, errors, field names and help text, with each item’s location and business meaning. “Close” might dismiss a dialog or close an incident. A translator given only an isolated word can produce fluent text that implies the wrong action. The business owner should approve action meanings; shortening an English label is not a reason to make it ambiguous.

Mark identifiers that must remain unchanged, such as equipment codes, API fields and agreed product names. Record units, variables and plural forms. Avoid assembling a sentence from fragments whose order cannot change, because that can prevent an equivalent translation even when every individual word is correct.

Allow layouts to accommodate real translations

The W3C article on text size in translation explains that translated text can occupy different space, with short labels particularly exposed. This supports flexible layouts, not a universal expansion percentage. Its historical examples should not become fixed acceptance thresholds for every project.

Allow buttons and message areas to wrap or expand according to component rules before reducing text size. Navigation, dialog titles and table headers need separate checks. Wrapping body copy does not prove that a single-line status badge remains usable. Where an abbreviation is necessary, preserve access to its complete meaning and verify that the intended users understand it.

Separate language, locale and business definitions

• Money: identify currency, precision and whether conversion occurred. Switching to English must not turn a renminbi amount into a dollar amount.
• Dates: choose an unambiguous display form and distinguish formatting from a change to the underlying date.
• Time: identify the event’s source zone and the display zone. A language change must not silently alter the business day assigned to a record.
• Numbers: define grouping, decimal precision and units, including their meaning in exported output.

As a hypothetical example, an event shown in Beijing time on the Chinese page appears in local time on the English page without explanation. A reviewer may mistake it for a different occurrence. The remedy is an agreed display-zone rule and an understandable conversion indication, not merely identical text strings.

A language switch must not silently restart the task

Specify whether filters, pagination, the current record and unsubmitted input survive a switch. If the implementation cannot preserve input, explain the effect before switching and allow cancellation. Language must not change account permissions, selected business objects or submitted results. Automatic browser translation is not a substitute for the site’s supported translated states and errors.

Include dynamic content in the scope discussion. Custom field labels, descriptions from external alarm systems and uploaded filenames may have no translation. Preserve the original with a clear source where appropriate rather than inventing a translation or hiding the record. Interface localization and translation of all business content are different commitments.

Run equivalent tasks in both languages

1. Prepare representative long names, missing values, plural quantities, negative numbers, dates and values with units.
2. Complete lookup, detail review, submission, correction and return in both versions. Compare the resulting business records.
3. Inspect narrow screens, dialogs, headers and buttons for clipped words or missing parts of an action.
4. Switch languages with and without unsaved input. Verify the agreed preservation or warning behavior.
5. Review exports and notifications for equivalent names, currencies and time zones. Correct on-screen formatting does not prove that downstream output is clear.

A shared visual standard does not require the same line count in every language. Equivalent meaning, hierarchy and task paths matter more than identical wrapping. Text must remain complete and readable. If the commission delivers only Chinese designs, record English validation and any resulting changes as outstanding scope instead of treating them as implicitly accepted.

Prepare the terminology and long-text samples for equivalent tasks in both languages, and choose the devices using the display adaptation requirements. Include language-switching states in the prototype handoff. State the delivery languages explicitly in the brief for UI design services (Chinese); approval of a Chinese design should not silently count as acceptance of its English counterpart.