{"id":10680,"date":"2019-09-19T00:00:00","date_gmt":"2019-09-19T00:00:00","guid":{"rendered":"https:\/\/binus.ac.id\/binus-digital\/2019\/09\/19\/tips-dan-trick-untuk-date-picker-design\/"},"modified":"2024-09-24T02:20:26","modified_gmt":"2024-09-24T02:20:26","slug":"tips-dan-trick-untuk-date-picker-design","status":"publish","type":"post","link":"https:\/\/binus.ac.id\/binus-digital\/2019\/09\/19\/tips-dan-trick-untuk-date-picker-design\/","title":{"rendered":"Tips dan Trick untuk Date Picker Design"},"content":{"rendered":"

Mendesain Date Picker yang buruk dapat mengakibatkan frustasi, yang dapat menyebabkan ditinggalkannya seluruh proses.<\/p>\n

The Basics<\/h3>\n

Dalam istilah sederhana, tanggal dapat dimasukkan:<\/p>\n

    \n
  1. Dalam format teks.<\/li>\n
  2. Dengan scrolling.<\/li>\n
  3. Menggunakan daftar dropdown.<\/li>\n
  4. Menggunakan date picker.<\/li>\n
  5. Menggunakan kombinasi dari pilihan-pilihan di atas.<\/li>\n
  6. Menggunakan desain yang tidak konvensional.<\/li>\n<\/ol>\n

    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.<\/p>\n

    Menggunakan format teks juga dapat meningkatkan kesalahan input tanggal karena bisa saja pengguna mempunyai preferensi tanggal tersendiri sehingga membuat sistem menjadi rusak.<\/p>\n

    Text entry – error handling – formats<\/h3>\n

    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.<\/p>\n

    Tipe-tipe Date Picker<\/h3>\n

    One month display<\/h4>\n

    <\/p>\n

    http:\/\/bootstrap-datepicker.readthedocs.io\/en\/latest\/<\/p>\n

    <\/h4>\n

    Displaying several months<\/h4>\n

    <\/p>\n

    https:\/\/www.ryanair.com<\/p>\n

     <\/p>\n

    Date range pickers<\/h4>\n

    <\/p>\n

    https:\/\/www.airbnb.com\/<\/p>\n

     <\/p>\n

    Involving several steps<\/h4>\n

    <\/p>\n

    https:\/\/uxsolutions.github.io\/bootstrap-datepicker\/<\/p>\n

     <\/p>\n

    Tanggal lahir, acara yang sudah lama berlalu atau kasus ketika date picker tidak boleh digunakan<\/h3>\n

    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.<\/p>\n

    <\/p>\n

    Mobile, alternatif dan gabungan, yang mana yang harus kita pilih?<\/h3>\n

    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.<\/p>\n

     <\/p>\n

    https:\/\/medium.com\/@ergomania_UX\/tips-and-tricks-to-design-better-date-pickers-98c57fab3bdc<\/p>\n","protected":false},"excerpt":{"rendered":"

    Mendesain Date Picker yang buruk dapat mengakibatkan frustasi, yang dapat menyebabkan ditinggalkannya seluruh proses. The Basics Dalam istilah sederhana, tanggal dapat dimasukkan: Dalam format teks. Dengan scrolling. Menggunakan daftar dropdown. Menggunakan date picker. Menggunakan kombinasi dari pilihan-pilihan di atas. Menggunakan desain yang tidak konvensional. Jika hanya menggunakan format teks, kita harus memasukkan validasi dan penanganan […]<\/p>\n","protected":false},"author":9,"featured_media":10681,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[77],"tags":[],"class_list":["post-10680","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles"],"_links":{"self":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts\/10680","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/comments?post=10680"}],"version-history":[{"count":1,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts\/10680\/revisions"}],"predecessor-version":[{"id":11948,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts\/10680\/revisions\/11948"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/media\/10681"}],"wp:attachment":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/media?parent=10680"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/categories?post=10680"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/tags?post=10680"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}