it-swarm.asia

Mengapa Radio Buttons tidak mengisi seluruh lingkaran luar?

Pertanyaan saya sederhana:

Mengapa sebagian besar tombol radio tidak mengisi seluruh lingkaran luarnya?

Contoh tombol radio standar:

Example of standard radio button

(Tidak biasa) Contoh tombol radio yang terisi penuh:

enter image description here

Apakah ini untuk alasan skeuomorfik atau sesuatu yang sama sekali berbeda?

Pertanyaan Bonus: Apakah pernah dapat diterima dalam antarmuka atau sistem desain untuk menggunakan tombol radio yang terisi penuh?

47
RobbyReindeer

Tidak sepenuhnya jelas bahwa lingkaran hitam berarti "ya" atau dipilih, sedangkan lingkaran putih berarti "tidak" atau tidak dipilih. Bergantung pada apa yang oleh pengguna dianggap sebagai latar depan dan latar belakang, itu bisa berjalan baik. Pertimbangkan contoh ini (agak dibuat-buat):

Simply a black and white circle on a gray background

Yang mana yang dipilih? Yang "menyala" seperti cahaya? Atau yang “penuh dengan tinta”?

Ada asumsi implisit bahwa yang dipilih harus menyertakan grafik penambahan dari sesuatu. Demikianlah penambahan lingkaran di dalam lingkaran. Mungkin juga berpikir dengan analogi dengan kotak centang, di mana Anda menambahkan tanda centang ke kotak untuk menunjukkan pilihan.

Ini "bekerja" bahkan ketika kita mematahkan standar dan membalikkan warna:

White filled circle for selected

Ini menyiratkan itu juga berfungsi ketika pengguna tidak tahu warna, sesuatu yang penting terutama hari ini ketika kita tidak terbatas pada skala abu-abu. Untuk alasan ini, selain itu hanya menjadi non-standar, saya akan selalu menghindari tombol radio yang terisi penuh.

Secara pribadi, saya pikir istilah "tombol radio" merujuk secara metaforis pada perilaku (bahwa itu adalah satu dari banyak pilihan), bukan pada penampilan. Faktor historis lainnya mungkin telah menentukan penampilan umum . Pada saat GUI ditemukan pada 1970-an dan 1980-an, tombol radio yang paling umum adalah preset di radio mobil. Meskipun saya yakin Anda dapat menemukan pengecualian (saya punya), ini umumnya (1) persegi panjang, tidak melingkar, dan (2) tidak tidak menunjukkan keadaan yang dipilih –sekali ditekan, mereka muncul kembali, dan tidak menunjukkan bendera atau lampu mekanis. Jadi saya tidak berpikir skeuomorfisme ada hubungannya dengan itu.

97
Michael Zuschlag

Saya kira tombol radio yang sepenuhnya penuh dapat dengan mudah dikacaukan dengan teks berpoin:

enter image description here

Sedangkan lingkaran kosong secara perseptual memberikan perasaan tidak lengkap: perlu diisi atau harus diisi:

enter image description here

Bahkan dalam banyak kasus salah satu cincin ini sudah terisi, yang meningkatkan perasaan bahwa cincin itu harus diisi (dicentang):

enter image description here

34
Danielillo

Saya akan mempertimbangkan aksesibilitas sebagai salah satu alasan gaya tombol radio ini selain tombol fisik asalnya.

Ketika sebuah tombol terisi penuh, Anda mengandalkan warna tombol untuk menandakan statusnya. Ini bisa membingungkan banyak orang, terutama ketika menggunakan warna yang tidak standar.


Radio button styles

Di baris pertama gambar, salah satu gambar itu sendiri tidak menyampaikan informasi mengenai keadaan tombol. Mungkin dengan hitam dan putih Anda bisa menganggap negara tetapi ini akan gagal untuk warna lain.

Pada baris kedua gambar, keadaan lingkaran dalam dengan jelas menunjukkan apa keadaan tombol itu.

30
Sinstein

Tombol radio terinspirasi oleh tombol radio fisik (cukup jelas). Tombol muncul dari bingkai atau "3d". Saya akan menganggap ini sebagai penanda. Penanda-penanda itu menuju antarmuka pertama. Praktis tombol yang keluar dari bingkai yang ketika ditekan akan membatalkan semua tombol yang ditekan lainnya.

Sampai hari ini, tombol radio juga harus dikenali bahkan setelah dicentang. Jadi memilikinya sesuai dengan "standar" adalah yang terbaik. Meskipun saya telah melihat contoh tombol radio seperti contoh Anda dan di dalam konteks saya memang mengidentifikasi mereka sebagai tombol radio untuk beberapa pengguna mungkin menyebabkan beberapa kebingungan atau mungkin tidak tetapi beberapa pengujian pengguna mungkin diperlukan.

22
Cristian Negraia

Ini adalah artikel yang bagus tentang sejarah tombol radio: https://www.jitbit.com/alexblog/242-the-history-of-a-radio-button/

Seperti yang dikatakan dalam artikel:

Tombol radio dinamai sesuai tombol aktual yang digunakan pada radio lama untuk beralih di antara gelombang radio dan, kadang-kadang, frekuensi yang telah ditentukan. Ketika sebuah tombol ditekan, semua tombol lainnya akan menyembul keluar.

Jadi, itu adalah alasan skeuomorfik.

Saya percaya tombol radio yang terisi penuh akan membingungkan pengguna, berdasarkan pada prinsip "Pertandingan Antara Sistem dan Dunia Nyata". Ini menyatakan bahwa:

Antarmuka yang mengikuti konvensi dunia nyata dan membuat informasi muncul dalam urutan alami dan logis menunjukkan empati dan pengakuan bagi pengguna.

Pengguna terbiasa dengan tombol radio dalam format ini di situs web lain, jadi kecuali Anda memiliki alasan yang bagus untuk mengubahnya, saya pikir Anda harus menggunakan standar.

16
Aline

Karena jika tombol radio yang dicentang akan terisi penuh, akan membingungkan untuk mengetahui tombol mana yang sebenarnya dipilih, terutama jika hanya ada 2 tombol radio. Anda bisa dengan mudah mengira tombol "diisi putih" aktif daripada "pingsan".

7
kajacx

Sementara jawaban lain cukup valid, saya pikir mereka kehilangan titik kunci: tombol radio yang sepenuhnya terisi tidak akan terlihat pada latar belakang hitam. Memiliki warna bergantian pada item yang dipilih mencegah hal ini dengan menyebabkan kontras terpaksa di dalam tombol radio.

2
Kgee

Ini bukan jawaban langsung untuk pertanyaan Anda tetapi beberapa informasi menarik tentang subjek secara keseluruhan.

Skeumorphism adalah aspek dari Interaksi Komputer Manusia - ini adalah pilihan desain yang menghubungkan objek dunia nyata dengan fungsi yang diketahui dengan objek digital dengan fungsi serupa. Ini biasanya berhasil karena orang mengembangkan model mental untuk bagaimana sesuatu beroperasi sehingga ketika kita mereproduksi item secara digital dengan fungsi yang serupa, tujuannya disampaikan secara otomatis.

Model mental untuk tombol radio adalah bahwa tombol radio dapat ditekan untuk membuat pilihan tunggal. Dari pengertian ini, multi-pilihan dicadangkan untuk kotak centang karena model mentalnya adalah bahwa tanda centang di sebelah item dalam daftar menunjukkan pilihan.

Ada beberapa masalah dengan mengandalkan skeumorphsim dan model mental, seperti, bagaimana jika pengguna Anda belum pernah menemukan tombol radio di dunia nyata? Dalam hal ini mereka tidak akan memiliki model mental bagaimana cara kerjanya. Ini menjadi semakin mungkin karena beberapa item dunia nyata yang digunakan sebagai pangkalan untuk berbagai konstruksi digital berasal dari tahun 1960-an dan 1970-an. Inilah yang saya pikir Anda menyentuh; Apakah tombol radio objek yang tepat untuk digunakan sebagai dasar skeumorphism untuk satu item yang dipilih dari daftar hari ini? Mungkin.

Meskipun orang kurang mungkin untuk melakukan kontak dengan radio lama, prevalensi penyeleksi tombol radio dalam bentuk digital telah memberi kebanyakan orang model mental dari fungsi mereka. Seperti disebutkan dalam jawaban lain, desain yang baik harus dapat menunjukkan pilihan mana yang dibuat oleh dua pengguna dengan model mental yang berbeda. Dengan demikian, tombol radio tidak harus menjadi dasar untuk pemilihan jenis ini. Ingatlah bahwa melawan mayoritas model mental orang bisa menjadi perjuangan. Pengujian pengguna dapat membantu Anda mengidentifikasi jika perubahan yang Anda sarankan akan diterjemahkan dengan baik ke audiens yang Anda tuju. Beberapa kemajuan bagus dalam desain telah terjadi karena seseorang bersedia untuk mencoba pendekatan baru dan mengasah desain mereka melalui pengujian.

2
AxGryndr

Saya ingat pernah melihat radio dengan tombol mekanis di mana ada indikator visual yang menunjukkan tombol mana yang ditekan. Yang saya ingat memiliki tombol hitam, dan di dalamnya ada bagian yang bergerak, berbentuk seperti semacam paruh yang terbuka ketika tombol ditekan menunjukkan indikator putih di tengah bagian atas tombol. Ini terlihat sama dengan ilustrasi Anda, hanya dengan warna terbalik.

0
user124640