| home / programming / mozilla / 1 |    [previous][next] |
|
|
|
Visual navigation is in the art of a graphic designer. A well-designed and well-layed-out display makes it easy for users to find what they’re looking for. A classic example of an application that is visually oriented is Adobe Photoshop. Although that tool has a menu system, menus are secondary to navigating the palettes and the canvas with the cursor. A Photoshop user knows that by right-clicking on the current selection with the Flood Fill tool (which is over here), the current background color (shown over there) will be applied to that selection’s content.
Visual navigation is particularly important when a user is interacting with something for the first time.
Recipe navigation occurs when the user calls on habit and memory to complete a task. It is something of a black art. A well-designed sequence of key-driven commands makes it easy for a user to remember how to do things. An obvious example of a recipe-oriented navigation tool is a command line. If the user has a good memory for commands, then the command line is a very expressive, efficient, and direct way to get things done. Window-based tools also support recipe navigation. Under Microsoft Windows, most applications will respond to the keystroke sequence Alt-F-S (File | Save) by saving the current document. Reusing remembered keystroke sequences is a very fast navigation technique, perhaps the fastest.
Recipe navigation is very important when the user performs a repetitive action.
Traditional non-Web applications do not have much room for clever layout when displayed inside a window or on a monitor. Menu bars, toolbars, and scrollbars are examples of the little strips of layout that are now familiar features of such applications. Keystroke support in such traditional applications is usually much more extensive than layout.
The success of the Web has resulted in HTML being used as the foundation for many applications. HTML is very weak on recipe navigation because of slow response times and browser compatibility problems. That is why visual cues and graphic design support have become very important for those applications.
With XUL, Mozilla moves back toward the recipe style of use that is efficient for power users. XUL provides extensive support for keylike navigation. Any nontrivial visual design required is left to the application developer. Regarding traditional applications, XUL still provides visual navigation support in the form of menu bars and scrollbars.
What all this means is that Mozilla technology makes creating memorydriven systems easy. Complex visual arrangements are left to the applicationprogrammer and have no support beyond the basics of CSS2 (which is still extensive) and XUL.
If a user is to enter something into a form, then interacting with one form
element at a time is a sensible approach. Like HTML, XUL brings such widgets
to the fore one at a time. The widget currently available for user input is
said to have the current focus.
Any such set of widgets have an order. In the W3C standards, this order is
called the navigation order. In Mozilla, the ordered collection of these widgets
is called the focus ring because stepping out beyond the last widget leads
back to the first widget.
All widgets in Mozilla’s focus ring can be visited. The simplest way to see this visitation order is to step around the ring with the Tab key. Try that in any Mozilla window displaying a XUL or HTML document. In addition to the Tab key, a focusable widget can be given the focus with a mouse click. There is one focus ring per Mozilla window.
Some formlike widgets are not members of the focus ring. Examples are <toolbarbutton> and <menu> . This is because the focus ring’s main purpose is to support the user’s data-entry activities. Widgets that are more about controlling the application, like menus, do not participate.
Mozilla’s focus ring is quite sophisticated. It can step inside an XBL binding and focus specific pieces of content in the binding. This allows the user to interact with small parts of a given binding. So a binding, which normally builds a single whole widget out of pieces, can be invaded by the focus ring. The focus ring also steps inside embedded content. A XUL document can contain <iframe> tags that display other documents inside the main one. The focus ring reaches down into those other documents and includes all focusable elements in the focus ring. It also adds those whole documents to the ring. To see this, load an HTML document that contains a form into any Mozilla Browser. As you tab around the focus ring, both the individual form elements and the whole HTML document, as well as the XUL parts of the browser window, take a turn at being focused.
Because the focus ring includes whole embedded documents, there is also a hierarchical aspect to the ring. To see this, imagine that the Google home page (www.google.com) is displayed in a browser, and that the cursor is in the search field of that home page. All these items are focused: the search field, the HTML document that is Google’s home page, and the window holding the XUL document that is the Web browser application. In XML terms, the focused items are HTML’s <INPUT TYPE="text"> tag, the XUL <iframe> and HTML <HTML> tags, and the outermost XUL <window> tag.
| home / programming / mozilla / 1 | [previous][next] |
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
Created: March 27, 2003
Revised: December 19, 2003
URL: http://webreference.com/programming/mozilla/1
