Tuesday, November 11, 2008

300 DPI

Detail of 300 DPI test pasted into a Moleskine notebook

Wondering what the real differences would be for mobile UI design when handheld screens end up having a resolution of 300 dpi, I did what every UI designer does: I made a prototype to experiment with. Now, I don't actually have an HTC Touch HD or that new Sharp phone to play with -- and they haven't quite reached the magic resolutions just yet -- but I do have a cheap inkjet printer. Since I expect the form factor of those screens to stay in the small handheld realm, I decided to mock up some User Interfaces on paper for a device the size of my Pocket-size hard-cover Moleskine notebook, which is 9 cm by 14 cm.

So, fired up Word and composed four example screens of what a portable device with a very high resolution could be used for. My first creation was a fake medical record for a diabetic teen, as that is the kind of high-volume mixed-data file I have experience with. Typesetting it at a reasonable resolution for a standard web-page -- 11 point font -- looks just clunky and wastefully big at 300 dpi, and the two data visualizations I added showed me that far higher data densities should be just fine. So the second mock-up is a data-sketch for a ward chart, showing the summaries for 3 beds. (All names fictional, all data fictional if not non-sensical.) The format for the graphs is from Edward Tufte's project for a one-sheet medical record; it normalizes laboratory values to all have the same visual characteristics so that they become easy to glance-read. Turns out that one can make a useful small display like this because of the high data-density. It isn't significantly more text than would fit on the same size 72dpi screen, but it is some, and easier to read. And of course, with the ability to use animation and to expand and collapse charts dynamically, abilities that come from using a handheld over a static sheet of paper, I think a pretty credible medical record viewer could be made to fit such a small form factor. It would be far more comfortable than working with the current available medical tablets and laptops.

Miniaturized version of UI mock up for a 300 DPI handheld
Miniaturized version of UI mock up for a 300 DPI handheld. Click to download the A4-sized PDF.

Two more panels added: one to test using such a device as a magazine, a fashion glossy in this case, and to view snapshots with. The fashion shots are the large photographs from Style.com, and once imported into an image program and the resolution is set from 72 to 300 dpi, of course they become much smaller while keeping detail. On paper at least, uncomfortably so, and even enlarged the fashion details are not visible well. I have to wonder if that isn't a problem with using photographs originally prepared for the web, though: when using my snap of the yellow tree at St Paul's Cathedral, which was stored at 300 dpi, screen versus 300 dpi print made quite a difference. At identical sizes, when viewing the PDF on screen, the blooms turn into yellow blobs, while printed out, even on my cheap HP that is using many trick to interpolate a higher resolution than 300 dpi, every flower is separated and sharp. What takes up a whole screen on a computer becomes easily viewable with the same detail in a smaller frame.

Still, nice for pictures, but does it really make a difference for information visualizations? These graphs and text are just as readable on a standard computer screen at the same size, and a 300 DPI screen will not be a full-color reflective experience like paper. And then I noticed a difference: on a standard computer screen, if I wanted to see the detail in a dense graph better, I had to crane my neck to get closer to the screen, or make gestures on the keyboard to zoom in. With the Moleskine, I just held it closer and farther as was comfortable for detail or overviews, while I was standing up or walking around. It doesn't seem like a big thing, but if I was dealing with these kinds of detailed information visualizations all day while going from location to location, I would seriously prefer that.

So, what are the quick lessons for getting ready for when handhelds start having very high resolutions?
  • The photography workflow will need to be changed. Pictures that are downsampled to be 72 or 96 dpi for websites will not use a 300 dpi screen to its full potential to show detail. The workflow for print may be usable here, but the end product or website will need to come in two formats: one for high-resolution, and one for low-resolution screens.

  • A high-res screen doesn't mean you can make the font smaller and add a lot of text this way. Text does become slightly easier to read, but not dramatically so.

  • However more information can be communicated over a 300 dpi screen than over a 96 dpi one, if not in text: the charts and other visualizations can show far more detail and those will be easier to read. They will require more careful design than what is currently the standard in pie and bar and block charts as supplied in Excel et al. So that's where a lot of work needs to go.