RTL LANGUAGE SCREEN DESIGN
A product from a medical device company with already-made designs was undergoing preparation for international market release. The purpose of the product is to guide the user through step-by-step processes of using the device with on-screen images and text with screen interactivity.
The purpose of the design change is to translate said product for 13 languages, two of which are read right-to-left (RTL). As someone who was taught to read in English as a left-to-right (LTR) language, training the eye to read "backwards" was a design hurdle.
My role in this was the sole designer along with one Human Factors engineer and software developer for implementation. This project took place over two months as we conducted interviews and usability tests, gathered data, and created the designs using Figma.
I have added filler content for presentation purposes as this project was completed under an NDA.
Overview
The Challenge
My Role
Research
Extensive research was undertaken in the development of a right-to-left language product design, with a primary focus on creating a user-friendly and culturally sensitive solution. The research encompassed various dimensions, including linguistic, and design considerations.
Pain Points
1
Users of RTL language products often face formatting difficulties when working in environments designed primarily for LTR languages. These challenges include issues with text alignment and issues related to the proper handling of punctuation and numbers, which are reversed in right-to-left scripts.
2
Redesigning a product user interface for RTL languages requires a deep understanding of cultural nuances like interface elements, icons, colors, or imagery. Addressing these cultural aspects while maintaining a consistent design can be a delicate balancing act.
3
The accurate translation of medical terminology and instructions is vital to ensure user safety. It's crucial to ensure that users can understand critical information without ambiguity to guarantee safe and effective use of the medical device.
UI Comparative Analysis
The research further extended to examining existing RTL websites and products to benchmark best practices and identify areas of improvement. By benchmarking these websites against established usability standards and best practices, we identified areas of improvement, ensuring that our own RTL website design could offer an enhanced user experience and meet the specific needs of the target audience.
Text box pre-filled letters are right-aligned
Numbers are read left-to-right
Site logo was not reflected since the characters are in Enlgish
Images and emojis flipped location but not orientation
Setting an iPhone to Arabic was a crucial step in conducting research for a right-to-left language user interface design.
It enabled us to immerse ourselves in the RTL environment and gain firsthand insights into the user experience.
This allowed us to evaluate how text direction, interface layout, and design elements would function in an RTL context, ensuring that our final design would be both functional and culturally sensitive.
Testing & Iterating
Linguistic experts were consulted to ensure accurate text rendering, script recognition, and typographic details specific to right-to-left languages.
4 total sessions were held, 2 in Arabic and 2 in Hebrew with native speakers/readers.
Each session used a visual simulator of the software and held virtually.
Initial sessions held in Arabic and Hebrew presented opposing information in regards to what orientation iconography was initially anticipated. When the final two sessions were completed, it was up to the decision of the lead engineer and myself to decide what to test further.
Usability Study Findings
1
Forward progress is represented from right-to-left; an arrow would direct to the left instead of to the right.
2
Standard icons did not require flipping as they are universal images like a clock.
3
Numbers in standard English format (1-2-3) are kept in the same order and not read right-to-left.
End Result
Final Design Layout
Screen layout flipped to match right-to-left language orientation
Arrow facing towards right to go back to previous screen
Steps have the period to the left of the number
Page number is 1st of three with forward arrow highlighted
Bulleted text is right aligned with bullet points to the right of each text line
Progress bar fills from right to left to indicate forward progress
English Example
Arabic Example
All images provided are mockups for portfolio purposes only.
Finally
Understanding the nuances of a product that was originally designed in a left-to-right orientation to then make it work for a right-to-left orientation came with significant challenges.
After the first round of interviews with both a Hebrew and Arabic-reading participant, there were some contradicting answers in regards to forward progress. It took two more interviews to confirm which orientation was correct.
Further iterations of the design will be critiqued on the actual product and not using a visual simulator to further enhance the user experience on right-to-left language readers.