Design around the decision
Each screen should show the information needed for the next action. A booking page needs time, availability and conditions; a comparison page needs the fields that distinguish the options. Avoid using the same card structure everywhere if it hides the information that matters for the particular task.
Test the same booking on a narrow phone
In this example, a user books a workshop, reads the cancellation rule and corrects a phone number. Run the journey in English and Traditional Chinese with realistic long titles and error messages.
| Content case | Pass condition |
|---|---|
| Long bilingual workshop name | Wraps without hiding date, price or the booking action |
| Invalid phone number | Error identifies the field and correction; existing input remains |
| Language switched after choosing a date | Selection and validation state survive the switch |
Check actual bilingual content
English and Traditional Chinese occupy space differently. Test long names, addresses, validation messages and narrow screens rather than translating only headings. Keep the selected language when users follow internal links, and make the language control reachable on mobile without losing the current task.
Make forms understandable and operable
Provide a visible label for each input and show which information is required. W3C’s forms guidance explains how labels connect to their controls. Test keyboard focus, error recovery and the final action with real entries. A placeholder inside a field should not be the only description of what belongs there.
Before you proceed
- Review complete journeys in both languages.
- Test long content at narrow widths and with zoom.
- Check labels, keyboard focus and error recovery.
