Card Ada di Mana-mana. Sebagian Besar Tidak Seharusnya Ada.
Buka template Figma manapun, tema Webflow manapun, atau page builder WordPress manapun. Card. Card untuk layanan, card untuk testimoni, card untuk artikel, card untuk FAQ, card untuk link navigasi, card untuk footer. Semuanya berbingkai, semuanya terangkat, semuanya setara.
Kata terakhir itulah masalahnya. Ketika setiap konten di halaman berada dalam card, setiap konten memiliki bobot visual yang sama. Bobot yang sama berarti tidak ada hierarki. Tidak ada hierarki berarti mata pengguna tidak tahu ke mana harus pergi, tidak ada yang perlu diprioritaskan, tidak ada jalur melalui halaman.
Ini adalah pola yang paling sering terlihat di website agensi Indonesia. Ambil website layanan digital khas — bagian “Layanan Kami” yang membungkus setiap penawaran ke dalam card yang seragam, meskipun satu layanan adalah “desain logo” (pekerjaan satu hari) dan yang lain adalah “pengembangan sistem ERP kustom” (proyek enam bulan). Keduanya muncul dalam card 300×200 pixel yang identik. Cakupannya berbeda secara ekstrem; presentasinya menyatakannya setara.
Card adalah alat. Ini tentang memahami kapan alat itu benar dan kapan alat lain bekerja lebih baik.
Apa Sebenarnya Card Itu
Card adalah container berbatas yang mengelompokkan informasi terkait tentang satu subjek tunggal. Kata operatifnya adalah satu subjek.
Card anggota tim: foto, nama, jabatan, dua kalimat bio, link LinkedIn. Semua yang ada dalam card itu tentang satu orang. Batasnya bermakna — ini menyatakan “ini adalah informasi satu orang.”
Card layanan yang mencoba memuat: nama layanan, deskripsi 3 kalimat, tier harga, daftar fitur, pertanyaan FAQ, dan tombol CTA — itu bukan card. Itu adalah bagian landing page yang seseorang putuskan untuk diberi border. Batasnya tidak bermakna; itu dekoratif.
Kesalahan card yang paling umum: mengacaukan “konten yang dikelompokkan” dengan “konten apapun yang diletakkan bersama.” Mengelompokkan konten dalam card menyiratkan konten tersebut adalah satu unit kohesif yang berdiri sendiri. Jika konten memerlukan bagian lain untuk dipahami, atau jika terlalu dalam untuk dipindai dengan cepat, itu bukan konten card.
Kapan Card Adalah Pola yang Tepat
Item Paralel yang Bisa Dibandingkan
Ini adalah kasus penggunaan kanonik untuk card, dan salah satu yang terbaik. Lihatlah grid produk Tokopedia — gambar produk, nama produk, harga, rating, tombol beli. Setiap card membawa struktur informasi yang sama. Pengguna bisa memindai secara horizontal dan membandingkan — harga vs. harga, nama vs. nama, rating vs. rating.
Persyaratan utama: item harus benar-benar paralel. Jenis informasi yang sama pada tingkat kedalaman yang sama. Ketika card paralel, mereka memfasilitasi perbandingan. Ketika tidak paralel, mereka menciptakan inkonsistensi visual yang merusak perbandingan.
Contoh lain yang berhasil: anggota tim (semua memiliki foto, nama, jabatan, bio singkat), pratinjau artikel (semua memiliki gambar judul, judul, kutipan, tanggal), portofolio (semua memiliki gambar proyek, nama, kategori, deskripsi singkat).
Konten Campuran dalam Feed Terstruktur
Feed media sosial menggunakan card secara efektif karena setiap postingan memiliki konten berbeda tetapi container struktural yang sama. Card memberikan konsistensi visual terhadap konten yang bervariasi — Anda selalu tahu di mana penulis, teks, dan aksi berada, bahkan ketika kontennya sendiri berubah.
Ini berhasil karena tugas card adalah mengatakan “ini adalah satu postingan” — dan setiap postingan memang satu unit diskrit.
Konteks Browsing yang Bisa Dipindai
Pengguna yang menjelajahi katalog produk, arsip artikel, atau galeri portofolio sedang browsing, bukan membaca. Mereka membuat keputusan biner yang cepat — “relevan atau tidak relevan?” — sebelum berkomitmen untuk melihat lebih dalam. Card mendukung perilaku browse-and-select non-linear ini karena setiap card memberikan cukup informasi untuk membuat penilaian cepat tanpa memerlukan bacaan penuh.
Jika pengguna diharapkan membaca konten secara linear (panduan cara, studi kasus), card adalah pola yang salah untuk konten utama.
Card Metrik Dashboard
Card metrik — satu angka besar + label + indikator tren arah — dibuat khusus untuk dashboard, dan bekerja sangat baik. Kontennya benar-benar dibatasi (satu metrik), dapat dibandingkan (setiap card adalah satu metrik), dan dapat dipindai.
Kapan Card Gagal
Konten Berurutan yang Memerlukan Pembacaan Linear
Panduan cara yang dibagi menjadi lima card. Masalahnya: card menyiratkan paralelisme dan dapat dibandingkan. Mereka menyarankan Anda bisa membacanya dalam urutan apapun dan kontennya bermakna secara mandiri. Proses langkah-demi-langkah adalah kebalikan dari itu.
Memaksa ini ke dalam card menghilangkan benang naratif. Pengguna tidak tahu card mana yang harus dibaca lebih dulu. Struktur visual melawan logika konten. Daftar bernomor atau artikel satu aliran melayani konten ini jauh lebih baik.
Konten dengan Kedalaman yang Sangat Berbeda
Satu card dengan 20 kata. Berikutnya dengan 200 kata. Satu card tanpa gambar. Berikutnya dengan foto penuh.
Dalam grid card, baik semua card mengembang ke tinggi card tertinggi (menciptakan ruang putih yang luas di card yang lebih pendek), atau konten dipotong (kehilangan makna). Kedua hasil ini lebih buruk daripada tidak menggunakan card. Jika unit konten Anda memiliki kedalaman yang sangat berbeda, mereka tidak paralel — dan card memerlukan paralelisme untuk berfungsi.
Ini persis masalah yang sering terlihat di website agensi digital Indonesia: satu “layanan” adalah pembuatan logo (satu halaman deskripsi) dan yang lain adalah pengembangan aplikasi mobile (membutuhkan briefing teknis, timeline, scope). Keduanya dalam card yang persis sama tidak membantu pengguna — justru menyembunyikan perbedaan yang paling penting.
Konten yang Tidak Bisa Dibandingkan
Jika pengguna tidak perlu membandingkan item, card menambahkan struktur visual tanpa menambah nilai navigasi.
Halaman yang mencantumkan lima nilai perusahaan tidak membutuhkan card. Nilai-nilai itu tidak dibandingkan — mereka dikomunikasikan. Judul + paragraf untuk setiap nilai, dalam aliran satu kolom, mengkomunikasikan sama baiknya dengan lebih sedikit noise visual.
Halaman FAQ bukan konten card. Item FAQ bukan unit yang dapat dibandingkan secara paralel — mereka adalah jawaban atas pertanyaan berbeda pada kedalaman berbeda. Accordion melayani pengguna lebih baik: menampilkan semua pertanyaan sekaligus (kemampuan pindai), hanya memperluas jawaban yang relevan (fokus), dan tidak menambah clutter visual.
Sindrom “Card Segalanya”
Ketika seluruh halaman adalah card — hero card, navigation card, content card, testimonial card, footer card — hierarki menghilang. Halaman terbaca sebagai grid seragam dari kotak-kotak, dan pengguna tidak memiliki sinyal tentang apa yang paling penting, apa yang harus dilakukan pertama, atau di mana mereka dalam struktur halaman.
Card dimaksudkan untuk menonjol dari halaman. Ketika semuanya adalah card, tidak ada yang menonjol.
Anatomi Card — Apa yang Disertakan dan Mengapa
Setiap elemen yang ditambahkan ke card meningkatkan cognitive load. Sertakan hanya yang melayani tugas pengguna dalam konteks spesifik tersebut.
| Elemen | Sertakan ketika | Kecualikan ketika |
|---|---|---|
| Gambar | Pengenalan visual penting (produk, orang, artikel) | Konten abstrak atau teks-pertama (pengaturan, notifikasi) |
| Label / tag | Card mencakup beberapa kategori; pengguna perlu orientasi | Daftar satu kategori; tag tidak menambah nilai filter |
| Judul | Selalu — ini adalah pengidentifikasi subjek utama | Tidak pernah |
| Teks body | Pratinjau berguna (kutipan artikel, deskripsi produk) | Konten sepenuhnya disampaikan oleh judul saja |
| Aksi / CTA | Card mewakili aksi spesifik yang tersedia | Card murni informasional tanpa aksi yang tersedia |
| Metadata (tanggal, penulis, harga) | Metadata adalah bagian dari perbandingan | Metadata adalah noise dalam konteks ini |
Teks body dalam card: maksimum 2–3 baris. Selalu potong dengan ellipsis jika lebih panjang. Jangan pernah tampilkan teks body penuh dalam card — jika pengguna membutuhkan teks penuh, card harus menautkan ke konten lengkap, bukan memuatnya.
Sinyal Kedalaman — Shadow, Border, Background
Treatment kedalaman visual card memberi tahu pengguna cara menginterpretasikannya. Ini bukan pilihan estetika — mereka adalah sinyal fungsional.
Drop shadow memberi sinyal bahwa card terangkat di atas permukaan halaman. Ini terbaca sebagai interaktif dan “bisa diangkat.” Hover state yang meningkatkan shadow memperkuat ini — card bisa “diambil” (diklik).
- Shadow kecil
(0 2px 8px rgba(0,0,0,0.08)): halus, refined. Sebagian besar konteks profesional. - Shadow medium
(0 4px 16px rgba(0,0,0,0.12)): terangkat secara nyata. Lingkungan high-contrast. - Shadow besar: menonjol, berfokus pemasaran. Landing page, bagian hero.
Border memberi sinyal batas tanpa menyiratkan elevasi. Gunakan ketika background tidak memberikan kontras yang cukup untuk memisahkan card secara visual. 1px solid rgba(0,0,0,0.08) biasanya cukup — terlihat tapi tidak mencolok.
Perubahan background adalah pemisahan yang paling halus. Card putih di atas background halaman #F5F5F5 adalah pendekatan klasik yang bersih. Memerlukan kontras yang cukup — putih di atas putih tidak terlihat.
Aturannya: pilih satu metode dan terapkan secara konsisten. Setiap card di halaman harus menggunakan treatment kedalaman yang sama. Mencampur shadow pada beberapa card, border pada card lain, dan background polos pada kelompok ketiga dalam bagian yang sama terbaca sebagai desain yang tidak terselesaikan.
Border-Radius — Membawa Lebih Banyak Makna dari yang Anda Kira
Border-radius adalah sinyal kepribadian. Ini memberi tahu pengguna sesuatu tentang karakter brand sebelum mereka membaca sepatah kata pun.
| Radius | Karakter visual | Konteks yang sesuai |
|---|---|---|
| 0px | Tajam, tepat, formal | Keuangan, hukum, alat data, enterprise |
| 4–8px | Pembulatan halus, modern profesional | Kebanyakan B2B, layanan profesional, SaaS |
| 12–16px | Membulat secara nyata, ramah dan mudah didekati | Produk konsumen, kesehatan, pendidikan |
| 20–24px | Ramah, kasual, playful | Lifestyle, wellness, aplikasi konsumen |
| 9999px (pill) | Sangat kasual / badge-like | Tag, badge status — bukan card konten |
Aturan konsistensi berlaku secara mutlak di sini. Semua card konten di halaman yang sama harus menggunakan nilai border-radius yang sama. Mencampur card 4px dengan card 16px di halaman yang sama menciptakan inkonsistensi visual yang memberi sinyal halaman tidak dirancang — melainkan dirakit.
Perilaku Card di Mobile
Satu kolom lebar penuh adalah default dan hampir selalu benar untuk mobile di bawah 480px lebar viewport. Memaksa perhatian pengguna pada satu card sekaligus. Kenyamanan membaca dimaksimalkan ketika card memenuhi lebar yang tersedia.
Carousel scroll horizontal bekerja untuk 4+ item serupa di mana browsing horizontal disengaja (filter kategori, baris produk unggulan). Selalu tunjukkan kemampuan scroll dengan sedikit mengintip card berikutnya di tepi kanan — jangan sembunyikan keberadaan card lainnya.
Kesalahan umum: grid 2 kolom di bawah 480px. Pada viewport 375px, layout dua kolom memberikan masing-masing card sekitar 175px lebar setelah gutter. Itu terlalu sempit untuk judul card, teks body, dan gambar untuk hidup berdampingan dengan nyaman. Teks akan membungkus dengan canggung atau terpotong terlalu awal. Gunakan satu kolom di bawah 480px tanpa pengecualian.
Tabel Keputusan Pola Card
| Tipe konten | Gunakan card? | Alternatif yang lebih baik |
|---|---|---|
| Listing produk (item yang bisa dibandingkan) | Ya | — |
| Pratinjau artikel / blog | Ya | — |
| Langkah how-to yang berurutan | Tidak | Daftar bernomor, accordion |
| Metrik dashboard | Ya (metric cards) | — |
| Deskripsi layanan | Tergantung kedalaman | Judul bagian + paragraf jika konten bervariasi |
| Anggota tim (foto + bio) | Ya | — |
| Item FAQ | Tidak | Accordion |
| Link navigasi | Tidak | Daftar navigasi atau menu |
| Nilai perusahaan | Tidak | Aliran judul + paragraf |
| Testimoni / kutipan | Ya (dengan batasan) | Scroll horizontal atau kutipan unggulan tunggal |
| Tier harga | Ya (perbandingan fitur) | — |
Satu Tes yang Berguna
Sebelum berkomitmen pada card untuk bagian konten, tanyakan: “Apakah pengguna perlu membandingkan item-item ini, atau mereka perlu memahami masing-masing item secara individual?”
Jika jawabannya membandingkan — card. Jika jawabannya memahami — kemungkinan bukan card.
Halaman produk yang mencantumkan pilihan pada harga berbeda: pengguna membandingkan. Card.
Halaman yang menjelaskan proses desain perusahaan Anda dalam lima fase: pengguna memahami setiap fase secara berurutan. Bukan card.
Pertanyaan ini membutuhkan 10 detik dan menghemat berjam-jam berjuang dengan tinggi card yang tidak selaras dan konten yang terpotong.
Referensi
- Nielsen Norman Group. “Cards: UI-Component Definition.” https://www.nngroup.com/articles/cards-component/
- Material Design 3. “Cards.” https://m3.material.io/components/cards/overview
- Shopify Polaris. “Card component.” https://polaris-react.shopify.com/components/layout-and-structure/card
- Prokhorova, A. (2020). “8 best practices for UI card design.” UX Collective.
- Justinmind. “Card UI design: fundamentals and examples.” https://www.justinmind.com/ui-design/cards
Desain Card — Pertanyaan Umum
Apakah saya harus menggunakan card untuk halaman layanan?
Tergantung seperti apa layanan Anda. Jika setiap layanan hanya 2–3 kalimat dan setara dalam cakupannya, card bisa bekerja. Jika setiap layanan memiliki kedalaman yang berbeda — satu butuh paragraf, satu butuh proses bernomor, satu butuh tier harga — card akan memaksa pemotongan konten yang canggung atau tinggi card yang tidak konsisten. Dalam kasus itu, judul bagian dengan paragraf atau accordion lebih baik.
Berapa kolom card yang optimal di desktop?
Tiga kolom paling umum dan umumnya paling efektif untuk konten yang sebanding (produk, layanan, anggota tim). Dua kolom bekerja baik untuk card yang kontennya lebih banyak (artikel, studi kasus) di mana kenyamanan membaca penting. Empat kolom bisa untuk card minimal (metrik, link kategori). Lima kolom atau lebih di lebar desktop standar (1280–1440px) membuat masing-masing card terlalu sempit untuk dibaca nyaman.
Apakah card merusak SEO?
Card sendiri netral untuk SEO — yang penting adalah markup di dalamnya. Pastikan judul card menggunakan tag heading yang sesuai (h2 atau h3, bukan hanya teks tebal). Pastikan link card adalah tag anchor dengan teks deskriptif. Gambar card yang lazy-loaded membutuhkan atribut width/height eksplisit untuk menghindari layout shift yang merusak skor Core Web Vitals.
Kapan harus menggunakan card vs. list item?
Card ketika konten memiliki bobot visual yang membenarkan container — gambar, beberapa data, tombol aksi. List item ketika konten terutama teks dan hubungan antar item lebih penting dari setiap item secara individual. Anggota tim dengan foto, jabatan, dan bio: card. Daftar alamat kantor: list. Memaksa alamat ke dalam card menambah 'chrome' tanpa menambah kejelasan.