# Audit Beranda SATUDAUN

Tanggal: 13 Oktober 2026, Asia/Jakarta. Mode Anti Slop: After, mengikuti pilihan sesi. Lingkup: analisis, rekomendasi dan konsep; tidak mengubah file aplikasi.

## Penilaian

Palet hijau, konteks petani pasang surut dan informasi lokal merupakan kekuatan. Hambatan utama: layanan sulit ditemukan dengan cepat, halaman panjang dan beberapa interaksi memberikan hasil yang tidak sesuai fungsi sebenarnya. Optimasi perlu dimulai dari kejelasan fungsi dan urutan informasi, kemudian komposisi visual.

Arah berasal dari README bagian 6: profesional, natural, mudah dibaca, dokumentasi autentik dan animasi terbatas. Konsep: beranda informasi dan layanan koperasi untuk petani, anggota dan calon mitra, editorial pertanian, ENERGY 2 / RHYTHM 3 / MOTION 1. Ritme 3 berarti bagian layanan, agenda, dokumentasi dan kontak berbeda komposisi sesuai kebutuhan, bukan kartu yang diulang pada setiap bagian.

## Temuan bernomor

### 1. HIGH: Formulir menampilkan sukses tanpa pengiriman (R-26, R-38; C-2)

Alasan: formulir kontak hanya menjalankan preventDefault, alert dan reset. Pendaftaran hanya menyembunyikan form, menampilkan "Permohonan Terkirim!", lalu reset. Tidak ada penyimpanan, request atau route POST untuk kedua alur tersebut.

Lokasi: `resources/views/components/supporting-sections.blade.php`, form kontak; `resources/views/components/layouts/app.blade.php:268`; `resources/views/components/modals.blade.php:179`, `:237`; `routes/web.php`.

Rekomendasi: sebelum menjadikannya CTA utama, tentukan jalur nyata. Jika backend belum disiapkan, arahkan ke konsultasi sekretariat dan beri penjelasan proses. Jangan mengumpulkan NIK dalam formulir yang tidak memiliki alur penyimpanan dan verifikasi. Tidak perlu membuat backend pendaftaran hanya untuk memperbaiki tampilan; keputusan itu perlu scope tersendiri.

### 2. HIGH: Fokus modal dan kontrol belum aksesibel (R-32, R-03)

Alasan: saat modal pendaftaran dibuka, fokus tetap di tombol hero. Menekan Tab berpindah ke tombol audio di belakang modal. Tombol tutup modal tidak memiliki nama aksesibel. Quick access dan tombol video memakai focus:outline-none tanpa pengganti pada komponennya. Pada mobile, tombol daftar dan kirim pesan sekitar 40 px, link profil dan semua berita 20 px, di bawah target 44 px skill.

Lokasi: `resources/views/components/layouts/app.blade.php:254`; `resources/views/components/modals.blade.php:174`; `resources/views/components/quick-access.blade.php`; `resources/views/components/hero.blade.php`.

Rekomendasi: pindahkan fokus ketika modal dibuka, tahan fokus di modal, kembalikan fokus saat ditutup, gunakan Escape, labeli tombol tutup, pasang focus-visible dan minimum target 44 px. Escape saat ini sudah menutup modal pendaftaran.

### 3. HIGH: Statistik dan kontak tidak memiliki konteks yang konsisten (R-17, R-36, R-38)

Alasan: hero menampilkan 50.000+ karung sebagai serapan panen, sedangkan UnitUsahaService menyebut angka itu target musim panen 2026. Jumlah anggota 248+ di hero dan 240+ pada cuplikan berita berbeda tingkat ketelitiannya. Harga Rp6.500 tidak disertai periode atau syarat di hero. Klaim "Aktif & Terverifikasi" dan "Sesuai UU Perkoperasian" belum ditautkan ke bukti. Nomor kontak di Beranda, widget global dan Unit Usaha berbeda.

Lokasi: `resources/views/components/hero.blade.php:90`; `resources/views/components/supporting-sections.blade.php:125`, bagian berita dan kontak; `app/Services/UnitUsahaService.php`, target Serapan Gabah; `app/Services/NewsService.php:12`.

Rekomendasi: pisahkan target dari capaian, gunakan data dengan tanggal pembaruan, sumber dan periode, serta pilih kontak resmi berdasarkan informasi pengelola. Tidak menganggap angka berbeda sebagai bukti data palsu. Audit ini tidak menilai harga pasar atau ketentuan hukum terbaru.

### 4. HIGH: Hero video bergantung pada embed tanpa fallback visual (R-27; C-4)

Alasan: pada pembukaan pertama, layar besar menunjukkan bidang hitam luas; thumbnail video muncul kemudian. Iframe dan script YouTube dimuat langsung, tanpa poster lokal atau state gagal. Video dibuat tidak bisa diklik secara langsung. Tombol custom mengubah UI menjadi playing sebelum mendapat konfirmasi player. Handler klik/touch seluruh dokumen mencoba unmute dan setVolume(100).

Lokasi: `resources/views/components/hero.blade.php:45`, `:48`, `:246`, `:331`, `:367`.

Rekomendasi: tampilkan dokumentasi lokal yang sudah tersedia sebagai poster; muat player setelah "Tonton dokumenter" diklik; pisahkan video dari tugas membaca hero. Jika tetap ingin video latar, poster wajib bertahan sampai video siap, default mute dan tampilkan state player yang benar. Jangan mengubah audio karena klik pada bagian lain halaman. Tidak mengklaim video rusak permanen, karena thumbnail kemudian berhasil dimuat. Tidak mengklaim peningkatan performa terukur sebelum benchmark.

### 5. LOW: Arah pesan dan CTA belum mengutamakan kebutuhan anggota (R-15, R-20; C-3)

Alasan: headline berisi tujuan kelembagaan yang luas dan pengantar memakai istilah seperti "inisiasi kelembagaan agribisnis". CTA utama meminta pendaftaran. Quick access mengarah ke profil, program, berita dan kontak, tanpa akses langsung ke Unit Usaha.

Rekomendasi: headline ringkas yang tetap menyebut petani dan lokasi, misalnya "Tumbuh bersama petani Muara Telang". Deskripsi satu atau dua kalimat tentang layanan yang memang tersedia. CTA utama "Lihat layanan koperasi" ke Unit Usaha; CTA kedua "Tanya sekretariat". Pendaftaran dapat menjadi bagian tersendiri setelah manfaat dan prosesnya jelas.

### 6. MEDIUM: Halaman terlalu panjang dan komposisi berulang (R-05, R-14, R-20; C-3)

Alasan: desktop 1440 × 1000 menghasilkan tinggi halaman sekitar 7.722 px. Mobile 390 × 844 sekitar 14.310 px dan program mulai pada posisi sekitar 3.145 px. Profil lengkap, visi/misi, nilai, legalitas, program, kalender, galeri, empat langkah, berita dan formulir ditumpuk di satu halaman. Banyak bagian memakai judul panjang, badge, kartu berbatas dan padding 80–96 px.

Rekomendasi: jadikan Beranda rangkuman yang mengantar ke halaman detail. Layanan dipindah tepat setelah hero. Profil menjadi paragraf singkat dan bukti resmi seperlunya. Agenda menampilkan satu kegiatan terdekat dan berita dua entri. Dokumentasi memakai satu foto utama dan dua pendamping. Kurangi jarak antarbagian pada mobile. Panjang akhir mengikuti isi yang berguna, bukan target piksel arbitrer.

### 7. HIGH: Tipografi dan kontras sebagian informasi kurang memadai (R-25; terkait R-06)

Alasan: pada mobile ada 31 paragraf ukuran 12 px, dibandingkan tujuh paragraf 15 px. Tanggal berita berwarna #62827c pada putih memiliki kontras 4,20:1, di bawah ambang 4,5:1 untuk teks kecil.

Rekomendasi: isi 15–16 px berbasis rem, metadata sekitar 12–13 px, kontras minimal 4,5:1 dan panjang baris terkontrol. Perbesar isi lebih dahulu daripada menambahkan elemen dekoratif. Palet dan jenis huruf yang sudah digunakan dapat dipertahankan.

### 8. MEDIUM: Kartu dan dekorasi memberi sinyal interaksi yang tidak jelas (R-08, R-09, R-19; C-1)

Alasan: empat kartu program memiliki hover, arrow dan tampilan seperti tautan tetapi berupa div; hanya satu link umum di bagian program. Badge dengan dot berulang pada hampir semua bagian, status pulse dan indikator bounce menambah perhatian tanpa membantu memilih layanan.

Rekomendasi: kartu layanan yang ditampilkan benar-benar menuju divisi terkait. Gunakan kategori dan teks tindakan yang jelas. Pertahankan penanda hanya jika memberi informasi atau status nyata. Hilangkan animasi otomatis yang tidak membantu pekerjaan pengguna dan dukung reduced motion.

## Layout yang disarankan

1. Hero: headline ringkas, manfaat konkret, dua CTA, satu visual dokumentasi. Desktop memakai komposisi teks dan visual berdampingan; mobile menampilkan pesan dan CTA sebelum visual sekunder. Video tetap tersedia sebagai pilihan.
2. Layanan koperasi: akses berdasarkan kebutuhan seperti benih/pupuk, alsintan, tata air dan hasil panen. Label mengikuti unit yang sudah ada dan setiap item menuju detail Unit Usaha. Sertakan akses ke seluruh unit.
3. Agenda dan kabar: satu kegiatan terdekat yang terverifikasi ditambah dua berita dari NewsService, menggunakan tanggal dan status jelas. Tampilkan empty state jika belum ada informasi, jangan mengarang agenda.
4. Mengenal koperasi: paragraf pendek tentang lokasi dan peran koperasi, foto kegiatan autentik serta link profil. Dokumen resmi ditautkan hanya jika tersedia.
5. Keanggotaan: manfaat, persyaratan inti dan tahapan yang ringkas. CTA sesuai proses yang benar-benar berfungsi.
6. Kontak: kanal resmi, jam layanan terverifikasi, alamat dan petunjuk lokasi. Hindari mengulang formulir lengkap jika kanal WhatsApp sudah cukup untuk scope saat ini.

Hijau tua tetap menjadi penanda identitas dan tindakan utama; krem menjadi bidang pembuka dan pendamping. Ruang putih membantu pembacaan. Gaya Beranda dapat mengikuti Unit Usaha yang baru, dengan lebih banyak dokumentasi autentik agar pengalaman tetap hidup. Tidak perlu glow, grid dekoratif atau kartu seragam pada seluruh bagian.

## Bukti audit dan batasan

- Aplikasi lokal dibuka pada viewport 1440, 390, 320 dan 768 px. Tidak ada scroll horizontal pada sampel mobile yang diukur.
- Modal pendaftaran dibuka, fokus sebelum/sesudah Tab diperiksa, lalu ditutup dengan Escape. Tidak ada data pribadi diisi atau permohonan dikirim.
- Fungsi submit ditelusuri di kode; formulir kontak/pendaftaran tidak disubmit dalam browser.
- Rasio tanggal berita dihitung dari warna computed browser dan rumus luminansi.
- Player menunjukkan bidang kosong pada awal inspeksi dan thumbnail pada inspeksi berikutnya; tidak mengklaim gagal permanen.
- Belum dilakukan benchmark jaringan, pengujian semua kontrol, pemeriksaan semua kontras, build ulang atau pengujian perangkat fisik. Audit tidak mengklaim pemeriksaan tersebut selesai.

## Delivery Gate

Laporan audit: PASS untuk bukti lokal, temuan bernomor, alasan, aturan dan rekomendasi; PASS untuk menjaga scope tanpa perubahan UI; PASS untuk membedakan fakta teramati dari konsep.

Gate desain belum lulus karena temuan fungsi, aksesibilitas, kejelasan data, fallback video dan kontras masih ada. Tidak menyatakan halaman siap produksi. Implementasi dan gate lengkap dilakukan setelah pengguna memilih temuan yang diperbaiki dalam mode After.

Rekomendasi prioritas: 1–4 dan 7 untuk fungsi dan keterbacaan; 5, 6 dan 8 untuk redesign informasi dan komposisi. Konsep lengkap mencakup seluruh temuan 1–8.