drucker.ca

I’ve recently been involved with an iPhone project where we are doing a few cus­tom UI con­trols, and it’s def­i­nitely proved a learn­ing expe­ri­ence about the dif­fer­ence between design­ing for a com­puter screen and design­ing for the iPhone screen (either the cur­rent one or the upcom­ing iPhone 4 Retina Dis­play screen).

One thing I’ve learned has to do with the char­ac­ter­is­tics of the iPhone screen, and how that influ­ences User Inter­face Design choices. Over the years, I’ve become used to the what it takes to show a change on a com­puter mon­i­tor, which is to say, the degree to much you need to change the colour, shape, or scale so that it’s obvi­ous, even if the user looks away for a sec­ond before the change occurs and then looks back.  This might apply to an object in its selected and uns­e­lected states, or the addi­tion of some­thing new on the screen, or per­haps the enabling or dis­abling of a but­ton or other ele­ment.  At first, I thought this was due to the dots (or in this case, pix­els) per inch of the iPhone ver­sus com­puter mon­i­tors. Mon­i­tors are usu­ally some­where between 72 PPI (Pix­els Per Inch) and per­haps 200 PPI on the best equip­ment. The IBM T220/T221 LCD mon­i­tors mar­keted from 2001–2005 were 204 PPI, and they prob­a­bly set the stan­dard for a while. These days, a 20-inch (50.8 cm) screen with a 1680x1050 res­o­lu­tion has a 99.06 PPI, and a gar­den vari­ety Mac­book (not the higher end Mac­book Pros) has 113 PPI (Wikipedia has an arti­cle on how this is cal­cu­lated).

How­ever, the iPhone PPI is listed at 163 PPI, which although it’s on the high side, is cer­tainly not sig­nif­i­cantly higher than a typ­i­cal com­puter these days. The dif­fer­ence, then, must be the size of the screen. In the case of any iPhone screen 2G, 3G, 3Gs and 4G, it’s a 3.5 inch screen (com­pare that to the afore­men­tioned 20-inch, and now we’re talk­ing different.)

It might be obvi­ous, but what I’ve noticed is that the amount of change you have to make in order to be notice­able is far more on the iPhone’s screen. The con­trast must be greater, scal­ing or mov­ing an object between one state and another has to be larger (or far­ther), and as a corol­lary to this rule of thumb,  it’s easy to miss sub­tle changes.  Sev­eral times dur­ing devel­op­ment of the app we’re work­ing on, I had to report to the graphic designer that I was work­ing with, that a selec­tion style wasn’t dis­tinct enough, or that a small detail of a but­ton, such as a down­ward point­ing arrow, had to be ren­dered with higher con­trast (the UI had a lot of grey objects, and some of them had white or darker grey overlays).

I think the easy way to think about this is the anal­ogy of grease­paint. What’s grease­paint? It’s the tra­di­tional makeup that actors wore (and has now been super­seded by more mod­ern stage makeup) that helps to com­pen­sate for both the wash­ing out of facial fea­tures by the bright the­atre lights, as well as help audi­ence mem­bers to make out their faces, even though the actors were far­ther away (and hence, smaller in the eyes of the­atre­go­ers — per­haps the equiv­a­lent of being 4 or 5 cen­time­ters tall depend­ing on how far away from the stage they were sit­ting). I remem­ber going back­stage to a dress­ing room after the Play or Opera was over, and was always struck by how odd the per­form­ers looked before remov­ing all of that extreme makeup, which brought out cheek­bones or encir­cled their eyes (like a Rac­coon, I though!).

So User Inter­face Design­ers work­ing on iPhone apps, remem­ber, the com­puter screen is the dress­ing room, and the iPhone screen is the stage. Don’t for­get the greasepaint!