Error message display: confusing to user

So the question is how can you display error messages so that user can understand easyly what mistakes they have made? Here are few examples to do that:

1. Try to make the error messages short, precise and clear. Remember, the more you write, there is a higher chance of ignoring the message!
2. If the form is short (e.g. 4-5 fields), you can provide the error message(s) at the top of the form. If the form is very long, try to provide the error message just before the field where they have made mistake, aligned with the field.
3. Use a different font color/size to specify that this is an error message!
4. Always try to give some graphical treatement to the field on which they have made the mistake. For example, changing the background of the field or making the border highlighted should do the job.

Here is an example display the error message properly on the previous form:

Proper way of displaying error message on a form

Here is the html file to download.

For example, you want to show a pie chart for sex distribution of male 43 and female 38. With one line of code you can create and display the following chart:

Thanks to Google for it’s amazing chart API to create graphs and charts in less than 2 minutes. This chart was created by using following code:

<img src=”http://chart.apis.google.com/chart?chs=450×200&chd=t:43,38&cht=p3&chl=Male|Female” alt=”Sex distribution” />

Here, the source of the image is http://chart.apis.google.com/chart and parameters it is taking in this case are:

• size (e.g. chs=450×200 for size of the image),
• data that you want to show(e.g. chd=t:43,38 for 43 and 38),
• chart type (e.g. cht=p3 for 3 dimensional pie chart)
• chart labels (e.g. chl=Male|Female)

The full documentaion of different types of graphs, charts, scatter plots can be found at Google chart API website.

I Googled this issue but couldn’t find any solution to make IE work with layer. Finally, I changed the ‘layer’ to ‘div’ and it started working fine on both browsers.

This is quite common to overlay or use Ajax to dynamically generate content. If you want to make sure that all users can access your tool/website, use div tag rather than layer. Layer tag is getting deprecated and some browsers stopped supporting layer.

What if all browsers rendered everything the same way…

You can write a Javascript function to extract the name of you current page, then put that name as an ‘id’ for the body tag of you current page as the page loads.

function returnDocument()
{
var file_name = document.location.href;
return file_name.substring(file_name.lastIndexOf("/")+1, file_name.lastIndexOf("."));

}
window.onload= function()
{
document.getElementsByTagName(’body’)[0].id=returnDocument();

}

all the links in your page will need to have an ‘id’ as well. Then you can just write a css style like this,

body#page1 a#p1,body#page2 a#p2,body#page3 a#p3......
{
specify your style for current link here
}

View the source code of page1.html to see how it is working.

This is a simple way to highlight current link with CSS and JavaScript when you are working keeping the navigation inside a template.

Image Example of search form

If you thought of writing Richard Joiner on the text box, the search might not work. If you notice, the example shown right under “Search book by author name:”, the instruction says the user have to type “Joiner, R” to retrieve the books written by all authors named R. Joiner. Don’t worry, it’s not only you who made this mistake. On a survey of 20 people on a classroom, only 2 read the instruction!

So, how you can design effective,usable and accessible forms? Here are 3 simple steps you need to keep in mind if you want to design an effective form:

1. If the user needs to read any instruction in order to fill an input box, always give the label on top of the input box. This will help users read the instruction before filling the form.
2. If the user needs to think hard before they give an answer (e.g. date of birth), research shows, in this case, giving labels on the left with right alignment is more successful than on top. However, you might ask about the design issues. One solution to this could be separating the different types of labels/questions into different sections.
3. Always use ‘Label’ tag (e.g. “<label for=’name’>Name</label>”) to make sure that the form is accessible and usable for screen readers.

Follow these three steps and you can design effective forms for your users. Try searching a book by William Shakespeare using the following form. Can you see the result?

Revised form

Browses that do not support JavaScript can be offered alternative XHTML pages that do not rely on the JavaScript code. However, it is unlikely that current users that current users have browsers that do not support JavaScript.

The navigator object is part of the JavaScript object model. It allows access to information specific to the browser. Within the navigator object are several properties that can be tested.

Click on ‘Test Browser’ to see how it works
View source of browser_detection.html to see the code.

***Notice that in the results the browser code name and user agent string displayed for the Internet Explorer browser includes the name Mozilla, which is commonly associated with the Netscape browser. This interesting turn is simply a legacy of the browser wars, when Microsoft copied Netscape’s user-agent string so that people using Internet Explorer browsers could not be locked out of sites that were designed for Netscape Browser.***

Sniffers and redirections

You can use JavaScript to create sniffer code that will direct the user based on the browser in use. Suppose that you want to add some browser specific functionality to your web pages. To ensure that all Web users can access your site, regardless of the browsers they use, you need the ability to test and identify your users’ browsers. Using a sniffer and redirection will make your site more accessible to more users while allowing you the option to incorporate browsers-specific functionality if you choose.

Just add the following JavaScript function to perform redirection, remember to put the name of your specific file name in document.location.href=” ” ,


function checkBrowser()
{
var name=navigator.appName;
if(name.indexOf('Netscape')!=-1)
{
document.location.href="webpage_for_mozilla.html";
}
else{
if(name.indexOf('Microsoft')!=-1)
{
document.location.href="webpage_for_IE.html";
}
}
}


When a web browser encounters an image that contains colors not supported by the current monitor setting, the browser will automatically use dithering to try to approximate the correct colors in the image. Unfortunately, dithering can alter the image’s appearance in ways you might not want. In particular, a high-color image such as a photo can appear grainy when displayed on a computer that supports only 256 colors.

When you create web images using a graphics-editing program, you can specify whether the image should use dithering or whether the graphics application should change the image color to the closest Web-safe colors. If you use only colors in the safe 216-color palette that can be displayed on both Netscape and Internet Explorer browsers (i.e., web-safe colors), then your images will not dither when viewed on any browser. However, using only web safe colors severely limits the range of colors and types of images you can use on your pages, and is rarely an option for photographic images. The consensus among designer today is that you should use web-safe colors when ever possible.

Just follow the the steps and you will sign up for a free trial of the BrowserCam.com service and use it to test Web sites in multiple browser.

1. Browser: Open www.browsercam.com
2. Browsercam.com: Complete and submit the registration form to request a free trial of the BrowserCam service. The free trial activation will be sent to you via e-mail
3. After you have received and activated your free trial, lor in to the browsercam site.
4. Click the Capture Wizard link on the left. The Screen Capture Service page will appear. This service provides screen captures of the web pages you specify as they render in the browser you specify.
5. Select the Create A New Project radio button, and enter a project name, such as’ Site Testing’. Scroll down and select the Enter URL{s} Manually radio button. Enter the URLs of the web pages that you want to test. For example,  www.browsertesting_1.com www.browsertesting_2.com www.browsertesting_3.com (one URL per field)
6. Scroll down and click the Continue button. You should see the Step:2Select Browsers And Preferences page. Select the check boxes next to several browser options.
7. Leave the other settings on this page set to the defaults, then click Continue.
8. The Screen Capture order summary page will appear. Look for the To See Your Capture Links Here link and click it. A complete list of the site and browser test combinations you ordered will appear on the following page. Notice that some screen shots may be labeled “In Progress” or “Not Started”. Refresh your browser window after a minute or two to see the latest status of the images.
9. Look through the screenshots. Do any of the sites not display correctly in any of the browsers? Which one? Do you see any patterns in which certain sites frequently display incorrectly?

Because many site designers do not have the resources to test their sites in every possible browser, operating system and screen resolution, testing services such as BrowserCam can be extremely helpful for ensuring that your site will appear correctly for the widest possible range of users.

Stander image formats are read from top to bottom. The top of a non interlaced image will appear after the browser has read 50 percent of the image. The bottom half will render some time later.

A non-interlaced image can remain invisible or incomplete for some time to a user who is downloading the image across a slow connection.

By contrast, an interlaced image appears to fade in as it renders in browser because it is interpreted differently. An interlaced image is repeatedly scanned from left to right. The first pass will render roughly 13 percent of the entire image. The second pass delivers 25 percent, and then continues in 25 percent increments until the image renders completely. During this precess, the full image will at first appear fuzzy, but will continuously sharpen.

The only web-ready image file formats that support interlacing are GIF and PNG. Both GIF formats, 87a and 89a, support interlacing. You can create an interlaced image by configuring an image file in a graphics-editing application and saving it as a compatible file type.

• Form what culture are people who will primarily view this site.
• Is the chosen color combination effective in the cultures this site targets or in most cultures?
• What is considered “professional” for the audience that will most likely view this site?

Some color combination might be of specific significance to some culture or some might be offensive to some people. So while designing your website, it is very important to know your audience and always keep in mind what it going to be effective for the people your website is targeting.