{"kind":"AgentDefinition","metadata":{"namespace":"community","name":"power-bi-report-design-best-practices","version":"0.1.0"},"spec":{"agents_md":"---\ndescription: 'Comprehensive Power BI report design and visualization best practices based on Microsoft guidance for creating effective, accessible, and performant reports and dashboards.'\napplyTo: '**/*.{pbix,md,json,txt}'\n---\n\n# Power BI Report Design and Visualization Best Practices\n\n## Overview\nThis document provides comprehensive instructions for designing effective, accessible, and performant Power BI reports and dashboards following Microsoft's official guidance and user experience best practices.\n\n## Fundamental Design Principles\n\n### 1. Information Architecture\n**Visual Hierarchy** - Organize information by importance:\n- **Primary**: Key metrics, KPIs, most critical insights (top-left, header area)\n- **Secondary**: Supporting details, trends, comparisons (main body)\n- **Tertiary**: Filters, controls, navigation elements (sidebars, footers)\n\n**Content Structure**:\n```\nReport Page Layout:\n┌─────────────────────────────────────┐\n│ Header: Title, KPIs, Key Metrics    │\n├─────────────────────────────────────┤\n│ Main Content Area                   │\n│ ┌─────────────┐ ┌─────────────────┐ │\n│ │  Primary    │ │  Supporting     │ │\n│ │  Visual     │ │  Visuals        │ │\n│ └─────────────┘ └─────────────────┘ │\n├─────────────────────────────────────┤\n│ Footer: Filters, Navigation, Notes  │\n└─────────────────────────────────────┘\n```\n\n### 2. User Experience Principles\n**Clarity**: Every element should have a clear purpose and meaning\n**Consistency**: Use consistent styling, colors, and interactions across all reports\n**Context**: Provide sufficient context for users to interpret data correctly\n**Action**: Guide users toward actionable insights and decisions\n\n## Chart Type Selection Guidelines\n\n### 1. Comparison Visualizations\n```\nBar/Column Charts:\n✅ Comparing categories or entities\n✅ Ranking items by value\n✅ Showing changes over discrete time periods\n✅ When category names are long (use horizontal bars)\n\nBest Practices:\n- Start axis at zero for accurate comparison\n- Sort categories by value for ranking\n- Use consistent colors within category groups\n- Limit to 7-10 categories for readability\n\nExample Use Cases:\n- Sales by product category\n- Revenue by region  \n- Employee count by department\n- Customer satisfaction by service type\n```\n\n```\nLine Charts:\n✅ Showing trends over continuous time periods\n✅ Comparing multiple metrics over time\n✅ Identifying patterns, seasonality, cycles\n✅ Forecasting and projection scenarios\n\nBest Practices:\n- Use consistent time intervals\n- Start Y-axis at zero when showing absolute values\n- Use different line styles for multiple series\n- Include data point markers for sparse data\n\nExample Use Cases:\n- Monthly sales trends\n- Website traffic over time\n- Stock price movements\n- Performance metrics tracking\n```\n\n### 2. Composition Visualizations\n```\nPie/Donut Charts:\n✅ Parts-of-whole relationships\n✅ Maximum 5-7 categories\n✅ When percentages are more important than absolute values\n✅ Simple composition scenarios\n\nLimitations:\n❌ Difficult to compare similar-sized segments\n❌ Not suitable for many categories\n❌ Hard to show changes over time\n\nAlternative: Use stacked bar charts for better readability\n\nExample Use Cases:\n- Market share by competitor\n- Budget allocation by category\n- Customer segments by type\n```\n\n```\nStacked Charts:\n✅ Showing composition and total simultaneously\n✅ Comparing composition across categories\n✅ Multiple sub-categories within main categories\n✅ When you need both part and whole perspective\n\nTypes:\n- 100% Stacked: Focus on proportions\n- Regular Stacked: Show both absolute and relative values\n- Clustered: Compare sub-categories side-by-side\n\nExample Use Cases:\n- Sales by product category and region\n- Revenue breakdown by service type over time\n- Employee distribution by department and level\n```\n\n### 3. Relationship and Distribution Visualizations\n```\nScatter Plots:\n✅ Correlation between two continuous variables\n✅ Outlier identification\n✅ Clustering analysis\n✅ Performance quadrant analysis\n\nBest Practices:\n- Use size for third dimension (bubble chart)\n- Apply color coding for categories\n- Include trend lines when appropriate\n- Label outliers and key points\n\nExample Use Cases:\n- Sales vs. marketing spend by product\n- Customer satisfaction vs. loyalty scores\n- Risk vs. return analysis\n- Performance vs. cost efficiency\n```\n\n```\nHeat Maps:\n✅ Showing patterns across two categorical dimensions\n✅ Performance matrices\n✅ Time-based pattern analysis\n✅ Dense data visualization\n\nConfiguration:\n- Use color scales that are colorblind-friendly\n- Include data labels when space permits\n- Provide clear legend with value ranges\n- Consider using conditional formatting\n\nExample Use Cases:\n- Sales performance by month and product\n- Website traffic by hour and day of week\n- Employee performance ratings by department and quarter\n```\n\n## Report Layout and Navigation Design\n\n### 1. Page Layout Strategies\n```\nSingle Page Dashboard:\n✅ Executive summaries\n✅ Real-time monitoring\n✅ Simple KPI tracking\n✅ Mobile-first scenarios\n\nDesign Guidelines:\n- Maximum 6-8 visuals per page\n- Clear visual hierarchy\n- Logical grouping of related content\n- Responsive design considerations\n```\n\n```\nMulti-Page Report:\n✅ Complex analytical scenarios\n✅ Different user personas\n✅ Detailed drill-down analysis\n✅ Comprehensive business reporting\n\nPage Organization:\nPage 1: Executive Summary (high-level KPIs)\nPage 2: Detailed Analysis (trends, comparisons)\nPage 3: Operational Details (transaction-level data)\nPage 4: Appendix (methodology, definitions)\n```\n\n### 2. Navigation Patterns\n```\nTab Navigation:\n✅ Related content areas\n✅ Different views of same data\n✅ User role-based sections\n✅ Temporal analysis (daily, weekly, monthly)\n\nImplementation:\n- Use descriptive tab names\n- Maintain consistent layout across tabs\n- Highlight active tab clearly\n- Consider tab ordering by importance\n```\n\n```\nBookmark Navigation:\n✅ Predefined scenarios\n✅ Filtered views\n✅ Story-telling sequences\n✅ Guided analysis paths\n\nBest Practices:\n- Create bookmarks for common filter combinations\n- Use descriptive bookmark names\n- Group related bookmarks\n- Test bookmark functionality thoroughly\n```\n\n```\nButton Navigation:\n✅ Custom navigation flows\n✅ Action-oriented interactions\n✅ Drill-down scenarios\n✅ External link integration\n\nButton Design:\n- Use consistent styling\n- Clear, action-oriented labels\n- Appropriate sizing for touch interfaces\n- Visual feedback for interactions\n```\n\n## Interactive Features Implementation\n\n### 1. Tooltip Design Strategy\n```\nDefault Tooltips:\n✅ Additional context information\n✅ Formatted numeric values\n✅ Related metrics not shown in visual\n✅ Explanatory text for complex measures\n\nConfiguration:\n- Include relevant dimensions\n- Format numbers appropriately\n- Keep text concise and readable\n- Use consistent formatting\n\nExample:\nVisual: Sales by Product Category\nTooltip: \n- Product Category: Electronics\n- Total Sales: $2.3M (↑15% vs last year)\n- Order Count: 1,247 orders\n- Avg Order Value: $1,845\n```\n\n```\nReport Page Tooltips:\n✅ Complex additional information\n✅ Mini-dashboard for context\n✅ Detailed breakdowns\n✅ Visual explanations\n\nDesign Requirements:\n- Optimal size: 320x240 pixels\n- Match main report styling\n- Fast loading performance\n- Meaningful additional insights\n\nImplementation:\n1. Create dedicated tooltip page\n2. Set page type to \"Tooltip\"\n3. Configure appropriate filters\n4. Enable tooltip on target visuals\n5. Test with realistic data\n```\n\n### 2. Drillthrough Implementation\n```\nDrillthrough Scenarios:\n\nSummary to Detail:\nSource: Monthly Sales Summary\nTarget: Transaction-level details for selected month\nFilter: Month, Product Category, Region\n\nContext Enhancement:\nSource: Product Performance Metric\nTarget: Comprehensive product analysis\nContent: Sales trends, customer feedback, inventory levels\n\nDesign Guidelines:\n✅ Clear visual indication of drillthrough availability\n✅ Consistent styling between source and target pages\n✅ Automatic back button (provided by Power BI)\n✅ Contextual filters properly applied\n✅ Hidden drillthrough pages from main navigation\n\nImplementation Steps:\n1. Create target drillthrough page\n2. Add drillthrough filters in Fields pane\n3. Design page with filtered context in mind\n4. Test drillthrough functionality\n5. Configure source visuals for drillthrough\n```\n\n### 3. Cross-Filtering Strategy\n```\nWhen to Enable Cross-Filtering:\n✅ Related visuals showing different perspectives\n✅ Clear logical connections between visuals\n✅ Enhanced analytical understanding\n✅ Reasonable performance impact\n\nWhen to Disable Cross-Filtering:\n❌ Independent analysis requirements\n❌ Performance concerns with large datasets\n❌ Confusing or misleading interactions\n❌ Too many visuals causing cluttered highlighting\n\nConfiguration Best Practices:\n- Edit interactions thoughtfully for each visual pair\n- Test with realistic data volumes and user scenarios\n- Provide clear visual feedback for selections\n- Consider mobile touch interaction experience\n- Document interaction design decisions\n```\n\n## Visual Design and Formatting\n\n### 1. Color Strategy\n```\nColor Usage Hierarchy:\n\nSemantic Colors (Consistent Meaning):\n- Green: Positive performance, growth, success, on-target\n- Red: Negative performance, decline, alerts, over-budget\n- Blue: Neutral information, base metrics, corporate branding\n- Orange: Warnings, attention needed, moderate concern\n- Gray: Inactive, disabled, or reference information\n\nBrand Integration:\n✅ Use corporate color palette consistently\n✅ Maintain accessibility standards (4.5:1 contrast ratio minimum)\n✅ Consider colorblind accessibility (8% of males affected)\n✅ Test colors in different contexts (projectors, mobile, print)\n\nColor Application:\nPrimary Color: Main brand color for key metrics and highlights\nSecondary Colors: Supporting brand colors for categories\nAccent Colors: High-contrast colors for alerts and callouts\nNeutral Colors: Backgrounds, text, borders, inactive states\n```\n\n```\nAccessibility-First Color Design:\n\nColorblind Considerations:\n✅ Don't rely solely on color to convey information\n✅ Use patterns, shapes, or text labels as alternatives\n✅ Test with colorblind simulation tools\n✅ Use high contrast color combinations\n✅ Provide alternative visual cues (icons, patterns)\n\nImplementation:\n- Red-Green combinations: Add blue or use different saturations\n- Use tools like Colour Oracle for testing\n- Include data labels where color is the primary differentiator\n- Consider grayscale versions of reports for printing\n```\n\n### 2. Typography and Readability\n```\nFont Hierarchy:\n\nReport Titles: 18-24pt, Bold, Corporate font or clear sans-serif\nPage Titles: 16-20pt, Semi-bold, Consistent with report title\nSection Headers: 14-16pt, Semi-bold, Used for content grouping\nVisual Titles: 12-14pt, Semi-bold, Descriptive and concise\nBody Text: 10-12pt, Regular, Used in text boxes and descriptions\nData Labels: 9-11pt, Regular, Clear and not overlapping\nCaptions/Legends: 8-10pt, Regular, Supplementary information\n\nReadability Guidelines:\n✅ Minimum 10pt font size for data visualization\n✅ High contrast between text and background\n✅ Consistent font family throughout report (max 2 families)\n✅ Adequate white space around text elements\n✅ Left-align text for readability (except centered titles)\n```\n\n```\nContent Writing Best Practices:\n\nTitles and Labels:\n✅ Clear, descriptive, and action-oriented\n✅ Avoid jargon and technical abbreviations\n✅ Use consistent terminology throughout\n✅ Include time periods and context when relevant\n\nExamples:\nGood: \"Monthly Sales Revenue by Product Category\"\nPoor: \"Sales Data\"\n\nGood: \"Customer Satisfaction Score (1-10 scale)\"\nPoor: \"CSAT\"\n\nData Storytelling:\n✅ Use subtitles to provide context\n✅ Include methodology notes where necessary\n✅ Explain unusual data points or outliers\n✅ Provide actionable insights in text boxes\n```\n\n### 3. Layout and Spacing\n```\nVisual Spacing:\nGrid System: Use consistent spacing multiples (8px, 16px, 24px)\nPadding: Adequate white space around content areas\nMargins: Consistent margins between visual elements\nAlignment: Use alignment guides for professional appearance\n\nVisual Grouping:\nRelated Content: Group related visuals with consistent spacing\nSeparation: Use white space to separate unrelated content areas\nVisual Hierarchy: Use size, color, and spacing to indicate importance\nBalance: Distribute visual weight evenly across the page\n```\n\n## Performance Optimization for Reports\n\n### 1. Visual Performance Guidelines\n```\nVisual Count Management:\n✅ Maximum 6-8 visuals per page for optimal performance\n✅ Use tabbed navigation for complex scenarios\n✅ Implement drill-through instead of cramming details\n✅ Consider multiple focused pages vs. one cluttered page\n\nQuery Optimization:\n✅ Apply filters early in design process\n✅ Use page-level filters for common filtering scenarios\n✅ Avoid high-cardinality fields in slicers when possible\n✅ Pre-filter large datasets to relevant subsets\n\nPerformance Testing:\n✅ Test with realistic data volumes\n✅ Monitor Performance Analyzer results\n✅ Test concurrent user scenarios\n✅ Validate mobile performance\n✅ Check different network conditions\n```\n\n### 2. Loading Performance Optimization\n```\nInitial Page Load:\n✅ Minimize visuals on landing page\n✅ Use summary views with drill-through to details\n✅ Apply default filters to reduce initial data volume\n✅ Consider progressive disclosure of information\n\nInteraction Performance:\n✅ Optimize slicer queries and combinations\n✅ Use efficient cross-filtering patterns\n✅ Minimize complex calculated visuals\n✅ Implement appropriate caching strategies\n\nVisual Selection for Performance:\nFast Loading: Card, KPI, Gauge (simple aggregations)\nModerate: Bar, Column, Line charts (standard aggregations)\nSlower: Scatter plots, Maps, Custom visuals (complex calculations)\nSlowest: Matrix, Table with many columns (detailed data)\n```\n\n## Mobile and Responsive Design\n\n### 1. Mobile Layout Strategy\n```\nMobile-First Design Principles:\n✅ Portrait orientation as primary layout\n✅ Touch-friendly interaction targets (minimum 44px)\n✅ Simplified navigation patterns\n✅ Reduced visual density and information overload\n✅ Key metrics prominently displayed\n\nMobile Layout Considerations:\nScreen Sizes: Design for smallest target device first\nTouch Interactions: Ensure buttons and slicers are easily tappable\nScrolling: Vertical scrolling acceptable, horizontal scrolling problematic\nText Size: Increase font sizes for mobile readability\nVisual Selection: Prefer simple chart types for mobile\n```\n\n### 2. Responsive Design Implementation\n```\nPower BI Mobile Layout:\n1. Switch to Mobile layout view in Power BI Desktop\n2. Rearrange visuals for portrait orientation\n3. Resize and reposition for mobile screens\n4. Test key interactions work with touch\n5. Verify text remains readable at mobile sizes\n\nAdaptive Content:\n✅ Prioritize most important information\n✅ Hide or consolidate less critical visuals\n✅ Use drill-through for detailed analysis\n✅ Simplify filter interfaces\n✅ Ensure data refresh works on mobile connections\n\nTesting Strategy:\n✅ Test on actual mobile devices\n✅ Verify performance on slower networks\n✅ Check battery usage during extended use\n✅ Validate offline capabilities where applicable\n```\n\n## Accessibility and Inclusive Design\n\n### 1. Universal Design Principles\n```\nVisual Accessibility:\n✅ High contrast ratios (minimum 4.5:1)\n✅ Colorblind-friendly color schemes\n✅ Alternative text for images and icons\n✅ Consistent navigation patterns\n✅ Clear visual hierarchy\n\nInteraction Accessibility:\n✅ Keyboard navigation support\n✅ Screen reader compatibility\n✅ Clear focus indicators\n✅ Logical tab order\n✅ Descriptive link text and button labels\n\nContent Accessibility:\n✅ Plain language explanations\n✅ Consistent terminology\n✅ Context for abbreviations and acronyms\n✅ Alternative formats when needed\n```\n\n### 2. Inclusive Design Implementation\n```\nMulti-Sensory Design:\n✅ Don't rely solely on color to convey information\n✅ Use patterns, shapes, and text labels\n✅ Include audio descriptions for complex visuals\n✅ Provide data in multiple formats\n\nCognitive Accessibility:\n✅ Clear, simple language\n✅ Logical information flow\n✅ Consistent layouts and interactions\n✅ Progressive disclosure of complexity\n✅ Help and guidance text where needed\n\nTesting for Accessibility:\n✅ Use screen readers to test navigation\n✅ Test keyboard-only navigation\n✅ Verify with colorblind simulation tools\n✅ Get feedback from users with disabilities\n✅ Regular accessibility audits\n```\n\n## Advanced Visualization Techniques\n\n### 1. Conditional Formatting\n```\nDynamic Visual Enhancement:\n\nData Bars:\n✅ Quick visual comparison within tables\n✅ Consistent scale across all rows\n✅ Appropriate color choices (light to dark)\n✅ Consider mobile visibility\n\nBackground Colors:\n✅ Heat map-style formatting\n✅ Status-based coloring (red/yellow/green)\n✅ Performance thresholds\n✅ Trend indicators\n\nFont Formatting:\n✅ Size based on importance or values\n✅ Color based on performance metrics\n✅ Bold for emphasis and highlights\n✅ Italics for secondary information\n\nImplementation Examples:\nSales Performance Table:\n- Green background: \u003e110% of target\n- Yellow background: 90-110% of target  \n- Red background: \u003c90% of target\n- Data bars: Relative performance within each category\n```\n\n### 2. Custom Visuals Integration\n```\nCustom Visual Selection Criteria:\n\nEvaluation Framework:\n✅ Active community support and regular updates\n✅ Microsoft AppSource certification (preferred)\n✅ Clear documentation and examples\n✅ Performance characteristics acceptable\n✅ Accessibility compliance\n\nDue Diligence:\n✅ Test thoroughly with your data types and volumes\n✅ Verify mobile compatibility\n✅ Check refresh and performance impact\n✅ Review security and data handling\n✅ Plan for maintenance and updates\n\nGovernance:\n✅ Approval process for custom visuals\n✅ Standard set of approved custom visuals\n✅ Documentation of approved visuals and use cases\n✅ Monitoring and maintenance procedures\n✅ Fallback strategies if custom visual becomes unavailable\n```\n\n## Report Testing and Quality Assurance\n\n### 1. Functional Testing Checklist\n```\nVisual Functionality:\n□ All charts display data correctly\n□ Filters work as intended\n□ Cross-filtering behaves appropriately  \n□ Drill-through functions correctly\n□ Tooltips show relevant information\n□ Bookmarks restore correct state\n□ Export functions work properly\n\nInteraction Testing:\n□ Button navigation functions correctly\n□ Slicer combinations work as expected\n□ Report pages load within acceptable time\n□ Mobile layout displays properly\n□ Responsive design adapts correctly\n□ Print layouts are readable\n\nData Accuracy:\n□ Totals match source systems\n□ Calculations produce expected results\n□ Filters don't inadvertently exclude data\n□ Date ranges are correct\n□ Business rules are properly implemented\n□ Edge cases handled appropriately\n```\n\n### 2. User Experience Testing\n```\nUsability Testing:\n✅ Test with actual business users\n✅ Observe user behavior and pain points\n✅ Time common tasks and interactions\n✅ Gather feedback on clarity and usefulness\n✅ Test with different user skill levels\n\nPerformance Testing:\n✅ Load testing with realistic data volumes\n✅ Concurrent user testing\n✅ Network condition variations\n✅ Mobile device performance\n✅ Refresh performance during peak usage\n\nCross-Platform Testing:\n✅ Desktop browsers (Chrome, Firefox, Edge, Safari)\n✅ Mobile devices (iOS, Android)\n✅ Power BI Mobile app\n✅ Different screen resolutions\n✅ Various network speeds\n```\n\n### 3. Quality Assurance Framework\n```\nReview Process:\n1. Developer Testing: Initial functionality verification\n2. Peer Review: Design and technical review by colleagues\n3. Business Review: Content accuracy and usefulness validation\n4. User Acceptance: Testing with end users\n5. Performance Review: Load and response time validation\n6. Accessibility Review: Compliance with accessibility standards\n\nDocumentation:\n✅ Report purpose and target audience\n✅ Data sources and refresh schedule\n✅ Business rules and calculation explanations\n✅ User guide and training materials\n✅ Known limitations and workarounds\n✅ Maintenance and update procedures\n\nContinuous Improvement:\n✅ Regular usage analytics review\n✅ User feedback collection and analysis\n✅ Performance monitoring and optimization\n✅ Content relevance and accuracy updates\n✅ Technology and feature adoption\n```\n\n## Common Anti-Patterns to Avoid\n\n### 1. Design Anti-Patterns\n```\n❌ Chart Junk:\n- Unnecessary 3D effects\n- Excessive animation\n- Decorative elements that don't add value\n- Over-complicated visual effects\n\n❌ Information Overload:\n- Too many visuals on single page\n- Cluttered layouts with insufficient white space\n- Multiple competing focal points\n- Overwhelming color usage\n\n❌ Poor Color Choices:\n- Red-green combinations without alternatives\n- Low contrast ratios\n- Inconsistent color meanings\n- Over-use of bright or saturated colors\n```\n\n### 2. Interaction Anti-Patterns\n```\n❌ Navigation Confusion:\n- Inconsistent navigation patterns\n- Hidden or unclear navigation options\n- Broken or unexpected drill-through behavior\n- Circular navigation loops\n\n❌ Performance Problems:\n- Too many visuals causing slow loading\n- Inefficient cross-filtering\n- Unnecessary real-time refresh\n- Large datasets without proper filtering\n\n❌ Mobile Unfriendly:\n- Small touch targets\n- Horizontal scrolling requirements\n- Unreadable text on mobile\n- Non-functional mobile interactions\n```\n\nRemember: Always design with your specific users and use cases in mind. Test early and often with real users and realistic data to ensure your reports effectively communicate insights and enable data-driven decision making.","description":"Comprehensive Power BI report design and visualization best practices based on Microsoft guidance for creating effective, accessible, and performant reports and dashboards.","import":{"commit_sha":"541b7819d8c3545c6df122491af4fa1eae415779","imported_at":"2026-05-18T20:05:35Z","license_text":"MIT License\n\nCopyright GitHub, Inc.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","owner":"github","repo":"github/awesome-copilot","source_url":"https://github.com/github/awesome-copilot/blob/541b7819d8c3545c6df122491af4fa1eae415779/instructions/power-bi-report-design-best-practices.instructions.md"},"manifest":{}},"content_hash":[165,9,25,147,33,85,250,146,38,228,185,252,86,41,5,22,140,241,43,126,30,3,109,75,216,112,172,140,102,213,77,234],"trust_level":"unsigned","yanked":false}