6-8 seconds to keep your visitors
Is 6-8 seconds long enough for your website home page to tell your story?
- Are visitors able to get the feel and purpose of your site within this time?
- Is their attention or eye drawn to what is most important?
As mentioned in my opening newsletter we will be showcasing current work to explain some of the issues.
The Crazy Train web site design breaks some of the rules.
See why it is the exception and NOT the rule.
Minimize horizontal scrolling
Users hate horizontal scrolling
Minimize horizontal scrolling by keeping your site width a bit less than the width of the current average screen resolution. At this time (2012) it is 1024 pixels. That means if you set your site width at 960 pixels, there will be a bit of breathing room on either side of the average screen.
Centre your fixed width site
It is easier to read.
Display all important information above the fold
Users often decide whether to stay or leave based on what they can see without scrolling. Plus they only allocate 20% of their attention below the fold.
Even though web pages are infinite in length, height plays a role in design because people pay special attention to what they see when they first open a web page. Following the tradition of the most important headlines of a newspaper being visible when it’s folded, this very important region of your site is referred to as “above the fold.” With today’s monitors, that height is roughly the first 700 pixels only—what people will see without scrolling.
Use a conventional layout
The layout of a website serves as a kind of map for visitors. Using conventional site layouts is recommended for most sites, but not all the time as in the case of the Crazy Train layout where all the navigation and functions are presented vertically rather than horizontally.
You want people to concentrate on your message, not on understanding radically new structures. when you have only a few seconds to capture visitors’ attention and make them feel at home, or if you don’t have the money to design an alternative that works, why mess with what they’ve come to expect? Better to spend your design efforts on s that complement the purpose and topic of the site, navigation that’s easy to use, or images that stir relevant emotions instead of playing around with basic layout.
Backgrounds
If you use a fixed width design for your site, part of the browser window will display a background. The styling of this background can either help set off the rest of your design or really distract from it.
You have two basic choices for the background of your site:
- solid or
- images
If you want to use a complex image or photo for your site background, think about the potential visual clutter it can create. If you do choose to go that route, at least have a solid background behind your content.
Make sure the background of the site is part of the design process from day one.
Navigation
- Menus are the most important navigation tool
- Much of the value of websites lies in their ability to easily connect vast amounts of information, both on the site and on the Internet. Within a website, good navigation makes it easy for visitors to find the information they need, and of all the navigation tools, menus are the most important.
- Have your navigation where people expect it to be and in the same place on all pages.
- Key information on a site should never be more than three clicks away.
Organistation
- Lead the visitor from the more general to the more specific.
- Be sure that the names of menu items are easy to read: Use a clear font, sized large enough, with good colour contrast.
- Limit main navigation to 7 items - To avoid overwhelming visitors, it’s best to limit the visible items on any navigation menu to about seven, which means that if you have more than seven pages on your website, you’ll need some options. Crazy Train uses 8 and up to 10 is generally ok.
- For websites with fewer than, say, 20 pages, it probably makes more sense to make all your choices available all the time. This is particularly true for new visitors because they aren’t familiar with what’s on your site and you don’t want them to have to dig too hard to find it.
- Options for submenus
- display submenu items when you click through to a page on the main menu
- include a dropline menu which displays a second navigation bar with subpages for the menu item you’ve moused over
- avoid having more than three levels of drop-downs.
Ensure your header doesn’t take up too much space
From a design standpoint, what you want to ensure is that the header area of the website does not take up too much of this valuable real estate. The header, of course, carries your branding and your navigation, and although you don’t want this to be too small, you also don’t want it to distract from the page title and the first few paragraphs of text.
Header Images
The biggest culprit of wasted height is images. You might feel very strongly about an effective photo being displayed in the header area, but if that image is too tall, it’s taking away from content, and in most cases that’s not a good thing.
Home pages are one of the exceptions to this rule. Because there’s usually a small amount of content, there’s room to play with white space,images, and so on.
Loading time
If average website visitors take just 6 to 8 seconds before deciding whether to stay on a site, how long will they wait for the site to actually load? Patience is not something you should take for granted when other websites are only a click away.
Start testing your site’s loading time early in the development stages. You want to catch the time suckers in your design, coding, or content as soon as possible. The background tile for the Crazy Train website is quite large so this could be an issue for this site and will be tested and modified if necessary.
Loading time solutions
- Images - Keep the physical size of all images as small as possible (the average size of photos from a camera is 2,500KB, but an 80KB image can fill a computer screen). Optimize images for the Web using an image-editing program.
Look at the total number of images on a page. If you have 40 graphics and photos each averaging 10KB, that’s 400KB. - Multimedia - Optimize files as much as possible. Host video files on a separate server, such as YouTube.
- Scripts – Make sure that coding such as JavaScript or CSS are in files separate from the HTML page. Consolidate several scripts of the same type into a single file?
Typography
Sans-serif fonts
On the Web, sans-serif fonts are more commonly used for body text, in part because the tiny edges on serif fonts don’t display well on low-resolution monitors.
Font size
Font size is another important factor in the readability of text. Avoid making your body text too small – research has shown that no one likes it, not even teenagers with great vision.
Proportion of headings
Another role of text size in typography is the proportion between different levels of headings. Good design involves making clear the relative importance of sections of text by setting them off with the properly sized headings. Headings also help to break up the text into manageable pieces.
Width of text
The standard range of readability on the Web is between 50 and 70 characters per line, which is far less than the overall width of most websites. This means that breaking up the page into columns or using sidebars is crucial for maintaining readability.
Height between lines of text
Generous spacing between the lines of text is more inviting to read and it’s easier to find the next line as your eye moves down the paragraph, which is particularly important if you have a wide width for the column.
Images
- Some types of pictures are completely ignored. This is typically the case for big feel-good images that are purely decorative.
- Other types of pictures are treated as important content and scrutinized. Photos of products and real people (as opposed to stock photos of models) often fall into this category.
Images are a powerful part of a website’s design, but that power should be used for good and not evil. Images in a design should complement the content of the site, not distract from it.
- In e-commerce, product photos help users understand products and differentiate between similar items.
- On personal websites, users want to see the person behind the site; author photos, for example, are a key usability guideline for blogs.
Keep both the quantity and the complexity of graphics in your design to a level that does not distract. For example, if you’re an organization that promotes better housing, it might be true that you deal with all kinds of shelter, from houses to apartments to townhouses, but to have images of each type in your header can be visual overkill. If each image is also very detailed, you further increase the distraction factor.
Incorporating photos into your design is very important, in particular for quickly making clear your purpose and conveying the feel of the site.
White space
White space, or negative space, is what designers refer to as areas that contain little or no content. When you visit a website that feels crowded, you’re experiencing a lack of white space, and this crowding makes it difficult to find what you need or to know what’s most important
One of the great advantages of the Internet over print media is that space is virtually unlimited, so there isn’t the same imperative to fit in as much as one can, and white space can flourish.
White space is any area separating content on a page, even the amount of spacing between lines of text (the details of working with white space in text are dealt with in a separate question).
The margins between sections of text or other content are often neglected when thinking about white space. Jamming elements together not only makes the page hard to digest but the value of each is also greatly reduced.
examples
There are two basic considerations for using colour on your website: Does the central colour fit the purpose Q and mood of the site? Q Does the colour scheme based on that colour work well?
How people perceive s is the result of many influences: culture, gender, age, socioeconomic factors, and so much more. That means thinking about must take into account your audience as well as your goals.
Callouts
It’s common within the actual content of web pages to see boxes of additional information, option menus, or images. Sometimes referred to as “callouts” or “sidebars,” these elements are meant to supplement the main body of the text with added resources
The design of these callouts needs to draw attention to them, but without distracting from the main body of the text. Remember, elements such as callouts are meant to supplement the content of the page, not supplant it.
Browser Check
Check the display in all four major browsers on both Mac and PC platforms
- Internet Explorer
- Firefox
- Google Chrome
- Safari
Footer Menus
Having some navigation in the footer is something visitors have come to expect. This menu is particularly handy when you have more than a screen’s worth of content on the page.
Footer menus tend to be used for housekeeping items such as contact information, privacy policies, advertising information, or terms of use.
However, on smaller sites, you might want all your pages on this menu—or at least some key ones. A link to the home page should always be at the left side of the footer menu.
Contact information
Will visitors easily know how to stay in touch with you?
Websites allow you to start a dialogue with your visitors by using a variety of tools. But you have to make it easy for visitors to find those tools.
The most common way to help visitors get in touch is a contact butt on somewhere in your navigation structure.
If you deal with the public, it’s handy to show your general contact information on all pages, usually in the sidebar or the footer. Include the address, phone number, hours of operation, and so on.
The content of this article has been derived mostly from George Plumley’s ‘Website Design and Development – 100 Questions to Ask Before Building a Website’ and Jakob Neilson’s reports and blogs. It is a summary of what I see as the most important points for small to medium website owners.
http://www.amazon.com/Website-Design-Development-Questions-Building/product-reviews/0470889527
