Dasar-dasar perintah

Di aplikasi Windows, elemen perintah adalah elemen UI interaktif yang memungkinkan pengguna melakukan tindakan seperti mengirim email, menghapus item, atau mengirimkan formulir. Antarmuka perintah terdiri dari elemen perintah umum, permukaan perintah yang menghostingnya, interaksi yang mereka dukung, dan pengalaman yang mereka berikan.

Memberikan pengalaman perintah terbaik

Aspek terpenting dari antarmuka perintah adalah apa yang Anda coba biarkan dicapai pengguna. Saat Anda merencanakan fungsionalitas aplikasi, pertimbangkan langkah-langkah yang diperlukan untuk menyelesaikan tugas tersebut dan pengalaman pengguna yang ingin Anda aktifkan. Setelah menyelesaikan draf awal pengalaman ini, Anda dapat membuat keputusan tentang alat dan interaksi untuk mengimplementasikannya.

Berikut adalah beberapa pengalaman perintah umum:

  • Mengirim atau mengirimkan informasi
  • Memilih pengaturan dan pilihan
  • Mencari dan memfilter konten
  • Membuka, menyimpan, dan menghapus file
  • Mengedit atau membuat konten

Berkreasilah dengan desain pengalaman perintah Anda. Pilih perangkat input mana yang didukung aplikasi Anda, dan bagaimana aplikasi Anda merespons setiap perangkat. Dengan mendukung berbagai kemampuan dan preferensi terluas, Anda membuat aplikasi Anda dapat digunakan, portabel, dan dapat diakses sebanyak mungkin (lihat Desain perintah untuk aplikasi Windows untuk detail selengkapnya).

Pilih elemen perintah yang tepat

Menggunakan elemen yang tepat dalam antarmuka perintah dapat membuat perbedaan antara aplikasi yang intuitif dan mudah digunakan dan aplikasi yang sulit dan membingungkan. Sekumpulan elemen perintah yang komprehensif tersedia di aplikasi Windows. Berikut adalah daftar beberapa elemen perintah UWP yang paling umum.

gambar tombol

Tombol

Tombol memicu tindakan segera. Contohnya termasuk mengirim email, mengirimkan data formulir, atau mengonfirmasi tindakan dalam dialog.

gambar daftar

Daftar

Mencantumkan item yang ada dalam daftar interaktif atau kisi. Biasanya digunakan untuk banyak opsi atau item tampilan. Contohnya termasuk daftar drop-down, kotak daftar, tampilan daftar, dan tampilan kisi.

gambar kontrol pilihan

Kontrol pilihan

Memungkinkan pengguna memilih dari beberapa opsi, seperti saat menyelesaikan survei atau mengonfigurasi pengaturan aplikasi. Contohnya termasuk CheckBox, RadioButton, dan Sakelar Pengalih.

Gambar kalender

Pemilih kalender, tanggal, dan waktu

Pemilih kalender, tanggal, dan waktu memungkinkan pengguna untuk melihat dan mengubah info tanggal dan waktu, seperti saat membuat acara atau mengatur alarm. Contohnya termasuk pemilih tanggal kalender, tampilan kalender, pemilih tanggal, pemilih waktu.

Gambar entri teks prediktif

Entri teks prediktif

Memberikan saran sebagai jenis pengguna, seperti saat memasukkan data atau melakukan kueri. Contohnya termasuk AutoSuggestBox.

Untuk daftar lengkapnya, lihat Kontrol dan elemen UI

Tempatkan perintah di permukaan kanan

Anda dapat menempatkan elemen perintah di sejumlah permukaan di aplikasi Anda, termasuk kanvas aplikasi atau kontainer perintah khusus, seperti bilah perintah, flyout bilah perintah, bilah menu, atau dialog.

Selalu coba biarkan pengguna memanipulasi konten secara langsung daripada melalui perintah yang bertindak pada konten, seperti menyeret dan menjatuhkan untuk mengatur ulang item daftar daripada tombol perintah naik dan turun.

Namun, ini mungkin tidak dimungkinkan dengan perangkat input tertentu, atau saat mengakomodasi kemampuan dan preferensi pengguna tertentu. Dalam kasus ini, berikan kesediaan perintah sebanyak mungkin, dan tempatkan elemen perintah ini pada permukaan perintah di aplikasi Anda.

Berikut adalah daftar beberapa permukaan perintah yang paling umum.

gambar kanvas aplikasi

Kanvas aplikasi (area konten)

Jika perintah terus-menerus diperlukan bagi pengguna untuk menyelesaikan skenario inti, letakkan di kanvas. Karena Anda dapat menempatkan perintah di dekat (atau di) objek yang mereka pengaruhi, menempatkan perintah di kanvas membuatnya mudah dan jelas untuk digunakan. Namun, pilih perintah yang Anda letakkan di kanvas dengan hati-hati. Terlalu banyak perintah di kanvas aplikasi mengambil ruang layar yang berharga dan dapat membuat pengguna kewalahan. Jika perintah tidak akan sering digunakan, pertimbangkan untuk meletakkannya di permukaan perintah lain.

gambar bilah perintah

Bilah perintah dan bilah menu

Bilah perintah membantu mengatur perintah dan membuatnya mudah diakses. Bilah perintah dapat ditempatkan di bagian atas layar, di bagian bawah layar, atau di bagian atas dan bawah layar ( MenuBar juga dapat digunakan saat fungsionalitas di aplikasi Anda terlalu kompleks untuk bilah perintah).

gambar menu konteks

Menu dan menu konteks

Menu dan menu konteks menghemat ruang dengan mengatur perintah dan menyembunyikannya hingga pengguna membutuhkannya. Pengguna biasanya mengakses menu atau menu konteks dengan mengklik tombol atau mengklik kanan kontrol.

CommandBarFlyout adalah jenis menu kontekstual yang menggabungkan manfaat bilah perintah dan menu konteks ke dalam satu kontrol. Ini dapat menyediakan pintasan untuk tindakan yang umum digunakan dan menyediakan akses ke perintah sekunder yang hanya relevan dalam konteks tertentu, seperti clipboard atau perintah kustom.

UWP juga menyediakan satu set menu tradisional dan menu konteks; untuk informasi selengkapnya, lihat Menu dan menu konteks.

Berikan umpan balik perintah

Umpan balik perintah berkomunikasi kepada pengguna bahwa interaksi atau perintah terdeteksi, bagaimana perintah ditafsirkan dan ditangani, dan apakah perintah berhasil atau tidak. Ini membantu pengguna memahami apa yang telah mereka lakukan, dan apa yang dapat mereka lakukan selanjutnya. Idealnya, umpan balik harus diintegrasikan secara alami di UI Anda, sehingga pengguna tidak perlu terganggu, atau mengambil tindakan tambahan kecuali benar-benar diperlukan.

Catatan

Berikan umpan balik hanya jika perlu dan hanya jika tidak tersedia di tempat lain. Jaga UI aplikasi Anda tetap bersih dan tidak berantakan kecuali Anda menambahkan nilai.

Berikut adalah beberapa cara untuk memberikan umpan balik di aplikasi Anda.

gambar area konten bilah perintah

Bilah perintah

Area konten CommandBar adalah tempat intuitif untuk mengomunikasikan status kepada pengguna jika mereka ingin melihat umpan balik.

Gambar flyout

Flyouts

Flyout adalah popup kontekstual ringan yang dapat ditutup dengan mengetuk atau mengklik di suatu tempat di luar flyout.

Gambar dialog

Kontrol dialog

Kontrol dialog adalah overlay UI modal yang menyediakan informasi aplikasi kontekstual. Dalam kebanyakan kasus, dialog memblokir interaksi dengan jendela aplikasi hingga diberhentikan secara eksplisit, dan sering meminta semacam tindakan dari pengguna. Dialog dapat mengganggu dan hanya boleh digunakan dalam situasi tertentu. Untuk informasi selengkapnya, lihat bagian Kapan harus mengonfirmasi atau membatalkan tindakan .

Tip

Berhati-hatilah dengan berapa banyak aplikasi Anda menggunakan dialog konfirmasi; mereka bisa sangat membantu ketika pengguna membuat kesalahan, tetapi mereka adalah hambatan setiap kali pengguna mencoba melakukan tindakan dengan sengaja.

Kapan harus mengonfirmasi atau membatalkan tindakan

Tidak peduli seberapa baik dirancang UI aplikasi Anda, semua pengguna melakukan tindakan yang mereka inginkan tidak. Aplikasi Anda dapat membantu dalam situasi ini dengan memerlukan konfirmasi tindakan, atau dengan menyediakan cara untuk membatalkan tindakan terbaru.

Untuk tindakan yang tidak dapat dibatalkan dan memiliki konsekuensi besar, sebaiknya gunakan dialog konfirmasi. Contoh tindakan tersebut meliputi:

  • Menimpa file
  • Tidak menyimpan file sebelum menutup
  • Mengonfirmasi penghapusan permanen file atau data
  • Melakukan pembelian (kecuali pengguna memilih untuk tidak memerlukan konfirmasi)
  • Mengirimkan formulir, seperti mendaftar untuk sesuatu

Untuk tindakan yang dapat dibatalkan, menawarkan perintah urungkan sederhana biasanya cukup. Contoh tindakan tersebut meliputi:

  • Menghapus file
  • Menghapus email (tidak secara permanen)
  • Mengubah konten atau mengedit teks
  • Mengganti nama file

Optimalkan untuk jenis input tertentu

Lihat Primer interaksi untuk detail selengkapnya tentang mengoptimalkan pengalaman pengguna seputar jenis input atau perangkat tertentu.