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.