Yesterday my wife and I stood in our unfinished condo deliberating paint colors. Closing day looms, and the developers require our color choices before they’ll finish their work. Our fondness for furniture aside, neither of us are interior designers or color mavens. So as we stood there in a white living room full of sawdust, we were stressing out big-time.

Fortunately one of our friends is an interior designer. We gave her a call and went back to the condo this evening. Within an hour, she took us from an intractable debate to a lovely solution. Given my line of work, I was as interested in her process as I was in the end result. How did she guide us to a beautiful color scheme when I, a supposed “designer,” couldn’t pick one color? What did she do differently?

The first thing she did is shed our preconceptions. “We can’t use a dark color in a small space” — not true. “We should have a different color in every room” — why’s that? “We don’t like [insert color]” — oh just give it a chance.

We had really boxed ourselves in with assumptions and myths, and I didn’t even realize it. She helped us forget these ideas and widen the space of possibilities. Next, instead of following abstract principles or assumptions, our designer looked closely at the colors that were already there. We looked at the colors of the cabinets, the dark wood floors, the surprising red touches in the light granite counters, and the green backsplash tiles. These were productive constraints, the kind you can juice. They reduced the possibility space in a way that was meaningful. Before long we had a palette of colors we loved, and a weight off our shoulders.

Creativity grows from constraints. But they need to be the right kind of constraints. The next time I think we “can’t” do something, I’ll try to remember my experience tonight and ask myself: Is this a meaningless preconception, or is it a productive fact I can work with? I know I’ll do better by focusing on the facts and leaving all other possibilities open.

My penchant for Christopher Alexander is on the rise again after spending the weekend at an inspiringly-comfortable bed and breakfast in Green County. Here’s an excerpt from A Pattern Language that cuts to the heart of what Getting Real is about.

202. BUILT-IN SEATS

Problem
Built-in seats are great. Everybody loves them. They make a building feel comfortable and luxurious. But most often they do not actually work. They are placed wrong, or too narrow, or the back does not slope, or the view is wrong, or the seat is too hard. This pattern tells you what to do to make a built-in seat that really works.

Solution
Before you build the seat, get hold of an old arm chair or a sofa, and put it into the position where you intend to build a seat. Move it until you really like it. Leave it there for a few days. See if you enjoy sitting in it. Move it if you don’t. When you have got it into a position which you like, and where you often find yourself sitting, you know it is a good position. Now build a seat that is just as wide, and just as well padded – and your built-in seat will work.

Last night we added a calendar picker to Backpack’s Reminder form. You don’t need to choose a date or time for Reminders if you use the preset options like “Tomorrow morning.” However you can select “At a specific time…” and set the exact date and time yourself. Before today, you had to use pulldowns for the day, month, and year to do this. Here’s the old design:

Now you can use a little calendar to visually select the date:

Let’s take a look at the design process. We had the idea to replace the pulldowns with a calendar picker because we did exactly that in Basecamp a few months ago. Here’s the calendar picker on Basecamp’s New Milestone screen:

Today I noticed that Ask ET (Edward Tufte’s forum) displays related articles in a very unique way.

People normally use tags to link related posts. If Ask ET used tags in a typical way, a post would look like this:

When you clicked on a tag, you might see a page like this:

This conventional method technically gives you access to the related articles. However there is a problem. You have to click the tag to discover what’s behind it. The Interface design tag in the first screenshot leaves a lot to the imagination. How do you know it’s worth clicking through to a whole ‘nother screen based on that two-word link? Most people wouldn’t bother, and they’d be missing out on good content.

Ask ET uses a totally different approach. Instead of linking to pages for each tag, it simply shows the tagged articles inline. No separate screens. No navigation. It’s a beautifully simple solution.

Click the image to see the actual design full-size:

I love how this layout removes a navigation step and puts the focus on the content. The list of related articles encourages you to wander through the site, like getting lost in Wikipedia. Individual article titles catch your eye. Just by passing over the list on your way to the article you might discover the Interface Hall of Fame/Shame or an article about email communication in the White House.

Sometimes we think we’ve got it all figured out as our websites settle into repeating the same patterns again and again. It’s great to see a fresh takes on a supposedly “solved” problem like how to link related articles.

My iTunes library got so big recently that I didn’t trust Shuffle mode anymore. Scrolling through my library was a memory exercise instead of a quick path to an ear massage. Plus I missed that feeling I had when I was 14, with a shelf full of maybe 50 CDs, each of them dear to my heart. While I felt the frustration growing, it seemed like too daunting a task to actually filter through 60 gigs of music. But an unexpected event suddenly gave me an opportunity.

A couple weeks ago, my hard drive went belly-up and I had to restore everything from backups (thank you SuperDuper). Restoring from a crash is like moving to a new apartment. You can cargo cult and just move everything from point A to point B, or you can take the opportunity to reevaluate what you should keep and what you should toss.

This reminded me of a tip Jason told me for unpacking from a move. The idea is you dump all the packed boxes into the middle of the living room. Then you take things out one-by-one only as you feel the need for them. After a couple weeks of unpacking only what you need, you discover the rest of the pile is prime material for donations or the dumpster.

I loved the idea. And my hard drive crash was the perfect chance to test it on my overgrown music collection.

So here’s what I did.

1. I made my living room pile. I found the iTunes Music Library folder on my backup and copied it to my Desktop as a folder named “Music”.

2. I opened iTunes and kept it completely blank. I set it to Album View to replicate my CD shelf of yore. Then I waited for an itch.

3. When a craving hit, I opened my Music folder on the Desktop, found the Album I wanted, and dropped it into iTunes.

Two weeks later, I have a beautiful hand-picked selection of Albums in iTunes. And since that “Music” folder only takes up 48×48 pixels on my Desktop, I’ll leave it there as long as I want as an Archive in case a rare itch hits.

You don’t need a hard drive disaster to replicate this tip. Just copy ~/Music/iTunes/iTunes Music/ to your Desktop and rename it “Music”. Then inside iTunes, delete everything. Wait for the itch, and start cherry-picking your own small music collection. Enjoy!

Van Mardian at Declutter Your Desk has sparked inspiration with a really clever way to deal with all the cables, connections and peripherals that make your desk a mess. He attached a pegboard to the underside of his desk and tied all those boxes and wires into a clean layout hidden from view. I especially like how he made the pegboard removable, so you don’t need to crawl around on your back to add or remove components. Total cost of the materials is $33.42 Canadian and around 2 hours of work. Awesome.

A few years ago I switched from Cingular to T-Mobile because Cingular’s customer service stunk. My experience today was another proof that I made the right choice.

Late Saturday night my beloved Samsung T509 had full signal in my apartment, but I couldn’t place or receive any calls. Heading outside, I walked six blocks before my calls would go through. Some kind of cell phone black hole was centered right on my apartment. What a bummer, especially when you’re trying to order pizza without a landline.

So the next morning I went out for brunch beyond the boundary of the black hole. I called T-Mobile with a forkful of chilaquiles and expected to wait on hold. Much to my surprise, T-Mobile doesn’t make you wait. They take your number instead and call you back. Three minutes later, my phone rang. The girl on the other end was friendly, listened to my problem, apologized, and told me she’d send an engineer asap. She couldn’t promise a response before Wednesday due to New Years, so I crossed my fingers and hoped for the best.

Today my comatose phone gave a familiar chirp. T-Mobile had texted me this message:

An Engineer has reviewed your trouble ticket and a resolution has been found. Thank you for choosing T-Mobile.

After making a few calls and dancing around the room, I had to reflect on this. T-Mobile nailed this support experience from the beginning through the middle to the end.

1. I never had to stand in line
Waiting on hold sucks. T-Mobile knows it so they gave me another option and called me back.

2. The agent cared about my problem
The girl on the line was kind, attentive, and apologetic. She made me feel like it was their problem and their responsibility. Which is exactly what I want as a customer. She also promised an update by a specific date, which eased my uncertainty.

3. When the problem was fixed, I heard it from them first
I received a text message as soon as my service was restored. That little victory SMS taught me that when they have downtime in the future, I can trust they will work quickly and notify me when it’s fixed. It’s so frustrating to repeatedly pick up the phone every half hour to see if it works. Thanks to their communication, next time I can relax and wait for the good news.

Kudos to T-Mobile for the good example.

Dennis Eusebio asks:

Many design thinkers really advocate deep, rich design research. Its a lot of documentation, interviewing, meetings and even more documentation just to get to the planning/prototyping stage. After reading some of the literature 37signals has put out, it seems like you guys stray away from this workflow in general. What’s your general workflow like? Is it different from traditional design workflow?

We conduct research all the time. But it’s a different kind.

It’s important to know that research is guesswork. The further out you try to guess, the bigger your margin of error. Like you said, many people do research before they start building their product. They write lots of documents and diagrams and specifications. The problem is, it’s all hypothetical. Until you’ve actually thrown the ball at the wall, you don’t know how it’ll bounce back.

People often think that research is like preparing for a long journey. Like the more food you stow on the ship the safer you are. But you don’t want to go on a long journey. You want to take as short a journey as possible, and come back for a reality check. See how you’re doing, then go for another short trip. Long journeys are the death of software.

I said we do a different kind of research. Here’s how we do it. We build something, then we collect feedback on what we built. For unreleased products, that feedback is our own opinions and review process. Does it do what we wanted? Does it feel right? Is it easy to understand? Will it support more features and future changes down the road? In the case of released products, we always listen to emails and forum posts from our customers. In both cases, the feedback on what we’ve built arms us for the next phase.

It’s like a conversation. You don’t sit down at the cafe, listen to your friend for two hours straight, and then talk for two hours straight. You take turns, constantly going back and forth, and the discussion finds its way.

Of course, you might wonder how to start. We build products we need ourselves, so our initial research is made of our own wishes, itches, and frustrations. When it comes to client work, my best advise is to become friends. Spend time together and discuss what they do until you can see through their eyes a bit. Pay special attention to their language and the words they use. Make notes, but don’t put them in the documentation shrine. As soon as you know enough to build the first basic feature, do it. Break away for a week or two and build it. Then come back, talk about it, learn more, and decide what to build next.

Research can make you feel informed, but I guarantee that building real software in many small steps gives you a lot more knowledge and confidence. If you’re interested in how to better share headspace with your clients, I highly recommend absorbing the Ubiquitous Language pattern from Domain Driven Design.

My patience is wearing thin on this one. There’s a new image editor called Acorn, and it looks pretty cool. So I click on one of the screenshot thumbnails in the lower-right of the home page. And then it happened. The sky turned black, the lights went out, and a giant gleaming polaroid slammed me in the face. That’s right, I got lightboxed.

Here’s a time lapse of my experience on the Acorn site:

You know what that looks like? A strobe light. And it felt like one too.

There’s more than the headache. Lightboxing kills context, and worse, it kills personality. Every image in every lightbox is the same, floating in the same generic universe, cut off and disconnected from your site, your style, and your design.

So next time, save us the eye strain and think twice before you start playing with the lightswitch.

I’m working on a new Permissions screen for Basecamp. All the hard stuff is done. The layout, the reorganizing of actions and flows, the templates, and most of the Rails side of things. With 90% of the work done, the last 10% is where I pull out the magnifier and tweezers to finesse the details, check my assumptions, gild the lillies and ready the “DONE” stamp.

You’re definitely in the 10% when you keep flip-flopping designs. I went back and forth on this one three times before moving on:

On this screen, companies appear with people whose access can be toggled (“candidates”) underneath. My first inclination was to cycle the shading on candidate TRs to make it easy to know who’s permissions you are affecting. But two things bothered me about this design.

The first factor is noise. I found a black border was necessary beneath the company headline in order to overpower the candidate rows and group them. The combination of black border and shading all over is just a bit much for me.

The second factor is conceptual. It’s important for people to understand that you add and remove companies from this screen in order to give or modify access for people in those companies. You can’t just add one person without regard for the company they belong in. I won’t get into the legacy and practical reasons behind this, we’ll just accept it as Fact for now. This noisey design doesn’t emphasize the company groups enough, and puts more weight on candidate tables.

Those factors in mind, here’s the subtle redesign:

Now the emphasis is on the companies. The border is removed and the page feels less noisey without the row shading. The redesign feels smarter, cleaner, and more modular. So after three rounds of flipflop, I’ll give it the champion belt.