Bulat atau persegi? Itu pertanyaannya.

Apakah saya perlu mengubah tombol runcing yang biasa menjadi yang membulat? Mana yang lebih baik untuk kegunaan? Bagaimana kita membuat keputusan seperti itu?

Persisnya masalah seperti itulah yang akan Anda temui ketika terbenam di UX terkait dengan tombol bulat di aplikasi. Kita sudah tahu bahwa ukuran, kontras, dan bayangan cor sendiri dapat membuat tombol terlihat, tetapi menemukan keseimbangan yang tepat untuk elemen aksi utama dan sekunder tidak selalu mudah. Kebundaran dalam kasus ini mungkin datang untuk menyelamatkan.

Variabel yang digunakan untuk meningkatkan visibilitas

Apakah pembulatan meningkatkan pengakuan?

Elemen bulat lebih mudah dibaca. Lebih mudah untuk menghitung jumlah kartu secara berurutan jika sudutnya tidak tajam.

Elemen bulat lebih mudah dikenali daripada tajam

Ini karena kebulatan yang dapat dibedakan lebih baik membantu mata kita dengan cepat membedakan antara kartu itu sendiri. Sebaliknya, kartu dengan sudut tajam terlihat bersatu dan seragam, yang membuat pengakuannya sulit.

Dalam tata letak grid, pembulatan bekerja lebih baik.

Misalnya, di dashboard TurboTax, mata menempel pada elemen dengan sudut bulat di bagian atas lebih baik daripada bagian tengah, di mana kartu memiliki sudut tajam.

Dashboard Turbotax

Apakah saya perlu menggunakan tombol bulat penuh?

Tombol sepenuhnya bulat terlihat bagus di antarmuka di mana ada ruang kosong yang cukup. Contoh pengaturan yang sangat sukses dari tombol-tombol tersebut adalah Spotify, di mana ajakan untuk bertindak dirasakan dengan baik.

Tombol bulat di Spotify

Secara umum, dalam contoh khusus ini, karena bekerja dengan Spotify selalu berujung pada pemutaran (trek, podcast, daftar putar), tindakan utama ditentukan secara unik. Dan tombol putar bulat sepenuhnya dapat dibedakan dari album UI dan daftar putar, yang pada gilirannya mendorong pengguna untuk mengklik "Mainkan".

"Mainkan" di Spotify

Ketika tombol sepenuhnya bulat TIDAK bekerja?

Dalam beberapa kasus, kebulatan dapat merusak kegunaan, misalnya:

1. Ketika tombol bulat terlihat seperti tag

Jika membedakan tombol dari tag (filter) tidak mudah, itu akan membuat orang bingung: "Apakah saya mengklik tombol atau filter?"

Apa itu: tombol atau filter? Sama sekali tidak jelas.

2. Tombol bulat tidak dapat menampilkan opsi bersarang

Tombol bulat penuh biasanya menggunakan ikon "panah" untuk menunjukkan keberadaan opsi bersarang. Tetapi area klik (atau gerobak dorong) untuk menampilkan opsi dibatasi oleh ukuran ikon (biasanya 16x16 atau 24x24 px).

Apakah akan lebih mudah untuk melihat opsi dalam setiap kasus?

Jika kita hanya menggunakan tombol yang agak membulat, kita bisa menyembunyikan panah sehingga tombol itu berperilaku seperti tombol pop-up. Pendekatan ini bekerja lebih baik.

Apple tidak merekomendasikan menggunakan tombol bulat untuk tindakan (lihat tombol push ). Tombol bulat sepenuhnya dicadangkan untuk " Bantuan " atau untuk memberikan opsi yang saling eksklusif (lihat tombol radio ).

Ilustrasi dari Panduan Antarmuka Manusia Apple

3. Tombol bulat sepenuhnya tidak cocok untuk tumpukan

Ketika kita menempatkan tombol bulat di baris dalam tabel dan kartu, mereka terlihat tidak pada tempatnya. Sebagai contoh, untuk tabel 10 baris, kita mendapatkan kolom 10 tombol, yang masing-masing terlihat seperti tombol untuk tindakan utama.

Sebagai alternatif, Anda dapat mencoba tombol "tanpa batas", seperti yang dilakukan pada pemberitahuan macOS baru, atau tampilkan tombol hanya ketika Anda mengarahkan kursor. Dengan meminimalkan visibilitas tombol, kami membiarkan pengguna fokus pada area kerja utama.

Tombol "tanpa batas" pada tumpukan

Estetika sudut bulat

Kebundarannya terlihat modern. Aplikasi pembulatan penuh dimulai pada antarmuka seluler dan bermigrasi ke web. Kurangnya ketajaman menyebabkan perasaan kesederhanaan, optimisme, dan aksesibilitas. Ini mungkin mengapa banyak sistem desain telah mengadopsi elemen bulat dan banyak digunakan untuk ikon, tombol, atau bahkan gambar.

Di Chrome, setelah pembaruan terbaru (enam bulan telah berlalu sejak publikasi artikel asli - kira-kira. Terjemahan), bilah alamat telah dibulatkan untuk lebih mengekspresikan ketersediaan penggunaan simultan untuk pencarian. Pengguna dapat melihat bagian dari hasil pencarian tepat pada saat dicetak, bahkan sebelum membuka halaman.

Bilah pencarian baru di Chrome (sumber - blog Google )

Sesuai dengan konsep baru, tombol-tombol pada bilah alat mulai disorot bulat pada hover. Sangat mudah untuk menemukan elemen bulat di aplikasi Google lainnya seperti Kalender, Gmail, dan Drive.

Meringkas

Tidak ada jawaban pasti yang lebih baik - kebulatan atau ketajaman. Tetapi elemen bulat dapat membantu mendorong pengguna untuk berinteraksi dengan aplikasi tanpa terganggu oleh UI sekunder.

---

Daftar sumber daya untuk studi mendalam tentang masalah ini:

Gunakan bentuk bundar dalam Desain Material

Karakteristik sudut membulat

Mengapa sudut bundar lebih mudah di mata