The Blog

Whether it’s for Android or iOS, one of the most important things to get right is the physical size of UI elements on the screen.

Whenever I design Android UIs, I hook up my phone via USB and transfer PNGs of the interface to view in Full Screen on the phone. This gives a really good indication of the size, clarity and legibility of all the elements straight away. You can probably do this with the emulator too, but I like to hold the phone in my hand and tap at the static image to test how it feels. It can actually lead to developments in the flow of the app, even though it doesn’t actually work. It’s a good idea to use this alongside wireframes to think about your user experience.

I don’t own an iPhone – yet. For now, I use an HTC Hero (T-Mobile UK) with a 3.2″ screen at 320×480. The screen is actually pretty good at displaying small elements and text that other devices such as the Wildfire struggle to show (bear this in mind when designing for Android).

It might sound a pain to plug in your phone and move files about, but the Android OS has Developer settings to stop the screen going to sleep when connected and a handy Connection Type toggle screen to revert back to charge once you’ve finished copying your files. You don’t actually need to unplug it everytime. Once the Memory Card has mounted, you can view your images and make sure your UI is pixel perfect.

Don’t forget that due to the different resolutions of devices, this is really just a test to see how small or large your elements can go before they become unusable.