Button "OK" dan "Cancel", Mana yang seharusnya berada dikiri?
Iosi Pratama
Iosi Pratama
Sebuah perdebatan abadi diantara UI Desainer. Button "OK" dan "Cancel" Mana yang seharusnya diletakkan di sisi kiri? Ini adalah sebuah perdebatan abadi antara penganut "OK / Cancel" dan "Cancel / OK". Keduanya memiliki alasan sendiri-sendiri dan sampai sekarangpun keduanya masih sering kita jumpai di berbagai produk yang berbeda. Seperti yang kita ketahui sebagai Desainer, posisi yang tepat suatu element dapat meningkatkan rasio konversi dari sebuah website. Pada pagi ini saya mencoba membahasnya satu-satu. Setelah belajar dari tulisan ini, kamu akan mendapatkan sebuah wawasan baru mengenai cara menentukan posisi button "OK" dan "Cancel". Tulisan ini adaptasi dari tulisan yang dipublish di Muzli yang berjudul “Ok-Key” and “Cancel-Key”, Which One Should Be Set Up on the Left?
1. Alasan kuat dibalik keputusan desain "
Cancel" adalah sesuai dengan kebiasaan berbicara dan membaca kita. Ketika ada pertanyaan diajukan, maka diberikan opsi positif dan opsi negatifnya. Kita biasanya begini kan ketika mengungkapkan sesuatu. "Apakah desain ini membantu kamu?" Atau tidak ? Daripada Tidak atau iya? Selain itu dalam kebiasaan membaca. Sebagaian besar bahasa dunia membaca dari sisi kiri ke kanan. 2. Dengan keputusan "
Cancel" maka user akan lebih mudah memilih tombol OK. Ini karena user cenderung memilih OK di sebagian besar situasi. Jika user mengikuti pola penjelajahan seperti gambar dibawah ini, maka ini akan mempermudah user dalam memutuskan langkah selanjutnya. Selain itu, beberapa pengguna (banyak juga) yang lebih terbiasa tanpa mouse akan lebih mudah dalam melopat ke tombol OK dahulu.
1. Salah satu contoh desain "Cancel
" sering kita temui saat proses Checkout di sebuah E-Commerce. Alasan tersebut karena mereka memegang prinsip "
" Jadi tombol yang mengarahkan ke proses selanjutnya seharusnya berada disisi kanan. Sedangkan tombol yang mengarahkan ke kembali berada di sisi kiri.
2. Saat berbicara kebiasaan. Jika tombol Ok berada dikiri maka akan membuat user buang-buang waktu ketika dia ingin mengklik tombol OK karena harus mengalihkan pandangannya ke sisi kiri sedangkan dia baru selesai membaca kotak dialog yang berada di titik kanan. .... Selanjutnya bagaimana keputusan penerapan dari posisi "
Cancel" ini berbagai brand besar. Kita berasumsi mereka memiliki banyak desainer, sehingga keputusannya telah dipikirkan dengan matang.
Windows
Linux
OSX
iOS
Android telah berubah dari "OK / Cancel" menjadi "Cancel / OK" Sejak rilis versi 4.0
...
1. Sebenarnya alasan kedua keputusan tersebut bisa benar sesuai polanya masing-masing. Namun faktanya, seperti yang
tulis dibukunya
- bahwa user tidak membaca kata per kata secara berurutan. Jadi user langsung melakukan scanning apa yang diinginkan. Selain itu menurut saya user jadi lebih terbantu dengan kekonsistenan posisi "Cancel /
" ataupun sebaliknya dari beberapa produk yang dia gunakan sehari-sehari. Contoh kasusnya, saya baru-baru ini salah klik saat ada website menawarkan notifikasi. Beberapa website letaknya berbeda. Jadi saat saya terbiasa memilih block (disisi kiri) malah kena allow. 2. Berkaitan dengan pandangan saya yang pertama. Lebih baik buat UI desainer meletakkan posisi button ini sesuai dengan desain posisi dari sistem operasi yang digunakan. Jadi dengan begitu user akan lebih mudah mengenalinya dan tidak tersiksa dengan mengubah pola. 3. Beberapa menggunakan kata kerja untuk menggantikan button "OK". Ini menurut saya lebih baik karena memberikan sebuah penegasan apa yang akan mereka lakukan. 4. Jauhkan tombol yang biasanya tidak diinginkan user. Untuk kasus ini kita bisa melihat Notepad Windows dan Keynote dari OSX. Pengguna bisa saja salah menekan Don't save berkali-kali. Sedangkan Keynote dibawah ini lebih baik dengan antisipasinya meletakkan tombol delete agak jauh dari tombol OK. Selain itu Keynote juga membedakan negative action dengan button putih dan positif action dengan button biru.