[ Previous | Next | Contents | Glossary | Home | Search ]
Motif and CDE 2.1 Style Guide



Creating Windows

The following sections discuss:

  1. Choosing the parts of a window

  2. Displaying secondary windows in the correct location

  3. Choosing between modeless and modal secondary windows

  4. Conserving screen space

  5. Choosing the Parts of a Window

    The following principles address choosing the parts of a window:

    1. Provide a status area that displays the status of a running process so that the user can have that information in the window. For example, a window that displays a printer queue might have a status area to show when the queue is ready, stopped, or processing jobs.

    2. Provide an information area where the user can view general information about the window or elements within the window. Examples of what the information area could display are:

      1. A brief description of the element that the cursor is on, for example, descriptions of the menu items as the user navigates through them

      2. The position of the cursor, for example, Row 2, Column 3 when in a text-entry field

      3. Messages that the user might not want in an information message, for example, No misspelled words found

        For more information, see the Information and Message Areas (Area) and Status Area (Area) reference pages.

      4. Displaying Secondary Windows in the Correct Location

        Display secondary windows in the best possible location for the user. In some cases, this means that you need to let the user specify a default location for a particular secondary window, for example, a Find dialog window. The following principles address where to place a secondary window:

        1. If the user does not need to see the information in the existing window, display the secondary window centered on top of the existing window. Do not cover up the title bar or menu bar.

          This keeps the windows from spreading unnecessarily over the entire screen. The user should be able to see the context from which the secondary window came and also to use the menu bar to access other secondary windows if needed.

        2. If the user needs to see the information in the primary window, display the secondary window so that it does not cover the existing window.

          In many cases, you need to position the secondary window so that it does not cover any part of the primary window. You can calculate the best location by beginning to the right of the primary window and moving the secondary window in a clockwise direction around the existing window until you find enough available screen space to display the secondary window. Do not cover up the title bar of the primary window. The user should be able to see the context from which the secondary window came.

        3. If the secondary window contains information about a particular element within a window, display the secondary window so that it does not cover the following:

          1. Any portion of the element

          2. Any portion of an important related element, such as a label for the element that the secondary window is related to

          3. The title bar or menu bar of the window that contains the particular element

            The user should be able to see the context from which the secondary window came.

            For more information, see the Secondary Window reference page.

          4. Choosing Between Modeless and Modal Secondary Windows

            Modeless secondary windows let the user continue to work in the existing window from which the secondary window was opened. Modeless secondary windows are more flexible than modal windows because users have greater control in the interface when they can interact with many windows.

            Modal secondary windows prevent the user from continuing to work in the existing window from which the secondary window was opened. Use modal windows only when absolutely necessary, for example when a communications program is downloading a file that cannot be modified until the download has completed. Even though users cannot interact with elements within the existing window, they should still be able to interact with the existing window itself.

            As an alternative to providing modal secondary windows, use a modeless secondary window and make some of the choices in the primary window unavailable.

            For more information, see the Secondary Window reference page.

            Conserving Screen Space

            The following principles address conserving screen space:

            1. Leave between one-eighth and one-half inch between the window contents and the window border.

            2. Plan grids for the known information in the windows.

              A grid allows you to create visually appealing windows that accurately reflect the intended hierarchy. You can design a grid system to accommodate any size, shape, or quantity of information.

              Grids promote consistency, allowing the user to anticipate placement of information from window to window.

            3. Use group boxes or separators to separate groups of related controls. For example, you can use group boxes or separators to show that several radio buttons belong together in one group.

              Use group boxes judiciously. Although using group boxes effectively groups related controls together, group boxes provide visual clutter that can distract the user, especially when you use group boxes within other group boxes. Using separators and the design layout guidelines in this book can help minimize the use of group boxes.

            4. Use standard typography.

              Coherent typography presents a more cohesive, organized presentation of the information and makes it easier for the user to read. For example, use a bold font for headings and a light font for labels.

              Line up similar elements and separate groups by placing a single colored line under the heading or by increasing the space between groups. Use indents to show sublevel information rather than nested group boxes. This saves screen space and keeps the windows organized.

            5. Design positive and negative space within the interface.

              In every composition there is positive and negative space. Positive space is the space taken up by elements such as icons and controls. Negative space is the space around the positive space. Software designers often think of this negative space as "extra" space. Although organizational techniques such as grid systems can help you compose a design that uses space economically, do not completely eliminate negative space because this space creates visual "breathing room" and enhances readability.


            6. [ Previous | Next | Contents | Glossary | Home | Search ]