PRACTICE QUIZ
Fill in the blank: A high-fidelity prototype must have visual elements, navigation, and _____.
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.
When finalizing the navigation for a high-fidelity prototype, what questions should the designer ask? Select all that apply.
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?" Explanation: 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?" Explanation: 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?"
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?
The first step in creating a connection or interaction in Figma is to select where the user’s interaction will take place.
When creating a high-fidelity prototype in Figma, what happens directly after the designer adds the interaction details?
Adjusting the animation occurs after a designer adds interaction details in Figma.
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.
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
What are some common gestures used to navigate mobile apps? Select all that apply.
Tapping, scrolling, swiping, and zooming are common gestures used to complete an action in an app.
Why are gestures and motion important in UX design?
Gestures and motion are interactive elements that help the user have a seamless experience.
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?
This is a good example of gesture and motion working in concert to enhance the user experience as they interact with the design.
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.
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. Explanation: Sliding in, whether up or down, is an option when adjusting animation. Moving out, and instant animation are also options. Explanation: 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.
How are high-fidelity (hi-fi) prototypes different from low-fidelity (lo-fi) prototypes?
Hi-fi prototypes take the design work that designers have already done in the mock-ups and makes it interactive.
What is the first step in creating a high-fidelity prototype in Figma?
To start creating a hi-fi prototype, you will first add and organize all our mockups in Figma in a logical order.
In UX design, what should you consider when incorporating accessibility in gestures and motions? Select all that apply.
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. Explanation: 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. Explanation: 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.
You are ready to move your mockups into a high-fidelity prototype. Which elements must be included in a high-fidelity prototype? Select all that apply.
When you make connections in Figma to make an item interactive, what type of element should be the final destination?
You are ready to create a high-fidelity prototype in Figma. What is the first thing you should do when you are laying out your mockups in Figma?
You want to ensure users have the ability to quickly open the context menu within your mobile app. Which gesture would be included in your prototype to enable this functionality?
A colleague has tested your high-fidelity prototype mobile app. They provide feedback that they could not figure out how to open the main menu. Which of these statements is most likely to be the reason why?
You are in the midst of adding interaction details in Figma to your high-fidelity prototype. You have added triggers and defined their actions. What is the last step to finalize the interaction details?
You are ready to test your prototype to see if the animation works Explanationly. What button should you select in Figma to see how the prototype works?
You are double-checking that the motions and gestures in your high-fidelity prototype are accessible to all users. What can you do to ensure accessibility? Select all that apply.
Your client has asked you to add a sound effect for every click that a user makes in their app. What is the best way to address this with the client?
You have included a video in your high-fidelity prototype. What accessibility considerations should you include in your design? Select all that apply.
You have added interactivity and functionality to the app you are designing. It now closely resembles what you envision to be the final product. What have you developed at this point?
In the high-fidelity prototype for your mobile app, you have a screen that contains a map. You want users to have the ability to zoom in and out on the map. Which gesture would be included in your prototype to enable this functionality?
The technical specs your client has provided indicate that the Google Android operating system is what you should use when designing the mobile app. The specs also indicate that several gestures should be used for user interaction. Which design philosophy guidelines should you use?
You have begun the process of adding interaction details to your high-fidelity prototype in Figma. You already added a trigger. What is the next step you should take to add interaction?
You have added all of the interactions and animations to each page in Figma for your high-fidelity prototype. Now, you are ready to gain feedback. How can you allow others to view your prototype?
You have added sound to your high-fidelity prototype. What is one thing you can do to ensure the sound added is accessible for all users?
What accessibility features should be included when using sound or video in your high-fidelity prototype? Select all that apply.
You have created a new page in your Figma design file for your high-fidelity prototype. What should you do with your mockups?
It is time to check the navigation in your high-fidelity prototype. What elements do you look for as you are checking to see if the navigation works? Select all that apply.
You want to start making connections for interactivity in your high-fidelity prototype in Figma. What mode do you need to be in to do this?
You have set the animation of one of your pages in Figma to instant animation. It moves from one screen to the next. You would like to add a bit more visual interest and want to change the animation of the page movement so it slides in from the bottom. What must you adjust in Figma to do this?
You have added motions and animations to your high-fidelity prototype. How long should those motions and animations be to be considered accessible for all users?
You would like to add sound to your high-fidelity prototype. How does sound affect accessibility? Select all that apply.
You have suggested to your client that they should add a video to the app that you are designing for them. They have asked what the benefit of a video is. What is the best way respond?
Your app has several screens. Users will need to navigate to the different screens to see the content on each. Which gesture will they use to move between the screens in the app?
What is an insight?
Insight is an observation that helps a designer understand the user or their needs from a new perspective.
What are the four steps in turning observations into actionable insights? Select all that apply.
Finding themes in the data is the third step in turning observations into actionable insights. Explanation: Coming up with insights is the final step in turning observations into actionable insights. In sequential order, the previous steps include gathering the data, organizing the data, and finding themes. Explanation: Gathering data in one place is the first step in turning observations into actionable insights. Next, organize the data, find themes, then come up with insights. Explanation: The first step is to gather data in one place. Organizing data is the second step in turning observations into actionable insights, the third step is to find themes, and the fourth step is to come up with insights.
Consider the following scenario:
The designers didn’t consider using accessible colors. Considering the color contrast also made it difficult for users to navigate the app, it was sensible to reconsider the palette they used.
Consider the following scenario: Designers conducted a usability study for an app they’re developing for a hospital. The app is meant to help patients fill out their paperwork on a computer or from their phone. The designers collected multiple helpful insights to improve their design. One particular insight stood out: The available selection for illnesses and symptoms wasn’t expansive enough. Based on this feedback, what can the team do to improve their design?
The team needs to include a more diverse list of choices for patients when they fill out their online paperwork. The additional choices will help patients accurately record the reasons for their hospital visit. TEST YOUR KNOWLEDGE ON HANDING OFF DESIGNS
Jean-Marie is a UX designer at a design agency. They have just finished their designs. The agency’s lead engineer has requested the design specifications. What can Jean-Marie do to successfully prepare the design for the engineering team?
To successfully send off the design to the engineering team, Jean-Marie will need to put together the details of the design system, mockups, prototypes, and specifications. It will make it easier for the engineers to start the coding process once they have all the references they will need. They should also finalize every aspect of the design before sharing it with the team. Explanation: Since Jean-Marie is working at a small design agency, it’s best practice to have every aspect of the design finalized before sending it off to the engineering team. While this might be the case at larger companies as well, smaller companies typically operate like a relay race. The baton needs to be delivered completely before the race can continue, and the next team member takes over. They should also provide the design system, mockups, prototypes and specifications.
Mona just finished their designs in Figma and is preparing to send them off to production. What can she do to successfully deliver them to the engineering team? Select all that apply.
Figma’s customizable thumbnail feature allows designers to include an array of useful information for other team members, including hyperlinks, image or illustrations, and even the file status. Mona should also test and share the prototypes before delivering the designs to the engineering team. Explanation: Mona can test and share the prototypes before delivering them to the engineering team. That way, she can ensure that the files adequately demonstrate the flow and goal of the design. She should also create thumbnails that include hyperlinks, specifications, and requirements for the design.
There’s no singular “right” way to send designs off to production. Procedures can vary by company and depend on how teams prefer to conduct the development process. Which of the following is true when you’re ready to deliver your design to the engineering team?
Nice work! To successfully send a design to the engineering team, you will need to put together the details of the design system, mockups, prototypes, and specifications. It will make it easier for the engineers to start the coding process since they’ll have all the references they will need.
An entry-level designer is responsible for deciding how the hand-off process flows for their organization.
Entry-level designers will generally not be expected to design hand-off protocols for their organization.
When design and engineering teams work together simultaneously to complete a product, what is one challenge they might face?
Designing and engineering a product simultaneously can lead to team members retracing their steps to redesign or rebuild the product. For example, if a designer wants to change a layout, the engineer building the design would also have to redo some of their already completed work. TEST YOUR KNOWLEDGE ON CASE STUDIES IN UX PORTFOLIOS
Fill in the blank: A case study is a(n) ____ of a design project that typically includes the project goals and objectives, your role in the project, the process your team followed, and the outcome of the project.
A case study is a summarized presentation of a design project. It typically includes the project goals and objectives, your role in the project, the process your team followed, and the outcome of the project.
Why are case studies beneficial to have in a portfolio? Select all that apply.
Case studies demonstrate a designer’s willingness to collaborate with a team. If a designer is working at a company or an agency, it takes more than one person to complete the interview process, document data, and create actionable insights from a case study. It also serves as a visible demonstration of design knowledge. Explanation: A case study is a presentation of a project, which serves as a visible demonstration of design knowledge and demonstrates a designer's collaborative skills.
Harjot is organizing a case study of the website they designed for a local architect. The architect specializes in designing futuristic, eco-conscious homes for clients looking to build from the ground up. What type of information should Harjot include in the case study for their portfolio? Select all that apply.
Each design project has its challenges. Recruiters and hiring managers want to see the challenges a designer faced and how they overcame them. The case study should also include a hero image, goals, and objectives. Explanation: Since the website displays the types of home designs that are offered, it would be a good idea to include a hero image that demonstrates the features Harjot designed into the website. The case study should also highlight the project's challenges, goals, and objectives. Explanation: Every design project has goals and objectives, whether that includes a time constraint, themes, and features that are requested by the client. Displaying goals and objectives in a case study allows hiring managers and recruiters to see how a designer approached and accomplished them. The case study should also include a hero image, and highlight the project's challenges.
How should case studies be presented in a portfolio? Select all that apply.
There’s a lot of background work done to make a design project possible, but they should still be visually appealing, concise, and engaging. Much of UX design is visual, so case studies should be presented in a way that appeals to recruiters and hiring managers. Not everyone that will examine a designer’s case studies will be a designer. Explanation: It’s important to display case studies in a way that’s concise, engaging, and visually appealing. They should tell a cohesive story that shows how the designer improved the user experience through their expertise.
What questions should a designer consider to determine if their designs are final? Select all that apply.
Before marking a design iteration as complete, participants or users should be able to interact with and interpret the designs without extra guidance. That means the designer created a design that’s intuitive and easy to navigate. It's also important to consider if the designs are true representations of the intended user experience, and if placeholder texts have been replaced with finalized assets. Explanation: Before finalizing a design, the designer should make sure all placeholder texts, icons, and imagery have been replaced with finalized assets. That way, the engineering team will have a complete package to bring into production. It's also important to consider if the designs are true representations of the intended user experience, and if participants are able to interact with the designs without extra help. Explanation: After completing rounds of analysis, tests, and interviews, it’s important to assess if the final designs are representative of what users actually want and need. It's also important to consider if placeholder texts have been replaced with finalized assets, and if participants are able to interact with the designs without extra help.
The app you have created is now in the final stages. You are ready to test it and conduct a usability study. What should you do before you begin a usability study?
At what point in your design process should you conduct a usability study?
You are conducting a usability study for your prototype and are guiding users through the study. What type of usability study are you conducting?
You have gathered all of the data from the usability study, organized it, identified themes, and now have actionable insights. Now, you are ready to update your design. Where should you make the updates?
You have implemented all of the feedback from the usability study and have iterated your designs. You think you are done and are ready to move the prototype into production. What are some questions you can ask to identify when you are done with design iterations and ready to hand off to production? Select all that apply.
You have created a custom thumbnail of your design files in preparation for the production hand off. What information would be helpful to include for the production team?
In preparation for hand off, you have created custom thumbnails of your design files. What actions did you take in Figma to do this?
You are working on your portfolio and adding case studies to each project. Which factors should you consider when creating case studies?
You are constructing your case study for a project that will go in your portfolio. How much detail of the research you conducted should you include in the case study?
You are creating a case study for your portfolio for the app you just designed. Which parts of your design visuals should be included? Select all that apply.
You are writing the UX research plan in preparation for the usability study you will conduct on your app. You need to write key performance indicators (KPIs) to measure certain elements in your app. What are some examples of key performance indicators (KPIs) that you may include? Select all that apply.
You have started to transition your observations from the usability study into actionable insights. To start, you have gathered and organized the data. What should you do next with the data?
You have finished implementing feedback from the usability study. You have iterated your designs. You feel that you are ready for next steps. What should you do with your designs next?
You have been working in Figma for the majority of your app creation. You have collaborated with numerous partners throughout the design process. Who are you most likely to have collaborated with? Select all that apply.
You have shared the design files in Figma with several groups. You have given the project manager viewer access. What does this access allow the project manager to do within the design files? Select all that apply.
You have finished the project and have added it to your portfolio. You need to add case studies to your portfolio. Which projects in your portfolio should include case studies?
Based on the usability study, you have made revisions to a few pages in your mockups. What should you do with the outdated pages from your mockups?
You have handed off your designs to production. When will you iterate on your designs again?
You have provided some of the production team viewer-only access to the Figma design files. What can they do with this type of access?
You have added your designs to your portfolio. Now, you need to add case studies to each portfolio piece. What should your case studies include? Select all that apply.
When you are writing a case study for your portfolio project, it is a good idea to tell a story. Which is the best way to structure the story?
In the case study you are writing for the portfolio project, why is it important to include the results of the usability testing you conducted?
You are in the midst of writing your UX research plan. You have already identified your research goals. Now, you will write the research questions. What types of questions should you write?
After the usability study is complete, you have gathered and organized the user feedback. Then, you have identified common themes that were prevalent in the user feedback. What should you do next?
You are ready to hand off your Figma design files to production. What can you do to help orient new collaborators or the development team to the files?
You are almost finished with your designs and are starting to think about showcasing them to hiring managers. When should you update your portfolio?
The usability study provided insights showing that the calendar you used in the prototype was not easy to use. You are now revising your mockups and need to replace the calendar. What is an efficient way to do this?
Users are independently going through the usability study on your prototype. What type of usability study is this?
You have planned the usability study for your prototype and have conducted the research through user testing. What is your next step?
You are almost finished with the case study for your portfolio project. What is one of the last things you should include in your case study?
Ready to test your recall?
Fill in the blank: A high-fidelity prototype must have visual elements, navigation, and _____.
How confident are you in this answer?