[Upbeat background music]
Hello. My name is Kashyap, and today I’d like to present some of our latest work on
computational methods for graphical layouts.
Grids are commonly used to design user interfaces.
They are used for wireframing and protoyping, and they are also used to implement designs,
for example, in webpages like this one.
Today, we’ll look at how computers could support interface designers
in creating such grid-based layouts
To give you a quick overview, I’ll show you how our computational approach can use
integer programming
to take any design task
and suggest several good design solutions.
Computational design of layouts is not entirely new.
Just to give you a couple of examples...
SUPPLE looked at how a UI specification could be automatically converted to valid UI designs.
Bricolage on the other hand showed a method for creating new designs by remixing content
and style from existing designs.
Unlike these fully automatic approaches, mixed-initiative design has looked at how
design tools can actively guide designers by providing suggestions.
In this work, we look at providing real-time support for grid-based layout design.
To solve the problem of computationally designing grid-based layouts,
we first need to look at some design objectives
We outline 3 key objectives
The first being alignment between elements.
The second is the rectangularity of the overall design.
And finally, non-overall placement of elements in preferred or familiar positions.
Now, to ensure that a design meets these objectives, we can capture them using mathematical formulations.
A basic requirement for any layout is that elements do not overlap or occlude each other.
This can be given by these four basic equations.
To illustrate these better, a non-overlapping element can be entirely above another element
Or it could be entirely to the right of the element
Similarly, it could be entirely below the other element
Or to the left.
By ensuring that any one of these constraints are met,
overlaps between elements can be avoided.
A similar approach can be used towards preferentially placing elements with regard to each other.
Here, we just need to make one or two of these constraints mandatory.
Next, to improve alignment of elements, we use the concept of alignment groups.
As you can see in this poorly-alignment layout, the 4 elements have 4 top-alignment lines,
and 4 bottom-alignment lines.
Now, let’s try to improve this a bit.
By moving the two elements here, the number of top aligned groups has immediately reduced
to 2, and the bottom-aligned groups has reduced to 3.
This can be further improved by some resizing.
A similar approach can be used towards improving vertical alignment as well.
Rectangularity is another important aspect of a good interface layout.
Here, you can see the outline has several edges,
giving the appearance of “holes” in the design.
This could be improved by making the outline more rectangular in several ways.
By mathematically formulating these objectives, we can now quickly generate several different
layout designs.
That's great! But how do we ensure that designs are not just copies of each other,
with minor variations?
Diversification of designs is an important consideration when providing suggestions to designers.
For example, these 3 layouts might be theoretically quite different from each other, but they
are visually very similar.
Providing all of them as suggestions would be quite meaningless.
Our formulation mathematically capture the feasible design space in the form of a two-dimensional space.
This can then be used to systematically find distinctly different designs.
Conversely, this can be exploited to find similar alternatives as well,
which make minor improvements to a design.
To verify whether our approach actually generates good layouts, we conducted a layout quality study.
We generated layouts with varying levels of optimality,
ranging from great layouts to bad layouts.
These were rated by 13 participants on a 5-star scale.
Overall, we found that optimality scores are good indicators of the participants actual opinions.
Given that our computational approach can generate good layouts, I'll next discuss some
key features for supporting designers in their interactive tasks.
First, our approach supports design exploration by suggesting diverse solutions to given design problems.
For example, for this given design task, here are eight different, unique solutions.
Second, our approach allows designers to auto-complete their designs.
Once they've created a part of their design layout,
it can provide complete solutions by filling in missing elements.
Our approach also enables fine grained improvements where a designer can search for similar alternatives
based on an initial starting point.
Finally, our approach also allows designers to specify additional constraints to the layout.
This can be done by locking elements or by defining placement preferences.
These features are implemented in our design tool, aptly named GRIDS.
The tool provides designers with a canvas where they can draw their interface element as required.
The Element Properties panel provides different options for adding element features.
Designers can loosely define other elements in the workspace without actually placing
them on the canvas.
Upon defining the design task, the designer can trigger the optimiser and get real time
suggestions from the optimiser.
As you can see, the Suggestions panel provides designers with a variety of design solutions.
From this, they can continue editing the design to make further changes...
or they could directly save a design to the timeline.
We conducted a designer study to evaluate our approach and tool.
we invited 16 professional designers
to create interface layout using our GRIDS design tool.
The tool in general was very well received,
and designers found it beneficial for exploring alternatives.
They especially loved auto-completion of partial designs.
Here's a gallery of results produced by the designers from our study.
To summarise, our work makes three novel contributions towards the goal of
supporting designers in grid-based layout design.
First, our grid layout formulation enables mathematical solutions for generating good layouts.
Second, our computational approach supports key design features such as exploration of
diverse designs, exploitation of minor alternatives, and auto completion of partial designs.
Finally, our GRIDS design tool enables real-time support
by providing designers with interactive suggestions.
We invite you to read our paper for further details.
You can also find additional material, including our algorithm and data on our website.
Thank you and goodbye.
[Upbeat outro music]