Designing for Urdu
Developing a Design Guideline for Urdu language
A usability analysis of a multilingual application to propose design guidelines for better integrating Urdu into digital solutions.
Fig 1: Multilingual prototypes used for usability testing.
My Role
UX Researcher
Duration
8 weeks
Design Tools
1. Figma
2. Google Forms
R&D Methods
1. Expert Interviews
2. UX Audit
3. Usability Testing
4. High Fidelity Design
Problem
The majority of mobile applications in Pakistan are in English language, despite Urdu being the lingua franca of the country. This is primarily due to:
limited technological support for the Urdu language due to the complex nature of its script.
high illiteracy levels (42%) among users in Pakistan, with even lower levels of English literacy.
no standard design guidelines for Urdu language to support application development.
Motivation
Due to the limited technological support for the Urdu language, a significant portion of Pakistan's population—particularly older adults and residents of rural areas—struggles with mobile interfaces that are exclusively in English. However, in recent years, specifically since 2020, we have witnessed a surge in local startups developing mobile applications with Urdu interfaces.
Despite this growing interest in Urdu applications, many developers still struggle to implement best practices for Urdu design. We cannot blame the developers too. There is no Urdu-specific design guideline!
The Challenge
We set out to develop a standardized design guideline for Urdu language that developers can consult when creating Urdu mobile interfaces.
More about Urdu
Before I tell you about my design process, I want to explain why Urdu—despite being the world's 10th most spoken language—is hard to integrate into technology.
Urdu is an RTL (Right-to-Left) language
Fig 2: WhatsApp in English (a Left-to-Right language)
Fig 3: WhatsApp in Urdu (a Right-to-Left language)
Like Hebrew and Arabic, Urdu is a right-to-left (RTL) language. A key distinction between RTL and left-to-right (LTR) languages is "mirroring," where the direction of content is reversed, affecting the alignment of icons, text, and numbers.
The RTL design guidelines must be tailored to the specific script and language. Unfortunately, there has been no effort to develop RTL design guidelines specifically for Urdu.
Urdu is written in Nastaliq script
Fig 4: Text written in Naskh script
Fig 5: Text written in Nastaliq script
The RTL languages like Persian, Urdu and Arabic can be written in Naskh script (see Figure 4). However, Naskh is less familiar to Pakistanis, as most physical Urdu content is traditionally written in the Nastaliq script (see Figure 5).
However, Nastaliq script complicates coding in modern technology due to its complex vertical and horizontal strokes.
Roman Urdu is hard to standardize
Most Urdu speakers use Latin characters for texting, a practice known as Roman Urdu. For example, the Urdu term for 'language,' زبان, can be transliterated as zubān, zubaan, or other phonetic equivalents in Latin script.
However, there is no standardized spelling for Roman Urdu, leading to inconsistencies in its representation.
Design Process
We conducted a two-part usability study to identify workflow issues in existing applications and evaluate usability problems in a newly designed interface. Insights from both studies were used to develop an Urdu-specific design guideline.
Identifying issues with existing applications
We selected 3 applications with different language interfaces: English, Urdu, and Bilingual (a combination of English and Urdu).
Figures 6-8 illustrate the mobile applications we selected for testing.
Fig 6: Uber Eats - Online food ordering and delivery platform - English application
Fig 7: Urdu News - Urdu news platform - Urdu application
Fig 8: Careem - Ride sharing platform - Bilingual application in Urdu and English
We began with a testing of popular user workflows with 4 participants and noted down the task completion time.
The goal was to pinpoint usability problems unique to Urdu digital content to develop a mobile application tailored for Urdu, adhering to the best practices in design guidelines.
Insights from usability tests
We calculated the completion and error rates for each user flow and followed this with qualitative interviews. Our findings revealed that:
Users apply mental models developed from their experience with English applications when navigating Urdu applications.
Users find it challenging to comprehend Urdu content presented in the Nastaliq script.
The visual elements of Urdu applications significantly impact the ease of navigation.
Designing and testing applications with best UI/UX practices
The insights from our initial usability tests helped us identify key considerations for integrating Urdu into digital solutions. Building on these findings, we developed prototypes of a health application with four distinct interfaces: English, Urdu, Roman Urdu, and Bilingual (see images below). We then conducted between-subject usability tests with 12 participants.
We chose a health application because users are familiar with medical processes such as booking appointments, making it a relevant and practical choice. The inclusion of a Roman Urdu interface was a deliberate design decision to assess user reactions to this format.
The complete Urdu version of the prototype performed the poorest in our usability tests. These results confirm our hypothesis that users' mental models are more aligned with systems that use and support the English language. This preference for English systems is largely due to English being the dominant language in digital interfaces throughout Pakistan, including mobile applications, televisions, and desktop software.
Design Guideline
Based on our evaluations, we propose developers use a combination of Urdu and English when designing interfaces for Urdu users. Our design guideline provides insights into UI elements that could enhance the presentation of the Urdu language.
Text
Size. Apply a larger font size and greater vertical height for the Nastaliq script than its English equivalent to enhance content visibility.
Spacing. Increase vertical spacing between Urdu words and other elements to establish textual hierarchy and prevent words from intercepting vertically.
Terminology
Use English for domain-specific technical terms. For example, the term 'cardiologist' in Urdu typically retains its English pronunciation.
CTAs
Use English for CTA phrases. Urdu translations of these phrases, when available, are typically less common and usually only transliterations.
When a CTA accompanies Urdu text, align it with the parent component’s orientation.
Time and Numbers
Retain numbers and time in Latin script.
Reflection
This project holds a special place in my heart, as I have seen my parents and other older family members struggle with mobile interfaces that are exclusively in English. It was my first endeavor to create a practical solution for mobile developers aiming to design applications for Urdu-speaking users. The project emphasized heuristic evaluations, providing me with a significant learning opportunity. Setting up usability tests and analyzing data on this scale was a valuable experience, as I had never conducted such extensive usability studies before.
However, our study was not without limitations. For instance, we used a stopwatch to record task completion times, which may have introduced inaccuracies. Additionally, some reviewers might critique the fact that the mobile applications selected for the initial usability test serve different purposes, which could complicate comparisons between their usability.