research-article

MACE: A New Interface for Comparing and Editing of Multiple Alternative Documents for Generative Design

Authors:

Loutfouz Zaman,

Wolfgang Stuerzlinger,

Christian NeugebauerAuthors Info & Claims

DocEng '17: Proceedings of the 2017 ACM Symposium on Document Engineering

Pages 67 - 76

https://doi.org/10.1145/3103010.3103013

Published: 31 August 2017 Publication History

Abstract

We present a new interface for interactive comparisons of more than two alternative documents in the context of a generative design system that uses generative data-flow networks defined via directed acyclic graphs. To better show differences between such networks, we emphasize added, deleted, (un)changed nodes and edges. We emphasize differences in the output as well as parameters using highlighting and enable post-hoc merging of the state of a parameter across a selected set of alternatives. To minimize visual clutter, we introduce new difference visualizations for selected nodes and alternatives using additive and subtractive encodings, which improve readability and keep visual clutter low. We analyzed similarities in networks from a set of alternative designs produced by architecture students and found that the number of similarities outweighs the differences, which motivates use of subtractive encoding. We ran a user study to evaluate the two main proposed difference visualization encodings and found that they are equally effective.

Supplementary Material

ZIP File (doceng09.mov.zip)

This video demonstrates the procedure of the user study evaluating additive and subtractive encoding

Download
38.19 MB

References

[1]

Alper, B., Bach, B., Henry Riche, N., Isenberg, T. and Fekete, J.-D. 2013. Weighted Graph Comparison Techniques for Brain Connectivity Analysis. Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (New York, NY, USA, 2013), 483--492.

Digital Library

[2]

Andrews, K., Wohlfahrt, M. and Wurzinger, G. 2009. Visual Graph Comparison. Information Visualisation, 2009 13th International Conference (Jul. 2009), 62--67.

Digital Library

[3]

Archambault, D. 2009. Structural differences between two graphs through hierarchies. Graphics Interface 2009 (Kelowna, British Columbia, Canada, 2009), 87--94.

[4]

Archambault, D., Purchase, H. and Pinaud, B. 2011. Animation, Small Multiples, and the Effect of Mental Map Preservation in Dynamic Graphs. IEEE Transactions on Visualization and Computer Graphics. 17, 4 (Apr. 2011), 539--552.

Digital Library

[5]

Archambault, D., Purchase, H.C. and Pinaud, B. 2011. Difference Map Readability for Dynamic Graphs. Graph Drawing. U. Brandes and S. Cornelsen, eds. Springer Berlin Heidelberg. 50--61.

[6]

Bach, B., Pietriga, E. and Fekete, J.-D. 2014. GraphDiaries: Animated Transitions and Temporal Navigation for Dynamic Networks. IEEE Transactions on Visualization and Computer Graphics. 20, 5 (May 2014), 740--754.

Digital Library

[7]

Bohnacker, H. 2012. Generative Design: Visualize, Program, and Create with Processing. Princeton Architectural Press.

Digital Library

[8]

Dadgari, D. and Stuerzlinger, W. 2010. Novel User Interfaces for Diagram Versioning and Differencing. British HCI (2010).

[9]

Förtsch, S. and Westfechtel, B. 2007. Differencing and Merging of Software Diagrams - State of the Art and Challenges. ICSOFT (SE) (2007), 90--99.

[10]

Girschick, M. 2006. Difference Detection and Visualization in UML Class Diagrams. TU Darmstadt.

[11]

Gleicher, M., Albers, D., Walker, R., Jusufi, I., Hansen, C.D. and Roberts, J.C. 2011. Visual comparison for information visualization. Information Visualization. 10, 4 (Oct. 2011), 289--309.

Digital Library

[12]

Graham, M. and Kennedy, J. 2010. A survey of multiple tree visualisation. Information Visualization. 9, 4 (Dec. 2010), 235--252.

Digital Library

[13]

Graham, M. and Kennedy, J. 2007. Exploring multiple trees through DAG representations. IEEE transactions on visualization and computer graphics. 13, 6 (Dec. 2007), 1294--1301.

Digital Library

[14]

Guerra Gómez, J.A. Exploring Differences in Multivariate Datasets Using Hierarchies: An Interactive Information Visualization Approach. University of Maryland.

[15]

Guerra-Gómez, J.A., Buck-coleman, A., Pack, M.L., Plaisant, C. and Shneiderman, B. 2013. TreeVersity: Interactive Visualizations for Comparing Hierarchical Datasets. Transportation Research Record (TRR), Journal of the Transportation Research Board (2013). (2013), 21.

[16]

Guerra-Gómez, J.A., Buck-Coleman, A., Plaisant, C. and Shneiderman, B. 2011. TreeVersity: Comparing tree structures by topology and node's attributes differences. 2011 IEEE Conference on Visual Analytics Science and Technology (VAST) (Oct. 2011), 275--276.

[17]

Guerra-Gómez, J.A., Buck-coleman, A., Plaisant, C. and Shneiderman, B. 2012. TreeVersity: Visualizing Hierarchal Data for Value with Topology Changes. Proceedings of the Digital Research Society 2012. 2, (Jul. 2012), 640--653.

[18]

Guerra-Gómez, J.A., Pack, M.L., Plaisant, C. and Shneiderman, B. 2013. Discovering temporal changes in hierarchical transportation data: Visual analytic & text reporting tools. Transportation Research Part C: Emerging Technologies. 51, (2013), 167--179.

[19]

Guerra-Gómez, J.A., Pack, M.L., Plaisant, C. and Shneiderman, B. 2013. Visualizing Change over Time Using Dynamic Hierarchies: TreeVersity2 and the StemView. IEEE Transactions on Visualization and Computer Graphics. 19, 12 (2013), 2566--2575.

Digital Library

[20]

Hong, J.Y., D'Andries, J., Richman, M. and Westfall, M. 2003. Zoomology: Comparing Two Large Hierarchical Trees. Poster at Compendium of InfoVis 2003. (2003), 120--121.

[21]

Isenberg, P. and Carpendale, S. 2007. Interactive Tree Comparison for Co-located Collaborative Information Visualization. IEEE Transactions on Visualization and Computer Graphics. 13, 6 (Nov. 2007), 1232--1239.

Digital Library

[22]

Lee, B., Robertson, G.G., Czerwinski, M. and Parr, C.S. 2007. CandidTree: Visualizing Structural Uncertainty in Similar Hierarchies. Human-Computer Interaction -- INTERACT 2007. C. Baranauskas, P. Palanque, J. Abascal, and S.D.J. Barbosa, eds. Springer Berlin Heidelberg. 250--263.

[23]

Lunzer, A. and Hornbæk, K. 2008. Subjunctive Interfaces: Extending Applications to Support Parallel Setup, Viewing and Control of Alternative Scenarios. ACM TOCHI. 14, 4 (Jan. 2008), 17:1--17:44.

Digital Library

[24]

Marks, J., Andalman, B., Beardsley, P.A., Freeman, W., Gibson, S., Hodgins, J., Kang, T., Mirtich, B., Pfister, H., Ruml, W., Ryall, K., Seims, J. and Shieber, S. 1997. Design galleries: a general approach to setting parameters for computer graphics and animation. SIGGRAPH '97 (New York, NY, USA, 1997), 389--400.

Digital Library

[25]

Mehra, A., Grundy, J. and Hosking, J. 2005. A generic approach to supporting diagram differencing and merging for collaborative design. ASE 2005 (Long Beach, CA, USA, 2005), 204--213.

Digital Library

[26]

Munzner, T., Guimbretière, F., Tasiran, S., Zhang, L. and Zhou, Y. 2003. TreeJuxtaposer: scalable tree comparison using Focus+Context with guaranteed visibility. SIGGRAPH 2003. 22, 3 (2003), 453--462.

Digital Library

[27]

Namata, G.M., Staats, B., Getoor, L. and Shneiderman, B. 2007. A dual-view approach to interactive network visualization. CIKM 2007 (Lisbon, Portugal, 2007), 939--942.

Digital Library

[28]

Ohst, D., Welle, M. and Kelter, U. 2003. Differences between versions of UML diagrams. ACM SIGSOFT Software Engineering Notes. 28, 5 (Sep. 2003), 227--236.

Digital Library

[29]

Rufiange, S. and McGuffin, M.J. 2013. DiffAni: Visualizing Dynamic Graphs with a Hybrid of Difference Maps and Animation. IEEE Transactions on Visualization and Computer Graphics. 19, 12 (Dec. 2013), 2556--2565.

Digital Library

[30]

Shireen, N., Erhan, H., Botta, D. and Woodbury, R. 2012. Parallel development of parametric design models using subjunctive dependency graphs. ACADIA 2012 (San Francisco, CA, USA, Oct. 2012), 57--66.

[31]

Terry, M., Mynatt, E.D., Nakakoji, K. and Yamamoto, Y. 2004. Variation in element and action: supporting simultaneous development of alternative solutions. CHI 2004 (New York, NY, USA, 2004), 711--718.

Digital Library

[32]

Woodbury, R. 2010. Elements of Parametric Design. Routledge.

[33]

Zaman, L. 2015. User Interfaces and Difference Visualizations for Alternatives. York University.

[34]

Zaman, L., Kalra, A. and Stuerzlinger, W. 2011. DARLS: differencing and merging diagrams using dual view, animation, re-layout, layers and a storyboard. CHI 2011 Extended Abstracts (Vancouver, BC, Canada, 2011), 1657--1662.

Digital Library

[35]

Zaman, L., Kalra, A. and Stuerzlinger, W. 2011. The effect of animation, dual view, difference layers, and relative re-layout in hierarchical diagram differencing. Graphics Interface 2011 (St. John's, Newfoundland, Canada, 2011), 183--190.

[36]

Zaman, L., Stuerzlinger, W., Neugebauer, C., Woodbury, R., Maher, E., Shireen, N. and Terry, M. 2015. GEM-NI: A System For Creating and Managing Alternatives In Generative Design. CHI 2015 (Seoul, Korea, 2015).

Digital Library

Cited By

Hossain MZaman L(2022)NCAlt: Alternatives and Difference Visualizations for Behavior Trees in Game Development LearningProceedings of the ACM on Human-Computer Interaction10.1145/35495086:CHI PLAY(1-31)Online publication date: 31-Oct-2022
https://dl.acm.org/doi/10.1145/3549508
Hossain MZaman L(2022)NCCollab: collaborative behavior tree authoring in game developmentMultimedia Tools and Applications10.1007/s11042-022-12307-282:3(4671-4708)Online publication date: 13-Apr-2022
https://doi.org/10.1007/s11042-022-12307-2
LYi SJo JSeo J(2021)Comparative Layouts Revisited: Design Space, Guidelines, and Future DirectionsIEEE Transactions on Visualization and Computer Graphics10.1109/TVCG.2020.303041927:2(1525-1535)Online publication date: Feb-2021
https://doi.org/10.1109/TVCG.2020.3030419
Show More Cited By

Index Terms

MACE: A New Interface for Comparing and Editing of Multiple Alternative Documents for Generative Design
1. Human-centered computing
  1. Human computer interaction (HCI)
    1. Interaction paradigms
      1. Graphical user interfaces

Recommendations

GEM-NI: A System for Creating and Managing Alternatives In Generative Design
CHI '15: Proceedings of the 33rd Annual ACM Conference on Human Factors in Computing Systems

We present GEM-NI -- a graph-based generative-design tool that supports parallel exploration of alternative designs. Producing alternatives is a key feature of creative work, yet it is not strongly supported in most extant tools. GEM-NI enables various ...
GEM-NI+: Leveraging Difference Visualization and Multiple Displays for Supporting Multiple Complex Generative Design Alternatives
CHI EA '18: Extended Abstracts of the 2018 CHI Conference on Human Factors in Computing Systems

In the conceptual design phase, designers routinely generate dozens of alternatives based on a single idea. This is especially relevant in generative design where an algorithm can generate a large number of viable design options. While solutions for ...
Random Methods for Fast Exploration of the Raw Video Material
DEXA '09: Proceedings of the 2009 20th International Workshop on Database and Expert Systems Application

In this work we propose a visualization and access method for exploring a database of raw video material, where the span of information stored can be huge and difficult to understand at a glance. Developed visual mining tool presents the overview of the ...

Comments

Information & Contributors

Information

Published In

cover image ACM Conferences

DocEng '17: Proceedings of the 2017 ACM Symposium on Document Engineering

August 2017

242 pages

ISBN:9781450346894

DOI:10.1145/3103010

General Chair:
Kenneth Camilleri
University of Malta, Malta
,
Program Chair:
Alexandra Bonnici
University of Malta, Malta

Copyright © 2017 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 ACM 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

SIGWEB: ACM Special Interest Group on Hypertext, Hypermedia, and Web

In-Cooperation

SIGDOC: ACM Special Interest Group on Systems Documentation

Publisher

Association for Computing Machinery

New York, NY, United States

Publication History

Published: 31 August 2017

Permissions

Request permissions for this article.

Request Permissions

Check for updates

Author Tags

Qualifiers

Research-article

Conference

DocEng '17

Sponsor:

SIGWEB

DocEng '17: ACM Symposium on Document Engineering 2017

September 4 - 7, 2017

Valletta, Malta

Acceptance Rates

DocEng '17 Paper Acceptance Rate 13 of 71 submissions, 18%;

Overall Acceptance Rate 178 of 537 submissions, 33%

Contributors

Other Metrics

View Article Metrics

Bibliometrics & Citations

Bibliometrics

Article Metrics

6
Total Citations
View Citations
139
Total Downloads

Downloads (Last 12 months)1
Downloads (Last 6 weeks)0

Reflects downloads up to 30 Aug 2024

Other Metrics

View Author Metrics

Citations

Cited By

Hossain MZaman L(2022)NCAlt: Alternatives and Difference Visualizations for Behavior Trees in Game Development LearningProceedings of the ACM on Human-Computer Interaction10.1145/35495086:CHI PLAY(1-31)Online publication date: 31-Oct-2022
https://dl.acm.org/doi/10.1145/3549508
Hossain MZaman L(2022)NCCollab: collaborative behavior tree authoring in game developmentMultimedia Tools and Applications10.1007/s11042-022-12307-282:3(4671-4708)Online publication date: 13-Apr-2022
https://doi.org/10.1007/s11042-022-12307-2
LYi SJo JSeo J(2021)Comparative Layouts Revisited: Design Space, Guidelines, and Future DirectionsIEEE Transactions on Visualization and Computer Graphics10.1109/TVCG.2020.303041927:2(1525-1535)Online publication date: Feb-2021
https://doi.org/10.1109/TVCG.2020.3030419
Chu EZaman L(2021)Exploring alternatives with Unreal Engine’s Blueprints Visual Scripting SystemEntertainment Computing10.1016/j.entcom.2020.10038836(100388)Online publication date: Jan-2021
https://doi.org/10.1016/j.entcom.2020.100388
MacCormick DZaman LDeterding SKhosmood FPirker JApperley T(2019)SuBViSProceedings of the 14th International Conference on the Foundations of Digital Games10.1145/3337722.3337740(1-11)Online publication date: 26-Aug-2019
https://dl.acm.org/doi/10.1145/3337722.3337740
Zaman LNeugebauer CStuerzlinger WWoodbury RMandryk RHancock MPerry MCox A(2018)GEM-NI+Extended Abstracts of the 2018 CHI Conference on Human Factors in Computing Systems10.1145/3170427.3188593(1-6)Online publication date: 20-Apr-2018
https://dl.acm.org/doi/10.1145/3170427.3188593

View Options

Get Access

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.

Media

Figures

Other

Tables

View Table of Contents