GRIDS: Interactive Layout Design with Integer Programming
Presented at ACM CHI 2020.
Authors: Niraj Dayama*, Kashyap Todi*, Taru Saarelainen, Antti Oulasvirta
(*Authors contributed equally)
Abstract: GRIDS presents a complete formulation of the grid layout problem for GUIs, encapsulating key objectives such as alignment between elements, rectangularity of the overall composition, and preferential placement of certain elements. A mixed integer linear programming (MILP) model can efficiently generate several solutions that guarantee layout qualities and are systematically diverse from each other. In addition to supporting exploration, it can auto-complete partial designs, and search within constrained design spaces. The mixed-initiative GRIDS design tool implements these features, and assists designers by generating real-time interface design suggestions. The open-source framework will soon be available online.
4. DESIGN SOLUTIONS
some text
A paragraph of
some text
Header
Footer
Input Design Task
Footer
Header
A paragraph of
some text
some text
MixedInteger
LinearProgram
(MILP)
some text
A paragraph of
some text
Header
Footer
some text
Header
Footer
A paragraph of
some text
6. MIXED-INITIATIVE DESIGN
DesignScape [CHI
Local
Optimiser
Global
Optimiser
Current Design
Design Space
+
Canvas
TimelineExplore
Predictive
Models
Heading goes hereHeading goes here
Heading goes here
Heading goes here
Real-time Optimisation Design Environment
ence
o
.edu
Adobe Research
Seattle, WA, USA
asagarwa@adobe.com
Adobe Research
San Francisco, CA, USA
hertzman@adobe.com
allenging for novice users.
a system which aids the
ve layout suggestions, i.e.,
d alignment of elements.
complementary types of
s, which improve the cur-
gestions, which change the
s for interacting with sug-
stive interface, where sug-
accepted. Second, we de-
elements move automati-
mpare both interfaces with
d show that for novice de-
gnificantly better layouts,
ces, adaptive design
ign Tools and Techniques
Figure 1. DesignScape Interface. The central canvas allows the user to
create layouts in a simple editor. On the left, the system provides refine-
ment suggestions, layouts similar to the canvas, but slightly improved.
On the right, the system provides brainstorming suggestions large-scale
layout changes in a variety of styles. Photos courtesy of Wilhelm Joys
Andersen and Martin Fisch.
tasks in design. However, exploration is difficult since a de-
signer must imagine possible layouts, and modify many ele-
ments. Refinement is also difficult, since a single modifica-
tion can necessitate many other changes. Our system includes
both types, allowing users to easily switch between exploring
alternative layouts and refining the current layout.
DesignScape [O’ Donovan et al., CHI ’15]
Sketchplore [Todi et al., DIS ’16]
42. Header
Footer
Heading goes here
www.firstlink.com
www.secondlink.io
www.thirdlink.org
Button
This is a paragraph.
It contains some text.
It can be several
lines long...
This is a paragraph.
It contains some text.
It can be several lines long...
Header
Footer
Heading goes here
www.firstlink.com
www.secondlink.io
www.thirdlink.org
This is a paragraph.
It contains some text.
It can be several
lines long...
Button
This is a paragraph.
It contains some text.
It can be several lines long...
Header
Footer
Heading goes here
www.firstlink.com
www.secondlink.io
www.thirdlink.org
This is a paragraph.
It contains some text.
It can be several
lines long...
Button
This is a paragraph.
It contains some text.
It can be several lines long...
Header
Footer
Heading goes here
www.firstlink.com
www.secondlink.io
www.thirdlink.org
This is a paragraph.
It contains some text.
It can be several
lines long...
Button
This is a paragraph.
It contains some text.
It can be several lines long...
Header
Footer
Heading goes here
www.firstlink.com
www.secondlink.io
www.thirdlink.org
This is a paragraph.
It contains some text.
It can be several
lines long...
Button
This is a paragraph.
It contains some text.
It can be several lines long...
Header
Footer
Heading goes here
www.firstlink.com
www.secondlink.io
www.thirdlink.org
This is a paragraph.
It contains some text.
It can be several
lines long...
Button
This is a paragraph.
It contains some text.
It can be several lines long...
Header
Footer
Heading goes here
www.firstlink.com
www.secondlink.io
www.thirdlink.org
This is a paragraph.
It contains some text.
It can be several
lines long...
Button
This is a paragraph.
It contains some text.
It can be several lines long...
Header
Footer
Heading goes here
www.firstlink.com
www.secondlink.io
www.thirdlink.org
This is a paragraph.
It contains some text.
It can be several
lines long...
Button
This is a paragraph.
It contains some text.
It can be several lines long...
Header
Footer
Heading goes here
www.firstlink.com
www.secondlink.io
www.thirdlink.org
This is a paragraph.
It contains some text.
It can be several
lines long...
Button
This is a paragraph.
It contains some text.
It can be several lines long...
Rated by 13 participants
⭐ ⭐ ⭐ ⭐ ⭐
Layouts generated with varying optimality:
“great”,“average”, “bad”
Optimality score a good indicator
of participants’ opinion
45. KEY FEATURES
DESIGN TASK
Header
Footer
Heading goes here
www.firstlink.com
www.secondlink.io
www.thirdlink.org
Button
This is a paragraph.
It contains some text.
It can be several
lines long...
This is a paragraph.
It contains some text.
It can be several lines long...
Header
Footer
Heading goes here
www.firstlink.com
www.secondlink.io
www.thirdlink.org
Button
This is a paragraph.
It contains some text.
It can be several
lines long...
This is a paragraph.
It contains some text.
It can be several lines long...
Header
Footer
Heading goes here
www.firstlink.com
www.secondlink.io
www.thirdlink.org
This is a paragraph.
It contains some text.
It can be several
lines long...
Button
This is a paragraph.
It contains some text.
It can be several lines long...
Header
Footer
Heading goes here
www.firstlink.com
www.secondlink.io
www.thirdlink.org
This is a paragraph.
It contains some text.
It can be several
lines long...
Button
This is a paragraph.
It contains some text.
It can be several lines long...
Header
Footer
Heading goes here
www.firstlink.com
www.secondlink.io
www.thirdlink.org
This is a paragraph.
It contains some text.
It can be several
lines long...
Button
This is a paragraph.
It contains some text.
It can be several lines long...
Header
Footer
Heading goes here
www.firstlink.com
www.secondlink.io
www.thirdlink.org
This is a paragraph.
It contains some text.
It can be several
lines long...
Button
This is a paragraph.
It contains some text.
It can be several lines long...
Header
Footer
Heading goes here
www.firstlink.com
www.secondlink.io
www.thirdlink.org
This is a paragraph.
It contains some text.
It can be several
lines long...
Button
This is a paragraph.
It contains some text.
It can be several lines long...
Header
Footer
Heading goes here
www.firstlink.com
www.secondlink.io
www.thirdlink.org
This is a paragraph.
It contains some text.
It can be several
lines long...
Button
This is a paragraph.
It contains some text.
It can be several lines long...
Header
Footer
Heading goes here
www.firstlink.com
www.secondlink.io
www.thirdlink.org
This is a paragraph.
It contains some text.
It can be several
lines long...
Button
This is a paragraph.
It contains some text.
It can be several lines long...
DIVERSE SOLUTIONS
47. KEY FEATURES
COMPLETE SOLUTIONs
HeadIng goes here
www.mylink.com
This is a paragraph. It contains some text.
This is a paragraph.
It contains some text.
HeadIng goes here
www.mylink.com
This is a paragraph. It contains some text.
This is a paragraph.
It contains some text.
…
PARTIAL DESIGN
HeadIng goes here
This is a paragraph. It contains some text.
Canvas Workspace
www.mylink.com
This is a paragraph.
It contains some text.
49. KEY FEATURES
ORIGINAL DESIGN
HeadIng goes here
This is a paragraph. It contains some text.
This is a paragraph.
It contains some
lines of text.
This is a paragraph.
It contains some
lines of text.
This is a paragraph.
It contains some
lines of text.
ALTERNATIVE SOLUTIONS
HeadIng goes here
This is a paragraph. It contains some text.
This is a paragraph.
It contains some
lines of text.
This is a paragraph.
It contains some
lines of text.
This is a paragraph.
It contains some
lines of text.
…
HeadIng goes here
This is a paragraph. It contains some text.
This is a paragraph.
It contains some
lines of text.
This is a paragraph.
It contains some
lines of text.
This is a paragraph.
It contains some
lines of text.
51. KEY FEATURES
DESIGN TASK
bottom
HeadIng goes here This is a paragraph. It contains some text.
www.mylink.com
This is a paragraph.
It contains some text.
right
Locked
This is a paragraph. It contains some text.
HeadIng goes here
This is a paragraph.
It contains some text.
www.mylink.com
This is a paragraph. It contains some text.
HeadIng goes here
This is a paragraph.
It contains some text.
www.mylink.com
COMPLETE SOLUTIONs
…
52. Watch the demo video at:
https://youtu.be/BLSiJuA6DUI?t=92
56. “Kind of a new way of
thinking about layouts”
“spur creativity and get away
from the obvious choices”
“… the idea of getting different possibilities of
where the elements could be is really nice”
“… as inspiration to take parts of even
though maybe the whole layout isn’t useful”
“[Design exploration is] a feature that’s not
available in the industry at this moment”