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.

What’s the bottom line of my savings? This info is the hotbed for one of the fiery debates that has arisen during the Dimewise refactoring. Currently there’s a small box below the Dimewise navigation when you’re logged in that will tell you exactly how much you have in savings (aggregated from all your savings accounts).

On one hand, the savings box seems non-linear, random and out of place. On the other hand, it is at times useful to always know this information and even motivational (knowing this little bit of info seems to direct my decisions of what to do if I ever have spare cash).

Today I signed up for a new application called BillMonk (built on Ruby on Rails, as well). It’s an interesting service that lets you keep track of your debts to/from people—sort of an IOU social networking site. I’ve noticed that when you log in they as well have this “bottom line” area that tells you what’s important:

I think this is an example of how useful something like this can be. So what will end up happening to the savings box? Stay tuned!

Here at 12spokes, we love it when things are easy to use and HATE it when they aren’t. So we are happy to celebrate the second World Usability Day, a day when we focus on usability design, and engineering, and (straight from the Usability Professionals’ Association), “every user’s right to ask for things that work better.”

I realize that continuing this post much longer would break one of our favorite usability rules: as Erin, our copy-editor told a client yesterday, “The biggest rule for writing for the web is this: write it, and then cut out half of the words!”. So I’ll quit while I’m ahead. Throughout the day, we’ll post examples of either brilliant or atrocious usability. What examples do you have?

I am putting together wireframes for the first time in a few months. Lately I’ve only been mapping out internal websites, so the ol’ pen-and-napkin method of IA’s been working just fine, but we have a new client whose needs are best met by clunky ol’ web1.0 wireframes.

Here’s why: The client is actually a group of individual companies who are joining forces to create one big partnership. Getting all the interested parties in the same room seems to be a difficult task, and when everyone does meet, the discussion often breaks and splinters into side-topics of all stripes. There are a lot of voices to be heard, and pens and napkins just won’t work in this situation: there are too many people in the room, all talking at once, and an informal jotting session would be too, um, organic—to put it nicely.

So, we need wireframes, which not only help get everyone on the same page, but do it in an authoritative manner that commands thoughtful discourse rather than fevered, volatile brainstorming.

With that in mind, let me get to my real point: I really hate wireframing. It’s always seemed like a lot of nitpicky moving boxes and arrows around on a page, trying to get each piece in exactly the right place. Anyone who’s wireframed before can tell I’ve been working with Microsoft’s Visio: a program that does the job, but makes the job really painful and laborious. All those hours I spent dragging the mouse cursor so gingerly, trying to get the damn connector line to go straight; all the times I’d try to select a row of nine boxes, and after I’d selected eight, I’d lose the selection—daaarrrgh!

Good news for me: I got a MacBook this week, and installed OmniGraffle, a Mac-specific wireframing tool. I could say it’s equivalent to Visio, but that’s like saying that traveling across the continent by covered wagon is equivalent to flying: they’re both modes of transportation, yeah?

The comparison is apt: I just created a diagram in OmniGraffle that would’ve taken me 30 minutes in Visio. With OmniGraffle, it took three minutes. It is so much smarter than Visio. OmniGraffle knows important things like: “Erin wants her diagrams to be symmetrical, so if little guides appear to let her know when she’s hit a point of symmetry, it’ll save her a lot of fussing and nudging this stupid little box. Even if she doesn’t use those guides all the time, it’s nice for her to know they’re there”. And: “Sometimes Erin wants to apply the same colors, line thicknesses, and fonts to a bunch of boxes. Rather than making her copy and paste a “parent” box, we’ll let her grab the styles from one box and drop them onto any other box she wants. One click, instead of five!”

I’ve had my Mac for 36 hours, and this is my first “Ahhhh, this is so much easier” moment. I’ve been told by other converts that Macs just make everything better, but this is the first time I’ve really understood it. (With the qualification that Apple didn’t write OmniGraffle—but that it is built specifically for OS X and its kickass capabilities.)

And don’t even get me started on the sparkling copy that fills the OmniGraffle manual. It’s a copywriter’s dream.

I’ll leave you with this choice quote from the Wikipedia article about OmniGraffle:

According to former Omni Group president Wil Shipley, Graffle “sort of stands for ‘graph layout’... but in general it was a nonsense word invented just to counter ‘Visio’.

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?