Embed code
thank you
alright so um let's get started
um yeah my name is louis camp i i'm based here in
well not here but in zurich um it's in seven years
i i i do um you x. design here um and i
actually started out as a develop a us as well
basically as a developer ever technical background um but i've always been interested in
user experience and and those things so i mainly do mobile uh_huh
and um x. with lots of functionality things like that so
one of the things is i like skiing it's my personal time i'm
i'm not a good skier despite the fancy ski or anything
um i have some pet projects that i'm working on um one of them is the time tractor called if
the it's a one the placed or and it's basically the first and arena that i ever designed
um in a way that's a a playground for me to be able to try out animations in other things
uh it sends a complete um in two months i also have an actual deaths which is uh e.
g. is over there um takes up a lot of time at the moment but it's pretty cool
i need to make things i'd like to make things i also like not just designing digital
uh things but also um physical thing so i
do sweetie printing i'd build animated lights
yeah anyway since i'm so that lined up there is something that i built
in a building class a and it does this on the wall
so that brings us to animations and um
actually animation animations in user interfaces in this presentation
look at basically a ton of examples of
new animations and how they can be used to improve the user experience of enough
um most of these examples are from fellow designers and i found them
all on 'em triple dot com which is a place right
like when i need inspiration i go there and i checked animated gifts and see okay what what could we could we do
we'll talk about two different kinds of animations
um one is functional animations that's transitions
between different states in a you why i'm showing steak changes things like that
the second thing is more visual treat it's the delightful details
um animated icons um little illustrations that or on its or
also these have a positive impact on the user experience but we have it in very different ways
but before we go into that i wanna talked about a
problem that users face that's called change blindness i
don't know how many of you have heard of it um but i will show you an example
so i'll change blindness is a phenomenon that occurs when a user is bean
is doing a visual scene and he will fail to detect changes
that are happening like um if a picture is being presented
then a white screen comes in and then the picture comes back and something
small s. changed like the two years removed or something like that
to give you
an example i will actually show you how this works and we'll see how you do
when the test with this um socially example of the rappers we'll christmas market and
will switch to that one now
well did they close attention and see if you can spot any differences in the images
anyone uh
alright well at this is that it actually is quite a big change that i made to this image
oh i will let you have a look at this one without the green screen
in between and it's so much easier it's crazy that such a thing
like that the brain doesn't register it's and so this this is a and nice thing to be
aware about and um but when looking at the user interface is how is this actually
relevant what does change blindness have to do with apps so for an example that i could
think of is that lots of apps to use external data um so something's being shown
then they connect to the server and download some new data and then something else is being shown um we could
look something like this example you have some bars have a loadings better and then some other force because the
data is for different time frame for example animations can actually
help avoid try a change blindness as your base all
without the cat the differences are easier to spot but if we add a transition from a to b.
it becomes even easier and clearer like this example where loading is being done at the same
time as we displaying it then when the loading is done we make a transition to
the different state well that's enough about change blindness
now we're gonna move onto functional animations action
animations i would say is a bit of a boss word at the moment um
early themselves there it's not functions and not i
i was actually contemplating making the the the
title of the talk functional animations but then it's not a mathematical functions but the functionality
oh actually so might want to functional animations can
communicate important in information about the user
interface it can reinforce the hierarchy how things are structured and relate to each other
it can transport users between different context like from one screen
to the next with a detailed view to uh um
a list of you were the other way around it can also communicate state changes
things that happens after users triggered an action like communicating to the server changing
a state and then getting back and how that interface updates without in material
design from google this is um like they talk about meaningful transitions and
there's a lot of information about that and some of the examples that i have
also be from their salt first of all let's have a look at
an example transformation um for material this is pretty common you have a list
of you you have a detail view and the first thing to
think about when you make an animation is think about these two states and then
how you can transform it between them not what kind of cool animation
could i add make this look nice so functional animations are they're not just
to look nice but to bring meaning and helping users understand we keep
it simple your oh so you're animated example of this uh when the user clicks
the the card and it transforms into the detail view um you may
have noticed that animation here is um sequential we don't make too much changes
at once we make that transition with the header first and then
the action button comes in and that makes it a lot easier to
process another example is if the user clicks i'm kind of primary
action like adding something they need to enter a name or whatever
it may be the press the button and that a pop
shows up or dialogue and that dialogue can then have that information if
you can show that it came from this point the user
understands the hierarchy and the oh it's all connected better um these
things in a more detailed example for up book reader
this is from one of the examples from dribble um where
they've used animations to reinforce the hierarchy in this
reader you have a list of books have an intro to the book and then you have started reading
and the inverse of read mode and these animations to just
transition the user more easily it's easy to follow
we move on to uh take changes oh animations can also be used to communicate a state change
um like this example i made a couple years ago before
the time of wind and pay made all those
things it was for payment out and the idea was that the user would um static your code
and it would know how much you needed to pay and then he would have this button to press
nasty presses it it is sent to the server is awake state and then there's a confirmation
and rather than changing the whole screen many times for this
just change a part of it and we make it with transitions in animation so it's easy to understand
it's a delayed state change this one with the server and i will show you the next one
which is a an immediate state change or a an on off switch can also be used to improve
the clarity or in the on off switches again example from trouble is just a nice to play
with these witches stuff here's another example or a task
ah again just the concept from trouble but it
shows an immediate state changed for state change fall
by a delayed state change sequential animations and
uh items that changes to completed well if you look the user taps think
market shown there's animation and then the list collapses when the list is
done it goes away and there's a little message and it all feels
more fluid somehow imagine this without animations another example um with a
card view there's immediate state changes and list responses to what happens when the
user moves a card around a card was created he moves it
into the list to see how the other elements in the list react
to this movement oh yeah these animations here they make it clear
the user what is really going on um but with all these
animations more serious point timing is very important um uses really
really don't like to wait for unnecessary things so all the animations
need to be sure worked you need to be quick
they shouldn't feel like the animations become or that ah is becoming store from it well this is an example for material
design and they yeah see that mission at but just quick
animations and not just saying that they should be quick
actually have some uh numbers for material design that's really important just
that you get a sense for how fast these animation should
be depending on what you're on the meeting their different guidelines
so if an object is entering you need a tune
in twenty five milliseconds or the user to be able to register it and for for it not to feel slow if
you do a full screen transition with lots of elements that
are changing you have about three hundred seventy five milliseconds
then if the object is leaving it's only a hundred and ninety five
and the reason for that at least this is the reason i think is that
one object just leaving it's like you're throwing it in the trash bin
you don't need to register the new object you just need to see that it's heading
into general right direction and then it's whatever it's gone but something that's really really
important is um like the maximum length of a of a transition shouldn't be more
than a four hundred milliseconds because that's where the user start feeling that it's
well another important thing is that the saying of
animations um if you have a linear
like the movement of a of an object has just linear like with the
no easing here it has the same speed or out west with the is saying
you had a acceleration and deceleration so in the start in the beginning
and that makes it feel much more natural these are actually true crucial to
uh make it feel natural alright well that's it for the functional
animations and now well we will move on to delightful details all the
lights all details are like animations and things that make the ah
feel more interesting and more engaging actually don't need to
be there necessarily but the and an overall sense
of quality in that um let's say you are faced with these two old volvo i muscles
which one would you rather ride with you can't sell some the appearance of this car which one
works in which one doesn't but most people would assume the red car is more reliable
because it has been cared for and outside chances are he'll like they would be
pretty high that it would also be cared for on the inside and
it's the same with user interfaces and this having these delightful details brings this
polish to your ah so all you can add animations where it's not
expected it will give you use just a good feeling you need to work with
your designers on this obviously but or some more examples hum well let's
have a look at the lace and user interfaces another example from trouble loading
spinners loading indicators kind of unexpected that you could show up arrow
states and like the down state and everything but it's a nice thing it doesn't
have to be tall here's an example that i made for company here
in serious um i would say their their logo is the one up in
the top corner it's a pretty nice one and i think the
loading spare doesn't have to be the standard one does it um they do
web based things so they have a lot of loading time involved uh
and here's what i did with that logo instead of a standard rotating loading
spinner when they have to wait you can actually keep them entertained
the for the first time the interest rates are another neat example of just delightful detail would
be this um well to refresh animation meet imagine
how many unnecessary reloads this kind of
animation would generate a it's
users like to be surprised by details like this but it has to be in places
where it's not getting in the way of something else or have a look at
this on boarding wouldn't swipes through these a couple of extra times just concerts that i
use it um another example of something i did was for them to state
a couple of years ago and the states were beginning to become populated rather than having
just nothing and then the list actually populating the the and the stick with something
i thought yeah i stand again to states a cannibal reading why not
do something with that so we had an animation the first
we don't happen this is what the user would see in a why not nice detail case of that
yet another super cute thing this is i can't
quite categorise this actually um it's that ah
of the chinese plant monitoring system oh you have little sense ours and they make sure the assault
temperature or uh the moisture first lives there and
everything it's that obviously is all in chinese
i got the sensors off i'll express but this up to super cute oh here in this little
illustration may have the scouts coming in and this
little d. e. going out and it's it
it's a bit of maybe cuteness overload next slide yeah so this is the detail view of the
plants and this is my work it or something and uh when they're loading data they're showing
this and then they use it really clearly because they change the state of the header when the
data is loaded show how your plants are doing yeah i my thumb isn't that green
um that they're also like using these animations here we show that okay that's not all that not enough
sunlight doesn't say it's at night or so but yeah anyway these animations and they use these
illustrations in the really clever way to uh communicate that
the changes u. k. and actually this is
a delete the last example but this is one that i did and this is for um
animated icons in my pet project these three icons show when you pull the card
and it's not i wouldn't say it's necessary having it but it's ah ah
it's nice i still like even though i decided and i used up all the
time occasionally i just open it and have a look i just uh
i like a cell moving onto the final
molds and well basically these animations they
may not be super simple to implement but they also don't have to
be over complicated but as a designer many of the the animations that i've
the sign have actually been stored away in a drawer most of them
most of the ones that the sign are implemented in my pet project because there i
have the possibility possibility to prioritise that myself it's more difficult persuading customers too
i or ties um ending time or on making animations
if you have a business analyst or project
lead and you ask them or you you give them the option we could either work on
the next feature or make animations what's gonna happen so i would like to to suggest to
you as developers try and include i mean if you wanna work with animations and i
hope you do for user's sake because this is really neat thing but i would i would urge
you to include animations already in the estimates make
animations part of your next feature basically
the same way that you hopefully do with testing i i but i think that is the
only way to to actually get the time that you need in order to do this
and not feel like you don't have time to do the animations and then of course there's the
other thing which is um not all of you get animations from your signers some of them
like me you have gotten tired of trying to do animations that actually not never get implemented
but i would say challenger designers ask them for animations many of us will actually thank
you for it because it's it's a really fun thing to do um and many many of the
examples that i've showed to date from trouble or like dreamt up by the signers um
and some may need some kind of tweaking in order to be implemented especially when you look
at different platforms and patterns and here i would like to say for successful animations
need to sit together with your designer and tweak it because you can draw something up in the design tool for
making animations but then converting that into the real thing will
always need this adjustment need to sit together for
this so if that's taken we anything away from this i
would love it love it to be a inspiration i'm
taking time in your estimates for animations and getting together with your designers to work on this thank you

Share this talk: 


Conference program

Keynote
Jean-Baptiste Clion, Coordinator DevFest Switzerland
26 nov. 2016 · 9:40 matin
How to convince organization to adopt a new technology
Daria Mühlethaler, Swisscom / Zürich, Switzerland
26 nov. 2016 · 10:14 matin
Q&A - How to convince organization to adopt a new technology
Daria Mühlethaler, Swisscom / Zürich, Switzerland
26 nov. 2016 · 10:38 matin
Animations for a better user experience
Lorica Claesson, Nordic Usability / Zürich, Switzerland
26 nov. 2016 · 11:01 matin
Q&A - Animations for a better user experience
Lorica Claesson, Nordic Usability / Zürich, Switzerland
26 nov. 2016 · 11:27 matin
Artificial Intelligence at Swisscom
Andreea Hossmann, Swisscom / Bern, Switzerland
26 nov. 2016 · 1:01 après-midi
Q&A - Artificial Intelligence at Swisscom
Andreea Hossmann, Swisscom / Bern, Switzerland
26 nov. 2016 · 1:29 après-midi
An introduction to TensorFlow
Mihaela Rosca, Google / London, England
26 nov. 2016 · 2:01 après-midi
Q&A - An introduction to TensorFlow
Mihaela Rosca, Google
26 nov. 2016 · 2:35 après-midi
Limbic system using Tensorflow
Gema Parreño Piqueras, Tetuan Valley / Madrid, Spain
26 nov. 2016 · 3:31 après-midi
Q&A - Limbic system using Tensorflow
Gema Parreño Piqueras, Tetuan Valley / Madrid, Spain
26 nov. 2016 · 4:04 après-midi
How Docker revolutionized the IT landscape
Vadim Bauer, 8gears AG / Zürich, Switzerland
26 nov. 2016 · 4:32 après-midi
Closing Remarks
Jacques Supcik, Professeur, Filière Télécommunications, Institut iSIS, HEFr
26 nov. 2016 · 5:11 après-midi
Rosie: clean use case framework
Jorge Barroso, Karumi / Madrid, Spain
27 nov. 2016 · 10:05 matin
Q&A - Rosie: clean use case framework
Jorge Barroso, Karumi / Madrid, Spain
27 nov. 2016 · 10:39 matin
The Firebase tier for your app
Matteo Bonifazi, Technogym / Cesena, Italy
27 nov. 2016 · 10:49 matin
Q&A - The Firebase tier for your app
Matteo Bonifazi, Technogym / Cesena, Italy
27 nov. 2016 · 11:32 matin
PERFMATTERS for Android
Hasan Hosgel, ImmobilienScout24 / Berlin, Germany
27 nov. 2016 · 11:45 matin
Q&A - PERFMATTERS for Android
Hasan Hosgel, ImmobilienScout24 / Berlin, Germany
27 nov. 2016 · 12:22 après-midi
Managing your online presence on Google Search
John Mueller, Google / Zürich, Switzerland
27 nov. 2016 · 1:29 après-midi
Q&A - Managing your online presence on Google Search
John Mueller, Google / Zürich, Switzerland
27 nov. 2016 · 2:02 après-midi
Design for Conversation
Henrik Vendelbo, The Digital Gap / Zurich, Switzerland
27 nov. 2016 · 2:30 après-midi
Q&A - Design for Conversation
Henrik Vendelbo, The Digital Gap / Zurich, Switzerland
27 nov. 2016 · 3:09 après-midi
Firebase with Angular 2 - the perfect match
Christoffer Noring, OVO Energy / London, England
27 nov. 2016 · 4:05 après-midi
Q&A - Firebase with Angular 2 - the perfect match
Christoffer Noring, OVO Energy / London, England
27 nov. 2016 · 4:33 après-midi
Wanna more fire? - Let's try polymerfire!
Sofiya Huts, JustAnswer / Lviv, Ukraine
27 nov. 2016 · 5 après-midi
Q&A - Wanna more fire? - Let's try polymerfire!
Sofiya Huts, JustAnswer / Lviv, Ukraine
27 nov. 2016 · 5:38 après-midi
Closing Remarks
Panel
27 nov. 2016 · 5:44 après-midi