Using Semi-Automatic Layout to Improve the Usability of Diagramming Software
Total Page：16
File Type：pdf, Size：1020Kb
Using semi-automatic layout to improve the usability of diagramming software by Michael Wybrow, BCompSc (Hons) Thesis Submitted by Michael Wybrow for fulfillment of the Requirements for the Degree of Doctor of Philosophy (0190) Supervisor: Prof. Kim Marriott Associate Supervisor: Prof. Peter J. Stuckey Associate Supervisor: Dr Linda McIver Associate Supervisor: Dr Tim Dwyer Clayton School of Information Technology Monash University June, 2008 c Copyright by Michael Wybrow 2008 For Chelsea. iii Contents Abstract ......................................... vii Acknowledgments ................................... x 1 Introduction .................................... 1 1.1 Taxonomy of information graphics ....................... 3 1.2 Layout of diagrams ................................ 6 1.3 Authoring software ................................ 10 1.4 Contributions ................................... 13 1.5 Research methodology .............................. 15 1.6 Thesis overview .................................. 16 2 Background ..................................... 19 2.1 Introduction .................................... 19 2.2 Human-Computer Interaction and software usability ............. 21 2.2.1 Principles of user interface design .................... 21 2.2.2 Cognitive Dimensions .......................... 23 2.3 Research history of constraints in diagram editors ............... 25 2.3.1 Sketchpad ................................. 25 2.3.2 METAFONT, IDEAL and COOL: Text-based systems ........ 27 2.3.3 Chimera, Pegasus and Penguins: Constraint inference ........ 28 2.3.4 Juno and Juno-2: Double-view editing ................. 29 2.3.5 Briar .................................... 31 2.3.6 Broom alignment metaphor ....................... 32 2.3.7 GLIDE .................................. 32 2.4 Diagram editors in practice ........................... 34 2.4.1 Once-off placement tools ......................... 34 2.4.2 Manual placement with dynamic guides ................ 35 2.4.3 Semi-persistent placement with one-way constraints ......... 36 2.4.4 Persistent placement with multi-way constraints ........... 38 2.4.5 Automatic connector routing ...................... 38 2.4.6 Clusters .................................. 40 2.4.7 Automatic network layout ........................ 41 2.4.8 Non-overlap of shapes .......................... 43 iv 2.4.9 Immediate feedback ........................... 43 2.5 Conclusions .................................... 44 3 Alignment and distribution ........................... 47 3.1 Introduction .................................... 47 3.2 Background .................................... 48 3.2.1 One-way alignment and distribution .................. 48 3.3 Visio and multi-way constraint-based placement tools ............ 52 3.3.1 Software tool architecture ........................ 52 3.4 Study 1: One-way versus multi-way ....................... 55 3.4.1 Method .................................. 56 3.4.2 Results .................................. 59 3.5 Conclusions .................................... 66 4 Dunnart and revised placement tools ..................... 69 4.1 Introduction .................................... 69 4.2 Dunnart ...................................... 71 4.2.1 Software tool design ........................... 71 4.3 Study 2: Revised one-way vs. multi-way, feedback level ........... 76 4.3.1 Method .................................. 76 4.3.2 Results .................................. 81 4.3.3 Discussion ................................. 86 4.4 Constraint clutter and comprehension ..................... 88 4.4.1 Dunnart revisions ............................ 88 4.5 Study 3: Constraint clutter and comprehension ................ 91 4.5.1 Method .................................. 91 4.5.2 Results and discussion .......................... 93 4.6 Conclusions .................................... 96 5 Connector routing ................................. 99 5.1 Introduction .................................... 99 5.2 Background .................................... 101 5.3 Incremental Poly-line Connector Routing ................... 102 5.3.1 Algorithms ................................ 102 5.3.2 Evaluation ................................ 110 5.4 libavoid: Connector routing library ...................... 112 5.4.1 libavoid interface ............................ 112 5.4.2 Inkscape integration ........................... 115 5.4.3 Feedback ................................. 116 5.5 Improved connector routing ........................... 117 5.5.1 Capturing additional routing aesthetics ................ 117 5.5.2 Nudging shared paths .......................... 121 5.5.3 Approximating curved connectors .................... 122 v 5.5.4 Containment and cluster routing .................... 122 5.6 Conclusions .................................... 123 6 Interactive network layout ........................... 125 6.1 Introduction .................................... 125 6.2 Background .................................... 127 6.3 Continuous network layout ........................... 129 6.3.1 IPSep-CoLa: Constrained stress majorization ............ 133 6.3.2 Architecture ............................... 134 6.3.3 User interaction ............................. 136 6.3.4 Edge straightening for topology preservation ............. 137 6.4 User-specified placement constraints ...................... 139 6.4.1 Anchoring ................................. 140 6.4.2 Separations ................................ 141 6.5 Stylistic constraints ................................ 141 6.5.1 Non-overlap ................................ 143 6.5.2 Page containment ............................ 143 6.5.3 Downward pointing connectors ..................... 146 6.6 Structural layout styles ............................. 146 6.7 Showing constraint status ............................ 148 6.7.1 Future work ................................ 150 6.8 Discussion and case studies ........................... 151 6.8.1 General observations and discussion .................. 152 6.8.2 Case study: Biological networks .................... 153 6.8.3 Case study: UML diagrams ....................... 158 6.8.4 Case study: Protein topology diagrams ................ 162 6.9 Conclusions .................................... 166 7 Conclusions ..................................... 167 7.1 Constraint usage in diagram editors ...................... 167 7.2 Placement tools in Visio ............................. 168 7.3 Placement tools in Dunnart ........................... 168 7.4 Connector routing ................................ 169 7.5 Interactive network layout ............................ 169 7.6 Dunnart constraint-based diagram editor ................... 170 7.7 Future directions ................................. 170 7.8 Closing remarks .................................. 172 Vita ............................................ 173 References ........................................ 175 vi Using semi-automatic layout to improve the usability of diagramming software Michael Wybrow, BCompSc (Hons) [email protected] Monash University, 2008 Supervisor: Prof. Kim Marriott [email protected] Associate Supervisor: Prof. Peter J. Stuckey [email protected] Associate Supervisor: Dr Linda McIver [email protected] Associate Supervisor: Dr Tim Dwyer [email protected] Abstract Diagrams are a useful way to efficiently convey abstract information. They are invalu- able in fields such as software engineering, social network analysis, and bioinformatics. Layout is an important aspect of diagram creation, impacting heavily on readability. Good diagram layout is difficult because it encompasses both a user’s aesthetic preferences as well as drawing conventions for particular styles of diagrams. Diagram authoring software provides some layout tools but these usually perform a once-off change. As such, the author of the diagram handles the majority of diagram layout manually. This thesis presents persistent layout tools for user-specified placement, connector routing and automatic network layout. These tools are implemented using constraint solvers that maintain spatial relationships throughout further editing. The tools have been designed to be highly usable, with focus on their behaviour, interface and user interaction. Constraint-based placement tools are evaluated at several stages of design via usabil- ity experiments as well as informal feedback from users. The constraint-based approach is found to be more usable than existing layout tools, offering the user valuable layout assistance without depriving them of flexibility. A fast incremental connector routing technique is demonstrated. It maintains optimal connector routes, providing more predictable behaviour than existing approaches. We show its versatility via extensions to produce routings fulfilling various desired aesthetic criteria. A new model for interactive network layout is presented, where the user and the system collaborate to produce better layouts. The user has a large amount of control over the layout through the use of structural styles, placement tools and stylistic constraints; the responsibility for all of which are delegated to the system to maintain. vii All of the presented techniques are fully implemented in Dunnart, a truly usable constraint-based diagram editor. Dunnart features user-specifiable placement tools, in- cremental connector routing, and continuous network layout, all of which can be directed by the user, to help produce better diagram layouts.