PRACTICE QUIZ
What does information architecture (IA) do?
Information architecture refers to the organization of content that helps users understand where they are in a product, and where the information they want is. It organizes a website or an app like a map.
How does information architecture (IA) support the wireframe creation process?
Information architecture provides clearer direction and understanding when designers begin the wireframe creation process. Stronger information architecture typically results in a better thought-out product, and it helps designers to visualize how each screen will be navigated by users.
Fill in the blank: Information architecture helps engineers _____.
Information architecture helps engineers understand how to organize the data so, when it is ready for development, the product matches the visual designs. It’ll make their jobs easier! TEST YOUR KNOWLEDGE ON GESTALT PRINCIPLES
Fill in the blank: Similarity, proximity, and common region are examples of Gestalt Principles. Designers can use these principles to _____ content so it is visually pleasing and easier to understand.
Designers use these principles to organize content on apps and websites so it’s easier to understand and visually pleasing for the user.
You are developing a website for a clothing resale company. On the homepage, you choose to display the top-selling brands, by logo, in the center of the page. The logos are grouped with a border around them. Which of the following Gestalt Principles apply in this scenario?
The common region principle applies to this webpage because the brands are grouped together.
To adhere to the Gestalt principle of proximity, what should a designer do?
To adhere to the Gestalt principle of proximity, a designer should put elements closer together.
Fill in the blank: Gestalt principles describe how humans _____ similar elements, recognize patterns, and simplify complex images when they perceive objects.
Gestalt principles describe how humans group similar elements, recognize patterns, and simplify complex images when they perceive objects. Humans naturally notice the whole of something before noticing its parts. For example, when people look at clouds in the sky, they often try to find similarities to things they’ve seen before, such as shapes, patterns, animals, and other objects.
What are some benefits of using information architecture (IA) to generate a sitemap? Select all that apply.
Strong information architecture establishes clearer wireframes leading to a well thought-out product, which can help engineers better understand how to organize the data during development. It also helps stakeholders to review designs and evaluate content type and placement. Explanation: Information architecture organizes and defines the overall structure for an app or site. It makes engineers’ jobs easier because they can match the development of a product to its visual design. It also helps stakeholders to review designs and evaluate content type and placement. Explanation: Stakeholders can use information architecture to determine if the content would help meet business and user goals. It also helps to organize and define overall structure for an app or site, and helps engineers understand how to organize the data during development.
What are the benefits of using paper wireframes? Select all that apply. d Paper wireframes are low commitment. (CORRECT)
Since a pen and paper are the only necessary tools to create paper wireframes, they allow for low-cost, rapid iteration. Designers can create multiple wireframes in less time. They are also considered low commitment because they only require a pen and paper. Explanation: Paper wireframes are considered low commitment because they are created quickly with a pen and paper. They also allow for rapid iterations.
What are some advantages of building a digital wireframe? Select all that apply.
Using digital wireframes helps designers pay attention to details and get the structure right. They)re also easier to share than paper wireframes. Explanation: Sharing a link to a digital wireframe allows for faster sharing with more people than sharing a paper wireframe. They also let designers pay more attention to structural details.
What is the most efficient way to create a straight line?
The most efficient way to create a perfectly straight line is to hold the shift key as you draw.
Which method is most effective for creating even spacing between multiple elements?
The most effective way to create even spacing between multiple elements is to select “Distribute vertical spacing” in the design panel.
Which Gestalt principle takes elements that look alike and gives them perceived identical functions?
Elements that look similar are perceived to have the same function is the Gestalt principle of similarity, which can be based on their shape, size, or color.
You are starting to design the information architecture (IA) for an app. What research should you consider to help inform your IA? Select all that apply.
Your engineers thank you for providing solid information architecture. Why is this important to them?
You have finished your information architecture. Now, it is time to move on to the next step in your designs. What is that next step?
You have created a list of information to include on the first page of your wireframe. Now, it is time to draw. The junior UX designer asks you how many drawings you will do for one wireframe page. What might you say?
You created a list of information for the page you are wireframing. Then, you came up with five versions of the wireframe for that page and selected your favorite. What is your next step?
You give the client a preview of the digital wireframe. They ask why you have used gibberish type text instead of the actual content. How would you respond?
The junior UX designer you are mentoring asks how you know when you are ready to transition from paper wireframes to digital wireframes. You tell them you will make the transition when you decide the paper wireframes are complete. What might “complete” mean in this context?
In your digital wireframe, you have a carousel. What do you need to do in Figma in your wireframes to demonstrate that the carousel will display multiple pages of content? Add text to explain that the carousel will display multiple pieces of content.
In the digital wireframe page for your homepage, you have grouped the buttons About Us, Mission, and Vision in the same area. Which Gestalt principle have you employed?
Your client asks you to add a few clickable elements to the digital wireframes just for entertainment. These elements do not match the content or the intent of the app. You recommend against this citing that information for users should not be unexpected or unnecessary. Which principle of information architecture does this relate to?
You are working with your client on the designs for a new app and have started creating the information architecture. Your client does not understand why this step is necessary. What might you tell them about the benefits of information architecture? Select all that apply.
You are at the beginning stages of creating the information architecture (IA) for an app. What are elements that you should know about that will help inform the IA? Select all that apply.
You are working with a junior UX designer and ask them to tell you their goals when creating wireframes. What answers are you hoping to hear? Select all that apply.
You have created paper wireframes. You are not sure if you are ready to transition to digital wireframes. What questions could you ask yourself to help determine if you are reading to move from paper to digital wireframes? Select all that apply. Are my wireframes ready for basic functionality?
In your digital wireframes in Figma, you have used different thicknesses for lines. What might this convey?
You will use Gestalt principles while designing your digital wireframes. What are some examples of how you might employ these principles? Select all that apply.
You are working on the information architecture for the app you are designing. You have different ways for users to access information—from the menu, via clickable icons, and through a search bar. Which principle of information architecture does this method address?
Your mentor tells you an important skill in design is adapting your information architecture (IA) approach at different stages of a project. Why might this be? Select all that apply.
The junior UX designer you are teamed up with is new to the design process. They would like to practice wireframing. What is one way you could suggest for them to practice?
You have created several versions of a wireframe for the homepage of your app. You have selected the best one and refined it. What is the next thing you should do?
In your digital wireframe, you have used same-sized circles with X’s inside them as placeholders for images. The circles will serve identical functions in your design. Which Gestalt principle does this tactic use?
You walk your client through the design process and tell them you are ready to create paper wireframes. They ask you the benefits of taking this step. What might you say? Select all that apply.
You have moved from paper wireframes to digital wireframes for the app you are designing. What is one clear benefit of this transition when it comes to working with your stakeholders?
You know you will use Figma for your digital wireframes and in the next phases of the design process. You have gotten as far as uploading your paper wireframes to Figma. What is your next step in Figma?
You sketch out the information architecture for the app you are designing. You show it to your client and they note that it looks like a family tree. What is your client referring to in the information architecture?
You ask your client to review the information architecture (IA) of the app designs. What should they evaluate when reviewing the IA?
You have wireframed a bunch of pages for the app but have lost track of the pages you still need to address. What can you refer to to see which ones you still have to wireframe?
You have created paper wireframes. You are not sure if you are ready to transition to digital wireframes. What questions could you ask yourself to help determine if you are reading to move from paper to digital wireframes? Select all that apply.
You have transitioned your paper wireframes to digital wireframes. You know you need to add content to the digital wireframes. How much content should you include?
You are transitioning the paper wireframes into digital wireframes. What should you include in the digital wireframes?
In your digital wireframe, you have a carousel. What do you need to do in Figma in your wireframes to demonstrate that the carousel will display multiple pages of content?
You are ready to start drawing wireframes. What should you do first before you start drawing?
Ready to test your recall?
What does information architecture (IA) do?
How confident are you in this answer?