UIEtips: Communicate Quick – First Impressions Through Visual Web Design
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.
October 1st, 2008 at 4:47 pm
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.
October 2nd, 2008 at 4:00 am
[...] 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 [...]
October 2nd, 2008 at 11:54 am
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
October 2nd, 2008 at 11:58 am
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
October 3rd, 2008 at 10:57 am
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!
October 4th, 2008 at 7:16 pm
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