Google UX Design

Explore

Designs and prototypes

Creating high-fidelity prototypes.

Week 5: Creating high-fidelity prototypes. You’re ready to build high-fidelity prototypes in Figma! Following six steps, you'll turn your mockups into a prototype that's ready for testing. In addition, you'll explore two new concepts, gestures and motion, which can help enrich the user experience and increase the usability of prototypes.

⁠

Explore types of gestures and motion

⁠

Gestures

Gestures are any method of interaction that a user has with information on their device using touch. In other words, gestures describe how you interact with a screen using your finger or a stylus. Common gestures include:

⁠

Swipe. A swipe is a brief movement with a fingertip or stylus across the screen, horizontally or vertically. For example, users often swipe from the right side of a phone screen to the left, in order to move between screens of an app. Swipes are also commonly used to interact with a carousel of content.

Tap. A tap is a brief touch of the screen by a fingertip or stylus. Taps can be customized from the use of one fingertip to four fingertips. Tapping with a single finger is often used to select an item on the screen. Tapping with two fingers can be used as a shortcut to make the context menu (also known as the right-click menu) appear.

Drag. A drag is a tap-and-hold on the screen, continuing to press down while moving a fingertip or stylus across the screen. For example, users can drag an item on a screen to move it in and out of view. Drag is often used for the main notification menu on mobile phones.

Pinch. A pinch is the movement of two fingers closing into each other or moving away from one another. A pinch allows users to scale items on a screen, like zooming in or out on a website, map, or photo.

To learn about gestures, check out this

guide with animations of gestures from Google's Material Design⁠

Gestures and operating systems

Have you ever borrowed a friend’s phone and found it difficult to use? The simple task of taking a photo can be complicated when you don’t know which gesture opens a phone’s menu! As mobile phones have evolved, operating systems have become more characteristic to manufacturers.

This is because there is a difference in the design philosophy for gestures between Apple’s iOS and Google’s Android. More specifically, iOS is based on the

Human Interface Guidelines⁠

, or HIG for short, while Android is based on

Material Design⁠

. HIG and Material Design provide designers and developers with guidelines for the gestures used for their particular operating system. As designers, it’s our job to understand these guidelines, so we can create designs that are easy to use and that meet user’s expectations.

For example, think about how you undo text on your mobile phone. To undo text on an Apple iOS device, swipe three fingers from the right side of the screen to the left. To undo text on an Android device, tap and hold the text to select it, then press the delete key. These are important differences to consider as you create designs!

As you move forward in the course and in the real world, be sure to test your designs on various devices in order to understand how gestures work for users across operating systems.

⁠

Motion

Motion is a way to animate static design elements to focus the user's attention and tell stories. Motion can make apps and websites more engaging and easier to use, like drawing attention to the focal point of a website or seeing a menu disappear as you drag it closed.

⁠

This motion lets users know that they are able to edit the apps.

⁠

https://help.figma.com/hc/en-us/articles/360040315773⁠

⁠

Loading help.figma.com⁠

⁠

Loading help.figma.com⁠

⁠

Additional ways to enhance high-fidelity prototypes

Sound

Sound enhances usability by giving users feedback on actions they’ve taken. It indicates what a user’s status is within the app and helps users know what they can do next. For example, users of Google Chat hear a ping that notifies them of a new message when they have the Chat window minimized or in the background.

Incorporating sound into your high-fidelity designs makes the user experience better because humans have an emotional response to sounds. Using sounds humanizes user interactions; as if the app is responding with sound to an action taken. But these sounds should add to or enhance the users’ understanding of where they are within the flow or confirm an action, like a clicking sound after a user taps a button. One sound might notify users when an action is complete or unsuccessful, like if an upload failed or a download was completed.

In another way, if misused, sounds can also be distracting or unwelcome. Users may not want sounds when they interact with the design because it’s annoying or they’re in a location where they need the sound off. Remember that you should make it simple for users to turn off the sound if they choose not to use it.

Video

Video enhances user immersion and creates interest for users as they interact with your prototype. Netflix’s user experience is a great example of video enhancing a design. When you open Netflix, a featured tv show or movie will start to play. This choice is usually personalized to your watch history, and it encourages you to watch content that you might not have otherwise known about or expressed interest in.

Using video in your high-fidelity prototype is one way to immediately grab the user’s attention and focus it on a specific area of your app. Video adds dimension to your prototype and helps captivate users’ interest. Users are also more likely to use an app or stay on a website longer when video is incorporated.

When using video in your own designs, make sure users are able to adjust the volume, replay the video, and stop the video. Also, users should have the opportunity to auto-mute the video or stop videos from automatically replaying, if they’re uninterested in the content.

Using video and sound helps support users with accessibility challenges, too. Any videos and sounds you use should include transcripts and captions, or alternate notifications, to be accessible to all users.

To learn more, check out a resource from Toptal.com for more ideas on using sounds in your UI designs:

Sound Advice: A Quick Guide to Designing UX Sounds⁠

Learn more about a few principles related to sound and how using them builds trust in your company’s brand from NNG’s article

10 Usability Heuristics For User Interface Design⁠

And here’s a list of the

Best Practices for Video⁠

from UX Planet that takes a deeper dive into ways to include all users when adding videos into your app designs — including those with accessible needs.

Course 5 Week 5 - Glossary⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.