UX design for feature phones

I’ve been working on a few projects where a significant portion of my users are feature phone users. It’s been an exciting challenge to remember back what the Web was like on the feature phone I first had waaay back.
Most of my recollection has been about how panicky I would get if I accidentally selected the “Internet” icon. I frantically and repeatedly hit Cancel until I was certain I had effectively stopped the Internet from starting up on my Nokia candy bar phone. I knew if I got online I would be charged some ridiculous fee for a sub-par Web experience. It went against everything I stood for.
My users are not panicky about the mobile Web as I once was; they are well accustomed to browsing the Web from a tiny screen. They are also used to paying for data. Thankfully for everyone, data is much cheaper than it was back then, so they’re not quite as panicky as I once was.
There are several differences in how people use the Web on tiny screens compared to how smartphone users access the Web. They perceive the Internet differently, for one [check out my post about Internet perception in emerging markets].
Another big difference is that people who navigate the Web using feature phones are likely limited to a number pad and directional keys to get around. If you have a 3rd generation Kindle, you can kind of simulate this experience [plus the added bonus of seeing what the Web might have looked like in the 1800s in black and white!]. However, it still doesn’t quite capture the experience of viewing the Web from a tiny 240 x 320 px screen. Test your work on a small screen if you possibly can.
Below are a few tips I’ve come across, as well as resources I’ve used and found helpful.

Design Tips

When browsing the Web on a small screen, you need for things to be fairly close together so you can easily move around the screen. It hurts me as a designer to pack a bunch of text tightly together, but it actually can help your users if you do.
A colleague recommended adding numbers in front of buttons and navigation. Let’s assume you have a navigation element called “About Us” and it’s the 4th in a list of 5 navigational elemtns. Consider changing it to “4 About Us” so people can just select “4” to get to that page without having to scroll through the previous links. You’ll also need to discuss this with the developer to make sure your app or site responds appropriately to number pad selection.
Note/disclaimer: I designed some screens with this functionality, and my client did not understand the numbers in front. So it’s possible that feature phone users are accustomed to browsing the Web without this design feature. However, each user group is different, so I recommend testing out both versions on users, if you can.

April Deibert from the Innovation Series also wrote a terrific article on Google’s and Facebook’s interest in emerging markets where she gives some excellent advice at the end. My favorite points of hers are:

1. Be aware that smart phones, wireless data packages, and wi-fi are still out of reach for many across the globe.

6. Design websites and apps that are fast loading and don’t use much data to browse. Limit the amount of graphics, images, and videos to a need-to-know basis. Having an all text site may seem overtly simple, but may be very effective at reaching a particular population.

9. Deliver content in the local language. Larger services may be able to automate this process better in the future by geo-targeting regions and auto-translating pages into a list of local languages.

13. Invest in UX testing at the local level.

These might seem like obvious points to some, but they’re key to targeting emerging markets.

Resources

These are the feature phone resources I’ve used. There aren’t many, unfortunately, but I was grateful to find any at all. I’ll update this list as I find others.
  • Google on supporting feature phones, [many thanks to @davatron5000 for this link]. Google doesn’t say much, but at least it’s something.
  • BBC on supporting feature phones. Basic stuff, but they do have some Photoshop files that were helpful for me when I was getting started.
  • Nokia’s UX guidelines for the Series 40. Assuming the data for this chart is reliable, the Series 40 phone is very popular in emerging markets. There are 84 different models of the Series 40 phones, whose screen sizes range from as small as 128 px wide (last updated May 2013) to 208 px wide (last updated March 2012) to 320 px wide (announced 2013).
  • Cartoonized lists phones by brand and model, and gives the accompanying screen size. This is very helpful if you have the name of a popular brand or model of phone you’ll be working on and you don’t know the exact screen size.
  • Phone emulator. It’s a bit buggy, but it’s better than nothing if you don’t have a feature phone to test on. I like to use the LG U970, which has a screen of 240 x 320px. Plus, it gives you an easy way to see how other major sites handle small screens, too. 

Internet perception in emerging markets

Remember the CDs AOL used to send out that gave you 176,327 free hours online? A high school friend’s mother was convinced [up until even a few years ago] that going to aol.com via the application was the only way to get online.

I thought back to this when I recently reviewed some data from research a colleague did for one of my projects. She conducted UX research using a survey in San Salvador in October 2013. The survey included a few questions about the person’s technology usage; one of those questions asked for the person’s data plan. Roughly 13% [99 of 753] stated that Facebook Zero was their data plan. Having never heard of Facebook Zero before, and never trusting a company’s own statements about its products, I set out to find out more about it.

Christopher Mims from Quartz does an amazing job of outlining Facebook’s history in emerging markets with Facebook Zero. Reading this article reminded me of my own early days on the Web. Back then, I thought Internet Explorer was the only way to access the Internet. [It didn’t take long before I was using multiple browsers and encouraging others to do the same.]

I imagine many of these users, and likely others in emerging markets, have a similar experience with accessing the Web. The Web is something you access through <insert big company provider name here> first. The Internet becomes synonymous with <insert big company provider name here>.

April Deibert from the Innovation Series also wrote a terrific article on Google’s and Facebook’s interest in emerging markets. This article not only illuminates the two companies’ history in emerging markets, but also gives some excellent summary points at the end. My favorite practical points that she gives are:

1. Be aware that smart phones, wireless data packages, and wi-fi are still out of reach for many across the globe.

6. Design websites and apps that are fast loading and don’t use much data to browse. Limit the amount of graphics, images, and videos to a need-to-know basis. Having an all text site may seem overtly simple, but may be very effective at reaching a particular population.

9. Deliver content in the local language. Larger services may be able to automate this process better in the future by geo-targeting regions and auto-translating pages into a list of local languages.

13. Invest in UX testing at the local level.

Obviously, as a UX designer, I’m a huge fan of her last point, but the point still stands. You can’t design for users well without UX research and testing. Testing your UX on colleagues who exclusively use smartphones does you little good if your work is geared at feature phone users.