This media is not supported in your browser
VIEW IN TELEGRAM
13. Working with Information Architecture
Paul discusses the opportunities for user research and testing during the information architecture stage of a project. He introduces the concept of top tasks, which involves identifying the most critical tasks that users want to complete on a website or app. He also mentions the process of top task analysis, but acknowledges that it can be time-consuming and offers alternative methods for identifying top tasks.
#lesson
Paul discusses the opportunities for user research and testing during the information architecture stage of a project. He introduces the concept of top tasks, which involves identifying the most critical tasks that users want to complete on a website or app. He also mentions the process of top task analysis, but acknowledges that it can be time-consuming and offers alternative methods for identifying top tasks.
#lesson
Media is too big
VIEW IN TELEGRAM
14. Top Task Analysis Lite
Paul introduces the concept of "top task analysis light" as a faster and easier alternative to traditional top task analysis. He explains the steps involved in conducting a top task analysis, including gathering a list of potential tasks, creating a survey using a tool like PollUnit, collecting user votes and suggestions, and cleaning up the results. The importance of focusing on top tasks and using them to establish top-level navigation in information architecture is also discussed in this segment.
#lesson
Paul introduces the concept of "top task analysis light" as a faster and easier alternative to traditional top task analysis. He explains the steps involved in conducting a top task analysis, including gathering a list of potential tasks, creating a survey using a tool like PollUnit, collecting user votes and suggestions, and cleaning up the results. The importance of focusing on top tasks and using them to establish top-level navigation in information architecture is also discussed in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
15. Card Sorting to Top-Level Navigation
Paul discusses how card sorting can be used to allow users to organize information in a way that makes sense to them, and they provide an example of an open card sort. He also shares tips for making decisions about top-level navigation, such as keeping options to a minimum, using clear and distinct labels, and not fearing clicks.
#lesson
Paul discusses how card sorting can be used to allow users to organize information in a way that makes sense to them, and they provide an example of an open card sort. He also shares tips for making decisions about top-level navigation, such as keeping options to a minimum, using clear and distinct labels, and not fearing clicks.
#lesson
Media is too big
VIEW IN TELEGRAM
16. Expanding Your Information Architecture
Paul discusses the process of expanding the information architecture by integrating more tasks and accommodating subsections. He explains how to conduct a closed card sort to gather user input on task categorization and how to analyze the results using an agreement score. He also provides guidance on organizing tasks into subsections and suggests using ChatGPT to help with the process.
#lesson
Paul discusses the process of expanding the information architecture by integrating more tasks and accommodating subsections. He explains how to conduct a closed card sort to gather user input on task categorization and how to analyze the results using an agreement score. He also provides guidance on organizing tasks into subsections and suggests using ChatGPT to help with the process.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
17. Testing Your Information Architecture
Paul explains the importance of testing the information architecture and introduces tree testing as a method to validate the structure. There are three types of content to test: low agreement score, not sure category, and top tasks buried in subsections. He also addresses potential problems and explains how to interpret the results, focusing on success score, directness, and time taken to complete tasks.
#lesson
Paul explains the importance of testing the information architecture and introduces tree testing as a method to validate the structure. There are three types of content to test: low agreement score, not sure category, and top tasks buried in subsections. He also addresses potential problems and explains how to interpret the results, focusing on success score, directness, and time taken to complete tasks.
#lesson
Media is too big
VIEW IN TELEGRAM
18. Testing Your Design Concepts
Paul discusses the importance of testing design concepts and mockups. He explains that testing can lead to a better product, resolve disagreements, ensure momentum, and save money. He also introduces different types of tests, such as testing comprehension and aesthetics, and suggests using tools like Lyssna for conducting these tests.
#lesson
Paul discusses the importance of testing design concepts and mockups. He explains that testing can lead to a better product, resolve disagreements, ensure momentum, and save money. He also introduces different types of tests, such as testing comprehension and aesthetics, and suggests using tools like Lyssna for conducting these tests.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
19. Testing User Comprehension
Paul discusses the concept of the "eight-second test," also known as the "five-second test," to assess the effectiveness of visual communication on a webpage. The test involves showing a design concept to a user for eight seconds and then asking them to recall specific details or their first impression. He explains how to set up and run the test, and highlights the benefits of quick and easy feedback it provides.
#lesson
Paul discusses the concept of the "eight-second test," also known as the "five-second test," to assess the effectiveness of visual communication on a webpage. The test involves showing a design concept to a user for eight seconds and then asking them to recall specific details or their first impression. He explains how to set up and run the test, and highlights the benefits of quick and easy feedback it provides.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
20. Testing Aesthetics
Paul discusses the importance of testing aesthetics in design projects and explains that testing with users helps ensure a compelling design and reduces arguments. He also provides two options for testing aesthetics: preference tests and semantic differential surveys.
#lesson
Paul discusses the importance of testing aesthetics in design projects and explains that testing with users helps ensure a compelling design and reduces arguments. He also provides two options for testing aesthetics: preference tests and semantic differential surveys.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
21. Testing Usability
Paul discusses the importance of testing usability on mock-ups and how it can address stakeholder concerns and catch issues early. He introduces different options for testing usability, including the "five-second" test and the "first click" test. He also mentions the possibility of using eye-tracking tools, such as RealEye or eye-tracking simulation software, to gain insights into where people will look at a design.
#lesson
Paul discusses the importance of testing usability on mock-ups and how it can address stakeholder concerns and catch issues early. He introduces different options for testing usability, including the "five-second" test and the "first click" test. He also mentions the possibility of using eye-tracking tools, such as RealEye or eye-tracking simulation software, to gain insights into where people will look at a design.
#lesson
Media is too big
VIEW IN TELEGRAM
22. Testing Conclusion
Paul discusses the importance of testing early in the design process and emphasizes the need for real content rather than placeholder text like lorem ipsum. He explains how to create draft content by extracting questions and bullet points from the information architecture and using tools like ChatGPT and Hemingway to generate website content. He also shares his approach to presenting design progress to clients, focusing on a continuous feedback loop rather than a traditional sign-off process.
#lesson
Paul discusses the importance of testing early in the design process and emphasizes the need for real content rather than placeholder text like lorem ipsum. He explains how to create draft content by extracting questions and bullet points from the information architecture and using tools like ChatGPT and Hemingway to generate website content. He also shares his approach to presenting design progress to clients, focusing on a continuous feedback loop rather than a traditional sign-off process.
#lesson
Media is too big
VIEW IN TELEGRAM
23. Testing Prototypes
Paul discusses the importance of prototyping and the opportunities for testing that come with it. He explains the benefits of realistic and interactive prototypes and discusses the options for usability testing, including facilitated and un-facilitated testing. He also explores the pros and cons of remote testing versus in-person testing, and highlights the importance of testing specific aspects of the prototype, such as navigation, learnability, efficiency, and satisfaction.
#lesson
Paul discusses the importance of prototyping and the opportunities for testing that come with it. He explains the benefits of realistic and interactive prototypes and discusses the options for usability testing, including facilitated and un-facilitated testing. He also explores the pros and cons of remote testing versus in-person testing, and highlights the importance of testing specific aspects of the prototype, such as navigation, learnability, efficiency, and satisfaction.
#lesson
Media is too big
VIEW IN TELEGRAM
24. Preparation for Usability Testing
Paul discusses preparation and scheduling for conducting usability testing, including. He covers topics such as the necessary equipment and environment for in-person testing, the importance of screen recording apps, and how to plan tasks and scenarios for testing. He also provides tips for facilitating the sessions, including making participants feel comfortable, emphasizing that the site is being tested and not the participant, and asking for permission to record the sessions.
#lesson
Paul discusses preparation and scheduling for conducting usability testing, including. He covers topics such as the necessary equipment and environment for in-person testing, the importance of screen recording apps, and how to plan tasks and scenarios for testing. He also provides tips for facilitating the sessions, including making participants feel comfortable, emphasizing that the site is being tested and not the participant, and asking for permission to record the sessions.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
25. Running Usability Testing
Paul discusses the process of conducting both facilitated and unfacilitated usability testing. He provides tips for facilitating in-person testing, such as asking about participants' expectations, prompting them to talk, and allowing them to struggle. He also explains how to set up and conduct unfacilitated testing using tools like Lookback, highlighting the benefits of obtaining unbiased and unfiltered feedback.
#lesson
Paul discusses the process of conducting both facilitated and unfacilitated usability testing. He provides tips for facilitating in-person testing, such as asking about participants' expectations, prompting them to talk, and allowing them to struggle. He also explains how to set up and conduct unfacilitated testing using tools like Lookback, highlighting the benefits of obtaining unbiased and unfiltered feedback.
#lesson
Media is too big
VIEW IN TELEGRAM
26. Working with the Results
Paul discusses the importance of using the results of usability testing and how to prioritize the issues that arise from the testing. He also emphasizes the impact that usability testing can have on culture and stakeholders, and provides strategies for encouraging attendance and engagement in usability testing sessions. He also touches on the dynamic of observers during usability testing and how to manage expectations when refactoring or remaking an existing product.
#lesson
Paul discusses the importance of using the results of usability testing and how to prioritize the issues that arise from the testing. He also emphasizes the impact that usability testing can have on culture and stakeholders, and provides strategies for encouraging attendance and engagement in usability testing sessions. He also touches on the dynamic of observers during usability testing and how to manage expectations when refactoring or remaking an existing product.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
27. Testing Existing Websites or Apps
Paul discusses the importance of post-launch testing and iteration for websites and apps. He explains that the best opportunity to improve an application or website is after it has gone live, as this is when you can observe real user behavior at scale. He also outlines the process of post-launch optimization, which involves identifying problems, diagnosing them, proposing solutions, testing those solutions, and launching the best option.
#lesson
Paul discusses the importance of post-launch testing and iteration for websites and apps. He explains that the best opportunity to improve an application or website is after it has gone live, as this is when you can observe real user behavior at scale. He also outlines the process of post-launch optimization, which involves identifying problems, diagnosing them, proposing solutions, testing those solutions, and launching the best option.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
28. Identifying Points of Friction
Paul walks through the process of identifying and resolving issues on problem pages to improve the user experience. He explains how to use analytics to identify problem pages through exit rates, bounce rates, rage clicks, dead clicks, excessive scrolling, and quickbacks. He also explains how to narrow down the exact issue by analyzing heat maps, session recordings, and utilizing A/B testing to test potential solutions on problem pages.
#lesson
Paul walks through the process of identifying and resolving issues on problem pages to improve the user experience. He explains how to use analytics to identify problem pages through exit rates, bounce rates, rage clicks, dead clicks, excessive scrolling, and quickbacks. He also explains how to narrow down the exact issue by analyzing heat maps, session recordings, and utilizing A/B testing to test potential solutions on problem pages.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
29. Testing Larger Changes
Paul discusses the different tools available for A-B testing and their pros and cons. He mentions tools like Convert, Crazy Egg, and Visual Website Optimizer, highlighting their features and costs. He also explains when it might be more appropriate to use prototyping instead of A-B testing, particularly for complex interactions or costly changes.
#lesson
Paul discusses the different tools available for A-B testing and their pros and cons. He mentions tools like Convert, Crazy Egg, and Visual Website Optimizer, highlighting their features and costs. He also explains when it might be more appropriate to use prototyping instead of A-B testing, particularly for complex interactions or costly changes.
#lesson
Media is too big
VIEW IN TELEGRAM
30. Wrapping Up
Paul wraps up the workshop by summarizing the topics covered, emphasizing the importance of ongoing testing and iteration, and encouraging participants to start implementing even small testing efforts. He also addresses a question about translating testing efforts into monetary value and discusses the value of feedback surveys in different contexts.
#lesson
Paul wraps up the workshop by summarizing the topics covered, emphasizing the importance of ongoing testing and iteration, and encouraging participants to start implementing even small testing efforts. He also addresses a question about translating testing efforts into monetary value and discusses the value of feedback surveys in different contexts.
#lesson
Title: Ultimate CSS Grid & Layout Techniques, v3
Description: CSS Grid is the most important tool in a modern web developer's toolkit for laying out web pages. Learn advanced techniques including subgrid, container queries, and responsive images through hands-on CodePen exercises.
Link: https://frontendmasters.com/courses/css-grid/
Time: 6 hours, 21 minutes
Lessons: 45 / 45
Tags: #course #frontendmasters #720p
Description: CSS Grid is the most important tool in a modern web developer's toolkit for laying out web pages. Learn advanced techniques including subgrid, container queries, and responsive images through hands-on CodePen exercises.
Link: https://frontendmasters.com/courses/css-grid/
Time: 6 hours, 21 minutes
Lessons: 45 / 45
Tags: #course #frontendmasters #720p
Frontendmasters
CSS Grid from Basic to Complex Responsive Layouts | Flexbox, Container Queries & Subgrid
CSS Grid is the most important tool in a modern web developer's toolkit for laying out web pages. Learn advanced techniques including subgrid, container queries, and responsive images through hands-on CodePen exercises.
❤1
Media is too big
VIEW IN TELEGRAM
1. Introduction
Jen Kramer begins the course by sharing a history of page layout from the early days when there was little CSS support through today when there is full support for CSS Grid and advanced layout features like container queries and subgrid. The course website is provided. Exercises will be coded in CodePen. Grid and Flexbox are compared.
- https://grid-flexbox.css.education/
#lesson
Jen Kramer begins the course by sharing a history of page layout from the early days when there was little CSS support through today when there is full support for CSS Grid and advanced layout features like container queries and subgrid. The course website is provided. Exercises will be coded in CodePen. Grid and Flexbox are compared.
- https://grid-flexbox.css.education/
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
2. Grid Overview
Jen explains that CSS Grid is best for layouts that span across rows and columns and sibling elements that need to overlap or cover each other. The properties available for styling depend on whether the styles are applied to a parent or child element.
#lesson
Jen explains that CSS Grid is best for layouts that span across rows and columns and sibling elements that need to overlap or cover each other. The properties available for styling depend on whether the styles are applied to a parent or child element.
#lesson