FluentStack

Reduced Motion

Mode tersedia: dark, light, paper
MasukDaftar
Advanced · Level 15: AccessibilityAdvanced50 menitBahasa Indonesia

Reduced Motion

Mengurangi motion non-esensial ketika user meminta interface yang lebih tenang.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Menjelaskan preference reduced motion dan alasan UI perlu menghormatinya
  • Membedakan motion esensial dari animation dekoratif atau transisi non-esensial
  • Menambahkan CSS fallback untuk hover, transition, dan animation yang berlebihan
  • Menguji preference melalui browser atau operating system sebelum menandai task selesai
CSSprefers-reduced-motionUser PreferencesAccessibility

Isi lesson

6 blok
  1. 1.
    Motion bukan selalu feedback yang netralBelum selesaiWajib
  2. 2.
    Kurangi hover movement dan badge animationBelum selesaiWajib
  3. 3.
    Coding practiceBelum selesaiWajib
  4. 4.
    Cek pemahamanBelum selesaiWajib
  5. 5.
    Jangan mengandalkan global reset tanpa memahami UIBelum selesaiOpsional
  6. 6.
    RingkasanBelum selesaiWajib

Motion bukan selalu feedback yang netral

Wajib

Scale, slide, parallax, auto-play, dan animation berulang dapat membuat beberapa user tidak nyaman atau sulit mempertahankan fokus. prefers-reduced-motion memberi browser sinyal bahwa user memilih mengurangi motion non-esensial. Preference ini bukan perintah untuk menghapus setiap transition secara membabi buta. Pertahankan perubahan yang benar-benar menyampaikan informasi atau fungsi penting, tetapi ganti gerakan dekoratif dengan state yang lebih tenang, misalnya perubahan opacity, text status, atau tampilan langsung tanpa perjalanan visual panjang.

Bagian ini memengaruhi progres lesson.

Kurangi hover movement dan badge animation

Wajib
css
.course-card {
  transition: transform 240ms ease, box-shadow 240ms ease;
}

.course-card:hover {
  transform: translateY(-4px);
}

.completion-badge {
  animation: celebrate 900ms ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  .course-card {
    transition: none;
  }

  .course-card:hover {
    transform: none;
  }

  .completion-badge {
    animation: none;
  }
}

Default UI masih memberi feedback ringan. Saat preference reduce aktif, card tidak lagi bergerak dan badge tidak berdenyut terus-menerus. Completion tetap dapat dibaca dari text serta warna, jadi informasi tidak hilang bersama animation. Bila animation diperlukan untuk menjelaskan perubahan data atau lokasi focus, sediakan alternatif yang sama jelasnya.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Reduce course card motion

Tambahkan reduced-motion behavior agar card dan completion badge tidak bergerak tanpa kebutuhan ketika user meminta interface yang lebih tenang.

Tujuan awal: Fokus di tab CSS.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

7 cek otomatis5 checklist
Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Mana perubahan yang paling tepat saat prefers-reduced-motion: reduce aktif?

Progres lesson naik setelah jawaban benar.

Peringatan

Opsional

Jangan mengandalkan global reset tanpa memahami UI

Rule global yang mematikan semua animation dapat merusak transition yang memang membantu memahami perubahan, termasuk dialog yang baru muncul atau progress yang sedang berjalan. Mulai dari motion yang paling mencolok, audit purpose-nya, lalu uji alternate behavior. Hindari juga animation yang dimulai otomatis dan berjalan terus tanpa control user.

Opsional, tidak menghambat penyelesaian lesson.

Ringkasan

Wajib
  • prefers-reduced-motion membaca preference user dari device atau browser.
  • Kurangi motion dekoratif, auto-play, serta movement yang tidak diperlukan untuk memahami task.
  • Informasi success, error, focus, dan progress tetap harus jelas tanpa animation.
  • Uji setting reduce pada environment nyata, bukan hanya membaca CSS selector.
  • Berikutnya, screen reader smoke test membantu kita mendengar structure dan feedback yang tidak selalu terlihat di UI visual.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Motion bukan selalu feedback yang netral.

Memuat progresReview module