Archive for the ‘design’ Category

Game Changers: Dyson

James Dyson was not happy with his vacuum cleaner. It wasn’t powerful enough, and he determined that the problem was the bag. The bag’s purpose was to catch the dirt, but as it filled up, it quickly compromised the suction. So he set out to create a bagless vacuum cleaner, and through much trial and error (5,271 prototypes according to some sources), James Dyson came up with something he called “dual cyclone” technology. His design used centrifugal force instead of a bag to separate dirt from the air, and the result was much more powerful than anything else on the market.

Today you’d be hard pressed to find a commercially available vacuum that requires a bag. Nearly all vacuums are bagless now. This fact alone is sufficient to call Dyson a game changer, but going bagless wasn’t enough for the iconic inventor. He did two other things to revolutionize this humble household appliance.

He let you see the dirt

This is the kind of counter-intuitive curveball that only a genius comes up with. Who wants to see dirt? Perhaps it was hubris on Dyson’s part. Showing off. Or perhaps he conceived it initially for sales demonstrations, as a sensible way to show how much more dirt the Dyson sucked up than the competition (he was not only the company’s engineer, but its pitchman). As it turned out though, everyone wanted to see the dirt. People delighted in knowing that this filth they could see with their own eyes was safely trapped in the cannister and no longer soiling their shag carpet.

He made it look like a toy

The Dyson vacuum is nearly all plastic, which isn’t so unusual now, but it was in 2002 when his DC07 first entered the US market. Higher end vacuums at the time were mostly sturdy and serious, and the all-plastic Dyson DC07 cost more than most of them. Instead of trying to hide his product’s “plastic-ness” however, James Dyson embraced it. He made his vacuum cleaners look like toys, using bright colors and whimsical shapes. As a result, you don’t feel like the janitor of your house when you vacuum with a Dyson.

It’s actually sort of fun.

Game Changers: Apple

This is intended to be the first of seven (possibly more) posts on game-changing business ideas.

It’s often difficult to recognize when something changes the game. A few months or years down the road, you can usually trace a trail of copycats and wannabes back to the original idea, but even then, sometimes it’s not immediately apparent how something changed the game, or which aspect of the thing was responsible.

Other game changers are instantly recognizable. The first game changer I planned to write about was the Apple iPhone, but after thinking about it for a few seconds, I decided to inaugurate this series of posts with an ode to Apple in general.

The Mouse and GUI (1983)

Apple has built its house on one game changer after another. They introduced the mouse and GUI concept to the mass market way back in 1983, which may be the biggest game change in the history of personal computing. In many ways, the mouse and GUI is the very essence of personal computing. If you’re not a developer or a sysadmin, can you even imagine a command-prompt universe?

“Lifesavers candy” iMacs (1998)

In 1998, Apple released its candy-colored “Bondi Blue” iMac, and the world said “hold on, you can design a computer?” Now every previously overlooked appliance and utensil is designed, from toothbrushes to toilet brushes.

The iPod and iTunes (2001)

In 2001, Apple unveiled the first iPod. Portable music wasn’t revolutionary (Sony’s walkman was first to blaze that trail). The ability to carry all your music with you was new, but not revolutionary either. The scroll wheel UI was innovative, and super efficient, but not game changing. The real game changing thing about the iPod was what it did for MP3. The iPod made MP3s mainstream, and it’s no coincidence that the music industry killed Napster just as the iPod took off, paving the way for the iTunes Store (or iTunes Music Store as it was called at the time).

The iPhone (2007)

In 2007, Apple launched the first iPhone. Hard to believe it was only four years ago, since it’s become so deeply nested in my life. Everyone was wowed by the touchscreen. So sensitive, responsive and precise. And the way it bounces! So kinetic! But it’s not the screen that makes the iPhone a game changer. I played with various touchscreen prototype devices back in 2002-2003 when I worked for Vodafone. I recognized the touchscreen as the future of mobile phones, and so did everyone else who used them. The touchscreen was simply inevitable.

So it’s not the screen that changed the game. It’s the App Store. Apple opened the mobile phone up to developers, and lo the developers didst come. Now there are lots and lots of touchscreen smartphones, and lots of would-be App Stores. There’s the Android Marketplace, Blackberry App World and the Nokia Ovi Store, not to mention app stores launched by the various carriers. But if you ask iPhone users why they don’t want to switch to Android (or ask users who did switch what they miss most), many will still say it’s the apps.

 

Instapaper and Readability restore the pleasure of online reading

It would probably be better not to say anything. Advertisers won’t like it, and publishers who depend on ad revenue will like it even less. If this sort of thing catches on, there are only two possible endings, and they’re both bad.

I’m talking about two services that rescue online content from the twisted carnival of banner ads and assorted noise, and restore the pleasure of reading on the web. I’m talking about Instapaper and Readability.

With one click of a bookmarklet, Readability can turn this…

into this…

Instapaper does the same thing, but for stuff you want to read later. You just click a little “Read Later” bookmarklet, and the item is saved to a kind of to-do list. When you click the item in your list (or tap it, in the Instapaper iPhone or iPad app), it’s presented to you in its clean and simple glory, stripped of ads, navigation, related links, and anything else that might distract or annoy you:

But this is a bubble. A reading bubble. Most online publishers depend on the revenue they get from people eyeballing (and clicking, I assume, although who does that?) the banner ads. If services like Instapaper and Readability catch on, then there are two ways it can end.

The first possibility is a kind of arms race, where publishers find ways to prevent their content from being accessible in apps like Instapaper and Readability, then the apps find ways to work around the preventions, and so on. In this story, the best you can ultimately hope for is something like what has happened with RSS readers. Most big publishers only allow excerpts of their content to appear in the RSS feeds, and readers must visit the publisher’s website to read the whole thing.

The second possibility is some kind of advertising compromise built into Readability and Instapaper – maybe toned down ads that look more like sponsored text links?

So like any other bubble, enjoy this one while it lasts.

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.