Nowadays everything seems to be getting smaller; SIM cards, computers, prices for TVs, transistors, pixel sizes of video screens. So, why not also reduce the size of a font or icon to get more information into your app? Small graphics look sharp and crisp on small displays with very low pixel sizes. It’s very tempting.
The answer is simple: We are now getting to a saturation point—actually we have been there for a while. In this context, saturation means that relevant UI components will not benefit from higher resolution.
Take the case of fonts. There is a minimum font size which people can read conveniently without glasses at a certain age (see Guy Kawasaki’s formula for minimum font size in a presentation). The issue isn’t limited to fonts, however.
It’s important to be aware of a big trap in developing for mobile. You are not developing for people using a 30 inch display, but for people using a 3 inch display. As a rule of thumb, today the pixels on your computer screen are roughly double the size they are on your mobile phone screen. The font you are seeing from the emulator has twice the size you see on the actual phone. Maybe you have enlarged the output of your emulator, say double. So you see the font four times larger than what your user would see on-device.
Pro tip: Test your app on a real phone!
Let’s continue the thought from a different point of view. You are sitting in a comfortable chair. Your light is not flickering. Your computer is not moving anywhere or shaking because it is not installed in a bus which is driving on a bumpy road. If there is direct sunlight on your computer screen you can block the sun out by either closing the blinds or turning the screen. You do not have to do initial readings from a new screen all the time because you sit in front of the screen for a longer period and you know the screen.
In addition, people grow older and in many cases their eyesight gets worse. Double the age, double the font size!
Don’t forget to consider eye-finger coordination of people using a touch-enabled phone. At the computer you use a mouse on a target 16 times larger than on a phone, with a pointer device of 10th of a millimeter (or better) precision. Your user in the wild, commuting with a phone and your application has only one hand free (the other hand is used for securing herself), and she can probably only use her thumb with a precision of a bit better than a centimeter. Even worse, the actual press down point is a bit lower than the perceived center of the finger tip due to parallax.
Put it this way; while developing, you have plenty of unfair advantages over your user and you must be aware of that.
Now that you are aware of your advantages, what should you do? For full touch phones, keep in mind the following guidelines:
- The minimum font size should be not less than 14 pt
- No side of a touch area should be less than 7 mm (43 pixels in full touch) for finger use
- For thumb use (in the case of one handed use) no side should be less than 9 mm (55 pixels in full touch)
- Include margins of 1 mm (6 pixels in full touch) between all touch areas
- Use icons large enough for its purpose.
- Further information can be found in the UX checklist.
This all means that you cannot fit endless amounts of content on a phone screen and especially on phones with smaller screens (3 inches or smaller). This will be a real challenge for you, but not impossible.
A final piece of advice: Test—on a real phone and with a real user. Take your mom on the shakiest bus ride you have in town and make her operate your app.
With these few considerations, you can help ensure that your app will be accessible for most of your users and even better, they will thank you (at least subconsciously) for paying attention to their needs.