UI Design Tips: Beberapa alternatif saat mendesain sebuah daftar/list konten di Mobile App
Saat membuat design app atau website pasti kita sering menjumpai sebuah list. Contohnya sebuah newsfeed, list contact, list pesan dan list lainnya. Berikut adalah beberapa alternatif yang bisa kalian gunakan saat mendesain list.
Ini adalah cara paling simple untuk membuat sebuah list. Tapi cara ini bisa efektif kalau konten setiap baris nya hanya sedikit (design kiri).
Cara ini sangat efektif digunakan jika data per baris nya sangat banyak. Mempermudah user untuk melihat batas akhir per barisnya, sehingga membuat user nyaman untuk membaca konten per barisnya.
Menggunakan card untuk membuat list atau feed informasi merupakan hal yang bagus dari segi kejelasan(clarity) hirarki. Layout bentuk card ini akan cocok untuk memancing user agar men-tap setiap barisnya. Karena bentuk card cenderung clickable.
1. Menggunakan Garis
Ini adalah cara paling simple untuk membuat sebuah list. Tapi cara ini bisa efektif kalau konten setiap baris nya hanya sedikit (design kiri).
Cara ini menjadi kurang efektif jika setiap baris nya memiliki konten yang banyak (design kanan), Karena menjadi sulit untuk dibaca. dan user menjadi sulit untuk mengidentifikasi mana konten milik baris atas atau baris dibawahnya.
2. Menggunakan pemisah berupa garis tebal
Cara ini sangat efektif digunakan jika data per baris nya sangat banyak. Mempermudah user untuk melihat batas akhir per barisnya, sehingga membuat user nyaman untuk membaca konten per barisnya.
Hal ini bisa kita lihat juga di news feed facebook. dimana setiap barisnya memuat informasi yang sangat banyak
Dengan menggunakan garis tebal, maka user facebook bisa membaca informasi di halaman feed dengan nyaman.
3. Menggunakan Spacing
Menggunakan spacing atau white space sebagai pemisah antar baris bisa membuat sebuah design terlihat clean.
Tapi yang perlu diingat adalah:
hal ini bisa dilakukan jika konten setiap baris nya berdekatan/berkelompok. dan juga setiap barisnya memiliki pola yang sama.
Pada gambar diatas polanya sama yaitu dibawah gambar thumbnail adalah gambar thumbnail dan dibawah konten tulisan adalah tulisan juga.
Karena jika konten nya tidak berdekatan, dan polanya tidak sama, akan terlihat berantakan, seperti dibawah ini
Kunci dari design list informasi yang menggunakan spacing sebagai pemisah adalah membuat konten setiap barisnya terlihat berkelompok.
4. Menggunakan card
Menggunakan card untuk membuat list atau feed informasi merupakan hal yang bagus dari segi kejelasan(clarity) hirarki. Layout bentuk card ini akan cocok untuk memancing user agar men-tap setiap barisnya. Karena bentuk card cenderung clickable.
Prinsip dasar mendesain sesuatu adalah clarity, percuma jika design terlihat bagus tapi sulit untuk dibaca atau membuat user bingung tentang sususan hirarkinya.Ketika mendesain, selalu posisikan diri Anda sebagai user. Kira-kira design seperti ini enak belum ya?
Semoga bermanfaat :)
Komentar
Posting Komentar