Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Designing Interactions!
You have completed Designing Interactions!
Preview
In this video, I'll show you how to create interactions for an iPhone app in Adobe XD.
Project Resources:
Further Reading:
- Ask a UXpert: How Micro-Interactions Can Enhance the User Experience - Adobe UX ideas blog
Adobe XD Resources:
- Adobe XD workspace basics - Get acquainted with the UI
- Adobe XD keyboard shortcuts - Speed up your workflow
- Create interactive prototypes in Adobe XD - text-based guide
Advanced Prototyping Resources:
- Framer - for all platforms
- Principle - for iOS designs
- Origami - created by Facebook, runs on Mac OS for mobile apps
- Adobe After Effects - powerful motion design tool
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Welcome back.
0:00
I'm excited we're on
this journey together.
0:02
If you haven't already,
download the project files and
0:04
open up the Adobe XD file.
0:08
We'll be using Apple's UI kit for
Adobe XD so
0:11
be sure to also install
the SF Pro font and SF Simples.
0:14
There are links in the teacher's notes.
0:19
Here I have several screens for
the waste sorting app.
0:22
It's an iPhone app, so
0:26
we'll continue designing it with Apple's
Human Interface Guidelines in mind.
0:27
There are three main sections of this app.
0:33
As you can see in the tab bar.
0:35
The homescreen defaults to the Play tab
0:38
which allows the user to
test their knowledge.
0:41
It shows a piece of waste, and
then the user selects where it belongs.
0:44
Is it recyclable, compostable,
landfill bound, and so on?
0:49
The app tells them if they get it right
and provides an explanation, if not.
0:55
The look up tab allows the user
to search for a specific item for
1:01
disposal information.
1:05
It also shows popular items that
have been searched for frequently.
1:08
As you can see, there are also a few
screens that show individual items.
1:13
The remaining tab is the Personalized tab.
1:18
This is where a user can
enter their location and
1:22
specify if they're inquiring about
residential or business services.
1:25
This helps the app give
the best recommendations
1:30
based on what's available
in the user's area.
1:34
So, we have a few screens to work with and
now we want to hook them together,
1:37
design the interactions, and
make a functioning prototype.
1:43
Let's start with the Play screen.
1:47
Click the Prototype tab as that's where
the interactions are defined in Adobe XD.
1:50
Now, let's think about the interactivity
we want to enable on this screen.
1:57
The correct answer to this
question is land fill.
2:02
Select the land fill group
in the layers panel.
2:06
If you find it difficult to
select the element you want,
2:10
I find it helpful to press the Command
key on my keyboard while I click.
2:13
If you're on Windows,
press the CTRL key as you click.
2:18
This directly selects elements and
2:22
makes it easier to navigate
an artboard with a lot of content.
2:24
Okay, so
2:29
once you have the landfill group selected,
find the interaction panel on the right.
2:30
Click the plus sign to
add a new interaction.
2:36
Choose Tap as the trigger and
Transition as the action.
2:40
Set the Destination to the artboard,
Play- Correct.
2:46
Great, now that will show the correct
screen when the right answer is selected.
2:51
Now follow the same process for
an incorrect answer.
2:58
I'll do it for a glass, metal, plastic.
3:03
I'll choose Play- Incorrect
as the Destination.
3:07
Let's press the Desktop Preview
button to see it in action.
3:16
Nice, you can arrow back on your
keyboard to visit the previous screen.
3:30
If you'd like, you can play around
with the animation settings.
3:37
Let's see what Ease In and Out looks like.
3:41
The only remaining interactions to add
on this screen are the tab bar links.
3:55
We'll follow the same process for those.
4:00
We'll just change the Destination
to the appropriate artboards.
4:03
Let's do that for one artboard.
4:07
Then we can copy and paste it for
4:36
the other two artboards that
also have an active Play tab.
4:39
Now, let's look closer at
the Play- Incorrect artboard.
5:08
It includes a link to the individual
page for the Frito's chip bag.
5:13
Include an interaction for it as well.
5:18
I'll set it to Trigger Tap, Action
Transition, and Destination Chip bag.
5:23
Let's see how that looks by clicking
the Desktop Preview button.
5:30
Great, that does it for
that section of the app.
5:39
Now let's move on to the Lookup section.
5:43
Let's skip the Search interaction.
5:47
I'll show you how to create
input interactions later
5:50
when I add them to
the Personalized screen.
5:54
On this screen,
let's do a Drag interaction.
5:57
I want the popular items
to work as a carousel so
6:01
the user can swipe through the items.
6:04
Select the Batteries card group and
add an interaction.
6:08
Select Drag,
set the Action to Auto-Animate and
6:13
set the Destination to Lookup- Foil.
6:18
I'll set the Easing to Snap.
6:23
Great, now we can see that in action.
6:29
Let's make it so it'll drag back.
6:39
From the Lookup-Foil artboard,
select the Batteries card and
6:41
add the Drag interaction with
Lookup as the destination.
6:46
Now select the Chip bag card and
6:51
add the Drag animation with
the Lookup-Chip bag as the destination.
6:53
Finally, from the lookup chip bag artboard
select the aluminum foil card and
7:03
add the drag interaction with
the lookup foil artboard
7:10
as the destination let's
preview the interaction.
7:15
Looks perfect.
7:26
Now I want to make the cards tappable.
7:32
Ideally, I'd add another
interaction to each of these cards.
7:35
But Adobe XD is currently limited to
only one interaction per element.
7:40
So, I'll just make
the info icon interactive.
7:46
From the look up art board select the Info
symbol and add a tap interaction.
7:50
I'll make the destination batteries.
7:56
Follow the same process to enable
the info icon on the other two screens.
8:01
Next, I wanna show you how
to make a scrolling screen.
8:13
Let's jump back to the Design tab in
Adobe XD and look at the battery screen.
8:18
See how the content extends below
the device's screen height.
8:24
Let's look at the Preview
to see how it looks now.
8:28
See how it doesn't automatically scroll.
8:32
Let's fix that.
8:35
With the artboard selected,
look at the right panel and
8:37
find the scrolling section.
8:40
Choose vertical and
8:42
set the viewport height to 812 which
is the height of the iPhone x.
8:43
Great, so now it scrolls but some elements
are moving that shouldn't be moving.
8:51
To fix this, go to the prototype tab.
8:57
Select the tool bar and
in the right panel,
9:07
under Scrolling select Fix
position when scrolling.
9:10
And you can also make sure
the status bar is also
9:15
Set to fix position when scrolling.
9:19
All right.
9:23
For our final activity on
this section of the app,
9:24
let's make the heart icon interactive.
9:27
I want users to be able to tap
the heart to like the item,
9:29
this saves it in their account for
easy access later.
9:34
For this we'll need to
add component states.
9:39
With the Like button component selected,
look to the right panel under component.
9:43
Add a new state and name it liked.
9:49
With this new state selected,
9:52
you can make changes that will only
appear when the heart is tapped.
9:54
I'll switch it to a filled
heart by copying and
9:59
assemble from the SF symbol app and
set the filter red.
10:02
I'll click back to the default state,
10:09
so the screen shows that
first when I preview it.
10:12
Okay, now that we have the default and
10:16
active state ready,
Let's make it interactive.
10:18
Go to the Prototype tab and
select the Like button components.
10:22
Add a tap interaction, set it to
Auto Animate, and Destination Liked.
10:27
Now, select the Liked state and
10:35
make the same selections except set
the Destination to Default State.
10:37
This finalized the loop.
Preview to see it in action.
10:43
Wonderful.
10:51
Since the heart is within
the toolbar component,
10:53
it automatically appears on the foil and
chip back screens.
10:57
Okay, now let's move on
to the personalized tab.
11:02
On this screen, we'll get into keyboards.
11:06
Let's refer to Apple's UI kit to copy and
the letters and numbers keyboards.
11:09
Put them on their own individual artboards
11:16
For the letters keyboard, I'll change
the Go text to Return since that's
11:50
a better call to action for
the purpose of filling out a form.
11:55
Now that those are ready
to use let's wire it up.
12:00
With the prototype tab open,
select the zip code text box.
12:04
Add a tap interaction and
set the action to overlay.
12:10
The destination to keyboard numbers and
the animation to slide up.
12:14
You'll see a green box appear that
represents for the overlay will appear.
12:21
Make sure it's at
the bottom of this screen,
12:26
since we want the keyboard
to slide up from the bottom.
12:29
Now let's preview it.
12:33
Excellent.
12:38
Now do that for city and county as well.
12:39
Except be sure to show the appropriate
keyboard based on the field type.
12:43
Since those fields are expecting letters,
choose the letters keyboard.
12:48
Now, I realized I left in
the autocomplete recommendations,
12:58
which don't actually make sense in this
case since text hasn't been entered yet.
13:02
So I'll remove that row from the board.
13:08
Oops, I see there's actually a gap here
because I forgot to pull down the keyboard
13:20
so it's flush with
the bottom of the screen.
13:24
So I'll fix that now.
13:26
Alright, that looks good.
13:32
Next, select the keyboard
numbers art board.
13:34
Since we can easily visualize
typing numbers in XD
13:38
we'll mimic it by making these
entire art board tappable
13:43
Add a tap interaction that leads to
the personalized typing zip art board.
13:48
On that art board, I have a screen
with a few numbers entered.
13:54
For fun, I also added auto complete
options that appear as the user types.
13:59
On this screen, we'll want to
paste in the numerical artwork so
14:05
that it stays present.
14:09
Now select one of
the autocomplete suggestions and
14:12
add a tap interaction with the destination
personalized location entered.
14:15
This will autocomplete
the location fields.
14:21
Let's check it out.
14:24
It's looking good.
14:28
Now the user can easily
fill out their location
14:30
by simply entering their zip code.
14:33
Okay, almost done.
14:36
For the last bit of polish,
let's make the toggle switch functional.
14:38
The process will be the same as the heart
interaction. From the Design tab,
14:43
select the Switch on component.
14:48
Add a new state named Switch Off and
select it in the component panel.
14:52
Within this group,
add the visual of a switch turned off.
14:58
Now go to the prototype tab with
the switch on components selected for
15:13
the default state at a tap interaction
Set the action to auto-animate and
15:18
set the destination to switch off.
15:24
Now, select the switch off state and
set the destination to default state.
15:30
You can do the same for the switch
that looks turned off by default.
15:36
Finally, don't forget to add interactions
for the tab bar in the remaining screens.
15:43
That's everything for
this interactive prototype.
15:49
Let's preview it to see
all of it in action.
15:53
This really gives us a sense of how this
design will look as a functioning app.
16:47
Before we start, I want to show you
another way you can document interactions.
16:53
You can display all of the states
of a component like this.
16:58
This is sometimes
referred to as redlining.
17:03
A redline design is used to
ease the handoff to developers,
17:06
although it helps everyone on
the team understand the states and
17:11
specifications. This example shows the
various options for a text input field.
17:14
It shows the label placement,
container bounds, and input area.
17:21
If needed, it can have helper text,
which explains the field to a user.
17:27
Placeholder text can also be used to
provide an example of the expected input.
17:32
The focus state shows how
the input looks when selected.
17:38
When text is entered, the cursor appears,
and then X icon appears,
17:43
to give the user an easy way
to clear out the entered text.
17:47
In the final state, we want to see
how to look when the error occurs.
17:52
All right, that covers it.
17:57
If you'd like to check out
my final design file,
17:59
I've included it in the project files,
so you can at your own leisure.
18:02
I hope this course has helped you learn
more about interaction design.
18:07
If you'd like to go even deeper into
creating interactive prototypes,
18:11
check out the teacher's note.
18:15
Have fun creating interactions.
18:17
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up