The Limitations of HTML

Let's start by trying to understand why the Web is easy to use. The most fundamental element of a Web site is an HTML page. If you are a hammer, every problem is a nail; if you are a browser, every problem is an HTML page. Interestingly, HTML is essentially a document format, not a user interface format, and it has the ability to display the following:

• Text
• Hyperlinks
• Graphics
• Tables
• Frames
• Forms
• Controls
• Tooltips (that is, ALT text for graphics)

That's pretty much it. You can go well beyond these basic capabilities, such as with cascading style sheets, scripts, ActiveX controls, and browser plug-ins like Macromedia ShockWave, but the fundamental building block of the Web is the standard HTML page. By contrast, standard Windows programs have many more user interface features, such as:

• Multiple windows
• Multiple-document interfaces (MDI)
• Dialog boxes and property sheets
• Message boxes
• Menus
• Toolbars
• Cursors
• Help systems
• Status bars

In terms of interaction, Web pages support single-clicking and mouse hovering, whereas Windows programs support single-clicking, double-clicking, dragging and dropping, and sometimes even triple-clicking as well as hovering. Windows programs also support keyboard shortcuts and access keys.

Interestingly, I believe the most useful user interface innovations for the Web were developed to work around the lack of all these user interface elements. Let's look at the list of Windows interface features again and see how typical Web pages compensate for lacking each feature:

• No multiple windows or MDI Web pages compensate for not having multiple windows by putting all the elements required to perform a task in a single window. The contents of a Web page can be created dynamically, so it is easy to tailor the contents of a window to the specific task at hand. Web pages can have complex layouts through the use of tables and frames. Hyperlinks make it easy to access other pages as needed. The browse buttons (such as Back, Forward, Stop, Refresh, and Home) and the History and Favorites commands further simplify navigation between pages.
• Dialog boxes Web pages compensate for not having dialog boxes by either putting what would be a dialog box on a separate page or by integrating the dialog box into the page. For example, most sites that have search capabilities have the search dialog box incorporated into the appropriate pages.
• Message boxes Web pages compensate for not having error messages by clearly marking any input fields that have invalid information and providing instructions on how to fix the problem. This makes problems easy to identify and correct.
• Menus and toolbars Web pages compensate for not having menus by embedding commands directly in the context of the page where they are needed. This technique establishes a clear relationship between what is on the screen and what you can do with it.
• Help systems and status bars Web pages compensate for not having help systems by providing help information directly in the page itself. If the user needs additional information, there is often a link to help information pages. Status-related information is also embedded directly into the page.
• Single-clicking Web pages avoid the need for interactions other than single-clicking. You can select text and graphics in a Web page for copying to the clipboard by clicking and dragging, but otherwise there is no other mode of selection. You cannot select a standard HTML object to perform a command on it. Consequently, there's no need to distinguish between single-clicking and double-clicking, so all actions are performed with a single click.
• Keyboard shortcuts and access keys Web pages have relatively primitive keyboard support. You can navigate within a Web page by using the Tab and Shift+Tab keys, and you can jump from a link or push a button with the Enter key.

You can apply these Web user interface innovations in standard Windows programs by using the following techniques:

• Using HTML documents
• Considering hyperlinks
• Simplifying navigation
• Simplifying interaction
• Using in-place help
• Simplifying windows
• Eliminating dialog boxes

In the remainder of this chapter, I'll explore each of these techniques in detail.