GOOGLE UX DESIGN PROFESSIONAL CERTIFICATE

Course 5 – Create High-Fidelity Designs and Prototypes in Figma

Week 5: Creating High-Fidelity Prototypes

Coursera Study Guide

Enroll in Coursera Google UX Design Certificate Here

TABLE OF CONTENT

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.

Learning Objectives

  • Differentiate between low-fidelity and high-fidelity prototypes
  • Recognize accessibility considerations when designing with motion
  • Describe how to apply gestures and motion to prototypes in Figma
  • Identify common use cases for applying motion to mobile app designs
  • Define examples of common gestures used to navigate mobile apps
  • Create a high-fidelity prototype from mockup designs in Figma
  • Add motion and gestures to enhance prototypes in Figma

TEST YOUR KNOWLEDGE ON CREATING A HIGH-FIDELITY PROTOTYPE IN FIGMA

1. Fill in the blank: A high-fidelity prototype must have visual elements, navigation, and _____.

  • Placeholders
  • outlines
  • wireframes
  • interactions (CORRECT)

Correct: A high-fidelity prototype must have visual elements, navigation, and interactions. Interaction is included in high-fidelity prototypes because it contributes to the design’s functionality.

2. When finalizing the navigation for a high-fidelity prototype, what questions should the designer ask? Select all that apply.

  • What color should be used for the navigation-related icons?
  • At which point does the user journey end? (CORRECT)
  • How easy is it to locate navigation-related icons? (CORRECT)
  • How does a user get from one screen to the next? (CORRECT)

Correct: This is a good question to ask because it accounts for the navigation required to end the user’s journey. Other key considerations include: “How does a user get from one screen to the next?” and “How easy is it to locate navigation-related icons?”

Correct: This is a good question to ask because it examines how the user would interact with the product. Other key considerations include: “How does a user get from one screen to the next?” and “At which point does the user journey end?”

Correct: This is a good question to ask because it considers the user and addresses how the user flow should be navigated. Other key considerations include: “How easy is it to locate navigation-related icons?” and “At which point does the user journey end?”

3. A designer builds a high-fidelity prototype in Figma and wants to make it interactive. What is the first step to making a design element interactive?

  • Add the interaction and animation
  • Indicate the destination
  • Make the interaction that connects the hotspot to the destination
  • Select the item for the hotspot (CORRECT)

Correct: The first step in creating a connection or interaction in Figma is to select where the user’s interaction will take place.

4. When creating a high-fidelity prototype in Figma, what happens directly after the designer adds the interaction details?

  • Share the work
  • Adjust the animation (CORRECT)
  • Lay out the mockups
  • Connect the screens

Correct: Adjusting the animation occurs after a designer adds interaction details in Figma.

5. Fill in the blank: Screens should be laid out in the order of the user flow because the first connection a designer makes will be the starting frame for the prototype. This is the first ___ they want a user to take in the app.

  • Action (CORRECT)
  • view
  • pass
  • completion

Correct: The user flow is important to how the designer creates the first connection they want the user to act upon.

TEST YOUR KNOWLEDGE ON GESTURES AND MOTION

1. What are some common gestures used to navigate mobile apps? Select all that apply.

  • Clap
  • Swipe (CORRECT)
  • Tap (CORRECT)
  • Scroll (CORRECT)
  • Zoom (CORRECT)

Correct: Tapping, scrolling, swiping, and zooming are common gestures used to complete an action in an app.

2. Why are gestures and motion important in UX design?

  • They help users make decisions about an action required in a design.
  • They help enrich the user experience and increase usability. (CORRECT)
  • They help users identify visual elements.
  • They help users move between devices.

Correct: Gestures and motion are interactive elements that help the user have a seamless experience.

3. A design team wants to add a gesture and motion to a reservation page of a hotel app. They apply animation to the select button on the page for room types. Which of the following is the best example of a gesture and motion when a user reserves a room?

  • Tapping the select button and the room total appears at the top of the page in a basket icon (CORRECT)
  • Swiping the select button and the user remains on the same page
  • Swiping the select button and the app closes
  • Tapping the select button and a separate reservation summary page holds the reservation

Correct: This is a good example of gesture and motion working in concert to enhance the user experience as they interact with the design.

4. A designer working on an app for an online retailer finishes adding interaction details for an action in Figma. They need to adjust the animation for adding an item to a shopping cart. What are some options for the animation settings? Select all that apply.

  • Close down
  • Move out (CORRECT)
  • Slide in (CORRECT)
  • Instant (CORRECT)

Correct: Moving out is an option when adjusting animation. Designers can also choose to move up or down for a specific direction for the motion. Sliding in and instant animations are also options.

Correct: Sliding in, whether up or down, is an option when adjusting animation. Moving out, and instant animation are also options.

Correct: An instant animation is an option where the user goes from one screen to the next without any motion or transition in between. Sliding in and Moving out are also options.

5. How are high-fidelity (hi-fi) prototypes different from low-fidelity (lo-fi) prototypes?

  • Hi-fi prototypes are static high fidelity designs used as a visual representation of a final product.
  • Hi-fi prototypes prototypes are detailed, interactive versions of designs that closely match the look and feel of the final product. (CORRECT)
  • Hi-fi prototypes focus on visual design.
  • Hi-fi prototypes are interactive versions of designs that use content placeholders.

Correct: Hi-fi prototypes take the design work that designers have already done in the mock-ups and makes it interactive.

6. What is the first step in creating a high-fidelity prototype in Figma?

  • Adjust the animation
  • Share the work
  • Lay out the mockups (CORRECT)
  • Connect the screens

Correct: To start creating a hi-fi prototype, you will first add and organize all our mockups in Figma in a logical order.

7. In UX design, what should you consider when incorporating accessibility in gestures and motions? Select all that apply.

  • Make gestures the only way to complete a task
  • Give users the ability to turn off a motion (CORRECT)
  • Think critically about the speed and duration of motion in your designs (CORRECT)
  • Provide alternative options to using gestures (CORRECT)

Correct: You should provide alternative options to using gestures, give users the ability to turn off a motion, and consider the speed and duration of motion in your designs to ensure accessibility in your design.

Correct: You should provide alternative options to using gestures, give users the ability to turn off a motion, and consider the speed and duration of motion in your designs. The World Wide Web Consortium recommends that animations are under five seconds long in order to be accessible.

Correct: You should provide alternative options to using gestures to keep designs accessible for all users, think critically about the speed and duration of motion in your designs, and give users the ability to turn off a motion.

Previous – Week 4
Next – Week 6

Subscribe to our site

Get new content delivered directly to your inbox.

Quiztudy Top Courses

Popular in Coursera

Liking our content? Then, don’t forget to ad us to your BOOKMARKS so you can find us easily!

Subscribe