Makna Kepadatan UI (Density) dan Cara Mendesainnya

Kepadatan antarmuka sedang menurun

• Jika membandingkan situs web dan aplikasi saat ini dengan era 2000-an, sulit untuk mengabaikan kecenderungan bahwa software kini terasa lebih renggang.
• Apa itu kepadatan UI?
  • Kepadatan UI bukanlah sekadar tampilan antarmuka pada satu momen tertentu
  • Ini berkaitan dengan jumlah informasi yang disediakan antarmuka sepanjang berbagai momen
  • Ini menyangkut bagaimana keputusan desain menghubungkan momen-momen tersebut, dan bagaimana semuanya terhubung dengan nilai yang diberikan software

Kepadatan visual (Visual density)

• Saat memikirkan kepadatan, kita biasanya pertama-tama memikirkannya secara visual
• Kepadatan visual berarti seberapa banyak hal yang dapat dilihat dalam ruang tertentu
• Antarmuka software yang secara visual padat menampilkan banyak elemen di layar
• Antarmuka yang secara visual tidak padat menampilkan sedikit elemen di layar
• Contoh: Bloomberg Terminal
  • Bloomberg Terminal adalah contoh representatif dari kepadatan visual
  • Dalam satu layar, ditampilkan sparkline indeks pasar utama, distribusi volume perdagangan yang rinci, tabel dengan puluhan baris dan kolom, headline berita terbaru, shortcut keyboard, serta penanda UI untuk aksi cepat
• Contoh: Craigslist dan McMaster-Carr
  • Craigslist memiliki kepadatan visual tinggi dengan ratusan tautan sederhana serta antarmuka pencarian dan filter
  • Situs web McMaster-Carr juga berbagi elemen desain serupa, dengan daftar detail banyak variasi produk dalam ruang kecil
• Penilaian intuitif atas persepsi kepadatan
  • Pendapat tentang kepadatan situs-situs semacam ini terbentuk hanya dalam beberapa detik
  • Penilaian ini terjadi dengan cepat dan intuitif pada tingkat bawah sadar
  • Namun, penilaian cepat semacam ini bisa bias dan tidak selalu dapat diandalkan
• Contoh gambar kepadatan visual
  • Dua contoh persegi panjang:
    • Kiri: banyak titik tersusun secara acak
    • Kanan: jumlah titik yang sama tersusun rapi dalam baris dan kolom
    • Kebanyakan orang merasa gambar di kanan lebih padat
  • Contoh gambar lainnya:
    • Kiri: banyak titik tersusun rapi dalam baris dan kolom
    • Kanan: jumlah titik yang sama tersusun rapi tetapi terbagi menjadi dua kelompok
    • Meskipun jumlah titiknya sama, membaginya ke dalam kelompok mengubah persepsi kita tentang kepadatan
• Ketidakpastian dalam kepadatan visual
  • Dalam desain, kita tidak pernah bisa sepenuhnya objektif
  • Namun, agar dapat membicarakan kepadatan, kita perlu mengarah pada definisi yang konsisten, bermakna, dan berguna

Kepadatan informasi (Information density)

• Edward Tufte dalam 《The Visual Display of Quantitative Information》 membahas desain chart dan grafik

  Setiap tinta dalam grafik harus punya alasan, dan alasan itu harus berupa penyampaian informasi baru.

• Data-ink
  • Data-ink berarti bagian yang berguna dalam suatu visualisasi.
  • Elemen visual yang bukan data perlu dihilangkan.
  • Data-ink berbeda dari ruang yang ditempati chart. Ini berkaitan dengan kepadatan informasi.
• Menghitung kepadatan informasi
  • Kepadatan informasi dapat dihitung dengan membagi jumlah data-ink dalam chart dengan total tinta yang dibutuhkan untuk mencetak chart tersebut.
  • Definisi data-ink bisa subjektif, tetapi yang penting adalah membuat rasio itu sedekat mungkin ke 1.
  • Cara meningkatkan rasio:
    • Menambah data-ink: menyediakan data tambahan yang berguna.
    • Menghapus non-data ink: menghilangkan bagian grafis yang tidak menyampaikan data.
• Contoh
  • Contoh grafik dengan banyak tinta berlebih dan contoh perbaikannya yang menyampaikan banyak informasi dengan sedikit tinta.
  • Kepadatan informasi memiliki batas atas; terlalu banyak tinta bisa dihilangkan atau terlalu banyak informasi bisa ditambahkan.
  • Audiens juga penting: pengguna mahir mungkin lebih menyukai kepadatan tinggi, sementara anak sekolah dasar mungkin lebih cocok dengan kepadatan rendah.
• Hubungan antara kepadatan informasi dan kepadatan visual
  • Semakin tinggi kepadatan informasi, semakin besar kecenderungannya terlihat padat secara visual.
  • Contoh: visualisasi jadwal kereta karya E.J. Marey pada tahun 1885. Waktu kedatangan dan keberangkatan ditampilkan dalam ruang kecil yang padat.
  • Tufte menekankan kepadatan data dan memaksimalkan data secara masuk akal.
• Shrink Principle
  • Grafik dapat diperkecil secara signifikan.
  • Kepadatan informasi berguna untuk chart dan grafik.
  • Apakah ini juga bisa diterapkan pada antarmuka?
• Menerapkan kepadatan informasi pada antarmuka
  • Informasi bisa diterapkan ke layar.
  • Setiap bagian antarmuka harus menunjukkan informasi sebanyak mungkin.
  • Menganggap tinta sebagai piksel memang menggoda, tetapi antarmuka membutuhkan garis pemisah, elemen struktural, dan penanda untuk membantu memahami hubungan antar elemen.
  • Ada godaan untuk menghapus semua ruang kosong dengan mengikuti Shrink Principle.
  • Namun, sebagian ruang kosong memiliki makna yang sama pentingnya dengan elemen visual. Peran bayangan, gradien, dan penekanan warna juga perlu dipertimbangkan.
• Kepadatan informasi adalah konsep yang berguna, tetapi hanya sebagian dari gambaran besar.
  • Kita perlu mencari cara untuk memahami semua keputusan desain antarmuka secara lebih objektif dan kuantitatif.

Kepadatan desain (Design Density)

• Tantangan pertama dalam mendefinisikan kepadatan dari sudut pandang keputusan desain adalah menentukan apa yang termasuk keputusan.
• Memahami keputusan desain
  • Dalam UI, UX, dan product design, kita membuat banyak keputusan, secara sadar maupun tidak sadar, untuk menyampaikan informasi.
  • Kita perlu mempertanyakan mengapa pilihan tertentu menyampaikan makna, pilihan mana yang sekadar estetis, dan pilihan mana yang benar-benar penting.
• Prinsip Gestalt
  • Cara manusia memahami bentuk dan pola yang diteliti oleh psikolog Jerman abad ke-20.
  • Istilah Gestalt berarti "bentuk".
  • Dari penelitian ini ditemukan beberapa hukum dasar desain:
    • Proximity: hal-hal yang berdekatan dipersepsikan sebagai satu kelompok.
    • Similarity: objek yang mirip dalam bentuk, ukuran, warna, dan sebagainya terlihat saling terkait.
    • Closure: kita melengkapi celah dalam desain untuk mengenali bentuk yang utuh.
    • Symmetry: bentuk-bentuk simetris dikelompokkan berdasarkan titik pusatnya.
    • Common Fate: objek yang bergerak dengan cara yang sama dikelompokkan bersama.
    • Continuity: objek yang saling tumpang tindih dipersepsikan sebagai entitas terpisah.
    • Past Experience: kita mengenali bentuk dan pola yang familier bahkan dalam situasi yang tidak familier.
    • Figure-Ground Relationship: kita membedakan elemen foreground dan background dalam gambar 2D.
• Pengaruh prinsip Gestalt pada desain UI
  • Berkat prinsip similarity, teks dengan ukuran, font, dan warna yang sama menunjukkan tujuan yang sama.
  • Prinsip proximity menunjukkan bahwa ketika sebuah chart dekat dengan headline, headline itu menjelaskan chart tersebut.
  • Berkat past experience dan figure-ground, pengguna bisa langsung memahami cara kerja toggle switch.
• Konsep kepadatan desain
  • Alih-alih fokus pada piksel, kita memikirkan keputusan desain yang secara sengaja menyampaikan makna dengan menggunakan prinsip Gestalt.
  • Seperti rasio data-ink Tufte yang membandingkan tinta yang dibutuhkan chart dengan total tinta, kepadatan desain membandingkan keputusan desain yang diperlukan dengan total keputusan yang dibuat.
  • Meskipun subjektif, dalam antarmuka pengguna menghitung keputusan desain lebih berguna daripada menghitung jumlah data atau tinta.
• Batasan kepadatan desain
  • Antarmuka pengguna ada untuk pekerjaan, kesenangan, membuang waktu, membangun pemahaman, mendorong koneksi personal, dan lain-lain.
  • Kita harus memasukkan semua tindakan yang diambil pengguna sepanjang perjalanannya.
  • Kepadatan harus mempertimbangkan semua tindakan pengguna dalam ruang dan waktu, melampaui komponen, layout, dan layar.

Kepadatan temporal

• Jumlah pekerjaan yang dapat dilakukan pengguna dalam waktu tertentu menentukan kepadatan temporal.
• Waktu loading adalah faktor terbesar dalam kepadatan temporal. Semakin cepat antarmuka merespons dan memuat halaman atau layar baru, semakin padat UI tersebut.
• Bloomberg Terminal memiliki kepadatan temporal yang sangat tinggi karena memuat data hampir seketika.
• Cara meningkatkan kepadatan temporal
  • Kepadatan temporal dapat ditingkatkan dengan meminimalkan waktu loading sebanyak mungkin.
  • Namun, tidak semua waktu loading bisa dikurangi. Misalnya, kita tidak bisa mengubah kecepatan koneksi internet pengguna atau kecepatan CPU-nya.
  • Beberapa pekerjaan, seperti upload file, menunggu respons customer support, atau memproses pembayaran, melibatkan sistem yang kompleks dan variabel yang tidak dapat diprediksi.
• Cara mengubah persepsi waktu
  • Di bawah 100 milidetik: jika jeda antara dua aksi di bawah 100 milidetik, keduanya terasa seperti terjadi secara bersamaan. Dalam kasus ini, animasi justru bisa membuat aplikasi terasa lebih lambat.
  • Antara 100 milidetik dan 1 detik: hubungan antara dua aksi mulai terasa terputus. Animasi dan transisi bisa membantu menjembatani celah perseptual ini.
  • Antara 1 detik dan 10 detik: animasi saja tidak cukup. Dalam 10 detik, kemungkinan pengguna meninggalkan halaman meningkat. Dalam kasus ini, gunakan indikator loading tak tentu untuk menunjukkan bahwa sistem berjalan normal.
  • Antara 10 detik dan 1 menit: indikator loading tak tentu mulai terasa statis jika berlangsung lebih dari 10 detik. Dalam kasus ini, gunakan indikator loading yang jelas (misalnya progress bar) untuk menunjukkan sisa waktu secara terang.
  • Lebih dari 1 menit: pengguna harus bisa meninggalkan halaman atau melakukan pekerjaan lain. Tidak bisa melakukan apa pun selama lebih dari 1 menit dapat menimbulkan frustrasi. Proses panjang juga memiliki kemungkinan error yang lebih tinggi.
• Kepadatan waktu dan ruang
  • Kepadatan UI hanyalah sarana. Nilai UI tidak terletak pada tampilannya, melainkan pada hasil yang dapat dicapai.
  • Kepadatan berarti memberikan nilai semaksimal mungkin dengan waktu, ruang, piksel, dan tinta seminimal mungkin.

Kepadatan nilai (Density in Value)

• Kepadatan nilai berkaitan dengan nilai hasil yang diperoleh pengguna.
• Contoh: membagi form panjang menjadi potongan-potongan kecil dan menyusunnya sebagai antarmuka bergaya wizard adalah ide yang baik. Form yang hanya terisi sebagian tidak memiliki nilai.
• Menaruh semua pertanyaan dalam satu halaman mungkin terlihat padat secara visual, tetapi jika butuh waktu lama untuk diisi, banyak pengguna tidak akan mengirimkannya.
• Contoh form
  • Form yang dibagi menjadi beberapa bagian, dengan error dan cara mengatasinya ditampilkan secara jelas.
  • Mengurangi error dan membantu pengguna menyelesaikan form sampai akhir mungkin memerlukan lebih banyak ruang dan waktu dalam desain.
  • Namun, jika pengorbanan kepadatan visual dan temporal membuat hasilnya lebih bernilai, maka kepadatan nilai secara keseluruhan meningkat.
• Meningkatkan kepadatan nilai
  • Kita bisa meningkatkan kepadatan visual dan temporal dengan membuat form lebih kecil, lebih cepat dimuat, dan mengurangi error.
  • Jika itu tidak menurunkan nilai bagi pengguna atau bisnis, maka kepadatan keseluruhan meningkat.
  • Mengikuti pendekatan Tufte, kita harus berupaya memaksimalkan kepadatan nilai sebanyak mungkin.
• Masalah optimasi
  • Menyelesaikan masalah optimasi dapat menghasilkan hasil yang paradoksal.
  • Pada internet awal, perusahaan seperti Craigslist meningkatkan kepadatan nilai dengan mengagregasi informasi dan menampilkannya sebagai tautan halaman.
  • Yahoo dan Altavista memungkinkan informasi dicari, tetapi tetap menekankan agregasi.
  • Google mengambil pendekatan berbeda dengan memanfaatkan informasi yang diperoleh melalui rantai tautan internet ke dalam search box.
  • Informasi mengagregasi dirinya sendiri, dan yang dibutuhkan pengguna hanyalah satu input teks untuk mengakses seluruh web.
• Pendekatan Google dan Yahoo
  • Jika membandingkan layar awal Google (2001) dengan layar tahun 2024, kepadatan visualnya rendah, tetapi kepadatan nilainya sangat tinggi.
  • Hasilnya: nilai Google naik dari $23B pada 2004 menjadi lebih dari $2T saat ini. Yahoo turun dari $125B pada 2000 menjadi $4.8B saat ini.
• Dalam banyak kasus, kepadatan nilai lebih penting daripada kepadatan visual.
• Penting untuk mengoptimalkan desain dan fungsi agar nilai yang diperoleh pengguna bisa dimaksimalkan.

Kesimpulan

• Mendesain dengan mempertimbangkan kepadatan UI harus melampaui aspek visual antarmuka.
• Ini mencakup semua keputusan desain, baik yang eksplisit maupun implisit, serta semua informasi yang ditampilkan di layar.
• Ini juga harus mencakup semua tindakan dan waktu yang dibutuhkan pengguna untuk memperoleh nilai dari software.
• Definisi konkret kepadatan UI
  • Kepadatan UI = nilai yang diperoleh pengguna dari antarmuka / waktu dan ruang yang ditempati antarmuka
• Elemen penting
  • kecepatan
  • kemudahan penggunaan
  • konsistensi
  • prediktabilitas
  • kekayaan informasi
  • fungsionalitas
• Alasan antarmuka yang sukses : dengan mempertimbangkan semua elemen ini, kita dapat memahami mengapa sebagian antarmuka berhasil dan yang lain gagal.
• Tujuan desain
  • Melalui desain yang mempertimbangkan kepadatan, kita harus membantu orang memperoleh lebih banyak nilai dari software yang kita buat.

[GN⁺]

Komentar Hacker News

Ringkasan kumpulan komentar Hacker News

• Mengapa bentuk fisik menu restoran lebih baik daripada menu situs seluler

  • Menu situs seluler terlalu rumit secara UI, sehingga orang sering mencari foto menu di Google Maps.
  • Daripada mencoba mendefinisikan ulang "kepadatan", yang lebih penting adalah menyajikan informasi sebanyak mungkin tanpa kehilangan prioritas visual.

• Pentingnya data yang mengutamakan fungsi daripada bentuk

  • Dalam insiden SS El Faro, kapten menggunakan data cuaca komersial dengan grafis yang indah lalu terjebak dalam badai hurricane.
  • Ketimbang keindahan visual data, akurasi dan kebaruan datalah yang lebih penting.

• Konsep kepadatan temporal

  • JIRA terlihat padat secara visual, tetapi karena lambat dan memerlukan banyak perpindahan layar, pada praktiknya justru terasa renggang.

• Alasan antarmuka seluler terasa jarang

  • Jari manusia relatif tebal dan tidak presisi.
  • Lebih lambat daripada desktop sehingga pemuatan dipecah menjadi beberapa bagian.
  • Format gulir vertikal dan ukuran layar yang terbatas.
  • Fitur-fitur yang berguna di desktop sulit diterapkan di seluler.

• Kritik terhadap meningkatnya kelangkaan UI

  • Dunia desain web bergerak ke arah penggunaan ruang kosong yang semakin banyak.
  • Aplikasi seperti Hulu memakai banyak ruang kosong sehingga akses ke informasi menjadi lebih sulit.
  • Alih-alih mengikuti tren, desainer perlu memikirkan apa yang benar-benar baik.

• Masalah UI yang kompleks dan tren

  • Desainer berpikir mengikuti tren membantu penjualan produk.
  • Ada kecenderungan meniru orang atau merek yang terkenal.
  • Desainer UI bisa keliru mengira pelanggan mengutamakan tren dan mode.

• Kelebihan UI tradisional

  • Aplikasi B2B Windows lama memungkinkan banyak informasi dilihat sekaligus.
  • Sementara sistem berbasis web membutuhkan banyak halaman, sistem tradisional memungkinkan semua data dilihat dalam satu atau dua jendela.

• Ketimpangan kepadatan informasi

  • Isi sederhana pada slide presentasi sering dipotret sebagai foto beresolusi tinggi.
  • Makalah yang ditulis dengan LaTeX menghasilkan file PDF berukuran kecil, sedangkan makalah yang ditulis dengan MS Word berukuran jauh lebih besar.

• Masalah pada UI seluler

  • Mengisi ulang resep obat di layar kecil menjadi nyaris mustahil.
  • UI yang dioptimalkan untuk React tidak bekerja dengan baik di layar kecil.
  • Perkembangan teknologi justru merusak pengalaman pengguna.

• Contoh UI dengan kepadatan yang kurang

  • Halaman produk investasi Vanguard adalah contoh UI yang kurang padat.