Web Projects Classroom
Web Usability Design and Engineering
DATE: --/--/--(--)   CATEGORY: スポンサー広告
page top
DATE: 2006/10/29(日)   CATEGORY: Web Projects
Web Navigation Study: A Clickstream Analysis

A clickstream is the recording of what computer user clicks on while web browsing. It is a kind of web analytics which measures the behavior of visitors to a website.

The researchers from Web University of Hamburg found that the nature of web navigation has changed over time.

Comparison chart of three long-term studies
Time of study19941995-19962004-2005
No. of users1072325
Length (days)2135-4252-195
No. of visits31,13484,841137,272
Recurrence rate61%58%45.6%
New window0.2%0.8%10.5%
Direct access12.6%13.2%9.4%

  • Links following has remained the most common navigation activity, accounting for 43.5% of page transitions.

  • Direct access through bookmarks, typing in urls, or home page button has remained relative steady around 10%.

  • New window has jumped from less than 1% to over 10% in the past 11 years.

  • Form submission has increased from 4.4% to over 15% of all navigation actions reflecting the increase in web services.
    (43% of all form submission involve search submission, followed by online dictionary and travel planners)

  • With the increase in new windows and use of AJAX, the back button has dropped from over 35% to less than 15%

ClickStream (Preview)

The clickstream results show a similar F-shaped triangular pattern to heatmaps. The heatmaps result of user click patterns is quite similar to the result of eye tracking. The most active area is located in the upper left corner of the page (example). Also we may find that there is an unexpected active area in the lower right part of the page. This turned out to be where Google placed their next page link.

For those who are interested in making your own heat maps for your website, you may try looking at the website bellows. It contains the source code and steps about making a heat maps.

[ TB*0 | CO*5 ] page top
DATE: 2006/10/22(日)   CATEGORY: Web Projects
Create a Website Without Tables
In my previous presentation, I have already mentioned about the advantages of using CSS, such as better accessibility, better compatibility, good for SEO, easier update process, reducing HTML page weight, etc.

Today, I am going to talk in details on how a website can be created without using any tables. Since "table" is used for data only and is not recommended to use table for building the structure, so we should avoid using it.

Now, I will show you how to convert the traditional tables to <DIV> tags in a HTML file. Suppose we have a website like this:

Web Design Sample

The first thing we need to do is to separate each part into different blocks. Here we have the header, horizontal menu, left menu and the content.

If we use tables for this layout, we may need to cheat and use a lot of colspan, rowspan or even worse, the infamous transparent GIFs (spacers). This increases the weight of the HTML.

Web Design Sample

However, if we use DIV, we will have 4 blocks here. We need to set the width, height and background on each block. For the "leftmenu", we can either use "position:absolute;" to set the absolute position or use "float:left;" to align on left. After that, we should also set the left margin for the "main" block, so that the content will not overlap with the left menu.

Now, all blocks are completely allocated and it's the time to build the menu buttons. Since we are not using table, we can't put each of the menu item into cells. So we need to find another way that can do the similar thing.

ul,li {
     list-style-type: none;
     margin: 0;
     line-height: 30px;

For the left menu part, we can use HTML list (<UL> and <LI>). Simply use one <LI> for one item and remember to set the list-style-type to none (to avoid showing the bullets / black dots).

How about the horizontal menu? We cannot use HTML list for that, right? The solution is also simple. Just use the <A> tags instead and put them inside a <DIV> block. Finally, we will have the result here:


Is that easy? If you have time, you can have a look on the sites below. They are the good examples that the whole pages does not contain any table:


[ TB*0 | CO*0 ] page top
DATE: 2006/10/16(月)   CATEGORY: Web Projects
Web Content Accessibility Guidelines

Accessibility means access to information for all - not only focusing on people with disabilities or elders people, but also the people who: 

  • may not have or be able to use keyboard or mouse

  • may have a text only screen, small screen or slow internet connection

  • may not speak or understand fluently the language in which the docuemnt is written

  • may be in a situation where their eyes, ears or hands are busy interfered with

  • may have an early version or different type of browser 

The guidelines from W3C address 2 general themes about accessible design: 

1) Ensuring Graceful Transformtion
2) Making Content Understandable

Here are the 14 guidelines from W3C: 

So, you may ask, how can we know or check our website is satisfied to these guidelines or not?

There is a website call WebXACT allows you to test the accessibility of your pages. Just simply type the URL of your page and it will generate a report for you.

After the report comes out, you will find some checkpoints there. Each checkpoint has a priority level assigned. According to W3C's guidelines, priorities have the following meanings: 

Priority 1 - A Web content developer must satisfy this checkpoint. Otherwise, one or more groups will find it impossible to access information in the document. Satisfying this checkpoint is a basic requirement for some groups to be able to use Web documents. 

Priority 2 - A Web content developer should satisfy this checkpoint. Otherwise, one or more groups will find it difficult to access information in the document. Satisfying this checkpoint will remove significant barriers to accessing Web documents. 

Priority 3 - A Web content developer may address this checkpoint. Otherwise, one or more groups will find it somewhat difficult to access information in the document. Satisfying this checkpoint will improve access to Web documents.

By using WebXACT, you can now easily find out the problems of your website and fix them one by one to improve the accessibility of the site.


Useful Link:

[ TB*0 | CO*0 ] page top
DATE: 2006/10/02(月)   CATEGORY: Web Projects
Measuring Your Site's Content Pages
Suppose you want to find the information from internet, you will try typing some keywords through search engine, right? However, there are so many search results come out. Which site contains the information that is most suitable to you?

I think most of you may try to click the links one by one. Of course, it is certainly natural. And I think most of you will spend only a few seconds to look through those sites. Once you enter a site, your mind will almost immediately determine whether the content is the information you want to obtain or not.

Since audiences will only pay attention to your site for a few seconds, you should ensure that your content pages are understandable to users and you should also make sure you have designed content pages that communicate the essential information effectively.

So, how can we know our site is understandable to users or not?

Simple! By using a very simple usability testing technique, we can quickly measure how a content page performs with users. We call it the 5-Second Test. This test involves showing users a single content page for a quick 5 seconds to gather their initial impressions.

Here is an article giving the example of using 5-Second Test:

Red Cross (DEMO)

From the article, the author tried to test the RedCross.org website with some users by using the 5-second test. They just gave only 5 seconds to their users and told them to remember everything they saw in that short period. After that, they asked users to write down everything they remember about the page.

"What is the most important information on this page?"

By asking the above question, we can easily know the user's initial impressions. If the page is understandable, users will easily recall the critical content and accurately identify the page's main purpose.

Since 5-second test is quick and easy to implement, we can test very early in the development cycle and we can gather large amounts of user data in a short time.

[ TB*0 | CO*0 ] page top
DATE: 2006/09/24(日)   CATEGORY: Web Projects
The Power of Cascading Style Sheets
Is there anyone heard about Zen Garden? If you want to be a CSS professional, you must know Zen Garden. Zen Garden is an influential World Wide Web development resource. The goal of the site is to showcase what is possible with CSS-based design.

CSS Zen Garden

All visual differences are the result of the CSS. It means that you never need to change the code in any HTML markup. You only need to modify the external CSS file and the design and outlook will be totally different. This is the concept of CSS skinning.

This blog is also build with the same technique. You may try to click on the links below to see what it will change:

Style 1 Style 2 Style 3
Style 4 Style 5 Style 6

How to do that?
To build a skinnable website, you should have at least some basic understanding of CSS and XHTML. After that you need to create at least the following CSS files for your website:

1) Base CSS with simple structure
2) Advanced CSS with final structure
3) Skin CSS
4) Fonts
5) Printer Friendly CSS

What are the benefits?
Since we have both the base CSS and advanced CSS, this is good for forward and backward compatibility. By using separated CSS files, modification on website style becomes easier and faster. We can also save our bandwidth, because the CSS files are cached.

Here are some useful references that help you to create skinnable website with CSS:

Other references:
[ TB*0 | CO*9 ] page top
Copyright © Web Projects Classroom. all rights reserved. ページの先頭へ