Week 3: Building Low-Fidelity Prototypes
Building Low-Fidelity Prototypes INTRODUCTION
Building Low-Fidelity Prototypes course provided as part of the Google UX Design Professional Certificate on Coursera teaches you from concept to prototype in UX design. You might start with a digitized paper prototype of a mobile application and graduate to a low-fidelity digital prototype built in Figma, which will define the basic set of features and functionality of your design.
This course focuses on recognizing and avoiding design bias or deceptive patterns during prototyping. You will study approaches to understanding and averting drawing bias in your work as opposed to making your designs either or ennobling.
Learning objectives:
- Create a paper prototype visualizing design ideas.
- Differentiate between a wireframe and a prototype.
- Learn from digital wireframes to low-fidelity digital prototyping techniques in Figma.
- Create a low-fidelity prototype in Figma to exhibit the key features of your design.
- Recognize and tackle implicit bias in making design choices.
- Identify and avoid common deceptive patterns in UX design.
- Understand how deceptive patterns can be mitigated for user-centered designs.
TEST YOUR KNOWLEDGE OF LOW-FIDELITY PROTOTYPES
1. You demonstrate an early product model’s scrolling and click functionality to stakeholders before it goes to engineering. What are you demonstrating?
- A prototype (CORRECT)
- A design type
- A storyboard
- A wireframe
Correct: Designers can create a prototype to illustrate a design idea, allowing them to gather feedback and incorporate improvements into the concept, based on user or stakeholder feedback.
2. What is the most significant difference between a wireframe and a prototype?
- Fidelity
- Interactivity (CORRECT)
- Time
- Cost
Correct: The distinction between a wireframe and a low-fidelity prototip is in the degree of interactivity: El low-fidelity prototype empowers users to click through screens and to simulate the user navigation and experience how the design works in a more realistic way.
3. What is the goal of creating a low-fidelity prototype?
- Make it easier for engineers to value the design
- Create a complex and interactive design that’s ready for development
- Make designs testable to collect and analyze feedback early on (CORRECT)
- Create a complex and static design to show stakeholders
Correct: Low-fidelity designs form quite simple interactive prototypes that can roughly communicate how a product would look like. Whether these have been made in paper or on computers, their main purpose is to make the designs testable so that the team can collect and analyze feedback early in the process..
4. Why is it beneficial to build paper prototypes? Select all that apply.
- Easy to interpret
- Allows rapid iteration (CORRECT)
- Inexpensive (CORRECT)
- Low commitment (CORRECT)
Correct: Paper prototypes can have a really easy way of creating them, so it is really easy to generate ideas and prototyping quickly. They are low in commitment and even cheap to make.
Correct: Paper prototypes can be considered really inexpensive, as they only require rudiments of drawing or writing and paper to become prototyping materials. Because of this, they can also be discarded and iteration speeded up when they do not meet the user’s needs.
Correct: It’s typical of digital prototypes to have a longer time for creating so that they are hard to discard. However, making paper prototypes is quick and inexpensive, thus committing them less into refining or abandoning them.
5. In which situation is building a paper prototype most useful? Select all that apply.
- Remote collaboration
- The define stage of the design process
- Brainstorming sessions (CORRECT)
- Early product testing (CORRECT)
Correct: In brainstorming sessions, creating paper prototypes is beneficial from a designer perspective because they can sketch and compare multiple ideas quickly. They would be very useful during early product testing, as well, to visually represent potential solutions.
Correct: Paper prototypes are very effective for early product testing, especially where ideas need to be clarified using visual representations; they can be beneficial for brainstorming sessions.
6. To begin prototyping in Figma, what is the first step you need to take?
- Change to the Inspect tab
- Change to the Layers tab
- Change to the Prototype tab (CORRECT)
- Change to the Assets tab
Correct: To commence prototyping in Figma, transition from the Design tab to the Prototype tab. This alters the options available, allowing designers to include interactivity and define how each wireframe screen links together.
7. How do you access the presentation view in Figma?
- The inspect tab of the design panel:
- The blue share button in the upper-right corner of the toolbar:
- The play button in the upper-right corner of the toolbar (CORRECT)
- The outlined square button in the upper-left corner of the toolbar:
Correct: To view the presentation, click the play button in the upper corner of the toolbar, represented by an outlined triangle pointing to the right.
8. What is an example of implicit bias?
- Lian interviewed a candidate for an upcoming position and forgot to write down why they’d make a great addition to the team. When it was time to meet with her colleagues to discuss the likeliest candidate, she could only remember the first and last things the candidate mentioned.
- Justin is new to the pacific northwest region of the United States and wanted to make friends. After playing a pick-up basketball game with a group of men from work, Justin asked each of them about what it’s like dating women in the area. (CORRECT)
- Leonard wants to adopt a dog at a shelter. He was introduced to a litter of twelve puppies but, after meeting each of them, he opted to choose the first one he saw.
Correct: This embodies the implicit bias that refers to the unconscious attitude and stereotypes we associate with people. Within this context, for Justin, all his new friends became heterosexual apparently, which is again inferred from all the past experiences and societal stereotyping.
9. What is the forced continuity deceptive pattern?
- Creating an unwanted situation for a user that’s difficult for them to get out of
- Charging a user for a membership without a warning or reminder (CORRECT)
- Shaming a user when they opt out of an offer
- Adding extra expenses into a user’s shopping cart
Correct: Right! An example is automatic charging of a customer for a subscription without notice or reminder: this is forced continuity, a type of deceptiveness.
10. Identify an example of a deceptive pattern that produces physical effects on the user.
- Alberto receives an email notification to remind him of an upcoming energy bill. He panics and immediately goes online to pay.
- While browsing a website, Ingrid receives a notification prompt in the bottom-right corner of her screen asking “How may I help you today?” It seems suspicious and they immediately exit their browser.
- While doing some casual online shopping, a large, red notification badge keeps alerting Angeline of a limited-time sale happening this week. They appear in the middle of her screen every few minutes with advertisements on exclusive offers. This makes her feel anxious. (CORRECT)
Correct: This is an imprint of deceptive models and the psychological effects that it would have on the user. Almost a website in itself is loaded with messages meant to pressurize Angeline to browse within the sale. Frequent usage of large red notification badges creates a sense of urgency among them and controls their behaviors too.
11. You advise your client that the low-fidelity prototype will have interactivity. How much interactivity will it include?
- It will be a fully functional prototype, with all interactivity included.
- It will show the hamburger menu, with all of the categories in the menu populated.
- It will show the buttons on each screen, along with a brief description of the actions for the buttons.
- It will connect the wireframe screens so you can click from one screen to another. (CORRECT)
12. Your client has been offering new ideas and lots of feedback at every stage in the app design so far. You are ready to move from wireframing to a low-fidelity prototype. You let the client know you will be starting with a paper prototype. What are the benefits of this? Select all that apply.
- A paper prototype can be scanned and built into a digital prototype very quickly.
- Paper prototypes are low commitment, and it’s no big deal if you or your client do not care for them. (CORRECT)
- A paper prototype allows for rapid iteration with low risk. (CORRECT)
- A paper prototype is low cost. (CORRECT)
13. You are adding connections to your prototype in Figma. You select the presentation view and only see one frame from your prototype. How can you see all of your prototype frames in the presentation view?
- You will need to add connections to all of your frames. Figma only includes frames with connections in the presentation view. (CORRECT)
- You will need to go back to the prototype panel and, in the interaction details, make sure “Add connection to Frame” is selected.
- You will need to double-check the coding with the engineer team and ensure they have transferred it over to Figma correctly.
- You will need to go back to the design panel and ensure that all of the connections are correct.
14. You would like to conduct a usability test on your Figma prototype. Which mode is the best mode to do this in?
- Feedback mode
- Observation mode (CORRECT)
- Suggestion mode
- Comment mode
15. You are creating an app for hairdressers and want to ensure your own unconscious implicit bias doesn’t affect the integrity of the app. Which tools would you use to ensure you know about the end users? Select all that apply.
- User images
- Identity indicator
- Personas (CORRECT)User journey maps (CORRECT)
16. You are reviewing an app that promotes skin care for aging skin. The claims in the content are amazing, and you are directed to the purchase screen of the app. You then realize that the claims cannot be realistic. What is this type of treatment in UX design called?
- Distorted patterning
- Deceptive patterning (CORRECT)
- Misinformed patterning
- Ambiguous patterning
17. Your phone dings and you notice that you have a DM notification from one of the social media apps you frequent. That little red flag notification makes you feel happy, and you receive a natural chemical response in your body. What chemical is released in this instance?
- Dopamine (CORRECT)
- Keratin
- Creatine
- Thalamine
18. Your UX mentor discusses deceptive patterning with you and asks for examples of how you could avoid forced continuity, or the notion of charging a membership without a warning or reminder. What examples could you provide? Select all that apply.
- Decrease the pressure on the user to commit to the membership.
- Notify users before their free membership trial expires. (CORRECT)
- Ensure the buttons are clearly labeled. (CORRECT)
- Make it easy for users to cancel their memberships. (CORRECT)
19. You are at the beginning stages of creating your wireframes in Figma. You need to choose the device you are designing for. How do you do this?
- Select File and then design the device frame you will design for.
- Select the Prototype panel and then select the device.
- Select the Preview button to see the devices to choose from.
- Select the Frame tool and then select the device that you will design for. (CORRECT)
20. As you work on the app for your client, you want to ensure you are considering users’ attention economy. What are some UX design best practices you can use to accommodate this? Select all that apply.
- Employ soothing colors and imagery.
- Avoid deceptive patterns. (CORRECT)
- Use goals and metrics. (CORRECT)
- Share your design choices with your colleagues. (CORRECT)
21. You have decided to move into the prototyping phase for the app you are designing. You recommend starting with a paper prototype first. Your client asks you to explain the disadvantages of a paper prototype. What might you say? Select all that apply.
- The menu that shows all of the pages in the prototype
- The destination (CORRECT)
- The connection, which stores the interaction details (CORRECT)
- A hotspot where the connection begins (CORRECT)
22. You are in the prototype mode in Figma and ready to make connections between your wireframe screens. What are the three parts that make up prototype connections? Select all that apply.
- Containment, Eradication, and Recovery (CORRECT)
- Preparation (CORRECT)
- Detection and Analysis (CORRECT)
- Protection
23. You have designed a mapping app for a large city. The app provides travel directions only for walkers. You did not account for automobiles, public transportation, or bicycle transportation. Which type of bias did you exhibit with the creation of this app?
- Unconscious bias
- Confirmation bias
- Implicit bias (CORRECT)
- Expectancy bias
24. You are booking travel through a travel website. When you get to the checkout page, you see that your flight and hotel are in the shopping cart as you indicated. But, you also notice that trip insurance is in the shopping cart. You did not add that trip insurance and remove it from the shopping cart. What type of deceptive patterning is this considered?
- Sneak into basket
- Confirmshaming (CORRECT)
- Forced continuity
- Proactive sales
25. You are shopping for trousers on a clothing store app. You add a tan pair of trousers to the shopping cart and select the checkout button. When you get to the cart, you see recommendations for a shirt that many customers have paired with the trousers. You end up buying the shirt as well. Why are deceptive patterns harder to ignore than traditional forms of advertising?
- Deceptive patterns are in place so you disclose your personal financial information.
- Deceptive patterns seem like they are innocent and intended to increase your satisfaction.
- Deceptive patterns are designed to be difficult to identify. (CORRECT)
- Deceptive patterns are designed to be a friendly nudge toward an action that seems fairly benign.
26. You have created your wireframes in Figma and are ready to move them into a low-fidelity prototype. What tab should you choose to start this transition?
- The prototype tab (CORRECT)
- The design tab
- The device tab
- The connection tab
27. The app that you are designing uses various notification noises and bright colors. How might these elements negatively impact users?
- They may feel happier that they can better hear and see notifications.
- Their attention to messages may increase.
- They may feel distracted or anxious. (CORRECT)
- They may respond faster to texts or emails.
28. Your client asks you to explain what a low-fidelity prototype is. How might you explain it to them?
- A low-fidelity prototype gives users the ability to connect the screens in the order that makes the most sense to them.
- A low-fidelity prototype is the sequencing of screens with the app that you are creating.
- A low-fidelity prototype is a fully interactive model that showcases the full functionality of the product.
- A low-fidelity prototype is a simple interactive model that provides a basic idea of what the product would look like. (CORRECT)
29. You have shared the Figma prototype with your team and would like to watch how they interact with it. Which mode should you be in to do this?
- Viewing mode
- Observation mode (CORRECT)
- Monitoring mode
- Study mode
30. You are ready to build your low-fidelity prototype in Figma. What should you consider before you start? Select all that apply.
- The colors and imagery
- The order actions are performed (CORRECT)
- Common user flows (CORRECT)
- The buttons and corresponding actions (CORRECT)
31. You are establishing the frame connections in Figma for your prototype and are ready to select the triggers for the transitions. You want to identify if the transitions from frame to frame will be from a tap, click, or hover. Which panel in Figma can you do this from?
- Layers panel
- Assets panel
- Interaction details panel (CORRECT)
- Navigation panel
32. Your client has asked for multiple prototypes so they can choose the one they like best. How do you keep multiple prototypes organized in the same file?
- Create multiple menus within the same file.
- Create multiple pages within the same file. (CORRECT)
- Create multiple frames within the same file.
- Create multiple panels within the same file.
33. When you first arrive at a health foods website, a pop-up appears asking if you want to save 10% when you enter your email address. You select “No” and then a message appears saying, “I guess you don’t want to lose weight.” What type of deceptive patterning is this?
- Confirmshaming (CORRECT)
- Scarcity
- Urgency
- Forced continuity
34. You are shopping for a new computer that will really help you excel with UX design. A lot of your UX designer friends have recommended it. You are researching it online and notice that one website mentions there are only two left in stock. Which deceptive pattern is this?
- Confirmshaming
- Scarcity (CORRECT)
- Urgency
- Hidden costs
35. Your UX design mentor reviews your designs and suggests that you should be mindful of your implicit bias. What are they referring to?
- Your ideas and how they are flushed out in multiple frames in Figma
- Your attitude and the stereotypes you associate with people without your conscious knowledge (CORRECT)
- Your allegiance to your designs and reluctance to iterate
- Your view of the world and how you communicate that to your colleagues
36. Your UX design mentor asks you to double-check your app design to ensure that you do not include elements that encourage addictive behaviors or negatively affect users’ lives. Which ones are examples of UX design that work to prevent these issues? Select all that apply.
- A setting on a website allowing users to chat with others while shopping
- An app that sends immediate notifications of likes or favorites
- A mobile device that pauses or silences notifications while driving (CORRECT)
- A setting on a mobile device that puts the device to sleep until the morning (CORRECT)
CONCLUSION to Introduction to Detection and Incident Response
Prototyping is a very critical stage during the app design process since it finalizes testing and iteration of your design ahead of having the final product.
After looking at the four stages of the design process, you should now be able to understand much better how to apply creativity to your designs and how to spot any possible biases within them or misdirecting patterns as you design your app. Prototyping allows you to refine your design depending on actual statistics and user feedback driving you for continuous improvement. We hope this journey has enriched you with the knowledge of prototyping and getting ready to make your mobile application idea a completely finalized product.
Thank you and good luck as you continue building something magnificent! If this piece has inspired a desire to pursue a career in app design, hold on no longer—join Coursera today and take the next step in your learning!