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.
The following is a list of these main interactions accomplished through specific jQuery components that are available for anyone to try out.
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.
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.
Not convinced? This article includes a large list of components and tutorials focused solely on the subject of form validation.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.