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
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