Mendesain Date Picker yang buruk dapat mengakibatkan frustasi, yang dapat menyebabkan ditinggalkannya seluruh proses.

The Basics

Dalam istilah sederhana, tanggal dapat dimasukkan:

  1. Dalam format teks.
  2. Dengan scrolling.
  3. Menggunakan daftar dropdown.
  4. Menggunakan date picker.
  5. Menggunakan kombinasi dari pilihan-pilihan di atas.
  6. Menggunakan desain yang tidak konvensional.

Jika hanya menggunakan format teks, kita harus memasukkan validasi dan penanganan kesalahan. Ada satu masalah besar jika kita menggunakan scrolling, daftar dropdown dan date picker, terutama jika digunakan dalam form yang panjang, tangan kita akan selalu berada di atas keyboard.

Menggunakan format teks juga dapat meningkatkan kesalahan input tanggal karena bisa saja pengguna mempunyai preferensi tanggal tersendiri sehingga membuat sistem menjadi rusak.

Text entry – error handling – formats

Siapa target audiens kita? Ketika berhadapan dengan pengguna internasional, kita harus memperhitungkan berbagai format yang ada, atau setidaknya mendefinisikan sampel yang benar-benar fungsional. Kita tidak boleh meminta pengguna untuk menggunakan karakter khusus.

Tipe-tipe Date Picker

One month display

http://bootstrap-datepicker.readthedocs.io/en/latest/

Displaying several months

https://www.ryanair.com

 

Date range pickers

https://www.airbnb.com/

 

Involving several steps

https://uxsolutions.github.io/bootstrap-datepicker/

 

Tanggal lahir, acara yang sudah lama berlalu atau kasus ketika date picker tidak boleh digunakan

Memasukkan tanggal lahir mungkin memerlukan banyak interaksi pada date picker dan menunjukkan hari-hari dalam format kalender juga bukan aspek yang relevan. Dalam hal ini, daftar dropdown umumnya lebih cocok digunakan untuk mengurangi jumlah langkah yang terlibat.

Mobile, alternatif dan gabungan, yang mana yang harus kita pilih?

Tidak ada pemilihan date picker yang sempurna yang dirancang dengan sempurna untuk setiap situasi. Kita harus dapat menentukan format date picker yang sesuai dengan tujuan kita. Misalnya kita ingin membuat pengguna memilih tanggal awal dan akhir, berarti kita harus menggunakan desain date picker yang dapat mengakomodasi 2 masukkan tanggal.

 

https://medium.com/@ergomania_UX/tips-and-tricks-to-design-better-date-pickers-98c57fab3bdc