Realita di Lapangan
Saya sering memperhatikan aplikasi perpustakaan dan layanan publik digital, mulai dari sistem di sekolah, kampus, hingga instansi daerah, dan polanya hampir selalu sama: layarnya terlalu penuh. Warna-warna terang saling bertabrakan, spanduk pengumuman berukuran raksasa menutupi separuh halaman, dan deretan tombol berjejer tanpa petunjuk mana yang paling penting. Niat di baliknya biasanya baik, yaitu menampilkan semua fitur dan informasi sekaligus agar tidak ada yang terlewat. Namun hasilnya sering terbalik: pengguna justru bertanya-tanya, “Saya harus klik yang mana dulu?”
Dampaknya nyata di lapangan. Bagi pengunjung, terutama yang memakai anjungan peminjaman mandiri, tampilan yang ramai membuat mereka ragu, salah tekan, dan butuh waktu lebih lama untuk satu transaksi. Pengunjung yang kurang terbiasa dengan teknologi sering berhenti di tengah jalan dan memanggil petugas, sehingga tujuan awal anjungan mandiri, yaitu meringankan beban staf, tidak tercapai. Bagi staf di meja sirkulasi, masalahnya berlipat. Mereka melayani transaksi yang sama berulang-ulang sepanjang hari, sehingga setiap detik yang terbuang untuk mencari tombol atau menafsirkan layar yang berantakan akan menumpuk menjadi antrean dan kelelahan.
Akar masalahnya sederhana: setiap elemen tambahan di layar menuntut perhatian dan keputusan kecil dari penggunanya. Dalam dunia desain antarmuka dikenal Hukum Hick, yang menyatakan bahwa makin banyak pilihan yang disajikan, makin lama waktu yang dibutuhkan untuk memilih. Pedoman usability yang disusun Jakob Nielsen pun memuat prinsip “desain estetis dan minimalis”: antarmuka sebaiknya tidak menampilkan informasi yang tidak relevan atau jarang dibutuhkan, karena setiap informasi tambahan bersaing dengan informasi yang benar-benar penting.
Dalam artikel ini saya berbagi pengalaman merancang antarmuka sistem perpustakaan PoMS. Pembahasannya mencakup mengapa desain yang “diam” justru yang terbaik, bagaimana memilih warna dan ikon, serta mengapa kecepatan harus selalu menang atas animasi pada aplikasi yang dipakai setiap hari.
Pengalaman Merancang Desain yang “Diam”
Desain yang baik tidak disadari
Dalam merancang sistem perpustakaan seperti PoMS, saya memegang satu filosofi: desain yang baik adalah desain yang tidak disadari penggunanya. Ketika pemustaka berhasil meminjam buku, atau pustakawan selesai memproses pengembalian, tidak ada yang berkata, “Wah, tampilannya indah sekali.” Mereka hanya menyelesaikan tugas tanpa hambatan, lalu melanjutkan aktivitas lain. Itulah ukuran keberhasilan yang sebenarnya. Antarmuka bekerja seperti pintu yang terbuka mulus: baru terasa keberadaannya ketika macet.
Filosofi ini saya terjemahkan menjadi kebiasaan kerja. Setiap kali merancang sebuah layar, saya mengajukan tiga pertanyaan:
- Apa satu hal yang paling mungkin ingin dilakukan pengguna di layar ini?
- Apakah hal itu terlihat jelas dalam sekejap, tanpa perlu membaca petunjuk?
- Elemen apa yang bisa dihapus tanpa membuat siapa pun kehilangan sesuatu yang penting?
Jika sebuah elemen tidak membantu menjawab pertanyaan pertama, ia saya hapus atau saya pindahkan ke menu sekunder. Awalnya terasa seperti memotong fitur, tetapi dalam praktiknya layar justru menjadi lebih mudah dipahami, dan fitur yang jarang dipakai tetap tersedia tanpa mengganggu pekerjaan harian.
Warna tenang dan ikon yang sederhana
Filosofi yang sama menentukan pemilihan elemen visual. Saya memilih warna-warna tenang seperti slate-blue atau palet monokrom, karena warna semacam ini nyaman dipandang berjam-jam dan tidak melelahkan mata petugas yang bekerja seharian di depan layar. Warna yang tegas dan mencolok saya simpan khusus untuk hal yang memang perlu perhatian, misalnya denda, buku yang sudah jatuh tempo, atau pesan kesalahan. Warna pada dasarnya adalah bahasa: jika semua elemen berwarna mencolok, tidak ada satu pun yang tampak penting.
Keterbacaan juga perlu dijaga. Pedoman aksesibilitas WCAG menetapkan rasio kontras minimal 4,5:1 antara teks dan latar untuk teks berukuran normal, dan angka ini patut dijadikan patokan, terutama bagi pengguna lanjut usia atau layar anjungan yang terkena pantulan cahaya ruangan.
Untuk ikon, saya memilih ikon garis tipis yang sederhana dan konsisten, selalu disertai label teks agar maknanya tidak ambigu. Dibandingkan tombol 3D dengan gradasi dan bayangan tebal, pilihan ini jauh lebih baik karena tiga alasan. Pertama, tampilannya rapi dan seragam. Kedua, ikon berformat SVG berukuran sangat kecil sehingga ringan dimuat. Ketiga, dan ini yang terpenting, mata pengguna tidak kehilangan titik fokus. Tombol 3D mungkin menarik ketika satu atau dua muncul sendirian, tetapi ketika puluhan di antaranya hadir sekaligus, semuanya berebut perhatian. Dengan tampilan yang tenang, satu tombol aksi utama berwarna tegas akan langsung terlihat.
Satu layar, satu tugas utama
Prinsip terakhir adalah hierarki. Di layar peminjaman, misalnya, kolom pemindaian barcode harus menjadi pusat perhatian, sedangkan fungsi lain seperti riwayat atau pengaturan cukup tersedia secara sekunder. Tombol aksi utama dibuat satu dan jelas, tombol pendukung tampil lebih tenang, dan pesan kesalahan ditulis dalam bahasa sehari-hari yang menjelaskan apa yang terjadi serta apa yang harus dilakukan berikutnya. Ruang kosong di sekitar elemen juga bukan ruang yang terbuang. Ruang itu memberi napas pada layar dan membantu mata membedakan kelompok informasi satu dengan lainnya.
Kecepatan Staf vs Animasi Web
Dua jenis aplikasi, dua jenis kebutuhan
Ada perbedaan mendasar antara situs web profil dan aplikasi sirkulasi. Situs profil dikunjungi sesekali, dan animasi yang indah membantu membangun kesan pertama. Aplikasi sirkulasi sebaliknya dipakai setiap hari, berjam-jam, oleh pustakawan yang mengerjakan tugas yang sama berulang kali. Bagi mereka, animasi loading yang cantik atau efek transisi yang berat bukan hiburan, melainkan jeda yang mengganggu. Tambahan satu detik per transaksi terdengar sepele, tetapi dikalikan ratusan transaksi dalam sehari, jumlahnya menjadi menit-menit kerja yang hilang dan antrean pemustaka yang bertambah panjang.
Yang dibutuhkan staf adalah kecepatan dan kejelasan. Respons harus instan ketika barcode dipindai, kursor harus otomatis berada di kolom yang tepat agar pustakawan tidak perlu menggeser mouse, dan tata letak tabel harus responsif sehingga data anggota, daftar pinjaman, dan tanggal jatuh tempo bisa dibaca sekilas. Praktiknya, kolom terpenting diletakkan di sisi kiri, baris dibuat cukup padat tetapi tidak sesak, dan judul kolom tetap terlihat saat tabel digulir. Detail-detail kecil seperti ini jauh lebih terasa manfaatnya bagi staf dibandingkan animasi apa pun.
Pendekatan teknis yang ringan
Dari sisi teknis, pendekatan saya sengaja dibuat ringan. Penggunaan framework CSS modern seperti Tailwind memungkinkan tampilan tetap rapi dan konsisten tanpa harus menulis ratusan baris CSS kustom. Dengan konfigurasi yang tepat, hanya kelas yang benar-benar dipakai di halaman yang ikut dikompilasi, sehingga ukuran file CSS tetap kecil. Jarak, ukuran huruf, dan warna pun mengikuti skala yang seragam, sehingga antarmuka terasa konsisten dari satu halaman ke halaman lain tanpa usaha tambahan.
Hal ini penting terutama ketika aplikasi berjalan di server VPS dengan sumber daya terbatas. Halaman yang ringan berarti beban server lebih rendah, waktu muat lebih singkat, dan pemakaian bandwidth lebih hemat, termasuk pada komputer lama atau koneksi internet yang pas-pasan, kondisi yang masih umum dijumpai di banyak perpustakaan. Prinsip yang sama berlaku untuk bagian lain: ikon memakai SVG, gambar dioptimalkan sebelum diunggah, dan pustaka JavaScript berat tidak dipasang hanya untuk keperluan sederhana.
Ringkasan pilihan desain
Berikut rangkuman keputusan desain yang saya pegang dan alasannya.
| Aspek | Yang dihindari | Yang dipilih |
|---|---|---|
| Warna | Palet terang yang saling bertabrakan | Slate-blue atau monokrom; warna tegas hanya untuk peringatan |
| Tombol | Efek 3D, gradasi, bayangan tebal | Tombol datar dengan satu aksi utama yang menonjol |
| Ikon | Beragam gaya dan warna | Ikon garis tipis yang seragam, disertai label |
| Pengumuman | Spanduk raksasa | Pita informasi tipis yang bisa ditutup |
| Loading | Animasi panjang dan transisi berat | Indikator sederhana, hanya jika memang perlu |
| Tabel | Kolom berlebihan | Kolom penting saja, judul tetap terlihat, responsif |
| Kode | Pustaka berat untuk hal sepele | Tailwind dengan CSS minimal, ikon SVG, gambar teroptimasi |
Pada Akhirnya, Soal Kecepatan Melayani
Sistem perpustakaan yang modern tidak dinilai dari seberapa meriah tampilannya, melainkan dari seberapa cepat pustakawan bisa melayani pemustaka. Antarmuka yang bersih dan sederhana mengurangi kebingungan, mempercepat transaksi, dan membuat pekerjaan harian staf terasa lebih ringan. Bersih bukan berarti kosong, tetapi berarti setiap elemen di layar punya alasan untuk berada di sana.
Bagi pengembang maupun pengelola perpustakaan yang ingin mengevaluasi aplikasinya, langkah awal yang paling mudah adalah mengamati satu transaksi nyata dari awal sampai selesai. Catat setiap saat ketika pengguna ragu, salah klik, atau mencari-cari tombol, lalu tanyakan elemen mana yang bisa dihapus atau disederhanakan. Seringkali perbaikan terbesar datang dari mengurangi, bukan menambah.
Pada akhirnya, teknologi yang baik adalah teknologi yang membuat orang bisa fokus pada hal terpenting di perpustakaan: manusia dan pengetahuan, bukan layar yang ramai.