"Build an Interactive Story App (Retired)" was retired on April 30, 2017. You are now viewing the recommended replacement.
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
What types of interactions are possible? We'll look at examples of interactions across desktop and mobile apps.
Further Reading:
- Touch Gesture Guide - by Luke Wroblewski
- Human Interface Guidelines: Gestures - Apple
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
Now that you have an overall sense of the
components of an interaction, let's zoom
0:00
in to get a more detailed understanding of
how interactions can further be defined.
0:05
Looking more closely at
interactive elements,
0:12
it goes beyond a simple click of a button.
0:15
There are other interactions and
gestures, too.
0:18
Let's look at some examples.
0:21
First, let's check out a few
interactions I can do on my computer.
0:24
Here's Google Drive.
0:29
As is common in many apps,
0:31
single clicking selects a document
while double clicking opens it.
0:33
On computers, there's
the opportunity to add hover states,
0:38
which allow content to show if
the mouse hovers over an element.
0:42
This is handy for the Toolbar and
0:46
Google Docs, where I can hover
over the icons to see the labels.
0:48
Showing the labels up front
would clutter the UI, so
0:53
it's nice that they're
discoverable via the hover.
0:56
Drag and drop is a common interaction that
allows a user to move an object to another
0:59
location.
1:04
An example is moving
this photo of Butters.
1:06
I can click and drag the photo
to the bottom of the column.
1:09
Releasing the click drops
the photo in this new location.
1:13
Commands also extend to the keyboard.
1:18
Keyboard shortcuts allow the user to enter
a series of keys to perform an action.
1:21
For example, the ability to copy with
a keyboard command is a common feature
1:27
in many programs.
1:31
Pressing Command and
C on a Mac copies an object in a program.
1:34
Another keyboard interaction
is tab navigation.
1:39
Let's return to Google Drive
to see this in action.
1:43
Users can navigate through elements in
a UI using the tab key on their keyboard.
1:47
This moves the focus from
one element to the next,
1:53
making the product accessible to
people who use screen readers or
1:56
whose physical capability is better
served by keyboard controls.
2:00
To essentially click an element
such as the info icon,
2:04
I can press Enter on my keyboard and
the Details panel appears.
2:08
Commands can also be text based.
2:15
Way before graphical user
interfaces were developed,
2:18
computer screens were text only.
2:22
People interacted with
computers by typing commands.
2:25
While graphical user interfaces
are certainly in the majority these days,
2:29
folks like developers use type commands
to perform tasks on a computer.
2:33
Also, the emergence of
artificial intelligence and
2:39
chat bots has popularized the use of
typed commands to a broader audience.
2:42
Now you can book a hair
appointment by chatting with a bot
2:48
instead of filling out a form.
2:51
Or you can get customized salary
advice using Cindy Gallop's chat bot.
2:53
Along the same lines, voice interactions
are increasingly popular due to
3:00
the advances in natural
language processing.
3:05
Virtual assistants such as
Google Assistant, Apple's Siri and
3:08
Microsoft Cortona are able to perform
actions based on verbal commands.
3:13
Next, let's look at some
mobile interactions.
3:19
These are also called gestures.
3:23
In mobile apps, the interactions
available to a user are different.
3:25
Users can tap to launch an app or
select an object.
3:30
I can scroll through the album
by moving my finger vertically.
3:35
The long press triggers the photo to
be selected, and then I can drag and
3:41
drop it to change the photo order.
3:46
A single tap on the photo opens the photo.
3:48
Swiping can be used to navigate
through a series of screens or images.
3:51
Spreading can be used to zoom in,
3:59
while pinching can be used
to zoom out on the screen.
4:01
Sensors on mobile devices allow them
to detect when they're rotated,
4:05
which allows users to change the
orientation from portrait to landscape.
4:10
Here, we see the app turn to a landscape
layout when I turn the phone 90 degrees.
4:16
This is especially helpful
when viewing a video,
4:21
as landscape mode allows the video to
fill the screen for better viewing.
4:24
Shaking a mobile device can also
trigger an action in an app,
4:30
such as showing a prompt notice and
a crash report.
4:34
Here we see a few support options appear
when I shake the Google Maps app.
4:37
That just scratches
the surface of what's possible.
4:43
There are so many mobile gestures.
4:47
Check out the teachers notes for
a list of gestures.
4:49
Before implementing gestures,
especially the more complex ones,
4:53
remember to stay cognizant
of accessibility.
4:58
Some gestures may be difficult for
users to do.
5:01
So either choose simpler ones or provide
alternate paths to complete the same goal.
5:05
That covers several types of interactions.
5:11
In the next video,
we'll take a look at micro interactions.
5:14
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