1
00:00:00,890 --> 00:00:05,830
Now that you have an overall sense of the
components of an interaction, let's zoom

2
00:00:05,830 --> 00:00:10,650
in to get a more detailed understanding of
how interactions can further be defined.

3
00:00:12,350 --> 00:00:15,300
Looking more closely at
interactive elements,

4
00:00:15,300 --> 00:00:18,250
it goes beyond a simple click of a button.

5
00:00:18,250 --> 00:00:21,290
There are other interactions and
gestures, too.

6
00:00:21,290 --> 00:00:22,860
Let's look at some examples.

7
00:00:24,480 --> 00:00:27,880
First, let's check out a few
interactions I can do on my computer.

8
00:00:29,160 --> 00:00:30,150
Here's Google Drive.

9
00:00:31,340 --> 00:00:33,500
As is common in many apps,

10
00:00:33,500 --> 00:00:37,510
single clicking selects a document
while double clicking opens it.

11
00:00:38,950 --> 00:00:42,740
On computers, there's
the opportunity to add hover states,

12
00:00:42,740 --> 00:00:46,880
which allow content to show if
the mouse hovers over an element.

13
00:00:46,880 --> 00:00:48,730
This is handy for the Toolbar and

14
00:00:48,730 --> 00:00:52,210
Google Docs, where I can hover
over the icons to see the labels.

15
00:00:53,240 --> 00:00:56,910
Showing the labels up front
would clutter the UI, so

16
00:00:56,910 --> 00:00:59,960
it's nice that they're
discoverable via the hover.

17
00:00:59,960 --> 00:01:04,770
Drag and drop is a common interaction that
allows a user to move an object to another

18
00:01:04,770 --> 00:01:05,320
location.

19
00:01:06,440 --> 00:01:08,670
An example is moving
this photo of Butters.

20
00:01:09,680 --> 00:01:13,430
I can click and drag the photo
to the bottom of the column.

21
00:01:13,430 --> 00:01:16,730
Releasing the click drops
the photo in this new location.

22
00:01:18,620 --> 00:01:21,620
Commands also extend to the keyboard.

23
00:01:21,620 --> 00:01:27,110
Keyboard shortcuts allow the user to enter
a series of keys to perform an action.

24
00:01:27,110 --> 00:01:31,960
For example, the ability to copy with
a keyboard command is a common feature

25
00:01:31,960 --> 00:01:34,030
in many programs.

26
00:01:34,030 --> 00:01:38,100
Pressing Command and
C on a Mac copies an object in a program.

27
00:01:39,450 --> 00:01:42,230
Another keyboard interaction
is tab navigation.

28
00:01:43,560 --> 00:01:46,120
Let's return to Google Drive
to see this in action.

29
00:01:47,400 --> 00:01:53,120
Users can navigate through elements in
a UI using the tab key on their keyboard.

30
00:01:53,120 --> 00:01:56,343
This moves the focus from
one element to the next,

31
00:01:56,343 --> 00:02:00,566
making the product accessible to
people who use screen readers or

32
00:02:00,566 --> 00:02:04,962
whose physical capability is better
served by keyboard controls.

33
00:02:04,962 --> 00:02:08,517
To essentially click an element
such as the info icon,

34
00:02:08,517 --> 00:02:12,629
I can press Enter on my keyboard and
the Details panel appears.

35
00:02:15,923 --> 00:02:18,972
Commands can also be text based.

36
00:02:18,972 --> 00:02:22,425
Way before graphical user
interfaces were developed,

37
00:02:22,425 --> 00:02:24,560
computer screens were text only.

38
00:02:25,570 --> 00:02:29,350
People interacted with
computers by typing commands.

39
00:02:29,350 --> 00:02:33,840
While graphical user interfaces
are certainly in the majority these days,

40
00:02:33,840 --> 00:02:37,930
folks like developers use type commands
to perform tasks on a computer.

41
00:02:39,290 --> 00:02:42,420
Also, the emergence of
artificial intelligence and

42
00:02:42,420 --> 00:02:46,940
chat bots has popularized the use of
typed commands to a broader audience.

43
00:02:48,100 --> 00:02:51,380
Now you can book a hair
appointment by chatting with a bot

44
00:02:51,380 --> 00:02:52,730
instead of filling out a form.

45
00:02:53,800 --> 00:02:58,680
Or you can get customized salary
advice using Cindy Gallop's chat bot.

46
00:03:00,900 --> 00:03:05,759
Along the same lines, voice interactions
are increasingly popular due to

47
00:03:05,759 --> 00:03:08,852
the advances in natural
language processing.

48
00:03:08,852 --> 00:03:13,957
Virtual assistants such as
Google Assistant, Apple's Siri and

49
00:03:13,957 --> 00:03:19,722
Microsoft Cortona are able to perform
actions based on verbal commands.

50
00:03:19,722 --> 00:03:23,050
Next, let's look at some
mobile interactions.

51
00:03:23,050 --> 00:03:25,430
These are also called gestures.

52
00:03:25,430 --> 00:03:28,960
In mobile apps, the interactions
available to a user are different.

53
00:03:30,230 --> 00:03:33,490
Users can tap to launch an app or
select an object.

54
00:03:35,600 --> 00:03:38,760
I can scroll through the album
by moving my finger vertically.

55
00:03:41,330 --> 00:03:46,000
The long press triggers the photo to
be selected, and then I can drag and

56
00:03:46,000 --> 00:03:48,490
drop it to change the photo order.

57
00:03:48,490 --> 00:03:51,658
A single tap on the photo opens the photo.

58
00:03:51,658 --> 00:03:56,730
Swiping can be used to navigate
through a series of screens or images.

59
00:03:59,400 --> 00:04:01,720
Spreading can be used to zoom in,

60
00:04:01,720 --> 00:04:04,530
while pinching can be used
to zoom out on the screen.

61
00:04:05,640 --> 00:04:10,010
Sensors on mobile devices allow them
to detect when they're rotated,

62
00:04:10,010 --> 00:04:14,720
which allows users to change the
orientation from portrait to landscape.

63
00:04:16,030 --> 00:04:21,760
Here, we see the app turn to a landscape
layout when I turn the phone 90 degrees.

64
00:04:21,760 --> 00:04:24,930
This is especially helpful
when viewing a video,

65
00:04:24,930 --> 00:04:28,870
as landscape mode allows the video to
fill the screen for better viewing.

66
00:04:30,020 --> 00:04:34,310
Shaking a mobile device can also
trigger an action in an app,

67
00:04:34,310 --> 00:04:36,600
such as showing a prompt notice and
a crash report.

68
00:04:37,770 --> 00:04:41,890
Here we see a few support options appear
when I shake the Google Maps app.

69
00:04:43,590 --> 00:04:47,040
That just scratches
the surface of what's possible.

70
00:04:47,040 --> 00:04:49,910
There are so many mobile gestures.

71
00:04:49,910 --> 00:04:52,770
Check out the teachers notes for
a list of gestures.

72
00:04:53,810 --> 00:04:58,070
Before implementing gestures,
especially the more complex ones,

73
00:04:58,070 --> 00:05:00,840
remember to stay cognizant
of accessibility.

74
00:05:01,950 --> 00:05:05,620
Some gestures may be difficult for
users to do.

75
00:05:05,620 --> 00:05:10,790
So either choose simpler ones or provide
alternate paths to complete the same goal.

76
00:05:11,810 --> 00:05:14,855
That covers several types of interactions.

77
00:05:14,855 --> 00:05:18,380
In the next video,
we'll take a look at micro interactions.