it-swarm.asia

Ukuran dan jarak tombol terkecil untuk layar sentuh

Untuk layar sentuh, seperti iPhone, berapa ukuran terkecil untuk sebuah tombol yang bisa Anda hilangkan?

Dan seberapa dekat mereka bisa didorong bersama?

Saya punya aplikasi yang akan memiliki banyak tombol pada satu layar, dan perlu mendesainnya agar bisa digunakan.

13
Mongus Pong

(Karena saya agak malas, saya akan mulai dengan mencetak ulang jawaban saya dari utas pada SO)

Penelitian ilmiah terbaru telah menemukan bahwa:

[A] ukuran target 9,2 mm untuk tugas diskrit [yaitu, tugas penunjuk target tunggal ] dan target 9,6 mm untuk tugas serial harus cukup besar untuk digunakan ibu jari satu tangan pada handheld berbasis layar sentuh tanpa menurunkan kinerja dan preferensi.

Dikutip dari Studi Ukuran Target untuk Penggunaan Jempol Satu Tangan pada Perangkat Layar Sentuh Kecil (Parhi, Karlson, & Bederson 2006). Sumber lain setuju dengan "aturan dekat-ke-0,4 inci" ini (mis. Merancang Antarmuka Gestural (Saffer 2008, p. 42)).

Mengingat kerapatan piksel iPhone 163 PPI (6.417px/mm), Anda sebaiknya mengarahkan tidak lebih rendah dari 59px diagonal untuk target apa pun.

(Harap dicatat bahwa ini diverifikasi untuk penggunaan satu ibu jari saja.)


Jika Anda mengikuti panduan ini, spasi bisa dihilangkan.

tl; dr? Semuanya bermuara pada kerapatan piksel.

10
jensgram

Rujuk ke Pedoman Antarmuka Manusia iPhone (tautan yang menuju ke panduan untuk aplikasi web) untuk rekomendasi oleh Apple. Ada bab yang disebut " Berikan Target Berukuran Ujung Jari " yang mungkin bisa Anda gunakan untuk mendasarkan keputusan Anda.

Juga, jangan menebak, tes. Dapatkan beberapa orang dengan jari berukuran berbeda (dalam audiens target Anda) dan minta mereka mencoba menekan tombol berukuran berbeda dalam prototipe. Itu akan mengajarkan Anda banyak tentang apa yang diharapkan.

Edit: Panduan Desain dan Interaksi UI Microsoft untuk Windows Phone 7 detail "ukuran target sentuh minimal" di halaman 4. Secara keseluruhan ini panduan ini sangat baik dan harus dibaca untuk desainer UI yang bekerja pada UI layar sentuh.

8
Rahul

Ketika mengembangkan beberapa aplikasi Android aplikasi seluler saya harus menguji area sentuh terkecil yang pengguna dapat dengan mudah dan tepat mengaksesnya dengan jari/sentuhan (melakukan aksi klik dan seret).

Pengujian dilakukan pada 3 Android ponsel berbasis: HTC Hero, Samsung Galaxy Spica, T-Mobile Pulse. Ponsel memiliki layar 3,2 inci kecuali untuk Pulse (yang memiliki layar 3,5 inci), semua di antaranya dengan resolusi layar 320x480 piksel dan permukaan layar kapasitif.

Singkatnya, semua yang lebih kecil dari 20x20 piksel tidak dapat digunakan. Juga perhatikan bahwa harus ada ruang di sekitar tombol (margin 5 pixel).

2
Bojan Gavrovski

Banyak pedoman UX berputar di sekitar ukuran ujung jari dan pedoman ini bervariasi dalam ukuran dan jarak yang disarankan. Ukuran ujung jari tidak boleh menjadi satu-satunya faktor dalam menentukan kontrol ukuran dan jarak minimum yang seharusnya.

Hubungi Patch

Pertimbangkan 'patch kontak' yang dibuat oleh jari/ibu jari saat melakukan kontak dengan layar sentuh. Anda juga perlu mempertimbangkan kesalahan dalam penilaian yang dibuat oleh pengguna dalam berpikir bahwa mereka telah secara visual memusatkan sentuhan mereka pada target tetapi pada kenyataannya kontak yang sebenarnya dibuat dengan layar mungkin sedikit ke satu sisi.

Tipe perangkat

Karena cara berbagai perangkat dipegang dan perbedaan jarak dari pengguna (bandingkan ponsel dengan tablet misalnya, ponsel mungkin dipegang lebih dekat), ukuran sentuh minimum dan jarak dapat bervariasi juga. Anda bisa saja lolos dengan minimum yang lebih kecil pada ponsel karena mereka lebih dekat ke penonton dan kesalahan lebih kecil kemungkinannya untuk dilakukan. Untuk perangkat yang lebih besar seperti tablet yang dipegang lebih jauh, Anda mungkin perlu menambah ukuran minimum untuk memenuhi kemungkinan kesalahan yang lebih tinggi.


Ada artikel hebat yang membicarakan hal ini dan faktor-faktor lain pada UXmatters ( http://www.uxmatters.com/mt/archives/ 2013/03/common-misconceptions-about-touch.php ).

Cuplikan dari artikel:

... hanya sebagian jari atau ibu jari yang membuat kontak dengan layar ... patch kontak bervariasi berdasarkan tekanan dan sudut

Ukuran fisik penting , jadi semua pedoman yang baik adalah dalam milimeter, inci, poin typographers, atau skala dunia nyata lainnya.

tidak perlu menambah ukuran target yang terlihat. Sebagai gantinya, Anda cukup menambah dimensi area yang dapat diklik di sekitar tautan atau tombol

Desain untuk area target visual dan sentuh. Pertimbangkan harapan pengguna.

Ukuran:

enter image description here

1
Dave Haigh

Sama seperti tambahan: desain material Google menyarankan minimal 7-10mm untuk ukuran target sentuh https://www.google.com/design/spec/search.html?q=Touch+target+size

0
Andi