UX Essentials untuk Visual Studio

Praktik terbaik

1. Konsisten dalam lingkungan Visual Studio.

• Ikuti pola interaksi yang ada dalam shell.

• Fitur desain agar konsisten dengan bahasa visual shell dan persyaratan pengerjaan.

• Gunakan perintah dan kontrol bersama saat ada.

• Pahami hierarki Visual Studio dan caranya menetapkan konteks dan mendorong UI.

2. Gunakan layanan lingkungan untuk font dan warna.

• UI harus menghormati pengaturan font lingkungan saat ini kecuali diekspos untuk kustomisasi di halaman Font dan Warna dalam dialog Opsi.

• Elemen UI harus menggunakan Layanan VSColor, menggunakan token lingkungan bersama atau token khusus fitur.

3. Buat semua citra konsisten dengan gaya VS baru.

• Ikuti prinsip desain Visual Studio untuk ikon, glyph, dan grafik lainnya.

• Jangan menempatkan teks dalam elemen grafik.

4. Desain dari perspektif yang berpusat pada pengguna.

• Buat alur tugas sebelum fitur individual di dalamnya.

• Kenali pengguna Anda dan buat pengetahuan itu eksplisit dalam spesifikasi Anda.

• Saat meninjau UI, evaluasi pengalaman lengkap serta detailnya.

• Rancang UI Anda sehingga tetap berfungsi dan menarik terlepas dari lokal atau bahasa.

Resolusi layar

Resolusi minimum

• Resolusi minimum untuk Visual Studio 2015 adalah 1280x720. Ini berarti bahwa dimungkinkan untuk menggunakan Visual Studio pada resolusi ini, meskipun mungkin bukan pengalaman pengguna yang optimal. Tidak ada jaminan bahwa semua aspek akan dapat digunakan pada resolusi yang lebih rendah dari 1280x720.

• Resolusi target untuk Visual Studio adalah 1366x768. Ini adalah resolusi terendah di mana kami menjanjikan pengalaman pengguna yang baik .

• Tinggi dialog awal harus lebih kecil dari 700 piksel, sehingga sesuai dengan resolusi minimum bingkai IDE pada 96 dpi.

Tampilan dengan kepadatan tinggi

UI di Visual Studio harus bekerja dengan baik di semua faktor penskalaan DPI yang didukung Windows di luar kotak: 150%, 200%, dan 250%.

Anti-pola

Visual Studio berisi banyak contoh UI yang mengikuti panduan dan praktik terbaik kami. Dalam upaya untuk konsisten, pengembang sering meminjam dari pola desain UI produk yang mirip dengan apa yang mereka bangun. Meskipun ini adalah pendekatan yang baik yang membantu kami mendorong konsistensi dalam interaksi pengguna dan desain visual, kami melakukan pada kesempatan fitur pengiriman dengan beberapa detail yang tidak memenuhi pedoman kami karena batasan jadwal atau prioritas cacat. Dalam kasus ini, kami tidak ingin tim menyalin salah satu "anti-pola" ini karena mereka meluaskan UI yang buruk atau tidak konsisten dalam lingkungan Visual Studio.

Bidang/pengaturan yang diperlukan ditampilkan dalam status kesalahan secara default

Tujuan tim fitur

• Peringatkan pengguna bahwa mereka telah menambahkan elemen yang harus dikonfigurasi.

• Menarik perhatian pengguna ke area yang memerlukan input.

Solusi anti-pola

Segera setelah pengguna memulai tindakan dan sebelum mereka menyelesaikan tugas, segera tempatkan ikon critical-stop di samping area yang membutuhkan konfigurasi.

Contoh: Deklarasi Perancang Manifes

Menambahkan deklarasi ke daftar segera menempatkannya dalam status kesalahan, yang bertahan hingga pengguna mengatur properti yang diperlukan.

Dalam hal ini, ada kekhawatiran tambahan karena ikon yang digunakan untuk pemberitahuan berisi ikon "×", sehingga ikon hapus umum tidak dapat digunakan di sampingnya. Akibatnya, UI menggunakan tombol Hapus, kontrol yang lebih kikuk.

Menempatkan UI dalam status kesalahan secara default adalah anti-pola Visual Studio.

Alternatif

Solusi yang lebih baik untuk masalah ini adalah:

• Izinkan pengguna untuk menambahkan deklarasi tanpa peringatan lalu segera berpindah untuk mengatur properti pada item.

• Tambahkan ikon peringatan (segitiga emas) saat fokus berpindah dari item, seperti menambahkan deklarasi lain ke daftar atau untuk mencoba mengubah tab dalam perancang.

• Jika pengguna mencoba mengubah tab sebelum mengatur properti pada deklarasi apa pun, munculkan dialog yang menjelaskan bahwa aplikasi tidak akan membangun (atau apa pun implikasinya) hingga peringatan diselesaikan. Jika pengguna menutup tab dialog dan perubahan, maka ikon (kritis atau peringatan, sebagaimana mewajibkan) ditambahkan ke tab Deklarasi.

Beberapa klik untuk menutup UI

Tujuan tim fitur

Jangan izinkan pengguna untuk menutup UI tanpa terlebih dahulu melihat teks penjelasan.

Anti-pola

Tim yang menyisipkan tautan video ke berbagai tempat dalam VS UI memutuskan terhadap pola umum tombol tutup "×" dan penjelasan tipsalat seperti yang ditentukan oleh UX, dan sebaliknya menerapkan tautan drop-down dan "Jangan tampilkan lagi".

Contoh: Tautan video di Team Explorer

Memaksa pengguna membaca teks penjelasan sebelum menutup UI adalah anti-pola dalam Visual Studio. Dirancang dengan benar, tautan video harus menampilkan tipsalat dengan informasi tambahan tentang hover, dan mengklik "×" harus menutup pesan tanpa perlu interaksi lebih lanjut.

Pola tautan video yang salah

Alih-alih tombol tutup sederhana (satu klik), pengguna dipaksa untuk menggunakan dua klik untuk hanya menutup UI di setiap tempat tautan video muncul.

Desain yang benar untuk situasi ini adalah mengikuti pola yang umum untuk Internet Explorer, Office, dan Visual Studio: di hover, pengguna dapat melihat deskripsi tipsalat dan satu klik menyembunyikan UI.

Pola tautan video yang benar

Menggunakan bilah perintah untuk pengaturan

Gambar A mewakili anti-pola ini: menempatkan pengaturan di bawah tombol perintah yang berlaku untuk lebih dari sekadar perintah. Dalam sketsa ini, ada perintah selain Mulai Debugging — seperti Lihat di Browser, Mulai Tanpa Penelusuran Kesalahan, dan Masuk Ke — yang akan menghormati pengaturan yang dipilih.

Gambar A: Bilah perintah anti-pola

Sedikit lebih baik, tetapi masih tidak diinginkan, menempatkan pengaturan jenis ini di toolbar, seperti yang ditunjukkan pada Gambar B. Meskipun tombol terpisah membutuhkan lebih sedikit ruang dan oleh karena itu merupakan peningkatan atas drop-down, kedua desain masih menggunakan toolbar untuk mempromosikan sesuatu yang sebenarnya bukan perintah.

Gambar B: Lebih baik, tetapi masih menjadi bilah perintah anti-pola

Dalam pendekatan yang benar yang ditunjukkan pada Gambar C, pengaturan terikat dengan serangkaian perintah. Tidak ada pengaturan global yang diatur dan kami hanya beralih di antara empat perintah. Ini adalah satu-satunya situasi di mana perintah di toolbar dapat diterima.

Gambar C: Penggunaan pola bilah perintah Visual Studio yang benar

Mengontrol anti-pola

Beberapa anti-pola hanyalah penggunaan atau presentasi kontrol atau grup kontrol yang salah.

Garis bawah digunakan sebagai label grup, bukan hyperlink

Teks garis bawah harus digunakan hanya untuk hyperlink.

Buruk:

Teks bergaris bawah yang bukan hyperlink adalah anti-pola Visual Studio.

Bagus:

Ditata dengan benar, teks non-hyperlink muncul tanpa dikata dalam font lingkungan.

Mengklik kotak centang menghasilkan dialog pop-up

Mengklik kotak centang "Aktifkan Desktop Jauh untuk semua peran" di wizard "Terbitkan Aplikasi Windows Azure" segera memunculkan dialog pop-up, anti-pola Visual Studio. Selain itu, bidang kotak centang tidak diisi dengan kotak centang setelah dipilih, anti-pola interaksi lainnya.

Memunculkan dialog setelah mengklik kotak centang adalah anti-pola Visual Studio.

Anti-pola hyperlink

Contoh berikut berisi dua anti-pola:

1. Latar depan menyala merah pada hover berarti bahwa warna bersama yang benar dari layanan font tidak digunakan.

2. "Pelajari lebih lanjut" bukan teks yang sesuai untuk tautan ke topik konseptual. Tujuan pengguna adalah untuk tidak mempelajari lebih lanjut, itu adalah untuk memahami ramifikasi pilihan mereka.

   
   Mengabaikan layanan warna dan menggunakan "Pelajari lebih lanjut" untuk hyperlink adalah anti-pola Visual Studio.

Solusi yang lebih baik: Ajukan pertanyaan yang akan diajukan pengguna dengan mengklik tautan. Misalnya:

• Bagaimana cara kerja layanan Windows Azure?

• Kapan saya memerlukan proyek Windows Azure Mobile Services?

Menggunakan "Klik di sini" untuk tautan

Hyperlink harus deskriptif sendiri. Ini adalah anti-pola untuk menggunakan "Klik di sini" atau variasi serupa.

Buruk: "Klik di sini untuk instruksi tentang cara membuat proyek baru."

Bagus: "Bagaimana cara membuat proyek baru?"