Skip to main content

E.2 Screens & UX Guidelines

This section provides comprehensive guidelines for designing and implementing SSO (OAuth) screens and user interfaces. Following these guidelines ensures consistent, user-friendly experiences that meet both user expectations and technical requirements.

Overview​

Proper screen design and UX implementation are critical for:

  • User adoption and satisfaction
  • Conversion rate optimization
  • Brand consistency and recognition
  • Compliance with platform standards
  • Cross-platform compatibility

Screen Design Requirements​

Fundamental Requirements​

Browser Controls​

  • No Browser Controls: Screens must not include browser navigation controls
  • Clean Interface: Minimal UI elements focused on specific tasks
  • Embedded Experience: Designed for embedded display within cTrader
  • Consistent Branding: Maintain broker brand identity throughout

Responsive Design​

  • Multi-Device Support: Optimize for desktop, mobile, and tablet
  • Adaptive Layout: Layout must adapt to different screen sizes
  • Touch Optimization: Touch-friendly interface for mobile devices
  • Performance: Fast loading across all device types

Content Requirements​

Platform References​

  • cTrader Only: No mentions of other trading platforms
  • No cTrader ID: Do not mention "cTrader ID" in any screens
  • Correct Legal Entities: Display correct legal entities and jurisdictions
  • No Misleading Content: Avoid misleading users about jurisdictions

User Interface Elements​

  • No Pop-ups: No pop-up messages on any screen
  • Clean Organization: Well-organized layout without unnecessary elements
  • No External Chat: No "Chat" buttons in login/signup screens
  • Focused Design: Design focused on specific screen purpose

Screen Types and Specifications​

Login/Signup Screens​

Design Requirements​

  • Single URL: One URL for both login and signup functionality
  • First Login Detection: Use firstLogin parameter to determine flow
  • Partner Attribution: Handle partnerId parameter for referral attribution
  • Language Support: Support multiple languages via lang parameter

Content Elements​

  • Brand Logo: Broker logo prominently displayed
  • Form Fields: Email, password, and necessary registration fields
  • Social Login: Optional social media login options
  • Terms Acceptance: Terms and conditions acceptance checkboxes
  • Submit Button: Clear call-to-action button

Example Layout​

<div class="login-signup-container">
    <div class="brand-header">
        <img src="/assets/logo.png" alt="Broker Logo" class="brand-logo">
        <h1 class="brand-title">Welcome to Broker Trading</h1>
    </div>
    
    <div class="auth-form">
        <!-- Login form shown when firstLogin=false -->
        <form id="loginForm" class="auth-form-panel">
            <div class="form-group">
                <label for="email">Email Address</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" required>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn-primary">Sign In</button>
            </div>
        </form>
        
        <!-- Signup form shown when firstLogin=true -->
        <form id="signupForm" class="auth-form-panel" style="display: none;">
            <div class="form-group">
                <label for="fullName">Full Name</label>
                <input type="text" id="fullName" name="fullName" required>
            </div>
            <div class="form-group">
                <label for="email">Email Address</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" required>
            </div>
            <div class="form-group">
                <label class="checkbox-label">
                    <input type="checkbox" id="terms" name="terms" required>
                    I agree to the Terms and Conditions
                </label>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn-primary">Create Account</button>
            </div>
        </form>
    </div>
</div>

Account Creation Screens​

Design Requirements​

  • Pre-filled Data: Pre-fill with user data from registration
  • Account Types: Clear selection of account types
  • Trading Preferences: Options for trading preferences
  • Risk Disclosure: Risk disclosure and agreement sections

Content Elements​

  • Account Type Selection: Standard, Premium, VIP options
  • Currency Selection: Available account currencies
  • Leverage Options: Leverage selection with risk warnings
  • Agreement Checkboxes: Risk agreement and terms acceptance

Deposit/Withdrawal Screens​

Design Requirements​

  • Payment Methods: Clear payment method selection
  • Amount Entry: Easy amount entry with validation
  • Security: Security verification for withdrawals
  • Confirmation: Clear confirmation screens

Content Elements​

  • Method Selection: Credit card, bank transfer, e-wallet options
  • Amount Input: Amount field with currency display
  • Fee Display: Transparent fee information
  • Processing Time: Expected processing time information

KYC Screens​

Design Requirements​

  • Document Upload: Easy document upload interface
  • Progress Tracking: Clear progress indicators
  • Mobile Optimization: Camera integration for mobile
  • Quality Validation: Real-time document quality validation

Content Elements​

  • Document Types: Identity, address, and additional documents
  • Upload Interface: Drag-and-drop and camera upload
  • Status Display: Real-time verification status
  • Help Content: Contextual help and guidance

Technical Implementation Guidelines​

Parameter Handling​

Required Parameters​

// Extract URL parameters
function getUrlParameters() {
    const params = new URLSearchParams(window.location.search);
    return {
        token: params.get('token'),
        lang: params.get('lang') || 'en',
        source: params.get('source') || 'Web',
        theme: params.get('theme') || 'light',
        firstLogin: params.get('firstLogin') === 'true',
        partnerId: params.get('partnerId'),
        account: params.get('account')
    };
}

Language Handling​

// Language implementation
function initializeLanguage(lang) {
    const supportedLanguages = ['en', 'es', 'fr', 'de', 'it'];
    const selectedLang = supportedLanguages.includes(lang) ? lang : 'en';
    
    // Load language resources
    loadLanguageResources(selectedLang);
    
    // Update UI language
    updateUILanguage(selectedLang);
}

Theme Handling​

// Theme implementation
function initializeTheme(theme) {
    const validThemes = ['light', 'dark'];
    const selectedTheme = validThemes.includes(theme) ? theme : 'light';
    
    // Apply theme
    document.body.className = `theme-${selectedTheme}`;
    
    // Load theme-specific styles
    loadThemeStyles(selectedTheme);
}

Responsive Design Implementation​

CSS Framework​

/* Mobile-first responsive design */
.container {
    max-width: 100%;
    padding: 0 16px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .container {
        max-width: 768px;
        padding: 0 24px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
        padding: 0 32px;
    }
}

/* Touch-friendly elements */
.btn {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 24px;
    font-size: 16px;
}

.form-input {
    min-height: 44px;
    font-size: 16px; /* Prevents zoom on iOS */
}

JavaScript Responsive Handling​

// Responsive behavior
function handleResponsiveBehavior() {
    const isMobile = window.innerWidth < 768;
    const isTablet = window.innerWidth >= 768 && window.innerWidth < 1024;
    const isDesktop = window.innerWidth >= 1024;
    
    // Adjust layout based on device
    if (isMobile) {
        document.body.classList.add('mobile-layout');
        document.body.classList.remove('tablet-layout', 'desktop-layout');
    } else if (isTablet) {
        document.body.classList.add('tablet-layout');
        document.body.classList.remove('mobile-layout', 'desktop-layout');
    } else {
        document.body.classList.add('desktop-layout');
        document.body.classList.remove('mobile-layout', 'tablet-layout');
    }
}

// Listen for resize events
window.addEventListener('resize', handleResponsiveBehavior);
handleResponsiveBehavior(); // Initial call

Performance Requirements​

Loading Performance​

Target Metrics​

  • Initial Load: ≤ 3 seconds on 3G connection
  • Subsequent Loads: ≤ 1 second on cached resources
  • Interaction Response: ≤ 100ms for user interactions
  • Animation Performance: 60fps for smooth animations

Optimization Techniques​

<!-- Resource optimization -->
<link rel="preload" href="/css/critical.css" as="style">
<link rel="preload" href="/js/main.js" as="script">

<!-- Image optimization -->
<img src="/assets/logo.webp" alt="Broker Logo" loading="lazy">

<!-- CSS optimization -->
<style>
    /* Critical CSS inline */
    .critical-styles { /* Critical styles */ }
</style>
<link rel="stylesheet" href="/css/non-critical.css" media="print" onload="this.media='all'">

Caching Strategy​

// Service worker for caching
self.addEventListener('install', (event) => {
    event.waitUntil(
        caches.open('sso-cache-v1').then((cache) => {
            return cache.addAll([
                '/css/main.css',
                '/js/main.js',
                '/assets/logo.png'
            ]);
        })
    );
});

Error Handling and User Feedback​

Error Display​

// Error handling implementation
function showError(message, field = null) {
    const errorElement = document.createElement('div');
    errorElement.className = 'error-message';
    errorElement.textContent = message;
    
    if (field) {
        const fieldElement = document.getElementById(field);
        fieldElement.classList.add('error');
        fieldElement.parentNode.appendChild(errorElement);
    } else {
        const container = document.querySelector('.form-container');
        container.appendChild(errorElement);
    }
    
    // Auto-remove after 5 seconds
    setTimeout(() => {
        errorElement.remove();
        if (field) {
            document.getElementById(field).classList.remove('error');
        }
    }, 5000);
}

Loading States​

// Loading state management
function showLoading(element) {
    element.disabled = true;
    element.innerHTML = '<span class="spinner"></span> Loading...';
}

function hideLoading(element, originalText) {
    element.disabled = false;
    element.innerHTML = originalText;
}

Success Feedback​

// Success feedback
function showSuccess(message) {
    const successElement = document.createElement('div');
    successElement.className = 'success-message';
    successElement.textContent = message;
    
    const container = document.querySelector('.form-container');
    container.appendChild(successElement);
    
    setTimeout(() => {
        successElement.remove();
    }, 3000);
}

Accessibility Guidelines​

WCAG 2.1 AA Compliance​

Semantic HTML​

<!-- Proper semantic structure -->
<main role="main">
    <section aria-labelledby="login-heading">
        <h1 id="login-heading">Sign In to Your Account</h1>
        <form aria-label="Login form">
            <div class="form-group">
                <label for="email">Email Address</label>
                <input 
                    type="email" 
                    id="email" 
                    name="email" 
                    required
                    aria-describedby="email-help"
                    aria-invalid="false"
                >
                <div id="email-help" class="help-text">
                    Enter your registered email address
                </div>
            </div>
        </form>
    </section>
</main>

Keyboard Navigation​

// Keyboard navigation support
document.addEventListener('keydown', (event) => {
    if (event.key === 'Tab') {
        // Ensure focus is visible
        document.body.classList.add('keyboard-navigation');
    }
});

document.addEventListener('mousedown', () => {
    // Remove keyboard navigation class when using mouse
    document.body.classList.remove('keyboard-navigation');
});

Screen Reader Support​

// Screen reader announcements
function announceToScreenReader(message) {
    const announcement = document.createElement('div');
    announcement.setAttribute('aria-live', 'polite');
    announcement.setAttribute('aria-atomic', 'true');
    announcement.className = 'sr-only';
    announcement.textContent = message;
    
    document.body.appendChild(announcement);
    
    setTimeout(() => {
        announcement.remove();
    }, 1000);
}

Security Considerations​

Input Validation​

// Input sanitization
function sanitizeInput(input) {
    const div = document.createElement('div');
    div.textContent = input;
    return div.innerHTML;
}

// Form validation
function validateForm(formData) {
    const errors = [];
    
    // Email validation
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(formData.email)) {
        errors.push('Please enter a valid email address');
    }
    
    // Password validation
    if (formData.password.length < 8) {
        errors.push('Password must be at least 8 characters long');
    }
    
    return errors;
}

CSRF Protection​

// CSRF token implementation
function generateCSRFToken() {
    const array = new Uint8Array(32);
    crypto.getRandomValues(array);
    return Array.from(array, byte => byte.toString(16).padStart(2, '0')).join('');
}

// Include CSRF token in forms
function includeCSRFToken(form) {
    const token = generateCSRFToken();
    const input = document.createElement('input');
    input.type = 'hidden';
    input.name = 'csrf_token';
    input.value = token;
    form.appendChild(input);
}

Testing Guidelines​

Functional Testing​

  • Form Validation: Test all form validation scenarios
  • Parameter Handling: Test URL parameter handling
  • Error Scenarios: Test error display and recovery
  • Cross-Browser: Test across all supported browsers

Performance Testing​

  • Load Testing: Test with various network conditions
  • Device Testing: Test on different devices and screen sizes
  • Accessibility Testing: Test with screen readers and keyboard navigation
  • Usability Testing: Test with actual users

Security Testing​

  • Input Validation: Test for XSS and injection attacks
  • CSRF Protection: Test CSRF token validation
  • Data Privacy: Test data handling and privacy protection
  • Authentication: Test authentication security measures

Best Practices Summary​

Design Principles​

  • User-Centered: Design with user needs as primary focus
  • Consistent: Maintain consistent design patterns
  • Accessible: Ensure accessibility for all users
  • Performant: Optimize for fast loading and interaction

Technical Principles​

  • Semantic HTML: Use proper semantic HTML elements
  • Progressive Enhancement: Ensure functionality without JavaScript
  • Mobile-First: Design for mobile devices first
  • Security First: Implement security from the beginning

Content Principles​

  • Clear Communication: Use clear, concise language
  • Brand Consistency: Maintain consistent brand identity
  • Legal Compliance: Ensure all legal requirements are met
  • User Trust: Build trust through professional design

Following these guidelines ensures high-quality, user-friendly SSO (OAuth) screens that provide excellent user experiences while meeting all technical and business requirements.