Mobile user interface designs need to be user and client friendly. The best way to keep this a top priority is to be able to easily present and adjust the design throughout the creation process. One difficult hurdle is not having access to a devise or designing for hardware that isn’t complete. When we’re working on a new mobile user interface design without access to hardware, there are a few things that make the process run smoothly and ensure our success. One key step is printing variations of what we’re doing on photo paper. 

We print out designs on glossy photo paper to mimic the look of the screen and to see our design with pixel-level detail. Spending time on the details in the beginning of a job is paramount in designing a successful mobile user interface.

Viewing an image of a mobile device on a computer screen doesn’t give an accurate representation of the finished mobile user interface design. The pixel density (pixels per inch) are much higher on a mobile device. When we don’t have access to hardware, our solution is to design the mobile user interface at real size in terms of pixels on a computer and then scale it down and print on photo paper at the real size the screen will be on the hardware. This gives us the real size that an image will be on a mobile device.

Using this method we can see if the layout and fonts work. It’s critical to determine if the user interface will be functional with big enough fonts and clear user interface elements.

This is also very handy when we’re designing for touchscreen mobile user interfaces as spacing is another issue that is distorted on a large computer monitor but solved by printing out. We can test to see if any user interface elements overlap and see if we need to adjust them for the mobile device.

Printing out our design also makes it possible to present our mobile user interface concepts to our client to give them a more accurate feel for the design. It also helps them in their presentations (remember the missing hardware…) We’ve seen our photos used in the past presented on plastic model prototypes. It was cool to see as people would dissect the interface and analyze it as if it was digital.

I’d love to hear any other User Interface Design challenges you face and you solve the problem.

When designing mobile user interfaces, we always face the design challenge of pixel density on a mobile device. What you see on a computer screen is usually larger than what you will see on a mobile device and sometimes we don’t have access to the target device we are designing for.

There are a few ways to address this and make sure that a mobile user interface design is appropriate when smaller. One solution is simply shrink it down to the exact size of the mobile device we are targeting. This is fine to determine if the general layout works. However, it doesn’t work well with fonts as the text can get distorted and then you can’t determine whether you’ve chosen a good font size.

Many graphics applications (Photoshop, Flash and Illustrator to name a few) allow simultaneous views of the same visual document. This is an extremely helpful tool when designing mobile user interfaces.

In the above screenshot, two views of the same document are shown. The one on the left is at 100% and the one on the right has been reduced to match the exact size of the mobile device screen we’re targeting for this user interface. We can make any changes to the image on the left and manipulate the view in any way we want while keeping the right view open to see how our user interface will look on our target mobile device. To do this in Photoshop, with a document open, select WINDOW>ARRANGE>NEW WINDOW FOR…

Another way we use dual screenshots is to make sure the user interface controls for a touch screen UI are spaced correctly. We simply touch the design that has been sized on the monitor to match the mobile device to determine if the user interface elements are far enough apart.

The Mac has a tool we like called Screen Shrink that allows us to literally shrink a screen so we can see what part of it may look like on a mobile device. This also works well when you see an inspiring design on the web and wonder if it could work well at a smaller size.