random memes }

Design for standard screen sizes

An observation that should be obvious - the universe of common screen sizes has changed.

When you design a graphical user interface (GUI), you want make your design optimal for current and near-future screen sizes. You want your design to be at least passable on less common smaller screen sizes. Over time the range changed:

The last range stayed around for a rather long time. The most-probable resolution went up over time, but VGA resolution stayed around as probable on low-end laptops, or on servers (which often inherited old VGA-only monitors). Note that all the common screen sizes shared similar aspect ratios: 1.3̅ (640x480, 800x600, 1152x864, 1600x1200), and 1.25 (1280x1024). Wikipedia has a rather nice picture at the bottom of the Super Video Graphics Array article.

Rather recently - due in large part to the rise of "digital" television - the set of common screen sizes has changed, and are now essentially all "widescreen".

Note that the ratios are generally "wider": 1.7̅ (1920X1080), 1.6 (1280x800, 1440x900, 1600x1000, 1920x1200), 1.48 (1600x1080). This is for designers in fact a very big deal. Designs that once made sense are now badly non-optimal. The existence of a huge mass market for 1920x1080 (television) means that we pretty much are going to have a permanent "notch" in the price curve around that resolution, and that notch means a large "bump" in the number of screens at that resolution.

Personally, I once hoped that 1200x1600 (and similar ratios) might become dominant. That would better suit the content that we have to present. Most content (outside movies) is much taller than wide. Instead things have gone, er, sideways. (Old movies have an oddly dominant effect on the world in which GUI designers must exist.) Unfortunately, portrait-mode screens are rare, and there is no reason to expect this to change. Given the mass-market, designers can expect an overwhelming number of screens at the 1920x1080 resolution for at least the next decade - if not longer.

As designers we need to design for the screens on real customer desktops. That means designing for screens that are much wider than tall, when the content we have to present is usually much taller than wide. This mismatch has got to push us powerfully away from the once-reasonable trade-offs of the past.

The sum of which means that the design of current desktop GUIs are all badly wrong. Common/standard design elements that occupy scarce vertical space are not optimal. Design elements that occupy the entire horizontal extent of the screen - mostly as empty space - are not optimal.

What does all this mean? Standard window title bars that occupy the entire horizontal extent of a window are a really bad idea. Standard menu-bars that occupy the entire horizontal extent of a window are a really bad idea. Standard tool-bars that occupy the entire horizontal extent of a window are a really bad idea. Standard status-bars that occupy the entire horizontal extent of a window are a really bad idea.

If you are a smart, younger guy - for whom Microsoft Windows has been around for your entire life - you might feel uncertain questioning standard design elements. Might there be good reasons for standard elements of which you are unaware? Let me help you. Put a standard Window title bar on a VGA screen. When you add the horizontal extent for [icon for Windows menu] plus [document name] plus [application name] plus [icons for window size & close] ... the horizontal extent of the title bar is pretty full, if not a bit over-full. At SVGA resolution the title bar is still full, and only at 1024x768 do we start to see a consistent (but not overwhelming) bit of wasted space. For a rather long period of time this standard design element was reasonably efficient.

The same argument applies to menu-bars and tool-bars, as both made reasonably efficient use of the then-available horizontal space.

Horizontal scroll-bars were rarely an efficient use of space, but (when used) were simple to understand as due to the near-exact similarity with vertical scroll-bars. Even as far back as the early 1980's there were interaction-designs for scrolling that avoided horizontal scroll-bars as an inefficient use of scarce screen space.

At one time the value of small personal computers to the average human was not a certain thing. As designers - much of the time - we had to aim for the human who was not at all convinced he wanted to use a computer. This has changed. Due largely (and oddly) to the rise of the Internet, the overwhelming consensus is now that use of computers is at least of value, if not of primary importance. What this means for designers is that we can afford to be a little more arcane. This is NOT an excuse to be arcane without reason! What it does mean is that users are more willing to make a greater initial investment in learning than we could expect in the past.

What does all this mean? Current standard design elements that occupy the entire vertical extent of the screen are insane - given what we have now and can expect in the near future. We need to allow for user-relevant content to occupy the entire vertical extent of the screen (or nearly so). Today even on low-end laptops the width of the screen is a little to wide for reading text comfortably. What this means is that we afford to use horizontal space on various "overhead" elements, without negative impact on the presentation of end-user content.

The above argues for pushing design elements (outside of end-user content) to the sides, and away from the top or bottom of the screen.

When you place a variable or optional element on the left side of the screen, for text-like end-user content, when that element changes size (or disappears) the main content shifts horizontally. This is not optimal. By shifting the horizontal placement of content, you force the end-user to visually re-examine that content to see if it has changed.

This argues for placing overhead elements always to the right (at least for users whose written text reads left-to-right).

Note that some current designs are starting to push toward more efficient use of space. On Microsoft Windows the we have Internet Explorer 8, and Google's "Chrome" web browser as examples. (I would hope this is due to designer's explicit awareness of the space in which they must "fit" their designs, but have no basis to assume.) At least some designers are pushing for change in the, er, right direction.