Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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