Using JavaScript

JavaScript provides a great user experience, for those that can use it. From the last estimate I read, about 1-2% of users do not have JavaScript enabled for some reason or another. I am not just arguing for you to read this for that little group of users. What if you update your JavaScript and you have an error? All of your JavaScript functionality could become useless. How much of your page is JavaScript dependent? JavaScript is awesome, but it is not for everyone.

JavaScript Usability Issues

Additional User Experience

JavaScript should only be to provide a better user experience. I do not care what reasons you can come up that show JavaScript as being the only means to do a particular task. Send the problem to me, I will show you a solution without using JavaScript. How annoying is that some of the top websites require you to have JavaScript enabled? Were we not complaining about the Flash player a few years ago? It makes no sense that, as we move forward, we create more dependencies for our users. The dependencies should be placed on our servers not the user’s computer.

Ajax?

Ajax is a wonderful technology that provides a seamless experience for the users. However, it also has confused a number of users during its evolution. If you do not incorporate a loading gif into your “Ajax Submissions”, you might have noticed a large amount of duplicate submissions. Welcome to the issue with Ajax usability. Another issue with Ajax, is that people like to share things. Sometimes they want to show their friends the web page they are on. Sadly, that page has made several Ajax requests to get to their current web page. So, the user shares the url with their friends and everyone is confused as they see 2 different pages. Now, there are ways around this issue like changing the url on each request, but you should implement those if you plan to implement Ajax functionality. Finally, you should create Ajax independent ways to perform similar functionality. For instance, you could have a form that submits using Ajax in a “click” event. If JavaScript is disabled, the form should submit like normal without Ajax.

Validation

Validating form data using JavaScript is a fantastic idea. Do NOT forget that client side technologies like JavaScript can be manipulated by a smart user. Always validate the data on the client side as well. The reason why validation is awesome with JavaScript is that you reduce your server’s blood pressure. Each time JavaScript catches some bad input, it can tell the user to correct it before sending the form; therefore, your server might only get one good request instead of five bad ones.

I do not mean to be discouraging of JavaScript. I love JavaScript and believe it paves the way for a better user experience. However, my belief is that you should always build a website without JavaScript first. After you complete the website, feel free to go back and add in some JavaScript, but never remove old functionality to implement new JavaScript. Use JavaScript, but think of all of your users.

Printing

Did you know users still use printers? Of course, you did, but have you considered what you website looks like printed out? If someone prints out your website, odds are they plan to show it to someone else. This is the moment you have been waiting for. They call it “word of mouth” advertising. However, your webpage might look like complete garbage in a print preview. Browsers try very hard to give the best print previews possible, but they cannot guess exactly what you want.

Create a Print Friendly Website

Really, this entire topic is probably the easiest of all of the Usability tutorials to understand. Do you know how browsers figure out how to display your page in a print preview? You might think they just use your regular CSS. If you think that, then you are absolutely correct. However, you just made a terrible error. The browser defaults to your standard screen display CSS, but browsers accept a “media” that can take the value of “print”. Basically, you can craft a separate style sheet for your print preview.

Why Create a Print CSS?

First, go print out a few web pages on your website. Does it look professional to you? Are there any odd formatting issues? Oh, you didn’t want those ads that are not yours to be printed… Precisely the great reason to create a style sheet for printing. The number one thing you will probably put in your new style sheet is the “display:none” CSS property on some classes. We all have a few things on our websites that we would not want shown on paper. For instance, I use ads to keep this website floating, but I certainly do not want a user to advertise their ads on my printed web page to other people. They do not pay me for that. No, I want the user to have a professional looking tutorial that I wrote to show to their friends. I only want to brand my name across the top and show the content that I wrote. My navigation categories are probably not important for them to show their friends.

Creating a style sheet for printing is an excellent idea. However, you get guys like me that border on overstepping the boundaries on a good print style sheet. I suppose the user could want to show exactly how my website looks, but I would bet that more would like to show only my article content. This is exactly where Usability becomes an art. It is practically impossible to please everyone, so we should seek to please the majority of our users.