Make it work, then make it look good

Here is a simple rule: if you’re building a web site make sure it:

(1) works; and

(2) looks good.

The order here is important.

What does it profit someone to have a site which looks like a million dollars but which doesn’t actually work?

Here is my theory: the better a given web site looks the less likely it is to actually work.

A recent example …

Both Rod and Nic have raved about their Blackbox M-14 headphones, made by NZ company Phitek.

I figured I’d get me some of that noise canceling goodness.

(and, in case you’re reading this Larissa, this purchase decision was not influenced by sitting beside you this week! ;-)

I had an uneasy feeling from the moment I hit their home page. The main navigation links unfurl onto the page in a very pretty (but otherwise pointless) Flash animation.

The real fun started when I got to the check-out.

There are pretty well understood conventions now for how an online check-out should work. Don’t make me think.

Instead, here is the Blackbox check-out page:

Blackbox Check-out

So, I select the product I want and click the “Go To Payments Page” button.

An error message is displayed: “Please check your personal details”.

Eh?

It turns out that all three steps are contained on one page – with the second and third steps hidden in collapsed sections at the bottom of the form. To get to the second step I need to click on the “Review Purchase Summary” bar, although there is nothing to indicate that it’s a link. It doesn’t look clickable, and the mouse cursor doesn’t even change to a hand when I hover over it.

Then, having made it through the form I get this:

Blackbox Check-out Payment Page Re-direct

Unfortunately, the re-direct doesn’t work. And there is no obvious way to click-thru manually. I can’t get to the page where I enter my credit card details.

The net result: I haven’t purchased the headphones and my confidence in their brand is dented.

I wonder how many sales they miss because of a website which looks great but which doesn’t work?

6 thoughts on “Make it work, then make it look good”

  1. Good comment… I run a website (I won’t post it here to prevent the spam model happening) and it “works”. It gets some good readership, it’s fast, new features roll out every other day.

    But some companies, mainly advertisers, say it’s “ugly”.

    Well, but it works. And really well. And people keep coming back.

    Now we are in the middle of a new design project. Let’s see how it goes from there…

  2. Don’t get me wrong. I much prefer a site which looks great. Provided it also works.

    You can’t please everybody, and it’s important to make sure you’re pleasing your target audience first. But, if the site design is attracting negative comments then it’s probably a good idea to look at how that can be improved (I’m looking forward to seeing the new design!)

    I guess the point I was trying to make is: don’t put the cart before the horse.

  3. I totally agree. The site is a PITA – I wanted a screenshot of the headphones for my “review”, but without a screencap utility, I had to get one from Mauricio (I didn’t know how to do it in MacOS at the time). The rest of it is not selectable, and over-flashed.

    Offtopic: I hope MS sort that issue out in Silverlight :)

    Either way, the headphones are good :) I got them in DFS in auckland airport, based on using a pair that a friend had. In Leonie’s words: “Oh, I gotta have a pair of these!”

    BTW, have a read of the 37signals’ “book” – getting real (http://gettingreal.37signals.com/). It’s very good, and covers a lot of this kinda thing (the making it work, then make it pretty type thing).

  4. Hi,

    Thanks all for your comments on the Blackbox site which Oktobor Interactive had the pleasure of designing for our client Phitek.

    We appreciate your valuable comments Rowan, and agree that the purchase feature of this particular site was not as intuitive as it could be.

    After learning of your comments we immediately updated the purchase feature of the site, taking into consideration your interface thoughts. I’d be keen for you to take a quick look and get your thoughts on the update.

    Design VS function-ability is always at the front of our mind when first approaching a project, but sometimes you can just get a little too clever, or perhaps relaxed. Thanks for pulling us up on this one guys!

    Cheers,

    Leon Kirkbeck
    Head of Interactive
    Oktobor

  5. That’s the dirty 5 letter F-word for you!

    Can’t search it, can’t bookmark it, can’t manage the content, can’t even view it behind a lot of corporate firewalls… (any potential high-end headphone buyers there?)

    Phitek went wrong when they commissioned a post-production and motion graphics company to build them a site which had to sell something other than just a brand experience.

    Flash-based sites have their places (Oktober’s great work on the Stella Fight Club microsite is a good example) but eCommerce isn’t one of them. Sadly we see a lot of big ad budgets getting (mis)spent on this sort of thing because the ad execs are only comfortable (read lazy) working through existing channels (“those TVC guys”).

    Additionally, Leon, I take issue with your design vs. function statement… design IS function – especially online. There no inherent conflict, quite the opposite – making something look good is decoration, making something work well by making it look good is design.

    Oh, Rowan – life seems pretty good for NZ 2.0 stars – plenty of time to blog, drive Maserati’s and buy $380 phones!

Comments are closed.