(Screen) Size Does Matter

October 08, 2011

Robo makes the point that Jobs’-return-era Apple starts off product lines in an experimental, prone-to-radical-changes manner, then eventually goes to refine it and iterate more subtly from there:

There's another Apple product pattern. It's been around longer, and it's longer-term. That pattern is this: Apple (and by "Apple" I mean "after-Jobs-came-back Apple") enters a new market, or makes an-after-Jobs-came-back model of an existing product for the first time, and we start counting there. The first few product generations tend to be more experimental, and very different from each other, but eventually Apple finds what works and they stick with it, and the design changes become much more subtle refinements.

The iBook and PowerBook G3 hit this point comparatively early — they both had curvy initial models, but with the PowerBook G4 and iBook they found what worked, and they spend the next decade refining their squared-off metal and plastic notebooks. Nowhere was the "early experimentation" phase more evident than with the iMac. The iMac G3 and G4 and G5 were wildly different from each other, but by the time we got to the G5 that phase has ended and the "where did the computer go" iMac stuck around for the next seven years and counting, getting nips and tucks more than ground-up rethinkings.

The iPod (classic) took four generations. Apple went from a mechanical scroll wheel to a touch-sensitive scroll wheel to a model with the buttons all in a row under the screen, but by the time they got to the click wheel they had it. They added a color screen and video playback and a metal front, but the iPod classic is still largely the same concept seven years later (again, and counting). It's, well, classic.

I think, with the fifth model, the iPhone has (coincidentally, or not?) ended its G3-G4-G5 phase. The potential shapes of the iPhone are more limited than that of the iMac, so the experimentation phase wasn't as crazy as the iMac's, but I'd still consider the weirdly plastic 3G/3GS the oddball iMac G4 of the range. :D I think the iPhone 4's antennae design was a watershed moment, analogous to the PowerBook G4 Titanium, and I think Apple will stick with it, and refining it. They'll make it a tad thinner, or narrower. But I think the multi-piece, squared-off, antennas-on-the-outside design is here to stay for the foreseeable future. They're not going to suddenly switch to a two-piece, curved-at-the-edges, iPod/iPad-style design — except maybe as a new low-end, prepaid-targeting model that would take over for the (two-piece, curved-at-the-edges) iPhone *3GS*.

All very true.

The 3G/3GS design felt like a desperate attempt to massively improve reception over the metal cage issues with the original, far more attractive iPhone. The 4 (and now 4S), then, came up with a superior compromise between thinness, sturdiness, battery life and reception. I don’t think anyone near Steve suggested “let’s eschwer the classy aluminum back with a glossy plastic one, for that will be cheaper1. It was about reception.

But there are several things with the iPhone that never did change. They got those right (or, rather, they saw the results they had been hoping for) on first attempt. The layout, for instance: with the exceptions of additions like a flash and front-side camera, and the replacement of the volume rocker with two distinct buttons, everything has remained virtually the same. Dock connector at the bottom, a speaker each to its sides, silent switch and volume buttons on the top left, headphones out (with bizarre limitations on the original iPhone) at the top left, lock button at the top right, camera at the back’s top right, and, of course, earpiece (and front camera, where applicable), screen and Home button, in that order, on the front. It’s iconic, and as far as Apple is concerned, is just right.

Not much experimentation going on there. They sure prepared well.

And not only has the placement remained virtually the same: so, too, have the dimensions. It’s always been 4.5 inches tall. It’s lost some width: originally at 2.4 inches, the 4 and 4S models went down to 2.31. And, par for the course with “thinnovating” Apple, it’s lost depth as well; from 0.46 to 0.48 (3G and 3GS) to eventually 0.37 (4 and 4S) inches. These changes are relevant for case manufacturers2, but — having to pick a compatible case aside — hardly for the user.

What’s changed even less is the screen. Its quality may have changed, but its size of 3.5 inches never did. Only its resolution has famously been doubled3 to enable the marketing term “Retina Display”, going from 480x320 to 960x640. At 3.5 inches, that’s 163ppi, or now 326ppi. That’s a lot of density.

The resolution change worked because, in legacy apps, you simply treat each pixel as a 2x2 grid of pixels, and it’ll look just as it would have on an older iPhone. In newer apps, you use higher-resolution pictures. For vector art and fonts, you get those changes for free. The frameworks pretty much do it all for you, perhaps at first often resulting in a mix of original-resolution and double-resolution. And developers were quick to supply higher-resolution artwork.

Consider a different resolution change: to show 720p movies while maintaining the 3:2 aspect ratio, they could bump the resolution further up to 1080x720. What would happen with existing graphics? If you scale them up, their pixels cannot be easily matched; a 2.25x2.25 grid could, at best, be interpolated with anti-aliasing. Jagged lines, or blurry overall image. Anything vector-based, including text, would once again be exempt, but it would still make for a terrible experience. And this time, developers likely wouldn’t be as quick to adjust: for one, the iOS platform has reached more saturation, where updates just aren’t as necessary any more, and also, Apple would leave the impression that they’re going to keep changing the resolution whenever they feel like it.

What of a screen size change, though?

This has come up not because there’s indication that Apple plans to change it. Nor has there been user feedback that I know of that says “I love my iPhone; if only its screen were bigger!”.

It has become a topic because of the competition. Neither Windows Phone (which hasn’t been shy to establish a high minimum requirements) nor Android appear to specific a minimum screen size, much less one that exceeds the iPhone’s 3.5 inches. An increasing number do exceed it, however. If there is an explanation of “this size works better for the user, because:”, I haven’t seen it. Rather, my money is on Marco’s speculation:

Android phones have been one-upping each other with screen size a lot recently. It’s an interesting tactic that seems to be working, at least relative to other Android phones. When comparing phones side-by-side in a store, the larger screens really do look more appealing, and I bet a lot of people don’t consider the practical downsides.

And, as a corrolary:

[People accustomed to large-screened Android phones] may view the [iPhone’s] smaller screen as a downgrade.

When, as a manufacturer, you have two major operating systems to choose from, and the device becomes mostly a commodity, reducing your product to ‘bigger is better’ is almost inevitable. (Unless you’re actually creative.) It happened with 90s’-era PCs and MHz numbers; it happened with 00s’-era cameras and Megapixel numbers; it’s happening with 10s’-era smartphones and, apparently, screen size.4

An angle to consider here is that manufacturers may not even realize the weirdness of changing the screen size. Apple appears to treat it as a constant, rather than a number of a spec sheet (though, to be fair, it’s exactly that on their Specs page). PCs surely kept increasing their typical screen sizes for quite a while. The Mac (1984) shipped with a 9-inch display. The LC, my first Mac (1992), had a 12-inch one. The first iMac (1998) had 15 inches. And just last week, we were discussing whether to get 22- or 24-inch displays. An iMac can now (since 2009) be had with a 27-inch display, and while that seems almost obscenely large to me, it’s clearly appealing to some.

Screen resolutions, too, increased. 512x342. 512x384. 1024x768. 1920x1200. 2560x1440. And so, too, did the amount of space in our GUI. Mac OS’s menu bar height has never changed much5, but what used to be 5.8% of your room to work with is now, on the biggest iMac, a mere 1.5%. Similarly, while icons have gone from 32x32 to 48x48 in some places (such as Windows Explorer’s default icon view, starting with XP), the resolution has increased greatly; the area an icon takes up has changed from 0.6% to a tenth of that. And studies link such increased space with enhanced productivity.

But when Apple chose to ship the original iPhone with a 3.5-inch screen, did they do so because 3.6 inches would have been prohibitively expensive? I find that hard to believe. My explanation has always been one of practicality.

[I]t turns out that when you hold the iPhone in your left hand and articulate your thumb, you can reach almost exactly to the other side of the screen.

There’s a lot of things I can’t do with just one thumb on the iPhone: type several words of texts, do pinch-to-zoom or other multi-touch gestures, or precisely move objects around.

And yet, so much can be done just like that, in the tram, standing, the other hand gripping a pole: skipping to the next track in iPod, swiping through the list of unread e-mails, picking one, scrolling down and — if important — moving it to a different folder, and even simple search queries in Google. I bet the people mocking the Mac for shipping with a single-button mice didn’t see single-thumb-operating a telephone to listen to music, read messages and look up stuff on Wikipedia coming.

A bigger screen would take away this possibility. As illustrated by Dustin Curtis, you can barely reach the center of a 4.21-inch screen. It eschews simple for forcedly immersive. It makes you deal with the device, all of a sudden.

For humor’s sake, though, let’s consider the two ways a screen size change can occur.

One way would be to keep the resolution as-is, and simply make elements bigger. This assumes preserving the unusual 3:2 aspect ratio, and square pixels6. According to Apple:

The comfortable minimum size of tappable UI elements is 44 x 44 points.

Below, you can play with a few different screen sizes (in Safari 5.1 and Chrome 14, anyway), and see the effect on pixel density and, consequentially, individual pixel size.

And now: your very own 960x640 screen!

(I can’t calculate, by the way. According to Apple, the pixel density should be 326ppi, not 330. And according to various sources, the physical size should be 6.9mm, not 9.6. While the former could be explained by the iPhone’s screen not being exactly 3.5 inches diagonally, the latter discrepancy baffles me.)

This approach makes pixels larger again, somewhat negating the benefits of the Retina Display, although we’d have to go all the way to 7 inches to approach the original iPhone’s 163ppi. Advantageously, it makes the display more accessible to those with poor eyesight, and makes controls easier to interact with to those with large hands. As far as detriments go, it’s less likely to fit in your pocket, and a single hand of yours is less likely to, as explained above, reach controls edge-to-edge.

A case could be made, then, that Apple should offer this as an option. There’s precedent: one revision after the 12.1-inch white iBook design was introduced in May 2001, they added, in January 2011, a 14.1-inch option at the top end with nearly identical specs, a bigger screen at the same resolution (1024x768), and a higher price tag. This carried on until May 2006, when both screen variants were replaced by the 13.3-inch, 1280x800 MacBook.

But I’ll believe it when I see it.

Changing the resolution

Instead, let’s discuss changing the resolution. John Gruber’s latest seems to focus entirely and implicitly on maintaining the resolution, which strikes me as a Strawman:

If anything [bigger screens are] surely easier to make, as the pixels are less dense.

Changing the resolution opens up new possibilities. We’ve seen this first-hand with the iPad: it being 9.7 inches, and being 1024x768, has arguably led to entire new classes of programs. So far, though, all evidence points to in-between devices being unpopular: neither 5-inch ones such as the Dell Streak nor 7-inch ones such as the Galaxy Tab have enjoyed anywhere near the same success as the ~3-4-inch and 10-inch form factors. They’re neither here nor there.

Perhaps a slight tweak in that direction would work, though? Let’s keep the pixel density (and aspect ratio), rather than the resolution, the same this time.

This time: your very own 326ppi screen!

At around 4.5 inches, we can already display the equivalent of a typical 13-inch laptop screen. Slightly above that, at 4.7 inches, we can display the full 720p resolution of 1280x720.

For existing apps, changing the resolution presents us with challenges. Unlike with a desktop environment, the iOS UI is designed around a single-window/full-screen approach. At most, you have a status bar at the top; other than that, everything on the screen is controlled by the current app.

For games, this has long been common. Making a game full-screen is a common choice if only to provide an immersive experience. You can run Tetris and Sudoku in a window (I frequently do), and perhaps even a casual round of Portal, but for most games, it wouldn’t work well. For other kinds of programs, however, the assumption used to be that, given a certain amount of screen estate, the benefits of seeing multiple stacked and/or tiled windows outweigh those of coherence.

The iPad is unusual in that it provides what used to be a common resolution of laptops just half a decade ago, and of desktops half a decade before that, yet limit this to just one window. Palm webOS, BlackBerry PlayBook’s Tablet OS, and soon Windows 8 follow this approach, whereas Android Honeycomb 3.0 disagrees with it, allowing multiple “fragments” to co-exist. But even if Apple were to increase the screen size and (proportionally) resolution, it wouldn’t diverge sufficiently for such an environment to work well. And after all, they’ve already made this design choice, towards the other direction, with the iPad.

That leaves us with two other ways for an increased resolution to work: expanding the status bar, and giving the current application (which, in the context of iOS, might as well be synonymous with current window) more room to work with.

In fact, much like the Mac OS menu bar, the status bar would grow automatically. Even if the height were to remain the same, more width would allow for an increased amount of icons, or perhaps more text, such as the date in addition to the time. While jailbreaking tends to go overboard, it does provide some inspiration of what could be done: icons for new mail, the weather, or unread notifications. An iOS status bar icon takes up 16x16px, plus a few pixels for padding. Since each 0.1 inches of screen size nets us about 27.5 more pixels, that means even one such bump would give us an additional icon. Not bad. This is all assuming a portrait orientation; the landscape orientation already has far more space regardless.

You could also grow the status bar vertically, but I see neither the pressing need nor a practical approach. Increasing the icon size seems unnecessary. Adding a second row adds visual complexity. Right now, the information density and quantity seems close to just right, and growing it horizontally would help with the latter.

In-app layout

Lastly, the application itself. This appears easy in some cases: just give Safari a larger viewport, and perhaps a sixth toolbar icon. Just give Mail additional e-mail summaries, more text rows, and, too, a sixth toolbar icon. Embiggen iPod’s album art, and take another of the toolbar buttons offered in “More”.

Not so fast.

Much as we’d like to believe technology is perfect7, Cocoa Touch does not in fact have anything approaching a flexible layout manager, where you tell it “have a navigation bar with a fixed height at the top, a table with just however many rows will fit underneath, and finally a fixed-height toolbar at the bottom” and have an iOS-typical navigation/table view/toolbar UI. Elements are largely positioned by the pixel (though, in the case of the Retina Display, a distinction of “device pixels” is made, so you generally don’t have to worry about that), and entirely differently for the iPad. This can be tedious, but leads to a pixel-perfectly-designed result. There’s a concept of “springs and struts”, which allow for some flexibility, but by and large, positioning is fixed.

By contrast, some UI toolkits favor a more automated approach. They tend to deal in percentages and multipliers, not pixels; in relative, not absolute positioning; in an automatic flow, where whichever control comes next is positioned after the current one. This may not always lead to exactly what has been intended, but has lots of advantages, such as localization: a lot of software is written in English first, then translated to others. English words, however, tend to be relatively compared to other languages’ equivalents. The layout may have fit exactly for the words ‘tram stop’, but ‘Straßenbahnhaltestelle’ doesn’t just sound much wordier and take up more syllables; it also clearly takes up more space.

Apple hasn’t ignored this problem, and in 10.7 Lion, has introduced Autolayout. (See where I stole that word example from?) However, its release notes call it “not finished yet”, and it won’t be available in iOS 5.0’s SDK (yet).

It is quite likely that a future iOS SDK — perhaps 6.0’s — will include this, and it will allow for more scalable UIs. In some cases, it may eliminate the need for iPhone/iPod touch and iPad UIs to differ at all, but I remain skeptical of this. Developing with each individual device in mind — custom-tailoring for it, if you will — should ultimately benefit the user more than having something rapidly available everywhere. It would still be leaps and bounds better than the almost pointless letterboxing / scaling ability of the iPad to run iPhone applications (there’s a reason you almost never hear of it), though, and, perhaps, if cleverly combined with fixed elements, may lead to a richer and faster-to-develop experience for everyone.

Even then, however, many current applications would require significant changes to take advantage, and otherwise once more will suffer letterboxing or scaling. One makes for very awkward, sort-of-Fitts’s Law-violating user interaction. The other, which unlike with the iPad cannot be done in a grid of two-by-two pixels8, would look and feel ugly.

One answer to “why do Android phones keep bumping up their screen size, when iOS doesn’t?” may be, as posited by some, a contest to out-spec each other. Another may be: because they can. Right now, iOS can’t, and as the library of apps grows, which it rapidly has, the longer they wait, the less likely such a change becomes.

  1. Or if they did, they were probably looking for a different job afterwards.

  2. Who I assume are currently scrambling to regain money lost on the alleged iPhone 5 design that never was.

  3. Technically, quadrupled, depending on whether you count each dimension.

  4. Luckily, we haven’t entered megainches yet.

  5. It apparently used to be 20 pixels, and is now 22 pixels.

  6. Non-square, rectangular pixels do exist, such as in television.

  7. Stop laughing.

  8. Surely, nobody is suggesting increasing the resolution another 100%.