Apa saja cara berbeda untuk memiliki bidang dalam aplikasi untuk tanggal, waktu, atau keduanya? Apa pro dan kontra untuk masing-masing?
Yang paling umum tampaknya adalah kombinasi dari drop-down 2-3, atau beberapa widget bentuk kalender. Apakah ada opsi lain yang tersedia? Yang mana yang paling mudah digunakan?
Saya percaya kotak teks biasa dengan indikasi format yang diharapkan sudah cukup. Seperti yang disebutkan Kevin, jika Anda menggunakan pemilih tanggal Anda harus benar-benar memberikan metode untuk masuk langsung. Banyak orang lebih suka mengetik tanggal.
Tapi ini yang saya lakukan di Techinsurance.com ...
Tentu saja saya memiliki validasi sisi klien dan server juga. Satu-satunya fitur lain yang saya tambahkan adalah bahwa jika mereka memasukkan 12121999 atau 12-12-1999 maka teks secara otomatis diformat dengan garis miring ketika Anda kehilangan fokus ke kotak teks. Saya mengadopsi teknik ini pada bulan Juni dan sejauh ini telah bekerja dengan baik untuk kami.
Saya setuju dengan Rahul, bahwa itu tergantung pada konteksnya. Widget kalender sangat berguna untuk mundur atau maju beberapa bulan, tetapi tidak begitu bagus untuk memilih tanggal lahir Anda - itu akan menjadi mimpi buruk yang mengklik!
Saya pribadi benci tanggal mundur itu untuk memilih tanggal lahir Anda, juga, karena mereka cenderung menyulitkan untuk mencapai pilihan target Anda, tetapi saya melihat yang bagus baru-baru ini dalam aliran pendaftaran di Kontain.com. Seperti yang dapat Anda lihat di bawah, mereka telah meletakkan opsi dalam tabel alih-alih daftar (dan melakukan hal yang sama untuk hari dan tahun) dan saya menemukan bahwa ini merupakan peningkatan yang luar biasa. Yay!
Ingatlah bahwa keramahan pengguna adalah produk dari audiens Anda dan domain aplikasi Anda. Misalnya, jika Anda membangun layanan seperti Kayak, Anda akan berfokus pada pengguna yang cukup mengerti teknologi yang akan banyak menggunakan kontrol tanggal selama pengalaman mereka dengan aplikasi Anda. Di sisi lain, Google dan Amazon memiliki khalayak yang lebih luas dan lebih sedikit interaksi, sehingga mereka memiliki prioritas yang berbeda.
Dengan mengingat hal itu, berikut adalah beberapa pertimbangan:
Kontrol kalender. Ini bisa sangat berguna ketika Anda ingin mengomunikasikan metadata tambahan tentang tanggal, waktu atau periode waktu saat memilih tanggal. Misalnya, di situs perjalanan, pengguna mungkin memilih tanggal untuk memesan hotel. Anda dapat menggunakan kontrol kalender untuk menunjukkan tanggal mana yang sudah dipesan penuh. Karena kontrol kalender paling mirip dengan sepupu dunia nyata, yaitu kalender, Anda membantu pengguna dengan membawa interaksi dengan tanggal dan waktu ke dalam model mental mereka. Namun, ada kasus penggunaan di mana kontrol kalender menjadi canggung; karena kontrol dimodelkan menampilkan sekitar satu bulan pada suatu waktu, Anda mendorong kontrol untuk melewatkan antara bulan menjadi (sering) panah atau dropdown lagi. Itu bisa membatasi jika Anda mencoba memberi pengguna lebih banyak kebebasan dalam memilih tanggal.
Menu drop down. Seringkali Anda akan melihat tiga berturut-turut: [Hari] [Bulan] [Tahun]. Ini bekerja dengan baik ketika pengguna hanya memilih tanggal yang sudah mereka ketahui sebelumnya, seperti tanggal lahir mereka. Mereka tidak bekerja dengan baik jika Anda meminta pengguna untuk mengulangi tugas yang melibatkan tanggal, karena sebagian besar pengguna akan menggunakan mouse dan karenanya harus mengklik sekali pada setiap dropdown untuk membukanya, sekali pada setiap item untuk memilihnya, dan mungkin gulir daftar ke atas dan ke bawah (untuk tanggal lahir, tidak jarang menu Tahun dimulai pada 1920 dan berakhir pada 2009). Pastikan Anda mempertimbangkan ini jika Anda memilih menu drop down.
Bidang input teks biasa. Seperti yang dijawab orang lain, hal yang menyenangkan tentang bidang input adalah Anda dapat menerima apa saja. Dalam kasus ini, ingat prinsip-prinsip desain formulir: jangan memaksakan pemformatan database/backend Anda pada pengguna akhir. Cobalah untuk bermurah hati dalam menerima sebanyak mungkin format. Gunakan validasi sisi klien untuk menunjukkan masalah kepada pengguna sebelum dia mengirimkan formulir (tanggal sangat mudah divalidasi dalam Javascript dengan memberikan string yang diisi pengguna ke fungsi Date () baru dan melihat apakah Anda mendapatkan tanggal kembali).
Melihat di luar kendali, pertimbangkan beberapa prinsip akal sehat ketika berhadapan dengan kencan:
Periksa apakah pengguna tidak melakukan kesalahan. Jika Anda mendesain situs untuk remaja dan seseorang mengatakan mereka lahir pada tahun 1934, pertimbangkan apakah itu harus menjadi pilihan dan jika memang harus, apakah Anda harus menggandakan cek dengan mereka untuk melihat apakah mereka sebenarnya berusia 76 tahun. Bukan untuk tujuan validasi usia, tetapi sebagai layanan kepada pengguna. Demikian pula, jika Anda merancang situs perjalanan, pertimbangkan untuk memeriksa apakah pengguna benar-benar bermaksud memesan liburan ke Hawaii pada Oktober 2011, bukan Oktober ini.
Dalam kebanyakan kasus, pemilihan waktu spesifik tidak diperlukan dan mungkin tidak memetakan ke model mental pengguna. Saat merencanakan suatu acara, granularitas maksimum yang mungkin Anda perlukan adalah dalam interval 5 menit. Tawarkan kontrol yang memungkinkan pengguna untuk memilih 12:00, 12:05, 12:10 dll daripada 60 opsi untuk setiap menit. Granularity yang Anda putuskan dapat memiliki efek besar pada kegunaan kontrol tertentu yang Anda pilih untuk digunakan (seperti menu drop down).
Selalu melihat di luar kendali standar dan ke bidang grafik informasi sebagai opsi. Biasanya ini akan rumit dan mahal untuk diterapkan, tetapi mereka bisa sia-sia jika pemilihan tanggal/waktu adalah fitur inti. Sebagai contoh, hipmunk.com memiliki representasi visual yang fantastis dari jadwal penerbangan (baca, bukan sebagai masukan) yang bisa lebih baik jika interaktif. Dalam kasus ini, ingatlah untuk mempertimbangkan harapan audiens Anda.
Pemrogram malas! Biarkan komputer bekerja sedikit dan bahkan mempertimbangkan tidak memiliki bidang tanggal tertentu untuk entri tanggal awal. Kalender Google, saat membuat acara baru, cukup memungkinkan Anda untuk mengatakan:
GC lalu menghitung semuanya untuk Anda (termasuk di mana), dan, berdasarkan lokasi profil pengguna Anda, akan menjadi cerdas tentang apa yang dimaksud dengan 4/7: Makan malam di tempat Joe. Untuk pengeditan selanjutnya, kontrol kalender GC Bagus dan mudah digunakan. Pertimbangkan yang berikut ini dan betapa mudahnya bagi pengguna:
Dan ... SHOCK HORROR apa yang terjadi jika pengguna tidak tahu ?? Saya belum pernah melihat ini tetapi mengapa ini bukan entri tanggal yang dapat diterima untuk beberapa keadaan:
Saya tahu ini menakutkan :) Tapi Tog On Software Design , Bruce Tognazzini (penulis asli Apple Human Interface Guidelines) menggambarkan implementasi Pengalaman Pengguna agak seperti sulap trik: 'ilusi': terlihat mudah, tetapi di bawahnya, semua jenis kegilaan sedang terjadi.
Saya akan mendapatkan perangkat lunak untuk menempatkan pengingat 1d sebelum mengatakan 'hei, sekitar sekarang Anda ingin melakukan hal-hal'
Juga, gunakan konteks sebanyak yang dimiliki:
... jika Anda memiliki kontak atau grafik sosial, ini seharusnya mudah diketahui; jika tidak, tanyakan.
Saat memiliki rentang tanggal, pertimbangkan bahwa batas bulan benar-benar merepotkan untuk tampilan kalender yang hanya menampilkan satu bulan. iCal di Mac rapi dengan cara ini karena Anda dapat menunjukkan jumlah bulan sehingga Anda dapat dengan mudah memeriksa tanggal sebenarnya antara 'antara 2 dan 3 minggu dari sekarang'.
Saya biasanya hanya menggunakan kotak teks biasa dan menambahkan Jepery UI Datepicker ke dalamnya.
Ketika pengguna membawa fokus pada kotak teks dengan tab atau mengklik atau yang lain kontrol kalender muncul sementara di bawahnya - tanpa mengganggu input teks:
Pengguna kemudian dapat mengetik tanggal dalam format apa pun yang dapat diuraikan, atau menggunakan mouse dengan popup kalender. Memilih tanggal dengan mouse hanya akan mengetiknya di kotak teks dalam format situs yang disukai untuk pengguna dan menutup popup.
Untuk entri waktu saya menemukan sesuatu yang serupa dilakukan oleh seseorang yang saya lupa siapa tetapi dengan (12 atau 24) jam muncul di widget tabular, memilih satu jam kemudian muncul beberapa pilihan menit pilihan seperti 0, 15, 30 dan 45. sebelumnya, hanya mengetik waktu bekerja dengan baik, mengabaikan popup.
Juga, kontrol kalender dapat disetel untuk menampilkan lebih dari satu bulan pada satu waktu, saya biasanya menampilkannya 2-3 bulan di samping satu sama lain - tergantung pada konteks tanggal. Entri tanggal dalam kasus saya umumnya berkisar sekitar kuartal saat ini. Entri tanggal lahir tidak akan berfungsi dengan baik seperti yang sudah ditunjukkan seseorang ^^
Alternatif umum untuk beberapa drop-down atau widget adalah teks bantuan pemformatan standar. Terkadang Anda akan melihatnya di dalam bidang teks sebagai nilai default dan terkadang ke kanan/di bawah bidang. Teks default akan mengatakan sesuatu seperti "MM/DD/YYYY" atau "dd-mm-yyyy". Berikut ini contoh dari formulir pendaftaran Google:
Ini memberikan kontrol total pengguna tentang apa yang akan diinput, dan hanya menggunakan satu bidang teks. Satu kelemahan dari pendekatan ini adalah perlunya validasi sisi klien tambahan untuk memastikan mereka telah mengikuti konvensi tanggal yang tepat.
Pertanyaan pertama adalah berapa banyak bidang entri tanggal yang Anda miliki dalam aplikasi dan seberapa sering mereka digunakan.
Jika Anda harus memasuki hari kelahiran ketika Anda mendaftar dan hanya itu, yah, itu mungkin bukan prioritas utama bagi Anda.
Tetapi jika Anda memiliki banyak kencan, ada beberapa hal untuk dipertimbangkan yang belum dibicarakan orang lain:
Anda perlu menjaga format tanggal pilihan pengguna (saya tidak di AS, saya ingin tanggal saya dalam format DD/MM/YYYY, tanggal AS dengan bulan di awal sulit bagi saya untuk membaca dan Tipe).
Juga, pertimbangkan kontrol lain di sekitar bidang tanggal, jika itu adalah halaman yang dibangun sehingga pengguna berinteraksi dengannya dengan mouse Anda harus memiliki pemilih tanggal yang hanya dapat menjadi pengguna dengan mouse, di sisi lain jika Anda memiliki bidang teks sekitar tanggal pengguna mungkin dalam "mode mengetik" dan memaksa interaksi yang membutuhkan mouse (seperti beberapa drop-down) mungkin mengganggu.
Dan akhirnya, pengguna Anda bukan pengguna saya, Anda harus mengujinya, memberikan setengah pengguna bidang teks dan setengah kontrol kalender grafis, mengukur berapa banyak pengguna mengisi setiap formulir dan berapa banyak waktu yang dibutuhkan rata-rata setiap kelompok untuk mengisi formulir .
Jika cukup penting untuk terobsesi di sini, cukup penting untuk mengujinya.
Dua sen saya: Saya buta dan saya pikir yang terbaik adalah: 3 kotak kombo! Alternatif dapat berupa 2 kotak kombo selama berbulan-bulan dan berhari-hari dan sebuah teks input untuk tahun ini tetapi Anda harus melakukan kontrol pada bidang ini ... Jika saya harus berpikir sebagai programmer saya lebih suka teks input tunggal tetapi jika Anda berpikir bahwa di situs Anda bisa menjadi "pengguna noob" Saya pikir yang terbaik adalah pilihan pertama :)
Adapun kecepatan dan kemudahan penggunaan tidak ada yang mengalahkan entri numerik sederhana, mis. 2010-09-21. Gunakan kotak teks tunggal tetapi (selain dari umum "/" dan "-") juga menerima tab untuk berpindah dari satu bidang ke bidang berikutnya satu. Menekan "[tab]" harus memasukkan pemisah. Sebagai pemisah saya lebih suka tanda hubung, karena memisahkan bidang lebih jelas.
Jangan paksa orang mengetik angka nol di depan.
Saya tidak akan menggunakan entri teks seperti bulan disingkat seperti yang disarankan Bevan karena butuh waktu lebih lama untuk masuk. Juga, bagaimana Anda menyingkat? Tiga huruf? Empat? Seperti yang saya katakan dalam balasan saya kepada Bevan, itu ide yang sangat buruk jika Anda bekerja dengan audiens internasional; "September" mungkin bukan "September" dalam bahasa pengguna Anda.
Berbicara tentang pemirsa internasional: tidak semua orang menggunakan urutan MM-DD-YYYY (sebenarnya, di luar AS hampir tidak ada yang melakukannya). Anda dapat menunjukkan pesanan yang diperlukan di bawah kotak teks. Salah satu cara untuk menghindari ambiguitas tanggal seperti 5-06-201 adalah dengan menggunakan format ISO 8601 YYYY-MM-DD.
Berikan input teks di mana pengguna dapat mengetikkan tanggal bersama dengan petunjuk format apa yang dapat mereka gunakan, tetapi kemudian menerima format yang tidak ambigu terlepas dari pemisah atau jumlah digit. Ketika pengguna mengetik sesuatu selain dari format standar, segera perbarui ke format standar sehingga pengguna melihat persis bagaimana Anda menafsirkan tanggal dengan cara yang jelas. Menambahkan ikon kalender untuk memberikan pengguna yang menginginkan opsi untuk memilih dari kalender juga baik - pengguna yang ingin mengetikkan tanggal tidak harus menggunakannya.
Saya baru saja melakukan penelitian tentang ini. Aplikasi Kalender adalah tempat yang baik untuk memulai. Tata letak favorit saya adalah tanggal dengan waktu ke kanan. Saya tidak suka kalender Google Date - Time - Time - Format tanggal, tetapi datepicker dan drop down dijalankan dengan sangat jelas.
(Saya tidak bisa memposting gambar itu, tapi saya mendorong Anda untuk memeriksanya)