Programming by Manipulation for Layout

Thibaud Hottelier, Ras Bodik and Kimiko Ryokai

EECS Department
University of California, Berkeley
Technical Report No. UCB/EECS-2014-161
August 25, 2014

http://www2.eecs.berkeley.edu/Pubs/TechRpts/2014/EECS-2014-161.pdf

We present Programming by Manipulation, a new programming methodology for specifying the layout of data visualizations, targeted at non-programmers. We address the two central sources of bugs that arise when programming with constraints: ambiguities and conflicts (inconsistencies). We rule out conflicts by design and exploit ambiguity to explore possible layout designs. Our users design layouts by highlighting undesirable aspects of a current design, effectively breaking spurious constraints and introducing ambiguity by giving some elements freedom to move or resize. Subsequently, the tool indicates how the ambiguity can be removed, by computing how the free elements can be fixed with available constraints. To support this workflow, our tool computes the ambiguity and summarizes it visually. We evaluate our work with two user-studies demonstrating that both non-programmers and programmers can effectively use our prototype. Our results suggest that our tool is 5-times more productive than direct programming with constraints.


BibTeX citation:

@techreport{Hottelier:EECS-2014-161,
    Author = {Hottelier, Thibaud and Bodik, Ras and Ryokai, Kimiko},
    Title = {Programming by Manipulation for Layout},
    Institution = {EECS Department, University of California, Berkeley},
    Year = {2014},
    Month = {Aug},
    URL = {http://www2.eecs.berkeley.edu/Pubs/TechRpts/2014/EECS-2014-161.html},
    Number = {UCB/EECS-2014-161},
    Abstract = {We present Programming by Manipulation, a new programming methodology for specifying the layout of data visualizations, targeted at non-programmers. We address the two central sources of bugs that arise when programming with constraints: ambiguities and conflicts (inconsistencies). We rule out conflicts by design and exploit ambiguity to explore possible layout designs. Our users design layouts by highlighting undesirable aspects of a current design, effectively breaking spurious constraints and introducing ambiguity by giving some elements freedom to move or resize. Subsequently, the tool indicates how the ambiguity can be removed, by computing how the free elements can be fixed with available constraints. To support this workflow, our tool computes the ambiguity and summarizes it visually.  We evaluate our work with two user-studies demonstrating that both non-programmers and programmers can effectively use our prototype. Our results suggest that our tool is 5-times more productive than direct programming with constraints.}
}

EndNote citation:

%0 Report
%A Hottelier, Thibaud
%A Bodik, Ras
%A Ryokai, Kimiko
%T Programming by Manipulation for Layout
%I EECS Department, University of California, Berkeley
%D 2014
%8 August 25
%@ UCB/EECS-2014-161
%U http://www2.eecs.berkeley.edu/Pubs/TechRpts/2014/EECS-2014-161.html
%F Hottelier:EECS-2014-161