Kartu adalah wadah kotak yang menampung informasi. Baru-baru ini komponen UI yang sederhana ini menjadi bagian penting dari desain web dan seluler – setiap aplikasi atau situs web kedua yang tersedia di pasaran saat ini menggunakan kartu. Kartu menjadikan konten dan fitur lebih mudah ditemukan, dan terlihat bagus pada ukuran layar apa pun – dari layar TV besar hingga layar kecil perangkat seluler.
Pada artikel ini, kami akan mengulas konsep kartu dan membagikan beberapa tips praktis untuk para desainer.
Apa sebenarnya kartunya?
Kartu adalah komponen UI yang berisi konten dan tindakan tentang satu subjek. Kartu dapat berisi beberapa elemen berbeda, tetapi semuanya harus mengenai satu subjek. Biasanya, kartu berfungsi sebagai gambaran umum dan titik masuk untuk informasi lebih rinci.
Ketika datang ke desain visual, kartu dapat memiliki banyak tata letak yang berbeda dan sementara tidak ada aturan yang keras dan cepat, tata letak kartu khas fitur elemen-elemen berikut:
Perumpamaan. Gambar atau video yang berskala agar sesuai dengan area teratas wadah.
Judul
Ringkasan singkat. Sinopsis unit.
Tindakan (opsional). Tindakan yang terkait dengan unit.
Prinsip-prinsip desain kartu UI
Kartu yang dirancang dengan baik memudahkan pengguna untuk memindai informasi yang tersedia. Desain kartu yang baik adalah:
Efisien. Hindari kelebihan kartu dengan informasi atau tindakan yang tidak perlu. Setiap kartu hanya boleh berisi informasi dan tindakan penting.
Berarti. Setiap kartu harus berisi informasi yang membantu pengguna membuat keputusan.
Bersih. Tata letak kartu memengaruhi bagaimana hal itu dirasakan. Setiap kartu terdiri dari blok konten (elemen seperti teks dan gambar). Blok konten harus ditempatkan pada kartu dengan cara yang secara jelas menunjukkan hierarki.
Independen. Kartu harus berdiri sendiri, tanpa bergantung pada kartu lain untuk konteks. Kartu tidak dapat dibagi menjadi beberapa kartu.
Transformatif. Kartu dapat berubah untuk mengungkapkan konten tambahan.
Responsif. Kartu dapat diubah ukurannya agar sesuai dengan ruang yang tersedia.
Kapan menggunakan kartu
Kartu lebih cocok untuk menelusuri informasi daripada mencari. Saat Anda mendesain tata letak dengan kartu, ide kuncinya adalah memungkinkan pengguna untuk dengan cepat mencerna sebagian besar konten dan menyelami minat mereka.
Kartu bukan pilihan yang tepat ketika pengguna perlu membandingkan beberapa opsi (misalnya, ketika pengguna perlu membandingkan beberapa produk di halaman eCommerce). Karena kartu hanya menyediakan sejumlah konten, mereka membuat proses membandingkan lebih sulit bagi pengguna. Lebih baik menggunakan tampilan daftar atau kisi untuk itu.
Kiat untuk desain kartu
Gunakan citra yang relevan
Desain berbasis kartu sering sangat bergantung pada visual (gambar atau video) karena visual adalah hal pertama yang diperhatikan pengguna ketika mereka memindai kartu. Sangat penting untuk memilih gambar yang relevan – yang memungkinkan Anda untuk mengkomunikasikan makna unit dalam sekejap. Perhatikan bahwa grafik akan mengalami skala, jadi pastikan untuk melihat pratinjau mereka pada semua platform yang Anda desain.
Prioritaskan informasi tekstual
Apa pun yang perlu dibaca oleh pengguna harus dimasukkan sebagai teks. Kartu harus menyajikan ringkasan informasi tentang unit tertentu. Jangan gunakan kartu untuk menampilkan teks yang panjang. Alih-alih, berikan ikhtisar singkat dan pastikan bahwa mereka mendorong pengguna untuk menjelajahi lebih banyak. Berusaha keras untuk memiliki 50–60 karakter untuk ringkasan singkat (50–60 karakter adalah panjang garis yang disarankan sesuai dengan “Typographie,” E. Ruder).
Gunakan tipografi sederhana untuk konten
Secara umum, disarankan untuk menggunakan font sans-serif untuk teks dalam kartu karena teks tersebut terlihat sama bagusnya pada layar besar dan kecil.
Gunakan bayangan untuk menunjukkan wadah kartu
Elemen UI harus selalu mengomunikasikan artinya. Pengguna harus tahu cara berinteraksi dengan elemen UI tertentu hanya dengan melihatnya. Dan ketika datang ke desain kartu, efek bayangan membantu menunjukkan kartu – sedikit bayangan sebagai penanda bahwa seluruh kartu dapat diklik.
Jika Anda berencana untuk menunjukkan koleksi kartu, pertimbangkan untuk menggunakan properti visual yang sama untuk semua kartu dalam koleksi.
Dengan jelas menunjukkan elemen interaktif dalam kartu
Jika kartu UI berisi elemen interaktif, penting untuk menunjukkan elemen tersebut dengan jelas. Desain Bahan merekomendasikan penggunaan pembagi visual untuk memisahkan masing-masing wilayah dalam kartu. Pembagi dapat terlihat (seperti garis 1-pixel yang membagi bagian dalam contoh di bawah).
Atau mereka dapat dibuat menggunakan spasi putih (Gestalt law of proximity menyatakan bahwa barang-barang yang ditempatkan saling berdekatan dianggap dikelompokkan). Gunakan spasi putih di sekitar setiap blok untuk memudahkan pengguna memisahkan bagian yang berbeda.
Hindari menggunakan pengguliran di dalam kartu di ponsel
Konten kartu bisa lebih tinggi dari ruang layar maksimum yang tersedia. Dalam hal ini, konten kartu tidak boleh digulir. Jika tidak, Anda berisiko membuat perilaku pengguliran yang tidak dapat diprediksi (gulir di dalam gulir).
Gunakan transisi orang tua ke anak untuk mengungkapkan lebih banyak informasi
Seperti yang disebutkan di atas, kartu adalah komponen UI yang dapat ditransformasikan – kartu dapat bertransformasi untuk mengungkapkan konten tambahan. Kartu harus diperluas untuk mengisi layar dengan informasi tambahan. Ketika datang ke transisi animasi, disarankan untuk menghindari efek animasi mewah seperti membalik efek tersebut menuntut terlalu banyak perhatian dan dengan cepat menjadi menjengkelkan ketika pengguna melihat efek seperti itu secara teratur.
Lebih baik untuk mengandalkan efek halus seperti memperluas zoom-in.
Mendukung gerakan yang dikenal
Jika Anda berencana untuk menggunakan kartu dalam desain seluler, pertimbangkan untuk mendukung gerakan ketuk dan geser. Ketukan dapat digunakan untuk mengubah status kartu (mis., Perluas kartu untuk beralih dari status pratinjau ke status terperinci).
Gesek dapat digunakan untuk menavigasi antar kartu dalam koleksi.
Gesek juga dapat digunakan untuk mengeluarkan kartu (mis. Untuk kartu yang digunakan sebagai pemberitahuan).
sumber:uxplanet.org
