Names

Photo credit

Why do doctors call the bone at the tip of the index finger the “2nd Distal Phalanx?” Because giving it a name provides a shortcut. This way a doctor doesn’t have to say “the brownish wobbly bit behind the squishy pinkish bits” and can jump straight to “the liver.” It’s a means of linguistic and conceptual efficiency. A name provides an interface to discussing the thing it’s named for.

People say “cat” to mean a normally four-legged animal covered in fur that mews. Until we had a word for “cat,” we had to use other words to describe them. The same goes for “schadenfreude,” a thing that exists conceptually throughout the world but has no English name. 

In fact, when you’re forced to describe a nameless idea or thing to a friend, you’re essentially providing the definition for a thing that doesn’t yet have a word for itself.

So if it’d be useful, why not give it a name? Jared Spool (beating me to the punch with the anatomy example) gave a brilliant talk at SXSW where he gave names to different approaches to design. These types have existed for years, but having names for them provides shortcuts to thinking about them and discussing them.

But a word of warning: it can be creatively dangerous to give existing names to new things because things that truly are “new” have new definitions. Familiar names carry familiar definitions (and branding) with them. While the iPad is technically a “tablet computer,” calling it that overlooks some key distinctions between it and its pen-based predecessors. This can box you in to thinking about something in familiar terms instead of as a new concept. As a “new thing,” Apple was better off not giving the iPad a name until after it defined itself (calling it a “post-PC device” only after it’d been out a year.)

So if a thing exists with a definition but no name, don’t be afraid to give it a new one. Remember, every name is a made-up name. New names are like simple machines; tools that allow for easier discussion. They enable new metaphors and, consequently, new ways of thinking about things that already exist.

Think about the effect giving a name to AJAX had on the web (and how its definition has shifted since it was introduced). Think about names for musical genres. Think about “Web 2.0,” “HTML 5,” the ”uncanny valley,” and the “killer app.”

See also: 

Jared Spool: The Anatomy of a Design Decision [Video]

Stephen Fry: Blessay on Language [Text / Audio] (thoughts on naming of CCTV starting at 29:03)

Waterproof Computers

"Because everything in her home is waterproof, the housewife 2000 can do her daily cleaning with a hose."

Isn’t it remarkable that in 2011 (that’s “twenty-eleven”) you can still destroy a computer with nothing more than a simple glass of water? Not only your computer, mind you, but also your telephone, calendar, notepad, map, stopwatch, and whatever else you use your smartphone for these days. It’s one of the most basic flaws of modern computing.

It’s easy to see why a laptop would be this susceptible. The cases were bulky and designed to be accessible for upgrades. Looking at a modern notebook — the MacBook Air, let’s say — we have a computer with everything integrated, leaving vulnerable only the keys, I/O, and air vent. We’ve already seen keyboard drains in Lenovo laptops, and I/O is something that could be protected with something akin to a door cover. Short-circuiting could be handled with what’s essentially a circuit breaker.*

That leaves the air vents, which a friend rightly pointed out could be cleverly handled by water cooling the computer. Oh, the irony.

Furthermore, the iPhone needs no cooling vents. Sealing up the case, switching to waterproof speaker/mic and adding the circuit breaker would mean a waterproof smartphone. This can be further simplified with wireless sync and inductive charging.

Now before you ask why Apple would want to cannibalize sales of replacement units, imagine the buzz this would create. “Buy an Apple. They’re waterproof.” People would buy these products for the same reason people buy insurance, and the boost in sales would far outpace any loss in revenue from what is in all actuality a fairly rare occurrence.

Most importantly, this would turn a bad experience into a great experience. Customers want to be happy, and they’d be delighted that Apple saved their day. This is worth its weight in gold.

* (I wonder if this could be done per-port and managed via software. Any electrical engineers out there?)

Take five minutes to watch this three minute video by Ze Frank. It’s pretty dense and I didn’t get it the first time through, but it has some of the best insights to marketing I’ve heard.
We humans are associative creatures. We’re pattern-matching fiends. It’s how we can quickly find our friends in a crowd, why we think calves are cute, and why we search for patterns in static. Pattern matching is what our brains do.
But those are just visual examples. Our brains also match patterns with experiences. For example, many people take up smoking because they’re hanging out with good friends who smoke, and they associate smoking with friendship and good times. In other words, smoking has been branded with friendship and good times.
Some of these associations (or “emotional aftertastes”) are inbuilt (afraid for safety = bad), others are discovered (I like strawberries), and all have a dramatic effect on the decisions we make.
This brings us to the single most important marketing lesson I’ve learned:

People want to be happy.

And by “happy” we can also say “not frustrated.” It’s why we have customer service. It’s why we switched to Google Maps. People will choose the path of most happy and least frustrating every time.
Someone was once making the case to me that popups and the “smack the monkey” ads of the Myspace age were effective because they received high click-through rates. I argued that they were damaging because they branded the company as irritating. Branding yourself with “happy and not frustrating” is extremely valuable. It’s why Apple can afford sell 52 hours of one-on-one training for $1.90/hr.1 They lose money up front, but they more than make it up in the long term with the strong brand loyalty it brings.2
1 Apple’s One-to-One program costs $99 for a year of personal training.
2 In this example, Safeway takes the opposite approach and decides to make more money up front at the cost of their brand equity.

Take five minutes to watch this three minute video by Ze Frank. It’s pretty dense and I didn’t get it the first time through, but it has some of the best insights to marketing I’ve heard.

We humans are associative creatures. We’re pattern-matching fiends. It’s how we can quickly find our friends in a crowd, why we think calves are cute, and why we search for patterns in static. Pattern matching is what our brains do.

But those are just visual examples. Our brains also match patterns with experiences. For example, many people take up smoking because they’re hanging out with good friends who smoke, and they associate smoking with friendship and good times. In other words, smoking has been branded with friendship and good times.

Some of these associations (or “emotional aftertastes”) are inbuilt (afraid for safety = bad), others are discovered (I like strawberries), and all have a dramatic effect on the decisions we make.

This brings us to the single most important marketing lesson I’ve learned:

People want to be happy.

And by “happy” we can also say “not frustrated.” It’s why we have customer service. It’s why we switched to Google Maps. People will choose the path of most happy and least frustrating every time.

Someone was once making the case to me that popups and the “smack the monkey” ads of the Myspace age were effective because they received high click-through rates. I argued that they were damaging because they branded the company as irritating. Branding yourself with “happy and not frustrating” is extremely valuable. It’s why Apple can afford sell 52 hours of one-on-one training for $1.90/hr.1 They lose money up front, but they more than make it up in the long term with the strong brand loyalty it brings.2

1 Apple’s One-to-One program costs $99 for a year of personal training.

2 In this example, Safeway takes the opposite approach and decides to make more money up front at the cost of their brand equity.

Making Progress

A couple years ago I had a revelation:

People don’t like to work, people like to make progress.

If you ask someone to dig a hole, there’s a sense of satisfaction they get from digging it. If you then fill in the hole, you’ll frustrate them because you’ve taken away any progress they’ve made. They do the same amount of work either way, so their satisfaction comes from progress, not from work.

I realized this at the start of my 7th year of college. Most of this year was spent retaking classes I’d taken at other schools that didn’t transfer in for one reason or another. This was an extremely frustrating time because I was bogged down doing coursework I’d already completed without learning anything new. Busy, but not making progress. I was eager to start iTunes U after graduating despite having spent 8 long years in school already.

Think about how having a sense of progress can boost morale and focus in the workplace, school, games, etc. Think about the effect of having a progress bar on a toaster.

Interface is the wall that stands between you and what you need to do.

Interfaces matter!

A great piece of software is only as useful as it is useable. That is, an application works best when it’s built around it’s user, a human being (or in some cases, another computer*).

Consider the Mapquest of the early ’00s — a click to move, a click to zoom in, a click to zoom out, and a page refresh for every click. Compare that to the Mapquest of today which takes a photocopied page from Google Maps' book. Panning around the map is akin to holding a physical map, a much more intuitive experience than the “deck of cards” feel of the original.

Here’s the kicker: it’s possible to do the same things with both versions, it’s just infinitely more enjoyable with a better interface. And a more enjoyable interface is the one people will want to use.

Also consider browsing the internet on a non-touchscreen tablet. Zooming in to a portion of the page would require you to use a combination of button presses for zooming and re-centering on the content. Now imagine you have an iPad, and you use a two-finger “unpinch” to do the same zoom and re-center in one fluid motion. In this case, the iPad was no more capable than the button-driven tablet, but the interface made it more enjoyable to use. With the iPad & iPhone, Apple has been selling interfaces. It’s no wonder they’re raging successes.

With that, I’m off to check for apartments in SF for my upcoming move. Given my options, I’ll be using housingmaps.com, which takes the wealth of Craigslist listings (data) and marries them to the easier and more-visually-informative Google Maps (interface). Same data, new interface.

*(For those of you interested in what it means to build interfaces for computers, I’d recommend this talk by my friend Max Ogden on middleware and government data. Short and eye-opening!)

Evolutionary vs. Revolutionary Design

Traditional design is what I think of as “revolutionary” design: a Big Picture view that takes in all aspects of a problem and seeks the solution that best solves all of them.

Evolutionary design is a much more narrowly-focused view that is only concerned with finding a solution to the current problem. This often inevitable next step is usually the source of “cobbled on” features in an updated version of a product or a website. In solving the specific problem, the Big Picture may be ignored, leading to a well-designed feature and a poorly designed product.

Think about products or websites that have been updated with new features many times over several years. Which ones feel clunkier now than when they started? Think about the iPod. Think about Photoshop.

Grid tool for iPhone web design

I started looking for a grid overlay tool much like the 960.gs for use on the iPhone. Turns out there isn’t one. At least, not one that’s comparable. There is the iPhone Unigrid as designed by Vladimir Carrer, but it’s a static grid that seems intended for single-screen apps.

The best tool I found was the 960 Gridder by Andrée Hansson which needed some tweaking to work with the iPhone. Instead of dealing with setting up a bookmarklet, it was easier to just embed the 960.gridder.js file:

<script type="text/javascript">

// Insert optional override object before the function

createGridder = function() {

 document.body.appendChild(

   document.createElement('script'))

   .src='./gridder/960.gridder.js';

}

</script>

Then I modified the variables to match the 320px-wide* iPhone screen:

<script type="text/javascript">

var gOverride = {

 urlBase: 'http://gridder.andreehansson.se/releases/latest/',

 gColor: '#EE0000',

 gColumns: 7, // Number of columns

 gOpacity: 0.15,

 gWidth: 5, // Width on each side of gutter (1/2 desired gutter width)

 pColor: '#C0C0C0',

 pHeight: 10, // Baseline height in px

 pOffset: 0,

 pOpacity: 0.55,

 center: true,

 gEnabled: true,

 pEnabled: true,

 setupEnabled: false, // Awkwardly sized for iPhones

 fixFlash: false, // Not needed on iPhone

 size: 280 // Adjust for gWidth overlap (subtract gWidth * 2)

};

</script>

In the above example, I set the size variable to 280px, not 320px. I wanted a 15px gutter on both sides of the layout. 320px-(15px*2) = 290px. Also, the gWidth variable (in this case, 5px) will overlap the gutter on either side, so that value needs to be subtracted as well. 290px-(gWidth*2) = 280px. 

After this, we add the script to the body tag:

<body onload="createGridder()">

<!-- <body> -->

This lets you quickly enable or disable the grid by switching which tag is being commented out.

We can see the finished result here (non-grid version here):

Grid overlay

Also works on iPhone 4.

Hope this helps!

Woah. I’d heard Portland referred to as the “whitest major city in America,” but this really brings it home. Look at how uniformly white Portland is (represented by red) as compared to the color banding and blending in the Bay (white, asian, black, and hispanic represented by red, green, blue and orange, respectively).

Each dot represents 25 people. Many cities available in the Flickr set.