UIEtips: Communicate Quick – First Impressions Through Visual Web Design

Jared Spool

October 1st, 2008

Good design, when it’s done well, becomes invisible. It’s only when it’s done poorly that we notice it.

Think of it like a room’s air conditioning. We only notice it when it’s too hot, too cold, making too much noise, or the unit is dripping on us. Yet, if the air conditioning is perfect, nobody say anything and we focus, instead, on the task at hand.

Few people come to a web page to admire its visual design. However, poor visual design is really noticeable and takes the user away from their task. While we often think of visual design in terms of page aesthetics, the real crime comes when it’s the visual structure that gets in the way.

The problem with invisibility is that it’s hard to appreciate. Therefore, it takes skill and practice to “see” what’s actually going on.

In today’s UIEtips, we’ve asked Luke Wroblewski to give us some of that practice. He’s done a sweet job of picking some great examples that highlight the role of visual design behind otherwise invisible first impressions. I learned a lot reading through his article and I bet you will too.

Read the article – Communicate Quick: First Impressions Through Visual Web Design

Have you changed your site’s design to give a better first impression? What did you do? What challenges did you face? We’d love to hear your experiences.

8 Responses to “UIEtips: Communicate Quick – First Impressions Through Visual Web Design”

  1. Donovan White Says:

    We redesigned the guts of our web site, leaving the home page pretty much intact except for a changed wrapper. We removed layers from the search interface and redesigned the product page from the ground up, moving spec-type information behind tabbed panels. We moved from a single long page of dense type to an image-dominated page with info chunks accessed via the tabbed panels.

    Looks great, works great, But… some folks hate it – claim they can’t find the prices, which live under the second tab. The first tab is the availability calendar – we sell villa vacation rentals, so the calendar is the key information. Pricing has multiple dependencies, so there’s no one set price for a villa and therefore requires a panel’s worth of space to display.

  2. 2008 October 02 - Links for today « My (almost) Daily Links Says:

    [...] Spool reckons we need to Communicate Quick – First Impressions Through Visual Web Design I need to spend some time at the Design Shard, looks like some great resources  Dmitry presents [...]

  3. Jon Whipple Says:

    Luke, thanks for this. It’s a nice cogent explanation of how “looking pretty” really works. People understand this on a superficial level, but its difficult sometimes to get past the idea that looking good or presenting better than your competition really does have a business case behind it. I think the same is true across all mediums which is why editorial design, and graphic design in general are so critical in the advance of business goals (whatever they may be) and why industrial design can make or break products in the market.

    I would venture further to elaborate on Donovan’s experience above, that when fundamental restructuring takes place in any information arrangement, visual cues and guidance are crucial to support the intended interaction and even those unforeseen.

    These cues and guides are delivered with foundational graphic design principles that bind the nature of the presentation with their actual expression. These are the stock and trade of strategic designers the world over, and it’s this function when managed as a core business discipline that can separate any organization from its competition. Even invisible competition such as time constraints, ignorance, or even apathy.

    Thank you for sharing your insights,

    Jon Whipple MGDC
    Wizard of Whitespace
    E-Cubed Media Synthesis

  4. Mark Pawson Says:

    Would it be fair to take these three lessons and apply them to a rich desktop app, particularily redesigning a complicated dialog as follows?

    1) Set initial Expectations -Web
    What should you do here- Desktop
    2)Scannability
    Locate most important functions first
    3)Immerse in the information and explore later
    Concentrate on necessary features but provide an Advanced function for customers who wish to explore

  5. Jon Cram Says:

    Excellent article, and as such I feel a little awkward mentioning a minor but significant tiny mistake in the label of the first figure.

    At present, the label reads “Figure 1: Squido page”. As far as I can tell this should read “Figure 1: Squidoo page”. Note the double not single ‘o’ after ‘squid’.

    When reading the article, I noticed the label and Googled ‘squido’ in an attempt to find the live page. This got me to squido.com which appears entirely unrelated. Thankfully Google hinted that I might have meant ‘squidoo’ and this correctly got me to squidoo.com.

    As I said, this is a minor mistake but one that did, for at least a few moments, have me scratching me head. Hopefully fixing this will stop others doing the same!

  6. Jared Spool Says:

    Hi Jon,

    Thanks for discovering the typo. We do our best to review each article, but, every so often, something sneaks by.

    We’ve fixed it.

    Thanks for encouraging our behavior,

    Jared

  7. Myth #4: 디자인은 웹사이트를 멋지게 보이게 하는 것이다? | Clearboth Says:

    [...] “좋은 디자인은, 그것이 잘 마무리지어졌다면, 보이지 않게 된다. 우리가 디자인을 의식하게 된다면, 그것은 좋은 디자인이 아니다. 실내의 에어컨에 대해 생각해 보라. 우리가 에어컨을 의식하는 것은 온도가 너무 높거나, 너무 춥거나, 시끄럽거나, 물방울이 떨어지는 경우이다. 하지만 에어컨이 완벽하게 동작한다면, 아무도 에어컨에 관심을 갖지 않고 자신이 하던 일에 집중한다.” - Jared Spool [...]

  8. Facial Plastic Surgeon Denver Colorado Says:

    Facial Plastic Surgeon Denver Colorado

    UIEtips: Communicate Quick – First Impressions Through Visual Web Design » UIE Brain Sparks

Add a Comment