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

Share this talk: 


Conference program

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

Recommended talks

The Experience when business meets design
Brian Solis, Award-winning Author, Prominent Blogger/Writer, Principal Analyst at Altimeter Group
11 Feb. 2016 · 2:06 p.m.
Keynote - Reproducibility and Open Science @ EPFL
Pierre Vandergheynst, EPFL VP for Education
24 March 2017 · 9:20 a.m.