next up previous
Next: Space-filling Tiled Layout and Up: Hierarchical Window Organization Previous: Mapping

Visual design

Visual design of the hierarchy is crucial for the effectiveness of the Elastic Windows approach. Hierarchical nesting of windows should be clearly visible to users at all times allowing them to see and manipulate the structure of the information effectively. I have explored the following presentation features to improve visualization of hierarchical nesting:

Initial design used gradual border coloring (Figure gif). Borders on each edge of the window are colored gradually darker, the lower the window is in the hierarchy. The top border of a window is drawn wider that the other borders to allow space for the title of the window using the screen space as economically as possible. However, users reported problems in seeing the hierarchy in this initial design. Thus, I worked on a number of alternative designs (Figure gif). Changing the coloring to get gradually brighter as opposed darker did not seem to solve problems. I have also experimented with gradually changing the background color of window contents. However, this seemed to work only for leaf level windows since no content of higher level windows are visible. Users were also allowed to set arbitrary background colors for window contents to improve window recall performance.

The initial design had two problems. Gradual border coloring by itself was not apparent enough in the presentation of the hierarchy and the use of wide borders for the title of the window was distracting. To improve this initial design, I have included extra spacing at each level of the window and made the borders of equal width for each edge of the window. Extra spacing improved the visualization to a large degree as space in between windows clearly indicates that the two windows are separate entities and one is nested in the other. Equal border widths also improved the visual design as hierarchy is now traceable at every edge of the windows. It also improved users ability to manipulate windows. In this revised design the thin black lines around window borders were removed since it seemed to distract the continuous effect of gradually changing colors.

Shadows were also explored to improve users visual perception of the hierarchy. Shadows give a sense of height where lower level windows seem to be lifted up in the presentation. Shadows combined with gradual background coloring seems to work best.

captionfigure246

captionfigure251


next up previous
Next: Space-filling Tiled Layout and Up: Hierarchical Window Organization Previous: Mapping

Eser Kandogan
Sun Sep 13 18:34:46 EDT 1998

Web Accessibility