top of page
RTL Phone_edited.png

RTL LANGUAGE SCREEN DESIGN

Background

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

Facebook Login Page 2017 Arabic

Site logo was not reflected since the characters are in Enlgish

Images and emojis flipped location but not orientation

Enlgish Facebook Login Page 2017
iPhone English.png

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.

Research

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.

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.

Test

End Result

Final Design Layout

LTR Screen Design Example

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

RTL Scren Design Example

Arabic Example

Result
Conuclusion

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.

bottom of page