Web Usability & Website Optimization

UXM and Me - The Journey so far, back to blogging

2008-01-15T00:10:00.000-08:00

It's been a long time I couldn't blog and was really missing it. I hardly had any time for it because of my tight schedules in office and rest of the time playing with my new-born baby. Working for UXM Satyam was really great and I admit that I learned a lot in Usability space and now know a lot of guys in this area. The journey so far with UXM (User eXperience Management) was fascinating but sadly now it has come to an end, I have decided to move on with something of my own. Hopefully I would be able to give little more time to blog and do lot things in RIA area, but only if my daughter allows me :)

jQuery

2007-09-26T21:47:00.000-07:00

It is cool and amazing. jQuery is a light weight JavaScript library that does some awesome jobs in event handling, animation and Ajax interactions on a HTML file. They call it "The Write Less, Do More" JavaScript library which can do wonders if at all you are bothered about code optimization and adding some cool effects to your webpage. It is little complex but small and very powerful, lets take a look at following code:

$(document).ready(function() {
$("#Jmenu ul").hide();
$("#Jmenu li").filter("[ul]").hover(
function(){$(this).children("ul").show("slow");},
function(){$(this).children("ul").hide("slow"); });
});

The first line gets it ready for the Action. The second line searches for ul structures inside the parent ul with id=Jmenu and hides em all. The third line is the mouse over function on parent li nodes. The fourth line finds out if the mouse hovered li has child elements (ul) and if it has then shows them slowly (cool show effect) and the fifth line hides these elements again on mouse out. Don't forget to add jquery.js file in your html file, it can be found on their site. Now if I had to write the same code using typical JavaScript it would be hundreds of lines of code to get the same effect. That was just a small example of what jQuery can do, needless to say it can do many wonderful things that you might not have thought JavaScript can do.
jQuery programmers and enthusiasts have come up with lot of Plugins and the repository can be found at: http://jquery.com/plugins/
jQuery is happening and big thing, if you are a UI programmer, get acquainted with it, you will love it.

Accessible DHTML menus (with Keyboard support)

2007-09-23T09:38:00.000-07:00

I am a fan of DHTML menus. Dropdown menus like suckerfish as discussed on alistapart adds great value to the page. They are not typical javascript menus but HTML and CSS based menus that works on all modern browsers and with small javascript they will work on older versions too. And yes if you disable the CSS they will still work because of ul-li structure in HTML which will still show the links on the HTML page.
Good on Accessibility part, right? but hold on here, despite so many claims of these type of menus being highly accessible, they are NOT and two most accessibility disadvantages of them are:
1. Disable Javascript alone and they won't work in IE6.0 and below and may be other older browsers too.
2. These menus lack keyboard support, very important for users with mobility problems and those who really don't bother to use mouse, I am sure many are there, atleast in IT industry.

If we forget first problem and assume users will use modern browsers, we still have to solve the second one and give user freedom to use keyboard for navigation. jQuery is the solution I found for this problem. We will discuss more about jQuery and how powerful it is in next post. FatFish from pfirsichmelba is one such example for DHTML menus with jQuery that adds support for keyboard and here is the demo http://pfirsichmelba.de/artikel-scripts/dropdown/horizontal.html
So next time you are building a accessible menu using DHTML don't forget to add keyboard support.

Float:left does not work in Firefox/Netscape

2006-12-12T03:51:00.000-08:00

HTML, CSS tips and tricks #II

The code might be something like:

<div>
<div id="”left”"> test text left or image</div>
<div id="”right”">test text right</div>
</div>

and style with properties:

#left {width:30%; float:left;}
#right {float:right;}

everything is perfect and works as expected in Internet Explorer, then what’s wrong with Firefox/Netscape?
There’s nothing wrong, IE is acting Smarter, it actually calculates and considers the width for ‘right’ div to be 70% but Firefox or Netscape takes it to be 100% which I think is logically correct as if we don’t specify the width=100% that means we assume the browser considers it to be 100%, and the same thing is happening here in case of Firefox and Netscape.

Well, now do I need to tell the solution? Pretty simple, assign width preferable little less than 70% e.g. 68% and everything will work as you want in Firefox, Netscape as well as IE.

text-align:center works in IE but not in Firefox

2006-12-06T02:59:00.000-08:00

HTML, CSS tips and tricks #I

When things work in IE as we expect, we presume that it’s perfect and should work in other browsers too. text-align:center; or text-align:right; properties for layout works well in Internet explorer as we want but it doesn’t work in mozilla-family of browsers, why?

Well there is nothing wrong with Firefox or Netscape but something with IE, read the property again, text-align must be for alignment of the text inside an element and not the alignment of that element itself, right? This is why Firefox/Netscape will not align the element but the text inside it, and that’s perfectly alright! But IE on the other hand uses this property to align elements as well as text inside them to specified location, which is logically wrong as far as the alignment of elements is concerned.

Well anyways it works in IE, but then what is solution for Firefox/netscape if you want to align elements in the center/right?
It’s very simple, use margin:auto; (all margins top, right, bottom, left would be adjusted automatically) or use margin-left:auto; and margin-right:auto; to align the element in the center and use only margin-left:auto; to align the element to right.
Isn’t that logically correct? It is! It works for IE too.

HTML, CSS and Cross Browser Issues

2006-12-03T23:17:00.000-08:00

There are things that work in IE but not in other browsers and there are things that work perfectly in Firefox, Netscape but look weird in Internet Explorer. Sometime when we code/develop an application with very neat HTML and good CSS, we feel that it will work fine in all browsers but that’s always not the case, Internet Explorer renders the pages with its own rules while others do it with their own policies. Most of the time its a problem with IE and the development rule should be to design first for other browsers and then fix the issues in IE.

One such example is one of my past articles: Alt text for images and Browsers - Why some browsers does not display alt text?, it is on why firefox, netscape and mozzila-family of browsers doesn’t show ALT text in tooltip but IE does and what is a way around if you need to show the alternate text for images in tooltip for these browsers.

Hereafter I am going to write a small series on HTML, CSS tips and tricks that helped me and hope they will help you too to counteract the cross-browser compatibility problems.

December 3 - World Disability Day

2006-12-03T06:32:00.000-08:00

Today, 3rd December, is a world disability day and I am happy that part of my work as a web usability professional, involves doing something good for physically challenged people and ie creating Accessible and Usable web application.
They have the equal rights to enjoy the life, and we can do lot many things for such people. On political front in India, if we can implement the cast-based reservation system then why can’t we implement reservation for these disabled people?

World Usability Day - 14 November 2006

2006-11-14T03:05:00.000-08:00

Happy World Usability Day - 14 November 2006

let the ANCHOR speak

2006-11-04T02:24:00.000-08:00

One of the most important aspects in web usability is how you link pages from/on your website, what you use between <a ...></a> tags, what you write as anchor text for the target page?

The text links if written properly could be very Usable, SEO friendly and far better than image links, but what we see most of the time on the web are the links that looks like written for kindergarten students, examples are “Click here”, “Link”, “Go To” etc

The internet users are smart and have enough knowledge to differentiate between links and normal text (ofcourse designers need to follow guidelines to make links appear as links and text as text) and you don’t have to force them to click somewhere or go to some link.
Second most important point is by writing anchor text like “Click here” or “Link” or whatever, you are not giving any idea to the user about what and why he should visit the target page, consider following navigation on one education website:

In above example apart from the top text everything else is links. One will wonder where to go first? Does it make any sense? In my case I clicked one link (random selection) and checked the next page and simply left the website to find the information somewhere else, and I guess more than 50% visitors would do the same thing. The worst thing on this site was when you click on any “Page X” and visit it, you can’t go to “Page X+1” or “Page X-1” or any other “Page Y” as you have only one choice, use the “Back” button, what do you call it, user harassment?

On the other hand image links have their own disadvantages; first of all if the image doesn’t look like a button/link then it’s hard for the user to understand it’s a link, secondly most of the time it fails to speak about the target page. In some cases good alternative text can help, but it is limited to some particular browsers like IE that shows alt text on mouse over the image, others such as firefox doesn’t show alt text on mouse over image (Read on why Mozilla family browsers doesn’t show alt text on mouse over), so if you can’t avoid images for linking then design them wisely and let the user know it’s a link and what it is linking. Image links are also not advisable from Search Engine Optimization point of view.

Then how to link?
Some suggestions on usable links:

Avoid images in links
Avoid JavaScript based links
Avoid flash navigation
Use Text links
Write keyword/key phrase as anchor text that best describes the target page
Add title text in link tag, eg <a title="web usability and SEO" href="web_usability_seo.html">Web Usability & SEO</a>
If can’t avoid images in links then write keyword/key phrase that best describes the target page as image alt text as well as title text in ‘a’ tag.
For main navigation add accesskeys in ‘a’ tags for better accessibility.
Default link appearance (without CSS) looks perfect but if you want to change them to go along with your page then use proper CSS to make decorate them look different than plain text on the page (link as link and text as text).
If you have to have a image/flash/JavaScript based navigation then have another set of text navigation in footer.

Usable websites rules the web

2006-10-12T03:07:00.000-07:00

What is the main differentiator factor in the success of most popular websites on the web?
I think it's Usability!
The backend technology may be same/different, a user will not care about it, what they want is feature rich, fast and simple websites which they can use. “Can Use” factor is very important and it signifies that Web Usability is one of the critical factors in success of a web site.
Let’s take a look at some most popular websites in their own category:

Category: Web Mail
Website: Gmail
User prefer it over other web mail services for one good reason and that is it’s very easy to use, no doubt others are good but isn't Gmail becoming your first choice as your personal web mail client?

Category: Community Portal
Website: Orkut
Orkut is there and everyone likes it, what makes it more popular than other community web portals which are there on the web from a very long time is the easy to use User Interface along with the great features.

Category: Online Encyclopedia
Website: Wikipedia
Fortunately/unfortunately it doesn’t have many competitors in it's category, but not only in its own category, Wikipedia, is one of the most popular websites on www and it's simplicity along with its rich contents is winning hearts, I have already wrote one complete post on why it's my favorite site on web

The significant thing about all these websites is that they are new on the web but still they have gained enormous popularity on the web. Fortunately other players in the category are waking up and revamping their own websites to stay back in the competition. The most common example of this is the search engines, MSN has come with a good UI and it’s working for them. Rediff, an Indian Web Mail company has also worked on web usability and improved their website significantly.
All I can say is that Web Usability is the making the difference and the difference is good.

The fight for the Domain names

2006-09-08T02:56:00.000-07:00

The basic reason behind this topic lays in the fact that domain names are allotted or given out on the first come first serve basis. Once in a life time opportunity, you get it or you loose it and if you loose it then forget about it.
It’s like buying a plot at your favorite spot/destination, if someone else likes it and buys it before you do, then it’s gone…. gone for ever. The only way, you can get it back is if the new-owner is selling it and you are the first one in the buyers queue. If you don’t want to get in such situation then own it the moment you locate it. There are still some restrictions, you can’t buy any plot that you like, for example you can like a place on Airport but you can’t just walk, buy and possibly built a house over there, can you?. You can only buy those which are free-for-public to buy. But this free-for-public area is large compared to restricted but very limited. If you like a place then there could be thousand others like you who also wish to buy the same piece of land, but the one, who first locate it, gets the chance to grabs it.

Same applies to the domain names. You think about it and find that it’s available, but you postpone the program, and the next time you search for it and you find that it’s GONE. Now it’s time for you to cry because you are not going to get it back and you have no other option but forget it and think for something else.

The first-come-first-serve principle for domain names also opened a prospective area for the Bad Guys. There were many cases where before the company get a chance to own their domain name, bad guys grabbed it for the sole purpose of making money because they knew the company will pay any cost to get it back. Not only many small companies or individuals lost the domain names they wanted, but giant companies and big name in industry have also suffered it till ANTI-CYBERSQUATTING CONSUMER PROTECTION ACT (ACPA) enacted in 1999 to protect companies/individuals with good name in the market from loosing their brand/company-name as their domain name on the www. The popular brand names have to worry at large about cybersquatting because for any Internet user who knows the company brand, he/she will just type www.<brand>.com in the browser to visit that company website; this is the normal perception, even I do the same thing, but if the user don’t find the company at this site then it’s frustration for the user and problem for the company.

There are quite a few examples of cybersquatting, where the big names have fought for their right to own the domain name, here’s a list of such Cybersquatting cases. Some of them are really interesting and some of them are still fighting.

Some definitions:
ACPA: The Anticybersquatting Consumer Protection Act (ACPA), enacted on November 29, 1999, amends the Lanham Act by adding a new Section 43(d). The law provides trademark owners with a civil remedy against cybersquatters.
Cybersquatting: Under ACPA, cybersquatting is the act of registering, trafficking in, or using a domain name with bad-faith intent to profit from the goodwill of a trademark belonging to someone else.
Typosquatting: Typosquatting is a form of cybersquatting where someone registers a domain name of a highly visited Web site, except with typographical errors.

So don’t delay in registering your domain name, the moment it clicks in your head, the same moment find and click the buy button to own it.

Findability - Use User's Keywords

2006-08-28T23:15:00.000-07:00

In his latest article Jakob Nielsen tells us the importance of
old, common and user known keywords for better searchability,
findability & usability and why should we avoid new, legacy words
when writing for web. Read the complete article .

When we prepare write up for a website, we should use the user
language, it makes sure user will find our site EASILY rather
than using new marking slogans and keywords that only the company knows and user seldom use them to search for your services or products. This is also very important for Search Engine Optimization or SEO.

When we are writing a SEO copy, our methodology for preparing a list of keywords for a website includes: preparing a list of keywords and keyphrases for company product and services using our own words and then research and prepare a final list of keywords that user likely uses to find our products or services.

You can use Overture's keyword suggestion tool or DigitalPoint.com's keyword suggestion tool (Side by Side Data from Overture and Wordtracker)to find the keywords that people, all over the world, use in their search queries to find your services/products.

Wikipedia - My Second favorite on web

2006-08-10T04:07:00.000-07:00

In my opinion this is the second best thing happened to the Internet, first is ofcourse GOOGLE (to me). Every article is worth reading and I really like the way it has been organized.

And the most beautiful part is that anyone can play with it as it allows everyone, absolutely everyone online can edit and save the pages. So if you don't like something (you won't get that chance, believe me), edit and save the pages and see it online it. Even if you mess up something while editing, don't worry, Wikipedia guys will take care of it.

I appreciate the Usability of Wikipedia, it is very easy to use and understand. In my case, I don't actually search on it, I directly append the topic of interest in the end of the url: http://en.wikipedia.org/wiki/topic_name and go, if it is present on the site it will take me to the article or if it is related to some other topic, it will auto redirect to that topic, that is what I call simplicity.
For example, if I wish to read Usability stuff I will just type http://en.wikipedia.org/wiki/usability and I am on the page, if I want good material on web
usability, I will follow the same thing above but will just add underscore ('_') between the two words which will make my url look like: http://en.wikipedia.org/wiki/web_usability

Google and other major search engines loves it. I see atleast one listing from wikipedia in most of my searches.
Wikipedia Rocks!

Web Usability Blooper - Top Airline company website

2006-08-08T03:28:00.000-07:00

This was my very bad experience with a very popular, low cost Indian Airline company website - AirDeccan.net. I was trying to reserve a ticket and this is what happened with me.

"One-way" trip is default selected so I went further and selected "Leaving From" city-A and "Departing To" city-B (auto refreshed with list of cities where service is available from city A), Departure Date, Number of Passengers by default is 1 which is what I wanted. As my selection and form filling was finished I clicked "Search" button and to my surprise the next step halted on blank page as shown below (I was using Firefox):
*Note - Click on images to see enlarged view.

Just to make sure this is not a problem on my end (e.g. Internet Connection), I tried 3-4 times and every time it didn't show anything on this search result page. The reservation was important to me and this particular airline provides tickets at very low cost, so I decided to give it a try in Internet Explorer, because to this point I could think of only one thing and that was: the site is not compatible with Firefox.

Now it was the IE turn, I have Internet Explorer Version 6.0. Obviously I had to follow the same process for booking, so after finishing everything when I hit "Search" button, what appeared after some time was this page:

After reading the message on the screen, the first thing came to my mind was that there is no seat availabe in the flight on the date I was looking for. Can you think of anything else?

Then I thought there might be large load on their server at that time, so I searched again after some time, but same result. Then I tried on some different dates in August, but to my surprise, it showed same result.

I was already getting frustrated; I gave couple of more tries to it but same thing and finally decided to call their Customer Care. Thank god I called them up, because then only I came to know that they have actually stopped the service on A to B route. It was a big surprise to me as well as more frustration as I had already spent 3 hours on their website. Well there was no other option but to go for alternate travel arrangements.

As a Usability professional what came to my mind was that this company didn't actually thought of their online customers (common man as they promote it) interacting with their website.

The simplest thing they could have done is removing city-B from the “Departing To” list for City-A in “Leaving From”list on the search page itself and vice versa.

In case the flight is stopped for temporary period then the correct message on the next page or on the first page itself would have been something like: "Service is unavailable between city-A and city-B till , sorry for.... blah blah blah"

Always watch out for your messages, say it clearly and honestly, never frustrate the consumer, after all you don't wish to loose one.

My Search details: City-A: Chennai (India), City-B: Pune (India), Booking date: Any date in Aug 2006.

My personal opinion about AirDeccan: I really like and appreciate this company as it is the only company in India which made it affordable for me to travel by plane :) and for thousands of other people in India who never thought they could ever fly in their entire life.

And as it is great service provider in offline world, I wish they do the same job online too.

Website URL: http://www.airdeccan.net

SEO & Web Usability - Unite them

2006-07-19T02:42:00.000-07:00

Just finished reading a good article “Web Site Usability and SEO” by Shari Thurow where she has answered the question – Why do usability professionals still not comprehend SEM and SEO? ... Good read for SEO and web usability experts, I must say.

I always believed that, Search Engine Optimization i.e. SEO and Web Usability are, among others, the two very important pillars in building a successful website and if these two forces (usability and seo) work together, there would be no way a website will fail in the market.

It is indeed very important for a professional with any of these skills to work hand in hand with a person, who has got expertise in the other field, or the best thing for a Web Usability Professional would be to acquire SEO skill sets and for a SEO guru to train self the web usability best practices. As I wrote in one of my previous articles -“Choosing Domain names from Usability perspective” I have explained the importance of web usability from the very beginning of a project life cycle, a phase where you/your client propose a website plan. Web Usability people should work with Search Engine Marketing (SEM) guys right from this beginning phase.

" Read more on the same topic at this five page article on Web Usability and SEO by Jennifer Sullivan Cassidy.

Web Usability Problem in Google – Sub Domain Bug

2006-07-07T00:25:00.000-07:00

I have passion for search engines, and like others I do spend lot of time in searching. I like searching on Google, Yahoo and MSN, they are my favorite search engines. And being a Search Engine Optimization professional, I do keep looking at the searches, study them, and collect the data for my projects/sites.
I have another blog, Sher, Shayari, Jokes and PJ’s just for fun where I post the email forward contents from friends and colleagues, which contains funny stuff like jokes, puzzles etc and being into IT company one gets lots of such emails everyday :)

Enough about myself, let me get to the point:
Well I was searching for “Shayari” (without quotes) in Google, to check relevant blogs and sites that have similar contents as my other blog on Sher and Shayari, and found some weird results on page 3(Results 21-30 of …), below is a screenshot of the same:

So what’s the catch?
If you look carefully at the results you will realize that 5 results are from the same domain but with different sub-domains and the search listing appears exactly same except for the part of “City” name. Now when you open each of these pages, you will find that all these pages hold the same content too except the “City” name.

Looking at the different results from the same domain (with city specific sub domains), I was wondering, is it really good for the end User?, and then I thought it could possibly a bug in the Search Giant, because I certainly see a flaw and more than technical bug I will call it as Usability Problem as only one result is enough as all the pages hold the same contents.

Well I know and accept that Google considers sub-domain as different website, but then as far as I know Google also do not consider different pages with exactly same content moreover Google may ban the duplicate pages. Considering these facts, how should we take the above search listings?
I hope Google will notice this posting and take care of this problem soon.

Alt text for images and Browsers - Why some browsers does not display alt text?

2006-06-29T05:15:00.000-07:00

Alt Text and Browsers
Large number of web surfers use Internet Explorer and they are well familiar with its features, one of them being the visibility of alt text. When we move mouse over any image, specified with alt attribute, we can see the alternative text for that image in a small popup box, called as tooltip.

Typically, the alternative text is specified in an image tag using alt attribute using this format: <img src="source" alt="some text" />

As our daily use of IE is very high, we tend to believe that the same features are available on all browsers, but that’s not the case. For example Firefox, one of the popular browsers, do not display alt text as tooltip, simply saying it won’t show the alt text for mouse over action as in IE. (See screenshots below)

Fig 1: Alt Text view in IE ......... Fig 2: No Alt text on mouse over in Firefox

Now, a question arises in our mind, why doesn’t Firefox display alt text for image on mouse over? Is it a bug in Firefox?
No it’s not a bug and Firefox is not doing anything wrong by not displaying tooltip for alt text on mouse over image that has alt attribute specified in its “img” tag but the truth is that Firefox is obeying the standard HTML guidelines by not displaying it.

There is another attribute called “title” and according to HTML 4.01 specifications, this title attribute may be displayed as a tooltip to provide more information about tag where it has been specified like table/image tag.

The alt attribute is used to provide ALTERNATIVE text for images and from the term it’s obvious that the alt text should be displayed only if browsers could not load image/s for any reason. That’s the real meaning of having alternative text for images.

Also considering the alt text is visible through tooltip for images; some people may take disadvantage of it and write wrong alternative text instead of text that actually describes the image, because they might see it as one of the marketing area to stuff it with wrong wordings. Some Search engine Optimizers or SEO professionals can also misuse this attribute. They might use this alt attribute to stuff keywords instead of describing the image.
This is again one of the reason why mozilla developers don't want to display alternative text for image through tooltip.

Actual webpage Title tag and Google

2006-06-18T22:48:00.000-07:00

Recently I was working on some issues related to Internationalization on a Website as a part of Search Engine Optimization and found some interesting facts. Till now I thought that Google keeps the same copy of title as it appears in the source code of a webpage and when it is being showed in search result it will appear exactly as it appears on the webpage when opened in a browser, but I was wrong when I did some googling on this subject.
Wherever the use of actual output of char entity and char entity itself (e.g. output of ‘& r a q u o ;’ is ‘»’) are valid to use, Google will also use the output copy of such char entities found in the title text and not the entity itself.
Example for clarification:
Open http://www.w3c.es/ in browser, the title of this page in the browser reads as:
World Wide Web Consortium - Oficina Española
but when you look at the source code you will find it as:
World Wide Web Consortium - Oficina Espa& n t i l d e ;ola
Which is obvious. Now search for “w3c Espanola” (without quotes) in Google, even here you will see the same title as it appears in browser for the website:
World Wide Web Consortium - Oficina Española
But now look at the source code of this Google search result page and you will find that it contains the same title text as appears on the result page, that is:
World Wide Web Consortium - Oficina <>Española< / b >
That means Google has the output of the actual title text in the source code of the site and shows the same in the search result page.

But wherever it is recommended to use entity only and writing actual output for that char entity in coding is not desirable (e.g. it is recommended to use '& a m p ;' for '&') then Google will also respect it and keep the actual title text including the char entity (and not the output of that char entity)
Example for clarification:
Search for “&” (with/without quotes) in Google. On the first place I found barnesandnoble.com, the title of which reads when opened the site in the browser as well as in search result listing is:
Barnes & Noble.com - Home Page
Now look at the source code of webpage, it looks as:
Barnes& n b s p ;& a m p ;& n b s p ;Noble.com - Home Page
And now at the source code of Google search result page:
Barnes <>& a m p ;< / b > Noble.com - Home Page

This clearly means Google has ‘& a m p ;’ and not ‘&’ with it, which is sign of respecting the W3C recommendations, but at the same time Google has skipped the '& n b s p ;' as it appears in the actual title text (source code) and replaced it by space in its own version of the same title because its OK to use space as well as as space equivalent in HTML, both ways are valid and this is what Google understands and act smartly.

Hats off to Google!

This also throws light on the fact that Google counts an entity as one character and not the full length of that char entity. Eg. Google will consider the length of ‘& a m p ;’ as 1 and not 5.

Note: The above information is based on some research in Google and there might be variations to it. Spaces have been used to show the character entity and some HTML Tags and so every char entity and space included HTML tags as seen above should be considered with spaces dropped.
Please post your comments. We would like to know your views and experience in this area.

Title Tag length, search engines and the User

2006-02-19T03:40:00.000-08:00

There is no hard and fast rule for the length of a title tag in a web page, at least I haven't seen it on W3.org or anywhere in HTML standards.
Below are my personal findings and views about the length of title tag and how long it should be from web usability point.

Lets first talk about the Search Engine Result:

Length of Title tag of any search listing in Google search engine can be upto 70 characters max, while in MSN it could be up to 75 chars and on the other hand Yahoo search engine shows maximum chars from a title tag of a web page and the maximum length in Yahoo search result of title tag could be up to 118 characters.

Now from user's perspective:
When we talk about user and web usability, the most important thing we need to consider is the Monitor resolution, many users still use 800X600 resolution. Well as we know we can write title of any length*, we should consider only the part of title that is visible in full view of a web page (e.g. in IE) on 800X600 resolution monitor.
Well in my finding this gives me approximate value of title tag length as 80 characters.

I would like to hear your opinions and suggestions on this topic.

Choosing Domain names from Usability perspective

2006-01-29T21:17:00.000-08:00

Web usability does not start from designing user friendly web application; it actually starts from very beginning i.e. registering a domain name for your website.

Registering a user friendly domain is very important from both user as well as search engine point of view. A simple, short, sweet, easy to remember combination of words should be the basic criteria for choosing domain name for your website.
Well this doesn't make sense if your company's brand is well known, you are lucky because you don’t have to think much but just go and register your brand as domain for your website and happily skip following guidelines.

Below are some important tips and guidelines on choosing a right domain name:

Keep it short - You are free to create a domain name of any length up to maximum of 67 characters, but registering lengthier domains would be of less help as people can forget such names easily. So when ‘toyshopnewyork.com’ can do a good job for your business then why to register a domain like ‘allkindsofkidstoysatjonysshopinnewyork.com’
Keyword rich domain – People who love and are very obsessed about their family names tend to name their business by family name, this is ok as far as physical office/shop is concerned but when it comes to online business you just have to leave it at your home because nobody in this world will search a business with someone's family name until and unless its a well known brand like "Ford", so if you run a toy shop and register a domain like ‘Jonybreigsstore.com’, it gives no advantage to you but if you register a keyword rich area specific domain for your store like ‘toystorenewyork.com’, believe me it’s going to help you a lot because if someone wants to search for toys shop in New York they will most probably use the key phrases like "toy shop in newyork" or "toys shop new york" etc and you have already got them into your main domain so people will find your shop more easily compared to jonybreigsstore.com.
Avoid Internet slang - Using slang’s (used mainly in chats) like 4 in place of "for", ur for "your" etc while deciding a domain name creates confusion e.g. if you register ‘something4u.com’, the chances are some user may type ‘somethingforu.com’, some may try ‘something4you.com’ and even some may use ‘somethingforyou.com’ to reach to your website. If you can't resist yourself and just want such domain name (using some slang words) then make sure you also register other combinations that sounds same as your actual domain and forward them to the domain of your choice.
Abbreviated Domains - Abbreviated form of less/not-at-all popular phrase should be avoided, e.g. someone runs a store in New York (something store) but prefer abbreviated form for the domain as ‘ssny.com’ but in reality it means ‘somethingstorenewyork.com’, it might be good for the owner but may not be a good idea from the users point of view, they may try the full form and to counteract such circumstances, register both abbreviated and full form and forward the full form domain to abbreviated domain of your choice.
Hyphenated Domain Names - People think hyphen separated keyword rich domains is a part of search engine optimization, well that’s true but search engines give equal importance to the keywords in a domain name without hyphens too, so why to worry. In case you can't avoid hyphens in your website name e.g. you register ‘some-thing-business.com’, register it but also register ‘somethingbusiness.com’ and forward it to ‘some-thing-business.com’
.com version - If the website is for your business, then you must register a .com version for your website, in case it’s not possible and you need/want other extensions like .net/.biz/.org only then register it as your first choice and then register .com version of the same site and forward it to your main domain (.net/.biz/.org/other version). This is because the .com version is oldest on web and people more likely use it while visiting any site because many of us still think that 'if it’s a website it should end up to .com and nothing else'.

If you think that buying multiple domains can put a big hole in your pocket, then just think about the brighter side, can you afford to miss potential customers just for additional $10* per year?, I guess No ;)

Last very important note: Today there are around 100 million registered domains on the web and the number is just increasing so the moment you think of registering a domain name for your website, just buy it that same moment because possibility is that you might not get it the very next minute.

*On an average domain registration fee per year comes to around $10 per year

Improve Title and Meta Tags for users

2006-01-17T09:29:00.000-08:00

Are the Title tag and Meta tags in every HTML page made only for search engines?
The answer to this question is Yes as well as No.
‘Yes’ because many search engines still rely on the text inside these tags while ranking pages but the major search engines (the most popular like Google, Yahoo, MSN) are getting smarter & smarter and gives lower priority to at least the Meta tags when it comes to their ranking algorithm.
‘No’ because if you write these tags keeping in mind only the search engines and don’t consider your users then you are probably risking the search engine traffic.

No matter what algorithm these search engines use for ranking web pages, what you see on the search result page is Title tag text linked to the site and small description about the site that most probably comes from the Meta Description tag. So when the search result appears, visitors just glance through the different listings, compare them and click on the result that satisfies their needs.

If the title and description tags are just stuffed with keywords and key phrases the same may appear on the search result page, but because the title and description does not provide a brief idea about the target page, many of the searchers may just ignore such listings.

So make a point to write Title tag that should provide the theme of the page and the description inside the Meta Description tag should be short description of the page.
As far as other tags are concerned, you shouldn’t worry about them, search engines just ignore them and so you can.

Happy 2006 to Usability n SEO Professionals

2005-12-30T06:24:00.000-08:00

Lets promise ourself to build and develop Highly Usable, Accessible, User Friendly and Search Engine Friendly websites in coming year 2006.

Quick Guide to Web Accessibility

2005-12-27T22:20:00.000-08:00

Section 508 states every website should be accessible to disabled people, well if you could make a web site which is accessible to people with disabilities then its obvious that normal user can also access it, then why not develop websites for everyone.

Here's a quick list for making Accessible websites

Use 'alt' atribute for every image/visual elements, and client-side image maps for images with multiple links.
Use Captioning and Transcripts of audio if you are placing some audio in the webpage and description of video files.
Use Accessibility keys to access atleast the main pages on the website.
Use 'longdesc' attribute to describe/summerize graphs and charts.
Use 'acronym' element for acronyms/abbreviations.
Use 'label' elements for form fields.
Apply 'title' attribute wherever possible.
Use CSS for layout.

Web Usability and Web Accessibility should be the key factors while developing a website.

First try with Tableless Design

2005-12-14T05:21:00.000-08:00

Well, I was wondering how do they design webpages without tables, then I decided to give it a try myself. While there are many advantages of Tableless Design over designs built with tables, but when I tried it myself, I found it little difficult and time consuming but the end product you achieve is same as what you can achieve with tables.

The basic reason why I am so interested in tableless designs is the Search Engine. Optimization of a website can be best achieved if you go for tableless design but then you need to find out if it is at all possible for your own website. Keyword prominence is very important in Search Engine Optimization, this is where tableless design has one of the biggest advantage as you can put the main content before the top design, menu, left navigation etc etc, you can just start the main content of a website just after the BODY tag keeping the same look and feel that you get through tables.

It could prove painful if you try to implement a dynamic website in tableless format. Just to give you an example check this page on Web Usability and SEO designed using tables, the same page has been developed using Tableless Design here.
The best example of tableless design is this blogging website itself (Blogger.com), just check the source code of this page and find for table.

CSS plays a very important part in tableless design, so if you are good in CSS. it shouldn'd be a problem for you to develop plain HTML websites in tableless format.

Web Accessibility, Search Engines and You

2005-11-24T01:48:00.000-08:00

Search engines love accessible web sites. The basic thing required to make a website search engine friendly is making it accessible to any type of user, and one good way to examine how accessible a website is, can be learnt using Text Browsers like Linx.

Google also mention the same guidelines through its Google Information for Webmasters without actually using the word "Accessibility" anywhere on the page, but everything comes
under the Accessibility guidelines of Section 508.
Even other major search engines like Yahoo and MSN do love Accessible websites.

Complete information about Section 508 can be found at US General Services Administration (GSA)'s fully devoted website www.section508.gov.
The one line philosophy behind this act is "Electronic and Information Technology should be accessible to people with disabilities"

There are couple of good tools to check the Accessibility of a website, you can find them at following URL's:

If you are Usability professional or someway related to Usability field or just have the good feelings to make web a better place then let's together make/help to build Accessible websites.