hello and welcome to this discussion on
the interactive layout transfer
technique
this technique has been developed by the
user interfaces research group
at alto university as part of its
collaboration
with huawei technologies this technique
provides a powerful new capability for
the designers
of graphical user interfaces across
all computational platforms whether you
are talking of web
handheld device or desktop applications
the gui is the predominant means
for people to interact with
computational systems
naturally ui design is a mature field
where good design practices have evolved
into formal design guidelines most
large organizations generally enforce
their
own internal design guidelines and
practices
so that their uis give a common look and
feel
with a standard and visually appealing
experience
one effect is that such organizations
now have
a design library available a design
library generally means
a set of well-defined uis that the
organization considers
as its well proven standard
unquestionably good designs
that can serve as a reference for future
work
in fact a well curated and properly
maintained library
if available is a strong asset for that
company
for example here we are showing a case
where some 12
handheld device or mobile phone
interfaces could probably be serving as
the reference
set or the design library for one
particular organization
in fact the larger companies that we
have worked with
typically have a design library of
thousand plus
very good uis from various different
facets of their work
question is can we automate the use of
this library
can we make it easier for the
organization to build
and maintain this library formally
rigorously and systematically
more than that is it worth it for the
organization
i mean can we make the future design
more efficient by the use of this
library
can it help designers be more productive
can we ensure that the designs hence
are much faster easier and more
efficient
we believe the answer is yes and we are
presenting this technique
to discuss this answer let us look at a
real practical example
imagine that a new designer has joined a
company for the first time it's his or
her first day of work
and some business manager walks up and
on a piece of paper
or on a computational device gives some
kind of an idea
of an initial sketch i would like to
have a graphical user interface
looking something like this vague
An approximate specification has been
provided
now the designer looks at it he or she
needs to make the design, so
walks up to some senior designer in the
company and says hey
this is the first task to do
here the senior designer looked at it
and said wait
i remember that some six months ago i
had created another design
look at this design number 42 over here
this design number 42
exactly matches or closely matches what
you are intending to make over here
so pull out this design from our design
database and try to make something
similar to it
because design number 42 is one of our
reference very good
designs and it follows all the company
guidelines systems practices and so on
so now our novice designer has got an
interesting situation
he or she has got an initial draft available
over here initial sketch available
and he or she also has an initial
information on the closest match in the
database
what we need to do now is make this
in this format as in the template the
guideline the practices followed over
here
will remain fixed but the content will
be in line with whatever is the initial
sketch
if this can be done it will be a fast
quick
efficient way of developing uis
immediately according to that company's
practice
so we believe that style transfer
technique that we discussed today
can really achieve this product in fact
a typical result
for the very simple case that we were
discussing the initial sketches taken
over here
the closest match in the database has
been found by the system
the designer accepts this as a
reasonably good match
and the system goes and develops
something out of it
to develop this system we believe we
require
five components one the library and some
way of making the library itself
such that designs can be added modified
searched
classified and edited if required some
kind of a mapping system
which says that given a partial rough or
initial sketch
how can we find the most relevant
designs from the library
third a visualizer some way to visualize
the distribution and classification of
designs
in that particular company or
organization
fourth the transferring component the
heart of the whole system
given a sketch a and a good design
b transform a into the style of b
and lastly we want to have some kind of
a personalizer which
allows the guideline implementation and
further modifications to happen
on top of a given sketch being developed
out of these five components
the current discussion will focus on
these two the mapping
that is identification of the best
closest match from the library
and transfer given two designs transform
one in the format of the other
so now it is show time let us go through
the actual interactive layout transfer
happening on a real life system
for this demo we have selected the
sketch software
sketch is a well established gui design
tool in the market
along with sketch we have got a small
plugin available on top
which is the implementation of this
style transfer activity
we have made just now in front of you
quickly
a draft a initial sketch of what we
wanted to work with
we gave that sketch and asked the system
to pick from
the design library the closest possible
match
multiple matches are available but the
system will give
in sequential order the closest
available match
and that has been given so the system
recommends that the top design over here
is the closest match for our sketch when
we select that
it tries to give what will be
approximately
the final result if we go with this
particular selection
if we like what has been suggested over
here what is being shown just now then
we click it
and the existing ui is completely
transformed in that particular pattern
so we'll click on the suggestion over
here and the ui will change at this
point the ui has been changed in line
with the recommendation given
in line with the closest match available
the ui has been modified
if you wish to make further changes on
that if you wish to add something more
it's always possible
for more information on this interactive
layout transfer technique
as well as other interesting hci related
research projects
please have a look at the home page of
our research group
user interfaces dot aalto dot fi thank
you