10 Smart Javascript Techniques to Improve Your UI
Sep 15th in 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.
User Comments
( ADD YOURS )kip September 15th
very Useful I like the thumbnail one the best i think.
( )Taylor Satula September 15th
Its good to have demo’s back. Thanks some of these are really helpfull
( )CreamScoop September 15th
SocialHistory has to be my favorite in this list.
( )Thanks for the post.
Christian September 15th
Nice post, thanks very much.
( )ariyo September 15th
good stuff!
( )Very useful.
Aminur Rahman [aka Tom R] September 15th
very nice, cheers
( )xxx May 11th
yes
( )Sean O September 15th
#5 Magic Zoom has a free jQuery plugin equivalent that works well, Magnify:
http://www.jnathanson.com/index.cfm?page=pages/jquery/magnify/magnify#examples
– SEAN O
( )Jordan September 15th
Great article. Thanks.
( )Patrick Moore September 15th
I have to disagree with you on the #6 Autotabs suggestion, depending upon the audience. I know that my father (mid-40s) and a number of older people in my office have great trouble with auto-tabbing forms that they weren’t expecting. They get to part 2 of their Social Security # or Phone # automatically, then tab again thinking they’re at part 2 when they’ve actually got the third part focused. Makes for unncessary confusion, especially when the autotab script is broken and doesn’t allow shift+tab to regain the prior part’s focus. Just my 2cents.
( )Joe Casabona September 15th
This is so great- def. one of my favorite tuts on the site!
( )Tyson Tate September 15th
Oh, god, please, no auto-tabs. It is, by far, one of the most annoying elements in forms today. You type in the first three digits and hit tab and then, what the hell? You’re three boxes over, the hard drive is thrashing wildly, and your cat is peeing on the carpet. Auto-tabs take control away from the user and that’s almost always a bad thing.
If you’re so afraid that your users might have to press Tab, stop splitting your fields into 50 different little boxes. It’s trivial to normalize things like phone numbers and credit card numbers.
It’s like having a separate text input box for every sentence of a blog comment.
( )Lamin Barrow September 15th
I just simply can’t get enough of this Javascript stuff. Thanks for the post.
( )prof kienstra September 15th
Great collection. Too many places to go look and learn….. Great work!
( )Webstandard-Team September 16th
Nice collection, I did something similar just for jQuery - Best of jQuery-Tutorials
( )Sasa Bogdanovic September 16th
I would add one advice on top of your nice tips, to allow for graceful degradation. What does happen if JavaScript is disabled in visitor’s browser?
For example, on your home page you have a tabbed interface near the bottom of the page whose behavior is controlled with jQuery. But disable JavaScript in your browser and what happens? You get a set of tabs which are not clickable, therefore not usable.
( )You lose the functionality, you confuse the user, you lose the customer…
sarahjosaf September 16th
Hi Friend,
( )good collection. It is very useful. cool
thanking you
Janko September 16th
Hey, thanks for including my article. Great post, btw!
( )JamesS September 16th
I too would disagree with the autotabs feature. I find it incredibly irritating having to visually check whether or not the cursor is in the right place, whereas without auto-tabbing I can be sure that it will only move when I press the tab key.
It’s not quite as annoying as the auto-focus ‘feature’ where the first field is auto-focused just after the page has loaded. - The problem there is that you start filling in the first field before the page has finished loading, then tab to the next field, and before you know it you’re back where you started and overwriting what you already entered.
I say leave those kind of interactions manual.
( )Shane September 16th
The NatWest (a Bank here in the UK) online banking site uses autotabbing, and once I new that it did that (I didn’t when I first used the site, and it didn’t inform me), I find it a great help. Another banking site that I visit doesn’t use it, and even I get a bit confused. I have to remind myself that the tab is required. Otherwise, I fill myself typing in the wrong field, having expected things to have moved on.
Magic Zoom is obviously used to great effect on product pages, giving users a close-up view of their prospective purchases. I haven’t had the need to use it, but it would definitely be a good idea to hook it up to an e-commerce site.
I’m afraid that #3, Opacity change, is not a favourite of mine. Changing the opacity like that isn’t particularly friendly to users with sight issues.
Good round-up though - thanks for posting.
( )Ben Griffiths September 16th
Some great ideas there, thanks
( )Connor September 16th
Nice job glen…I really found that thumbnail and crop script really useful for an upcoming project!
Oh and thanks for mentioning my effect!
( )Jake Holman September 16th
I like the article - but feel that things like these aren’t ‘Tutorials’, they’re simply bites of other websites. I’d prefer to see these in their own section - away from the front page. Perhaps that’s just my opinion
( )Nate September 16th
This is an awesome article with a great collection of js resources. I can already see where they could be put to good use. Thanks!
( )Kevin Quillen September 16th
jQuery rulesssss
( )Anuj Seth September 16th
I was about to start on a new project and this wonderful list is going to benefit me a lot. Thanks
( )SEOAdsenseThemes dot com September 16th
No3 Image Upload and Crop:
Now this is one of the best “image upload and crop” script for jQuery users. Even better than UI.jQuery’s own Image Cropper Demo in certain areas.
It was one of my crucial reference material for a WordPress admin function I built into a free theme I offer in my site.
Stanley
( )Sam P. September 16th
Nice, I would like to add a bit more javascript to my site when i finally get round to redoing it
( )Braden Keith September 16th
Very nice collection. I will be bookmarking this page.
( )Jeff September 16th
Please please please, take #6 off this list.
I HATE it when sites do this. It’s horrendously annoying when you are trying to enter text and the page starts deciding where my cursor should be. The problem is that “auto jumping” the cursor assumes that what I have typed in is perfect — and people are very, very far from perfect. Additionally, you are using standard inputs, but you’re throwing in my face non-standard behavior. It’s bound to throw off lots of users.
Instead, why don’t you scrap that entry and point it to this A List Apart entry about smarter data entry: let users enter whatever they want and have your program figure out what it is supposed to be, see if it works, and succeed or ask them to try again. I wish I had a better article to link to about it though since that only briefly covers it but this is a far better, more intuitive, and ultimately better method. It’s not all that hard either, in most cases, to do this.
( )Jim Jones September 16th
Java script ROCKS
Jiff
( )http://www.datools.net.tc
Jared Rhizor September 16th
I disagree with autotab too. I’m used to hitting tab when there is a new text box. With this, it skips an extra one. It’s very annoying on all the sites I have seen with it.
( )bintek September 16th
thanks for this awesome list. I’ll apply some on my upcoming projects. (^_^)
( )brian September 16th
Auto tabs are pure evil.
( )Kevin M September 16th
Awesome article! I have to agree. jQuery is quite amazing!
( )digguser September 16th
Nice links. JS, when used in the right place, really can help sites ui
( )ThePlaz September 16th
The problem with Auto-Tab is that it is inconsistent. Thus I am always hitting “TAB” on my keyboard because I am use to it and 90% of forms need it. When I come across an Auto-Tab I almost always have to go back with the mouse since I went 2 tabs. Annoying!!!
( )Breton September 16th
I think I agree with the people complaining about autotab- But i also think that if autotab is implemented well, then it could be much better. The problem with the autotab scripts that people are complaining about, is that it breaks expectations of behavior. They expect forms to behave a certain way, and have developed habits around that. If you’re going to have an autotab, make it behave correctly under the assumption that the user doesn’t know that autotabs are enabled.
as an example, lets say we have an input form with 3 fields of 3 characters each. With no autotabs, the keyboard sequence is
555 TAB 555 TAB 555 ENTER
with autotabs enabled, the keyboard sequence is
555555555 ENTER
but if the user enters
555 TAB 555 TAB 555 ENTER
then as others have pointed out, the cursor skips over the middle field unexpectedly. This is fixed by making the autotabbed form behave as expected with EITHER sequence of keys.
This is easily achieved by doing either or both of these:
1> Don’t autotab to the next field until the user enters the 4th or 7th digit. This fixes the unexpected behavior of the autotab form, while simultaneously eliminating the other unexpected behavior that would happen without autotab- an attempt to enter data fails because the input is not wide enough.
2> ignore the tab key if the cursor is in the first position of a field
I’m less sure about this advice, but this would also allow both key sequences to work- but introduces a new unexpected behavior.
The little things matter people!
( )Niklas September 16th
I just love that drop down login and the image upload and crop script. Looks and works like a charm!
( )Knoxville Website Design September 17th
Good list. I have not see the jQuery Hover Sub Tag Cloud implemented much.
( )gme September 17th
You can use zoomify for free as a replacement to number 5 Magic Zoom
http://www.zoomify.com/
( )Justin Halsall September 17th
There is a much nicer & lighter autotab plugin that just does autotab
( )Check it out, Yet Another Autotab Plugin:
http://www.wnas.nl/?p=239
Joseph R. B. Taylor September 17th
Nothing like a good list of jquery examples to get your imagination running!
( )SEOAdsenseThemes dot com September 17th
Regarding “Image Upload and Crop” …
If you guys know of any better jQuery scripts that deal with cropping images, please let me know.
The other one I know of is UI jQuery’s official demo:
http://ui.jquery.com/repository/real-world/image-cropper/
… which demonstrates only the cropping capabilities of UI jQuery.
Whereas Webmotion’s example demonstrates not only cropping, but also uploading and saving the cropped thumbnail using PHP as well. Great learning material.
( )Mike September 17th
Auto-tabs is a very dangerous feature at best - I have seen way too many sites that expect either a phone number or a post-code to be in the format of only one country - this can make it impossible to enter good data.
( )Tyler Lange September 17th
Wow thanks for all these useful web design and user interface tools. Tyler Lange - Senior Web Designer EA
( )James September 18th
Nice list Glen!
I do agree with those who have said that “autotabs” presents quite a usability issue, especially when they’ve been built to only allow data from one country…
Magic Zoom looks good… I’ve got to try it out!
( )Doug P September 18th
Anyone using autotab should have their web programming license revoked. It’s inconsistent, non-intuitive, and makes fixing incorrect data difficult. The tab key is right there for a reason.
( )ilyas TEKER September 19th
wow!
great share..
thanx : )
( )web design company September 19th
tumbl - Here 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.
( )Bearnerd September 21st
Cool! Thanx for sharing…
( )Takumi86 September 24th
WOW Great list!! I might consider to build my website, btw this info is so much informative so i’d bookmarked it, keep it up
( )komik September 25th
thaNX
( )Kevin September 28th
awesome… i am sing jQuery… its really very handy and easy to learn and one can create great effect with it… script.aculo.us is also good….
( )Freeware Collection September 28th
Well, they’re really beautiful. I’m using jQuery, but not very well :(. Thanks for your article, I will try some interesting UIs like these.
( )Brian September 30th
When would you ever have sub-tags to create a sub-tag cloud? Which blogs even offer that? It’s cool, but when would it be usable?
( )psycho October 1st
thanks good stuff!
( )Chris October 6th
I really like the SocialHistory script… I plan on building a usercontrol that can leverage this script for building a set of icons and links…
( )Suresh October 7th
I simply love the Sliding Top Panel one. Planning to include it on my mobile phone comparison website.
( )StianJ October 7th
But maybe most important of all, is having a link color that people can actually *read*
( )(no javascript required)
Vladimir Dedek October 14th
Context Highlighting looks very good! Thanks for an article!
( )timmyjimmyparker October 31st
moo this rocks my socks - nuts another day to chill as all this script is making my live as a developer really sweet
( )Ima Dumbass November 11th
For me, trying to learn JavaScript is like trying to learn Latin for a deaf person. Great website, great information. Now, instead of feeling dumb, I feel completely retarded.
( )Ali B December 2nd
Niice one!
( )TamPhan December 19th
About resize and crop library: I dont know how to set default x1,y1 and width,height on init of preview, it’s set to 0 now. Can you tell me?
( )Maxi January 12th
Very interesting, I have to learn more
( )Website Development January 24th
Another amazing post
these techniques are new to me i did learn new javascript techniques to improve User interface :).
( )Ersin Demirtas February 2nd
Thank you, i was searching for that login…
( )deviantz February 19th
Very interesting! thanks for this!
( )Michael April 19th
nice
( )