Writing for the small screen

Working on the small screen is a different discipline and one with lots of new rules, over the past two years we have learnt many lessons about how to write content, manipulate images and design applications that work well on the small screen.

Differing screen sizes

Sizes of small screens vary from the practically unusable 96x96 pixels to what is now becoming quite common 240x320 pixels (see images below).

These canvases do not represent the physical size of the screen - just the amount of pixels that there are on a screen, the canvas that we can paint on.

Confusingly the physical size of phone screens is getting smaller (or staying the same but the canvas sizes are increasing) because new technology now provides better resolution.

Screen resolution of a screen is measured in Dots Per Inch - DPI (the terms dot and pixel are often interchanged), in recent years the number of dots (pixels) that can be fit into an inch of mobile screen has increased from 96dpi to 153dpi. You still see 96dpi screens with a 96x96 canvas which means that the screen is 1 inch by 1 inch (2.54cm x 2.54cm) because they are cheap to make, but phones like the Nokia N95 now have a 240x320 pixel canvas that is 1.56x2.09 inches (3.96cm x 5.3cm).

I may have confused things now, but what I want to make clear is that canvas size on a phone is not the same as physical screen size, writing in a font that is 20 pixels high will result in text of physically different heights on two different phones.

When we develop an application we only know the canvas size of the phone we are working on - not the actual physical size of a phone screen.

What is usable?

Well 96 x 96 pixels is our view is next to unusable, fonts on these screens mean that readable text is physically quite large and you can fit between 10-18 words on a screen, this means the user must do a lot of scrolling, and also there is little space on the screen to make the experience a little nicer using nicer graphics and borders.

We view the minimum usable screen size as 128 x128 and this works well for mostly text based applications, but if images are important in your application then you must move up one more notch to 176x220 as a minimum screen size. An example of this is that in uHavePassed for the UK driving theory test we need to show pictures of road scenes and in our testing with the content for the UK driving theory test - the image detail on a 128x128 canvas was not good enough (even using the tricks mentioned later).

What are the restrictions?

The first thing you need to review when designing a mobile application is how the lack of “spare” or “extra” space on the phone screen will restrict the design, a good analysis of these restrictions and proper understanding of them means that you can in most cases turn the understanding into a positive experience for the user.

Firstly you must look at which parts of the content are actually going to be relevant to the user and if the current organisation of the content is ideal - questions to ask for text based content:

• Should the content be reduced?
• Should the content be re-ordered?
• How should the content be grouped?
• Should it be accessible from different perspectives?
• Would some users prefer summary content and others the original? if so how will this be enabled?
• Should the text be hyperlinked to allow better navigation and accessibility?
• Is it really relevant to the user?

For image based content you might want to consider:

• Is the image needed?
• Could an image that is used elsewhere be reused?
• Would it be better to crop the image to remove extra irrelevant content or resize it for the phone?
• Would panning and or zooming on the image help the user, would it get in the way or is it over the top for the purpose?
• Should we rotate the image to use the screen better?

Then you have to start looking at what can be displayed together, do the text and images need to be displayed together, how to show a link?

New Interactions

All of this should lead to a cut down set of content and a cropped set of images perhaps even a library of images for each canvas size.

We firstly like to create mockups of our projects using index cards to mimic the canvas size of a 176x220 phone and try to work out how interactions will work with a brainstorm. I plan to cover interactions in a follow up post.

UPDATE with iPhone canvas size

Here is the iPhone canvas and to get some perspective on this - it has twice the number of pixels of the largest screen we have shown above.

Should we think of this as a small screen? I think so - even though it has more pixels than any of our other examples - the actual size of the screen is still fairly small at 51.42mm x 76.38mm (2" x 3").

iPhone applications don’t waste space and are very aware of the lack of spare screen - so it is generally designed for as a small screen.

In landscape mode this screen is the equivalent of two Nokia N95 phones side by side (casing not included).