Visualising Alignment with Adaptive Gridlines James Noble MRI, School of MPCE Macquarie University, Sydney
[email protected]
Abstract Adaptive Gridlines visualise alignment in graphic designs for diagrams, documents, and user interfaces. Adaptive gridlines are particularly useful for drawing the attention of users who are not trained graphic designers to the alignment in their designs.
alignment lines are often drawn on illustrations, and novice designers are told to imagine similar alignment lines in their designs [7, 8]. The aim of adaptive gridlines is to make these imaginary lines explicit, and thus enable non-expert designers to “see” the alignments in their designs. Although adaptive gridlines were developed for visualising alignment in graphical user interfaces [5], we have also applied them in more general domains.
1. Introduction
2. Adaptive Gridlines
Graphic design is becoming an increasingly common day-to-day task. Word processor users designing documents, systems analysts designing software diagrams, and software developers designing user interfaces are routinely required to produce graphic designs, but are almost uniformly without specialised training. In this paper we describe adaptive gridlines, a novel technique for visualising rectilinear alignment, one of the most important aspects of graphic design [8]. Graphic designers are trained to “see” the alignments in their designs, and so graphic design texts make alignment explicit. For example,
Figure 1 illustrates adaptive gridlines for a user interface layout task. Individual adaptive gridlines are drawn along the top and left edges of each interface component, in a lightly saturated colour so that they do not distract the user from the main elements of the diagram. When the user repositions a component, its attached gridlines move along with it, providing immediate feedback about how the location of the component fits into alignment with the other components of the interface. When two components are aligned along an edge, the gridlines for that edge merge, simplifying the display (see Figure 2). This is important, as it ensures alignments (or
Figure 1. Visualising Alignment in GUI Design Figure 2. Improved Alignment
mis-alignments) latent in the design are made obvious to the user. A diagram with many alignments will have many gridlines, and thus appear visually complex, while a diagram where most components are aligned will have fewer gridlines. This effect can be seen by comparing Figures 1 and 2. In Figure 1, the three leftmost components are misaligned, producing three adaptive gridlines on the left of the figure. The redesigned layout shown in Figure 2 aligns these components resulting in a single gridline. We have also used adaptive gridlines in a variety of domains, including iconic software design diagrams [4] (Figure 3) and more traditional document layout (Figure 4, adapted from [8]).
3. Related Work Lieberman has visualised higher level design knowledge about styles of graphic design. The Mondrian system [3] visualises a design’s conceptual structure as a tree of graphical annotations which are linked to the design. Because the annotations present conceptual information, they are not graphically related to the concepts they are visualising. In contrast, adaptive gridlines can visualise alignment lines directly, because alignment is a very basic aspect of graphic design. Graphical tools for actively aligning objects have been studied more intensively and applied commercially [6]. Regular fixed gridlines have been used to visualise potential alignment lines since the earliest graphical editors, and snap-dragging [1] and graphical tabs [2] provide specialised alignment objects in response to explicit user commands. The alignment stick [6] is a two-handed direct manipulation tool, modelled on a physical ruler, which can be used to align objects or check a particular alignment. All these tools can provide information about particular alignments when requested by the user, whereas adaptive gridlines provide
Figure 3. Alignment in Software Diagrams
simultaneous, continuous feedback about all the alignments in a design.
4. Conclusion We are currently carrying out usability evaluations of adaptive gridlines, and preliminary results indicate that the gridlines successfully direct users’ attention to the alignment of their designs, even if they have no background in design. We plan to develop similar techniques for visualising other types of alignment, and other aspects of graphic design, such as consistency, repetition, and proximity [8]. We also plan to experiment with making gridlines active, so that they can be used to align components.
References [1] E. A. Bier and M. C. Stone. Snap-dragging. In SIGGRAPH Proceedings, 1986. [2] O. Hashimoto and B. A. Myers. Graphical styles for building user interfaces by demonstration. In Proc. ACM Symposium on User Interface Software and Technology (UIST), 1992. [3] H. Lieberman. The visual language of experts in graphic design. In IEEE Symposium on Visual Languages, 1996. [4] J. Noble. Scribble: A diagram editor with a minimal interface. In OzCHI Proceedings. IEEE Press, 1996. [5] J. Noble and L. L. Constantine. Interactive design metric visualization: Visual metric support for user interface design. In OzCHI Proceedings. IEEE Press, 1996. [6] R. Raisamo and K.-J. R¨aih¨a. A new direct manipulation technique for aligning objects in drawing programs. In Proc. ACM Symposium on User Interface Software and Technology (UIST), 1996. [7] S. West. Working With Style: Traditional and Modern Approaches to Layout and Typography. Watson-Guptill, 1990. [8] R. Williams. The Non-Designer’s Design Book. Peachpit Press, 1994.
Figure 4. Alignment in Graphic Design
