it-swarm.asia

Cara yang lebih baik bagi pengguna untuk memilih rentang tanggal

Dalam aplikasi saya, pengguna memilih rentang tanggal yang membutuhkan hasil. UI terlihat seperti ini:

Existing UI

Pengguna saya tidak suka ini, karena pemilih tanggal mengharuskan mereka untuk memilih tanggal tertentu. Ini jauh lebih tepat daripada yang mereka butuhkan - sebagian besar hasil yang dikompilasi oleh sistem hanya memiliki hasil bulanan atau tiga bulanan. Beberapa hanya tahunan.

Dua ide yang saya buat adalah:

alt text

Di sebelah kiri, cukup gunakan kotak kombo untuk memilih dari tanggal yang valid. Masalah dengan pendekatan ini adalah bahwa kadang-kadang hasilnya akan harian dan rentang tanggal yang valid kembali ke tahun 1860-an. Itu menambahkan terlalu banyak item untuk ditangani dalam kotak kombo.

Di sebelah kanan, gunakan trio comobox untuk memilih tanggal. Ini memiliki beberapa keunggulan. Jika hasilnya akan bulanan, saya bisa menonaktifkan kombo hari; jika hasilnya akan triwulanan, saya juga bisa membatasi item yang tersedia di kombo bulan. Tapi, tampaknya desain ini membutuhkan setumpuk klik untuk digunakan.

Apa desain alternatif untuk UX yang memungkinkan pengguna memilih tanggal "berguna" dengan lebih mudah?

Tumpukan teknologi saya adalah C #, WinForms, .NET 3.5

Perbarui 1 Oktober

  • Rentang tanggal yang dipilih oleh pengguna saya biasanya panjang - beberapa tahun hingga beberapa dekade - menarik kembali hasil yang jarang dalam jangka panjang.
  • Satu-satunya standar umum yang telah diidentifikasi adalah "Sedini mungkin" untuk tanggal mulai, dan "Hingga hari ini " sebagai tanggal selesai.

Banyak ide bagus dalam jawaban terkini - terima kasih untuk semua.

Perbarui 2 Oktober

  • Beberapa jawaban di bawah ini (dan saya berasumsi banyak pembaca) berasumsi saya perlu rentang tanggal untuk pembuatan laporan. Sebenarnya, bagian khusus dari aplikasi saya ini lebih merupakan mesin pencarian. Jika detail ini menginspirasi ide-ide baru, harap jawab.
46
Bevan

Secara umum, pengguna cukup akurat dan cepat dalam memasukkan tanggal sebagai string dalam kotak teks selama validasi Anda tidak terlalu cerewet dan memberikan koreksi otomatis yang layak dan default untuk sub-bidang (misalnya, menerima 2-9-04 sebagai serta 02/09/2004). Kontrol kalender sangat bagus untuk disediakan sebagai opsi ketika pengguna tidak yakin akan tanggalnya (mis., Untuk kasus-kasus ketika pengguna berpikir "Rabu minggu depan"), tetapi itu bukan satu-satunya cara untuk memasukkan tanggal. Dropdown terpisah untuk setiap subbidang membuatnya lambat bagi pengguna.

Jika Anda memiliki akses ke log kueri, pelajarilah untuk lebih memahami jenis tanggal yang digunakan pengguna. Meskipun Anda mungkin perlu mendukung tanggal sewenang-wenang kembali ke 1860, Anda mungkin hanya perlu mengoptimalkan desain untuk sejumlah kecil tanggal atau pola tanggal.

Berikut beberapa kemungkinan:

  • Default. Mungkin sebagian besar kueri Anda dapat diprediksi hanya dari laman tempat pengguna berada (mis., Untuk bulan lalu atau kuartal terakhir atau tahun lalu tergantung pada halaman/jendela). Default rentang Dari-Ke Anda ke nilai-nilai ini untuk setiap halaman dan pengguna hampir tidak pernah harus memasukkan apa pun.

  • Daftar rentang tanggal tipikal. Jika beberapa rentang tanggal merupakan bagian terbesar dari kueri Anda (mis., Setiap bulan tahun lalu), daftarkan mereka dalam kotak daftar atau daftar tombol radio. Yang terakhir adalah "Custom" yang memungkinkan beberapa kotak teks dengan kontrol kalender untuk entri pengguna pada tanggal tertentu.

  • Dropdown untuk input umum. Jika ada daftar nilai Dari dan Ke yang dapat diprediksi yang relatif kecil, maka sediakan kotak kombo Dari dan Ke yang masing-masing menerima setiap tanggal yang diketik pengguna tetapi dengan daftar dropdown dari tanggal Dari dan Ke yang paling umum (misalnya, awal setiap kuartal di tahun terakhir untuk bidang Dari).

  • Kotak Teks tunggal. Jika sebagian besar rentang tanggal adalah bulan, kuartal, dan tahun, maka berikan dua metode untuk memasukkan rentang tanggal. Default memiliki satu kotak teks berlabel "Bulan, Kuartal, atau Tahun;" yang menerima input seperti "Sep" (default ke paling baru September), "6/09," "3Q06", dan "1933." Pelajari materi tertulis pengguna untuk melihat jenis string apa yang harus diantisipasi. Metode non-default menyediakan kotak teks From-To yang terpisah untuk tanggal yang berubah-ubah.

  • Tata bahasa mikro. Jika sebagian besar pengguna ahli Anda mengeluh tentang entri tanggal, maka pertimbangkan untuk mendukung tata bahasa mikro untuk kotak teks Dari dan Ke, di mana pengguna dapat memasukkan tanggal yang tepat atau berbagai pintasan sintaksis lainnya (misalnya, "Perempat Terakhir" atau "LQ ”Di kotak Mulai ditafsirkan sebagai semua dari kuartal yang paling baru selesai). Lihat Mengumpulkan data secara efisien dengan kotak teks tata bahasa mikro

41
Michael Zuschlag

Mengapa tidak mempertimbangkan penggeser waktu, dengan laporan terbaru mengambil poin untuk memilih?

Jika Anda memiliki laporan kembali ke 1860, seberapa sering mereka perlu kembali?

                   | Report XYZ, Jan 12, 1983 |       
<--- Earlier                   \/                         Later --->
|------------------------------||----------------------------------|
     ^      ^ ^  ^            ^    ^   ^    ^   ^ ^ ^ ^ ^

Sesuatu seperti itu mungkin membiarkan mereka mengambilnya secara visual? Dengan gelembung di atas daftar, seharusnya memudahkan mereka untuk melihat apa yang mereka dapatkan. Sebelumnya/Kemudian sebuah tombol/tab berhenti untuk berpindah tahun, atau yang serupa. Slider dapat diakses dengan keyboard.

23
Dominic Hopton

Gunakan dua kalender dan redupkan hari-hari yang tidak dapat dipilih. Anda akan memberi pengguna Anda keuntungan dari kalender (bisa melihat satu bulan penuh pada satu waktu, melompat-lompat dan maju dalam waktu dengan mudah, dan bisa memilih tanggal yang mereka suka) dengan kendala hanya tanggal tertentu yang valid. Saat pengguna mengklik tanggal redup, beri mereka umpan balik tentang mengapa tanggal itu tidak valid, atau gunakan legenda.

Hipmunk.com melakukan pekerjaan yang sangat baik untuk menyederhanakan ini. Mereka memiliki dua kalender yang dapat dilihat setiap saat, dan tanggal sebelum hari ini diklik (sangat jelas mengapa dalam hal ini mereka tidak perlu menyebutkan alasannya, tetapi Anda mungkin harus). Mengklik pada tanggal memilih tanggal mulai, dan mengklik lagi memilih tanggal akhir. Perhatikan bagaimana mereka memiliki bidang tanggal juga sehingga Anda dapat mengetik jika Anda mau, dan bidang tersebut disorot saat Anda mengklik untuk menunjukkan tanggal mana yang akan Anda pilih. Ini tidak konvensional dan belum cukup "jangan buat saya berpikir", tapi ini cara yang bagus untuk menggabungkan kontrol ini secara elegan tanpa menambahkan banyak widget kaya. Coba lihat:

Hipmunk's homepage

Satu hal yang Hipmunk masih bisa lakukan IMO adalah menyoroti hari-hari antara keberangkatan dan kembali Anda, sama seperti detail visual tambahan. Saat ini mata Anda masih harus mengurai ruang antara dua tanggal sebagai "oh benar, setiap baris dari tanggal ini sampai tanggal itu adalah tempat saya akan pergi".

(Bonus dahsyat: coba tentukan tanggal keberangkatan setelah tanggal kembali)

6
Rahul

Ini sebenarnya dari perangkat lunak berbasis web yang saya gunakan di tempat kerja, tetapi idenya dapat diterjemahkan cukup mudah ke WinForms.

Saya menghasilkan laporan dengan rentang tanggal yang bervariasi setiap saat dengan kontrol ini. Kotak teks tidak bertopeng, dan mereka agak memaafkan pada nilai-nilai yang dapat dikonversi menjadi tanggal, jadi saya bisa meng-teks-bebas rentang tanggal yang berbeda tanpa masalah. Setelah Anda keluar dari bidang, tanggal diformat ke format tanggal "tepat". Jika tidak dapat mengetahui tanggal, teks berubah menjadi merah dan memiliki sedikit simbol kesalahan di sebelahnya (seperti jika saya mengetikkan tanggal yang ambigu, seperti 1109).

Jika saya perlu melakukan sesuatu yang spesifik, saya dapat mengklik tombol kalender di sebelah kanan kotak teks untuk melihat kalender (katakanlah, jika saya perlu melihat laporan dari minggu ketiga Maret 2009, saya tidak perlu tahu tanggalnya) Dari atas kepala saya).

Saya lebih suka gaya ini, karena saya hanya butuh satu detik untuk mengisi rentang tanggal - hanya 010109 tab 030109 tab dan kemudian saya menuju ke set detail selanjutnya.

alt text

Kontrol kosong atas. Tanggal tengah, tanpa SMS. Bawah, diformat tanggal dan kontrol kalender.

Adapun opsi ketiga Anda, saya memiliki perangkat lunak yang harus saya gunakan yang menggunakan gaya itu, dan saya benci - terutama karena saya harus menggunakan mouse. Saya juga ingin menunjukkan, tanggal yang ditampilkan adalah tanggal default ketika saya memuat halaman, jadi secara default, saya ingin mencari item yang lebih besar dari masa depan, tetapi kurang dari sekarang. A BESAR Kelemahan untuk ini adalah bahwa tahun-tahun hardcoded di dropdown - kami harus menunggu hingga Februari 2010 untuk 2010 untuk ditambahkan sehingga kami dapat mencari apa pun baru.

alt text

Jika Anda tahu sebelumnya bahwa permintaan tertentu hanya memiliki hasil triwulanan, Anda dapat mengubah beberapa tata letak Anda, dan pergi dengan pilihan dan pilihan tahun seperti ini:

alt text

Dan Anda dapat menonaktifkan kuartal untuk tahun ini yang belum dihasilkan.

6
Jared Harley

Saya tidak membaca semua jawaban. Mungkin seseorang telah menyarankan mulai dengan kontrol yang paling dibutuhkan sebagian besar pengguna, dan kemudian semakin mengungkapkan kontrol tambahan. Misalnya, klik tautan untuk mengungkapkan kontrol untuk hari dan bulan, untuk beberapa rentang tanggal yang tidak tumpang tindih, dan sebagainya.

alt text

Atau ini:

alt text

4
JeromeR

Ini solusinya.

FirstSecond

2
Alexandr

Saya jatuh cinta dengan desain yang digunakan di bootstrap-daterangepicker plugin jquery.

Pada dasarnya, ini memiliki rentang default, dan bidang default dari - ke dengan datepicker yang menyoroti rentang yang dipilih. I like it

1
JCM

Bidang rentang tanggal yang dapat digulir: 5 langkah interaksi sebagai gambar .Png dengan komentar di Rusia!

tetapkan + preset untuk periode umum sebagai 1/3/6/12 bulan http://1ne.twozerotwenty.com/pics/2011/10/10/show_me_the_date.png

Jika diperlukan - saya dapat membuat instruksi lengkap tentang interaksi dan area fungsional dalam bahasa Inggris & halaman demo.

1
denis.efremov

Inilah cara saya memecahkan masalah yang sama ... Anda dapat mengubah 30 hari/60 Hari/90 hari untuk mengingatkan laporan paling umum yang dihasilkan (tahunan/triwulanan/bulanan). Fitur rentang tanggal membuka tip alat dengan kemampuan rentang tanggal untuk pengguna yang secara khusus mencari rentang tanggal, tetapi tidak memaksa pengguna untuk memasukkan tanggal untuk menghasilkan hasil. enter image description here

0
Ashlie

Saya suka penerapannya di aplikasi Kalender Google (MIUI). Ada dua pemintal untuk memilih waktu-tanggal. Begini tampilannya:

enter image description here

Ketika Anda mengatur tanggal-waktu di pemilih pertama, yang kedua diatur secara otomatis ke +1 jam.

0
naXa

bagaimana dengan menggunakan pemilih rentang tanggal jquery ui:

http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/

anda dapat mempopulasi beberapa default, dan mengaturnya agar tahun dan bulan dapat menjadi dropdown alih-alih hanya memiliki panah <> per bulan.

0
Patricia

Anda dapat menampilkan pemilih kalender yang tampak normal, tetapi jika pengguna memilih bulan dari bilah judul maka itu akan secara otomatis mengisi tanggal mulai dan berakhir sebagai awal dan akhir bulan. Demikian pula untuk tahun ini.

Pengguna dapat mengganti tanggal akhir jika mereka menginginkan rentang yang sedikit berbeda.

Saya tidak yakin bagaimana Anda akan menunjukkan seperempatnya.

0
ChrisF

Dua pemikiran:

  • Dapatkah Anda menyajikan pemilih tanggal yang berbeda untuk jenis laporan yang berbeda (mis. Anda mengatakan beberapa adalah tahunan - dalam hal ini Anda tidak memerlukan lebih dari tahun - yang bisa berupa bidang teks sederhana.)

  • Apakah tanggal mulai/akhir seperti yang dipikirkan pengguna tentang pelaporan? Dalam beberapa proyek saya telah bekerja pada orang-orang yang ingin laporan berpikir dalam hal tanggal dan periode waktu daripada dua tanggal. Jadi untuk pelaporan triwulanan, mereka mungkin ingin 4 tahun dimulai Q3 1980.

0
adrianh