Understanding the Interface

CFB Analytics uses a consistent design language throughout the platform. Here's a guide to understanding the various interface elements.

Color Coding

Colors convey important information at a glance:

Green - Positive outcomes (wins, favorable spreads, high confidence)
Red - Negative outcomes (losses, unfavorable spreads, low performance)
Blue - Neutral information (scheduled games, general stats)
Yellow - Warnings or attention (close games, trending data)
Purple - Premium features (advanced analytics, special insights)

Badge Types

Badges provide quick status information:

Difficulty Badges
- Beginner - Easy to understand
- Intermediate - Some football knowledge required
- Advanced - Deep statistical understanding needed
Status Badges
- Live - Game in progress
- Final - Game completed
- Upcoming - Future game
- Postponed - Game delayed
Confidence Badges
- High - 70%+ confidence
- Medium - 55-69% confidence
- Low - Below 55% confidence

Icons and Their Meanings

⭐ Star - Follow/favorite (filled = followed)
📊 Chart - View detailed analytics
🎯 Target - Predictions and projections
💰 Money - Betting information
📈 Trend Up - Improving performance
📉 Trend Down - Declining performance
🔔 Bell - Notifications and alerts
⚙️ Gear - Settings and preferences
🔍 Magnifier - Search functionality
ℹ️ Info - Additional information available

Interactive Elements

Cards

Clickable cards show hover effects and cursor changes. Click anywhere on a card to navigate to detailed information.

Tabs

Tabs organize related content. The active tab is highlighted, and clicking switches the view without reloading the page.

Tooltips

Hover over icons, abbreviations, or metrics to see explanatory tooltips. On mobile, tap and hold.

Expandable Sections

Look for chevron icons (▼ ▲) to expand or collapse sections for additional details.

Data Tables

Tables can usually be:

Sorted - Click column headers to sort
Filtered - Use filter controls above tables
Exported - Download data via export buttons

Charts and Visualizations

Hover over data points for exact values
Click legend items to toggle series on/off
Use zoom controls when available
Download charts as images via the menu icon

Responsive Design

The interface adapts to your screen size:

Desktop - Full features with multiple columns
Tablet - Optimized layouts with collapsible sidebars
Mobile - Single column, swipeable elements, hamburger menu

Dark Mode

Toggle dark mode via the sun/moon icon in the top-right corner. Your preference is saved automatically.

Accessibility Features

High contrast mode available in Settings
Keyboard navigation fully supported
Screen reader compatibility
Adjustable text sizes

Understanding the Interface