The first bite is with the eye

I think I first heard the phrase “the first bite is with the eye” from a TV chef, but it applies equally to the software creation process as it does to cookery.

A user’s interaction with a piece of software or web site is as much emotional as it is functional. Compare the soft, warm, fuzzy feeling you get when first interacting with a product from 37 Signals, say, to the stomach churning reaction you get when booting up Lotus Notes, for example.

This immediate emotional response will pervade the whole of a user’s long-term impression of a product, imbuing their relationship with whatever feeling was conjured up in those preliminary interactions. They say that in most job interviews the interviewer makes up their mind within the first 5 minutes. The same is equally true for software.

That’s the reason that I’m often accused of prematurely optimizing the UI. I’ve been round the block enough times to have been bitten by the following type of interaction:

Me: “This is just a wire-frame, we’re only trying to prove out the functional flows of the application. Don’t worry about the layout or the look and feel – that will be dealt with later.”

Client: “Ooh, I don’t like that font … and I think that’s our old logo. Maybe we should give it a drop-shadow or something. I’m disappointed, I expected more from you guys …”

After a host of similar experiences I now make sure that I give whatever product I’m working on an appropriate level of design and polish for the current stage, while still trying to evoke positive emotional responses. In my mind it’s always worth spending an hour or two tweaking a CSS file to tighten the layout, soften the lines and add a little sparkle – a little :hover goes a long way. Then even if the application isn’t functionally complete at least it looks professional and imbues the client with a sense of confidence and pleasure. This will put them into a much more positive state of mind, which can only be a good thing for the next stages of the project.

Call me shallow if you want, but when I arrive at a (studiously) un-styled site, like our guru Martin Fowler’s, I have a negative knee-jerk reaction making me resist reading the wise words he’s actually written. When, however, I land on a site where they care about the first bite I feel compelled to carry on reading all day.

If someone in a meeting has a bit of chopped herb stuck in their teeth it’s really hard to focus on what they’re saying – you get distracted and have a negative emotional response. In the same way drizzling some coulis and sprinkling a bit of chopped herb onto a plate before serving can provoke a positive emotional response which fools the diner into enjoying their food more.

2 thoughts on “The first bite is with the eye”

  1. You realize your header is pink, right? :)

    “The first bite is with the eye” stuck in my mind since I first heard it. To overextend a metaphor (as I’m fond of doing), the difficult part is developing the kitchen toolkit of squeeze bottles and mandolines which make presentation easy in food preparation. We’ve all set out to do a “small tweak” to a UI, especially on the web, only to spend far too long agonizing over that one errant pixel-fly in the interface-soup.

    And yet, despite agreeing with you, I’ve done a terribly poor job in the presentation of my own site. One of these days I’ll get some time. Till then, I’m a staunch defender of default wordpress.

  2. Hear hear! It really is amazing what a little spit-polish on the UI can do to a client and user’s opinion. I’m often approached about improving the UI months in…at that point it’s probably too late. Expectations have been set. People who didn’t like it before are less inclined to ever try the tool again (unless forced).

    Somehow we have to find a way to make this a priority right at the start of a project. It’s one of those things that pays itself off many times over throughout the life of the tool.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>