Qaf Dictionary — Education and Reference Design for Arabic reading for non-native users

Overview

Today, there are more than 600 million people that uses the Arabic script, making it the third most written language in the world. Therefore, it is safe to say that there are likely millions of people worldwide who are learning Arabic script, making it imperative to optimise the app for Arabic learners.

Client

Qaf Dictionary

Period

2022-23

Geography

South Sudan

Work Done

Website

UI/UX

Multi-user Dashboard & CMS

Services

Directionality of the Arabic script & UI

The Arabic script is written from right to left, which means that the first letter of a word is written on the right side of the page, and subsequent letters follow towards the left. The entire layout flows from top to bottom, right to left to match the reading behaviour and direction of the language. However, the dictionary app’s UI is kept left-to-rights to fit non-Arabic native speaker’s mental model.

Use of colors

Green is often associated with Islam and is extensively used in the Qaf Dictionary. It was the favorite color of Prophet Muhammad and is commonly used in Islamic art and architecture. It is also found in the flags of many Islamic countries, including Saudi Arabia, Pakistan, and Iran.

Make learning easier

The app includes transliteration (using a phonetic system to represent Arabic sounds using the Latin alphabet) and audio clips to help non-Arabic speakers learn Arabic pronunciation. Additionally, there is a search functionality for easy information retrieval, and visuals aid comprehension. Memory cards will be introduced in the future.

Content Management System

A dictionary app CMS allowing admin to add words ensures content accuracy, diversity, and relevance to user needs. This enhances user experience and engagement, encouraging more frequent use of the app.

Some tips on designing for the Arabic customers

Aligning items in a list

Maintain consistent alignment for all text items in a list, including those displayed in a different script. This is important as we tend to read from top to bottom.

Text-alignment

Paragraph alignment

Align text based on language, not just interface. For example, English text in a right-to-left interface should remain in left-to-right format for optimal legibility.

Left-to-Right (LTR)

Right-to-left (RTL)

Flip controls

A “Flip controls” feature in an app allows easy switching between left-to-right and right-to-left layouts. This accommodates Arabic native speakers and non-native speakers, enhancing usability and flexibility.

No flipping required

Flipping required

Some icons do not need flipping

Symmetric or circular icons like a gear or magnifying glass do not need flipping or mirroring in Arabic interfaces. Directional icons or icons with text and numbers may require adjustments depending on their orientation.

Using font typefaces that supports Arabic

To design digital interfaces with Arabic text, use fonts that support its unique features, like right-to-left directionality and complex letterforms. Fonts like Adobe Arabic, and SF Arabic ensure legibility and cultural appropriateness. Consider font size, spacing, and line height as well.

Numbers still go from Left-to-right

Arabic numerals are written from left to right like in Western languages, so they don’t need flipping or mirroring in Arabic interfaces. However, it’s important to ensure consistency in directionality and alignment when using numerals and Arabic script together.

Find our work

We bring the right expertise mix to create a holistic digital solution.

Personalized Fashion

Gamification in Tech

On-Demand Video Solutions

Find our work

F & B

Match Making Platform

Education Tech

Sustainability

We have recently received complaints that members of the public are targeted by some agents through WhatsApp who claim to be from Hipster Private Limited and using our UEN number of Hipster Private Limited to prove that they are legit Singapore companies... Read More

Our Work