Pengantar
Menyelesaikan kuesioner adalah tugas inti bagi sebagian besar petugas kesehatan yang menggunakan aplikasi kesehatan seluler.
Entri data bisa menjadi sulit dan kesalahan bisa terjadi. Tujuan kami terkait library Structured Data Capture (SDC) dan panduan desain adalah untuk memberdayakan Anda guna meningkatkan pengalaman pengguna entri data dan kualitas data yang diambil.
Empat tema yang dibahas dalam bagian ini adalah:
Tata letak & navigasi
Scroll panjang & tata letak paginasi
Android FHIR SDK memiliki dua opsi tata letak yang dapat Anda pilih:
- Scroll lama (default)
- Dengan penomoran halaman
Kuesioner scroll panjang menampilkan semua pertanyaan di satu halaman dan pengguna dapat membuka setiap pertanyaan dengan men-scroll.
Kuesioner paginasi akan menampilkan konten di halaman terpisah. Pertanyaan terkait atau kolom input dapat dikelompokkan bersama dalam satu halaman. Tombol Kembali dan berikutnya ditambatkan di bagian bawah halaman untuk berpindah antar-halaman.
Pelajari cara membuat nomor kuesioner di GitHub
Tata letak mana yang harus Anda pilih?
Setiap opsi tata letak memiliki kelebihan dan kekurangan. Berikut adalah beberapa atribut dari setiap jenis tata letak yang perlu dipertimbangkan saat Anda membuat pilihan tata letak mana yang akan digunakan.
| Scroll panjang | Dengan penomoran halaman | |
|---|---|---|
| Kecepatan navigasi | Lebih cepat untuk dijelajahi | Lebih lambat untuk dinavigasi |
| Akurasi navigasi | Navigasi yang kurang akurat | Navigasi yang lebih akurat |
| Fokus kembali pada pertanyaan setelah beralih tugas | Sulit untuk diubah setelah gangguan | Lebih mudah untuk diubah setelah terjadi gangguan |
| Melengkapi kuesioner digital setelah kunjungan (menyalin dari kertas) | Lebih mudah saat menyalin dari kertas | Lebih sulit saat menyalin dari kertas |
| Layar kecil | Lebih buruk untuk layar kecil | Lebih baik untuk layar kecil |
| Aksesibilitas | Lebih buruk untuk aksesibilitas. Sulit dinavigasi. | Lebih baik untuk aksesibilitas. Layar terpisah yang dapat ditangani oleh pembaca layar, text-to-speech, dan teknologi lainnya. |
| Ruang untuk petunjuk dan penjelasan | Lebih buruk untuk panduan dan petunjuk | Lebih baik untuk panduan dan petunjuk |
Scroll panjang
Beri nomor pertanyaan untuk mempermudah navigasi dalam tata letak satu halaman.
Perkecil ukuran font judul pertanyaan saat menggunakan scroll lama, sehingga lebih banyak konten yang terlihat di layar. Contoh: Scroll panjang adalah 16 piksel. Penomoran halaman adalah 28px.
Penomoran halaman
Keyboard, dropdown, dan komponen lainnya memenuhi ruang di halaman, jadi targetkan satu pertanyaan per halaman.
Konten harus terlihat di paruh atas.
Contoh: Ketiga kolom teks ini semuanya terkait dengan info kontak alternatif, sehingga dikelompokkan bersama dalam satu halaman.
Hindari pengelompokan konten yang tidak terkait di satu halaman, untuk menghindari kebingungan.
Indikator progres
Indikator progres mencerminkan progres yang dibuat dalam kuesioner.
Sertakan indikator progres pada kuesioner yang panjang untuk membantu pengguna menavigasi dan melihat progres. Indikator progres menampilkan lokasi dalam kuesioner, dan berapa banyak lokasi yang masih perlu diselesaikan.
Posisi di atas pertanyaan dan anchor agar selalu terlihat bahkan saat men-scroll.
Dapat diposisikan di bagian bawah, di atas tombol kembali dan berikutnya. Dengan tata letak ini, Anda juga dapat menampilkan halaman yang sedang dibuka oleh pengguna.
Tombol Navigasi
Tombol navigasi (kembali, berikutnya) ditambatkan di bagian bawah kuesioner. Dalam scrolling tanpa batas atau di halaman terakhir kuesioner yang diberi nomor halaman, tombol berikutnya diberi label Kirim.
Tempatkan tombol di lokasi yang konsisten dan selalu gunakan tombol aktif yang dilabeli dengan tindakannya, seperti kembali dan berikutnya.
Selalu tampilkan tombol aktif, meskipun formulir tidak lengkap. Setelah mengetuk berikutnya, tampilkan dialog pop-up yang berisi petunjuk untuk melengkapi kolom yang tidak ada atau error validasi.
Tombol yang tidak aktif akan menyulitkan pengguna untuk mengetahui cara memperbaiki masalah.
Hindari tombol hanya ikon. Selalu beri label tombol dengan tindakan deskriptif.
Pertanyaan & petunjuk
- Judul kuesioner.
- Indikator kemajuan.
- Header grup.
- Judul pertanyaan.
- Petunjuk.
- Kolom input.
- Format entri.
- Kolom wajib diisi.
- Bantuan.
Header grup
Header grup adalah header teks yang ditampilkan di atas judul pertanyaan.
Gunakan header grup untuk mengelompokkan pertanyaan serupa. Hanya gunakan header grup saat menambahkan informasi yang bermanfaat.
Gunakan judul singkat untuk mengelompokkan pertanyaan serupa. Contoh: semua pertanyaan yang terkait dengan riwayat pasien dikelompokkan.
Hindari judul rumit atau judul panjang yang melampaui satu baris.
Judul pertanyaan
Judul pertanyaan menjelaskan secara ringkas informasi yang diminta. Judul pertanyaan memiliki ukuran font terbesar pada halaman untuk menarik perhatian pengguna ke pertanyaan tersebut.
Setiap halaman atau pertanyaan harus memiliki judul pertanyaan. Jaga agar judul pertanyaan tetap singkat atau jadikan sebagai pertanyaan.
Judul yang pendek memudahkan pengguna untuk membaca.
Hindari pertanyaan yang sangat panjang atau menumpuk dua pertanyaan secara bersamaan.
Selalu sertakan judul pertanyaan untuk memudahkan pengguna mengetahui informasi apa yang perlu dimasukkan.
Petunjuk
Petunjuk adalah kolom teks opsional yang ditampilkan di bawah judul pertanyaan.
Gunakan kolom instructions untuk menjelaskan petunjuk yang relevan seperti apakah pertanyaan diperlukan, berapa banyak pilihan yang dapat dilakukan (satu atau banyak), dan tindakan yang harus dilakukan pengguna jika tidak dapat menyelesaikan semua info atau menjawab pertanyaan.
Gunakan kolom petunjuk untuk memberitahukan apakah sebuah pertanyaan diperlukan dan berapa banyak pilihan yang dapat dilakukan.
Gunakan petunjuk untuk memberi tahu pengguna apa yang harus dilakukan jika mereka mengalami skenario seperti mereka tidak dapat menyelesaikan semua kolom.
Gunakan petunjuk untuk memberikan konteks atau definisi tambahan untuk istilah yang digunakan dalam judul pertanyaan.
Teks label
Teks label memberi tahu pengguna tentang informasi yang diminta untuk kolom teks atau dropdown. Saat kolom dipilih, teks label akan berpindah dari tengah kolom teks ke atas.
Setiap kotak kolom teks dan dropdown harus memiliki label. Teks label harus singkat, jelas, dan terlihat sepenuhnya.
Teks label harus singkat, jelas, dan terlihat sepenuhnya.
Teks label tidak boleh terlalu panjang, terpotong, atau membutuhkan beberapa baris.
Selalu beri label kolom teks agar pengguna tahu informasi yang harus dimasukkan.
Format entri
EntryFormat ditampilkan di bawah kolom teks untuk memberi tahu pengguna tentang data format tertentu yang harus dimasukkan. Pesan error akan ditampilkan di kolom EntryFormat dan mengganti petunjuk EntryFormat yang ada.
Gunakan EntryFormat untuk tanggal, nomor telepon, unit, dan bilangan bulat.
Tampilkan format tanggal di bawah kolom dan sertakan frasa deskriptif.
Tidak menampilkan format data dapat menyebabkan data yang dimasukkan salah.
Saat memasukkan rentang medis, berikan contoh rentang normal. Hal ini dapat membantu pengguna mengetahui error atau angka yang berada di luar rentang.
Kolom wajib diisi
Kolom wajib diisi menunjukkan bahwa pengguna harus melengkapi kolom dan diblokir agar tidak dapat melanjutkan hingga kolom selesai.
Untuk menunjukkan bahwa suatu kolom wajib diisi, tampilkan tanda bintang (*) di akhir judul pertanyaan. Sertakan 'pertanyaan wajib' di kolom petunjuk karena tidak semua orang mengetahui arti tanda bintang (*). Jika tidak ada judul pertanyaan, tampilkan tanda bintang (*) di teks label.
Tampilkan kolom yang wajib diisi dengan tanda bintang (*) dan sertakan petunjuk tertulis yang menunjukkan `pertanyaan wajib.` Banyak yang tidak memahami arti tanda bintang(*) dan akan mendapatkan manfaat dari penjelasan tersebut.
Hindari hanya menampilkan tanda bintang (*) tanpa deskripsi tertulis apa pun tentang artinya.
Gunakan istilah yang paling dipahami pengguna. Contoh: "Wajib" mungkin merupakan istilah yang lebih umum dan digunakan di beberapa negara, bukan "Wajib".
Jika sebagian besar pertanyaan diperlukan, tunjukkan pertanyaan mana yang opsional.
Jika tidak ada judul pertanyaan, tampilkan tanda bintang dalam teks label.
Bantuan
Ikon bantuan akan ditampilkan di samping judul pertanyaan. Setelah mengetuk ikon, kotak informasi bantuan akan muncul dengan informasi tambahan. Mengetuk ikon lagi akan menutup kotak informasi bantuan.
Ini merupakan komponen opsional. Gunakan opsi ini hanya jika berguna untuk menampilkan informasi tambahan yang tidak perlu selalu terlihat.
Gunakan bantuan untuk informasi yang mungkin hanya perlu dilihat sekali oleh pengguna atau yang memberikan informasi tambahan.
Hindari menyembunyikan petunjuk di dalam kotak Bantuan yang harus dapat dilihat oleh semua orang.
Pengambilan data
Kapan harus menggunakan komponen yang mana?
| Jenis entri data | Pilihan boolean | Pilihan tunggal | Pilihan ganda | Buka pilihan | Drop-down | Pemilih tanggal | Kolom teks | Penggeser | Pengisian otomatis |
|---|---|---|---|---|---|---|---|---|---|
| Pilih Ya atau Tidak | |||||||||
| Pilih 1 opsi | hati-hati |
||||||||
| Memilih beberapa opsi | hati-hati |
||||||||
| Teks | |||||||||
| Tanggal | |||||||||
| Numbers | hati-hati |
Kolom teks
Kolom teks menunjukkan bahwa pengguna dapat memasukkan informasi.
Gunakan kolom teks saat seseorang perlu memasukkan teks ke kuesioner, seperti nama, nomor telepon, atau alamat. Membatasi entri data yang memerlukan entri teks (keyboard) saat pilihan yang telah terisi sebelumnya (pilihan ganda atau pilihan tunggal) dapat digunakan.
Pelajari lebih lanjut kolom teks di material.io
Gunakan kolom teks untuk entri data yang memerlukan pengetikan kata atau angka yang unik.
Hindari penggunaan respons teks bebas jika dapat berupa pilihan ganda, dropdown, atau pilihan satu pilihan.
Pilihan tunggal & pilihan boolean
Pilihan tunggal dan pilihan boolean adalah kontrol pemilihan yang muncul sebagai tombol pilihan saat pengguna diminta memilih satu pilihan dari opsi.
Gunakan boolean choice jika ada pilihan biner 'Ya' atau 'Tidak'. Jika tidak, gunakan komponen pilihan tunggal. Jika ada lebih dari ~10 opsi dalam daftar, gunakan dropdown, bukan pilihan tunggal. {i>Dropdown <i}lebih padat dan lebih mudah dinavigasi ketika ada banyak opsi.
Gunakan pilihan Boolean jika opsinya 'ya' dan 'tidak'.
Gunakan satu pilihan saat pengguna dapat memilih satu opsi dalam daftar.
Hindari pilihan tunggal untuk daftar yang sangat panjang (10+). Sebagai gantinya, gunakan menu dropdown.
Pemilih tanggal
Pemilih tanggal memungkinkan pengguna memasukkan tanggal melalui alat pilih tanggal kalender dan keyboard. Pemilih tanggal kalender diaktifkan saat ikon kalender diketuk.
Gunakan pemilih tanggal kalender hanya untuk tanggal yang dekat dengan tanggal hari ini seperti periode menstruasi terakhir atau kunjungan berikutnya. Jika tidak, prioritaskan entri keyboard untuk tanggal seperti tanggal lahir.
Untuk memasukkan tanggal, aktifkan entri keyboard (kotak teks mengetuk) dan pemilih tanggal kalender (ikon mengetuk).
Hindari mengaktifkan pemilih tanggal kalender sebagai satu-satunya metode input untuk tanggal lahir. Menavigasi ke bulan dan tahun sulit.
Drop-down
Menu dropdown memungkinkan pengguna membuat pilihan dari beberapa opsi. Saat pengguna mulai mengetik, opsi memfilter berdasarkan apa yang dimasukkan. Hal ini dapat membantu pengguna menemukan opsi yang tepat dengan cepat dari daftar besar.
Menu Dropdown adalah alternatif yang bagus untuk pilihan tunggal jika daftar opsi sangat panjang (10+ opsi) karena memerlukan lebih sedikit ruang.
Gunakan menu dropdown saat memilih satu opsi dalam daftar opsi yang sangat panjang, seperti memilih negara bagian atau kota.
Hindari menggunakan menu dropdown karena akan lebih mudah untuk memasukkan konten daripada men-scroll semua opsi, seperti usia.
Pilihan ganda
Pilihan ganda adalah kontrol pemilihan yang muncul sebagai kotak centang saat pengguna dapat membuat beberapa bagian dari daftar opsi.
Gunakan pilihan ganda jika pengguna hanya dapat memilih dari daftar opsi yang telah ditentukan. Jika pengguna juga dapat menambahkan respons bebas mereka sendiri, gunakan komponen pilihan terbuka. Di kolom instructions, tulis "Pilih semua yang sesuai" agar pengguna tahu bahwa mereka dapat memilih beberapa opsi.
Tampilan default-nya adalah penampung di sekitar kotak centang untuk memperjelas area yang dapat diketuk.
Hindari menampilkan beberapa opsi per baris, karena variasi ukuran layar ponsel dan ukuran teks, teks dapat terpotong.
Buka pilihan
Pilihan terbuka mirip dengan pilihan ganda, tetapi menambahkan kemampuan bagi pengguna untuk memilih Lainnya dan mengetik teks bebas.
Gunakan pilihan terbuka jika ada daftar opsi yang telah ditetapkan sebelumnya, tetapi pengguna juga dapat menambahkan opsi tambahan. Gunakan pilihan terbuka ketika sebagian besar opsi diketahui, tetapi Anda memperkirakan beberapa pengguna akan memilih Lainnya karena tidak ada opsi yang disediakan yang berlaku.
Gunakan jika data yang akurat harus dikumpulkan dan tidak ada opsi yang berlaku. Contoh: pekerjaan.
Hindari penggunaan jika sebagian besar respons mengharuskan untuk memilih Lainnya. Dalam hal ini, gunakan kolom teks atau kolom paragraf.
Penggeser
Penggeser memungkinkan pengguna membuat pilihan dari rentang nilai. Penggeser di Android FHIR SDK adalah penggeser terpisah. Penggeser diskrit memungkinkan pengguna untuk memilih nilai tertentu dari rentang yang telah ditentukan. Tanda centang dapat digunakan untuk menunjukkan nilai yang tersedia. Hindari menggunakan penggeser untuk entri data numerik. Sebagai gantinya, gunakan kolom teks atau menu dropdown.
Pelajari penggeser di material.io lebih lanjut
Hindari penggunaan penggeser untuk nilai tertentu saat rentangnya besar. Gunakan kolom teks dengan entri keyboard.
Validasi dan error data
Validasi data
Validasi data membatasi jenis data atau nilai yang dapat dimasukkan dalam kolom teks. Validasi data dapat meningkatkan kualitas data yang dikumpulkan.
Gunakan kolom EntryFormat untuk menampilkan batasan format atau nilai. Tampilkan pesan error validasi data yang bermakna secara inline dan segera agar pengguna dapat memperbaiki error tersebut.
Tampilkan batasan validasi data di awal agar pengguna tahu cara memasukkan data.
Tanpa menampilkan jumlah digit yang diperlukan untuk nomor telepon, pengguna mungkin mengalami error dan prosesnya akan memerlukan waktu lebih lama.
Tampilkan error validasi data yang signifikan segera setelah mengisi kolom. Pesan error menggantikan teks format entri yang ada.
Jangan tunggu hingga pengguna menekan "kirim" untuk menampilkan error validasi untuk pertama kalinya.
Error
Pesan error memperingatkan pengguna saat terjadi kesalahan dan menyampaikan cara memperbaiki masalah tersebut.
Menggunakan warna, ikonografi, dan teks untuk mengkomunikasikan kesalahan.
Pelajari lebih lanjut pesan error di material.io
Jelaskan penyebab terjadinya error (pertanyaan wajib) dan tindakan yang dapat dilakukan untuk memperbaikinya (pilih salah satu.)
Pesan error yang hanya menyatakan "error" tidak berguna bagi pengguna untuk mengetahui cara memperbaiki error.
Contoh: "Format tanggal salah. Formatnya harus dd/mm/yyyy".
Jangan menyalahkan pengguna dengan pesan error yang menyertakan "Anda". Contoh: "Anda memasukkan format tanggal yang salah."
Gunakan warna, ikonografi, dan teks untuk memberi tahu pengguna bahwa terjadi error.
Untuk mendukung gangguan penglihatan umum seperti buta warna merah-hijau, hindari mengandalkan warna saja untuk menyampaikan error.
Satu ikon sudah cukup. Jangan berlebihan pada penggunaan ikon untuk mengomunikasikan error.