research-article

Beyond Snapping: Persistent, Tweakable Alignment and Distribution with StickyLines

Authors:

Marianela Ciolfi Felice,

Nolwenn Maudet,

Wendy E. Mackay,

Michel Beaudouin-LafonAuthors Info & Claims

UIST '16: Proceedings of the 29th Annual Symposium on User Interface Software and Technology

Pages 133 - 144

https://doi.org/10.1145/2984511.2984577

Published: 16 October 2016 Publication History

Abstract

Aligning and distributing graphical objects is a common, but cumbersome task. In a preliminary study (six graphic designers, six non-designers), we identified three key problems with current tools: lack of persistence, unpredictability of results, and inability to 'tweak' the layout. We created StickyLines, a tool that treats guidelines as first-class objects: Users can create precise, predictable and persistent interactive alignment and distribution relationships, and 'tweaked' positions can be maintained for subsequent interactions. We ran a [2x2] within-participant experiment to compare StickyLines with standard commands, with two levels of layout difficulty. StickyLines performed 40% faster and required 49% fewer actions than traditional alignment and distribution commands for complex layouts. In study three, six professional designers quickly adopted StickyLines and identified novel uses, including creating complex compound guidelines and using them for both spatial and semantic grouping.

Supplementary Material

ZIP File (uist4523-file5.zip)

Download
612.72 KB

suppl.mov (uist4523-file3.mp4)

Supplemental video

Download
16.12 MB

MP4 File (p133-felice.mp4)

Download
212.19 MB

References

[1]

Baudisch, P. The Cage: Efficient construction in 3D using a cubic adaptive grid. In Proceedings of the 9th Annual ACM Symposium on User Interface Software and Technology, UIST '96, ACM (1996), 171--172.

Digital Library

[2]

Beaudouin-Lafon, M. Instrumental interaction: An interaction model for designing post-WIMP user interfaces. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, CHI '00, ACM (2000), 446--453.

Digital Library

[3]

Beaudouin-Lafon, M. Designing interaction, not interfaces. In Proceedings of the Working Conference on Advanced Visual Interfaces, AVI '04, ACM (2004), 15--22.

Digital Library

[4]

Beaudouin-Lafon, M., and Lassen, H. M. The architecture and implementation of CPN2000, a post-WIMP graphical application. In Proceedings of the 13th Annual ACM Symposium on User Interface Software and Technology, UIST '00, ACM (2000), 181--190.

Digital Library

[5]

Beaudouin-Lafon, M., and Mackay, W. E. Reification, polymorphism and reuse: Three principles for designing visual interfaces. In Proceedings of the Working Conference on Advanced Visual Interfaces, AVI '00, ACM (2000), 102--109.

Digital Library

[6]

Bier, E. A., and Stone, M. C. Snap-dragging. SIGGRAPH Comput. Graph. 20, 4 (Aug. 1986), 233--240.

Digital Library

[7]

Chok, S. S., and Marriott, K. Automatic construction of intelligent diagram editors. In Proceedings of the 11th Annual ACM Symposium on User Interface Software and Technology, UIST '98, ACM (1998), 185--194.

Digital Library

[8]

Cook, T., and Campbell, D. Quasi-experimentation: design & analysis issues for field settings. Houghton Miffin, 1979.

[9]

Dwyer, T., Marriott, K., and Wybrow, M. Dunnart: A constraint-based network diagram authoring tool. In Graph Drawing, I. Tollis and M. Patrignani, Eds., vol. 5417 of Lecture Notes in Computer Science. Springer Berlin Heidelberg, 2009, 420--431.

Digital Library

[10]

Edge, D., Gulwani, S., Milic-Frayling, N., Raza, M., Adhitya Saputra, R., Wang, C., and Yatani, K. Mixed-initiative approaches to global editing in slideware. In Proceedings of the 33rd Annual ACM Conference on Human Factors in Computing Systems, CHI '15, ACM (2015), 3503--3512.

Digital Library

[11]

Fernquist, J., Shoemaker, G., and Booth, K. S. Oh Snap - helping users align digital objects on touch interfaces. In Proceedings of the 13th IFIP TC 13 International Conference on Human-computer Interaction - Volume Part III, INTERACT'11, Springer-Verlag (2011), 338--355.

Digital Library

[12]

Frisch, M., Langner, R., and Dachselt, R. Neat: A set of flexible tools and gestures for layout tasks on interactive displays. In Proceedings of the ACM International Conference on Interactive Tabletops and Surfaces, ITS '11, ACM (2011), 1--10.

Digital Library

[13]

Garcia, J., Tsandilas, T., Agon, C., and Mackay, W. E. Structured observation with polyphony: A multifaceted tool for studying music composition. In Proceedings of the 2014 Conference on Designing Interactive Systems, DIS '14, ACM (2014), 199--208.

Digital Library

[14]

Glaser, B. G., and Strauss, A. L. The Discovery of Grounded Theory: Strategies for Qualitative Research. Aldine de Gruyter, 1967.

[15]

Gleicher, M. Briar: A constraint-based drawing program. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, CHI '92, ACM (1992), 661--662.

Digital Library

[16]

Gleicher, M. Integrating constraints and direct manipulation. In Proceedings of the 1992 Symposium on Interactive 3D Graphics, I3D '92, ACM (1992), 171--174.

Digital Library

[17]

Igarashi, T., Matsuoka, S., Kawachiya, S., and Tanaka, H. Interactive beautification: A technique for rapid geometric design. In Proceedings of the 10th Annual ACM Symposium on User Interface Software and Technology, UIST '97, ACM (1997), 105--114.

Digital Library

[18]

Janecek, P., Ratzer, A. V., and Mackay, W. E. Redesigning design/cpn: Integrating interaction and petri nets in use. In Proceedings of Second Workshop on Practical Use of Coloured Petri Nets and Design/CPN,Aarhus, Denmark, Citeseer (1999), 119--131.

[19]

Kurlander, D., and Feiner, S. Inferring constraints from multiple snapshots. ACM Trans. Graph. 12, 4 (Oct. 1993), 277--304.

Digital Library

[20]

Mackay, W. E. Video artifacts for design: Bridging the gap between abstraction and detail. In Proceedings of DIS 2000, Designing Interactive Systems, ACM (August 2000), 72--82.

Digital Library

[21]

Mackay, W. E. Using video to support interaction design. In CHI '02 Extended Abstracts on Human Factors in Computing Systems, DVD Tutorial, CHI EA '02, ACM (2002).

[22]

Masui, T. HyperSnapping. In Proceedings of the IEEE 2001 Symposia on Human Centric Computing Languages and Environments (HCC'01), HCC '01, IEEE Computer Society (2001), 188--.

Digital Library

[23]

Nelson, G. Juno, a constraint-based graphics system. SIGGRAPH Comput. Graph. 19, 3 (July 1985), 235--243.

Digital Library

[24]

O'Donovan, P., Agarwala, A., and Hertzmann, A. DesignScape: Design with interactive layout suggestions. In Proceedings of the 33rd Annual ACM Conference on Human Factors in Computing Systems, CHI '15, ACM (2015), 1221--1224.

Digital Library

[25]

Raisamo, R. An alternative way of drawing. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, CHI '99, ACM (1999), 175--182.

Digital Library

[26]

Ryall, K., Marks, J., and Shieber, S. An interactive constraint-based system for drawing graphs. In Proceedings of the 10th Annual ACM Symposium on User Interface Software and Technology, UIST '97, ACM (1997), 97--104.

Digital Library

[27]

Sutherland, I. E. Sketch Pad: a man-machine graphical communication system. In Proceedings of the SHARE Design Automation Workshop, DAC '64, ACM (1964), 6.329--6.346.

Digital Library

[28]

Van Wyk, C. J. A high-level language for specifying pictures. ACM Trans. Graph. 1, 2 (Apr. 1982), 163--182.

Digital Library

[29]

Wigdor, D., Benko, H., Pella, J., Lombardo, J., and Williams, S. Rock & Rails: Extending multi-touch interactions with shape gestures to enable precise spatial manipulations. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, CHI '11, ACM (2011), 1581--1590.

Digital Library

[30]

Wybrow, M., Marriott, K., Mciver, L., and Stuckey, P. J. Comparing usability of one-way and multi-way constraints for diagram editing. TOCHI 14, 4 (Jan. 2008), 19:1--19:38.

Digital Library

[31]

Xia, H., Araujo, B., Grossman, T., and Wigdor, D. Object-oriented drawing. In Proceedings of the 2016 CHI Conference on Human Factors in Computing Systems, CHI '16, ACM (New York, NY, USA, 2016), 4610--4621.

Digital Library

[32]

Xu, P., Fu, H., Igarashi, T., and Tai, C.-L. Global beautification of layouts with interactive ambiguity resolution. In Proceedings of the 27th Annual ACM Symposium on User Interface Software and Technology, UIST '14, ACM (2014), 243--252.

Digital Library

[33]

Xu, P., Fu, H., Tai, C.-L., and Igarashi, T. GACA: Group-aware command-based arrangement of graphic elements. In Proceedings of the 33rd Annual ACM Conference on Human Factors in Computing Systems, CHI '15, ACM (2015), 2787--2795.

Digital Library

[34]

Zeleznik, R., Bragdon, A., chi Liu, C., and Forsberg, A. Lineogrammer: creating diagrams by drawing. In In UIST '08: Proceedings of the 21st annual ACM symposium on User interface software and technology (2008), 161--170.

Digital Library

Cited By

Pollock JMei CHuang GEvans EJackson DSatyanarayan A(2024)Bluefish: Composing Diagrams with Declarative RelationsProceedings of the 37th Annual ACM Symposium on User Interface Software and Technology10.1145/3654777.3676465(1-21)Online publication date: 13-Oct-2024
https://dl.acm.org/doi/10.1145/3654777.3676465
Offenwanger ATsandilas TChevalier F(2024)DataGarden: Formalizing Personal Sketches into Structured Visualization TemplatesIEEE Transactions on Visualization and Computer Graphics10.1109/TVCG.2024.345633631:1(1268-1278)Online publication date: 10-Sep-2024
https://dl.acm.org/doi/10.1109/TVCG.2024.3456336
Mackay WMackay W(2023)Réimaginer nos interactions avec le monde numériqueRéimaginer nos interactions avec le monde numérique10.4000/books.cdf.14422Online publication date: 12-Jan-2023
https://doi.org/10.4000/books.cdf.14422
Show More Cited By

Index Terms

Beyond Snapping: Persistent, Tweakable Alignment and Distribution with StickyLines
1. Human-centered computing
  1. Human computer interaction (HCI)

Recommendations

Global beautification of layouts with interactive ambiguity resolution
UIST '14: Proceedings of the 27th annual ACM symposium on User interface software and technology

Automatic 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 ...
Design of a shape dependent snapping algorithm
CHI EA '12: CHI '12 Extended Abstracts on Human Factors in Computing Systems

Many layout design applications support snapping functionalities to help users align objects precisely. Currently, the center location of the object's bounding box is used for aligning the object. Users, however, may not perceive the bounding box center ...
SnapPaste: an interactive technique for easy mesh composition

Editing and manipulation of existing 3D geometric objects are a means to extend their repertoire and promote their availability. Traditionally, tools to compose or manipulate objects defined by 3D meshes are in the realm of artists and experts. In this ...

Comments

Information & Contributors

Information

Published In

cover image ACM Conferences

UIST '16: Proceedings of the 29th Annual Symposium on User Interface Software and Technology

October 2016

908 pages

ISBN:9781450341899

DOI:10.1145/2984511

General Chairs:
Jun Rekimoto
The University of Tokyo
,
Takeo Igarashi
The University of Tokyo
,
Program Chairs:
Jacob O. Wobbrock
University of Washington
,
Daniel Avrahami
FXPAL

Copyright © 2016 ACM.

Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. Copyrights for components of this work owned by others than the author(s) must be honored. Abstracting with credit is permitted. To copy otherwise, or republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee. Request permissions from [email protected].

Sponsors

Publisher

Association for Computing Machinery

New York, NY, United States

Publication History

Published: 16 October 2016

Permissions

Request permissions for this article.

Request Permissions

Check for updates

Author Tags

Qualifiers

Research-article

Funding Sources

European Research Council

Conference

UIST '16

Sponsor:

UIST '16: The 29th Annual ACM Symposium on User Interface Software and Technology

October 16 - 19, 2016

Tokyo, Japan

Acceptance Rates

UIST '16 Paper Acceptance Rate 79 of 384 submissions, 21%;

Overall Acceptance Rate 561 of 2,567 submissions, 22%

Upcoming Conference

UIST '25

Sponsor:
sigchi
sigchi

The 38th Annual ACM Symposium on User Interface Software and Technology

September 28 - October 1, 2025

Busan , Republic of Korea

Contributors

Other Metrics

View Article Metrics

Bibliometrics & Citations

Bibliometrics

Article Metrics

25
Total Citations
View Citations
695
Total Downloads

Downloads (Last 12 months)72
Downloads (Last 6 weeks)5

Reflects downloads up to 25 Jan 2025

Other Metrics

View Author Metrics

Citations

Cited By

Pollock JMei CHuang GEvans EJackson DSatyanarayan A(2024)Bluefish: Composing Diagrams with Declarative RelationsProceedings of the 37th Annual ACM Symposium on User Interface Software and Technology10.1145/3654777.3676465(1-21)Online publication date: 13-Oct-2024
https://dl.acm.org/doi/10.1145/3654777.3676465
Offenwanger ATsandilas TChevalier F(2024)DataGarden: Formalizing Personal Sketches into Structured Visualization TemplatesIEEE Transactions on Visualization and Computer Graphics10.1109/TVCG.2024.345633631:1(1268-1278)Online publication date: 10-Sep-2024
https://dl.acm.org/doi/10.1109/TVCG.2024.3456336
Mackay WMackay W(2023)Réimaginer nos interactions avec le monde numériqueRéimaginer nos interactions avec le monde numérique10.4000/books.cdf.14422Online publication date: 12-Jan-2023
https://doi.org/10.4000/books.cdf.14422
Sun JDeng LAfouras TOwens ADavis A(2023)Eventfulness for Interactive Video AlignmentACM Transactions on Graphics10.1145/359211842:4(1-10)Online publication date: 26-Jul-2023
https://dl.acm.org/doi/10.1145/3592118
Kim TLee YChang MKim J(2023)Cells, Generators, and Lenses: Design Framework for Object-Oriented Interaction with Large Language ModelsProceedings of the 36th Annual ACM Symposium on User Interface Software and Technology10.1145/3586183.3606833(1-18)Online publication date: 29-Oct-2023
https://dl.acm.org/doi/10.1145/3586183.3606833
Beaudouin-Lafon M(2023)Beyond Applications: Interaction Substrates and InstrumentsProceedings of the 34th Conference on l'Interaction Humain-Machine10.1145/3583961.3583968(1-15)Online publication date: 3-Apr-2023
https://dl.acm.org/doi/10.1145/3583961.3583968
Hashim SHöllerer TJacobs J(2023)Drawing Transforms: A Unifying Interaction Primitive to Procedurally Manipulate Graphics across Style, Space, and TimeProceedings of the 2023 CHI Conference on Human Factors in Computing Systems10.1145/3544548.3580642(1-15)Online publication date: 19-Apr-2023
https://dl.acm.org/doi/10.1145/3544548.3580642
Sahel WMackay WMarot A(2023)Creating StoryLines: Participatory Design with Power Grid OperatorsComputer-Human Interaction Research and Applications10.1007/978-3-031-49368-3_13(212-230)Online publication date: 23-Dec-2023
https://doi.org/10.1007/978-3-031-49368-3_13
Shi RZhang JStuerzlinger WLiang H(2022)Group-based Object Alignment in Virtual Reality EnvironmentsProceedings of the 2022 ACM Symposium on Spatial User Interaction10.1145/3565970.3567682(1-11)Online publication date: 1-Dec-2022
https://dl.acm.org/doi/10.1145/3565970.3567682
Aziz FCreed CSarcar SFrutos-Pascual MWilliams I(2022)Voice Snapping: Inclusive Speech Interaction Techniques for Creative Object ManipulationProceedings of the 2022 ACM Designing Interactive Systems Conference10.1145/3532106.3533452(1486-1496)Online publication date: 13-Jun-2022
https://dl.acm.org/doi/10.1145/3532106.3533452
Show More Cited By

View Options

Login options

Check if you have access through your login credentials or your institution to get full access on this article.

Full Access

Get this Publication

View options

PDF

View or Download as a PDF file.

eReader

View online with eReader.

Figures

Tables

Media

View Table of Conten