Creating a “Good” User Interface is a matter of balancing competing needs. It’s part art, part science and all work.
Users want a UI that is intuitively obvious, to them. For the developer, the problem is that intuition is very much a matter of culture and experience that varies with the demographic of the target audience. Logical (rule-based) interfaces are typically easier to program, and ideally can lead to an experience that becomes intuitive.
Ultimately all of these competing needs come down to one thing: Managing Complexity.
The jQuery Solution to Complexity
The UI programmer now has two sets of complexity to manage: the complexity of the DOM and the complexity of the application. One common feature of “bad” design is when the complexity of the DOM is passed onto the user. Managing the complexity of the DOM is where jQuery shines.
You’ll find a lot of examples and a lot of talk about jQuery on the Web, some of it quite involved, but here’s the secret of how jQuery manages complexity: Very simply, jQuery lets you look up “something” in the DOM, then do something with it. That’s it. Look it up. Do something.
DOM/ jQuery Lookup Basics
jQuery centers around the idea of a “selector” to look up something in the DOM. There are three major types of selectors in jQuery: tags, classes and ids. Although there are additional, more advanced selectors, a lot can be done with these three.
A tag selector has no special decoration, but must be a valid HTML tag. So, “p” would be the correct selector for all the paragraphs in the example above. A class selector has a dot (.) in front of it. So, to select every element with the class “normal” in the example above, you would use “.normal”. An id selector uses a hash mark as a designator, so the second paragraph could be selected using “#p2”.
The dollar sign ($) is the special jQuery object. Occasionally this designation conflicts with other libraries, so the word jQuery can be substituted for the dollar sign.
The syntax of a typical jQuery call to look up a DOM element, and then do something looks like this:
To hide every paragraph on the Web page above, you would use the following:
To show the second paragraph after hiding all the previous paragraphs:
To show all elements with the class of normal:
Simplifying the Complex with jQuery
One way people deal with complexity is organization. Divide a complex problem into smaller, simpler parts and then arrange those parts by priority. In a user interface, things like position, color, images and textual content are used to present that arrangement.
What follows are a few specific ways jQuery can be used to create what the design team has decided should be done. Obviously, before using any of these techniques, you need to be sure your UI is actually using jQuery. This link will help with jQuery basics.
Ease of Learning vs. Complete Features
A common problem, especially with complex and robust applications, is that there’s a lot to learn to be able use the software well. However, most users also only need to do a few things at a time. If it takes a long time to figure out to know how to do those few things, they become frustrated.
jQuery makes it easy to “hide” elements until they’re needed. One way to manage complexity is that the most common or most basic features can be visible by default, and then advanced or specialized features can be shown as the user requests them.
Consider the following example in which a page has Basic, Standard and Advanced features. You might code it in HTML as shown below:
Using jQuery, the user can select which view they prefer:
To do this, you need to begin with the following code to hide all the “complex” elements first:
To allow the user to select their view, the menu bar code would look something like this:
The complete source code for this is in the file sample2.html, included for download with this article.
Familiar vs. Boring
Most user interfaces are built on some sort of metaphor. These metaphors have included desktops, filing cabinets, car dashboards, index cards and spreadsheets (It’s true, a spreadsheet used to be a big piece of paper with rows and columns printed on it.)
Metaphors give users an intuitive sense of how to find what they need within a program. From a productivity perspective, “Familiar” is “Good.” Not spending time learning, but spending time doing, makes users less frustrated.
However, these metaphors change. Most people now think of a spreadsheet as a program with rows and columns. Mail is no longer assumed to be paper delivered in an envelope. I doubt if very many people under the age of 30 has ever seen a rotary phone. So, older icons lose meaning. Everybody who knows why HTML radio buttons are called “radio” buttons, raise your hands. Uh huh, that’s what I thought. OK, you old people, put your hands down. OK, everybody under the age of 30 who did not raise their hands, click here.
From a marketing perspective, “Familiar” is “Boring.” “Boring” is “Bad.” “New” implies “improved.” Old metaphors look old-fashioned. (Really old metaphors look classic, but that’s beside the point.) So, while the market drives changes to the look of a UI, functionality and productivity concerns create resistance to that change.
To balance these competing needs, the UI Developer must know how to separate “What it is” and “What it does” from “How it looks.” Usually this is done with a standard framework that makes it easier to create a consistent user experience.
jQuery has a supportive, open community of developers who have created various frameworks that produce UIs that are familiar enough to be intuitive and flexible enough to change over time.
One such framework is jQuery UI. It uses Themeroller to provide a framework for a flexible, familiar and intuitive desktop metaphor in the classic GUI fashion. Themeroller makes it fairly easy to update colors, fonts and gradients to provide a new look without breaking existing functionality.
The desktop metaphor allows you to handle complexity with a familiar (and therefore intuitive) set of tabs, menus, accordions and pop up dialog boxes.
Basically the menus, tabs and accordions are all variations of the “Hide/Show” method of managing complexity. For example, the menu below uses jQuery UI menu to manage the same complexity as the Feature Hide/Show example above.
To give users a visual cue about specific sub features, standard features are italicized and advanced features are in a smaller font.
Again, this is a matter of selecting the right DOM element, and then doing something with it to manage the complexity:
The complete source code to this example is in the file sample3.html.
Additional jQuery Resources to Manage Complexity
jQuery is one of those things that takes a while to learn, but makes your life SO much easier once you get it. If you’re new to jQuery, this site should help.
There are a lot of jQuery based tools specifically aimed at managing UI complexity :
- Form Validation Plugin: This jQuery plugin lets you provide instant feedback to users before a form is submitted, catching mandatory fields, improperly formatted data, out of range data, etc.
- jQuery Data Table: This plugin is an advanced tool that allows you to create apps that deal with large amounts of tabular data using the familiar spreadsheet metaphor.
- jsTree plugin: This one allows you to manage complexity by using an expanding and collapsing tree metaphor.
- Stepy: This helps you create a step-by-step wizard to focus the user’s attention through long processes, such as configurations and sign ups.
You may download source code samples for this article by clicking here.