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 computer monitor I think is quite instructive about how much smaller it still is to a computer - but the post also shows the canvas size in relation to other mobile phones.

Tags: , , ,

11.Aug.08 devices, handy education, m-learning, mLearning, mobile development, mobile phones Comments (0)

Mobile Megatrends conference

Ajit Jaokar is organising a great conference about the next mobile megatrends - but too far away for me to attend!

If you are lucky enough to be in California on the 8th of September or even luckier and are there all the time - please have a look at the website and consider attending : http://www.mobilewebmegatrends.com/.

There are people speaking who are well worth listening to - in addition to Ajit there is Barbara Ballard who is always worth listening to about usability on mobile devices and should have an interesting perspective on the upcoming megatrends.

OMTP’s new initiative BONDI will also be discussed and I think the talk around this might be very interesting.

I’ll have to cope with just twitter and the resulting blog posts for my understanding of the next mobile megatrends.

Tags: , ,

11.Aug.08 mobile development Comments (0)

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 96x96 pixel canvas

An example 128x128 pixel canvas

An example 128x128 pixel canvas

An example 176x220 pixel canvas

An example 176x220 pixel canvas

An example 240x320 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).

Tags: , , , , , ,

16.Jul.08 m-learning, mLearning, mobile development, mobile phones Comment (1)

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 is not!

So what have we been up to?

We have been increasing the number of users of uHavePassed and currently have just over 3,000 people who have used it to pass their UK driving theory test. We have worked a lot on compatibility of uHavePassed with various handsets and also the communications that are used from the handset to our synchronisation server. We are really pleased how this is helping people and each bit of feedback has been great to receive - both positive and negative, as the product has developed.

The memory training and flashcard concepts in getawayphrases are in the process of being incorporated into uHavePassed allowing users to train their memory in addition to doing formative assessment.

We are looking for content partners and institutions to be able to increase the scope of content on uHavePassed.com beyond the UK driving theory test - so please get in contact if you are interested. We are already working with Leeds University and the Open University on this. More news soon…

With uHavePassed we are also in the process of launching a service so that organisations can use it to provide any assessment content to their users via web and mobile phone. More news soon….

We have also continued to work with the Open University on a couple of ad-hoc projects. These projects have been done at a very low cost and the aim is to push forward ideas and techniques in reasearch of the applications of mobile phones in higer education. Again more to follow….

I (Al) am now going to commit more time also to this blog and try to start up more of a conversation about how mobile phones can (and are) being used in education.

So on with the conversation…

Tags: , , , , , , , , , , ,

14.Jul.08 Driving theory test, education, getawayphrases, luzia research, m-learning, mLearning, mobile development, uHavePassed Comments (0)