Window Research 3: Window Positioning

by Luke Wroblewski December 22, 2003

Continuing with windowing, some references for where to position windows, when and why. What meaning does window position communicate to the user.

Hix, Deborah, & Harston Rex H. (1993). Developing User Interfaces: Ensuring Usability through Product and Process. New York: John Wiley & Sons Inc.

Kinds of windows: primary –one through which all other windows in application are generated, the one that closes the application, secondary –generated by primary window. When multiple windows are open at the same time, generally only one is active, that can accept user input.

Window guidelines:

  1. Place a new window in a fixed position, then allow the user to easily reposition it
  2. Every time a user returns to the primary window it should appear exactly as the user left it.
  3. Don’t overuse windows –minimize the amount of window manipulation done by the user
  4. Tiled windows generally seem to give better user performance
  5. However, most user seem to prefer overlapping windows since they can control position, and size.
  6. Appearance of the primary window should be consistent – use as a restarting point.

Apple Computer, Inc. (1992). Macintosh Human Interface Guidelines. Reading, MA: Addison-Wesley Publishing Co.

Window display Order

  1. Windows appear on desktop in a hierarchy of layers
  2. Each application has its own stack of windows within which different types of windows appear in a specified order
  3. This order is based on the type of window… dialog, utility, modal..

Window Positioning

  1. Whenever application displays a window on the screen, must decide where to put it, and how big it should be.
  2. To determine position of window: what kind of window is being opened, what other window are open and where, relationship between the content of the new window and other windows or dialog boxes.
  3. Whenever a change is made, maintain the user’s preferred shape and size for the window.
  4. Default position on the screen: upper left hand corner of screen open each consecutive window(document) below and to the right of its predecessor
  5. Reopen windows in the size and position that the user left them
  6. There are some criteria for opening windows on multiple screens (not so applicable)
  7. Dialog boxes and Alert box positions: if no windows related to alert box are open, place alert one fifth of vertical space above it and centered horizontally ; if alert box relates to specific document window, position with same parameters but over document window

Splitting a window

  1. Can allow users to ability to look at different parts of a document simultaneously by implementing a split bar
  2. Separates a window into two scrollable areas, called panes, within one window
  3. A split line separates the content in the window.

Zeite, Carl. (1995). Practical User Interface Design: Making GUI’s Work. London: McGraw Hill Book co.

Size and shape

  1. There is no evidence that a rectangular shape is any better or worse than any other shape for a window.
  2. No conclusive evidence that windows should deep rather than wide, or even square.
  3. The designer is at liberty to use whatever shape best suits the organization of the fields
  4. The designer can reinforce the relationship of similar types of windows by the use of a consistent style.

Position

  1. Put the window close to the point of activation
  2. Do not obscure fields that the user needs to see
  3. When a stack of dialog boxes is open.. cascade the boxes from top left to bottom right, with constant offset.
  4. For a sequence of boxes, each replaces the previous one.

Shneiderman, Ben. (1998). designing the Use Interface: Strategies for Effective Human-Computer Interaction. Reading, MA: Addison-Wesley Publishing Co.

“A key determinant of the usability of window systems is the choice of where the window opens. Most window systems support the most-recently used place and size approach, which has a better chance to satisfy user needs than a fixed position. Often, the most effective solution is to open the new window close to the current focus, to limit eye motion, but far enough away to avoid obscuring the current focus.”

Multiple-window Strategies: “In an empirical test with eight experienced users, the windowed version of a system produced longer task-completion times than did the non-windowed version. … however, after the time to arrange the display was eliminated, the task-solution times were shorter for the windowed environment. Fewer errors were made in the windowed environment. … but these advantages may be compromised unless effective window arrangement is provided.”

“The notion of collections of windows assembled into ‘rooms’ is an important step forward in matching window strategies to user’s tasks. Rooms can be seen as a form of window macro that enables users to specify actions on several windows at a time.”

Galitz, Wilbert O. (1996). The essential guide to User Interface Design. New York. John Wiley & Sons

Window Organization

  1. Information and functions must be presented to people when and where they need them. Proper organization and support of tasks by windows will only be derived through a thorough and clear analysis of user tasks.
  2. People most often think in terms of tasks, not functions or applications. Windows must be organized to support this thinking.

The presentation style of a window refers to its spatial relationship to other windows.

  1. Two basic styles – tiled & overlapping
  2. Tiled Advantages – elminates positioning decisions, windows are always visible, no information hidden, less complex, easier to learn and use, better performance where little window manipulation is required to accomplish task.
  3. Tiled disadvantages –limited number on screen, as opened windows change size, movement can be disconcerting, windows can get too small, changes in size and location are difficult to predict, configuration may not meet user's needs, perceived as crowded, less user control.
  4. Overlapping Advantages –3d look resembling familiar desktop, greater control to meet user needs, windows can maintain larger sizes, can maintain consistent sizes and positions, screen space is not a problem, less pressure to remove windows, less crowding and complexity possiblities.
  5. Overlapping disadvantages –more complex than tiled windows, information can be obscured, windows themselves can get lost, 3d space is not always realized, too many windows can be visually overwhelming.
  6. Cascading windows –no window ever completely hidden, bringing window to front is easy, simplicity in visual presentation and cleanness.
  7. Minimize the number of windows needed (3.7)

Window Placement

  1. Consider the use of the window, overall display dimensions, reason for the window’s appearance.
  2. Position the window so it is visible.
  3. If window is being restored, place the window where it last appeared.
  4. If window is new: At the point of the viewer’s attention; in a position convenient to navigate to; so that it does not obscure important or related information
  5. for multiple widows –give each window its own unique and discernable location
  6. if none apply –horizontally center a second window with its primary window.

In placing a window on the display, what must be considered is how the window is used in relation to other windows, the overall dimensions of the display, and the reason the window is being presented.

Window Separation

  1. Crisply, cleanly, and pleasingly demarcate a window from the background of the screen on which it appears.
  2. Provide a solid line border for the window
  3. Provide a background that sets off well against the overall screen background
  4. Consider a drop shadow below the window.

Some of these recommendations fall under visual design.