ABSTRACT
Many graphic applications rely on command-based arrangement tools to achieve precise layouts. Traditional tools are designed to operate on a single group of elements that are distributed consistently with the arrangement axis implied by a command. This often demands a process with repeated element selections and arrangement commands to achieve 2D layouts involving multiple rows and/or columns of well aligned and/or distributed elements. Our work aims to reduce the numbers of selection operation and command invocation, since such reductions are particularly beneficial to professional designers who design lots of layouts. Our key idea is that an issued arrangement command is in fact very informative, instructing how to automatically decompose a 2D layout into multiple 1D groups, each of which is compatible with the command. We present a parameter-free, command-driven grouping approach so that users can easily predict our grouping results. We also design a simple user interface with pushpins to enable explicit control of grouping and arrangement. Our user study confirms the intuitiveness of our technique and its performance improvement over traditional command-based arrangement tools.
Supplemental Material
Available for Download
GACA: Group-Aware Command-based Arrangement of Graphic Elements
- Baudisch, P., Cutrell, E., Hinckley, K., and Eversole, A. Snap-and-go: helping users align objects without the modality of traditional snapping. In CHI '05 (2005), 301--310. Google ScholarDigital Library
- Bier, E. A., and Stone, M. C. Snap-dragging. In ACM SIGGRAPH Computer Graphics, vol. 20 (1986), 233--240. Google ScholarDigital Library
- Dwyer, T., Marriott, K., and Wybrow, M. Dunnart: A constraint-based network diagram authoring tool. In Graph Drawing (2009), 420--431. Google ScholarDigital Library
- Frisch, M., Kleinau, S., Langner, R., and Dachselt, R. Grids & guides: multi-touch layout and alignment tools. In CHI '11 (2011), 1615--1618. Google ScholarDigital Library
- Frisch, M., Langner, R., and Dachselt, R. Neat: a set of flexible tools and gestures for layout tasks on interactive displays. In ITS '11 (2011), 1--10. Google ScholarDigital Library
- Galindo, D., and Faure, C. Perceptually-based representation of network diagrams. In ICDAR '97, vol. 1 (1997), 352--356. Google ScholarDigital Library
- Heo, S., Lee, Y.-K., Yeom, J., and Lee, G. Design of a shape dependent snapping algorithm. In CHI EA '12 (2012), 2207--2212. Google ScholarDigital Library
- Igarashi, T., and Hughes, J. F. A suggestive interface for 3D drawing. In UIST '01 (2001), 173--181. Google ScholarDigital Library
- Igarashi, T., Matsuoka, S., Kawachiya, S., and Tanaka, H. Interactive beautification: a technique for rapid geometric design. In UIST (1997), 105--114. Google ScholarDigital Library
- Nan, L., Sharf, A., Xie, K., Wong, T.-T., Deussen, O., Cohen-Or, D., and Chen, B. Conjoining gestalt rules for abstraction of architectural drawings. ACM Trans. Graph. 30, 6 (2011), 185:1--185:10. Google ScholarDigital Library
- Nelson, G. Juno, a constraint-based graphics system. In ACM SIGGRAPH Computer Graphics, vol. 19 (1985), 235--243. Google ScholarDigital Library
- Pavlidis, T., and Van Wyk, C. J. An automatic beautifier for drawings and illustrations. In ACM SIGGRAPH Computer Graphics, vol. 19 (1985), 225--234. Google ScholarDigital Library
- Raisamo, R., and Raiha, K.-J. A new direct manipulation technique for aligning objects in drawing programs. In UIST (1996), 157--164. Google ScholarDigital Library
- Reinert, B., Ritschel, T., and Seidel, H.-P. Interactive by-example design of artistic packing layouts. ACM Trans. Graph. 31, 6 (2013), Article No. 218. Google ScholarDigital Library
- Ryall, K., Marks, J., and Shieber, S. An interactive constraint-based system for drawing graphs. In UIST '97 (1997), 97--104. Google ScholarDigital Library
- Saund, E., Fleet, D., Larner, D., and Mahoney, J. Perceptually-supported image editing of text and graphics. In UIST '03 (2003), 183--192. Google ScholarDigital Library
- Scarr, J., Cockburn, A., Gutwin, C., and Bunt, A. Improving command selection with commandmaps. In CHI '12 (2012), 257--266. Google ScholarDigital Library
- Tollis, I., Eades, P., Di Battista, G., and Tollis, L. Graph drawing: algorithms for the visualization of graphs, vol. 1. Prentice Hall New York, 1998. Google ScholarDigital Library
- Xu, P., Fu, H., Au, O. K.-C., and Tai, C.-L. Lazy selection: a scribble-based tool for smart shape elements selection. ACM Transactions on Graphics 31, 6 (2012), Article No. 142. Google ScholarDigital Library
- Xu, P., Fu, H., Igarashi, T., and Tai, C.-L. Global beautification of layouts with interactive ambiguity resolution. In UIST 14 (2014), 243--252. Google ScholarDigital Library
Index Terms
- GACA: Group-Aware Command-based Arrangement of Graphic Elements
Recommendations
Global beautification of layouts with interactive ambiguity resolution
UIST '14: Proceedings of the 27th annual ACM symposium on User interface software and technologyAutomatic global beautification methods have been proposed for sketch-based interfaces, but they can lead to undesired results due to ambiguity in the user's input. To facilitate ambiguity resolution in layout beautification, we present a novel user ...
Neat: a set of flexible tools and gestures for layout tasks on interactive displays
ITS '11: Proceedings of the ACM International Conference on Interactive Tabletops and SurfacesCreating accurate layouts of graphical objects is an important activity in many graphics applications, such as design tools, presentation software or diagram editors. In this paper, we are contributing Natural and Effective Layout Techniques (Neat). The ...
The auckland layout editor: an improved GUI layout specification process
UIST '13: Proceedings of the 26th annual ACM symposium on User interface software and technologyLayout managers are used to control the placement of widgets in graphical user interfaces (GUIs). Constraint-based layout managers are among the most powerful. However, they are also more complex and their layouts are prone to problems such as over-...
Comments