Layout
Styles |
|
A single information space can include a number of
different layout styles, but differences should be reserved for specific
functions.
The three primary styles are single-paned screens, multi-paned screens, and multi-windowed screens. Each style has some advantages and some drawbacks for information design, navigation, and web-site management.
Single-Paned Screens
The window is considered a single,
continuous space. An undivided screen display can consist of a single graphic element, a field of
text, or a mixture of text with in-line graphics.
 |
|
|
|
undivided screen:
text and in-line
graphics |
undivided screen:
image-mapped
graphic |
Using a single graphic
allows complete control of the layout but taxes the user in load time. A
text field with in-line graphics is easily constructed but allows little
control over layout elements such as the  width of text colums.
Multiple Panes
The window is divided into distinct areas, either with
visible dividers or with white space. Generally the areas are devoted to
distinct functions: one area displays  navigation information and
orientation features while another is devoted to displaying the main
content for the node.
The divisions are accomplished using frames, tables, or Netscape "layers" (which in some designs may also resemble the multiple windows style).
|
|
|
|
tables:
elements all scroll together
|
frames:
framed panels scroll independently |
Tables provide considerable control over the spatial relations among
various elements on the screen. Their drawback is that they can become
difficult to build and maintain as the layout becomes more complex. The advent of Cascading Style Sheets promises to ease this burden to some extent. From
a user's perspective, tables provide highly legible nodes, but key
navigation and orientation devices are likely to be scrolled out of sight.
Frames provide more complete separation of screen areas. Designers can
choose which panes will enable the user to scroll and resize the area.
By disabling scrolling and resizing for a frame panel along one edge of
the screen, the designer can ensure that vital features -- especially navigation
elements and orientation cues -- remain visible as the user scrolls
through the contents of the node.
Their drawbacks: frames take up a lot of screen real estate, cramping
the content area for those working on laptops or smaller desktop displays.
More troubling is their effect on standard browser functions.
A layout using frames alters some browsers' key navigation
systems: the back button's behavior,
the title of the window,
the record of nodes visited, and the bookmarking functions
may all cease to function in the way users generally expect.
A node in a frame layout is constructed from more
files than a node constructed with a table or one laid out on an undivided screen.
To divide the screen into frames, a structural file (also referred to as a framework
file) specifies the dimensions and behavior of the
frames to be displayed and designates the initial content file to be displayed in
each of the panels. To the user, it may seem that the screen
displays one or more areas enhancing navigation functions and a main or
primary area where the node proper is displayed. The layout of these
guidelines, for example, encourages that conception of the node.
The browser's rules, however, do not differentiate a
frames-based node from other types.
The file that identifies or defines the node
-- the framework file -- specifies the allocation of screen space.
No matter how many other files are called into the various display areas,
the node itself is identified by the file specifying
the framework of the display. The user's activities may call many chunks of
content into the various panes on the screen, but the browser's history list
may show that the user has visited only one
node. The title of the node (usually displayed as part of
the window's boundary markers) always remains the
title that was specified in the <TITLE> of the framework file. The function for
adding a bookmark will record the URL of the framework file rather than
the URL for the file displaying the content the user may want to reference.
These drawbacks are to some extent offset by other browser functions,
including an option to "unframe" any part of the screen display. That
action will reveal the URL of the information displayed in the specific
pane and will also display the information in the document's <TITLE> tag as
the title of the new browser window that the unframing action creates.
Most browsers provide a command for saving the URL for the primary document
displayed in a frame but users will need to learn the techniques
that will support their work most effectively. Developers should clearly
document these features and include training material for end-users of projects using
frames layouts.
Multiple Windows
The information architecture relies on multiple browser
windows or on multiple applications each running in its own window.
Generally a design invokes additional windows in order to separate some
functions from others or in order to facilitate transitions between
applications.
For example, a design that
creates more than one simultaneously open browser window
may use attributes of the <A> tag to open
new windows or it may use an applet or Javascript to create additional
windows. The additional windows may remain open until the user terminates
them, or they may be programmed to disappear after they have served their
function, depending on how the windows were created and what function they
are to serve.
Netscape's implementation of layers may create the appearance of multiple windows since the layers can overlap as if they were jumbles of note cards on a desk top. The appearance may not be disconcerting to users but without explicit guidance, they may not know how to bring partially obscured layers into view or how to retrieve those that have disappeared from sight. In short, such layout styles may provide considerable visual interest but at the expense of some clarity in navigation and orienation.
Some browser plug-ins create a fourth style: a hybrid of Multiple Panes
and Multiple Windows. Many plug-ins in effect open separate windows although the screen may look seamless to the user. Occasionally these utilities will cause additional applications to launch. For example the Acrobat pdf plug-in displays documents within the browser window but the Acrobat Reader application is also running on the user's machine and will remain running even when the user is no longer viewing a pdf file in the browser window. If the plug-ins also display their own control and navigation elements, as the Acrobat plug-in and most VRML plug-ins do, the user may find the proliferation of controls confusing and unpredictable.
In choosing among these major styles, designers also need to consider how the layout
affects navigation, helps or hinders orientation, and makes sensible use of screen
dimensions. |
to Layout