Skip to content

UI/UX-forbedringer

Denne siden dokumenterer UI/UX-forbedringene implementert i desember 2025.

Fase 1: Forbedret Bookingflyt âś…

Status: Fullført og deployet
Dato: 3. desember 2025

Endringer

1. Fremdriftsindikator

Implementert Ant Design-inspirert stegindikator:

  • 4 tydelige steg med ikoner (đź“…, đźš—, đź“ť, âś“)
  • Animert fremgangsbar under stegene
  • Klikkbare fullførte steg for rask navigering
  • Pulserende animasjon pĂĄ gjeldende steg

Teknisk:

<ProgressSteps 
  currentStep={currentStep} 
  totalSteps={4}
  onStepClick={goToStep}
/>

2. Steg 1: NĂĄr & Hvor Lenge

Forbedringer:

  • Visuell kortvelger for 9/18 hull
  • PrisforhĂĄndsvisning per kategori
  • Bedre tid- og datovelger
  • Estimert varighet vises

CSS:

  • .hole-selector med responsive kort
  • Hover-effekter og animasjoner
  • Grønn markering for valgt alternativ

3. Steg 2: Velg Bil

Forbedringer:

  • Visuelt rutenett med golfbil-kort
  • Status-badges (Ledig/Opptatt/Ute av drift)
  • Filter for kun ledige biler
  • Teller for tilgjengelige biler
  • Disabled-overlay for utilgjengelige biler

CSS:

  • .cart-grid med responsive kolonner
  • .cart-card med hover-transformasjon
  • Streket mønster for utilgjengelige
  • Fargekodet status-system

4. Steg 3: Dine Opplysninger

Forbedringer:

  • Live prisberegning med øyeblikkelige oppdateringer
  • Synlig priskort med breakdown
  • Rabatt-indikator for legeerklæring
  • Kontaktpreferanse-chips (E-post/SMS)
  • Bedre validering med inline-meldinger

CSS:

  • .price-breakdown-card med strukturert layout
  • .preference-chip for valg av kontaktmetode
  • Grønn farge pĂĄ rabatter
  • Responsive skjemafelt

5. Steg 4: Bekreft

Forbedringer:

  • Redigeringsknapper for hvert steg
  • Detaljert sammendrag delt i seksjoner
  • VilkĂĄr og betingelser-checkbox
  • Gradient priskort med dramatisk design
  • Forbedret suksess-skjerm

CSS:

  • .review-card med seksjonert layout
  • .edit-btn med hover-skalering
  • .price-summary-card med gradient-bakgrunn
  • .success-state med bounce-animasjon

Design-prinsipper

Farger

Ski Golfklubb-fargepalett:

:root {
  --primary-color: #004E98;      /* BlĂĄ */
  --secondary-color: #2E7D32;    /* Grønn */
  --gold-accent: #FFD700;        /* Gull */
  --text-primary: #1a1a1a;
  --text-secondary: #666;
  --bg-secondary: #f5f5f5;
}

Status-farger

/* Tilgjengelig */
--status-available-bg: #E6F4EA;
--status-available-text: #2E7D32;

/* Booket */
--status-booked-bg: #FEF3E2;
--status-booked-text: #F57C00;

/* Ute av drift */
--status-out-of-order-bg: #FFEBEE;
--status-out-of-order-text: #C62828;

Typografi

  • Headers: 18-24px, bold
  • Body: 14-16px, regular
  • Small: 12-14px for hjelpetekst
  • Font: System font stack for ytelse

Spacing

  • Card padding: 20-24px
  • Element gaps: 12-16px
  • Section margins: 24-32px
  • Border radius: 8px standard

Animasjoner

/* Hover transformation */
.cart-card:hover {
  transform: translateY(-2px);
  transition: all 0.3s ease;
}

/* Pulse animation */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Bounce animation */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

Responsivt Design

Desktop (>768px)

  • Multi-kolonne rutenett for golfbiler
  • Side-ved-side layout for skjemafelt
  • Full bredde pĂĄ priskort

Mobil (<768px)

@media (max-width: 768px) {
  .cart-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .step-actions {
    flex-direction: column;
  }

  .review-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

Tilgjengelighet

  • âś… ARIA-labels pĂĄ interaktive elementer
  • âś… Tastaturnavigasjon støttes
  • âś… Fokusstyring ved stegendringer
  • âś… Kontrastforhold følger WCAG 2.1 AA
  • âś… Skjermleservennlige status-meldinger

Ytelse

  • Build size: 548 KB (gzipped: 170 KB)
  • CSS size: 16 KB (gzipped: 3.5 KB)
  • Lazy loading: Nei (alle steg lastes ved oppstart)
  • Animation performance: 60 FPS med CSS transforms

Fase 2: Dashboard (Planlagt)

Status: Ikke startet
Estimert: Q1 2025

Planlagte forbedringer

  • Oversiktsdashboard med nøkkeltall
  • Dagens statistikk-widgets
  • Aktive bookinger i sanntid
  • Hurtighandlinger
  • Grafisk fremstilling av data

Fase 3: Rapporter (Planlagt)

Status: Ikke startet
Estimert: Q1 2025

Planlagte forbedringer

  • Visuell rapport-UI
  • Datovelger med presets
  • Live forhĂĄndsvisning
  • Eksportknapper (CSV/JSON/PDF)
  • Lagrede rapportmaler

Fase 4: Mobil-responsivitet (Planlagt)

Status: Delvis implementert
Estimert: Q1 2025

Planlagte forbedringer

  • Touchvennlige komponenter (>44px tap-targets)
  • Swipe-gester for navigasjon
  • Bottom sheets for mobile
  • Responsive tabeller
  • Mobiloptimert meny

Fase 5: UX-forbedringer (Planlagt)

Status: Ikke startet
Estimert: Q2 2025

Planlagte forbedringer

  • Toast-notifikasjoner
  • Loading skeletons
  • Optimistisk UI
  • Bedre feilmeldinger
  • Tooltips og hjelpetekst

Fase 6: Avanserte funksjoner (Planlagt)

Status: Ikke startet
Estimert: Q2 2025

Planlagte forbedringer

  • Drag-and-drop booking
  • Kalendervisning
  • Bulk-operasjoner
  • Keyboard shortcuts
  • Dark mode

Implementeringsdetaljer

Fil-struktur

admin/src/
├── components/
│   ├── ProgressSteps.tsx       # Fremdriftsindikator
│   ├── BookingStepper.tsx      # Hovedflyt-controller
│   └── steps/
│       ├── Step1Date.tsx       # Dato/tid/varighet
│       ├── Step2Cart.tsx       # Golfbil-velger
│       ├── Step3Details.tsx    # Kundeinfo
│       └── Step4Review.tsx     # Bekreftelse
├── ski-gk-theme.css            # Global styling
└── types.ts                    # TypeScript-typer

CSS-struktur

/* Global Variables */
:root { ... }

/* Progress Steps (150 lines) */
.progress-steps { ... }

/* Step 1: Date Selection (80 lines) */
.hole-selector { ... }

/* Step 2: Cart Selection (120 lines) */
.cart-grid { ... }

/* Step 3: Details (90 lines) */
.price-breakdown-card { ... }

/* Step 4: Review (130 lines) */
.review-card { ... }

/* Responsive (30 lines) */
@media (max-width: 768px) { ... }

Komponent-props

// ProgressSteps
interface ProgressStepsProps {
  currentStep: number;
  totalSteps: number;
  onStepClick: (step: number) => void;
}

// Step components
interface StepProps {
  data: BookingData;
  updateData?: (data: Partial<BookingData>) => void;
  onNext?: () => void;
  onBack?: () => void;
  onEdit?: (step: number) => void;
}

Testing

Manuell testing

  • âś… Fullført bookingflyt pĂĄ desktop
  • âś… Fullført bookingflyt pĂĄ mobil
  • âś… Navigering frem og tilbake
  • âś… Prisberegning med alle scenarioer
  • âś… Validering pĂĄ alle steg

Automatisk testing

  • ⏳ Unit tests (planlagt)
  • ⏳ Integration tests (planlagt)
  • ⏳ E2E tests (planlagt)

Referanser