Visualizing Various Mobile Screen Sizes

One of the things that stood out for me amongst all the hype around the Motorola Droid before the device hit the market was the screen resolution: a whopping 480 x 854 pixels. At first I thought it was a misprint.

Once I verified the specs, I started making my design templates for the Droid in Omnigraffle, and I ended up spending a lot of time tweaking the scale of my document to get the right amount of stuff on the screen. I was struck by how different everything had to be compared to the templates I use to design for other devices. In fact, each of my device-specific templates uses a different scale.

This seems strange when you consider that the devices are all roughly the same size, physically:

devices-physical

I was suddenly curious, so I decided to see what things would look like if I scaled the various devices as if the pixel densities of their respective screens were equal, and everything else was relative to that (actual pixel density of each device is noted in the image below):

devices-screen

As you can see, when you adjust for pixel density, the Droid is practically a tablet compared to the iPhone.

To better illustrate the difference, here are the two images with one overlaid on the other:

devices-overlay

I hear designers talk a lot about the differences in capabilities and design vocabularies across the range of mobile devices, but variations in screen resolutions are another challenge designers have to confront in the mobile world. It’s especially important with touch screen devices, since the right target size for a user’s finger tap is a physical question more than a matter of pixels. Apple’s guideline for buttons is a height of 48 pixels for example, but the same physical height on the Nokia N97 measures about 58 pixels.

Why I don’t Kindle

So I don’t have a Kindle, and I don’t want one. For some reason I’m predisposed to dislike it. When I try to articulate my reasons, though, they feel as irrational as any other prejudice, so I won’t embarrass myself by trying to share them.

The Kindle has virtues for sure. It seems like a great way to take a lot of books on vacation. It saves paper and therefore trees. On net, it’s a green device, even when you factor in the materials and manufacturing.

Having said that, there are some rational, non-prejudicial reasons to dislike it…

It’s ugly. To me, the Kindle already looks like a cool gadget from ten years ago – like those candy-colored iMacs from 1998. And the display makes everything look like you’re seeing it through the window of a Greyhound bus.

Typography. I’m a bit of a font geek, but I think it should bother everyone that the Kindle uses one font for everything. I hear the Kindle DX has native PDF support, which I assume includes fonts, but I also assume it – like the Kindle 2 – uses Monotype Caecilia for everything else. It’s hard to imagine reading the New York Times in such a robotic looking typeface, but the bigger issue is that fonts are carefully chosen. They signal something about the contents of a work, just as body language and clothing signal something about a person. You can tell just from the typography of a movie poster, for example, whether a film is serious, funny or frightening. Fonts are like the clothing of a written work.

No backlighting. Really? This is a battery-powered device, but if you want to read in bed without bothering your partner you need to clip a book light onto it? When I learned this about the Kindle I could not believe it.

No pictures… or terrible pictures. I hear the DX has made some improvements here over the Kindle 2, but in any case the device doesn’t do color, so things like infographics and many kinds of illustrations are simply rendered useless.

You can’t lend or borrow. I love the public library, and I love having my own library. One of the things I love about having books in my house is being able to give them away to people. By the same token, I love it when a friend hands me a dog-eared paperback she just finished and says, “you have to read this.”

Yep. I’m happy with the ancient, tree-killing version.

Are iPhone apps the new CD-ROMs?

farting

Remember CD-ROMs? Remember how cool they were and how for a brief moment in the early 90s it seemed every possible thing was being CD-ROMified – from children’s books to topo maps to baseball cards? CD-ROMs were briefly so cool that people would pay $200 a pop for the latest and greatest titles. Then they became so ubiquitous that you’d get them as giveaways and even in your junk mail. Then after just a few years, the Web came along, and most CD-ROMs suddenly made no sense at all.

So what does this have to do with iPhone apps? Well…

  1. There are a whole bunch of iPhone apps that are really just repackaged websites and don’t make a lot of sense as apps.
  2. There are a whole bunch of apps that everyone would dismiss as pointless and annoying if they weren’t wrapped in an iPhone.
  3. iPhone apps have a stupidly limited distribution model.

I want to focus on #3. The idea that our mobile phones are small personal computers is still somewhat novel. Other than the simplest of games, we’ve never been able to install software on our phones before, and so the App Store is a little like going from Communist Prague to the Las Vegas strip – except we still have a dictator (albeit a benevolent one) called Apple.

If Apple or any other company tried to exercise complete control over what people could install on their computers they way they do with the iPhone, the reddit kids would go absolutely bananas. Having just arrived from behind the iron curtain, however, we think the App Store is like the best candy store ever.

But people don’t really want one company to dictate what they can install on their phones, even if it’s Apple. There’s no reason Apple should be able to force me to keep the Yahoo! “Stocks” app on my phone, or prevent me from installing a pair of virtual iBoobs (somewhat NSFW). And developers – not to mention companies – would love it if they didn’t have to deal with the whole iTunes Connect process in order to make their apps available to you.

Here’s a hypothetical example: If there’s a problem with the New York Times website, or they want to add a new feature, they have complete freedom to make any changes they want. Not so with the New York Times iPhone App. First they have to find a developer who knows the iPhone platform – a much smaller labor pool than that of web developers. Then, once the work is done, they have to submit it to Apple and wait. Usually about two weeks. And there’s no guarantee that Apple will accept it into the iTunes store. If Apple doesn’t like the way the New York Times has decided to, say, monetize the app by displaying ads, then the New York Times has no choice but to change it, re-submit and wait again. There’s no way the New York Times can make their app available to you outside the iTunes store (jailbroken phones excepted).

Now you might say the New York Times makes no sense as an iPhone App, but why should Apple get to make this decision for the market?

Apple has a huge advantage right now, not just because of their head start. Their SDK is light years beyond anything I’ve seen from Nokia/Symbian, Palm, RIM or J2ME. Apple provides better tools and guidance than anyone else for creating amazing, beautiful, elegant apps. Philosophically, Apple looks at the phone differently than those traditional players do, and this is Apple’s real advantage. They see the phone as a software client first and an extension of the phone company second (and the latter as a kind of necessary evil at that). Android is the only other platform that looks at the phone this way, but at some point in the not too distant future, this is just what phones will be.

When you think of the iPhone as just another computing platform, then it doesn’t make sense for Apple to hold a monopoly on distributing software for it. The iTunes store might always be the best and easiest place to get apps for your iPhone, and Apple surely loves their 30% cut, but someday nothing will prevent people from selling you their apps by way of their websites or Amazon or even in the form of… gasp… CD-ROMs from old-school retailers. Count on it happening sooner rather than later.

Apple always has impecable timing, and they will probably open things up right around the time that Nokia’s new app store comes online.

Branding and visual design in iPhone apps

The purpose of the iPhone Human Interface Guidelines (requires login) is to help developers create well-designed experiences for the iPhone that also measure up to Apple’s reputation and high standards. The guidelines drive toward a consistency, and to this end they encourage developers to take advantage of a sizeable library of existing components.

Somewhat understandably, they don’t say much about branding… beyond this warning:

Branding is most effective when it is subtle and understated. People use your iPhone application to get things done or to be entertained; they don’t want to feel as if they’re being forced to watch an advertisement. Therefore, you should strive to incorporate your brand’s colors or images in a refined, unobtrusive way. For example, you might use a custom color scheme in views and controls.

Apple wants your application to be a friendly sibling to its core iPhone applications:

The user interfaces of iPhone applications are characterized by beautiful images and lush color. As an application designer, you want to fit into this environment by providing an aesthetically pleasing user interface.

It boils down to the question of how much to use the building blocks that Apple provides vs. whether to invent your own. And the answer is not straightforward. To help designers frame their decisions around this problem, Apple identifies three different application styles:

  • Productivity Applications – enabling users to organize or interact with information
  • Utility Applications – performing a basic task and requiring little user input
  • Immersive Applications – a full-screen, visually rich environment (mainly games)

From Apple’s perspective, the launch icon and the loading (i.e. splash) screen provide sufficient branding opportunities for most applications. Putting aside games (and other “immersive” apps), most iPhone apps are satisfied to take this approach, and most iPhone apps look very “standard” in their use of colors, icons and other elements. But even within what could be described as “refined” and “unobtrusive” there is a range of possibilities.

Most applications (like these examples from Yelp and TwitterFon) have little more than a custom-colored navigation bar, with standard text:

yelp
twitterfon

Some applications use a custom typographical image in the navigation bar:

facebook1
nyt1

Although, this often reverts to plain text or goes away altogether on screens that require a dynamic title:

facebook2
nyt2

A few applications use an image for the entire area of the navigation bar, but it can look a little funny when combined with standard-looking navigation and control buttons:

quantum2
lilwayne2

Beyond the navigation bar, most applications use the basic iPhone styles, icons and controls for the main screen content, although many apps apply some custom colors, fonts and other minor style elements. Nonetheless, these apps still feel “Apple” in the way they look and behave. Only a few apps abandon the Apple guidelines altogether in favor of a branded experience.

In the thumbnails below, the Quantum of Solace app limited its branding to a custom color palette, whereas Lil’ Wayne went stone gangsta on the guidelines (click thumbnails to enlarge):

quantum3 lilwayne3

This is where the lines are fuzzy. Within the Lil’ Wayne app, there’s quite a bit you can do, so in some ways it would qualify as a “productivity” application, but it’s probably more appropriately positioned as “immersive.” Transforming your friends into Lil’ Wayne is a game, of sorts.

The bottom line, I suppose, is that when it comes to branded third-party applications, the iPhone does not differ philosophically from regular Mac OS (or Windows for that matter). Outside of games and other immersive apps, Apple probably prefers that developers work within the Apple styleguide, and for the most part this works to everyone’s advantage. It’s problematic when a standard component – like a dialog box – looks and behaves differently from one app to another.

The desktop operating systems have established themselves firmly enough that most developers happily eschew non-standard branded “skins” for Mac or Windows apps. But iPhone apps are trendy right now in the way that Web 1.0 used to be, and guidelines or not, it’s a bit like the Wild West.

In defense of PowerPoint

Edward Tufte famously declared that PowerPoint is evil, and in my life as a consultant, I’ve witnessed quite a bit of love and hate directed at the ol’ ppt. OK, maybe not love per se, but you’d think so from the application’s sheer ubiquity in all manner of pitches, strategies and summaries.

It’s a sign of confidence to present without PowerPoint, and many kudos are laid upon the rare folks who can stand in front of a room and communicate sans slides, charts, bullets or script.

Obama does this. Much is made of how eloquent he is, and it’s worth emphasizing that he often speaks without even so much as a note card. Even when he stands behind a podium, he never looks down.

But now, as we find ourselves in the thick of the presidential race, and silly talk of flag pins and tire gauges is starting to give way to headier discussions of the economy and energy policy, maybe it’s time for a little PowerPoint.

As the candidates argue about the efficacy of offshore drilling – one saying it won’t affect gas prices for a decade or two or perhaps at all, and the other saying it will bring down prices in a few months – it’s nothing but two guys arguing until someone busts out some data.

When Obama talks about the economic and national security impacts of importing so much of our oil from questionable dictators, it’s nothing but words until you actually hear factoids like…

  • Enough solar energy falls on the surface of the earth every 40 minutes to meet 100 percent of the entire world’s energy needs for a full year.
  • We send $2 billion every 24 hours to foreign countries to buy nearly 70 percent of the oil we use every day.

Those, by the way, came from Al Gore’s recent “Generational Challenge to Repower America” speech. I use Al Gore as an example because he won a Academy Award for a PowerPoint presentation. An Academy Award. For a PowerPoint presentation.

Clearly, you can’t fault the medium for the crap that you normally see in PowerPoint.

Remember Ross Perot running for president in 1992? He produced the first-ever infomercials for a presidential campaign. He didn’t use PowerPoint, but he showed us lots of charts and graphs. He was dismissed by many as a cartoon and a crank, but he got nearly 20% of the vote. That’s nearly unheard-of for a third-party candidate.

Bottom line is, the candidates are good at spewing positions and opinions, and they may think that people have no patience for the nitty gritty. But I think they’re wrong. I believe the first candidate who can effectively illustrate his opinions, who can bolster his positions with facts and figures packaged as delicious bite-sized morsels will take a huge leap in the polls.

The Data Visualization Palette

I might expand this into a larger article at some point, but for now it’s just something I decided to cobble together for a quick post. Thinking about data visualization was a big part of my job at Scout Labs, and this represents my palette for expressing data in picture form.

Since color consists of three factors (hue, value and saturation), it’s three for the price of one from a data visualization standpoint. Hue can communicate difference, but value and saturation can communicate other dimensions – like degree of difference. Color is tricky though. You have to be careful to accommodate colorblind people and black and white printing.
Size is good for expressing one dimension of difference between things. It suggests something quantitative. If precision matters, then it’s safer to vary size along just one axis (e.g. length). Studies show that people are bad at judging area and angles. They can tell when one line is roughly twice as long as another, but they’re wildly off when they try to guess the exact difference in area between, say, two adjacent circles or two sections of a pie chart.
Shape is a good way of creating very basic distinctions between things – or classes of things. It works well, for example, in scatter diagrams and other visualizations that plot data in two- or three-dimensional space.
Decoration is good when you want to make an item or a small subset of items stand out from a larger set. Decoration can be more or less subtle, so I like to use it to represent variation as opposed to difference.
For position to mean anything, it helps to have stable reference points – like x and y axes (i.e. a grid). Meaning is expressed by the position of objects relative to each other of course, but more importantly it’s expressed in the position of objects relative to the axes.
Motion can be a powerful way to add directional nuance around things like trends, or to wrap in concepts like velocity, but the biggest drawback, obviously, is that motion isn’t possible on paper and needs to be translated into something else.

Obviously these aren’t mutually exclusive. People are capable of grokking a number of concepts from a single visualization, so I usually combine dimensions from the palette. Sometimes I combine things just for efficiency – to get more out of each pixel so to speak. More often, I combine things when I feel like they make sense together.

For example, I might use hue to represent positive or negative sentiment in a product review, saturation or value to represent the intensity of the sentiment, and size to represent the reach of the source.

Nailed it!

Please indulge a moment of self-pity…

I know a designer’s job isn’t rocket science, but that doesn’t mean everyone is qualified to make design decisions. Unfortunately for me, that doesn’t ever seem to stop people.

Clever Target Circular

Why do they call these things “circulars?” The word makes me think of my mom, clipping coupons from the Sunday paper for the weekly trip to the Shop-N-Bag.

Anyway, this one came in the mail from Target. I usually toss these things right into the recycling bin, but I thought it was pretty clever.

I used to love flip books as a kid. I even made one once, as a Christmas present for my younger brother – a mix-n-match sports thing where, for example, you could put a football player’s head on a baseball middle and a pair of hockey legs.

Anyway, kudos to Target for having fun with something so everyday. You actually got me to look at all the coupons as I played with different face combinations.

In An Athlete’s Shoes

The big athletic footwear companies have built their marketing campaigns around aspirational themes and creating connections between regular sports hobbyists and elite athletes. If you work hard, if you show character and passion – the message goes – then you are like them.

I saw this clip from Nike today, and I think it does an especially good (and literal) job of putting the viewer in an athlete’s shoes…

Stupid product of the week: American (big brand) beer

coors packaging

Have you ever noticed the way American beer commercials emphasize packaging gimmicks? The wide-mouth can. The label that turns blue when it’s cold. The easy-pour vent. The shelf pack that fits better in your fridge.

Are there people who peruse the beer aisle thinking, “hmm… you know I really enjoy [favorite microbrew/import], but it pours all splashy, and I can’t tell if it’s cold without picking it up. I guess I’ll take the Coors.”

In the same vein, I was listening to the radio the other day, and a commercial for Miller Lite came on. Apparently, they took the top award for “American Style Light Lager” at the World Beer Cup in 1996, ‘98, ‘02 and ‘06. Well whoop-dee-doo. American Style Light Lager? Really? There’s an award for that? How many beers could possibly be competing in the American Style Light Lager category? “American Style” itself narrows the field quite a bit, since American microbreweries typically produce traditional European style beers. This leaves you with just the big brands. When you add “Light” to the mix, you’re down to what, three beers? And Miller Lite is bragging that they won the top award only four times in the last twelve years.

The thing is, I don’t actually have a problem with the taste of some of the big brand American beers. I’m more than happy to drink MGD at a ball game.

They way these guys mostly brag about the packaging though, you’d think they’re embarrassed about their own product.

© 2009 Shawn Smith | Creative Commons.
Entries RSS Comments RSS