UI Paradox
Creating a “Good” User Interface is a matter of balancing competing needs. It’s part art, part science and all work.
Users expect a lot of functionality, yet also demand simplicity. A familiar UI is one where the key features are already well-understood. However if it’s too familiar, the UI could be seen as boring. 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
When programming a Web UI, the developer must create and arrange a combination of HTML, CSS and JavaScript. These elements are managed within the browser using the Document Object Model or DOM. DOM management can be a very complicated set of tasks. 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. The term jQuery means “JavaScript Query.” In this case, Query simply means “Lookup.” 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
To use jQuery you need a fundamental understanding of HTML, CSS and JavaScript. 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:
$(selector).do_something()
To hide every paragraph on the Web page above, you would use the following:$(‘p’).hide();
To show the second paragraph after hiding all the previous paragraphs:$(‘#p2’).show();
To show all elements with the class of normal:$(‘.normal’).show();
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. Usually, the UI developer (most often in conjunction with other team members) takes a first stab at what that arrangement should be. Using HTML, CSS, JavaScript, jQuery and other tools and libraries, the developer presents to the rest of the team what can be. This process usually progresses through several iterations. 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:
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.
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.
