Cara Menjaga Kontrol Hewan Peliharaan dan Karakter Tetap Terlihat dalam Antarmuka Game yang Ringkas

Buat daftar informasi dan tindakan yang dibutuhkan pemain selama alur permainan utama (core play loop). Tahap awal yang baik bisa mencakup hewan peliharaan, satu tindakan utama seperti memberi makan atau bermain, dan indikator ringkas yang memperjelas apakah tindakan tersebut tersedia. Pindahkan pengaturan, koleksi, dan tindakan yang lebih jarang digunakan ke menu sekunder atau panel kontekstual singkat. Ini adalah metode desain, bukan aturan mutlak: game yang tugas utamanya adalah memilih di antara beberapa tindakan mungkin memerlukan lebih banyak kontrol yang terlihat sekaligus.

Berikan karakter area visual yang jelas sebelum memasukkan kontrol. Pastikan bagian-bagian penting dari siluet dan ekspresinya terlihat jelas, serta hindari menempatkan tombol atau label di atasnya. Jika suatu tindakan mengharuskan pemain menyentuh hewan peliharaan secara langsung, biarkan area interaksi tersebut bebas dari halangan; jika kontrol berada di atas tampilan visual game, pastikan kontrol tersebut tidak menutupi bagian karakter yang perlu dilihat pemain. Panduan kontrol game dari Apple merekomendasikan pengurangan kontrol virtual jika interaksi langsung dengan objek game dapat menggantikannya (Game controls).

Kumpulkan tindakan-tindakan yang sering digunakan di area yang mudah dijangkau, dan tempatkan tindakan sekunder lebih jauh atau di balik menu. Pada layar sentuh, hindari menumpuk tombol di area yang sama di mana tangan pemain dapat menutupi hewan peliharaan. Apple menyarankan untuk menempatkan kontrol sentuh yang sering digunakan di dekat jempol dan kontrol sekunder di dekat bagian atas layar; panduannya juga menyatakan perlunya mempertimbangkan jangkauan yang nyaman dan batas perangkat. Anggap panduan ini sebagai titik awal untuk diuji pada perangkat dan orientasi yang ditargetkan, bukan sebagai tata letak baku untuk setiap game.

Buat ikon yang terlihat berukuran ringkas tanpa memperkecil ukuran target sentuh sebenarnya. Apple merekomendasikan ukuran minimum 44 x 44 poin untuk kontrol yang sering digunakan dan 28 x 28 poin untuk kontrol yang kurang penting di platformnya. Android merekomendasikan setidaknya 48 x 48 density-independent pixels untuk target sentuh interaktif. Ini adalah ukuran khusus platform, jadi gunakan satuan dan panduan platform yang relevan daripada memperlakukan angka-angka tersebut sebagai hal yang dapat dipertukarkan (Apple game controls, Android accessibility guidance). Berikan jarak pemisah yang cukup untuk menghindari ketidaksengajaan mengetuk, terutama jika kedua tindakan menghasilkan respons yang berbeda.

Karakter hewan peliharaan bisa saja secara teknis tetap berada di layar namun sulit terlihat ketika kontrol, label, atau panel dekoratif bersaing dengannya. Gunakan bobot visual yang tidak berlebihan untuk elemen antarmuka sekunder: ikon kecil, label pendek, dan panel yang hanya memakan ruang seperlunya. Pastikan wajah karakter dan detail penting lainnya tetap jelas selama tindakan-tindakan yang paling penting berlangsung. Jika tampilan latar game berubah di balik teks atau ikon, pertimbangkan untuk menambahkan latar belakang tipis atau garis luar (outline) agar antarmuka tetap terbaca tanpa perlu menambahkan panel buram yang besar.

Periksa teks dan ikon di bagian pemandangan yang terang maupun gelap. Kontras yang terlihat pas di satu latar belakang bisa menghilang saat hewan peliharaan bergerak atau tampilan berubah. Untuk teks, panduan WCAG dari W3C menetapkan rasio kontras 4,5:1 untuk teks berukuran normal dan 3:1 untuk teks besar. WCAG adalah panduan untuk konten web dan bukan aturan khusus game, tetapi ambang batas kontrasnya dapat berfungsi sebagai tolok ukur yang berguna untuk teks antarmuka di atas latar belakang yang dinamis (W3C contrast guidance). Jangan hanya mengandalkan warna untuk mengomunikasikan tindakan yang tidak tersedia; ubah juga label, bentuk, atau statusnya secara visual.

Jika kontrol statis yang selalu tampil memakan terlalu banyak ruang, munculkan tindakan opsional saat pemain membuka menu atau memilih hewan peliharaan. Sembunyikan tindakan yang tidak tersedia dalam kondisi saat ini, dan tampilkan perubahan status yang jelas saat kontrol ditekan. Apple secara khusus merekomendasikan penyesuaian kontrol virtual mana yang terlihat sesuai konteks permainan, termasuk menyembunyikan kontrol yang tidak relevan dan membuat kontrol yang aktif lebih terlihat. Pola praktisnya adalah menjaga tindakan utama tetap tersedia, lalu memunculkan pilihan terkait dalam menu kecil yang langsung tertutup setelah dipilih.

Buat perubahan status dapat diprediksi. Kontrol yang tiba-tiba menghilang saat pemain hendak menggunakannya dapat membingungkan, jadi terapkan perilaku sembunyikan/tampilkan hanya untuk tindakan yang ketersediaannya sudah jelas dari kondisi saat ini. Jika sebuah tombol menjadi tidak aktif, tunjukkan status tersebut dan, jika perlu, jelaskan secara singkat apa yang berubah. Hindari menu yang membesar hingga menutupi wajah hewan peliharaan atau area yang perlu diketuk pemain selanjutnya.

Rancang tata letak berdasarkan area yang dapat digunakan, bukan hanya bentuk persegi panjang luar layar. Poni (notch), lekukan kamera, bilah sistem, dan area gestur dapat menutupi kontrol penting di dekat tepi. Panduan tata letak Apple mendefinisikan area aman (safe areas) sebagai wilayah yang membantu menjaga konten terbebas dari elemen antarmuka dan fitur perangkat. Android pun demikian, merekomendasikan untuk memperhatikan batas bilah sistem, gestur, dan lekukan layar (display-cutout insets), serta menjauhkan kontrol penting dari lekukan kamera (Apple layout guidance, Android edge-to-edge guidance). Gambar latar belakang dapat melebar hingga ke tepian layar sementara elemen interaktif tetap berada di dalam area aman.

Jangan berasumsi satu susunan yang ringkas akan cocok untuk semua rasio aspek. Kaitkan kontrol ke area yang dapat digunakan dan biarkan spasi atau pengelompokan beradaptasi ketika lebar yang tersedia berubah. Panduan game Android untuk Unity merekomendasikan penggunaan safe-area API serta mendukung berbagai ukuran layar dan rasio aspek. Uji tata letak potret atau lanskap hanya jika game memang mendukungnya, dan periksa kembali setelah rotasi, perubahan ukuran jendela, atau pelipatan perangkat jika konfigurasi tersebut didukung (Android guidance for Unity games on large screens).

Maket (mockup) statis tidak dapat memperlihatkan area mana saja yang tertutupi jari pemain saat digunakan. Tinjau antarmuka pada ukuran layar fisik yang sebenarnya, lalu coba lakukan tindakan-tindakan utama sambil mengamati apakah ada detail karakter yang tertutup, ketukan yang meleset, dan kontrol yang bertumpukan dengan fitur sistem. Ulangi pengujian dengan layar terkecil yang didukung serta rasio aspek yang lebih lebar atau lebih tinggi. Jika memungkinkan, mintalah seseorang yang belum terbiasa dengan tata letak tersebut untuk melakukan tugas utama dan perhatikan di mana mereka mengetuk, ragu-ragu, atau kehilangan pandangan terhadap hewan peliharaan.

Gunakan daftar centang lulus/gagal singkat untuk setiap tata letak yang didukung:

• Hewan peliharaan tetap terlihat selama tindakan utama berlangsung, termasuk wajah atau detail penting lainnya.

• Tindakan utama mudah dijangkau, memiliki status penekanan yang jelas, dan tidak tumpang tindih dengan target lain.

• Label dan petunjuk status penting tetap terbaca di tengah latar belakang pemandangan yang berubah-ubah.

• Tidak ada kontrol penting yang berada di bawah lekukan layar (cutout), bilah sistem, atau area gestur.

• Membuka kontrol sekunder tidak menutupi bagian karakter atau area bermain yang dibutuhkan untuk langkah berikutnya.

Jika ada poin yang gagal, ubah satu hal dalam satu waktu: hapus elemen berprioritas rendah, geser kontrol ke arah tepi area bermain dengan tetap mematuhi batas aman (safe insets), atau tampilkan tindakan sekunder hanya saat diperlukan. Uji kembali interaksi yang sama. Hal ini mempermudah untuk melihat apakah perubahan tersebut benar-benar memecahkan masalah visibilitas atau hanya memindahkannya ke tempat lain.

• Apple Developer, Game controls

• Apple Developer, Layout

• Android Developers, Make apps more accessible

• Android Developers, Edge-to-edge design

• Android Developers, Make your Unity game great on all form factors

• W3C Web Accessibility Initiative, Understanding Success Criterion 1.4.3: Contrast (Minimum)