Sentuh

Catatan

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.

Semua aplikasi Microsoft Windows harus memiliki pengalaman sentuhan yang hebat. Dan menciptakan pengalaman seperti itu lebih mudah daripada yang Anda pikirkan.

Sentuhan mengacu pada penggunaan satu atau beberapa jari untuk memberikan input melalui tampilan perangkat dan berinteraksi dengan Windows dan aplikasi. Aplikasi yang dioptimalkan sentuhan memiliki UI dan model interaksi yang dirancang untuk mengakomodasi area kontak sentuhan yang lebih besar dan kurang tepat, berbagai faktor bentuk perangkat sentuh, dan banyak postur dan grips yang mungkin diadopsi pengguna saat menggunakan perangkat sentuh.

Setiap perangkat input memiliki kekuatannya. Keyboard adalah yang terbaik untuk input teks dan memberikan perintah dengan gerakan tangan minimal. Mouse adalah yang terbaik untuk penunjuk yang efisien dan tepat. Sentuhan terbaik untuk manipulasi objek dan memberikan perintah sederhana. Pena adalah yang terbaik untuk ekspresi bentuk bebas, seperti halnya tulisan tangan dan gambar.

Windows 8.1 dioptimalkan untuk responsivitas, akurasi, dan kemudahan penggunaan dengan sentuhan sambil sepenuhnya mendukung metode input tradisional (seperti mouse, pena, dan keyboard). Kecepatan, akurasi, dan umpan balik taktil yang diberikan mode input tradisional akrab dan menarik bagi banyak pengguna dan berpotensi lebih cocok untuk skenario interaksi tertentu.

Anda dapat menemukan panduan yang terkait dengan mouse, pena, dan aksesibilitas dalam topik terpisah.

Saat Anda memikirkan pengalaman interaksi untuk aplikasi Anda:

Jangan berasumsi bahwa jika UI bekerja dengan baik untuk mouse, UI juga berfungsi dengan baik untuk sentuhan. Meskipun dukungan mouse yang baik adalah awal, pengalaman sentuhan yang baik memiliki beberapa persyaratan tambahan.

Asumsikan bahwa jika UI bekerja dengan baik untuk jari, UI juga berfungsi dengan baik untuk pena. Membuat aplikasi Anda dapat disentuh berjalan jauh untuk juga memberikan dukungan pena yang baik. Perbedaan utamanya adalah bahwa jari memiliki ujung yang lebih tumpul, sehingga membutuhkan target yang lebih besar.

Dengan sentuhan, Anda dapat memanipulasi objek dan UI secara langsung, yang membuat pengalaman yang lebih cepat, lebih alami, dan menarik.

Memberikan pengalaman sentuhan yang luar biasa

Anda harus memastikan pengguna dapat melakukan tugas penting dan penting secara efisien menggunakan input sentuhan. Namun, fungsionalitas aplikasi tertentu, seperti manipulasi teks atau piksel, mungkin tidak cocok untuk disentuh dan dapat dicadangkan untuk perangkat input yang paling cocok.

Jika Anda tidak memiliki banyak pengalaman mengembangkan aplikasi sentuh, yang terbaik adalah belajar dengan melakukan. Dapatkan komputer yang mendukung sentuhan, sisihkan mouse dan keyboard, dan gunakan hanya jari Anda untuk berinteraksi dengan aplikasi Anda. Jika Anda memiliki tablet, bereksperimenlah dengan memegangnya di posisi yang berbeda, seperti di pangkuan Anda, berbaring datar di atas meja, atau di lengan saat Anda berdiri. Coba gunakan dalam orientasi potret dan lanskap.

Aplikasi yang dioptimalkan untuk sentuhan yang berfungsi paling baik dengan interaksi sentuh biasanya:

• Alami dan intuitif. Interaksi dirancang untuk sesuai dengan bagaimana pengguna berinteraksi dengan objek di dunia nyata.
• Kurang mengganggu. Menggunakan sentuhan diam, dan akibatnya jauh lebih sedikit mengganggu daripada mengetik atau mengklik.
• Portabel. Perangkat sentuh lebih ringkas karena banyak tugas dapat diselesaikan tanpa keyboard, mouse, pena, atau touchpad. Mereka juga lebih fleksibel karena permukaan kerja tidak diperlukan.
• Langsung dan menarik. Sentuhan membuat Anda merasa seperti Anda memanipulasi objek secara langsung di layar.
• Kurang akurat. Pengguna tidak dapat menargetkan objek secara akurat dengan sentuhan, dibandingkan dengan mouse atau pena.

Sentuhan memberikan nuansa alam, dunia nyata untuk interaksi. Manipulasi dan animasi langsung menyelesaikan kesan ini, dengan memberikan objek gerakan dan umpan balik yang realistis dan dinamis. Misalnya, pertimbangkan permainan kartu. Tidak hanya mudah dan mudah untuk menyeret kartu menggunakan jari, pengalaman ini mengambil nuansa dunia nyata yang menarik ketika Anda dapat meluncur, dan memutar kartu seperti Anda akan dek fisik. Dan ketika Anda mencoba memindahkan kartu yang tidak dapat dipindahkan, ini adalah pengalaman yang lebih baik untuk menahan kartu tetapi tidak mencegah gerakan, dan menetap kembali di tempat ketika dirilis, untuk dengan jelas menunjukkan bahwa tindakan itu dikenali tetapi tidak dapat dilakukan.

Untungnya, jika aplikasi Anda sudah dirancang dengan baik, memberikan pengalaman sentuhan yang hebat mudah dilakukan. Untuk tujuan ini, program yang dirancang dengan baik:

• Memastikan tugas yang paling penting dapat dilakukan secara efisien menggunakan jari (setidaknya tugas yang tidak melibatkan banyak mengetik atau memanipulasi piksel terperinci).
• Menggunakan kontrol besar untuk sentuhan. Kontrol umum memiliki ukuran minimum 23x23 piksel (13x13 DLUs), dan kontrol yang paling umum digunakan adalah setidaknya 40x40 piksel (DLUS 23x22). Untuk menghindari perilaku yang tidak responsif, elemen UI harus memiliki setidaknya 5 piksel (3 DPU) ruang di antaranya. Untuk kontrol lain, pastikan mereka memiliki setidaknya target klik 23x23 piksel (13x13 DLU), bahkan jika penampilan statisnya jauh lebih kecil. Lihat ukuran kontrol standar.
• Mendukung input Mouse. Kontrol interaktif memiliki keterlibatan yang jelas dan terlihat. Objek memiliki perilaku standar untuk interaksi mouse standar (klik kiri tunggal dan ganda, klik kanan, seret, dan arahkan mouse).
• Mendukung input keyboard. Aplikasi ini menyediakan penetapan kunci pintasan standar, terutama untuk perintah navigasi dan pengeditan yang juga dapat dihasilkan melalui gerakan sentuh.
• Memastikan aksesibilitas. Menggunakan Automasi UI atau Microsoft Active Accessibility (MSAA) untuk menyediakan akses terprogram ke UI untuk teknologi bantuan. Aplikasi merespons perubahan metrik orientasi, tema, lokal, dan sistem dengan tepat.
• Menghilangkan interaksi yang tidak perlu. Untuk mencegah hilangnya akses data atau sistem, gunakan nilai default yang paling aman dan paling aman. Jika keamanan dan keselamatan bukan faktor, aplikasi memilih opsi yang paling mungkin atau nyaman.
• Menyediakan sentuhan yang setara untuk hover. Jangan mengandalkan hover sebagai satu-satunya cara untuk melakukan tindakan.
• Memastikan gerakan segera berlaku. Jaga titik kontak di bawah jari pengguna dengan lancar di seluruh gerakan, yang memberikan efek pemetaan gerakan langsung ke gerakan pengguna.
• Menggunakan gerakan standar jika memungkinkan. Gerakan kustom hanya untuk interaksi yang unik untuk aplikasi Anda.
• Memastikan perintah yang tidak diinginkan atau destruktif dapat dibalik atau dikoreksi. Tindakan yang tidak disengaja lebih mungkin saat menggunakan sentuhan.

Panduan untuk input sentuh

Dengan sentuhan, aplikasi Windows Anda dapat menggunakan gerakan fisik untuk meniru manipulasi langsung elemen UI.

Pertimbangkan praktik terbaik ini saat merancang aplikasi yang mendukung sentuhan Anda:

Responsivitas sangat penting untuk menciptakan pengalaman sentuhan yang terasa langsung dan menarik. Agar terasa langsung, gerakan harus segera berlaku, dan titik kontak objek harus tetap berada di bawah jari pengguna dengan lancar di seluruh gerakan. Efek input sentuh harus memetakan langsung ke gerakan pengguna, jadi, misalnya, jika pengguna memutar jari-jarinya 90 derajat, objek harus memutar 90 derajat juga. Setiap jeda, respons bergelompangan, hilangnya kontak, atau hasil yang tidak akurat menghancurkan persepsi manipulasi langsung dan juga kualitas.

Konsistensi sangat penting untuk menciptakan pengalaman sentuhan yang terasa alami dan intuitif. Setelah pengguna mempelajari gerakan standar, mereka mengharapkan gerakan tersebut memiliki efek yang sama di semua aplikasi. Untuk menghindari kebingungan dan frustrasi, jangan pernah menetapkan arti non-standar untuk gerakan standar. Sebagai gantinya, gunakan gerakan kustom untuk interaksi yang unik untuk program Anda.

Selanjutnya kita akan menjelaskan bahasa sentuh Windows, tetapi sebelum melanjutkan, berikut adalah daftar singkat istilah input sentuhan dasar.

• Gerakan

  Gerakan adalah tindakan fisik atau gerakan yang dilakukan pada, atau oleh, perangkat input (jari, jari, pena/stylus, mouse, dan sebagainya). Misalnya, untuk meluncurkan, mengaktifkan, atau memanggil perintah, Anda menggunakan satu ketukan jari untuk perangkat sentuhan atau touchpad (setara dengan klik kiri dengan mouse, ketukan dengan pena, atau Enter di keyboard).

• Manipulasi

  Manipulasi adalah reaksi langsung, real-time atau respons objek atau UI yang memiliki gerakan. Misalnya, gerakan geser dan geser biasanya menyebabkan elemen atau UI bergerak dalam beberapa cara.

  Hasil akhir manipulasi, bagaimana itu dimanifestasikan oleh objek di layar dan di UI, adalah interaksi.

• Interaksi

  Interaksi tergantung pada bagaimana manipulasi ditafsirkan dan perintah atau tindakan yang dihasilkan dari manipulasi. Misalnya, objek dapat dipindahkan menggunakan gerakan slide dan gesek, tetapi hasilnya berbeda tergantung pada apakah ambang jarak disilangkan. Slide dapat digunakan untuk menyeret objek atau menggeser tampilan saat gesek dapat digunakan untuk memilih item atau menampilkan bilah aplikasi.

Bahasa sentuh Windows

Windows menyediakan serangkaian interaksi sentuh ringkas yang digunakan di seluruh sistem. Menerapkan bahasa sentuh ini secara konsisten membuat aplikasi Anda merasa terbiasa dengan apa yang sudah diketahui pengguna. Ini meningkatkan kepercayaan pengguna dengan membuat aplikasi Anda lebih mudah dipelajari dan digunakan. Untuk mempelajari selengkapnya tentang implementasi bahasa sentuh, lihat Gerakan, manipulasi, dan interaksi.

Tekan dan tahan untuk mempelajari

Gerakan tekan dan tahan menampilkan info terperinci atau visual pengajaran (misalnya, tipsalat atau menu konteks) tanpa berkomitmen pada tindakan atau perintah. Panning masih dimungkinkan jika gerakan geser dimulai saat visual ditampilkan.

Penting

Anda dapat menggunakan tekan dan tahan untuk pilihan dalam kasus di mana panning horizontal dan vertikal diaktifkan.

Status entri: Satu atau dua jari dalam kontak dengan layar.

Gerakan: Tidak ada gerakan.

Status keluar: Jari terakhir ke atas mengakhiri gerakan.

Efek: Menampilkan informasi selengkapnya.

Tekan dan tahan gerakan.

Hover

Hover adalah interaksi yang berguna karena memungkinkan pengguna untuk mendapatkan informasi tambahan melalui tips sebelum memulai tindakan. Melihat tips ini membuat pengguna merasa lebih percaya diri dan mengurangi kesalahan.

Sayangnya, hover tidak didukung oleh teknologi sentuh, sehingga pengguna tidak dapat melayang saat menggunakan jari. Solusi sederhana untuk masalah ini adalah mengambil keuntungan penuh dari hover, tetapi hanya dengan cara yang tidak diperlukan untuk melakukan tindakan. Dalam praktiknya, ini biasanya berarti bahwa tindakan juga dapat dilakukan dengan mengklik, tetapi belum tentu dengan cara yang sama persis.

Dalam contoh ini, pengguna dapat melihat tanggal hari ini dengan mengarahkan mouse atau mengklik.

Ketuk untuk tindakan utama

Mengetuk elemen memanggil tindakan utamanya, misalnya meluncurkan aplikasi atau menjalankan perintah.

Status entri: Satu jari dalam kontak dengan layar atau touchpad dan diangkat sebelum ambang waktu untuk interaksi tekan dan tahan terjadi.

Gerakan: Tidak ada gerakan.

Status keluar: Jari ke atas mengakhiri gerakan.

Efek: Luncurkan aplikasi atau jalankan perintah.

Gerakan ketukan.

Geser ke geser

Slide digunakan terutama untuk interaksi panning tetapi juga dapat digunakan untuk bergerak (di mana panning dibatasi ke satu arah), menggambar, atau menulis. Slide juga dapat digunakan untuk menargetkan elemen kecil dan padat dengan menggosok (menggeser jari di atas objek terkait seperti tombol radio).

Status entri: Satu atau dua jari dalam kontak dengan layar.

Gerakan: Seret, dengan jari tambahan yang tersisa dalam posisi yang sama relatif satu sama lain.

Status keluar: Jari terakhir ke atas mengakhiri gerakan.

Efek: Pindahkan objek yang mendasar secara langsung dan segera saat jari bergerak. Pastikan untuk menyimpan titik kontak di bawah jari di seluruh gerakan.

Gerakan pan.

Gesek untuk memilih, memerintahkan, dan memindahkan

Menggeser jari dengan jarak pendek, tegak lurus ke arah panning (di mana panning dibatasi ke satu arah), memilih objek dalam daftar atau kisi. Tampilkan bilah aplikasi dengan perintah yang relevan saat objek dipilih.

Status entri: Satu atau beberapa jari menyentuh layar.

Gerakan: Seret jarak pendek dan angkat sebelum ambang jarak untuk interaksi pemindahan terjadi.

Status keluar: Jari terakhir ke atas mengakhiri gerakan.

Efek: Objek yang mendasar dipilih, atau dipindahkan, atau bilah aplikasi ditampilkan. Pastikan untuk menyimpan titik kontak di bawah jari di seluruh gerakan.

Gerakan gesek.

Jepit dan regangkan untuk memperbesar tampilan

Gerakan mencubit dan meregangkan digunakan untuk tiga jenis interaksi: zoom optik, mengubah ukuran, dan zoom semantik.

Zoom optik menyesuaikan tingkat pembesaran seluruh area konten untuk mendapatkan tampilan konten yang lebih rinci. Sebaliknya, mengubah ukuran adalah teknik untuk menyesuaikan ukuran relatif satu atau beberapa objek dalam area konten tanpa mengubah tampilan ke area konten.

Zoom semantik adalah teknik yang dioptimalkan sentuhan untuk menyajikan dan menavigasi data atau konten terstruktur dalam satu tampilan (seperti struktur folder komputer, pustaka dokumen, atau album foto) tanpa perlu kontrol panning, gulir, atau tampilan pohon. Zoom semantik menyediakan dua tampilan berbeda dari konten yang sama dengan memungkinkan Anda melihat detail lebih lanjut saat Anda memperbesar dan lebih sedikit detail saat Anda memperkecil tampilan.

Status entri: Dua jari bersentuhan dengan layar secara bersamaan.

Gerakan: Jari bergerak terpisah (regang) atau bersama-sama (mencubit) di sepanjang sumbu.

Status keluar: Jari apa pun ke atas mengakhiri gerakan.

Efek: Perbesar atau perbesar objek yang mendasar secara langsung dan segera saat jari memisahkan atau mendekati sumbu. Pastikan untuk menyimpan titik kontak di bawah jari di seluruh gerakan.

Gerakan zoom.

Ubah untuk memutar

Memutar dengan dua jari atau lebih menyebabkan objek berputar. Putar perangkat itu sendiri untuk memutar seluruh layar.

Status entri: Dua jari bersentuhan dengan layar secara bersamaan.

Gerakan: Satu atau kedua jari berputar di sekitar yang lain, bergerak tanpa batas ke garis di antara mereka.

Status keluar: Jari apa pun ke atas mengakhiri gerakan.

Efek: Putar objek yang mendasar dengan jumlah yang sama dengan jari yang telah diputar. Pastikan untuk menyimpan titik kontak di bawah jari di seluruh gerakan.

Gerakan rotasi.

Rotasi masuk akal hanya untuk jenis objek tertentu, sehingga tidak dipetakan ke interaksi Windows sistem.

Rotasi sering dilakukan secara berbeda oleh orang yang berbeda. Beberapa orang lebih suka memutar satu jari di sekitar jari pivot, sementara yang lain lebih suka memutar kedua jari dalam gerakan melingkar. Kebanyakan orang menggunakan kombinasi keduanya, dengan satu jari bergerak lebih dari yang lain. Meskipun rotasi halus ke sudut mana pun adalah interaksi terbaik, dalam banyak konteks, seperti melihat foto, yang terbaik adalah menyelesaikan rotasi 90 derajat terdekat setelah pengguna melepaskannya. Dalam pengeditan foto, Anda dapat menggunakan rotasi kecil untuk meluruskan foto.

Gesek dari tepi untuk perintah aplikasi

Menggesek jari dengan jarak pendek dari tepi bawah atau atas layar akan menampilkan perintah aplikasi di bilah aplikasi.

Status masuk: Satu atau beberapa jari menyentuh bezel.

Gerakan: Seret jarak pendek ke layar dan angkat.

Status keluar: Jari terakhir ke atas mengakhiri gerakan.

Efek: Bilah aplikasi ditampilkan.

Gesek dari gerakan tepi.

Pengembang: Untuk informasi selengkapnya, lihat enumerasi DIRECTMANIPULATION_CONFIGURATION.

Mengontrol penggunaan

Di sini, kami memberikan beberapa panduan untuk mengoptimalkan kontrol untuk penggunaan sentuhan.

• Gunakan kontrol umum. Sebagian besar kontrol umum dirancang untuk mendukung pengalaman sentuhan yang baik.
• Pilih kontrol kustom yang dirancang untuk mendukung sentuhan. Anda mungkin memerlukan kontrol kustom untuk mendukung pengalaman khusus program Anda. Pilih kontrol kustom yang:
  • Dapat berukuran cukup besar untuk penargetan dan manipulasi yang mudah.
  • Ketika dimanipulasi, pindahkan dan bereaksi dengan cara objek dunia nyata bergerak dan bereaksi, seperti dengan memiliki momentum dan gesekan.
  • Memaafkan dengan memungkinkan pengguna untuk dengan mudah memperbaiki kesalahan.
  • Memaafkan ketidakakuratan dengan mengklik dan menyeret. Objek yang dijatuhkan di dekat tujuannya harus jatuh ke tempat yang benar.
  • Memiliki umpan balik visual yang jelas ketika jari berada di atas kontrol.
• Gunakan kontrol yang dibatasi. Kontrol yang dibatasi seperti daftar dan penggeser, saat dirancang untuk penargetan sentuhan yang mudah, bisa lebih baik daripada kontrol yang tidak dibatasi seperti kotak teks karena mengurangi kebutuhan input teks.
• Berikan nilai default yang sesuai. Pilih opsi paling aman (untuk mencegah hilangnya data atau akses sistem) dan opsi paling aman secara default. Jika keamanan dan keselamatan bukan faktor, pilih opsi yang paling mungkin atau nyaman, sehingga menghilangkan interaksi yang tidak perlu.
• Berikan penyelesaian otomatis teks. Menyediakan daftar nilai yang paling mungkin, atau nilai input terbaru, untuk membuat input teks jauh lebih mudah.
• Untuk tugas penting yang menggunakan beberapa pilihan, jika daftar pilihan ganda standar biasanya digunakan, berikan opsi untuk menggunakan daftar kotak centang sebagai gantinya.

Ukuran kontrol dan penargetan sentuhan

Karena area permukaan ujung jari yang besar, kontrol kecil yang terlalu berdekatan bisa sulit ditargetkan dengan tepat.

Sebagai aturan umum, ukuran kontrol 23x23 piksel (13x13 DLUs) adalah ukuran kontrol interaktif minimum yang baik untuk perangkat input apa pun. Sebaliknya, kontrol spin pada 15x11 piksel terlalu kecil untuk digunakan secara efektif dengan sentuhan.

Perlu diingat bahwa ukuran minimum benar-benar didasarkan pada area fisik, bukan metrik tata letak seperti piksel atau DPU. Penelitian menunjukkan bahwa area target minimum untuk interaksi yang efisien dan akurat menggunakan jari adalah 6x6 milimeter (mm). Area ini diterjemahkan ke metrik tata letak seperti ini:

Font	Milimeter	Piksel relatif	DLUs
9 poin Segoe UI	6x6	23x23	13x13
8 titik Tahoma	6x6	23x23	15x14

Selain itu, penelitian menunjukkan bahwa ukuran minimum 10x10 mm (sekitar 40x40 piksel) memungkinkan kecepatan dan akurasi yang lebih baik, dan juga terasa lebih nyaman bagi pengguna. Jika praktis, gunakan ukuran yang lebih besar ini untuk tombol perintah yang digunakan untuk perintah yang paling penting atau sering digunakan.

Tujuannya adalah untuk tidak memiliki kontrol raksasa, hanya yang mudah digunakan dengan sentuhan.

Dalam contoh ini, Microsoft Word menggunakan tombol yang lebih besar dari 10x10 mm untuk perintah yang paling penting.

Versi Kalkulator ini menggunakan tombol yang lebih besar dari 10x10 mm untuk perintah yang paling sering digunakan.

Tidak ada ukuran yang sempurna untuk target sentuhan. Ukuran yang berbeda berfungsi untuk situasi yang berbeda. Tindakan dengan konsekuensi berat (seperti menghapus dan menutup) atau tindakan yang sering digunakan harus menggunakan target sentuhan besar. Tindakan yang jarang digunakan dengan konsekuensi kecil dapat menggunakan target kecil.

Panduan ukuran target untuk kontrol kustom

Pedoman ukuran	Deskripsi
	7x7 mm: Ukuran minimum yang disarankan 7x7 mm adalah ukuran minimum yang baik jika menyentuh target yang salah dapat dikoreksi dalam satu atau dua gerakan atau dalam lima detik. Padding antar target sama pentingnya dengan ukuran target.
	Ketika akurasi penting Tutup, hapus, dan tindakan lain dengan konsekuensi parah tidak dapat membeli ketukan yang tidak disengaja. Gunakan target 9x9 mm jika menyentuh target yang salah memerlukan lebih dari dua gerakan, lima detik, atau perubahan konteks utama untuk memperbaikinya.
	Ketika itu hanya tidak akan cocok Jika Anda menemukan diri Anda menjejalkan sesuatu agar pas, tidak apa-apa untuk menggunakan target 5x5 mm selama menyentuh target yang salah dapat diperbairah dengan satu gerakan. Menggunakan 2 mm padding antar target sangat penting dalam hal ini.

Panduan ukuran target untuk kontrol umum

• Untuk kontrol umum, gunakan ukuran kontrol yang direkomendasikan. Ukuran kontrol yang disarankan memenuhi ukuran minimum 23x23 piksel (13x13 DLU), kecuali untuk kotak centang dan tombol radio (lebar teksnya agak mengimbangi), kontrol spin (yang tidak dapat digunakan dengan sentuhan, tetapi redundan), dan pemisah.

  

  Ukuran kontrol yang direkomendasikan mudah disentuh.

• Untuk tombol perintah yang digunakan untuk perintah yang paling penting atau sering digunakan, gunakan ukuran minimum 40x40 piksel (DPU 23x22) setiap kali praktis. Melakukannya menghasilkan kecepatan dan akurasi yang lebih baik, dan juga terasa lebih nyaman bagi pengguna.

  

  Setiap kali praktis, gunakan tombol perintah yang lebih besar untuk perintah penting atau sering digunakan.

• Untuk kontrol lain:

  • Gunakan target klik yang lebih besar. Untuk kontrol kecil, buat ukuran target lebih besar dari elemen UI yang terlihat secara statis. Misalnya, tombol ikon piksel 16x16 dapat memiliki tombol target klik piksel 23x23, dan elemen teks dapat memiliki persegi panjang pilihan 8 piksel lebih lebar dari teks dan tinggi 23 piksel.

    Benar:

    

    Salah:

    

    Benar:

    

    Dalam contoh yang benar, target klik lebih besar dari elemen UI yang terlihat secara statis.

  • Gunakan target klik redundan. Ini dapat diterima untuk target klik menjadi lebih kecil dari ukuran minimum jika kontrol tersebut memiliki fungsionalitas redundan.

    Misalnya, segitiga pengungkapan progresif yang digunakan oleh kontrol tampilan pohon hanya 6x9 piksel, tetapi fungsinya berlebihan dengan label item terkait.

    

    Segitiga tampilan pohon terlalu kecil agar mudah disentuh, tetapi redundan dalam fungsionalitas dengan label terkait yang lebih besar.

    Hormati metrik sistem. Jangan ukuran hardcode. Jika perlu, pengguna dapat mengubah metrik sistem atau dpi untuk mengakomodasi kebutuhan mereka. Namun, perlakukan ini sebagai upaya terakhir karena pengguna biasanya tidak harus menyesuaikan pengaturan sistem agar UI dapat digunakan.

    

    Dalam contoh ini, metrik sistem untuk tinggi menu diubah.

Mengedit teks

Mengedit teks adalah salah satu interaksi yang paling menantang saat menggunakan jari. Menggunakan kontrol yang dibatasi, nilai default yang sesuai, dan penyelesaian otomatis menghilangkan atau mengurangi kebutuhan untuk memasukkan teks. Tetapi jika aplikasi Anda melibatkan pengeditan teks, Anda dapat membuat pengguna lebih produktif dengan secara otomatis memperbesar antarmuka pengguna input hingga 150 persen secara default saat sentuhan digunakan.

Misalnya, program email dapat menampilkan UI pada ukuran normal yang dapat disentuh, tetapi memperbesar UI input hingga 150 persen untuk membuat pesan.

Dalam contoh ini, UI input diperbesar hingga 150 persen.

Tata letak kontrol dan penspasian

Penspasian antar kontrol adalah faktor signifikan dalam membuat kontrol mudah disentuh. Penargetan lebih cepat tetapi kurang tepat saat menggunakan jari sebagai perangkat penunjuk, sehingga pengguna lebih sering mengetuk di luar target yang diinginkan. Ketika kontrol interaktif ditempatkan sangat berdekatan tetapi tidak benar-benar menyentuh, pengguna dapat mengklik ruang tidak aktif di antara kontrol. Karena mengklik ruang tidak aktif tidak memiliki hasil atau umpan balik visual, pengguna sering kali tidak yakin apa yang salah.

Sesuaikan penspasian secara dinamis berdasarkan perangkat input yang digunakan. Ini sangat berguna dengan UI sementara seperti menu dan flyout.

Menyediakan ruang minimal 5 piksel (3 DPU) antara wilayah target kontrol interaktif. Jika kontrol kecil terlalu berspasi erat, pengguna perlu mengetuk dengan presisi untuk menghindari mengetuk objek yang salah.

Buat kontrol dalam grup lebih mudah dibedakan dengan menggunakan lebih dari spasi vertikal yang direkomendasikan antar kontrol. Misalnya, tombol radio dengan tinggi 19 piksel lebih pendek dari ukuran minimum yang direkomendasikan 23 piksel. Ketika Anda memiliki ruang vertikal yang tersedia, Anda dapat mencapai efek yang kira-kira sama dengan ukuran yang direkomendasikan dengan menambahkan 4 piksel penspasian tambahan ke 7 piksel standar.

Benar:

Lebih:

Dalam contoh yang lebih baik, penspasian ekstra antara tombol radio membuatnya lebih mudah untuk diferensiasi.

Mungkin ada situasi di mana penspasian tambahan akan diinginkan saat menggunakan sentuhan, tetapi tidak saat menggunakan mouse atau keyboard. Dalam kasus seperti itu, hanya gunakan desain yang lebih luas ketika tindakan dimulai menggunakan sentuhan.

Pilih tata letak yang menempatkan kontrol yang dekat dengan tempat kontrol tersebut kemungkinan besar akan digunakan. Pertahankan interaksi tugas dalam area kecil jika memungkinkan dan temukan kontrol yang dekat dengan tempat yang kemungkinan besar akan digunakan. Hindari gerakan tangan jarak jauh, terutama untuk tugas umum dan untuk seret.

Pertimbangkan bahwa lokasi penunjuk saat ini adalah target terdekat, sehingga sepele untuk diperoleh. Dengan demikian, menu konteks memanfaatkan sepenuhnya hukum Fitts, seperti halnya toolbar mini yang digunakan oleh Microsoft Office.

Hindari menempatkan kontrol kecil di dekat tepi aplikasi atau layar. Target kecil di dekat tepi bisa sulit disentuh (bezel tampilan dapat mengganggu gerakan tepi). Untuk memastikan bahwa kontrol mudah ditargetkan saat jendela dimaksimalkan, buatlah setidaknya 23x23 piksel (13x13 DPU) atau letakkan dari tepi jendela.

Gunakan penspasian yang direkomendasikan. Penspasian yang direkomendasikan ramah sentuhan. Namun, jika aplikasi Anda dapat memperoleh manfaat dari ukuran dan penspasian yang lebih besar, pertimbangkan ukuran dan penspasian yang direkomendasikan menjadi minimum jika sesuai.

Menyediakan setidaknya 5 piksel (3 DPU) ruang di antara kontrol interaktif. Melakukannya mencegah kebingungan saat pengguna mengetuk di luar target yang diinginkan.

Pertimbangkan untuk menambahkan lebih dari spasi vertikal yang direkomendasikan dalam grup kontrol, seperti tautan perintah, kotak centang, dan tombol radio, serta di antara grup. Melakukannya membuat mereka lebih mudah untuk membedakan.

Pertimbangkan untuk menambahkan lebih dari spasi vertikal yang direkomendasikan secara dinamis saat tindakan dimulai menggunakan sentuhan. Melakukannya membuat objek lebih mudah dibingkai, tetapi tanpa mengambil lebih banyak ruang saat menggunakan keyboard atau mouse. Tingkatkan penspasian dengan sepertiga dari ukuran normalnya atau setidaknya 8 piksel.

Dalam contoh ini, Daftar Lompat taskbar Windows 7 lebih luas saat ditampilkan menggunakan sentuhan.

Interaksi

Menggunakan kontrol yang benar hanya memberi Anda bagian dari cara ke aplikasi yang dioptimalkan sentuhan, Anda juga perlu mempertimbangkan model interaksi keseluruhan yang didukung kontrol tersebut. Berikut adalah beberapa panduan untuk membantu Anda dalam hal ini.

• Buat hover redundan. Hover tidak didukung oleh sebagian besar teknologi sentuh, sehingga pengguna dengan layar sentuh seperti itu tidak dapat melakukan tugas apa pun yang memerlukan pengarahan.

• Untuk aplikasi yang memerlukan input teks, integrasikan sepenuhnya fitur keyboard sentuh dengan:

  • Menyediakan nilai default yang sesuai untuk input pengguna.
  • Memberikan saran lengkapi otomatis jika sesuai.

  Catatan

  Pengembang: Untuk informasi selengkapnya tentang mengintegrasikan keyboard sentuh, lihat ITextInputPanel.

• Perbolehkan pengguna untuk memperbesar UI konten jika program Anda memiliki tugas yang memerlukan pengeditan teks. Pertimbangkan untuk memperbesar secara otomatis hingga 150 persen saat sentuhan digunakan.

• Berikan panning dan zoom yang halus dan responsif di mana pun yang sesuai. Redraw dengan cepat setelah pan atau zoom agar tetap responsif. Melakukannya diperlukan untuk membuat manipulasi langsung terasa benar-benar langsung.

• Selama geser atau perbesar tampilan, pastikan titik kontak tetap berada di bawah jari di seluruh gerakan. Jika tidak, pan atau zoom sulit dikontrol.

• Karena gerakan dihafal, tetapkan maknanya yang konsisten di seluruh aplikasi. Jangan memberikan arti yang berbeda pada gerakan dengan semantik tetap. Gunakan gerakan khusus aplikasi yang sesuai sebagai gantinya.

Pengampunan

Manipulasi langsung membuat sentuhan alami, ekspresif, efisien, dan menarik. Namun, di mana ada manipulasi langsung, mungkin ada manipulasi yang tidak disengaja dan oleh karena itu perlunya pengampunan.

Pengampunan adalah kemampuan untuk membalikkan atau memperbaiki tindakan yang tidak diinginkan dengan mudah. Anda membuat pengalaman sentuh memaafkan dengan memberikan urungkan, memberikan umpan balik visual yang baik, memiliki pemisahan fisik yang jelas antara perintah yang sering digunakan dan perintah yang merusak, dan memungkinkan pengguna untuk memperbaiki kesalahan dengan mudah. Terkait dengan pengampunan mencegah tindakan yang tidak diinginkan terjadi di tempat pertama, yang dapat Anda lakukan dengan menggunakan kontrol yang dibatasi dan konfirmasi untuk tindakan atau perintah berisiko yang memiliki konsekuensi yang tidak diinginkan.

• Berikan perintah Batalkan. Sebaiknya berikan cara sederhana untuk membatalkan semua perintah, tetapi aplikasi Anda mungkin memiliki beberapa perintah yang efeknya tidak dapat dibatalkan.

• Setiap kali praktis, berikan umpan balik yang baik tentang jari ke bawah, tetapi jangan mengambil tindakan sampai jari ke atas. Melakukannya memungkinkan pengguna untuk memperbaiki kesalahan sebelum mereka membuatnya.

• Setiap kali praktis, memungkinkan pengguna untuk memperbaiki kesalahan dengan mudah. Jika tindakan berlaku pada jari ke atas, izinkan pengguna untuk memperbaiki kesalahan dengan geser saat jari masih turun.

• Setiap kali praktis, menunjukkan bahwa manipulasi langsung tidak dapat dilakukan dengan menolak gerakan. Izinkan pergerakan terjadi, tetapi minta objek menetap kembali ketika dirilis untuk dengan jelas menunjukkan tindakan dikenali tetapi tidak dapat dilakukan.

• Memiliki pemisahan fisik yang jelas antara perintah yang sering digunakan dan perintah destruktif. Jika tidak, pengguna mungkin menyentuh perintah destruktif secara tidak sengaja. Perintah dianggap merusak jika efeknya tersebar luas dan tidak dapat dengan mudah dibatalkan atau efeknya tidak segera terlihat.

• Konfirmasi perintah untuk tindakan atau perintah berisiko yang memiliki konsekuensi yang tidak diinginkan. Gunakan kotak dialog konfirmasi untuk tujuan ini.

• Pertimbangkan untuk mengonfirmasi tindakan lain yang cenderung dilakukan pengguna secara tidak sengaja saat menggunakan sentuhan, dan mana yang lugas atau sulit untuk dibatalkan. Biasanya, ini disebut konfirmasi rutin dan tidak disarankan berdasarkan asumsi bahwa pengguna tidak sering mengeluarkan perintah tersebut secara tidak sengaja dengan mouse atau keyboard. Untuk mencegah konfirmasi yang tidak perlu, sajikan konfirmasi ini hanya jika perintah dimulai menggunakan sentuhan.

  Konfirmasi rutin dapat diterima untuk interaksi yang sering dilakukan pengguna secara tidak sengaja menggunakan sentuhan.

  Pengembang: Anda dapat membedakan antara peristiwa mouse dan peristiwa sentuh menggunakan API INPUT_MESSAGE_SOURCE.