Design III: Making and sustaining a good first impression

If you only have one quarter of the time it takes you to blink to create a good impression - what are you going to do? Find out the best practices in design and a standardized approach to strategically designing your website.

Design is meant to facilitate understanding in communicating a message.
You probably know that website visitors make rapid decisions about a site’s quality, but you might be surprised to learn how fast that judgement is made. "Visual appeal can be assessed within 50 milliseconds, suggesting that Web designers have about 50 milliseconds to make a good impression," according to Dr. Gitte Lindgaard of Carleton University in an e-commerce Times article about a report published in the journal Behaviour & Information Technology.

It goes on to say “If the user thinks the Web site looks good, the impression translates to other areas of the site, like its content. Since people like to be right, Lindgaard reasoned, they will continue to use a Web site that made a good first impression.”

Making a good impression will determine the success of your site, which is why so many people respond “re-design,” when asked: “what’s the one thing you could do to improve your online presence?” (read Design I: Making your site pretty can get ugly). Determining how best to generate that positive judgement in the first few milliseconds is not easy, however. It requires that you to address the following considerations:

• Good design – effectively using colour, fonts and graphics.
• Mind your manners – follow your brand and style standards including use of logos, typeface, colour, use of photos and graphics, and position.
• Be consistent; even if you break the rules do so in a consistent manner.
• Understand your users.
• Follow your site Strategy to fulfill set business requirements that you are measuring.

Good Design
In general, an impression is made from the overall design of the site which combines the look and feel, the layout, and the ability for the user to find what they need. Good design follows some basic rules for colour, fonts and graphics as well as in its layout.

Colour
The use of colour is complex. The human eye can discern over 16 million colours. The most important thing to remember is that colour can be used to add emphasis or to de-emphasize. Colour can evoke emotion, establish mood and create themes. Today most websites base their colour schemes on their branding. Usually three colours maximum with lighter shades – any more colour dilutes emphasis and gives too much of a rainbow appearance which can be perceived as unprofessional or childish.

Colour best practices

• Use your brand colours.
• Use three main colours and then shades of those colours.
• Either use complimentary colours or contrasting colours.
• Be consistent.

Fonts
Typography enhances and extends the meaning of words. Fonts also can aid in readability and be part of your overall brand. “Good design is design that is readable”.

Rules of font readability

• Underlining words actually make them harder to read. On websites underlining is a signal that something is linked – therefore, don’t use underlining – leave it as the default for links.
• Italicized text is also harder to read – this includes cursive and fonts that emulate handwriting.
• Bolding text adds emphasis but also makes letters thicker which can hinder readability if used too much.
• ALL CAPITALIZATION is hard to read. Upper and lower case allows the eye to quickly recognize the look of words for reading. All caps create a block and therefore the eye has to slow down and read each letter to create the word. All caps or uppercase should be used sparingly, at the most for titles.
• Left alignment is easiest to read in western culture since we read left to right. The eye knows where to return to at the end of each line.
• Centred text is a bit harder to readand should only be used for smaller chunks of textlike titles and quotes.
• Right aligned text is the hardest to readsince the eye needs to search for the beginning;this should be used sparingly.
• Be consistent. Using heading styles will aid readability and search engine positioning which seeks out keywords by importance which includes use in headings.

Graphics
The saying “A picture is worth a thousand words” is true because visual elements aid in our understanding and appeal to us on several levels. Visual elements are used in design to:

• Enhance understanding
• Grab attention
• Aid memory
• Add clarity
• Generate mood
• Convey themes, symbols and intangibles

Photos vs clipart
Photographs convey a more professional look while clipart/cartoons have a comical/fun feeling. Animated clipart, so popular 10 years ago, can be distracting. Whatever you decide, you should be consistent – either use photos or clipart – avoid using both as they do give different look and feels to your site. And remember copyrights apply, for Internet sites either own the art you use or only use royalty free images.

Flash
If you are using flash animation be conscious of the download times – no one wants to wait while something takes forever to load. Use flash to convey and add emphasis to messages – don’t use it just because you know how to or because you think its cool – always think of your user and audience first. To check out how fast your page loads and what size items on your page visit http://www.websiteoptimization.com/services/analyze/index.html.

Best Practices for photos:

• Use ALT (alternative text) attributes – if any user can’t see the image at least they will know what should have been there; search engines and readers for the blind read them so this is best practice for accessibility.
• Photos should lead the eye into page/screen – have photos of people looking into or at your page and have graphics lead into the page and not off it.
• Choose your photos carefully. Portraits should be consistent in size & perspective; they should be head & shoulders.
• Photos should be interesting. They should show movement or action as that creates interest. Some branding strategies include the mandatory use of action photos.

Layout
A good information architecture is all about getting visitors to where they want to go quickly (read: Design II: Structure comes before design) and will drive the way your site is laid out. Ensure that there is a good white space ratio to give the eye a break so that you’re emphasizing what you want; over crowding your page causes viewers to get confused and frustrated.
The layout of each page should aid in luring and holding a visitor’s attention. The layout design should serve a purpose and help to achieve the objectives of the site through its look, size, shape, arrangement of copy and pictures.

Page size

• The maximum amount of users can easily view 800 pixels wide pages.
• 50% of readers use 1024x768 screen resolution (17” screen);
• 35-40% use 800x600 (15” screen);
• the rest use 640x480 (12” screen) and pdas and cell phones – source: Thecounter.com

Other page considerations

• Provide a printable version
• In traditional page layout (for print) the general rule for design is that if you place a $5 dollar bill on the page any way (vertical, horizontal or angled) it should cover a design element (including headings). If it doesn’t, it means you have too much unbroken text which is hard to read – especially on a website where your writing should be chunked. See Writing for the Web and Getting printed content online.

Branding and style standards
Design should always follow brand (see Building a web brand), especially for websites. It helps build your identity and credibility.

Be consistent
Consistency in design reveals that there are standards and plans in place. Consistency conveys professionalism. It also shows attention to detail and that you take care and have pride in everything you do. If your site isn’t consistent, what impression do you think you’re conveying to your site visitors?

Understand your users
You don’t know what you don’t know – so find out. Some standard user information gathering methods are:

• surveys
• interviews
• focus groups
• usability testing

Your users will show and tell you what they want – it’s up to you to put it into action.

Strategize and measure
You need to keep in mind what your goals are for your website and how you plan to achieve and measure them. By listening to your users and stakeholders you will be able to implement content and tools that will provide them with what they need to achieve their goals on your site which in turn will help your site achieve its goals. And of course the best way to know and articulate that achievement is by having defined measures in place which are tracked on a regular basis and responded to quickly. There is no sitting back on your laurels.

What does a good first impression look like?
Well, if visual appeal can be assessed within 50 milliseconds then that first impression is made on whatever page the user views first and on the overall look and feel (they’ll get to the details later if they like what they see). Don’t assume that your visitors are looking at your snazzy new home page first – your site has various entry points made available through reciprocal links, newsletter links and bookmarks. Yes, that means your entire website needs to be designed and consistent but if you have a strategy and information architecture in place then it is a piece of cake.

Once you’ve made a good first impression you must follow through with content and functionality. Design is by necessity judged on its ability to achieve a function – whether it is to attract, emphasize, aid usability or facilitate understanding. Design can’t stand alone, it needs to be wrapped around function and if no one knows what the function is you can’t possibly achieve good design.

To make a good first impression make sure your design supports your site’s objectives, has a purpose and puts the emphasis where you want your users to go and enables your users to find what they want – design strategically.

You only get one chance at a first impression – make it a good one.