Mobile UI/UX Design: Prinsip & Best Practices

# Gesture Navigation Best Practices:

1. JANGAN letakkan elemen interaktif di tepi bawah layar
   → Sistem gesture area (±20dp dari bawah)

2. Gunakan Edge-to-edge design
   → Content memenuhi seluruh layar
   → Padding/bottom inset untuk menghindari gesture area

3. Bottom Navigation harus di atas gesture bar
   → Gunakan WindowInsets untuk menghitung safe area

4. Swipe gesture di dalam app harus tidak konflik
   → Dengan system back gesture (swipe dari tepi kiri/kanan)

5. Beri visual hint untuk gesture yang tidak obvious
   → Tooltip, tutorial onboarding, atau gesture hint animation

# Typography Best Practices untuk Mobile:

1. LINE HEIGHT
   - Body text: 1.4-1.6x dari font size
   - Heading: 1.2-1.3x dari font size
   - Contoh: 16sp font → line-height 22-26sp

2. LINE LENGTH
   - Ideal: 40-60 karakter per baris
   - Mobile: layar kecil biasanya sudah pas

3. LETTER SPACING
   - Body text: normal (0)
   - ALL CAPS text: +0.5-1.0sp (agar tidak terlalu rapat)
   - Caption: +0.2-0.5sp

4. KONTRAS
   - Teks utama: #000000 atau #212121 di background putih
   - Teks sekunder: #666666 atau #757575
   - Minimum contrast ratio: 4.5:1 (WCAG AA)

5. FONT WEIGHT HIERARCHY
   - 700 (Bold) → Judul
   - 500 (Medium) → Sub-judul, label
   - 400 (Regular) → Body text
   - JANGAN gunakan lebih dari 2-3 font weight dalam satu app

# ===== SEMANTIC COLORS =====

🟢 Success:  #4CAF50 (Green)  → Berhasil, konfirmasi, online status
🔴 Error:    #F44336 (Red)    → Error, hapus, logout, bahaya
🟡 Warning:  #FF9800 (Orange) → Peringatan, perhatian, pending
🔵 Info:     #2196F3 (Blue)   → Informasi, link, help

# ===== DARK MODE CONSIDERATIONS =====

Light Mode:
  - Background: #FFFFFF
  - Surface: #F5F5F5
  - Text Primary: #212121
  - Text Secondary: #757575

Dark Mode:
  - Background: #121212
  - Surface: #1E1E1E
  - Text Primary: #FFFFFF (atau #E0E0E0)
  - Text Secondary: #AAAAAA

# ===== PENTING =====
- Hindari warna murni (#FF0000) — gunakan versi yang lebih halus
- Primary color: gunakan 500 shade dari Material palette
- Untuk aksesibilitas: kontras minimum 4.5:1 (AA) atau 7:1 (AAA)
- Dark mode: JANGAN gunakan hitam murni (#000000) — gunakan #121212

# ===== MOBILE ACCESSIBILITY CHECKLIST =====

## Visual
✅ Contrast ratio minimum 4.5:1 untuk teks normal
✅ Contrast ratio minimum 3:1 untuk teks besar (18sp+)
✅ Jangan hanya gunakan warna untuk menyampaikan informasi
   → Tambahkan ikon, label teks, atau pattern
✅ Support Dark Mode
✅ Teks bisa di-scale hingga 200% tanpa breaking layout
✅ Animasi tidak berkedip lebih dari 3x per detik (seizure safety)

## Touch & Motor
✅ Touch target minimum 48×48dp (Android) / 44×44pt (iOS)
✅ Jarak antar touch target minimum 8dp
✅ Jangan gunakan gesture-only interaction
   → Selalu ada alternatif tap/button
✅ Timeout bisa diperpanjang atau dihilangkan
✅ Area interaktif tidak terlalu dekat dengan tepi layar

## Screen Reader
✅ Semua gambar punya contentDescription (Android) / accessibilityLabel (iOS)
✅ Semua interaktif elemen punya label yang jelas
✅ Heading hierarchy yang benar (H1 → H2 → H3)
✅ Form field punya label yang terkait (not just placeholder)
✅ Live region untuk perubahan dinamis (loading, error)

## Cognitive
✅ Bahasa yang sederhana dan jelas
✅ Error message yang spesifik dan helpful
✅ Konfirmasi sebelum aksi destructive (hapus, logout)
✅ Breadcrumb / progress indicator untuk alur panjang
✅ Konsistensi — elemen yang sama berfungsi sama

// Material 3 Dynamic Color (Android 12+)
@Composable
fun MyAppTheme(content: @Composable () -> Unit) {
    val dynamicColor = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S
    val colorScheme = when {
        dynamicColor && isSystemInDarkTheme() ->
            dynamicDarkColorScheme(LocalContext.current)
        dynamicColor && !isSystemInDarkTheme() ->
            dynamicLightColorScheme(LocalContext.current)
        isSystemInDarkTheme() -> darkColorScheme(
            primary = Color(0xFF90CAF9),
            secondary = Color(0xFFCE93D8),
            background = Color(0xFF121212),
            surface = Color(0xFF1E1E1E),
        )
        else -> lightColorScheme(
            primary = Color(0xFF1976D2),
            secondary = Color(0xFF7B1FA2),
            background = Color(0xFFFFFBFE),
            surface = Color(0xFFFFFBFE),
        )
    }

    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography(
            headlineLarge = TextStyle(fontSize = 32.sp, fontWeight = FontWeight.Bold),
            headlineMedium = TextStyle(fontSize = 24.sp, fontWeight = FontWeight.SemiBold),
            bodyLarge = TextStyle(fontSize = 16.sp, lineHeight = 24.sp),
            bodyMedium = TextStyle(fontSize = 14.sp, lineHeight = 20.sp),
            labelLarge = TextStyle(fontSize = 14.sp, fontWeight = FontWeight.Medium),
        ),
        content = content
    )
}