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 96×96 pixels to what is now becoming quite common 240×320 pixels (see images below).

An example 96x96 pixel canvas

An example 128x128 pixel canvas

An example 176x220 pixel canvas

An example 240x320 pixel canvas

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 96×96 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 240×320 pixel canvas that is 1.56×2.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 176×220 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 128×128 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 176×220 phone and try to work out how interactions will work with a brainstorm. I plan to cover intereactions in a follow up post.

UPDATE with iPhone canvas size:

An example 320x480 pixel canvas

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).

• What we’ve been up to?

  This could be of those blog posts that explains why there has been a long absence of blog posts, then goes on to explain explain why there will be more in the future and is shortly followed by a lack of blog posts again. I’ll try to make sure it...

• Impressive mobile solutions from the Polytechnical University in Valencia

  Today I was visiting the Polytechic University of Valencia (La Universidad Politécnica de Valencia) and got to see some of the interesting work they are doing there with mobile phones and learning. Within the DISCA department they teach two courses on programming mobile phones which are project based courses. I...

• Handy education – not mobile learning

  When I first got involved with mobile phones and education – my first impressions of the usefulness of having support on your mobile phone were completely wrong. The first tool I wrote was a tool to help me learn German vocabulary – I had a list of 1000 words that...

• iPhone / iPod Touch canvas size

  Above is the canvas size of the iPhone and iPod touch  – quite big isn’t it! I’ve updated the popular post we have on designing for the small screen to include some notes on the iPhone / iPod Touch screen canvas. Just showing the screen canvas on a normal...

Related posts brought to you by Yet Another Related Posts Plugin.

Tags: development, mLearning, mobile development, mobile phones, mobile-learning, mobilelearning, small screens