How to make your notes visual in Obsidian ![rw-book-cover](https://i.ytimg.com/vi/9ELqSWucVYo/maxresdefault.jpg) 🔗 **Source:** [How to make your notes visual in Obsidian](https://www.youtube.com/watch?v=9ELqSWucVYo) > [!note]+ Document Notes > tags: [visual-learning, obsidian, note-taking] > author: Nicole van der Hoeven > source: YouTube > reference: https://www.youtube.com/watch?v=9ELqSWucVYo > date created: 2024-12-28 09:45 > > # 🏷️ Title: How to make your notes visual in Obsidian > <!-- deep-read:sections start --> ## 🧰 Action Inbox - [H1] Install Excalidraw plugin for visual note-taking — cross-platform compatibility/00:02:45 #plugin - [H2] Apply visual hierarchy with Markdown headings — better skimmability/00:04:32 #formatting - [H3] Try ExcaliBrain for contextual note visualization — relationship mapping/00:18:45 #context ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - [Excalidraw Plugin](https://github.com/zsviczian/obsidian-excalidraw-plugin) - [How to Take Smart Notes](https://www.goodreads.com/book/show/34507927-how-to-take-smart-notes) ## 📝 Summary - Nicole demonstrates five ways to use visual elements in Obsidian notes: capture, explain, track, aggregate, and contextualize - Visual learning isn't about learning styles but about combining multiple stimuli for better retention - Key plugins discussed: Excalidraw, Leaflet, Kanban, Tracker, Advanced Slides, Mind Map, ExcaliBrain - Visual elements make notes more skimmable and meaningful without requiring artistic skills - The approach should be practical - take what works and discard the rest ## 📖 Main Content Visual note-taking in Obsidian leverages the scientific finding that combining text, images, and other stimuli improves learning and retention for most people, regardless of supposed "learning styles." The video presents five core use cases for visual elements: capturing information through embedded images or sketches, explaining concepts with better formatting and callouts, tracking progress with visual charts, aggregating information into comprehensive overviews, and contextualizing notes within broader knowledge relationships. Multiple Obsidian plugins enable these approaches, from Excalidraw for hand-drawn elements to ExcaliBrain for relationship visualization, making visual PKM accessible even to non-artists. ## 🗒️ Notes #### ⏱️ [00:00:32](https://www.youtube.com/watch?v=9ELqSWucVYo?t=32) — [H1] Visual learning myth debunked - Key idea: Most people learn better when different stimuli are combined, not based on individual "learning styles" - Evidence: "Presenting text with images and even sound is going to make that even more meaningful for us and easier to remember and retain" #### ⏱️ [00:01:18](https://www.youtube.com/watch?v=9ELqSWucVYo?t=78) — [H1] Five ways to use visuals in notes - Key idea: Visual elements serve five distinct purposes in note-taking systems - Evidence: "You can use them to capture, explain, track, aggregate, or contextualize" #### ⏱️ [00:01:32](https://www.youtube.com/watch?v=9ELqSWucVYo?t=92) — [H2] Capturing with embedded images - Key idea: Simple drag-and-drop of web images enhances notes without creation effort - Evidence: "Sometimes it's enough to just embed an image from the web... just dragging and dropping them into Obsidian" #### ⏱️ [00:02:15](https://www.youtube.com/watch?v=9ELqSWucVYo?t=135) — [H2] Sketchnoting as visual vocabulary - Key idea: Sketchnoting uses simple pictures and visual elements while consuming content - Evidence: "It's all about using the visual vocabulary of pictures and simple images that you take while you are listening to a lecture" #### ⏱️ [00:02:45](https://www.youtube.com/watch?v=9ELqSWucVYo?t=165) — [H1] Excalidraw cross-platform benefits - Key idea: Excalidraw works seamlessly across desktop, mobile, and tablet devices - Evidence: "Even if I draw something on the iPad, it looks great on the Obsidian mobile app for my Android phone and it looks good in the Obsidian desktop app" #### ⏱️ [00:03:45](https://www.youtube.com/watch?v=9ELqSWucVYo?t=225) — [H2] Digital writing should be skimmable - Key idea: All digital content, including personal notes, benefits from scannable formatting - Evidence: "I think that all digital writing should be skimmable... you are still writing for an audience. At least yourself" #### ⏱️ [00:04:32](https://www.youtube.com/watch?v=9ELqSWucVYo?t=272) — [H2] Markdown headings for visual hierarchy - Key idea: Using different heading levels creates visual structure and improves readability - Evidence: "Most themes are going to differentiate between these headings... it's a little bit more palatable when you see things in bullet points and different colors" #### ⏱️ [00:05:23](https://www.youtube.com/watch?v=9ELqSWucVYo?t=323) — [H2] Obsidian Callouts for organization - Key idea: Callouts provide visual compartmentalization and can be collapsed for better focus - Evidence: "Visually, I can see, 'Okay, this is a tip. Now this is like a quote. This is a code block.' It's just a lot easier to compartmentalize" #### ⏱️ [00:07:45](https://www.youtube.com/watch?v=9ELqSWucVYo?t=465) — [H2] Obsidian Leaflet for interactive maps - Key idea: Originally designed for TTRPG maps, Leaflet creates clickable visual navigation - Evidence: "I put these little things so that when I click on it, it goes directly to that part in my notes" #### ⏱️ [00:09:12](https://www.youtube.com/watch?v=9ELqSWucVYo?t=552) — [H2] Combining Excalidraw with Leaflet - Key idea: Hand-drawn Excalidraw maps can serve as base images for interactive Leaflet maps - Evidence: "I'm using a combination of Obsidian Leaflet and Excalidraw... because it is a PNG, then I can also use that as fodder for Obsidian leaflet" #### ⏱️ [00:10:15](https://www.youtube.com/watch?v=9ELqSWucVYo?t=615) — [H2] Kanban for visual tracking - Key idea: Kanban boards work beyond content calendars for real-time collaboration and game management - Evidence: "What I did was I shared this screen while we were playing the game and that worked out quite well" #### ⏱️ [00:11:00](https://www.youtube.com/watch?v=9ELqSWucVYo?t=660) — [H1] Obsidian Tracker for habit visualization - Key idea: Visual tracking creates streak motivation and reveals patterns in personal data - Evidence: "When you see it visually, it's like you don't wanna break the streak" #### ⏱️ [00:13:45](https://www.youtube.com/watch?v=9ELqSWucVYo?t=825) — [H2] Excalidraw images are searchable - Key idea: Unlike regular images, Excalidraw drawings contain searchable text and can be tagged - Evidence: "If you've created the image using Excalidraw, it already has all of the text that you typed in as markdown" #### ⏱️ [00:15:30](https://www.youtube.com/watch?v=9ELqSWucVYo?t=930) — [H1] Visual aggregation as knowledge distillation - Key idea: Visual summaries combine multiple concepts into single, comprehensible overviews - Evidence: "I just like this as a distillation of a lot of different concepts" #### ⏱️ [00:17:00](https://www.youtube.com/watch?v=9ELqSWucVYo?t=1020) — [H2] Advanced Slides for living presentations - Key idea: Presentations built from notes automatically update when underlying content changes - Evidence: "When things change, you can change it too... as my understanding of these topics changes, so does this presentation" #### ⏱️ [00:18:45](https://www.youtube.com/watch?v=9ELqSWucVYo?t=1125) — [H1] ExcaliBrain for contextual visualization - Key idea: ExcaliBrain shows notes within their relationship network, like a heads-up display - Evidence: "You are seeing things on a different level... It's kind of like putting the HUD, the heads up display glasses" ## 📚 References - [Excalidraw Plugin for Obsidian](https://github.com/zsviczian/obsidian-excalidraw-plugin) - [Advanced Slides Plugin](https://github.com/MSzturc/obsidian-advanced-slides) - [ExcaliBrain Plugin](https://github.com/zsviczian/excalibrain) - [Obsidian Tracker Plugin](https://github.com/pyrochlore/obsidian-tracker) ## 🗣️ Paraphrase - Visual elements in note-taking aren't about accommodating different learning styles, but about leveraging how combining multiple types of stimuli improves retention and understanding for everyone - There are five primary ways to incorporate visuals into notes: capturing information through images and sketches, explaining concepts with better formatting, tracking progress and habits, aggregating knowledge into comprehensive overviews, and contextualizing individual notes within broader knowledge networks - The key is practicality - visual note-taking doesn't require artistic skills and should focus on what actually helps your thinking and learning process rather than what looks impressive ## 📰 Newsletter **Level Up Your WordPress Documentation with Visual Note-Taking** Whether you're documenting code, planning site architecture, or tracking project progress, visual elements can transform how you process and retain information. Nicole van der Hoeven's guide to visual note-taking offers practical strategies that WordPress developers and content creators can apply immediately. Key takeaways for WordPress teams: - **Capture**: Embed screenshots of admin panels, error messages, or design mockups directly into your documentation - **Explain**: Use headings, callouts, and visual hierarchy to make technical documentation scannable - **Track**: Visualize project timelines, bug reports, or content publication schedules - **Aggregate**: Create visual summaries that connect related concepts like theme development, plugin architecture, and performance optimization - **Contextualize**: Map relationships between different aspects of your WordPress ecosystem The beauty of this approach is that it works with simple tools and doesn't require design skills - just thoughtful organization of information. Resources: [Learn WordPress](https://learn.wordpress.org/), [Developer Docs](https://developer.wordpress.org/), [WP-CLI](https://wp-cli.org/) ## ✅ Action Items #### DevRel - Developer education: Create visual documentation templates for common WordPress workflows, implement screenshot standards for tutorials - Developer experience: Design visual API reference guides, create interactive code examples with embedded diagrams - Community management: Develop visual onboarding materials, use mind maps for community feedback synthesis #### WordPress - Documentation: Implement visual hierarchy standards across DevHub/HelpHub, create screenshot guidelines for contributors - Core: Use flow charts for decision trees in development processes, visual tracking for performance budgets - Design: Create visual design system documentation, implement visual accessibility audit checklists - Training: Develop visual lesson templates, create interactive learning path diagrams - Support: Design visual troubleshooting guides, create flowcharts for common issues ## 🧪 Hypotheses - Visual elements in technical documentation reduce cognitive load and improve task completion rates - Combining text with visual hierarchy increases information retention in developer education materials - Interactive visual elements in documentation lead to higher engagement and lower bounce rates - Visual progress tracking increases completion rates for learning paths and certification programs ### 📊 Methodology - A/B testing of traditional vs. visual documentation formats measuring completion rates and user satisfaction - Eye-tracking studies of how developers scan visual vs. text-heavy documentation - Longitudinal study tracking retention rates for visual vs. traditional note-taking methods in WordPress training ### ❓ Questions - How do visual documentation patterns affect accessibility for screen reader users and developers with visual impairments? - What's the optimal balance between visual elements and text for different types of technical content? - How can visual note-taking methods be standardized across distributed WordPress teams? ### 🔮 Future Research - Integration of visual note-taking with WordPress's block editor for seamless documentation workflows - AI-assisted generation of visual documentation from code comments and README files - Cross-cultural effectiveness of visual documentation patterns in global WordPress communities ### 💡 Implications - Practice: WordPress teams should adopt visual hierarchy standards and screenshot guidelines for all documentation - Policy: Documentation standards should include accessibility requirements for visual elements - Education: WordPress training materials need visual design guidelines and interactive element standards - Funding: Investment in visual documentation tools and training could improve developer onboarding efficiency ### 🧠 Learning Styles Assessment Reading level estimate: Flesch-Kincaid Grade Level 8.5 #### 👀 Visual learners - Present: Extensive screenshot examples, plugin demonstrations, visual hierarchy examples - Improve: Add more before/after comparisons, create visual plugin comparison charts #### 🔊 Aural learners - Present: Video format with clear narration and explanations - Improve: Provide audio-only version for accessibility, add verbal descriptions of visual elements #### 🗣️ Verbal learners - Present: Clear definitions, analogies to familiar concepts, step-by-step explanations - Improve: Add glossary of technical terms, provide written summaries of key concepts #### 🧩 Kinesthetic learners - Present: Hands-on plugin demonstrations, interactive examples - Improve: Provide downloadable practice files, create step-by-step checklists #### 🧠 Logical learners - Present: Structured five-category framework, clear cause-and-effect relationships - Improve: Add decision trees for choosing between different visual methods #### 🧑‍🤝‍🧑 Social learners - Present: Community examples, collaborative use cases (shared screens during gaming) - Improve: Add discussion prompts, suggest community challenges #### 🧘‍♀️ Solitary learners - Present: Individual reflection on personal note-taking preferences, self-assessment opportunities - Improve: Add journaling prompts for evaluating current methods #### 🌿 Naturalistic learners - Present: Organic evolution of note-taking systems, natural categorization - Improve: Connect to information ecosystem thinking, knowledge garden metaphors ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Clear heading structure, logical content flow - Improve: Add alt text descriptions for all visual examples, provide text alternatives for visual concepts #### Keyboard navigation - Present: Standard video player controls - Improve: Ensure all interactive elements are keyboard accessible, add skip navigation options #### Contrast and readability - Present: Good contrast in most examples - Improve: Verify all text meets WCAG AA standards, especially in darker themes #### Text resizing and reflow - Present: Video content adapts to different screen sizes - Improve: Ensure embedded examples work at 200% zoom #### Media and captions - Present: Video with clear <!-- deep-read:sections end --> [[3. Resources/Readwise/Full Document Contents/Articles/How to make your notes visual in Obsidian|Full Document Contents]] ## Document Notes --- tags: #visual-learning #obsidian #note-taking author: Nicole van der Hoeven source: YouTube reference: https://www.youtube.com/watch?v=9ELqSWucVYo date created: 2024-12-28 09:45 --- # 🏷️ Title: How to make your notes visual in Obsidian ## 🧰 Action Inbox - [H1] Install Excalidraw plugin for visual note-taking — cross-platform compatibility/00:02:45 #plugin - [H2] Apply visual hierarchy with Markdown headings — better skimmability/00:04:32 #formatting - [H3] Try ExcaliBrain for contextual note visualization — relationship mapping/00:18:45 #context ## 🧭 Table of Contents - [[#📝 Summary]] - [[#📖 Main Content]] - [[#🗒️ Notes]] - [[#📚 References]] - [[#🗣️ Paraphrase]] - [[#📰 Newsletter]] - [[#✅ Action Items]] - [[#🧪 Hypotheses]] - [[#📊 Methodology]] - [[#❓ Questions]] - [[#🔮 Future Research]] - [[#💡 Implications]] - [[#🧠 Learning Styles Assessment]] - [[#📊 Accessibility Assessment]] - [[#🌍 DEIB Assessment]] - [[#✅ Logical Validity]] - [[#🛡️ DARVO Analysis]] - [[#🎯 Conclusion]] ### 🔗 References - [Excalidraw Plugin](https://github.com/zsviczian/obsidian-excalidraw-plugin) - [How to Take Smart Notes](https://www.goodreads.com/book/show/34507927-how-to-take-smart-notes) ## 📝 Summary - Nicole demonstrates five ways to use visual elements in Obsidian notes: capture, explain, track, aggregate, and contextualize - Visual learning isn't about learning styles but about combining multiple stimuli for better retention - Key plugins discussed: Excalidraw, Leaflet, Kanban, Tracker, Advanced Slides, Mind Map, ExcaliBrain - Visual elements make notes more skimmable and meaningful without requiring artistic skills - The approach should be practical - take what works and discard the rest ## 📖 Main Content Visual note-taking in Obsidian leverages the scientific finding that combining text, images, and other stimuli improves learning and retention for most people, regardless of supposed "learning styles." The video presents five core use cases for visual elements: capturing information through embedded images or sketches, explaining concepts with better formatting and callouts, tracking progress with visual charts, aggregating information into comprehensive overviews, and contextualizing notes within broader knowledge relationships. Multiple Obsidian plugins enable these approaches, from Excalidraw for hand-drawn elements to ExcaliBrain for relationship visualization, making visual PKM accessible even to non-artists. ## 🗒️ Notes #### ⏱️ [00:00:32](https://www.youtube.com/watch?v=9ELqSWucVYo?t=32) — [H1] Visual learning myth debunked - Key idea: Most people learn better when different stimuli are combined, not based on individual "learning styles" - Evidence: "Presenting text with images and even sound is going to make that even more meaningful for us and easier to remember and retain" #### ⏱️ [00:01:18](https://www.youtube.com/watch?v=9ELqSWucVYo?t=78) — [H1] Five ways to use visuals in notes - Key idea: Visual elements serve five distinct purposes in note-taking systems - Evidence: "You can use them to capture, explain, track, aggregate, or contextualize" #### ⏱️ [00:01:32](https://www.youtube.com/watch?v=9ELqSWucVYo?t=92) — [H2] Capturing with embedded images - Key idea: Simple drag-and-drop of web images enhances notes without creation effort - Evidence: "Sometimes it's enough to just embed an image from the web... just dragging and dropping them into Obsidian" #### ⏱️ [00:02:15](https://www.youtube.com/watch?v=9ELqSWucVYo?t=135) — [H2] Sketchnoting as visual vocabulary - Key idea: Sketchnoting uses simple pictures and visual elements while consuming content - Evidence: "It's all about using the visual vocabulary of pictures and simple images that you take while you are listening to a lecture" #### ⏱️ [00:02:45](https://www.youtube.com/watch?v=9ELqSWucVYo?t=165) — [H1] Excalidraw cross-platform benefits - Key idea: Excalidraw works seamlessly across desktop, mobile, and tablet devices - Evidence: "Even if I draw something on the iPad, it looks great on the Obsidian mobile app for my Android phone and it looks good in the Obsidian desktop app" #### ⏱️ [00:03:45](https://www.youtube.com/watch?v=9ELqSWucVYo?t=225) — [H2] Digital writing should be skimmable - Key idea: All digital content, including personal notes, benefits from scannable formatting - Evidence: "I think that all digital writing should be skimmable... you are still writing for an audience. At least yourself" #### ⏱️ [00:04:32](https://www.youtube.com/watch?v=9ELqSWucVYo?t=272) — [H2] Markdown headings for visual hierarchy - Key idea: Using different heading levels creates visual structure and improves readability - Evidence: "Most themes are going to differentiate between these headings... it's a little bit more palatable when you see things in bullet points and different colors" #### ⏱️ [00:05:23](https://www.youtube.com/watch?v=9ELqSWucVYo?t=323) — [H2] Obsidian Callouts for organization - Key idea: Callouts provide visual compartmentalization and can be collapsed for better focus - Evidence: "Visually, I can see, 'Okay, this is a tip. Now this is like a quote. This is a code block.' It's just a lot easier to compartmentalize" #### ⏱️ [00:07:45](https://www.youtube.com/watch?v=9ELqSWucVYo?t=465) — [H2] Obsidian Leaflet for interactive maps - Key idea: Originally designed for TTRPG maps, Leaflet creates clickable visual navigation - Evidence: "I put these little things so that when I click on it, it goes directly to that part in my notes" #### ⏱️ [00:09:12](https://www.youtube.com/watch?v=9ELqSWucVYo?t=552) — [H2] Combining Excalidraw with Leaflet - Key idea: Hand-drawn Excalidraw maps can serve as base images for interactive Leaflet maps - Evidence: "I'm using a combination of Obsidian Leaflet and Excalidraw... because it is a PNG, then I can also use that as fodder for Obsidian leaflet" #### ⏱️ [00:10:15](https://www.youtube.com/watch?v=9ELqSWucVYo?t=615) — [H2] Kanban for visual tracking - Key idea: Kanban boards work beyond content calendars for real-time collaboration and game management - Evidence: "What I did was I shared this screen while we were playing the game and that worked out quite well" #### ⏱️ [00:11:00](https://www.youtube.com/watch?v=9ELqSWucVYo?t=660) — [H1] Obsidian Tracker for habit visualization - Key idea: Visual tracking creates streak motivation and reveals patterns in personal data - Evidence: "When you see it visually, it's like you don't wanna break the streak" #### ⏱️ [00:13:45](https://www.youtube.com/watch?v=9ELqSWucVYo?t=825) — [H2] Excalidraw images are searchable - Key idea: Unlike regular images, Excalidraw drawings contain searchable text and can be tagged - Evidence: "If you've created the image using Excalidraw, it already has all of the text that you typed in as markdown" #### ⏱️ [00:15:30](https://www.youtube.com/watch?v=9ELqSWucVYo?t=930) — [H1] Visual aggregation as knowledge distillation - Key idea: Visual summaries combine multiple concepts into single, comprehensible overviews - Evidence: "I just like this as a distillation of a lot of different concepts" #### ⏱️ [00:17:00](https://www.youtube.com/watch?v=9ELqSWucVYo?t=1020) — [H2] Advanced Slides for living presentations - Key idea: Presentations built from notes automatically update when underlying content changes - Evidence: "When things change, you can change it too... as my understanding of these topics changes, so does this presentation" #### ⏱️ [00:18:45](https://www.youtube.com/watch?v=9ELqSWucVYo?t=1125) — [H1] ExcaliBrain for contextual visualization - Key idea: ExcaliBrain shows notes within their relationship network, like a heads-up display - Evidence: "You are seeing things on a different level... It's kind of like putting the HUD, the heads up display glasses" ## 📚 References - [Excalidraw Plugin for Obsidian](https://github.com/zsviczian/obsidian-excalidraw-plugin) - [Advanced Slides Plugin](https://github.com/MSzturc/obsidian-advanced-slides) - [ExcaliBrain Plugin](https://github.com/zsviczian/excalibrain) - [Obsidian Tracker Plugin](https://github.com/pyrochlore/obsidian-tracker) ## 🗣️ Paraphrase - Visual elements in note-taking aren't about accommodating different learning styles, but about leveraging how combining multiple types of stimuli improves retention and understanding for everyone - There are five primary ways to incorporate visuals into notes: capturing information through images and sketches, explaining concepts with better formatting, tracking progress and habits, aggregating knowledge into comprehensive overviews, and contextualizing individual notes within broader knowledge networks - The key is practicality - visual note-taking doesn't require artistic skills and should focus on what actually helps your thinking and learning process rather than what looks impressive ## 📰 Newsletter **Level Up Your WordPress Documentation with Visual Note-Taking** Whether you're documenting code, planning site architecture, or tracking project progress, visual elements can transform how you process and retain information. Nicole van der Hoeven's guide to visual note-taking offers practical strategies that WordPress developers and content creators can apply immediately. Key takeaways for WordPress teams: - **Capture**: Embed screenshots of admin panels, error messages, or design mockups directly into your documentation - **Explain**: Use headings, callouts, and visual hierarchy to make technical documentation scannable - **Track**: Visualize project timelines, bug reports, or content publication schedules - **Aggregate**: Create visual summaries that connect related concepts like theme development, plugin architecture, and performance optimization - **Contextualize**: Map relationships between different aspects of your WordPress ecosystem The beauty of this approach is that it works with simple tools and doesn't require design skills - just thoughtful organization of information. Resources: [Learn WordPress](https://learn.wordpress.org/), [Developer Docs](https://developer.wordpress.org/), [WP-CLI](https://wp-cli.org/) ## ✅ Action Items #### DevRel - Developer education: Create visual documentation templates for common WordPress workflows, implement screenshot standards for tutorials - Developer experience: Design visual API reference guides, create interactive code examples with embedded diagrams - Community management: Develop visual onboarding materials, use mind maps for community feedback synthesis #### WordPress - Documentation: Implement visual hierarchy standards across DevHub/HelpHub, create screenshot guidelines for contributors - Core: Use flow charts for decision trees in development processes, visual tracking for performance budgets - Design: Create visual design system documentation, implement visual accessibility audit checklists - Training: Develop visual lesson templates, create interactive learning path diagrams - Support: Design visual troubleshooting guides, create flowcharts for common issues ## 🧪 Hypotheses - Visual elements in technical documentation reduce cognitive load and improve task completion rates - Combining text with visual hierarchy increases information retention in developer education materials - Interactive visual elements in documentation lead to higher engagement and lower bounce rates - Visual progress tracking increases completion rates for learning paths and certification programs ### 📊 Methodology - A/B testing of traditional vs. visual documentation formats measuring completion rates and user satisfaction - Eye-tracking studies of how developers scan visual vs. text-heavy documentation - Longitudinal study tracking retention rates for visual vs. traditional note-taking methods in WordPress training ### ❓ Questions - How do visual documentation patterns affect accessibility for screen reader users and developers with visual impairments? - What's the optimal balance between visual elements and text for different types of technical content? - How can visual note-taking methods be standardized across distributed WordPress teams? ### 🔮 Future Research - Integration of visual note-taking with WordPress's block editor for seamless documentation workflows - AI-assisted generation of visual documentation from code comments and README files - Cross-cultural effectiveness of visual documentation patterns in global WordPress communities ### 💡 Implications - Practice: WordPress teams should adopt visual hierarchy standards and screenshot guidelines for all documentation - Policy: Documentation standards should include accessibility requirements for visual elements - Education: WordPress training materials need visual design guidelines and interactive element standards - Funding: Investment in visual documentation tools and training could improve developer onboarding efficiency ### 🧠 Learning Styles Assessment Reading level estimate: Flesch-Kincaid Grade Level 8.5 #### 👀 Visual learners - Present: Extensive screenshot examples, plugin demonstrations, visual hierarchy examples - Improve: Add more before/after comparisons, create visual plugin comparison charts #### 🔊 Aural learners - Present: Video format with clear narration and explanations - Improve: Provide audio-only version for accessibility, add verbal descriptions of visual elements #### 🗣️ Verbal learners - Present: Clear definitions, analogies to familiar concepts, step-by-step explanations - Improve: Add glossary of technical terms, provide written summaries of key concepts #### 🧩 Kinesthetic learners - Present: Hands-on plugin demonstrations, interactive examples - Improve: Provide downloadable practice files, create step-by-step checklists #### 🧠 Logical learners - Present: Structured five-category framework, clear cause-and-effect relationships - Improve: Add decision trees for choosing between different visual methods #### 🧑‍🤝‍🧑 Social learners - Present: Community examples, collaborative use cases (shared screens during gaming) - Improve: Add discussion prompts, suggest community challenges #### 🧘‍♀️ Solitary learners - Present: Individual reflection on personal note-taking preferences, self-assessment opportunities - Improve: Add journaling prompts for evaluating current methods #### 🌿 Naturalistic learners - Present: Organic evolution of note-taking systems, natural categorization - Improve: Connect to information ecosystem thinking, knowledge garden metaphors ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Clear heading structure, logical content flow - Improve: Add alt text descriptions for all visual examples, provide text alternatives for visual concepts #### Keyboard navigation - Present: Standard video player controls - Improve: Ensure all interactive elements are keyboard accessible, add skip navigation options #### Contrast and readability - Present: Good contrast in most examples - Improve: Verify all text meets WCAG AA standards, especially in darker themes #### Text resizing and reflow - Present: Video content adapts to different screen sizes - Improve: Ensure embedded examples work at 200% zoom #### Media and captions - Present: Video with clear ## Highlights - - The idea that some of us are visual learnersand some of us are, for example, auditory learnersis a myth.Instead, what we're finding out is that most peopleare going to learn better when different types of stimuliare grouped together.So presenting text with images and even soundis going to make that even more meaningful for usand easier to remember and retain.That's why we're here on YouTube, right?So how can we apply this to our notes?Hi, I'm Nicole van der Hoeven. ([View Highlight](https://read.readwise.io/read/01k9gfs70cqmss1eszfvf7t2a0))