Skip to content

UXI: User Experience Guidelines

UXI is the unified web interface for the DIRAC platform.

For complete DIRAC framework documentation, visit github.com/ovesorg/dirac.

Design Principles

Single Interface

  • One consistent interface for all DIRAC functions
  • No jumping between different systems
  • Unified authentication and navigation

Role-Based Views

Tailored interfaces for different user roles:

Customer - Service discovery and subscription - Service tracking and usage - Account and billing management

Operator - Service delivery dashboard - Asset allocation and tracking - Operations monitoring

Admin - System configuration - User and role management - Business analytics

Asset Owner - Asset performance and revenue - Fleet utilization - Maintenance scheduling

Visual Design

Style Guidelines

  • Mobile-first responsive design
  • Material Design components
  • Consistent color palette and typography
  • Clear visual hierarchy

Accessibility

  • WCAG 2.1 AA compliance
  • Keyboard navigation
  • Screen reader support
  • High contrast mode

Performance Targets

  • First Contentful Paint < 1.5s
  • Time to Interactive < 3s
  • Lighthouse score > 90

Interaction Patterns

  • Persistent top navigation bar
  • Role-based menu items
  • Breadcrumb trails for context
  • Quick access to common actions

Feedback

  • Real-time updates via MQTT
  • Optimistic UI updates
  • Clear loading states
  • Actionable error messages

Forms

  • Inline validation
  • Clear field labels and hints
  • Progressive disclosure for complex flows
  • Save and resume capability

Component Library

Standard UI components for consistent experience:

  • Buttons (primary, secondary, text)
  • Input fields (text, number, select, date)
  • Cards and panels
  • Tables and lists
  • Modals and dialogs
  • Notifications and alerts
  • Navigation menus
  • Charts and visualizations