Lembar Curang Ukuran Target yang Dapat Diakses — Majalah Smashing – Beragampengetahuan

Faucet yang marah menjengkelkan dan membuat frustrasi. Peristiwa luar biasa ini di antarmuka kami saat kami perlu mengklik dua atau terkadang tiga kali untuk melanjutkan perjalanan kami. Tentu saja, terkadang hal itu terjadi karena situs terlalu lambat, tetapi terkadang ukuran target elemen interaktif adalah penyebabnya.

Jadi sekarang seberapa besar seharusnya elemen interaktif kita? Berapa ukuran yang dapat diandalkan untuk ikon, tautan, dan tombol — Di navigasi dan seluler? Bagaimana kami dapat mempersulit pengguna kami untuk melakukan kesalahan? Mari kita lihat.

catatan: Anda juga akan menemukan bab video lengkap tentang mendesain untuk sentuhan di Pola Desain untuk Antarmuka Cerdas, bersama dengan 30 bab lainnya seputar pengalaman pengguna dan pola desain.

Lembar Curang Ukuran Target

Salah satu rekomendasi umum untuk ukuran target pada perangkat seluler adalah 44×44 piksel.yang agak menyesatkan karena piksel layar, atau setidaknya Piksel yang tidak tergantung perangkat (jatuh) Diskalakan ke beberapa resolusi tampilan.Jadi piksel berbeda pada layar yang berbeda, ketika kita berbicara tentang ukuran kita mungkin harus membicarakannya tawar-menawaralih-alih piksel.

Tergantung di mana elemen muncul di layar, diperlukan lebih banyak atau lebih sedikit padding.Umumnya, kami mengetik dengan sangat tepat di tengah layar, tetapi kami Paling tidak akurat di tepi layar (di atas dan bawah).

Menurut penelitian akordeon Steven Hoober dalam bukunya Touch Design for Mobile Interfaces, untuk meminimalkan klik marah, kita perlu membidik 11mm (atau 31pt/42px) di bagian atas layar dan 12mm (atau 34pt/46px) di bagian bawah layar . Namun di tengah, kita bisa mencapai serendah 7mm (atau 20pt/27px). Ini termasuk lebar dan padding untuk elemen interaktif.

Bagaimana unit titik dikonversi ke piksel CSS atau unit Android/iOS? Untungnya, Steven Hoober telah menyediakan tabel konversi yang berguna untuk membantu Anda mengonversi poin ke unit px dan em, Android SP atau DP, poin iOS, dan Windows DIP atau px.

tidak semua piksel dibuat sama

Seperti yang kita lihat di atas, ukuran target berubah berdasarkan tempat komponen ditampilkan di layar.Perlu dicatat bahwa, menurut persyaratan AAA WCAG 2.1, semua target diukur Setidaknya 44 x 44 piksel, kecuali targetnya ada di dalam kalimat atau blok teks. Untuk pengecualian seperti itu, kita dapat menggunakan 27px sebagai target, tetapi secara umum, lebih besar lebih baik.

Untuk sticky menu di bagian atas atau bawah layar, kita mungkin mengincar sebuah kotak sekitar 44-46px, atau lebih baik. Namun, untuk tautan yang muncul di layar saat pengguna menggulir halaman ke bawah, kami mungkin dapat menghindari sebagian besar masalah dengan menggunakan komponen yang lebih kecil.

Inilah mengapa kami mungkin bisa Tempatkan hingga lima item di tab bawah sedang menelepon. Sebagai gantinya, kita mungkin perlu menggunakan lembar bawah yang meluncur dari bawah dan berfungsi sebagai overlay di bagian atas layar.

Untuk tabel data, pilih tombol “aksi” daripada ikon individual

Bentuk kompleks biasanya memiliki tindakan melayang Muncul setelah pengguna mulai mengarahkan kursor ke baris tertentu. Mereka biasanya mencakup semuanya mulai dari menyorot dan mengekspor hingga memindahkan dan menghapus.

Dalam pengujian, ikon ditampilkan di hover menghasilkan terlalu banyak kesalahan: Tidak hanya pengguna yang sering secara tidak sengaja melompat ke baris yang salah saat menavigasi ke ikon secara horizontal. Mereka juga melakukan kesalahan dengan tidak sengaja mengklik di tempat yang salah dan memulai dari awal.

Untuk menghindari mengklik seperti orang gila, lebih baik untuk menguji Tombol tindakan atau tombol Split akan mengeksekusi. Sebenarnya tombol tersebut bisa ada di setiap baris, bisa dibuka dengan tap/klik, dan tidak menutup secara otomatis. Ini mungkin tidak cocok untuk setiap kasus penggunaan, tetapi ini pasti akan memberi pengguna lebih banyak kendali karena mereka perlu mengambil tindakan terus menerus.

Sediakan asisten untuk operasi yang kompleks

Untuk operasi yang rumit, seperti memutar gambar atau memilih sebagian kecil dari area yang lebih besar, kita sering mengandalkan tombol cubit dan perbesar atau perbesar/perkecil. Opsi ini pasti berhasil, tetapi dapat dengan mudah menjadi sedikit membosankan untuk manipulasi yang sangat tepat – terutama setelah beberapa saat.

Sebagai gantinya, kita dapat memasang pegangan kecil untuk memungkinkan pengguna memindahkan pilihan mereka di dalam objek dengan lebih cepat dan tepat. Beginilah cara Tylko memungkinkan pengguna menyesuaikan rak di perangkat seluler. Pembesaran juga didukung, tetapi tidak perlu memilih salah satu wilayah.

Ketika Beberapa Ketukan Lebih Baik Dari Satu

Tapi apa yang kita lakukan jika beberapa tap area harus kecil?mungkin kita Tidak dapat memesan 27x27px untuk setiap ikon — Misalnya, kapan kami merekomendasikan pemilihan warna di situs e-niaga? Nah, dalam hal ini, satu opsi untuk dipertimbangkan adalah meminta pilihan warna yang “benar” dengan klik ekstra. Ini bisa sedikit lebih lambat dalam interaksi, tetapi lebih akurat.

Selalu maksimalkan area yang dapat diklik

Bila memungkinkan, Merangkum seluruh elemen, dan bantalan yang cukup untuk memastikan Anda mencapai ukuran ajaib 42-46 piksel untuk mencegah klik marah.Ini biasanya berarti tambahkan bantalan secukupnya Untuk ikon, tetapi juga lebih suka bilah lebar penuh atau tinggi penuh untuk akordeon dan navigasi.

Ahmad Shadeed menunjukkan beberapa contoh penggunaan spasi yang berguna untuk meningkatkan area yang dapat diklik dan mencegah kegilaan klik. Any Lupe menawarkan lebih banyak saran dalam artikelnya tentang ukuran target yang dapat diakses.

bungkus

Hari ini saat mendesain untuk sentuhan, kita perlu menggunakan Tautan kecil harus berukuran minimal 27×27px atau ikon di area konten, setidaknya 44×44 piksel di bagian atas dan bawah halaman.

Secara pribadi, saya selalu pergi 30×30px Dan 48×48px Untuk memastikan kesalahan benar-benar sulit dilakukan. Tentu saja, selalu gunakan lebar penuh atau tinggi penuh untuk area yang dapat diklik. Mudah-mudahan ini akan membantu kami sepenuhnya menghilangkan kemungkinan gangguan kemarahan dari situs kami – banyak pengguna Anda akan sangat menghargainya.

Anda dapat menemukan detail lebih lanjut Navigasi Pengalaman Pengguna Di perpustakaan video Pola Desain Antarmuka Cerdas 🍣 – pelatihan UX langsung yang akan datang bulan September ini.

sumber daya yang berguna

Jika Anda ingin mendalami topik ini lebih dalam, ada beberapa referensi bagus tentang ukuran target yang dapat diakses yang mungkin berguna:

(saya)