Hide and Show Icon untuk menampilkan informasi password, Manakah Penerapannya yang Benar?
Sebelumnya aku minta maaf jika tulisan singkat ini kurang nyaman dibaca, karena ini pertama kali aku nulis di medium. Yeay! Beri kritik dan saran yang membangun, ya!
Oke, saat menggunakan suatu aplikasi pasti sering melihat informasi penting yang disembunyikan dengan ******, iya kan? Baik informasi tersebut disembunyikan secara penuh atau sebagian.
Nah, bagi para UI Designer, pasti pernah bingung pas pengen nerapin mana icon yang tepat untuk menampilkan password. Setidaknya para desainer pernah melakukan riset kecil-kecilan dari perusahaan ternama bagaimana cara mereka mendesain dan merepresentasikan icon yang tujuannya untuk menampilkan informasi tersembunyi tadi. Apakah saat informasi sedang disembunyikan, icon yang dipakai untuk menampilkan informasi tersebut adalah icon show atau icon hide?
Desainger Google sendiripun sepertinya pernah mengalami keraguan, loh! Bagaimana sih menerapkan icon show atau hide tadi dengan sempurna. Terbukti kalau Google sudah melakukan 3 perubahan desain untuk merepresentasikan icon yang mana fungsi icon tersebut untuk menampilkan informasi kata sandi tersembunyi, pada halaman “Login” akun Google.
Pertama: Icon Hide untuk Menapilkan Password
Maaf banget gambarnya burem ya, aku ngga punya dokumentasi gambar desain pertama ini :’).
Oke, Pertama Google pernah menerapkan icon hide (visibilty off) untuk menampilkan sandi yang tersembunyi. Ya, memang agak aneh sih saat dibaca, fungsi button memang untuk melakukan suatu action. Jika ada informasi tersembunyi dan kemudian ingin ditampilkan, maka icon yang tepat untuk menampilkan adalah icon show (visibility on).
Loh, apakah Google keliru?
Namanya juga riset experience untuk mendapatkan desain mana yang paling cihuy untuk diterapkan. Jadi tidak ada yang keliru dalam hal ini. Oke, lanjut ke perubahan kedua yang dilakukan Google.
Kedua: Icon Show untuk Menampilkan Password
Nah, seperti yang aku jelaskan sebelumnya. Akhirnya Google merubah icon yang tujuannya untuk menampilkan password, menggunakan icon show (visiblity on), dilengkapi dengan tooltip ‘Show Password’ sebagai informasi untuk menampilkan password. Untuk desain pertama tadi aku tidak begitu ingat, apakah ada tooltip sebagai bantuan informasi atau tidak.
Alasan perubahan desain yang kedua ini memang jelas, karena action yang akan dilakukan saat pengguna klik icon tersebut adalah untuk menampilkan password, jadi icon yang paling tepat adalah icon show. Apalagi dibantu dengan informasi tooltip ‘Show Password’, jadi semakin membantu pengguna memahami fungsi icon tersebut agar ngga bingung fungsi icon tersebut saat dipencet.
Ett, tapi Google ternyata belum puas sampai disitu.
Ketiga: Checkbox untuk Menampilkan Password
Yaps, secara visual mungkin ini ngga sesimpel dua desain sebelumnya, ya. Tapi dari sini kita tahu, Google benar-benar mencoba ingin menampilkan informasi yang clear agar semua pengguna dapat memahami bagaimana cara menampilkan informasi sandi mereka yang tersembunyi. Tidak hanya untuk persona pengguna usia tertentu, tapi untuk semua usia. Karena kita tahu, pengguna Google berasal dari semua macam golongan dan usia.
Penggunaan checkbox kosong, dengan keterangan ‘Tampilkan Sandi’ memang sangat jelas maksudnya, yaitu saat pengguna klik checkbox tersebut sandi akan ditampilkan. Dibanding dengan sebuah icon dengan informasi tooltip, yang mana tooltip memang kurang begitu nyaman digunakan di mobile device.
Google berusaha agar pengguna mereka tidak mengalami kebingungan saat ingin menampilkan password, meskipun bagi sebagian desainer mungkin ini sedikit mengorbakan visual (debatable sih, tapi menurutku desain dengan checkbox masih rapi kok).
Jadi, Mana Nih yang Paling Benar?
Sebelum aku simpulkan, kira-kira mana menurut kalian yang paling nyaman digunakan? Desain pertama, kedua, atau ketiga?
Coba kita intip opsi desain dari perusahaan lain ya, yaitu Airbnb.
Dibandingkan 3 opsi desain Google tadi, Airbnb punya desain tersendiri, loh! Yaitu dengan meletakkan text button tanpa icon di dalam area input kata sandi. Bagaimana? Kelihatannya lebih nyaman, rapi, dan ngga buat pengguna bingung ya.
Memang jika memakai teks Bahasa Inggris lebih simpel ya, informasi ‘Show’ dan ‘Hide’ kira-kira tidak terlalu memakan area yang banyak untuk informasi kata sandi. Tapi jika memakai Bahasa Indonesia, kata yang akan digunakan adalah ‘Perlihatkan’ dan ‘Sembunyikan’, akan cukup memakan area yang banyak, sehingga mengurangi jumlah karakter maksimal kata sandi itu sendiri, terutama pada aplikasi mobile.
Mungkin itu tadi salah satu alasan Google menerapkan desain ketiga, yang mana Google menampilkan checkbox dengan teks ‘Perlihatkan Kata Sandi’ dibawah text input, karena memiliki area yang lebih luas.
Udah bisa nyimpulin belum kira-kira mana yang paling nyaman diterapkan?
Apapun desainnya, yang terpenting pengguna kalian paham fungsi dari tombol tersebut. Kira-kira kesimpulannya seperti itu, karena setiap produk atau aplikasi punya user persona yang berbeda. Perbedaan itu yang membuat desain akan sangat berbeda antara suatu produk dengan produk yang lain.
Ingat! Utamakan kenyamanan pengguna, baru kemudian sempurnakan desain secara visual.
Semoga tulisan ini bermanfaat!
