Saya merancang pada lebar yang keliru

Yang pertama datang bukan kalimat, melainkan sebuah foto. E, rekan kami, memotret layar ponselnya sendiri dengan perangkat lain lalu mengirimkannya. Di layar untuk mencatat pengeluaran, tombol simpan yang seharusnya berada di paling bawah hanya tampak separuh bagian atasnya; sisanya jatuh ke luar tepi layar. Satu-satunya kalimat yang menyertainya adalah pertanyaan: ini bisa ditekan tidak? Dia tinggal di sebuah kota kecil agak jauh dari Jakarta, dan layar itu dia pakai setiap hari.

Sampai saat itu saya tidak pernah meragukan cara kerja saya sendiri. Saya mengembangkan aplikasi di layar 27 inci, dan kalau ingin melihat tampilannya di ponsel, saya tinggal menyempitkan jendela peramban — kira-kira sampai 390px — lalu bila tidak ada yang rusak, saya anggap beres. Jendela yang disempitkan memang terlihat seperti persegi panjang tegak. Hanya saja itu persegi panjang di atas meja saya, bukan yang ada di telapak tangan seseorang.

Saya minta dia mengukur perangkatnya. Lebarnya 360px dalam satuan CSS. Selisihnya dengan 390px hanya 30px, tidak sampai selebar dua jari. Namun justru di dalam 30px itulah terletak batas tempat beberapa layar kami berhenti muat. Lebar yang selama ini saya periksa bukan yang paling sempit, melainkan sedikit di luarnya.

Saya mengunci jendela pada 360px lalu membuka layar KAZENA Books satu per satu dari ujung. Semuanya ada 48 layar. Sebanyak 11 layar memunculkan gulir ke samping, dan 3 di antaranya menaruh tindakan terpenting — simpan, ekspor, lanjut — sepenuhnya di luar layar. Gulir ke samping masih bisa dijangkau kalau ditarik dengan jari. Bagi orang yang tidak tahu bahwa itu bisa ditarik, di sana sama saja tidak ada apa-apa.

Hampir semuanya berasal dari 1 komponen: tata letak yang menaruh kolom jumlah dan pemilih kategori pajak berdampingan dalam 2 kolom. Kedua kolom itu membutuhkan 372px termasuk marginnya. Di layar 360px, kelebihannya 12px. Hanya 12px, tetapi bila yang menggantung di luar tepi adalah pemilihnya, layar itu tidak bisa lagi dipakai memilih apa pun. Dan karena komponen yang sama dipakai ulang di 11 layar, 1 kelalaian berubah menjadi 11.

Yang lebih merepotkan bukan lebarnya, melainkan tingginya. Begitu kolom jumlah disentuh, papan ketik muncul dari bawah layar. Di perangkat E, papan itu menutupi hampir 300px dari tinggi 640px. Kami menempelkan tombol simpan di dasar layar, jadi tombol itu berakhir di balik papan ketik, dan menggulir tidak menggeser sesuatu yang ditempelkan. Persis itulah yang tampak di fotonya. Tombolnya bukan tidak bisa ditekan; tombolnya tidak berada di tempat yang bisa ditekan.

Ada 1 hal lagi yang tidak kami lihat: ukuran huruf. Banyak orang memperbesar ukuran huruf sistem. Dengan setelan 1,3 kali dan layar yang sama, tulisan di dalam tombol terlipat menjadi 2 baris, tombolnya meninggi, dan keterangan di bawahnya terdorong keluar. Kami selalu hanya melihatnya pada 100%. Memperbesar huruf adalah hal wajar yang dilakukan orang ketika tulisan sulit dibaca. Kalau tata letak rusak begitu mereka melakukannya, itu kesalahan kami, bukan kesalahan mereka.

Saya perlu jujur soal sisanya. Laporan serupa sudah sampai kepada saya pada bulan Juni — pesan pendek dari seseorang di Filipina yang memakai KAZENA Books, yang menyebut ada tombol terpotong. Waktu itu saya menyimpulkan bahwa itu khas perangkatnya, lalu saya tutup, karena menyempitkan jendela saya sendiri tidak membuatnya muncul kembali. Ia tidak muncul kembali bukan karena ponselnya, melainkan karena cara saya menyempitkan jendela itu salah. Selama 2 bulan kami membagikan sesuatu yang sebenarnya sudah bisa diperbaiki.

Suatu sore musim panas ini, sambil menunggu giliran membayar di sebuah warung di Jakarta, saya melihat orang di sebelah saya memegang piring dengan satu tangan dan menyelesaikan pembayaran hanya dengan ibu jari tangan yang lain. Di bawah cahaya siang layarnya memutih, dan bagian yang bisa dijangkau ibu jari hanya separuh bawahnya. Syaratnya sama sekali berbeda dari pemeriksaan yang saya lakukan di meja. Sambil menerima struk tulisan tangan, saya membatin apakah tombol simpan kami bisa ditekan dengan cara memegang seperti itu.

Beginilah urutan perbaikannya. Pertama, tindakan utama yang kami tempelkan di dasar layar kami kembalikan ke dalam alur halaman. Begitu formulir digulir sampai bawah, tombolnya ada di sana; saat papan ketik terbuka pun, halaman mengangkatnya ke atas papan ketik dengan sendirinya. Kedua, tata letak 2 kolom kini runtuh menjadi 1 kolom begitu lebarnya di bawah 380px. Di tempat yang sempit, cara paling aman adalah tidak menjajarkan apa pun.

Lalu kami mengubah cara memeriksa. Alih-alih mengandalkan mata saya sendiri, kini kami mengambil tangkapan layar 12 layar utama secara otomatis pada ukuran 360px kali 640px, lalu mengambil 12 layar yang sama sekali lagi dengan ukuran huruf 130%. Apa pun yang meluber akan terlihat di gambarnya. Sekalian, kami menemukan 2 tempat dengan area sentuh di bawah 44px dan memperbesarnya; keduanya adalah label kecil untuk memilih kategori pajak.

Yang saya pelajari dari kejadian ini bukan hal teknis. Lebar layar yang saya pakai untuk bekerja bukan soal selera — itu keputusan tentang untuk siapa saya membangun. Sekarang peramban saya terbuka pada 360px secara bawaan, dan saya melebarkannya hanya kalau memang sengaja ingin melihat lebih banyak. Kalau di layar Anda ada tombol yang terpotong atau tulisan yang terpangkas, cukup 1 foto saja; tolong kirimkan. Karena E melakukannya, saya akhirnya bisa meragukan meja saya sendiri.