UI Conventions

Implemented

Last Updated: 2026-06-13

# Overview

BATbern follows Swiss design principles for a clean, functional, and intuitive user experience. This guide explains common UI patterns you’ll encounter throughout the platform.

# Design Principles

# Swiss Design Aesthetics

BATbern’s interface embodies Swiss design:

• Minimalism: Clean layouts with purposeful whitespace
• Grid-based: Structured layouts using 8px spacing units
• High Contrast: Excellent readability (WCAG 2.1 AA compliant)
• Typography: Helvetica Neue/Helvetica sans-serif family
• Functionality: Every element serves a clear purpose

# Color Semantics

Colors convey meaning consistently:

# Common UI Patterns

# Role-Based UI Adaptation

Implemented

The interface adapts based on your role:

As an Organizer, you see:

• ✅ Full entity management (Companies, Users, Events, Partners, Speakers)
• ✅ Event workflow management interface
• ✅ Advanced analytics and reports
• ✅ Partner coordination tools

As a Speaker, you would see:

• 👤 Your speaker profile
• 📝 Content submission forms
• 📅 Your assigned sessions
• ❌ No access to workflow or entity management

As a Partner, you would see:

• 📊 Attendance analytics for your company (with XLSX export)
• 🗳️ Topic suggestion and voting
• 🤝 Meeting coordination and iCal invites
• ❌ No access to planning tools or other companies’ data

As an Attendee, you would see:

• 🎫 Event registration and self-service deregistration
• 📆 Event schedules and your event history
• 📄 Session materials
• 💡 Topic suggestions, speaker self-nomination, and post-event Q&A
• ❌ No access to planning tools

# Multi-Role Single-Session Navigation

Implemented

A single BATbern account can carry more than one role — for example, an organizer who also speaks at an event, or a partner who is also an attendee. Following the unified speaker workflow refactor (Epic 11), these roles are no longer separate logins.

One login, one session. You authenticate once (email/password or “Continue with Google”) and the application loads every role you hold into the same session.

Grouped navigation. The navigation menu lists the features for each role under its own section divider, so a multi-role user sees, for instance, an Organizer group and a Speaker group stacked in the same sidebar. You move between them by scrolling — there is no role-switcher modal and no need to log out and back in.

Role-scoped access still applies. Grouping is purely presentational; each feature is still gated by the role that owns it. You only ever see the groups for roles your account actually holds.

# Buttons

# Primary Actions

Save Changes

Used for primary actions:

• Save changes
• Submit forms
• Create new entities
• Confirm operations

# Secondary Actions

Cancel

Used for secondary actions:

• Cancel operations
• Go back
• Alternative actions

# Destructive Actions

Delete

Used for destructive operations:

• Delete entities
• Permanently remove data
• Always requires confirmation

# Form Fields

# Required Fields

Fields with a red asterisk (*) are required:

Email Address *
[                    ]

Validation errors appear inline:

Email Address *
[invalid-email      ]
⚠️ Please enter a valid email address

# Field Types

Text Input:

Company Name *
[Müller Architekten AG]

Dropdown Select:

Event Type *
[▼ Select type...    ]
   Full-Day Conference
   Afternoon Workshop
   Evening Lecture

Date Picker:

Event Date *
[📅 2025-03-15       ]

Multi-Select:

Topics
[☑️ Sustainable Building]
[☐ Digital Transformation]
[☑️ Urban Planning]

File Upload:

Company Logo
[Choose File] No file chosen
└─ PNG, JPG, SVG (max 2MB)

# Status Badges

Implemented

Status badges provide at-a-glance information:

Workflow States:

• CREATED - New entity
• IN PROGRESS - Active work
• COMPLETED - Finished

User Roles:

• ORGANIZER
• SPEAKER
• ATTENDEE
• ADMIN

Partner Tiers:

• 💎 DIAMOND
• PLATINUM
• GOLD

# Notifications & Alerts

# Toast Notifications

Planned

Brief messages appear at bottom-right:

Toasts auto-dismiss after 5 seconds or can be manually closed.

# Inline Alerts

Persistent alerts for important information:

# Tables & Data Grids

# Table Actions

Every table row includes action buttons:

• 👁️ View - Read-only details
• 📝 Edit - Modify entity
• 🗑️ Delete - Remove (with confirmation)

# Sorting

Click column headers to sort:

• First click: Ascending (▲)
• Second click: Descending (▼)
• Third click: Clear sorting

# Pagination

Navigate large datasets:

◀ Previous  [1] 2 3 ... 10  Next ▶
Showing 1-25 of 237 results

Options: 10, 25, 50, 100 rows per page

# Search & Filters

Global Search:

🔍 [Search companies...     ]

Advanced Filters Implemented:

🎛️ Filters
   [canton:ZH]
   [employees:>100]
   [verified:true]

JSON-based filter syntax for complex queries.

# Modals & Dialogs

# Confirmation Dialogs

Destructive actions require confirmation:

┌────────────────────────────────────┐
│  Delete Company?                   │
├────────────────────────────────────┤
│  Are you sure you want to delete   │
│  "Müller Architekten AG"?          │
│                                    │
│  This action cannot be undone.     │
│                                    │
│  [Cancel]         [Delete] ←red    │
└────────────────────────────────────┘

# Form Modals

Quick forms appear in modals:

┌────────────────────────────────────┐
│  Add New Speaker              [×]  │
├────────────────────────────────────┤
│  First Name *                      │
│  [                    ]            │
│                                    │
│  Last Name *                       │
│  [                    ]            │
│                                    │
│  Email *                           │
│  [                    ]            │
│                                    │
│  [Cancel]            [Add Speaker] │
└────────────────────────────────────┘

# Loading States

# Skeleton Loaders

While data loads, skeleton placeholders appear:

┌────────────────────────────────────┐
│  ████████████         ▒▒▒▒▒▒▒▒    │
│  ███████              ▒▒▒▒▒▒      │
│                                    │
│  ████████████         ▒▒▒▒▒▒▒▒    │
│  ███████              ▒▒▒▒▒▒      │
└────────────────────────────────────┘

# Spinner

For quick operations:

# Progress Bars

Planned

For long operations (file uploads, data imports):

Uploading company logo...
[████████████░░░░░░░░] 60%

# Breadcrumbs

Navigate hierarchical views:

Home > Events > BATbern 2025 > Workflow > Phase A: Setup

Click any segment to navigate.

# Tabs

Organize complex forms:

[General] [Timeline] [Speakers] [Partners]
─────────
   General Information
   Event Name: BATbern 2025
   Event Type: Full-Day Conference
   ...

# Accessibility Features

Implemented

BATbern meets WCAG 2.1 AA standards:

• ✅ Keyboard Navigation: Tab through all interactive elements
• ✅ Screen Reader Support: ARIA labels on all controls
• ✅ High Contrast: Text contrast ratio ≥ 4.5:1
• ✅ Focus Indicators: Visible focus rings on keyboard navigation
• ✅ Semantic HTML: Proper heading hierarchy and landmark roles

# Mobile & Responsive

The interface adapts to different devices:

# Touch Gestures

On mobile/tablet:

• Tap - Activate buttons, links
• Swipe Left/Right - Navigate carousel items (e.g., event cards)
• Long Press - Show context menu Planned
• Pull Down - Refresh lists Planned

# Adaptive Layouts

• Desktop: Multi-column, expanded sidebar
• Tablet: Two-column, collapsible sidebar
• Mobile: Single-column, hamburger menu

# What’s Next?

• Entity Management → - Start managing entities
• Workflow System → - Master the 3 workflow systems
• Keyboard Shortcuts → - Speed up navigation

# Related Topics

• Dashboard Navigation - Dashboard layout and features
• Feature Status - What’s implemented vs planned
• Accessibility Guide Planned