12 Spokes

After reading about how The Gap took a bit of time to do a site revamp, I took a look for myself and was a little shocked at their idea of a redesign. Just like many other mediums, you’ve gotta love the paradox in the Web world that a handful of people (or even just one) can make a beautiful, accessible site but a huge company with a lot of money and influence (enough to pay Common to be in their commercials) can’t top it.

Here are some things I would have asked before I gave the green light to launch this site:

1) Why on earth is the page optimized for a 800px wide browsing area, but there’s 33% dead air on the right? (read: horizontal scrollbar at bottom of screen)

2) Why does my Sale Image look like a Photoshop 101 experiment that could be done some quick color and contrast manipulation? (Does anyone else see that thin brownish bar at the very bottom?)

3) Why did we pick this font?

4) Kudos to for the use of Flash. I’m a huge fan of small Flash widgets for logos (a la KEXP), but this logo seems uninspiring (and diminutive?).

5) What is that white space below the top navigation? Nothing ever shows up there.

6) More kudos to The Gap for their innovative AJAXish shopping experience (multiple products on the side of a product), but it seems way too complicated (especially considering the rest of the site looks simplified). One request for me on a product page (“The Rugged Romantic”) required 171 requests, 702 kb, and almost 15 seconds to load (this is on a Powerbook G4 on an okay wireless network).

7) The icons! What happened to the icons? Did they take a vacation to Zaxxon and never come back?

8) What’s up with the favicon being a solid black box?

9) What’s up with the inline styles?

10) Why doesn’t my site validate?

Disclaimer: this is partly just an exercise in site deconstruction, given that I might be liable to make the same mistakes.

In conclusion, the site works (and has some functionality of its contemporary “Web 2.0” sites), but it looks like a generic ecommerce site with not much to set it apart. With that said, most people just go there to shop, so I digress.

Here at 12 Spokes, we’re big fans of 37signals and their products. We use Basecamp, Campfire, and Backpack (not to mention the ur-product, Rails), for both work and play. We think they have a lot of good ideas for making websites great. They advocate user-centered design, thoughtful design, all the good stuff.

But today, their design really let me down. I’m calculating our company’s budget for the next year, and I remembered 37s blogging about paying for Basecamp in advance. It would be easier to crunch our numbers if I could pay it once every year and be done with it.

Since I couldn’t remember exactly what I’d read about pre-paying, I decided to check out Basecamp’s home page to find billing information. I was greeted by a page that scrolls and scrolls and scrolls, filled with acres of text. It has almost no conventional navigation; instead, the page is peppered (liberally) with blue inline links like “even looks great on paper,” “more buzz,” and “read our manifesto.” I was looking for a FAQ, so I looked in the places where FAQ links usually live.: At the top right of the page I found just a logo; At the bottom of the page (after a bunch of scrolling) I found a link called “Questions?” which I thought might mean “Frequently asked questions,” but it opened my email app. Ahh: when they say “Questions?” they mean “Contact us.”

I finally found the link to a FAQ. It is buried two-thirds down the screen, embedded in a section titled “Can we try it before we have to pay for it? What about refunds?” I follow the FAQ link and was relieved. It delivered me to a page with actual navigation! Aha! There’s the link called “membership/billing”! This is what I’m looking for!

It took me two or three minutes to find what I was looking for. Even funnier, once I’d found the FAQ, I decided to blog about my adventure, and I had to go through the whole thing again, because I couldn’t remember where (among all that damned blue text) I’d found the FAQ link!

The bottom line: Like Steve Krug preaches, we have web conventions for a reason. When you dismantle those conventions, usability suffers. No matter how many yellow highlights or yellow fades you use, no matter how “clean” your design.

I just logged into my spreadsheets.google.com and was redirected to http://docs.google.com. To my pleasant surprise, I was shown a list of all of my spreadsheets AND all of my writely documents.

If you haven’t used writely (now google docs?), it is basically a Microsoft Word, hosted on the internet. The team at Writely, has done splendid work in making the editor feel exactly like desktop-driven version of the web processor. And what’s even better, it’s features include the ability to:

• collaborate on documents with other people,
• keep a detailed log of all revisions, highlighting the changes between each revision,
• import/export Word and Open Office documents,
• and possibly one of the coolest features, subscribe to an RSS feed of the document’s changes.

I’ve been collaborating with an editor from O’reilly on some possible books to write. We’ve been using writely and it has been awesome. Instead of sending Word documents back and forth as attachments in an email, we are immediately notified of changes the other person has made.

Hats off to the Writely, now Google team – although, I think I am going to miss the warm colors of old writely. Here’s to change?