1
00:00:00,980 --> 00:00:02,260
Welcome back.

2
00:00:02,260 --> 00:00:04,980
I'm excited we're on
this journey together.

3
00:00:04,980 --> 00:00:08,110
If you haven't already,
download the project files and

4
00:00:08,110 --> 00:00:10,010
open up the Adobe XD file.

5
00:00:11,030 --> 00:00:14,500
We'll be using Apple's UI kit for
Adobe XD so

6
00:00:14,500 --> 00:00:19,190
be sure to also install
the SF Pro font and SF Simples.

7
00:00:19,190 --> 00:00:20,820
There are links in the teacher's notes.

8
00:00:22,110 --> 00:00:26,040
Here I have several screens for
the waste sorting app.

9
00:00:26,040 --> 00:00:27,600
It's an iPhone app, so

10
00:00:27,600 --> 00:00:31,920
we'll continue designing it with Apple's
Human Interface Guidelines in mind.

11
00:00:33,190 --> 00:00:35,840
There are three main sections of this app.

12
00:00:35,840 --> 00:00:37,530
As you can see in the tab bar.

13
00:00:38,740 --> 00:00:41,750
The homescreen defaults to the Play tab

14
00:00:41,750 --> 00:00:44,780
which allows the user to
test their knowledge.

15
00:00:44,780 --> 00:00:49,640
It shows a piece of waste, and
then the user selects where it belongs.

16
00:00:49,640 --> 00:00:54,470
Is it recyclable, compostable,
landfill bound, and so on?

17
00:00:55,500 --> 00:00:59,770
The app tells them if they get it right
and provides an explanation, if not.

18
00:01:01,340 --> 00:01:05,970
The look up tab allows the user
to search for a specific item for

19
00:01:05,970 --> 00:01:07,110
disposal information.

20
00:01:08,300 --> 00:01:13,210
It also shows popular items that
have been searched for frequently.

21
00:01:13,210 --> 00:01:18,780
As you can see, there are also a few
screens that show individual items.

22
00:01:18,780 --> 00:01:22,380
The remaining tab is the Personalized tab.

23
00:01:22,380 --> 00:01:25,410
This is where a user can
enter their location and

24
00:01:25,410 --> 00:01:30,960
specify if they're inquiring about
residential or business services.

25
00:01:30,960 --> 00:01:34,000
This helps the app give
the best recommendations

26
00:01:34,000 --> 00:01:36,470
based on what's available
in the user's area.

27
00:01:37,820 --> 00:01:43,460
So, we have a few screens to work with and
now we want to hook them together,

28
00:01:43,460 --> 00:01:46,840
design the interactions, and
make a functioning prototype.

29
00:01:47,900 --> 00:01:50,540
Let's start with the Play screen.

30
00:01:50,540 --> 00:01:55,630
Click the Prototype tab as that's where
the interactions are defined in Adobe XD.

31
00:01:57,040 --> 00:02:01,440
Now, let's think about the interactivity
we want to enable on this screen.

32
00:02:02,460 --> 00:02:05,320
The correct answer to this
question is land fill.

33
00:02:06,370 --> 00:02:08,960
Select the land fill group
in the layers panel.

34
00:02:10,030 --> 00:02:13,590
If you find it difficult to
select the element you want,

35
00:02:13,590 --> 00:02:18,120
I find it helpful to press the Command
key on my keyboard while I click.

36
00:02:18,120 --> 00:02:21,310
If you're on Windows,
press the CTRL key as you click.

37
00:02:22,310 --> 00:02:24,640
This directly selects elements and

38
00:02:24,640 --> 00:02:28,290
makes it easier to navigate
an artboard with a lot of content.

39
00:02:29,880 --> 00:02:30,760
Okay, so

40
00:02:30,760 --> 00:02:36,910
once you have the landfill group selected,
find the interaction panel on the right.

41
00:02:36,910 --> 00:02:40,485
Click the plus sign to
add a new interaction.

42
00:02:40,485 --> 00:02:44,550
Choose Tap as the trigger and
Transition as the action.

43
00:02:46,570 --> 00:02:50,120
Set the Destination to the artboard,
Play- Correct.

44
00:02:51,530 --> 00:02:56,680
Great, now that will show the correct
screen when the right answer is selected.

45
00:02:58,270 --> 00:03:01,820
Now follow the same process for
an incorrect answer.

46
00:03:03,490 --> 00:03:07,310
I'll do it for a glass, metal, plastic.

47
00:03:07,310 --> 00:03:10,271
I'll choose Play- Incorrect
as the Destination.

48
00:03:16,223 --> 00:03:19,803
Let's press the Desktop Preview
button to see it in action.

49
00:03:30,921 --> 00:03:35,950
Nice, you can arrow back on your
keyboard to visit the previous screen.

50
00:03:37,730 --> 00:03:41,900
If you'd like, you can play around
with the animation settings.

51
00:03:41,900 --> 00:03:45,624
Let's see what Ease In and Out looks like.

52
00:03:55,025 --> 00:03:59,750
The only remaining interactions to add
on this screen are the tab bar links.

53
00:04:00,960 --> 00:04:03,730
We'll follow the same process for those.

54
00:04:03,730 --> 00:04:07,790
We'll just change the Destination
to the appropriate artboards.

55
00:04:07,790 --> 00:04:09,643
Let's do that for one artboard.

56
00:04:36,754 --> 00:04:39,045
Then we can copy and paste it for

57
00:04:39,045 --> 00:04:43,377
the other two artboards that
also have an active Play tab.

58
00:05:08,948 --> 00:05:13,610
Now, let's look closer at
the Play- Incorrect artboard.

59
00:05:13,610 --> 00:05:18,530
It includes a link to the individual
page for the Frito's chip bag.

60
00:05:18,530 --> 00:05:20,560
Include an interaction for it as well.

61
00:05:23,253 --> 00:05:30,658
I'll set it to Trigger Tap, Action
Transition, and Destination Chip bag.

62
00:05:30,658 --> 00:05:34,184
Let's see how that looks by clicking
the Desktop Preview button.

63
00:05:39,741 --> 00:05:42,740
Great, that does it for
that section of the app.

64
00:05:43,960 --> 00:05:46,160
Now let's move on to the Lookup section.

65
00:05:47,880 --> 00:05:50,510
Let's skip the Search interaction.

66
00:05:50,510 --> 00:05:54,110
I'll show you how to create
input interactions later

67
00:05:54,110 --> 00:05:56,070
when I add them to
the Personalized screen.

68
00:05:57,360 --> 00:06:00,030
On this screen,
let's do a Drag interaction.

69
00:06:01,040 --> 00:06:04,266
I want the popular items
to work as a carousel so

70
00:06:04,266 --> 00:06:06,930
the user can swipe through the items.

71
00:06:08,530 --> 00:06:11,930
Select the Batteries card group and
add an interaction.

72
00:06:13,550 --> 00:06:18,230
Select Drag,
set the Action to Auto-Animate and

73
00:06:18,230 --> 00:06:21,297
set the Destination to Lookup- Foil.

74
00:06:23,310 --> 00:06:24,901
I'll set the Easing to Snap.

75
00:06:29,506 --> 00:06:32,065
Great, now we can see that in action.

76
00:06:39,179 --> 00:06:41,478
Let's make it so it'll drag back.

77
00:06:41,478 --> 00:06:46,290
From the Lookup-Foil artboard,
select the Batteries card and

78
00:06:46,290 --> 00:06:50,060
add the Drag interaction with
Lookup as the destination.

79
00:06:51,450 --> 00:06:53,809
Now select the Chip bag card and

80
00:06:53,809 --> 00:06:59,183
add the Drag animation with
the Lookup-Chip bag as the destination.

81
00:07:03,563 --> 00:07:10,408
Finally, from the lookup chip bag artboard
select the aluminum foil card and

82
00:07:10,408 --> 00:07:15,253
add the drag interaction with
the lookup foil artboard

83
00:07:15,253 --> 00:07:20,005
as the destination let's
preview the interaction.

84
00:07:26,847 --> 00:07:32,140
Looks perfect.

85
00:07:32,140 --> 00:07:35,450
Now I want to make the cards tappable.

86
00:07:35,450 --> 00:07:40,120
Ideally, I'd add another
interaction to each of these cards.

87
00:07:40,120 --> 00:07:45,230
But Adobe XD is currently limited to
only one interaction per element.

88
00:07:46,270 --> 00:07:49,280
So, I'll just make
the info icon interactive.

89
00:07:50,460 --> 00:07:56,440
From the look up art board select the Info
symbol and add a tap interaction.

90
00:07:56,440 --> 00:07:58,570
I'll make the destination batteries.

91
00:08:01,121 --> 00:08:06,283
Follow the same process to enable
the info icon on the other two screens.

92
00:08:13,600 --> 00:08:16,920
Next, I wanna show you how
to make a scrolling screen.

93
00:08:18,000 --> 00:08:22,920
Let's jump back to the Design tab in
Adobe XD and look at the battery screen.

94
00:08:24,010 --> 00:08:27,730
See how the content extends below
the device's screen height.

95
00:08:28,760 --> 00:08:31,370
Let's look at the Preview
to see how it looks now.

96
00:08:32,700 --> 00:08:35,620
See how it doesn't automatically scroll.

97
00:08:35,620 --> 00:08:37,210
Let's fix that.

98
00:08:37,210 --> 00:08:40,390
With the artboard selected,
look at the right panel and

99
00:08:40,390 --> 00:08:42,380
find the scrolling section.

100
00:08:42,380 --> 00:08:43,734
Choose vertical and

101
00:08:43,734 --> 00:08:48,361
set the viewport height to 812 which
is the height of the iPhone x.

102
00:08:51,872 --> 00:08:57,700
Great, so now it scrolls but some elements
are moving that shouldn't be moving.

103
00:08:57,700 --> 00:08:59,859
To fix this, go to the prototype tab.

104
00:09:07,446 --> 00:09:10,510
Select the tool bar and
in the right panel,

105
00:09:10,510 --> 00:09:15,300
under Scrolling select Fix
position when scrolling.

106
00:09:15,300 --> 00:09:19,640
And you can also make sure
the status bar is also

107
00:09:19,640 --> 00:09:21,840
Set to fix position when scrolling.

108
00:09:23,150 --> 00:09:24,090
All right.

109
00:09:24,090 --> 00:09:27,370
For our final activity on
this section of the app,

110
00:09:27,370 --> 00:09:29,600
let's make the heart icon interactive.

111
00:09:29,600 --> 00:09:34,950
I want users to be able to tap
the heart to like the item,

112
00:09:34,950 --> 00:09:39,140
this saves it in their account for
easy access later.

113
00:09:39,140 --> 00:09:42,130
For this we'll need to
add component states.

114
00:09:43,580 --> 00:09:48,300
With the Like button component selected,
look to the right panel under component.

115
00:09:49,540 --> 00:09:52,210
Add a new state and name it liked.

116
00:09:52,210 --> 00:09:54,140
With this new state selected,

117
00:09:54,140 --> 00:09:57,810
you can make changes that will only
appear when the heart is tapped.

118
00:09:59,000 --> 00:10:02,338
I'll switch it to a filled
heart by copying and

119
00:10:02,338 --> 00:10:06,283
assemble from the SF symbol app and
set the filter red.

120
00:10:09,994 --> 00:10:12,111
I'll click back to the default state,

121
00:10:12,111 --> 00:10:14,750
so the screen shows that
first when I preview it.

122
00:10:16,390 --> 00:10:18,860
Okay, now that we have the default and

123
00:10:18,860 --> 00:10:21,860
active state ready,
Let's make it interactive.

124
00:10:22,910 --> 00:10:27,690
Go to the Prototype tab and
select the Like button components.

125
00:10:27,690 --> 00:10:33,570
Add a tap interaction, set it to
Auto Animate, and Destination Liked.

126
00:10:35,290 --> 00:10:37,850
Now, select the Liked state and

127
00:10:37,850 --> 00:10:43,590
make the same selections except set
the Destination to Default State.

128
00:10:43,590 --> 00:10:47,640
This finalized the loop.
Preview to see it in action.

129
00:10:51,460 --> 00:10:52,250
Wonderful.

130
00:10:53,720 --> 00:10:57,010
Since the heart is within
the toolbar component,

131
00:10:57,010 --> 00:11:01,060
it automatically appears on the foil and
chip back screens.

132
00:11:02,640 --> 00:11:06,390
Okay, now let's move on
to the personalized tab.

133
00:11:06,390 --> 00:11:08,740
On this screen, we'll get into keyboards.

134
00:11:09,970 --> 00:11:15,330
Let's refer to Apple's UI kit to copy and
the letters and numbers keyboards.

135
00:11:16,690 --> 00:11:19,319
Put them on their own individual artboards

136
00:11:50,403 --> 00:11:55,103
For the letters keyboard, I'll change
the Go text to Return since that's

137
00:11:55,103 --> 00:11:58,920
a better call to action for
the purpose of filling out a form.

138
00:12:00,360 --> 00:12:03,350
Now that those are ready
to use let's wire it up.

139
00:12:04,350 --> 00:12:08,700
With the prototype tab open,
select the zip code text box.

140
00:12:10,790 --> 00:12:14,920
Add a tap interaction and
set the action to overlay.

141
00:12:14,920 --> 00:12:20,220
The destination to keyboard numbers and
the animation to slide up.

142
00:12:21,340 --> 00:12:26,880
You'll see a green box appear that
represents for the overlay will appear.

143
00:12:26,880 --> 00:12:29,560
Make sure it's at
the bottom of this screen,

144
00:12:29,560 --> 00:12:32,210
since we want the keyboard
to slide up from the bottom.

145
00:12:33,580 --> 00:12:34,627
Now let's preview it.

146
00:12:38,509 --> 00:12:39,910
Excellent.

147
00:12:39,910 --> 00:12:43,440
Now do that for city and county as well.

148
00:12:43,440 --> 00:12:48,070
Except be sure to show the appropriate
keyboard based on the field type.

149
00:12:48,070 --> 00:12:51,730
Since those fields are expecting letters,
choose the letters keyboard.

150
00:12:58,920 --> 00:13:02,899
Now, I realized I left in
the autocomplete recommendations,

151
00:13:02,899 --> 00:13:08,162
which don't actually make sense in this
case since text hasn't been entered yet.

152
00:13:08,162 --> 00:13:10,875
So I'll remove that row from the board.

153
00:13:20,238 --> 00:13:24,399
Oops, I see there's actually a gap here
because I forgot to pull down the keyboard

154
00:13:24,399 --> 00:13:26,990
so it's flush with
the bottom of the screen.

155
00:13:26,990 --> 00:13:28,482
So I'll fix that now.

156
00:13:32,467 --> 00:13:33,590
Alright, that looks good.

157
00:13:34,900 --> 00:13:38,830
Next, select the keyboard
numbers art board.

158
00:13:38,830 --> 00:13:43,330
Since we can easily visualize
typing numbers in XD

159
00:13:43,330 --> 00:13:47,020
we'll mimic it by making these
entire art board tappable

160
00:13:48,160 --> 00:13:52,990
Add a tap interaction that leads to
the personalized typing zip art board.

161
00:13:54,570 --> 00:13:59,420
On that art board, I have a screen
with a few numbers entered.

162
00:13:59,420 --> 00:14:05,700
For fun, I also added auto complete
options that appear as the user types.

163
00:14:05,700 --> 00:14:09,860
On this screen, we'll want to
paste in the numerical artwork so

164
00:14:09,860 --> 00:14:11,030
that it stays present.

165
00:14:12,370 --> 00:14:15,830
Now select one of
the autocomplete suggestions and

166
00:14:15,830 --> 00:14:21,510
add a tap interaction with the destination
personalized location entered.

167
00:14:21,510 --> 00:14:24,530
This will autocomplete
the location fields.

168
00:14:24,530 --> 00:14:25,403
Let's check it out.

169
00:14:28,683 --> 00:14:30,600
It's looking good.

170
00:14:30,600 --> 00:14:33,710
Now the user can easily
fill out their location

171
00:14:33,710 --> 00:14:36,250
by simply entering their zip code.

172
00:14:36,250 --> 00:14:38,440
Okay, almost done.

173
00:14:38,440 --> 00:14:42,230
For the last bit of polish,
let's make the toggle switch functional.

174
00:14:43,330 --> 00:14:48,920
The process will be the same as the heart
interaction. From the Design tab,

175
00:14:48,920 --> 00:14:50,800
select the Switch on component.

176
00:14:52,210 --> 00:14:57,050
Add a new state named Switch Off and
select it in the component panel.

177
00:14:58,240 --> 00:15:01,655
Within this group,
add the visual of a switch turned off.

178
00:15:13,662 --> 00:15:18,832
Now go to the prototype tab with
the switch on components selected for

179
00:15:18,832 --> 00:15:24,359
the default state at a tap interaction
Set the action to auto-animate and

180
00:15:24,359 --> 00:15:27,054
set the destination to switch off.

181
00:15:30,229 --> 00:15:35,350
Now, select the switch off state and
set the destination to default state.

182
00:15:36,710 --> 00:15:40,291
You can do the same for the switch
that looks turned off by default.

183
00:15:43,322 --> 00:15:49,450
Finally, don't forget to add interactions
for the tab bar in the remaining screens.

184
00:15:49,450 --> 00:15:52,080
That's everything for
this interactive prototype.

185
00:15:53,240 --> 00:15:56,125
Let's preview it to see
all of it in action.

186
00:16:47,693 --> 00:16:51,855
This really gives us a sense of how this
design will look as a functioning app.

187
00:16:53,195 --> 00:16:58,700
Before we start, I want to show you
another way you can document interactions.

188
00:16:58,700 --> 00:17:03,030
You can display all of the states
of a component like this.

189
00:17:03,030 --> 00:17:05,560
This is sometimes
referred to as redlining.

190
00:17:06,610 --> 00:17:11,150
A redline design is used to
ease the handoff to developers,

191
00:17:11,150 --> 00:17:14,940
although it helps everyone on
the team understand the states and

192
00:17:14,940 --> 00:17:21,680
specifications. This example shows the
various options for a text input field.

193
00:17:21,680 --> 00:17:25,930
It shows the label placement,
container bounds, and input area.

194
00:17:27,240 --> 00:17:31,140
If needed, it can have helper text,
which explains the field to a user.

195
00:17:32,370 --> 00:17:37,090
Placeholder text can also be used to
provide an example of the expected input.

196
00:17:38,660 --> 00:17:42,000
The focus state shows how
the input looks when selected.

197
00:17:43,040 --> 00:17:47,390
When text is entered, the cursor appears,
and then X icon appears,

198
00:17:47,390 --> 00:17:50,940
to give the user an easy way
to clear out the entered text.

199
00:17:52,090 --> 00:17:56,050
In the final state, we want to see
how to look when the error occurs.

200
00:17:57,070 --> 00:17:59,380
All right, that covers it.

201
00:17:59,380 --> 00:18:02,260
If you'd like to check out
my final design file,

202
00:18:02,260 --> 00:18:07,510
I've included it in the project files,
so you can at your own leisure.

203
00:18:07,510 --> 00:18:11,650
I hope this course has helped you learn
more about interaction design.

204
00:18:11,650 --> 00:18:15,990
If you'd like to go even deeper into
creating interactive prototypes,

205
00:18:15,990 --> 00:18:17,960
check out the teacher's note.

206
00:18:17,960 --> 00:18:20,050
Have fun creating interactions.