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.