jQuery Techniques For Good User Experience

jQuery Techniques For Good User Experience

There are many well-identified ways to increase the satisfaction of users through clear interactions, thus enhancing the functionality of a website. These good practices all have their individual translation into jQuery components that can be applied and customized to achieve each user interaction goal.

jQuery Techniques For Good User Experience

The following is a list of these main interactions accomplished through specific jQuery components that are available for anyone to try out.

jQuery Techniques

Embedded Modal Windows

The fact that pop-up windows are now obsolete isn’t news to anyone. Nowadays, the most practical way to show related, more in-depth, content in a web page is through the use of modal windows. This particular component can be found almost everywhere.

A very well-known way to achieve this is through the jQuery UI library, which includes a modal window display. Its CSS can be somewhat problematic due to its complexity, though.

Embedded Modal Windows

For a simpler, cleaner solution, the jqModal component can be alternatively applied instead. The complexity of the CSS will depend entirely on the developer, then.

Form Validation With Clear Feedback

In most cases, the best form of field validation is the one that’s triggered after the user leaves the field, the focus changing to the next one. For the very varied types of form validations, there is an effective jQuery Validation Plugin that can be applied.

Form Validation With Clear Feedback

Not convinced? This article includes a large list of components and tutorials focused solely on the subject of form validation.

Field Masks

Further enhancing of the user experience throughout the tedious form-filling process can be accomplished with masked input fields. Making the user stick to a certain input format doesn’t necessarily mean all the control over the interaction outcome is being taken away from him, it means the decisions needed are rendered simpler.

A very good component that can be used for this purpose is the Masked Input Plugin. Very understandable and simple to apply.

Field masks

Date Format Restriction

Leaving date formatting entirely in the hands of the user can be very prone to data-entry mistakes, even with the proper validation measures.

It’s best to avoid the shame of displaying that error message every single time by applying a date format restriction component like Calendrical. Instead of making the user type, it leaves the whole action to a couple of certain clicks.

Date Format Restriction

Responsive File Upload

Uploading files can be a very tricky part of any online process because every action the website does has to be extra clear in order to leave the user with some peace of mind about the upload completion.

For Flash enthusiasts, there’s the option of using the Uploadify component. It is a very effective plugin and gets the message across quite nicely.

Everything by code, though, turns out to be more efficient, and the current interest is focused on the JQuery alternatives.

There is another component that can serve the same purpose, embedding the effects provided by the JQuery UI library. The JQuery File Upload component is not only a very “fashionable” approach to file uploading (its default styling is good enough), but it is also an easy-to-understand responsive interaction in which the user knows exactly what’s going on with each of the uploaded files and the overall process.

Responsive File Upload

Dividing Large Forms With An Accordion Component

It’s been proven that long forms work better when presented step by step through accordion controls, since it saves the user a lot of time throughout the whole process.

JQuery UI also has an alternative for applying the accordion metaphor through a jQuery-based interaction. There’s always a much simpler, lighter alternative, though.

Dividing Large Forms With An Accordion Component

If you think you need to look through more options concerning jQuery accordion components, there are many others you can consider.

Applying a Wizard-like Interface

Even if it’s not done through the use of an accordion component, complex forms are normally too large to be handled just in one step. It’s a lot more intuitive to divide them in three or four steps depending on the process the fields are focusing on (personal address data, billing information, among others).

Another long-form approach is the use of a wizard metaphor. An effective way to solve this is through the Smart Wizard JQuery component. Its structure is very similar to the process of implementing a common content slider, and its CSS is modifiable.

Applying a Wizard-like Interface

Loading Bars

A key point of keeping the user at ease during the execution of any process is to maintain a clear state of progress visually available. Loading bars aid us in doing just that, and there are many ways to get them nicely done.

There is the JQuery UI alternative which, as mentioned before, brings a higher level of complexity in styling due to the main CSS document it depends on. If many of the JQuery UI components work for the project at hand as well, though, it would be a good choice.

Some may prefer to use a simpler approach to progress bars. If you need something a little fancier, there are other options for that, too.

Loading Bars

No Tables: Graph Displays

It is always a better approach to present large amounts of data digested through something far less tedious to look at than a table. And rather than having something static such as a pre-drawn graph in JPG format or something done through Flash (with portability issues), the best choice should be the coded choice.

There are two main suggestions when it comes to working with graphs. The first one, and to satisfy rather simple needs, is the jQuery Sparklines component. It displays graphs in the simplest way with barely a line of code, but the graphs are too small and limited to serve bigger purposes.

For larger, more complex graph interactions, there’s Flot. It’s fully customizable, supports AJAX loaded data, contains data group toggle functionalities, among others. Definitely a very good choice to work with coded graphs.

No tables: Graph Displays

For the Absolute Need of Tables: Sorter, Pager, and Search

If avoiding tables turns out to be impossible because of business goals or other valid factors, the best that can be done is to present them in some way that helps users find their way through all the information that will be available for them.

For starters, there should be a sorting component involved that aids the search for information in reference to a determined data column of the table.

For the Absolute Need of Tables: Sorter, Pager, and Search

Tables tend to get long, so the next step should be adding a pager component that divides that information in easy-to-look-at amounts. There’s a pager addition to the suggestion of the above paragraph that can take care of this quite simply.

But when there’s too much information to browse through, a search box that is uniquely linked to the table becomes an obliged addition to the interface. The TablerSorter Filter addition is the last part of the complete usable table interaction that has to be provided in order to make tediously long data tables less tedious to look at.

Complete Content Sliders: Pager, Pause and Play

Everyone wants to use content sliders, most commonly on the home page of the website, to show off important news, projects or advertisements. There are certain considerations not everyone takes into account when applying them, though.

When a content slider is present, it is normally set to automatically alternate its contents. For this reason, it should also have a way to stop it or make it continue its cycle. It’s an important interaction that keeps the user in control of what he/she is seeing.

Another consideration is the inclusion of a pager control, so that the user is able to go to any specific piece of content included in the slider, feeling more in control concerning the display of information.

The best JQuery component I’ve come across to achieve this is the JQuery Cycle component. It has many options of customization, including both functionality and transition effects.

Complete Content Sliders: Pager, Pause and Play

Additional Information With Tooltips

Tooltips can come in handy not only as elegant ALT attribute substitutes, but also as additional information concealers, with external links and even small pictures.

There’s always the simplest, most CSS-free solution (of course this will mean more work, but in the long run it helps you keep better track of your CSS classes). For the need of more options, though, there are listings that can be browsed through.

Additional Information With Tooltips

Save Valuable Time With Auto-Complete

There are many user tasks that can be simplified through the use of an auto-complete control. Selecting an origin and destination city when booking a flight, for example, is very tedious work through a dropdown menu. Especially in airlines that fly internationally.

Situations like the one mentioned are the ones that make jQuery Auto-complete fields necessary. The user can then just start typing the desired entry and available options will instantly be shown for him to select.

Save Valuable Time With Auto-Complete

Avoiding Information Overloads With Tabs

Tabs controls can get very problematic sometimes, but they can result in very tidy, easy-to-browse-through information displays.

The recommendation is to look for the simplest one, so that it doesn’t bring too much complexity to your project. You can also try the JQuery UI alternative, or search amongst the many options out there.

Avoiding Information Overloads with Tabs

Effective Mobile Web with JQuery Mobile

Today it’s a big mistake to assume that your users won’t be visiting any given website through their mobile device of preference. Nevertheless, it’s still a very common mistake.

The best way to be entirely sure that users will be able to achieve their own personal goals through a website is, therefore, to create a separate version of the site that can be best viewed on a mobile device. This way, after the need for a mobile version has been detected, the user will be automatically redirected to a more suitable interface.

This version can be almost effortlessly completed through JQuery Mobile, which is fairly easy to use even if one is still not updated with HTML5 tag usage (yes, jQuery Mobile uses HTML5).

Effective Mobile Web with JQuery Mobile

jQuery Mobile implements a system of interchangeable page panels. This means you can have your whole website in a single HTML document, depending on its complexity. You can read what the online documentation has to say about the structure of a page to better understand this idea.

To Sum Up

There are many ways of doing some things, but interaction remains necessary to solve common usability issues and improve the user experience on any website. Depending on the degree of functionality needed to fulfill the business objectives at hand, these mentioned interactions will support the intended workflow through the overall usage of the site.

Pamela Rodríguez Domínguez is Mobile Interface Designer at Naranya AppHouse, with a burning passion for writing and reading. She loves studying new things on her free time, along with giving conferences and undergraduate classes on web and mobile related subjects. Even though she is an engineer at heart, she has the soul of a writer with a bit of an artistic touch.


    • Dave,
    • June 15, 2011
    / Reply

    JavaScript libraries have made huge leaps and bounds in helping developers write code and develop products more quickly. jQuery is one of the most popular JavaScript frameworks, with powerful tools that improve the user’s interaction with Web applications. jQuery has an additional advantage in that it allows developers to select elements on a page using CSS-like syntax.

  1. / Reply

    This is a great article, will definitely reference in the future. JQuery (and JS libraries in general) has introduced some great advances for UI and this is a great checklist to review for what makes sense for projects I work on. Some are these items are already established staples on any site built in the last 24 months. Other libraries have their uses but it was interesting seeing JQuery’s footprint grow so dramatically in that time period among developers. Keep up the good work.

  2. / Reply

    Totally agree with Chris. JQuery and JS + UI = awesome results! I can’t remember the last time we developed a site for a client without using our trusty libraries.

  3. / Reply

    Most of the most helpful lists of resources I’ve seen in a while. Many thanks. I’m already looking into jQuery Mobile as I make a more definitive shift to HTML5, and I’m also going to checkout these tab scripts as well as table enhancing scripts.

    1. / Reply

      JQuery Mobile is great to get you started on HTML5, it helped me a lot. I’m glad the article was helpful.

      1. / Reply

        I hope it helps. I’ve thankfully already coded in it a quite a bit, but I certainly haven’t shifted to always using it just yet. I don’t launch with it as of now. And it really depresses me to see so many sites emphasizing their use HTML5 that are really XHTML with HTML5 dashes only here and there. Using things like jQuery Mobile and the Gridless framework will hopefully push me to condition myself to make HTML5 sites that are actually HTML5.

  4. / Reply

    Regarding Embedded Modal Windows, I’d like to suggest Mike Alsup’s BlockUI (http://jquery.malsup.com/block/) and my SimpleModal (http://www.ericmmartin.com/projects/simplemodal/) as more up-to-date alternatives.

    • Rich,
    • June 16, 2011
    / Reply

    jqPlot is even better. :)

  5. / Reply

    I love to play with jquery. If we want to make attractive and animated websites we can follow with jquery.

    I have practically experience with jquery on various websites.

  6. / Reply

    jQuery plugins implementation makes a site much more dynamic and enrich its look with great animated elements. Here you are some examples of jQuery designs http://www.websitetemplates.bz/jquery_templates.html

  7. / Reply

    Thanks for this huge techniques. I am trying to use the responsive file upload in drupal

  8. / Reply

    OK, Guys & Gals, I’m sold! jquery is the greatest! However! How can I make these scripts work in a WordPress site? I’m not a developer, but I do mess with the php a bit. With some careful direction, I think I could work this out. Anybody willing to help? Or point me in the right direction?

    • Arlind,
    • August 31, 2011
    / Reply

    Perfect Article with Right Suggestions

  9. / Reply

    Привет вам, о форумчане. Любительницы винтажных духов, вы не прочь обсудить
    российскую косметику? На днях привезли из novzar ru духи Красная Москва – аромат
    чудесный. У вас есть что нидудь такое?

Leave a Reply

Your email address will not be published. Required fields are marked *


Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.