Mobile/UI/Designs/TouchScreen/workingUI/small-format

Notes

This is a working document for evaluating and modifying Fennec large-format touchscreen designs for smaller-format touchscreens.

Overall size of Fennec UI

Just taking a desktop build of Fennec and resizing to, in this case 320x320px, gives the impression that the UI is severely compressed:

This is misleading, though. The available space is definitely smaller in terms of pixel numbers, but the pixels are actually bigger on, for example, a windows mobile device like a samsung i780. What's really important is the number of touch-heights (around 7mm tall) that we can accommodate. Here's a comparison of the n810 and the i780:

We get ~7.8 touch-heights on an n810, but because pixel/cm number is lower on the i780, even though it's only 320 by 320, we still get 6.5 touch heights.

Adjusted for the differing resolutions, here's what the current version of Fennec would look like on a device like the i780:

Which feels less constrained than the previous approximation. We seem to have enough room for the UI vertically -- it's horizontally that it's still more cramped than would be ideal.

Fitting Horizontally

One possibility is folding the bookmark list button into the navigation screen (or the control strip), and leaving the titlebar more dedicated to the title:

Here it is in context, with a Windows Mobile 6 system bar (it takes up the 0.5 touch-height of the total 6.5):

(we can clearly also be using a smaller type size on screens of this size)

Zooming user-behavior with a smaller screen

To come.