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.

Website Design choices can affect conversion rate

2005-11-21T07:23:00.000-08:00

I just finished reading an awesome article on AListApart.com - Design Choices Can Cripple a Website. Author Nick Usborne has illustrated the fact that just the choices of website design can really affect the rate of conversion despite of having good marketing content, sales pitch and other text on the website. Nick has provided some real good survey statistics to prove his point with three design examples for same webpage, keeping the text and content same.

Apart from good stuff and statistics, he has a small but very interesting test for Usability Professionals and Web Designers.

This article is a must reading for all User Interface designers and Internet Marketing professionals and good for everyone who has some kind of relation with E-commerce websites.

Usability Testing - Heuristic Evaluation of Website

2005-11-13T20:51:00.000-08:00

Web Usability is gaining high importance in Internet world and majorly Information Technology(IT) sector is looking into Usability with deep interest, putting more money and resources to develop and produce highly usable web sites and products simply for one reason: USABLE WEBSITE SELLS.

Heuristic Evaluation or Heuristic Study of a website is the first part of Usability Testing where a number of Usability professionals evaluate a website on Usability points and then together find a solution to remake/redesign the User Interface to make it more user friendly.

By Dictionary "Heuristic" means Computer Science - Relating to or using a problem-solving technique in which the most appropriate solution of several found by alternative methods is selected at successive stages of a program for use in the next step of the program.

This Heuristic analysis or Heuristic evaluation is basically based on Ten Usability Heuristics by Jacob Nielsen. Visit this page to read these Ten Usability Heuristics.

Heuristic Testing is inexpensive method as compared to complete Usability Testing which involves setting up a User Behaviour study lab and other factors. Small companies that can not afford the Usability Testing services must go for Heuristic evaluation part and rework on the websites accordingly.

The Usability Analysts and Graphic Designers

2005-10-03T02:55:00.000-07:00

People from all over the world assume an Usability Expert is nothing but a Graphic Artist, but its not always the case. Yes, a Graphic designer can himself be an Usability Analyst.
Whenever I got a chance to talk to Not-From-Usability-Field people, I have always seen them wrongly interpret an Usability professional being a Graphic designer.
A Graphic Designer see any product/web application from the designing point of view that contains good amount of images/flash and other multimedia, on the other hand an Usability expert won't look at any product/website just by himself, but put himself in the targeted user's shoes and then look at the application and check how user friendly the product is.
One good article from AListApart.com says Usability experts are from Mars and Graphic Designers are from Venus
The author has nicely put down equations to explain the topic, like:
Usability/Information Architecture == the masculine == the left side of the brain == doing == math/science == the rational == logical action == the articulatable == Mars.
Graphic Design == the feminine == the right side of the brain == being == art == the emotional == intuitive action == the inarticulatable == Venus.

Web Developers need to look beyond the BODY tags

2005-08-30T02:04:00.000-07:00

Everyone in web development field use Editors to program web pages and why not, editors save huge development time. Editors are like credit cards, they make our life easier but if you don’t use them with care they can prove harmful. They come with plenty of good features to simplify the developers/designers work.
For example most of the web developers use HTML editors like Frontpage or Dreamweaver, that facilitates the programmer with readymade page where the programmer codes only those things which the end user is going to see inside the page. Most of the programmers do not bother about anything else but just inside of the “BODY” tags. This habit leaves the pages with some undefined tags that are auto-created by the editor, this includes Title tags, Meta tags and other, depending on what editor you use to ease your programming efforts.
These tags and the description inside them are not important to web developers because they do not affect the working/operation of the website but they surely affect the website’s ranking on the search engines. What appear on search engine result pages are the TITLE and description about the page, now imagine a search result that includes a website with “Untitled Document” or “New Page 1” as the title of the website, will you click on it?
Surprisingly there are millions of web pages on the www with such undefined tags. To check, copy and search following text strings on Google, these text strings have been taken from commonly used editors like Frontpage and Dreamweaver:

allintitle:New Page 1
allintitle:untitled document
allintitle:meta name="GENERATOR" content="Microsoft FrontPage 4.0"
allintitle:content="text/html; charset=windows-1252"

and see the result number at top right that says “Results 1 - 10 of about xxx”, the xxx is the number of total matches found for the search string, this will give you an idea of how many such pages are there on the web. You can also use “allintitle:title text” (no quotes and replace ‘title text’ with the text in title tags) command in google to search for the pages that were built using other editors. Open any editor, start new HTML page, copy the text between TITLE tags, if any and use above search command to search for the pages that were programmed and uploaded without changing the title text.
Some of the results may be for explaining how to use these tags but the others are just there because the web developers did not look at them while designing the pages.
Out of all these tags TITLE tag is very important as it is intended to tell the user the theme of the page; it also serves as crucial factor for search engines to rank your web page. Other tags like META DESCRIPTION, META KEYWORDS are not that important because user can’t see them unless he goes in to check the source code, but yes you can’t ignore them too, they are still counted by some search engines while ranking the web pages.

Conclusion: Programmers and Designers should get out of the BODY shell and give little importance to other tags, because they can be a reason for good traffic.

Web Usability Blooper: Usability Training Company website

2005-08-28T22:39:00.000-07:00

I came across this website recently, this company conducts Usability Training courses for IT professionals in my own city - Pune, India. Surprisingly the website itself lacks in basic web usability. There is no title to this page, which is very important for users as well as the search engines. If this page had a good title, it would rank higher for the relevant keywords in all search engines, the current title "Untitled Document" makes no sense. Beside this, there is no Bread/Crumb navigation implementation on the site, Logo has no link(you can't click the logo to go to Home Page), and no Site Map.
On the top of all, when you try to validate the site for basic HTML
validations, W3C's HTML Validation service gives this result: Failed validation, 17 errors.

Just wondering what could be the quality of their Usability Training courses ;)
Well I will still visit them and find out what they have to offer as a part of their training course in HCI and Usability Engineering.

Web Usability, HCI Resources

2005-08-23T06:29:00.000-07:00

Gary Perlman is doing a great job by maintaining a website with loads of useful resources on Web Usability, HCI- Human Computer Interaction. A complete reference guide: HCI Bibliography

Usability errors in web forms

2005-08-18T23:55:00.000-07:00

You must have seen such forms on many websites.
If you look at this form closely you will find the usability
problem in it, the submit button name: "Edit Profile" and I am pretty sure you know what it should have been. No points for guessing "Update Profile" :)
If the Edit functionality provides the user to update details then obviously its name should be "Update Profile".
I have seen such form on a website with PR=9, no wonder the website is very popular. If such website with millions of registered users, can make usability mistakes then just imagine how many websites on www may have such usability errors.

Future products are still being developed from Management’s point of view

2005-08-11T06:44:00.000-07:00

Recently I was analyzing (Usabilty Testing) an e Learning Management System’s requirement documents and prototype, the development for which was going to start in few days and the product is supposed to hit the market by March 2006.
To my surprise the requirement documents showed no end user interest but vision was how the management/owner want to see it. The overview of the documents has a line somewhere which reads as “This LMS (Learning Management System) will be very powerful and user friendly” and from the rest of the documents and proto type it was very clear to me that the document creators did not take users actions into consideration.
To provide an example, there was functionality in Administrator module by which the management can change the theme of the system. So any time the Management doesn’t like the color of the templates, they can just use it to change the theme of the system forcing users to see the color that management likes.
This is same as a Manager of a company changes some employees sitting arrangement as and when he likes, the employee may get frustrated because of these unexpected changes but the Manager won’t care about it.
Thanks to the client who agreed to have everyone personalize the theme and not force them to go with what management likes.

Web Usability & website Promotion (SEO) - what’s the relation?

2005-08-08T00:31:00.000-07:00

Is there a relation between Web Usability and search engine optimization?
Does this blog puzzled you as the title reads web usability and website promotion?
Is there any interconnection?
Yes, Web Usability and search engine optimization and web promotion are interlinked. By Web Usability we mean good Content, easy Navigation, easy Accessibility, less Downloading Time, Systematic Arrangement, etc more simply it means Usable website. If a website incorporates all these features any visitor will find it userfriendly and so does the search engines. Think about Search Engine as a visitor. If it could download the page in very less time, could find keyword stuffed good content, could easily navigate throughout the site, then it will give more priority to such website compared to similar themed websites which lacks in user friendliness*. A user
would like to revisit a good user friendly site often so does any search engine because both likes such site.
So if you want your website to be search engine friendly then first you should make it User friendly, follow the basic Web Usability concepts and then promote it, get links from other sites to your site so that it is easily reachable too.
Good Web Usability is the foundation of Search engine optimization or web promotion.
* Above comparison is based on assumption that websites in discussion have same backlinks (Links from external websites).

Avoid "Best viewed in... " lines on web pages

2005-08-06T00:38:00.000-07:00

I have read this line on many websites: "Best viewed in 1024 X 768 or higher resolution" and the surprising part is that many Website Designing Company Portfolio web pages have these kind of lines on it.
In my opinion its not at all a useful hint to users rather its a synonym for poor design practices.
Such lines makes the user feel that such website is not useful to a him/her in anyway if they are using old monitors that does support resolutions upto 800 X 600 and not higher.

Mention the file Size - Important

2005-08-06T00:35:00.000-07:00

If your website has some kind of documents for the users and want them to download or read it online, then its very good idea to show the actual size of the document beside its download/open link.
eg. Download Company Profile (File - type: .pdf, size:34KB)
View Analysis Report (File - type: .doc, size:1.8KB)
Why this is important?
1. If the user is on dial-up connection, he/she will be well aware of the download time the document is going to take.
2. If the file is big in size and the Internet connection is slow, the user may leave the site for temporary and try it from somewhere else or atleast try to download/view it some other time.

SiteMap's for Google

2005-07-29T01:04:00.000-07:00

Google has come up with a sitemap generator tool that gives webmasters a way to get their site pages indexed in short time. The short time is still in question as Google downloads the sitemap from the URL provided to it on almost everyday, but doesn't seem to index all the pages in the sitemap in short time, may be another google strategy.
To use the tool, your server must support Python and you should have SSH access to the server. Although its a little complicated process, but give it a try.
As the result Sitemap file is XML, we can't have our users to go to that page to search for a page on the site, but either this file should be used to create a HTML sitemap that should be linked from "Site Map" link on every possible page on your site or there should be a completely different User Friendly SiteMap page linked from "Site Map".

More about Google SiteMap

Mobile Phones and Usability

2005-07-13T23:52:00.000-07:00

Mobile Market Share 2005
It was found that Nokia is leading the Mobile market from the day mobiles became a mode of communication. Despite the fact that Nokia is very slow in introducing new featured mobile phone handsets as compared to other big players in the market like Samsung, Sony Ericsson, Motorola, LG, Siemens, 3G etc just because their mobile handsets are the most user friendly. Looking at the graph it still shows that Nokia is leading the market with around 32%. Give any Nokia handset to any user and he/she will get comfortable with most of the features within 2 hours, this is not the case with other handsets.
Did you ever think why people like Nokia mobile phones which are quite heavy and get introduced late in the market, there can't be no other reason than the easy User Interface. Good job Nokia :).
I also liked their online product catalogue pages e.g. Nokia 6610i

Web Usability- Why so Important?

2005-07-02T02:14:00.000-07:00

Web Usability or Website Usability is the measure of quality of a website. And there are several factors that makes a website usable or unusable:
1. Downloading Time - If the page size is big, it will take considerable time to download and most of web users still use low speed Internet connections, such users will eighter close such website or never visit again.
Solution -
Avoid using heavy Images
Avoid Flash
Keep the size of a webpage well below 50k.

2. Navigation - If a website has product of users interest but the user couldn't find it in max 2 or 3 clicks, most probably he/she will get frustrated and leave the website and never come back.
Solution -
Use easy navigation throughout the site, preferably Text Navigation.
Use two sets of navigation on every page, one at top or top-left and other one at the bottom of the page.
Have a Site Map page on the website.

3. Content of Interest - Content is King. It increases re-visits. Good content at best visible place on a webpage is the most important factor for converting a visitor into a customer. If a website has poor content or has no content, more chances are a user won't revisit the site, on the other hand if a website has good content but not placed at good location and its hard for a visitor to read it then also its bad for a site.
Solution-
Develop great content for your website.
Keep changing the content once in couple of months, search engines and visitors like fresh content.
Place content at prominent places on pages.

4. Resolution compatibility - Most of users are still using 800X600 Display Resolution, so every website must satisfy common display resolution criteria. If the website is designed keeping only 1024X768 or higher resolution, then you are loosing many many customers.
Solution-
Make your website compatible in generally used display resolutions.
Test it atleast with 1024X768 and 800X600 resolutions.

5.Browser Friendly - Many sites looks cool in Internet Explorer but gets bad look in other major browser such as Mozilla, FireFox, Netscape etc.
Solution-
Before launching the website, test it in all major browsers.
Take appropriate design steps if its not compatible with any of major browser.

Experience with blogging

2005-07-01T01:09:00.000-07:00

Blogs are the coolest happening things on Internet. These are the most search engine friendly sites and usability wise looks good. I got rocking experience with blogging. You can choose a subject and post on anything you like, search for similar themed RSS feeds on the net and show them through your blog, good food for you as well as the readers of your blog. There are many blogging tools available on the internet e.g. Blogspot/Blogger (owned by google), BlogLines(owned by Ask Jeeves), TypePad, MSN Spaces and more.
Today I visited a very interesting blog: Miss-Information, I liked the structure and the way it is managed with full of resources, its an example of real blogging.

Seven Common Usability Testing Mistakes

2005-06-24T23:38:00.000-07:00

Mistake #1: Do You Know Why You're Testing?
Mistake #2: Not Bringing the Team Together
Mistake #3: Not Recruiting the Right Participants
Mistake #4: Not Designing the Right Tasks
Mistake #5: Not Facilitating the Test Effectively
Mistake #6: Not Planning How You'll Disseminate the Results
Mistake #7: Not Iterating to Test Potential Solutions
Read in detail (Courtesy: User Interface Engineering)

Top Ten Mistakes in Web Design (Jakob Nielsen's Alertbox)

2005-02-27T22:51:00.000-08:00

Top Ten Mistakes in Web Design (Jakob Nielsen's Alertbox)
1. Bad Search
2. PDF Files for Online Reading
3. Not Changing the Color of Visited Links
4. Non-Scannable Text
5. Fixed Font Size
6. Page Titles With Low Search Engine Visibility
7. Anything That Looks Like an Advertisement
8. Violating Design Conventions
9. Opening New Browser Windows
10. Not Answering Users' Questions

Latent Semantic Indexing

2005-02-25T04:49:00.000-08:00

Latent semantic indexing adds an important step to the document indexing process. In addition to recording which keywords a document contains, the method examines the document collection as a whole, to see which other documents contain some of those same words. LSI considers documents that have many words in common to be semantically close, and ones with few words in common to be semantically distant. This simple method correlates surprisingly well with how a human being, looking at content, might classify a document collection. Although the LSI algorithm doesn't understand anything about what the words mean, the patterns it notices can make it seem astonishingly intelligent.

Most Important Web Usability Issues

2005-02-25T02:27:00.000-08:00

Usability is crucial to create Web sites that your customers will want to return to. If they can't use the site, they won't stay. While there are many specifics, there are some simple steps you can take to create a site that is accessible and useful for your readers.
1) Content
2) Page Layout
3) Colors
4) HTML
5) Download Speed
Most Important Web Usability Issues - Read in details (Courtesy: About.com)

Top 10 Usability Blunders of the Big Players [Usability and Information Architecture]

2005-02-25T02:24:00.000-08:00

Web usability is about creating your Website in such a way that your site users can find what they're looking for quickly and efficiently.
In March 2003, Philippe Randour pointed out the Top 7 Usability Blunders Of The Big Players:
1. No Search Function (Guilty party: NBA)
2. Massive Download Time (Guilty party: ESPN)
3. Non-scannable Text (Guilty party: Boeing)
4. Unclear Link Text (Guilty party: Real Player)
5. Poor 404 Error Page (Guilty party: Monster)
6. Visited Links Not Shown (Guilty party: About)
7. Frames Used (Guilty party: Ocado)
8. Links Point to the Current Page (Guilty party: Ford)
9. Important information contained in images (Guilty party: AOL)
10. Unique Scrolling System (Guilty party: BMW)

Read in details (Courtesy: SitePoint)