Interaksi
Nota
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 .
Interaksi adalah berbagai cara pengguna berinteraksi dengan aplikasi Anda, termasuk sentuhan, keyboard, mouse, dan sebagainya. Gunakan panduan ini untuk menciptakan pengalaman intuitif dan khas yang dioptimalkan untuk sentuhan tetapi bekerja secara konsisten di seluruh perangkat input.
Mendesain untuk pengalaman sentuhan pertama
Pertama dan terpenting, rancang aplikasi Anda dengan harapan bahwa sentuhan akan menjadi metode input utama pengguna Anda. Jika Anda menggunakan kontrol platform, dukungan untuk touchpad, mouse, dan pena/stylus tidak memerlukan pemrograman tambahan, karena Windows menyediakan ini secara gratis.
Namun, perlu diingat bahwa UI yang dioptimalkan untuk sentuhan tidak selalu lebih unggul daripada UI tradisional. Keduanya memberikan kelebihan dan kekurangan yang unik untuk teknologi dan aplikasi. Dalam perpindahan ke UI touch-first, penting untuk memahami perbedaan inti antara sentuhan (termasuk touchpad), pena/stylus, mouse, dan input keyboard. Jangan mengambil properti dan perilaku perangkat input yang familier untuk diberikan, karena sentuhan di Windows 8 tidak hanya meniru fungsionalitas tersebut.
Saat Anda akan segera menemukan, input sentuhan memerlukan pendekatan yang berbeda untuk desain UI.
Membandingkan persyaratan interaksi sentuh
Tabel ini memperlihatkan beberapa perbedaan antara perangkat input yang harus Anda pertimbangkan saat merancang aplikasi Windows Store yang dioptimalkan sentuhan.
| Faktor | Interaksi sentuh | Mouse, keyboard, interaksi pena/stylus | Touchpad |
|---|---|---|---|
|
Presisi |
Area kontak ujung jari lebih besar dari satu koordinat x-y, yang meningkatkan kemungkinan aktivasi perintah yang tidak diinginkan. |
Mouse dan pena/stylus menyediakan koordinat x-y yang tepat. |
Sama seperti mouse. |
| Bentuk area kontak berubah di seluruh pergerakan. |
Gerakan mouse dan goresan pena/stylus memasok koordinat x-y yang tepat. Fokus keyboard bersifat eksplisit. |
Sama seperti mouse. |
|
| Tidak ada kursor mouse untuk membantu penargetan. |
Kursor mouse, kursor pena/stylus, dan fokus keyboard semuanya membantu penargetan. |
Sama seperti mouse. |
|
|
anatomi manusia |
Gerakan ujung jari tidak tepat, karena gerakan garis lurus dengan satu atau beberapa jari sulit. Hal ini disebabkan oleh kelengkungan sendi tangan dan jumlah sendi yang terlibat dalam gerakan. |
Lebih mudah untuk melakukan gerakan garis lurus dengan mouse atau pena/stylus karena tangan yang mengontrol mereka melakukan jarak fisik yang lebih pendek daripada kursor di layar. |
Sama seperti mouse. |
| Beberapa area pada permukaan sentuh perangkat tampilan dapat sulit dijangkau karena postur jari dan cengkeraman pengguna pada perangkat. |
Mouse dan pena/stylus dapat mencapai bagian layar mana pun sementara kontrol apa pun harus dapat diakses oleh keyboard melalui urutan tab. |
Postur jari dan genggaman bisa menjadi masalah. |
|
| Objek mungkin dikaburkan oleh satu atau beberapa ujung jari atau tangan pengguna. Ini dikenal sebagai oklusi. |
Perangkat input tidak langsung tidak menyebabkan oklusi. |
Sama seperti mouse. |
|
|
status Objek |
Sentuhan menggunakan model dua status: permukaan sentuh perangkat layar disentuh (menyala) atau tidak (mati). Tidak ada status hover yang dapat memicu umpan balik visual tambahan. |
Mouse, pena/stylus, dan keyboard semuanya mengekspos model tiga status: atas (mati), bawah (hidup), dan arahkan kursor (fokus). Hover memungkinkan pengguna menjelajahi dan mempelajari tipsalat yang terkait dengan elemen UI. Mengarahkan kursor dan efek fokus dapat menyampaikan objek mana yang interaktif dan juga membantu penargetan. |
Sama seperti mouse. |
|
interaksi kaya |
Mendukung multi-sentuhan: beberapa titik input (ujung jari) pada permukaan sentuh. |
Mendukung satu titik input. |
Sama seperti sentuhan. |
| Mendukung manipulasi objek secara langsung melalui gerakan seperti mengetuk, menyeret, menggeser, mencubit, dan memutar. |
Tidak ada dukungan untuk manipulasi langsung sebagai mouse, pena/stylus, dan keyboard adalah perangkat input tidak langsung. |
Sama seperti mouse. |
Catatan
Input tidak langsung telah memiliki manfaat lebih dari 25 tahun penyempurnaan. Fitur seperti tipsalat yang dipicu hover telah dirancang untuk menyelesaikan eksplorasi UI khusus untuk touchpad, mouse, pena/stylus, dan input keyboard. Fitur UI seperti ini telah dirancang ulang untuk pengalaman kaya yang disediakan oleh input sentuhan, tanpa mengorbankan pengalaman pengguna untuk perangkat lain ini.
Kami memberikan beberapa panduan interaksi pengguna umum di sini dan membahas panduan khusus perangkat dalam topik ini.
- Touch
- Mouse
- Pena
- Keyboard
- Aksesibilitas
Visual untuk umpan balik
Umpan balik visual yang sesuai selama interaksi dengan aplikasi Anda membantu pengguna mengenali, mempelajari, dan beradaptasi dengan bagaimana interaksi mereka ditafsirkan oleh aplikasi dan umpan balik Visual Windows dapat menunjukkan interaksi yang berhasil, status sistem relai, meningkatkan rasa kontrol, mengurangi kesalahan, membantu pengguna memahami sistem dan perangkat input, dan mendorong interaksi.
Umpan balik visual sangat penting ketika pengguna mengandalkan input sentuh untuk aktivitas yang memerlukan akurasi dan presisi berdasarkan lokasi. Tampilkan umpan balik setiap kali dan di mana pun input sentuh terdeteksi, untuk membantu pengguna memahami aturan penargetan kustom apa pun yang ditentukan oleh aplikasi Anda dan kontrolnya.
Optimalkan untuk akurasi
Input sentuh melibatkan seluruh area kontak jari. Geometri kontak ini digunakan untuk menentukan objek target yang paling mungkin. Ukur kontrol Anda untuk memastikan UI yang nyaman dengan objek dan kontrol yang mudah dan aman untuk ditargetkan.
Ukuran, ruang, dan posisikan kontrol Anda untuk membantu menghilangkan oklusi jari dan tangan, di mana UI dikaburkan oleh interaksi pengguna itu sendiri.
Menu posisi, pop-up, dan tipsalat di atas area kontak jika memungkinkan.
Batasi keyakinan
Hindari, atau minimalkan, interaksi ceroboh dengan menggunakan batasan UI.
- Titik jepret dapat mempermudah untuk berhenti di lokasi yang diinginkan. Titik snap menentukan perhentian logis di konten aplikasi Anda. Secara kognitif, snap point bertindak sebagai mekanisme paging untuk pengguna dan meminimalkan kelelahan dari geser, menggesek, atau memutar yang berlebihan. Dengan mereka, Anda dapat menangani input pengguna yang tidak tepat dan memastikan subset tertentu dari konten atau informasi kunci ditampilkan.
- "Rel" terarah yang menekankan sumbu gerakan (vertikal atau horizontal).
Hindari interaksi berwaktif
Interaksi tidak boleh dibedakan berdasarkan waktu. Interaksi yang sama harus memiliki hasil yang sama terlepas dari waktu yang diperlukan untuk melakukannya. Aktivasi berbasis waktu memperkenalkan penundaan wajib bagi pengguna dan mengurangi sifat manipulasi langsung yang imersif dan persepsi responsivitas sistem.
Interaksi berwaktu biasanya bergantung pada ambang batas yang tidak terlihat seperti waktu, jarak, atau kecepatan untuk menentukan perintah apa yang akan dilakukan. Interaksi berwaktif tidak memiliki umpan balik visual sampai sistem melakukan tindakan dan pengguna harus mencapai ambang batas arbitrer dan tidak terlihat untuk mencapai hasil. Umpan balik visual instan selama interaksi membuat pengguna merasa lebih terlibat, percaya diri, dan memegang kendali.
Interaksi yang secara langsung memengaruhi objek dan meniup interaksi dunia nyata lebih intuitif, dapat ditemukan, dan mudah diingat. Mereka tidak mengandalkan interaksi yang tidak jelas atau abstrak.
Catatan: Pengecualian untuk ini adalah tempat Anda menggunakan interaksi berwaktu tertentu untuk membantu pembelajaran dan eksplorasi (misalnya, tekan dan tahan). Menggunakan deskripsi dan isjin visual yang sesuai memiliki efek besar pada penggunaan interaksi tingkat lanjut.