Types of Interactions5:18 with Hope Armstrong
What types of interactions are possible? We'll look at examples of interactions across desktop and mobile apps.
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 jesters. 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 up