10 Smart Javascript Techniques to Improve Your UI
In Articles, Javascript / AJAX by Glen Stansberry Javascript can add a lot of special effects that can really improve the user's experience. Here are 10 simple and clever Javascript techniques that add an extra dose of usability to any webpage.
Javascript is typically used as an aesthetic language in web development. This means that web developers should almost always be using Javascript for one thing only: Improving the visitor's experience. There are many clever and useful ways to improve a site from the user interface perspective. A developer can find nearly any snippet of Javascript to achieve what he or she wants to accomplish.
Preview image by miusam-ck.
Javascript is truly a powerful and easy language to learn. It can be used to perform simple, aesthetic functions like toggling an element. It can be used to power a dynamic email client, and even send data instantaneously. Javascript can be as simple or advanced as you want it to be.
Javascript Frameworks
A great place to find Javascript techniques that can improve your site's functionality is by browsing Javascript frameworks and their plugins and documentation. Here are a few frameworks that have lots of resources, plugins, and communities behind them:
Frameworks are a blessing to any developer or designer who wants to quickly add Javascript effects to their layouts, without having to make raw code. Many of the techniques that we use below will run on Javascript frameworks like JQuery or MooTools.
Simple Javascript Techniques that Make Happy Users
It's important to note that many of these features aren't big and obnoxious, but rather small and subtle. Too often developers get carried away when it comes to adding Javascript. These are small but very useful techniques that can be used by almost any developer. You'll also note that most of these features deal with cleverly hiding and showing important information in non-traditional ways.
1. jQuery Hover Sub Tag Cloud
The jQuery hover sub tag cloud is an excellent example of a simple piece of Javascript that really adds a nice, subtle touch to tag clouds. As the user hovers over a specific tag and it has sub-tags associated with it, a pop-up box appears and shows the sub-tags. Simple, yet effective.
2. Opacity Change
Opacity Change is a little tutorial on how to use Scriptaculous to make an opacity change for an element.
Opacity changes are great for many different reasons: showing hovered content, showing content that has been clicked on, and many other useful functions.
3. Image Upload and Auto Crop
Being able to crop photos after you upload them is a feature that more web applications could use. That's why the jQuery image upload and crop is such an under-used Javascript technique. Cropping images is a much-needed function when it comes to uploading images, and many web applications could benefit from adding this useful feature.
Honestly, I think that nearly all image uploads could use a basic crop function. However, image cropping isn't the easiest Javascript function to add to a form. It's a somewhat involved process, using image libraries and Javascript. Using this script built on the jQuery framework can add a lot to the user's experience without a bunch of extra code.
4. Password Strength Meter
As hackers become smarter and larger in numbers, it's becoming more and more important for site users to pick strong, non-guessable passwords that contain a combination of letters (upper and lower case), numbers and special characters. However, this task is easier said than done. Users typically don't read directions if they can help it.
Visually showing password strength in registration forms is an excellent way to encourage users to make the passwords more challenging. While this is slowly becoming more common this simple technique is not used anywhere near as much as it should be.
The Password Strength Meter works off of prototype/scriptaculous and is a handy little script that shows the strength of the password with a colored meter in real-time. More sites need to implement this type of "safety" script to help users see the dangers of inputting weak passwords.
5. Magic Zoom
Magic Zoom is a highly-useful script for eCommerce sites, as well as other sites that have detailed images. Instead of having the user making an extra click to a much larger picture and use up bandwidth, Magic Zoom allows you to essentially look through a magnifying glass at each picture.
Magic Zoom is a paid script, but well worth the $47 if you have an eCommerce store or any other site that has very detailed photographs. You can download the trial version below.
6. JQuery Autotab
Every single form on the Internet should have this feature. It might just be the perfectionist in me, but having multiple input forms that autotab to the next input automatically seems like it should be commonplace. It's such a relief when filling out items like social security numbers when the input automatically tabs to the next input.
The jQuery Autotab script is self-explanatory, and does what the name implies: adds autotabs to forms with jQuery.
Sometimes it's the small things in development that can really make a difference.
7. Incredible Javascript Login Form
While we typically don't like to toot our own horn at NETTUTS, how can we talk about clever and useful Javascripts without bringing up Connor Zwick's awesome tutorial on how to build a useful login form?
The Javascript login form is an elegant combination of jQuery and a beautiful Photoshop layout to achieve the effect of being able to show a login form without having the box take up a bulk of the page. Digg is another great example of a site using Javascript to show and hide the login form.
8. Context Highlighting Web Forms
Forms are some of the hardest parts of web design. Make a form too long and you might scare away a potential user or customer. If a form's design is unattractive, that might scare away a potential user as well. Any way that we can make our web forms more appealing to the eye will yield a higher sign-up conversion rate.
The context highlighting web forms script is an excellent attribute to add to a signup form. It's surprising that more forms don't offer this functionality. Being able to quickly see the progress on a form can noticeably improve the user experience.
9. Sliding Top Panel
The Sliding Top Panel script is a lot like the Incredible Javascript Login Form. Hiding/Showing important information is a key to beautiful, usable designs. Any time we can use Javascript to help keep unneeded information neatly packed away, we should be striving to do that.
10. Social History
Site promotion buttons and links can quickly clutter a site or blog's layout. It seems that if you want to promote your blog posts and other content on sites like Digg and Delicious, you have to add a long list of buttons to your template so that you don't exclude anyone's favorite social bookmarking or news site.
Social History comes in handy because it runs a test to see where the user has been recently, and loads images to those sites, and only those sites. Essentially, it's only showing the visitor the buttons that they would want to see.
How does SocialHistory.js know? By using a cute information leak introduced by CSS. The browser colors visited links differently than non-visited links. All you have to do is load up a whole bunch of URLs for the most popular social bookmarking sites in an iframe and see which of those links are purple and which are blue.
- Subscribe to the NETTUTS RSS Feed for more daily web development tutorials and articles.
Glen Stansberry is a web developer and blogger who's struggled more times than he'd wish to admit with CSS. You can read more tips on web development at his blog Web Jackalope.
