Cara Menampilkan Koleksi Hewan Peliharaan Virtual Kecil yang Terus Bertambah

Hewan peliharaan kecil pada dasarnya adalah item visual, sehingga kisi-kisi atau petak reguler merupakan titik awal yang baik. Gunakan sel berukuran sama dan pertahankan urutan baca yang stabil dari kiri ke kanan, lalu atas ke bawah. Ini membuat setiap hewan peliharaan baru menempati tempat yang dapat diprediksi dan membantu kolektor yang kembali untuk memindai galeri dengan mudah. Apple menyarankan tata letak baris atau petak yang familier untuk koleksi visual, sementara Material Design menjelaskan ubin petak yang ringan cocok untuk galeri gambar. (Apple Human Interface Guidelines: Collections; Material Design: Cards)

Beri setiap sel ruang yang cukup untuk gambar hewan peliharaan dan namanya. Jika nama, jenis, atau status singkat harus muncul di samping setiap hewan peliharaan, gunakan ubin sederhana dengan hierarki yang jelas alih-alih menambahkan kartu lengkap dengan batas, tombol, dan detail dekoratif. Panduan Material membedakan galeri gambar dari kartu, yang lebih berguna ketika item memiliki konten atau tindakan yang bervariasi. Untuk kumpulan hewan peliharaan yang sebagian besar seragam, ornamen kartu ekstra justru mengalihkan perhatian dari koleksi itu sendiri.

Tata letak petak tidak dapat menampilkan setiap hewan peliharaan sekaligus setelah koleksi bertambah melebihi area layar yang tersedia. Pilih tujuan utama: melihat jumlah sebanyak mungkin dalam sekilas pandang, menemukan hewan peliharaan tertentu dengan cepat berdasarkan nama, atau menikmati tampilan sorotan khusus. Tujuan-tujuan ini menghasilkan tata letak yang berbeda.

Tujuan utama	Pilihan tampilan yang berguna	Konsekuensi (trade-off)
Memindai banyak hewan peliharaan	Petak rapat dan merata	Masing-masing hewan peliharaan mendapat ruang lebih kecil
Menemukan hewan peliharaan yang diketahui	Petak ditambah pencarian atau pengurutan menurut abjad	Kontrol memakai sebagian ruang layar
Menampilkan beberapa favorit	Baris sorotan atau area tampilan lebih besar di atas petak	Sebagian besar koleksi lengkap berada di posisi lebih bawah
Membandingkan detail hewan peliharaan	Tampilan daftar atau detail	Lebih sedikit hewan peliharaan yang muat dalam tampilan awal

Perlakukan area sorotan sebagai jendela kecil ke koleksi Anda, bukan pengganti koleksi tersebut. Misalnya, tampilkan beberapa favorit di bagian atas, lalu pertahankan petak lengkap di bawahnya. Contoh galeri hewan peliharaan adaptif dari Android menggunakan area hewan peliharaan yang menonjol dan petak yang dapat menampilkan lebih banyak hewan peliharaan saat tata letak memiliki lebih banyak ruang. Hal tersebut mendukung pilihan desain umum yang memberikan prioritas visual pada area sorotan sembari tetap mempertahankan galeri yang dapat dijelajahi di bawahnya. (Android Developers: Furry friends and adaptive APIs)

Ketika tampilan petak menjadi sangat panjang, bagilah menggunakan kategori yang sesuai dengan cara berpikir kolektor tentang hewan peliharaan tersebut. Pilihan yang memungkinkan antara lain spesies atau dunia, set koleksi, rumpun warna, atau periode perolehan—gunakan hanya kategori yang benar-benar ada dalam koleksi. Mulailah dengan sejumlah kecil kelompok. Terlalu banyak bagian kecil dapat membuat penjelajahan terasa seperti berpindah antar-koleksi yang terpisah.

Pertahankan satu tampilan bawaan yang jelas, seperti “Semua hewan peliharaan”, dan buat kelompok yang aktif terlihat jelas. Jika hewan peliharaan dapat termasuk dalam lebih dari satu kelompok, filter biasanya lebih jelas daripada menduplikasi hewan peliharaan yang sama di beberapa bagian. Jika setiap hewan peliharaan termasuk dalam satu kelompok stabil saja, bagian berlabel dapat membuat seluruh koleksi lebih mudah dipindai. Ini adalah penerapan praktis dalam menata konten berdasarkan strukturnya; pengelompokan terbaik bergantung pada atribut nyata dari koleksi tersebut, bukan skema kategori universal.

Gambar hewan peliharaan mungkin dapat dikenali oleh pemiliknya, tetapi nama sangat membantu ketika daftar koleksi kian membesar dan untuk membedakan varian yang tampak serupa. Tempatkan nama pendek tepat di bawah setiap gambar mini. Jika dua hewan peliharaan memiliki nama yang sama, tambahkan satu pengidentifikasi sekunder yang ringkas, seperti set atau wujudnya. Hindari menempatkan banyak statistik, lencana, dan kontrol di setiap ubin: detail-detail tersebut bersaing dengan gambar dan membuat tampilan petak menjadi terlalu padat.

Jika tampilan merupakan bagian dari situs web atau aplikasi, pastikan identitas hewan peliharaan tersedia dalam bentuk teks serta gambar. Panduan W3C menyatakan bahwa gambar informatif membutuhkan teks alternatif yang menyampaikan informasi yang relevan; ketika label yang berdekatan sudah memberikan informasi yang sama, mengulanginya dalam teks alternatif gambar mungkin tidak diperlukan. Dalam praktiknya, pasangkan nama yang terlihat dengan label aksesibilitas yang sesuai, dan hindari membuat hewan peliharaan yang unik hanya dapat diidentifikasi melalui warna atau gambar saja. (W3C WAI: Images Tutorial)

Manfaatkan lebar layar yang tersedia untuk mengubah jumlah kolom alih-alih memaksakan jumlah yang tetap di setiap layar. Ponsel yang ringkas mungkin menampilkan dua kolom; layar yang lebih lebar dapat menampilkan lebih banyak, asalkan setiap gambar dan nama tetap terbaca jelas. Pertahankan penspasian yang konsisten dan jaga urutan dasar yang sama saat tata letak menyesuaikan diri. Contoh desain adaptif Android menjelaskan galeri dua kolom pada layar ringkas dan menampilkan lebih banyak konten ketika tersedia lebih banyak ruang. (Android Developers: Furry friends and adaptive APIs)

Periksa tampilan pada ukuran paling sempit yang mungkin digunakan orang dan pada ukuran desktop yang lebar. Perhatikan nama yang terpotong, gambar yang kehilangan detail pengenalnya, tinggi ubin yang tidak rata, atau kontrol yang terbungkus (wrap) secara canggung. Jika satu hewan peliharaan memerlukan nama yang lebih panjang, sediakan baris kedua secara terencana atau potong (truncate) teks secara konsisten dengan cara untuk melihat nama lengkapnya; jangan biarkan satu entri yang tidak biasa merusak proporsi seluruh petak secara diam-diam.

Untuk koleksi yang masih sedikit, menggulir satu petak saja mungkin sudah cukup. Tambahkan pencarian saat pengguna perlu menemukan hewan peliharaan tertentu dari daftar yang lebih panjang. Tambahkan pengurutan ketika urutan menjadi penting—misalnya, menurut abjad atau berdasarkan kapan hewan peliharaan ditambahkan. Tambahkan filter hanya untuk atribut yang membantu membedakan item. Letakkan kontrol-kontrol ini di atas hasil dan tunjukkan pengurutan atau filter yang dipilih agar tampilan saat ini mudah dipahami. Panduan koleksi Material menempatkan penyaringan dan pengurutan di luar kartu itu sendiri, sehingga item tetap fokus pada kontennya. (Material Design: Cards)

Hindari mengandalkan gulir tanpa henti (infinite scroll) tanpa indikasi progres yang jelas. Jumlah koleksi yang terlihat, judul bagian, atau tombol “tampilkan lebih banyak” yang jelas dapat membantu menjelaskan seberapa banyak item yang tersisa. Ini adalah sinyal opsional dan bukan keharusan; pilih cara yang paling ringan yang dapat membantu seseorang mengorientasikan diri tanpa menambah kekacauan visual.

Tambahkan beberapa hewan peliharaan representatif, termasuk yang mirip satu sama lain dan yang memiliki nama terpanjang, lalu tinjau koleksi pada lebar ponsel dan desktop. Tanyakan: dapatkah seseorang mengenali setiap hewan peliharaan, membaca namanya, memahami kelompok atau pengurutan saat ini, dan menjangkau koleksi lengkap tanpa perlu menebak-nebak? Bisakah mereka menemukan hewan peliharaan yang dikenal tanpa memindai setiap item? Apakah gambar tetap menjadi fokus utama?

Jika pengenalan dirasa sulit, perbesar ubin atau kurangi detail yang terlihat. Jika menemukan item dirasa sulit, tambahkan pencarian nama atau pengurutan yang masuk akal. Jika layar pertama terasa padat, sediakan area sorotan kecil dan pertahankan koleksi lengkap di bawahnya. Buat satu perubahan pada satu waktu dan ulangi pemeriksaan ini seiring bertambahnya koleksi; tampilan yang tepat adalah tampilan yang tetap mendukung tugas nyata pembaca pada ukuran dan kerapatan yang mereka gunakan.

• Apple Developer, “Collections” — https://developer.apple.com/design/human-interface-guidelines/collections
• Material Design, “Cards” — https://m1.material.io/components/cards.html
• Android Developers, “Furry friends and adaptive APIs” — https://developer.android.com/design/ui/gallery/social/pawparazzi
• W3C Web Accessibility Initiative, “Images Tutorial” — https://www.w3.org/WAI/tutorials/images/