Kepadatan Informasi dalam SaaS B2B: Merancang Dasbor untuk Pengguna Listrik dan Pemula
Cara merancang dasbor dan tabel B2B padat yang dapat dipindai oleh para ahli dengan cepat tanpa membebani pengguna baru: mode kepadatan, hierarki, pengungkapan progresif.
Pengambilan Inti
Antarmuka yang padat bukanlah masalahnya; yang tidak terorganisir adalah. Para ahli menginginkan lebih banyak informasi per layar, jadi berikan mereka hierarki yang kuat, penyelarasan yang konsisten, dan bagan yang menggunakan posisi dan panjang. Lindungi pemula dengan default yang masuk akal dan pengungkapan progresif, dan biarkan orang memilih tingkat kepadatan, seperti yang dilakukan sistem desain seperti Carbon untuk tabel.
Kepadatan adalah fitur bagi para ahli
Orang yang menggunakan alat B2B sepanjang hari, seperti analis, agen dukungan, dan operator, sering kali lebih memilih untuk melihat lebih banyak sekaligus, karena menggulir dan berpindah tab membutuhkan waktu. Membuat semuanya menjadi luas demi tangkapan layar yang bersih dapat membuat pekerjaannya lebih lambat. Tujuannya adalah informasi yang padat namun mudah dipindai.
Biarkan orang memilih kepadatan
Sistem desain sekarang membangun kepadatan menjadi komponen-komponen. Tabel data Karbon IBM, misalnya, menawarkan tinggi lima baris, dari ekstra kecil (24 piksel) untuk tata letak yang sangat padat hingga ekstra besar (64 piksel) untuk memudahkan pemindaian, dengan medium (40 piksel) sebagai default.
- Tawarkan dua atau tiga pengaturan kepadatan, diingat per pengguna.
- Ubah spasi dan tinggi baris, bukan ukuran font atau kontras.
- Jaga agar target sentuh cukup besar pada perangkat sentuh, apa pun kepadatannya.
Hierarki membuat kepadatan dapat dibaca
Nielsen Norman Group mendefinisikan dasbor sebagai visualisasi yang memberikan informasi sekilas yang dapat ditindaklanjuti dengan cepat, dan merekomendasikan pengkodean kuantitas dengan panjang dan posisi 2D, yang paling cepat dibaca orang. Dalam praktiknya: letakkan beberapa angka yang mendorong keputusan di atas, sejajarkan semuanya ke dalam kotak, gunakan warna hanya untuk maknanya (status, peringatan), dan ratakan angka-angka tersebut agar dapat dibandingkan.
Lindungi pemula tanpa memperlambat para ahli
Pengungkapan yang progresif membuat pilihan-pilihan lanjutan tetap tersedia namun tidak menghalangi. Mulai pengguna baru dengan tampilan default terfokus, biarkan mereka menambahkan kolom, filter, dan widget sesuai kebutuhan, dan simpan tampilan sehingga para ahli dapat kembali ke pengaturan padat mereka secara instan.
Gerakan dalam antarmuka padat
Pada layar dengan banyak data, gerakan harus menjelaskan perubahan, bukan penghias: menyorot nilai yang baru saja diperbarui, menganimasikan baris ke posisi pengurutan baru, atau menampilkan transisi bagan sehingga orang dapat mengikuti apa yang dipindahkan. Jaga agar tetap singkat, dan hindari animasi berkelanjutan yang bersaing dengan data.
Kunci Principles untuk Diingat
- Para ahli mendapat manfaat dari layar yang padat; disorganisasi adalah masalah sebenarnya
- Tawarkan pengaturan kepadatan dengan mengubah spasi, bukan ukuran ketik atau kontras
- Gunakan panjang dan posisi untuk angka; warna hanya untuk makna
- Pengungkapan progresif melindungi pemula
- Gunakan gerakan untuk menjelaskan perubahan data, bukan untuk menghiasi
Pertanyaan yang Sering Diajukan
Sumber
- Data table usage — Sistem Desain Karbon (IBM)
- Dashboards: Making Charts and Graphs Easier to Understand — Nielsen Norman Group
- Progressive Disclosure — Nielsen Norman Group