chore(curriculum): add user centered design transcripts (freeCodeCamp#58332)

Author: ihechikara

curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672aa6ee9011775b27e23399.md

@@ -8,29 +8,43 @@ dashedName: what-is-user-centered-design
 
 # --description--
 
-Watch the video lecture and answer the questions below.
+Watch the video or read the transcript and answer the questions below.
+
+# --transcript--
+
+What is user-centered design?
+
+User-centered design is a web development approach that prioritizes the end user, from their needs to their preferences and limitations. The goal of user-centered design is to craft a web page that is intuitive, efficient to use, and pleasing for your users to interact with.
+
+One of the first aspects of user-centered design is considering your target demographics. For example, if your intended user-base is younger, you might leverage more flashy eye-catching designs that grab their attention immediately. For an older audience, you might focus more on clear and streamlined designs without distractions.
+
+Another aspect to consider is the goal of your end users. For example, if you're building an e-commerce page for your products, you probably don't want to advertise someone else's products on your page. But if you're building a personal blog, you might include advertisement elements to generate revenue from passive readers.
+
+User behavior is an important factor as well. You'll want to leverage an analytics tool, like Google Analytics, to measure how your users engage with your pages. This can reveal areas where users might be getting "stuck" and leaving your page, or opportunities to improve the overall interaction flow.
+
+A key to user-centered design is to actually involve your users. Providing a feedback channel where they can share their experiences and pain points with your site allows you to capture vital information and iterate further to improve. Ultimately, user-centered design means you need to put the user at the forefront of your decision making, whether that's through research or direct feedback.
 
 # --questions--
 
 ## --text--
 
-What is the main goal of user-centred design?
+What is the main goal of user-centered design?
 
 ## --answers--
 
 To make the website visually appealing.
 
 ### --feedback--
 
-User-centred design means focusing on the user.
+User-centered design means focusing on the user.
 
 ---
 
 To prioritize the developer's preferences.
 
 ### --feedback--
 
-User-centred design means focusing on the user.
+User-centered design means focusing on the user.
 
 ---
 
@@ -42,7 +56,7 @@ To reduce development costs.
 
 ### --feedback--
 
-User-centred design means focusing on the user.
+User-centered design means focusing on the user.
 
 ## --video-solution--
 

curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672bafd715f6ba77d57f3ec0.md

@@ -8,7 +8,25 @@ dashedName: what-is-user-research-and-testing-and-user-requirements
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+Watch the video or read the transcript and answer the questions below.
+
+# --transcript--
+
+What is user research/testing, and user requirements?
+
+User research is the systematic study of the people who use your product. The goal is to measure user needs, behaviors, and pain points.
+
+User research comes in many forms. Perhaps one of the most common is the Net Promoter Score, or NPS. The NPS measures how likely your users are to recommend your product to a friend. NPS is measured through a survey offered at key milestones along the user's journey, such as after 7 days, 30 days, and 90 days. NPS is measured on a scale of 0 to 10, with 9 and 10 indicating an active promoter of your site.
+
+Another research vector is an exit interview. This is a survey you show to your users when they cancel a subscription or delete an account. Data from this survey can give you insight into the factors causing user churn, so you can address them.
+
+User testing, on the other hand, refers to the practice of capturing data from users as they interface with your application. For example, a video game going through beta testing is a form of user testing. One you might run into as a web developer is A/B testing. A/B testing involves shipping a new feature to a randomly selected subset of your user base. You can then leverage analytics data to determine if the feature is beneficial.
+
+Finally, user requirements refer to the stories or rubric that your application needs to follow. This can inform the development process. User requirements might be defined by user research, or industry standards. They can even be defined by stakeholder input.
+
+These requirements may be functional, meaning they dictate how your application should work, or non-functional, meaning they define how your application should behave. User requirements are not static, either. The information from both user testing and user research can impact the requirements, and they will change as your user base changes.
+
+Understanding the difference is essential for collecting the most accurate data so you can deliver the best experience for your end users. 
 
 # --questions--
 

curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672bafe4ef812b78696b0e27.md

@@ -8,7 +8,21 @@ dashedName: what-are-best-practices-for-designing-a-dark-mode-feature
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+Watch the video or read the transcript and answer the questions below.
+
+# --transcript--
+
+What are best practices for designing a dark mode feature?
+
+Dark mode is a special feature on web applications where you can change the default light color scheme to a dark color scheme. This helps reduce eye strain and improve readability in low-light conditions. When designing your dark mode features, it is important to understand best practices to ensure that your dark mode feature is effective and user-friendly.
+
+The first consideration is the avoidance of saturated colors in dark mode. Saturated colors are colors that are bright and intense. For example, a bright magenta button against a dark gray background can be too intense and cause eye strain. Instead, you should use desaturated colors in dark mode. Desaturated colors are colors that are less intense, have a lower saturation level, and more comfortable to look at in dark mode.
+
+Another consideration with dark mode is the use of pure black backgrounds with white text. While this high contrast can be effective, it can also be too harsh on the eyes. Instead, consider using a dark gray background with light gray text for a softer contrast. Text will be easier on the eyes and more comfortable to read in dark mode.
+
+Another consideration is the use of dark mode with the site's brand identity. A brand identity is a set of visual elements that represent a brand, such as the logo, colors, and typography. When implementing dark mode, you should consider how the dark mode feature is consistent with your brand's colors and style. It is fine to have the brand icon and buttons at full saturation, while the surrounding elements are desaturated.
+
+In general, when it comes to design, you always want to be mindful of the user experience and contrast levels. Dark mode is no exception, and by following these best practices, you can create a dark mode feature that is effective and user-friendly.
 
 # --questions--
 

curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672baff13bc5b3789691c75c.md

@@ -8,7 +8,31 @@ dashedName: what-are-best-practices-for-designing-breadcrumbs
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+Watch the video or read the transcript and answer the questions below.
+
+# --transcript--
+
+What are best practices for designing breadcrumbs?
+
+When it comes to web design, there are many types of navigational aids you can use. Examples include top navigation bars, sidebars, and footers. But if your site is on the more complex side with deeper levels of navigation, you might want to consider using breadcrumbs.
+
+Breadcrumbs are a navigation aid that shows the user where they are in the site's hierarchy. Here is an example of what breadcrumbs look like for a mock-up electronics website:
+
+```md
+Home / Electronics / Phones / Smartphone XYZ
+```
+
+In most websites, breadcrumbs are displayed at the top of the page, showing the user the path they took to get to the current page. Starting from the `Homepage`, the user navigated to the `Electronics` category, then to the `Phones` category, and finally to the `Smartphone XYZ` product. You have probably interacted with breadcrumbs on a website as you were searching for a product or specific piece of information.
+
+The use of breadcrumbs is helpful because it can help users understand where they are in the site's hierarchy and how to navigate back to the previous pages. This is especially useful when a user has come from a search result or an external link and needs to understand the context of the page they are on.
+
+When it comes to designing breadcrumbs, there are a few considerations to keep in mind. The first is to decide on what the separator will be. The separator is the character that separates the different levels of the hierarchy. Common separators include the greater than sign (`>`), right angle quotation marks (`»`) ,and the forward slash (`/`).
+
+The second consideration is the placement of the breadcrumbs. Breadcrumbs are typically placed at the top of the page, either above or below the main navigation bar. Users shouldn't have to struggle to find the breadcrumbs, so make sure they are visible and easy to locate.
+
+Another consideration is the size of the breadcrumbs. You want to make sure the breadcrumbs are large enough to be easily read, but not so large that they take up too much space on the page. Remember, the breadcrumbs aren't meant to serve as a primary navigation tool, but rather as a secondary navigational aid. In websites where there is a lot of information on a page, users can easily see where they are in the hierarchy and navigate back to previous pages using breadcrumbs.
+
+So when should you use breadcrumbs on your site? If your site is simple and has a shallow hierarchy, breadcrumbs might not be necessary. A shallow hierarchy means that the site has only a few levels of navigation, so breadcrumbs might not add much value. Typically, you will see breadcrumbs on e-commerce sites, news sites, and other sites with a deep hierarchy like technical documentation sites.
 
 # --questions--
 

curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672baffc684be178dd02fa06.md

@@ -8,7 +8,23 @@ dashedName: what-are-best-practices-for-designing-cards
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+Watch the video or read the transcript and answer the questions below.
+
+# --transcript--
+
+What are best practices for designing cards?
+
+Card components are a very common occurrence in e-commerce, social media, and news sites. They are used to help display information in a structured way. When you are designing your cards, it is important to understand best practices so your users can easily understand the information you are trying to convey.
+
+The first consideration for card design should be simplicity. You don't want your cards to be visually cluttered or display too much information. For example, if a card design is visually cluttered, there will be too much information for the user to process all at once. Having less information and good spacing between items on the card makes it easier for the user to process the information, and allows for multiple cards on the page.
+
+Another thing to consider is where the user can click on the card. Some card designs will have a single button, making it obvious where the user can click. Other card designs will have the entire card clickable. When the user hovers over any part of the card, the card will change color or have a shadow effect to indicate that the card is clickable. Whatever design you choose, it needs to be consistent throughout your site and easy for the user to understand. 
+
+Another consideration is the use of media on your cards. Choosing high-quality media can significantly enhance the user experience. If you are using images or videos for say a product card, the higher the quality the more the user will be interested in that product. But if you use poor media quality, then the user might not trust the quality of your products and services. 
+
+One of the last things to consider is the use of color hierarchy. You want to make sure that the most important information on the card is the most prominent. You can use bright colors for important elements like a call-to-action button, and light colors for less important items on a card.
+
+As you continue to work on web applications, keep in mind the different best practices for card design. This will help you create better user experiences for your users.
 
 # --questions--
 

curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672bb009952c7a7904a750cb.md

@@ -8,7 +8,25 @@ dashedName: what-are-best-practices-for-designing-infinite-scrolls
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+Watch the video or read the transcript and answer the questions below.
+
+# --transcript--
+
+What are best practices for designing infinite scrolls?
+
+Infinite scrolling is a design pattern that loads more content as the user scrolls down the page. Oftentimes, this is used on social media sites like Twitter. For example, if you are logged in and want to see more tweets, you can scroll down and more tweets will load. This is an example of infinite scrolling.
+
+Infinite scrolling is also used as a substitute for pagination. Pagination is a design pattern that breaks up content into pages. This is often used when there is a lot of content to display. An example of pagination is when you search for something on Google and you see the search results on multiple pages. With pagination, you have to click on a button to go to the next page. With infinite scrolling, you just keep scrolling down and more content will load.
+
+As you incorporate infinite scrolling into your design, there are a few best practices to keep in mind. The first consideration is to provide a "Load More" button that loads the next set of results when the user clicks on it. This is a good way to give the user control over when they want to see more content.
+
+Another consideration would be to add a "Back" button. This gives users the ability to go back to the previous page without having to scroll all the way back up. This creates a better user experience and gives them more control over their browsing experience.
+
+Sometimes you will see designs with a "Back to the top" button which leads users back to the top of the page of results. Another consideration is to provide a loading indicator. Users should have a clear indication that more content is being loaded; otherwise, they might think that the page is broken.
+
+One of the last considerations would be to keep the footer accessible to the user. If the footer contains important information, then it should be accessible to the user at all times.
+
+In conclusion, infinite scrolling is a great way to display content on your website. However, you should keep in mind the best practices when designing your infinite scroll so that you can provide the best user experience possible.
 
 # --questions--
 

curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672bb015cfc889794359c4e0.md

@@ -8,7 +8,23 @@ dashedName: what-are-best-practices-for-designing-modal-dialogs
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+Watch the video or read the transcript and answer the questions below.
+
+# --transcript--
+
+What are best practices for designing modal dialogs?
+
+What is a modal? It's the type of pop-up that a website might show you on top of their content.
+
+The content behind a modal is usually dimmed. This helps the user visually focus on the area you want them to interact with – in this case, the modal.
+
+It's always a good idea to allow the user to click outside of the modal to close it.
+
+You'll often see very prominent buttons on modals. These are called CTAs, or call-to-action. You want these to be easily identifiable since the purpose of interrupting the user's flow with a modal is to prompt them to take a specific action.
+
+Modals should also have a close button. While you may really want the user to click on your CTAs, it's important to give them an option to back out of the modal and resume whatever they were previously doing.
+
+There are, of course, accessibility concerns with modals, such as correctly managing focus on elements. However, if you use these general practices as your starting point, you'll have a solid foundation to build on.
 
 # --questions--
 

curriculum/challenges/english/25-front-end-development/lecture-user-centered-design/672bb02009ffc0797ca567ab.md

@@ -8,7 +8,25 @@ dashedName: what-are-best-practices-for-progress-indication-on-forms-registratio
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+Watch the video or read the transcript and answer the questions below.
+
+# --transcript--
+
+What are best practices for designing progress indication on forms, registration, and setup?
+
+Progress indication is a way to show users how far they are in a process. It can be used in forms, registration, and setup processes. The goal is to help users understand where they are in the process and how much more they need to do.
+
+For example, you can use a progress indication bar to show users what is left to do when filling forms. You don't want to create a situation where the user needs to fill out a lengthy form and they don't know how many more steps they need to complete. Transparency is key so the user knows whether they have enough time to sit down and complete the form or if they need to come back later.
+
+When designing a progress indication section, there are a few best practices to keep in mind. The first consideration is to keep it simple. You don't want to overwhelm the user with too much information where they get frustrated and leave the site.
+
+The second consideration is to make it possible to go back to previous steps. This is important because users may want to go back and check their previous answers or make changes.
+
+Another consideration is to make the progress indication section easy to find. If the user can't find it, they won't know how far they are in the process.
+
+The last consideration is to have clear section titles, percentages, or steps. If you just have a progress bar with no context, the user won't know what it means.
+
+These are just a few best practices to keep in mind when designing progress indication on forms, registration, and setup processes. Study a few examples on big websites and see how they implement progress indication. Then test your design with real users to see how well it works.
 
 # --questions--