1
00:00:00,770 --> 00:00:02,190
Hey, everyone, and welcome back.

2
00:00:02,660 --> 00:00:09,530
So I'm going to be talking about something really interesting, and that is motion now motion is something

3
00:00:09,530 --> 00:00:12,970
I love to use and designs, and I think everyone should be using them in design.

4
00:00:12,980 --> 00:00:19,580
And it doesn't necessarily mean that you need to incorporate some complex animations or complex micro

5
00:00:19,580 --> 00:00:21,020
interactions and stuff like that.

6
00:00:21,530 --> 00:00:28,790
But motion can really, really help add that level of Polish, but also just overall create a great

7
00:00:28,820 --> 00:00:30,900
user experience for your users.

8
00:00:31,850 --> 00:00:37,700
So I want to start right off and talk about the importance of motion because it is incredibly important.

9
00:00:38,000 --> 00:00:39,380
Just look at this screen.

10
00:00:39,410 --> 00:00:45,440
Beautiful swipes, beautiful state changes, moving to a detailed screen, seen the little micro interaction

11
00:00:45,440 --> 00:00:47,390
when something is added to a car.

12
00:00:47,420 --> 00:00:48,590
Let's take a look at that right there.

13
00:00:49,860 --> 00:00:57,510
Little subtleties like just really improve the user experience and, you know, users are easily able

14
00:00:57,510 --> 00:00:58,450
to follow along.

15
00:00:58,950 --> 00:01:05,250
It's such a crucial element in making those interactions with a brand's digital product more streamlined

16
00:01:05,250 --> 00:01:06,120
and intuitive.

17
00:01:07,020 --> 00:01:07,860
Now, this is a quote.

18
00:01:07,860 --> 00:01:09,330
I really love motion.

19
00:01:09,330 --> 00:01:10,170
Tell stories.

20
00:01:10,170 --> 00:01:12,450
Everything in an app is a sequence.

21
00:01:12,660 --> 00:01:13,860
And motion is your guide.

22
00:01:14,340 --> 00:01:18,600
For every budding collect and screen transition, there is a story that follows.

23
00:01:18,840 --> 00:01:20,140
Now, this is by Craig Dessner.

24
00:01:20,220 --> 00:01:22,800
He's part of the former human interface team at Apple.

25
00:01:23,130 --> 00:01:24,510
And this is so true.

26
00:01:24,510 --> 00:01:31,140
I mean, your motion should help you tell your story, whether that be moving from one screen to the

27
00:01:31,140 --> 00:01:38,310
next or just adding something and getting some sort of visual cue, it could really help not only tell

28
00:01:38,310 --> 00:01:42,360
that story, but just heighten that brand's experience for the user.

29
00:01:42,780 --> 00:01:46,920
But the truth is, it's often an afterthought.

30
00:01:47,070 --> 00:01:55,050
So although it's very, very important and designers who try to incorporate motion usually do it based

31
00:01:55,050 --> 00:02:00,390
off of gut feeling or they do it way too late in the process and it comes off looking kind of amateurish.

32
00:02:00,780 --> 00:02:03,720
And, you know, there's just not a lot of thought put into it.

33
00:02:03,720 --> 00:02:05,910
And that's just a wrong way to go about it sometimes.

34
00:02:05,930 --> 00:02:10,980
You know, I understand there's tight budgets, tight deadlines, and we can't always put that level

35
00:02:10,980 --> 00:02:12,420
of polish into our designs.

36
00:02:12,930 --> 00:02:19,340
But motion is incredibly important and we should strive to incorporate that earlier in our design process.

37
00:02:20,970 --> 00:02:24,670
Although motion is very important, it should be used with a light.

38
00:02:25,290 --> 00:02:31,090
Use it as a tool for providing users with easily noticeable smooth feedback.

39
00:02:31,530 --> 00:02:33,180
So let's take this, for example.

40
00:02:33,210 --> 00:02:34,350
This is really beautiful.

41
00:02:35,610 --> 00:02:37,210
I'm not saying this is bad or anything.

42
00:02:37,230 --> 00:02:42,120
This really suits the type of website and the brand's tone I can see right off the bat.

43
00:02:42,120 --> 00:02:43,620
So this fits perfectly.

44
00:02:43,890 --> 00:02:48,780
But could you imagine if somebody did this for, like a financial institution, a just a different type

45
00:02:48,780 --> 00:02:49,260
of brand?

46
00:02:50,080 --> 00:02:55,270
I don't think that would be something that fits and, you know, too much motion, especially maybe

47
00:02:55,270 --> 00:03:02,530
on a smaller screen like mobile that has this much motion, it just may not fit and it may just degrade

48
00:03:02,530 --> 00:03:06,200
that user experience if it isn't really relevant to the task.

49
00:03:06,520 --> 00:03:11,320
So this is a nice kind of like an intro screen animation, but if something like this happened, every

50
00:03:11,320 --> 00:03:14,400
single time I click something that would get really old fast.

51
00:03:14,650 --> 00:03:17,790
So really think about the user's experience and that user flow.

52
00:03:18,250 --> 00:03:21,270
Think about the type of brand you're designing for as well.

53
00:03:22,440 --> 00:03:29,610
Now, when you are Animation's are subtle like this, you know, that's really unobtrusive and it's

54
00:03:29,610 --> 00:03:35,130
brief and they can improve the user experience and can really communicate feedback and stage changes

55
00:03:35,130 --> 00:03:35,960
and stuff like that.

56
00:03:36,240 --> 00:03:42,480
I mean, this is a nice little animation and we don't necessarily need to do this, but this is really

57
00:03:42,480 --> 00:03:47,700
nice and thoughtful and it really kind of probably fits into what this designer is using it for.

58
00:03:47,700 --> 00:03:53,130
So little unobtrusive animations like that are really nice for the user experience.

59
00:03:53,310 --> 00:03:56,560
They create delight, but that's not all what motion is used for.

60
00:03:57,000 --> 00:04:03,420
Let's take a look at things for motion, for state changes and, you know, just preventing any type

61
00:04:03,420 --> 00:04:04,560
of disorientation.

62
00:04:05,480 --> 00:04:09,590
When a user clicks into a card in this app over here.

63
00:04:11,300 --> 00:04:17,010
You can tell easily where you're going and there isn't any disorientation.

64
00:04:17,030 --> 00:04:18,800
I mean, it's not instantaneous.

65
00:04:19,490 --> 00:04:23,470
There's a nice flow in terms of going from that card to the screen.

66
00:04:23,870 --> 00:04:31,280
So even going back when the user clicks back on the back button at the top left, it just smoothly goes

67
00:04:31,280 --> 00:04:32,270
back up to the card.

68
00:04:32,280 --> 00:04:35,060
So, I mean, that's just really great use of motion there.

69
00:04:35,330 --> 00:04:36,470
It's not too much.

70
00:04:36,890 --> 00:04:40,760
It's just the right amount and it's totally unobtrusive.

71
00:04:40,760 --> 00:04:42,980
It just adds to that user experience.

72
00:04:42,980 --> 00:04:48,420
And overall, I feel like it just adds that level of fidelity that I think we all kind of strive for.

73
00:04:48,800 --> 00:04:56,960
So this is a great example of just using it for the just purpose of state change and just visual cue

74
00:04:56,960 --> 00:04:57,400
as well.

75
00:04:58,520 --> 00:05:00,020
This is another great example.

76
00:05:00,020 --> 00:05:05,570
I mean, motion should not be overused and it could be really overwhelming, like I mentioned before,

77
00:05:05,570 --> 00:05:06,770
and it could distract users.

78
00:05:07,880 --> 00:05:13,310
If you can tell when they swipe that card and they go into this card machine here is very subtle.

79
00:05:14,590 --> 00:05:17,630
And the user knows exactly which page they're on.

80
00:05:18,280 --> 00:05:22,480
See, there's personal, there's work, and then we're going right into the work screen.

81
00:05:23,140 --> 00:05:25,900
So this is really, really subtle.

82
00:05:26,080 --> 00:05:30,910
And it's a great example to show the different types of state changes when the users clicking on things

83
00:05:30,910 --> 00:05:32,020
are swiping through things.

84
00:05:33,150 --> 00:05:39,150
Just generally interacting with the app, so remember, good motion is really invisible.

85
00:05:39,610 --> 00:05:44,830
Users shouldn't notice that they're looking at like animations or motion or like too much motion.

86
00:05:44,860 --> 00:05:46,230
They shouldn't be distracting.

87
00:05:46,410 --> 00:05:49,320
They should just notice the great experience that you have provided.

88
00:05:51,110 --> 00:05:53,850
Now, this is an example of maybe too much motion.

89
00:05:54,140 --> 00:05:57,630
Now, these are great, great types of animations we have going on here.

90
00:05:57,650 --> 00:06:02,750
I think they're pretty interesting and I think this is a great visual exploration because over time

91
00:06:02,750 --> 00:06:06,170
we can fine tune these types of things, you know, to swipe through.

92
00:06:06,170 --> 00:06:09,730
Like, I can imagine this could be like a record cards and you just swiping through.

93
00:06:09,730 --> 00:06:12,980
You click like a music record and listen to music.

94
00:06:14,420 --> 00:06:19,770
Same with something like this, that you can just be swiping through different cards, you may not show

95
00:06:19,770 --> 00:06:22,390
all the information, but it really depends what the content is there.

96
00:06:22,670 --> 00:06:27,620
But the reason why I have this example is because, you know, if this isn't fine tuned and it's just

97
00:06:27,620 --> 00:06:31,270
provided for the user just like this, this is a lot of motion.

98
00:06:31,490 --> 00:06:32,870
Like, let's take this, for example.

99
00:06:33,110 --> 00:06:36,560
So many things are flickering on and off the screen, so many shadows.

100
00:06:36,950 --> 00:06:38,270
The contrast is really high.

101
00:06:38,270 --> 00:06:41,930
And when the user actually clicks on something, things start to flicker.

102
00:06:42,200 --> 00:06:43,610
So you'll see it right about now.

103
00:06:43,640 --> 00:06:45,480
And yeah, it's just it's a lot of motion.

104
00:06:45,500 --> 00:06:49,040
So over time, we should just fine tune those little things and get that right.

105
00:06:49,400 --> 00:06:53,480
So in our next video, we're actually going to jump right into Fidelma and we're going to talk about

106
00:06:53,480 --> 00:06:57,850
like the purpose of animations and how we can make our animations much more purposeful.

107
00:06:58,160 --> 00:06:59,990
So I can't wait to teach you that.

108
00:06:59,990 --> 00:07:01,450
And I'm super excited.

109
00:07:01,730 --> 00:07:02,600
Let's jump right in.