1
00:00:00,000 --> 00:00:04,837
[MUSIC]

2
00:00:04,837 --> 00:00:07,590
Hey, it's nice to see you again.

3
00:00:07,590 --> 00:00:10,117
Now that you have a grasp
of the principles,

4
00:00:10,117 --> 00:00:13,617
let's design an app that
includes a range of interactions.

5
00:00:13,617 --> 00:00:17,749
For the rest of this course I'll be
demoing an app that teaches people how to

6
00:00:17,749 --> 00:00:21,366
sort their waste in to compost,
recycling, and landfill bins.

7
00:00:21,366 --> 00:00:25,405
But first, let's understand the reason for
prototyping interactions.

8
00:00:26,565 --> 00:00:31,035
Let's say you have designed a mock-up and
you have all these grand visions of how

9
00:00:31,035 --> 00:00:36,280
the screens tie into one another, and how
the user interacts with a static image.

10
00:00:37,480 --> 00:00:39,070
How do you convey that to others?

11
00:00:40,220 --> 00:00:42,328
That's why you need a prototype,

12
00:00:42,328 --> 00:00:45,752
and a detailed view of
the various interaction states.

13
00:00:45,752 --> 00:00:49,644
That makes it clear to stakeholders and
developers, what it will look and

14
00:00:49,644 --> 00:00:51,100
feel like when developed.

15
00:00:52,500 --> 00:00:56,230
Interactive prototypes can be
shown to users so you can test and

16
00:00:56,230 --> 00:00:58,090
tweak until the interactions feel right.

17
00:00:59,450 --> 00:01:03,824
Interactions need to be experienced
firsthand to get a sense of how they'll be

18
00:01:03,824 --> 00:01:04,561
perceived.

19
00:01:04,561 --> 00:01:08,640
You want to make sure animations
are noticeable but not distracting.

20
00:01:09,680 --> 00:01:15,810
As web animation expert, Rachel Nabors
points out small localized changes

21
00:01:15,810 --> 00:01:21,470
are at risk of being missed by the user
via phenomenon known as change blindness.

22
00:01:21,470 --> 00:01:27,251
Increasing the prominence of the change
can trigger the user to notice the change.

23
00:01:27,251 --> 00:01:31,170
On the flip side, make sure that
animation isn't too distracting.

24
00:01:32,620 --> 00:01:37,332
Rachel recommends finding a sweet
spot of just enough animacy so

25
00:01:37,332 --> 00:01:41,272
that your design will feel faster and
more polished.

26
00:01:41,272 --> 00:01:44,162
All right, let's get into the project.

27
00:01:44,162 --> 00:01:47,260
Download the project files and
I'll see you in the next video.