Bagikan melalui

Kontrol Putar

  • Artikel

Nota

Panduan desain ini dibuat untuk Windows 7 dan belum diperbarui untuk versi Windows yang lebih baru. Sebagian besar panduan masih berlaku pada prinsipnya, tetapi presentasi dan contoh tidak mencerminkan panduan desain kami saat ini .

Dengan kontrol putaran, pengguna dapat mengklik tombol panah untuk mengubah nilai secara bertahap dalam kotak teks numerik terkait. Kotak putar istilah mengacu pada kombinasi kotak teks dan kontrol putar terkait.

cuplikan layar kontrol putar dan kotak teks

Kotak putar biasa.

Pengguna sering lebih suka kontrol spin karena mereka dapat membuat perubahan tanpa menggerakkan tangan mereka dari mouse. Saat kontrol putar dipasangkan dengan kotak teks, pengguna dapat mengetik atau menempelkan input langsung di kotak teks, sehingga penggunaan kontrol putar bersifat opsional.

Meskipun kontrol spin digunakan untuk input numerik, input tidak harus berupa bilangan bujur murni. Input dapat berupa angka desimal dan dapat memiliki tanda negatif, pemisah (seperti titik dua atau tanda hubung), dan pengubah unit.

Nota

Panduan yang terkait dengan kotak teks dan tata letak disajikan dalam artikel terpisah.

 

Apakah ini kontrol yang tepat?

Untuk memutuskan, pertimbangkan pertanyaan-pertanyaan ini:

  • Apakah kontrol digunakan untuk input numerik? Jika tidak, gunakan kontrol lain, seperti daftar drop-down atau penggeser , untuk memilih dari sekumpulan nilai tetap. Gunakan bilah gulir untuk menggulir.

  • Apakah pengguna menganggap nilai sebagai kuantitas relatif, bukan nilai numerik? Jika demikian, gunakan slider sebagai gantinya. Gunakan kotak putar hanya untuk nilai numerik yang tepat dan diketahui. Misalnya, pengguna berpikir untuk mengatur volume audio mereka ke rendah atau sedang—bukan tentang mengatur nilai ke 2 atau 5.

  • Apakah kontrol dipasangkan dengan kotak teks? Jika tidak, jangan gunakan. Kontrol putar tidak boleh digunakan sendiri atau dengan jenis kontrol lain selain kotak teks.

    Salah:

    cuplikan layar kontrol putar, grafik, tanpa kotak teks

    Dalam contoh ini, kontrol spin digunakan untuk mengontrol grafik dinamis.

  • Apakah rentang nilai yang bersebelahan valid? Jika tidak, gunakan daftar drop-down nilai yang valid sebagai gantinya.

    cuplikan layar daftar drop-down

    Dalam contoh ini, tidak semua nomor drive disk valid, sehingga daftar drop-down adalah pilihan yang lebih baik.

  • Apakah menggunakan kontrol spin praktis? Menggunakan kontrol putaran praktis untuk:

    • Memasukkan angka kecil, biasanya di bawah 100.
    • Membuat perubahan kecil pada nilai yang sudah ada atau default.

    Meskipun kontrol spin dapat digunakan untuk input numerik apa pun, kontrol putar tidak efisien dalam situasi selain ini.

  • Apakah kontrol putaran membantu? Apakah kontrol digunakan dalam konteks di mana pengguna kemungkinan akan menggunakan mouse mereka? Jika tidak, pertimbangkan kontrol putar opsional.

  • Apakah daftar drop-down kontrol saudara? Jika ada daftar drop-down lainnya, pertimbangkan untuk menggunakan daftar drop-down untuk konsistensi.

    cuplikan layar kotak dialog dengan daftar drop-down

    Dalam contoh ini, kotak putar dapat digunakan, tetapi daftar drop-down digunakan untuk konsistensi.

  • Apakah pengguna sentuh atau pena menjadi target utama? Jika demikian, pertimbangkan untuk menggunakan daftar drop-down sebagai gantinya. Tombol panah dalam kontrol putar terlalu kecil untuk digunakan secara efisien dengan sentuhan atau pena.

Jika penggeser atau kotak putar dimungkinkan, gunakan kotak putar jika:

  • Ruang layar ketat.
  • Pengguna cenderung lebih suka menggunakan keyboard.

Gunakan pengguncur jika:

  • Pengguna akan mendapat manfaat dari umpan balik instan.

Pedoman

Umum

  • Gunakan kontrol spin setiap kali praktis dan bermanfaat. Lihat Apakah ini kontrol yang tepat?

    • Pengecualian: Agar konsisten dengan kotak teks lain pada antarmuka pengguna (UI) yang sama, gunakan kontrol putar meskipun tidak selalu praktis.

    Benar:

    cuplikan layar kontrol spin bulan, hari, tahun

    Dalam contoh ini, kontrol spin digunakan dengan kontrol tahun untuk konsistensi, meskipun tidak selalu praktis.

    Salah:

    cuplikan layar kontrol putar alamat ip

    Dalam contoh ini, kontrol spin tidak dapat digunakan.

  • Selalu buat kontrol putaran "buddy" dari kotak teks. Melakukannya menempatkan kontrol putaran di dalam kotak teks.

    Benar:

    cuplikan layar kontrol putar ditempatkan di dalam kotak teks

    Salah:

    cuplikan layar kontrol putar ditempatkan di luar kotak teks

    Dalam contoh yang benar, kontrol putar ditempatkan di dalam kotak teks terkait.

  • Nonaktifkan kontrol putar saat kotak teks terkait dinonaktifkan. Kontrol spin adalah metode input tambahan—tidak pernah satu-satunya metode input.

Nilai

  • Tentukan tombol atas untuk meningkatkan nilai satu unit dan tombol bawah untuk mengurangi satu unit. Biasanya, unit adalah satu, tetapi harus menjadi perubahan umum terkecil dalam nilai. Idealnya, kontrol spin harus mencakup semua nilai yang valid, dan harus lebih nyaman daripada mengetik dalam teks.

    cuplikan layar kontrol putar 'margin'

    Dalam contoh ini, mengklik kontrol putar mengubah nilai dengan .1, yang merupakan perubahan umum terkecil dalam nilai. Menggunakan unit yang lebih kecil akan mencakup rentang nilai yang valid tetapi membuat kontrol spin tidak dapat digunakan.

  • Gunakan kontrol putar untuk membatasi input ke nilai yang valid. Menggunakan kontrol spin tidak boleh menghasilkan nilai yang salah.

  • Di akhir rentang nilai yang valid, mulai ulang rentang. Metafora kontrol spin adalah bahwa pengguna memutar roda nilai, oleh karena itu perilaku seperti roda ini.

    • Pengecualian: Jangan mulai ulang rentang jika nilai yang dihasilkan dipastikan salah.

      cuplikan layar 'jumlah salinan' spin control

      Dalam contoh ini, mengklik tombol panah bawah tidak memulai ulang rentang (dengan masuk ke nilai maksimum) karena nilai tersebut dipastikan salah.

  • Gunakan teks alih-alih nilai numerik khusus. Izinkan pengguna untuk memutar ke nilai-nilai khusus ini alih-alih harus mengetahuinya dan mengetiknya.

    cuplikan layar 'tidur setelah (tidak pernah)' spin control

    Dalam contoh ini, Tidak pernah adalah nilai khusus tetapi pengguna dapat memutarnya.

  • Jika nilai memiliki pemisah, kotak teks terkait harus memiliki beberapa titik fokus input. Melakukannya memungkinkan segmen numerik dimanipulasi secara individual.

    cuplikan layar kontrol putar waktu, menit dipilih

    Dalam contoh ini, kontrol spin memengaruhi nilai untuk jam, menit, detik, dan A.M./P.M.—mana pun yang memiliki fokus.

  • Jika nilai memiliki unit, gunakan kontrol putar untuk mengubah unit tersebut juga.

    cuplikan layar kontrol putar waktu, 'a.m.' dipilih

    Dalam contoh ini, kontrol spin dapat digunakan untuk mengubah unit.

Label

  • Terapkan pelabelan kotak teks panduan untuk memberi label pada kotak teks terkait. Kontrol putaran tidak pernah diberi label secara langsung.

Dokumentasi

Jika mengacu pada kontrol spin:

  • Jangan merujuk ke kontrol putar dalam dokumentasi pengguna. Sebagai gantinya, lihat label kotak teks terkait.
  • Lihat kontrol putaran dan kotak putar hanya dalam pemrograman dan dokumentasi teknis lainnya.

Contoh: Dalam kotak Tanggal, ketik atau pilih bagian tanggal yang ingin Anda ubah.

Glosarium