UI Does Matter!
A conversation with human

From Urdu Writer to iOS8 Urdu Keyboard

A tiny app put a dent in the Apple Universe!

Sunny day of June 2010 — when our first Urdu app for kids “Alif Bay Pay: Urdu Alphabets” finally was submitted to the Apple App Store. Same year in which my daughter turned 3.

Why I embark on a journey to create the Urdu apps?

It was actually my Personnel mission. As a Pakistani living in United States of America, I witnessed Pakistanis are bit shy about promoting Urdu in their household. I noticed parents were lying about their kids language in school. They were putting “Language spoken at home” as English. Totally absurd and when we inquired them why you guys are doing it? Their stance was so that kids won’t be going through an optional class for the kids who’s first language is non-english.

This is how my story begins. I was blessed with my first born, a beautiful daughter, in June 2008. On this special day, my Bhaijan, a close relative who is like a father to me, gave me an important piece of advice:

“Apnay bachoon ko apni madr-e-zaban sekhana – agar nahi sekhai tu future may tum chahaye 10,000 dollar bhi kharach karo gay tu kuch hasil nahi hoga, aur wo apni zaban aisay nahi sekh sakaingay jaysay tum bachpan may sekhao gay”.

(If you don’t teach your children their mother tongue, then in the future, even if you spend 10,000 dollars, you won’t achieve anything, and your children will never learn Urdu the way they would have learnt it if you would have taught them when they were younger.)

My Bhaijan has been my guardian, my coach, and my mentor after the death of my beloved father. Hence, his advice means the world to me, and I have always kept it close to my heart. Bhaijan believes that culture is strongly associated with language, and we ought to do as much as we can to teach our young ones our language.

After the launch of our first app, my God Father called me and ask me “Mudassir, is it possible to write Urdu on iPhone?” it was around August 2010. I told him yes it is possible and we were talking about why Arabic Keyboard at that time on iOS 6 is not full-filling the need of Urdu speakers and writers.

Some History of Urdu Language (few bits from Wikiepdia too):

In this article I won’t touch the Urdu language history, it needs a whole new article. It is a ginormous task to write down the whole history in 1000 or less. The Urdu language received recognition and patronage under the British Raj when the British replaced the Persian and local official languages of North Indian states with the Urdu and English language in 1837. In 1837 it became an official language of the region along with English now known as India and Pakistan. Before that it was a communal language without any official standards. The birth of Urdu became bit necessary for those Mughals who were invading India between 1536–1837. At first they brought Persian language with them then in the end they adopted Urdu as their language to communicate with the masses. This seems like Urdu was already growing up among the locals.

There is a conflicting stories about the origin of Urdu, however the actual Urdu born under the supervision of a sufi Hazrat Khawaja Nizamuddin. The early form of Urdu was born in between 7th and 13th century. And in 13th Century the actual script (that you are witnessing today also known as Modern Standard Urdu) was adapted by Amir Khusro (disciple of sufi Hazrat Khawaja Nizamuddin Aulia).

At that time Urdu was known as Hindavi. An interesting bit about Urdu is which may be called Hindi-Urdu when taken together. The colloquial languages are all but indistinguishable, and even though the official standards are nearly identical in grammar, they differ in literary conventions and in academic and technical vocabulary, with Urdu retaining stronger Persian, Central Asian and Arabic influences, and Hindi relying more heavily on Sanskrit..

Before the Partition of India, the terms Hindustani, Urdu, and Hindi were synonymous; all covered what would be called Urdu and Hindi today. The term Hindustani is still used for the colloquial language and lingua franca of North India and Pakistan, for example for the language of Bollywood films, as well as for several quite different varieties of Hindi spoken outside the Subcontinent, such as Fiji Hindi and the Caribbean Hindustani of Suriname and Trinidad.

Back to the Future:

As you learn a very bit of Urdu history, let’s fast forward and back to the story I begin with. In August 2010, when we were done with a simple prototype of writing Urdu on iPhone. I then left with a daunting task — The Urdu Keyboard design for iPhone. Let me clarify this Phonetic Keyboard is not a new term in software industry. It is available in desktop software used for Urdu Publishing. However at that time when we started our Urdu Keyboard design there was no such extra effort happened for Urdu keyboard on smartphone specifically for iPhone.

I then started working on an idea of bringing the phonetic keyboard on iPhone for our app. We called this app “Urdu Writer”. Idea was very simple, an app that allows you to write in Urdu and let you share your Urdu script on Facebook, Twitter, SMS and Email. Simple, no bells and whistles, just pure Urdu writing experience. I did three iteration of keyboard design, the latest version of our app has third iteration.

Once we launched the app, we were not expecting too many downloads, because there were a fair bit of uncertainties like who is going to write beside select few in Urdu on iPhone where as people were already utilizing the romanized version of Urdu. And besides that young generation specially living in India and Pakistan are really getting stranger to Urdu.

Guess what? We were wrong. As of today since its inception in October 2010, there are 170,000 downloads, with 600+ reviews in worldwide App Store, out of them 500 are all 5 stars, 4 million session served so far, weekly sessions are 20,000!

Then we heard about iOS 8 in June 2014, there we start hearing from Urdu enthusiasts that Urdu keyboard is available now as a system keyboard just like many other language keyboard.

By the way, if you are in US and search “Urdu” our app (Urdu Writer) comes on top of the list


When you compare iOS 8 Urdu keyboard with our Urdu Writer. It is 95% identical. Super amazing!!! We are so much flattered that finally a big giant company mimicking our work and brought the neglected language in to its main stream devices.

All credit goes to Urdu writer for paving the path for Apple to realize that there are people who are in love with Urdu. Even though Hindi and Urdu considered the same language yes the roots are the same but they actually are not the same languages anymore. The written script is different and the major difference is that Urdu relies on Arabic/Persian script, whereas Hindi is actually borrowing words from Sanskrit.

However, Hindi+Urdu are on the fifth of the most spoken language in the world. There are 400 million people who speak Urdu according to BBC. In the end what makes me happy is that we were 4 years ahead of Apple, we made them aware of Urdu and finally our efforts paid off and Urdu keyboard is here on iOS 8. You don’t need to install Urdu writer anymore, if you are running iOS 8. I will keep the Urdu writer in the App Store as long as I can as mark of appreciation to all those fans who downloaded it and helped us achieve that success!

Here is the comparison of Urdu writer keyboard and Urdu keyboard in iOS 8


Here is what I noticed in existing iOS 8 Urdu Keyboard which if improved will help the usability.

At the moment if you see in Urdu Writer keyboard, I kept the Backspace on the left side the keyboard and “Shift” key on the right side of the keyboard. However, in iOS 8 it is reverse, which is a bit challenging. Reason for switching above captioned keys placement is function of “Backspace” is to delete the word, and these kind of action where user has to delete the data/character should be intentional and for that matter it should be a bit of stretch to reach, kind of like registering in the person’s mind that “I am now going to delete the character intentionally”, to avoid the unintentional action which may lead to frustration.

How to enable Urdu Keyboard in iOS 8?

Go to Settings > General > Keyboard > Keyboards > Add New Keyboard
Select “Urdu” from the list of Keyboards, voila!

I can help!
I will be very happy to help Apple build an amazing Urdu Keyboard, and I am all for it! If they need me to help them out to build the world class Urdu Keyboard, I will bring my background knowledge, plus my UX expertise with it.

UX Office Hours

@ Are you looking forward for a free one hour consultation related to the UX?

Get in touch with me during UX Office Hours every week on Thursday between 10pm to 11pm of Pacific Standard Time

Just buzz me on Twitter and I will be able to help you with any UX related queries!!!

My Twitter ID is mmudassir

Please spread around

Ahmed Khalid Kamran Shahid Butt Jawwad Farid Ahmed Siddiqui Ahmad Kashmiri

Instagram UX Designer for their Windows Phone

If @Facebook need an @Instagram UX Designer for their Windows Phone, let me know I am all ear.

Thanks

Track record Pixl for Flickr and as per WPCentral it says….”Pixl is a beautiful Flickr app for Windows Phone”

http://m.wpcentral.com/pixl-beautiful-flickr-app-windows-phone

Oh by the way, part-time please mostly in the evening. I don’t mind couple of weekends though.

Revival of the Urdu Script

How Apple, Microsoft, Google and HTML community can save the dying Urdu Nastaliq script from the hegemony of the Western alphabet and an…

Continue reading on Medium »

Revival of the Urdu Script was originally published on UI Does Matter!

Shneiderman’s “Eight Golden Rules of Interface Design” in Urdu

Alright guys, another one in Design in Urdu series! This time Shneiderman’s “Eight Golden Rules of Interface Design” translated in to Urdu. Enjoy!

[PDF Download]  Shneiderman_EightGoldenRulesDesign_Urdu

Source: http://designprinciplesftw.com/collections/shneidermans-eight-golden-rules-of-interface-design

Shneiderman’s “Eight Golden Rules of Interface Design” in Urdu was originally published on UI Does Matter!

Accordion’s Expand/Collapse Icon Placement

Accordion component’s expand/collapse icon on smartphone should be on the right-side instead of left-side. 90% are right-handed user. And also a usability factor for large screen smartphone

And example from JQuery:

Best examples I found from across the web are from TheVerge, TechCrunch, Gizmodo,  CitiBank and Bank of America are as follow:

Do you have a worst example of Accordion component implementation?

Worst examples from Wikipedia so far:

 

SIM Card + Micro SD Card = Ultimate Storage Expansion

I just got Android (Google Nexus 5), and dedicating myself to use this Android for next 6 month or so.

Continue reading on Medium »

SIM Card + Micro SD Card = Ultimate Storage Expansion was originally published on UI Does Matter!

The Beard & Favorite Default

Okay, so today I lost my 3 years old beard. I start sporting beard after the birth of my second child almost 4 years ago.

Continue reading on Medium »

The Beard & Favorite Default was originally published on UI Does Matter!

Ten principles for good design in Urdu!

Dieter Ram’s Ten principles for good design in Urdu and English: (hopefully I will be done with this translation in next few days)!

English:
These design principles from the legendary product designer Dieter Rams has influenced not only the iconic product designs from Braun in the 1960s, but also the design of Apples products.

“My heart belongs to the details. I actually always found them to be more important than the big picture. Nothing works without details. They are everything, the baseline of quality”
– Dieter Rams

Good design is innovative

The possibilities for innovation are not, by any means, exhausted. Technological development is always offering new opportunities for innovative design. But innovative design always develops in tandem with innovative technology, and can never be an end in itself.

Good design makes a product useful

A product is bought to be used. It has to satisfy certain criteria, not only functional, but also psychological and aesthetic. Good design emphasises the usefulness of a product whilst disregarding anything that could possibly detract from it.

Good design is aesthetic

The aesthetic quality of a product is integral to its usefulness because products we use every day affect our person and our well-being. But only well-executed objects can be beautiful.

 

–Urdu Version–

دس اصول اچھے ڈيزائن کے

یہ اصول دنیا کے مشہورومقبول مصنوعات کے ڈزأینر ڈأٹر رام کے ہیں۔ ان اصولوں نے نا صرف Braun جیسی مصنوعات کو متاثر کیا ہے بلکہ اس کے اثرات آپ Apple کی مصنوعات میں بھی ملاحضہ کرسکتے ھیں۔

 بقول ڈأٹر رام کہ:  “میرا دل صرف تفاصیل کی طرف ہی مایل ہے۔ تفاصیل سب سے زیادہ اھمیت رکھتی ھیں بانسبت وسیع نظریہ سے۔ تفصیل میں جاےٴ بغیر کچھ حاصل نھیں ہوتا۔ یہی سب کچھ ہے، معیار کا ماخذ”

اصول

۱: اچھا ڈيزائن جدید ھوتا ہے

جدت کے ممکنات لامحدود ھیں۔ ٹیکنولجیکل بالیدگی ہمیشہ ایک نےٴ ڈيزائن کی اَخترا کی زامن ہوتی ہے۔ جدید ڈيزائن  ہمیشہ جدید ٹیکنولجیکی کے ساتھ ہی وجود پزیر ہوتی ہے، اور یہ کہ جدید ڈيزائن کا یہ چکر کبھی ختم نہیں ہوتا۔

۲۔ اچھا ڈيزائن مصنوعات کو کارآمد بناتا ہے:

مصنوعات استعمال کرنے کے لیے خریدی جاتی ہیں۔ یہ فعال نہ صرف مخصوص معیار کو پوراکرتاہے، بلکہ نفسیاتی اور جمالیاتی اطمنان کابھی سبب بنتا ہے. اچھا ڈيزائن ایک مصنوعات کی افادیت پر زور دیتا ہے. اور اس بات سے اجتناب کرتا ہے کے صارف کے لیے اس میں افادیت کے پیشِ نظر کمی پیدا ہو۔

۳  اچھا ڈيزائن جمالیاتی ھوتا ہے

جمالیاتی خوبی جُزو لازِم ھوتی ہے مصنوعات کے کارآمد ہونے کی۔ کیونکہ روزمرہ استمعال میں آنے والی اشیأہ اپنا اثر ڈالتی ہے شخصیت پر اور ھماری فلاح کا سبب بنتی ہیں۔ لیکن بہترین طریقہ سے تکمیل شدہ اشیأہ ہی خوبصورت ہوتی ہیں۔

Ten principles for good design in Urdu! was originally published on UI Does Matter!

Magnetic Strip and Barcodes

So at Union City BART station I noticed two old ladies were struggling to pay for their parking ticket. What was annoying to them was the following:

1) how to enter the lot # where there car was parked?
2) what type of parking they need to select, is it All Day, 3 hours etc?
2) how to swipe the credit card/debt card to pay for the parking?

I approach them and help them out, but I was just giving them instructions what to do for which step.

Guess where they stuck most? First they complained because of angel of the sun the screen was unreadable. So they changed the parking payment meter. Now they were able to understand first two flow. And they got stuck on Step #3, which is payment.

They need to quickly insert the card and pull it out. This is bit difficult for old people, they tend to be bit slow.

Why not create a duo-magnetic strip which can be designed as barcode? Or best of all why not make system forgiven, in the sense when it sees card is inserted and it didn’t pull out for more then expected duration. Then it should not throw an error this will be easy for seniors to pay and it won’t impact the young age group either

Magnetic Strip and Barcodes was originally published on UI Does Matter!