Beranda » Toolkit » Pengaruh Desain Inklusif Microsoft dalam Kode Visual Studio

    Pengaruh Desain Inklusif Microsoft dalam Kode Visual Studio

    Universal, atau desain inklusif adalah filosofi desain baru yang Microsoft anggap serius dalam pengembangan perangkat lunak baru-baru ini. Desain inklusif membawa desain yang dapat diakses ke tingkat berikutnya, karena melihat aksesibilitas dari perspektif yang jauh lebih luas. Ketika saya menguji editor kode sumber baru Microsoft, Visual Studio Code, pertanyaan tentang bagaimana mereka menerapkan teori dalam praktik secara alami muncul dalam pikiran saya.

    Posting ini tidak bermaksud semata-mata deskripsi fitur aksesibilitas Visual Studio Code, seperti dalam dokumen resmi Anda dapat menemukan rekap yang hebat dari mereka, melainkan bertujuan untuk menjadi studi kasus tentang apa yang harus diperhatikan ketika Anda ingin mendesain aplikasi inklusif di masa depan.

    Karena kita dapat yakin bahwa inklusivitas akan segera menjadi persyaratan dalam perangkat lunak dan desain web, tentu saja tidak hanya untuk alasan altruistik, tetapi karena itu akan membawa banyak pengguna baru ke meja.

    4 Prinsip Desain Inklusif Microsoft

    Windows Dev Center menempatkan desain perangkat lunak yang dapat diakses di dalam kategori Kegunaan, dan mereka juga menerbitkan banyak artikel bagus tentang topik ini. Microsoft empat prinsip desain inklusif (tercantum secara singkat di bawah) dibahas dalam artikel ini.

    1. Berpikir universal.
    2. Buat itu pribadi.
    3. Simpan saja sederhana.
    4. Membuat menyenangkan.

    Jika Anda telah membaca artikel asli, Anda akan melihat prinsip-prinsip dijelaskan dengan cara yang tidak selalu mudah untuk diuji, menggunakan ungkapan seperti "hubungan emosional", "membangkitkan keajaiban", dan "gaib". Jadi saya lebih suka tetap membumi, menghilangkan konotasi subyektif ini, dan mengubah prinsip-prinsip menjadi kriteria objektif.

    Ketika saya menganalisis bagaimana mereka diimplementasikan dalam Visual Studio Code, saya menggunakannya dalam pengertian berikut:

    1. Berpikir universal: Aksesibilitas
    2. Buat itu pribadi: Kemampuan penyesuaian, ekstensibilitas
    3. Simpan saja sederhana: Antarmuka pengguna yang bebas gangguan, logis
    4. Membuat menyenangkan: Fitur yang dapat ditemukan

    Tentu saja, ini hanya satu kemungkinan kategorisasi, dan ada banyak tumpang tindih, misalnya kustomisasi juga dapat menjadi bagian dari “Ciptakan kesenangan” prinsip, tetapi karena kita membutuhkan sesuatu yang nyata, mari kita berpegang pada interpretasi ini untuk saat ini.

    Sementara Windows Dev Center merekomendasikan prinsip-prinsip desain inklusif ini untuk diterapkan pada aplikasi Windows 10, Microsoft juga mendedikasikan situs Desain Microsoft-nya untuk desain inklusif.

    Meskipun Visual Studio Code tidak hanya untuk Windows 10 tetapi ditujukan untuk menjadi perangkat lunak lintas platform, kita masih dapat dengan aman menguji fitur-fiturnya terhadap prinsip-prinsip tersebut di atas, karena Microsoft dengan jelas memperlakukan desain inklusif sebagai jalur desain perangkat lunak yang ingin mereka ikuti di masa depan..

    Pikirkan Universal

    Di bawah “Pikirkan Universal” prinsipnya, kami akan meneliti bagaimana diaksesnya Visual Studio Code untuk beragam kelompok pengguna, seperti pengguna teknologi bantuan (apakah mereka menggunakannya untuk cacat atau preferensi), orang-orang dengan teknologi terbatas, penutur bahasa Inggris non-pribumi, dll.

    1. Zoom

    Zoom dapat dengan mudah dilakukan dengan menekan Ctrl + = / Cmd + = (Mac) pintasan keyboard untuk Perbesar, dan Ctrl + - / Cmd + - (Mac) pintas untuk Perkecil, dan kami juga dapat mengakses fitur Zoom melalui bilah menu atas.

    Perhatikan, bahwa pada versi 1.1.1, pada keyboard Windows tanda + dan - tidak berfungsi pada keypad numerik di sebelah kanan, hanya pada keypad pengetikan (alfanumerik) - yang mungkin bukan yang terbaik untuk inklusivitas.

    Fitur Tingkat Zoom Tetap agak mengompensasi ini, karena memungkinkan kita untuk dengan mudah mengkonfigurasi a tingkat Zoom yang persisten di Pengaturan Pengguna (baca posting saya sebelumnya tentang cara melakukan ini).

    2. Tema Kontras Tinggi

    Tema kontras tinggi memudahkan memproses informasi visual untuk pengguna tunanetra, dan karena itu mereka merupakan elemen penting dari aksesibilitas.

    Ada tema Kontras Tinggi default dalam Visual Studio Code, yang dapat Anda atur dengan mengklik pada File> Preferensi> Tema Warna menu, tetapi Anda dapat mengunduh yang lain dari Visual Studio Code Marketplace juga.

    Microsoft memperkenalkan tema Kontras Tinggi di Windows 7, senang melihat bahwa mereka menindaklanjuti dengan fitur ini.

    3. Navigasi Keyboard

    Menyediakan navigasi keyboard sangat penting bagi orang yang tidak dapat menggunakan mouse karena cacat visual atau mobilitas. Navigasi keyboard yang efektif melibatkan pengguna dapat mengontrol setiap fungsionalitas sebuah perangkat lunak dengan hanya menggunakan keyboard.

    Visual Studio Code mengimplementasikan fitur ini dengan baik, dan walaupun banyak binding kunci yang telah ditetapkan (lihat daftar lengkap), pengguna juga dapat menyesuaikan pintasan keyboard dengan bantuan file konfigurasi format JSON.

    4. Tab Navigasi

    Navigasi tab memungkinkan lompati semua area yang berbeda Kode Visual Studio.

    Saat ini, pada versi 1.1.1, VS Code tidak mendukung navigasi tab untuk semua area, misalnya bilah menu atas tidak tersedia dengan cara ini. Berita baiknya adalah Microsoft mengakui kurangnya fitur ini dalam Masalah yang Diketahui Saat Ini di dalam dokumen.

    Selama pengujian, saya menemukan bahwa Editor, itu Bilah Sisi, itu Lihat Bilah (lihat penamaan area VS Code), dan semua tindakan dan item mereka dapat diakses dengan tombol Tab. Meskipun pengguna Tab tidak dapat mengakses fungsi bilah menu atas dengan keyboard mereka. Command Palette F1 dapat menggantikan ini, karena semua perintah yang dapat ditemukan di menu atas dapat diakses dari sana juga.

    Fitur aksesibilitas penting dari navigasi tab adalah tab trapping yang memungkinkan pengguna untuk beralih di antara dua fungsi tombol Tab. Tombol Tab yang terperangkap memungkinkan untuk bergerak melintasi berbagai bagian Kode VS, sementara biasanya tombol Tab menambahkan karakter Tab ke file teks buka di area Editor. Pengguna dapat beralih di antara dua kemampuan dengan menekan tombol Ctrl + M mengikat.

    5. Pembaca Layar

    Tentu saja, perangkat lunak yang dapat diakses harus sepenuhnya tersedia untuk pengguna pembaca layar juga. Dokumen menyebutkan bahwa tim pengembang VS Code menguji ketersediaan pembaca layar dengan pembaca layar NVDA.

    Untuk pengujian, saya menggunakan dua pembaca layar lain, JAWS yang merupakan salah satu aplikasi pembaca layar yang paling banyak digunakan, dan Microsoft Narrator yang merupakan pembaca layar bawaan Windows 10..

    MULUT membaca dengan keras semua area, perintah dan menu dengan rajin, namun Narrator memiliki beberapa masalah yang lebih kecil dengan tugas tersebut. Sebagai contoh, itu hanya membaca item menu atas dengan benar ketika saya memindahkannya dengan mouse, tetapi tidak ketika saya menggunakan panah Bawah pada keyboard saya. Namun, ini lebih merupakan kekurangan Narrator, bukan Visual Studio Code, jadi kami dapat dengan aman berasumsi bahwa pengguna tunanetra dapat mengakses semua fungsionalitas Kode VS dengan menggunakan aplikasi pembaca layar yang lebih canggih.

    6. Aksesibilitas Debugger

    Untuk membuat aplikasi sepenuhnya dapat diakses dan inklusif, kita juga perlu memperhatikan bagian-bagian yang mungkin tidak muncul pertama kali dalam pikiran kita. Dalam hal Visual Studio Code, Debugger adalah contoh yang baik untuk ini. Tim pengembang memperhatikan untuk membuatnya inklusif juga, karena itu ia juga mendukung navigasi Tab dan keyboard, dan pembaca layarnya dapat diakses.

    7. Lokalisasi

    Sekarang kita siap membahas fitur aksesibilitas Daftar VS Code dalam dokumen, tetapi ada hal-hal penting lainnya yang perlu kita sebutkan ketika kita berbicara tentang “Pikirkan Universal” prinsip desain inklusif. Salah satunya adalah lokalisasi, atau dengan kata lain dukungan untuk bahasa asing sebagai bahasa tampilan, karena banyak orang di dunia bukanlah penutur asli bahasa Inggris.

    Visual Studio Code saat ini dilokalisasi untuk 10 bahasa tampilan berbeda (Inggris, Cina Sederhana, Cina Tradisional, Prancis, Jerman, Italia, Jepang, Korea, Rusia, Spanyol).

    Pengguna yang berasal dari bahasa ini bahkan tidak perlu mengonfigurasi bahasa tampilan mereka, seperti VS Code mengambil bahasa tampilan sistem operasi secara default. Jika mereka ingin mengatur bahasa lain sebagai bahasa tampilan, mereka dapat dengan mudah mengkonfigurasi bahasa mereka locale.json mengajukan.

    Mungkin 10 bahasa tampilan tidak banyak, tetapi juga tidak buruk jika kita mempertimbangkan bahwa VS Code adalah perangkat lunak baru, dan Microsoft kemungkinan besar akan mendukung lebih banyak di masa depan. Untuk saat ini, pengguna yang bahasanya tidak termasuk yang didukung memasang VS Code mereka dalam bahasa Inggris.

    8. Ukuran yang Dapat Diakses

    Editor kode sumber modern tidak terlalu besar, dan Microsoft juga telah bergabung dengan tren ini, karena Visual Studio Code adalah kurang dari 100 MB unduh, dan jejak disk-nya kurang dari 200 MB.

    9. Pengembangan Lintas-Platform

    Jika kita menginginkan perangkat lunak yang inklusif, tentu saja itu juga harus cross-platform yang berarti perlu dijalankan pada sistem operasi yang berbeda. VS Code memenuhi persyaratan ini, karena mendukung Windows, OS X dan Linux demikian juga.

    Jadikan pribadi

    “Jadikan pribadi” adalah prinsip kedua Microsoft tentang desain inklusif, dan kita akan melihatnya kemampuan penyesuaian dan kemungkinan diperpanjang di bawah kriteria ini, seperti yang saya janjikan sebelumnya. Visual Studio Code memenuhi kedua persyaratan dengan sangat baik sehingga saya bahkan menulis posting terpisah pada keduanya, di sini tentang kemampuan penyesuaian, dan di sini tentang ekstensibilitas.

    Singkatnya, kemampuan penyesuaian diterapkan dengan tema khusus dan pengaturan konfigurasi format-JSON yang termodulasi, sementara ekstensibilitas dicapai oleh ekstensi khusus yang dapat diunduh pengguna dari Visual Studio Code Marketplace, atau buat sendiri di TypeScript atau JavaScript.

    Anda dapat membaca lebih lanjut tentang latar belakang teknis dari pendekatan Visual Studio Code untuk diperpanjang di sini.

    Kemampuan kustomisasi diselesaikan dengan cara yang ideal untuk orang yang mengerti teknologi yang merupakan pengguna khas editor kode sumber, karena sebagian besar diimplementasikan melalui file konfigurasi format-JSON yang termodulasi.

    Ini adalah solusi yang bagus, karena opsi konfigurasi tidak tersembunyi di balik hierarki menu besar yang sulit dilihat. Pengguna, bahkan jika mereka bukan ahli coding, bisa mudah mengedit kustom mereka .json file, sebagai Visual Studio Code membuka pengaturan default dan kustom di dua panel editor tepat di sebelah satu sama lain, memungkinkan pengguna untuk dengan mudah bereksperimen dengan mereka.

    File konfigurasi dimodulasi, mereka datang sebagai hierarki terstruktur secara logis .json file, inilah daftar yang paling penting:

    1. pengaturan.json untuk Pengaturan Pengguna kustom, dapat diakses melalui File> Preferensi> Pengaturan Pengguna menu
    2. .vscode / settings.json untuk Pengaturan ruang kerja kustom, dapat diakses melalui File> Preferensi> Pengaturan Workpraces menu
    3. keybindings.json untuk binding kunci kustom, dapat diakses melalui File> Preferensi> Pintasan Keyboard menu
    4. javascript.json, php.json, css.json, c. json, dan banyak lainnya .json file untuk berbagai bahasa pemrograman untuk pengaturan Cuplikan Pengguna khusus, dapat diakses melalui File> Preferensi> Cuplikan Pengguna menu
    5. launch.json untuk Pengaturan Debugger kustom, dapat diakses dengan mengklik ikon roda gigi pada bilah atas Tampilan Debug (di sebelah kiri editor)
    6. .vscode / locale.json untuk pengaturan Bahasa Tampilan kustom, diakses dengan mengetikkan Konfigurasikan Bahasa perintah ke Command Palette (F1)
    7. .vscode / task.json untuk Pengaturan Task Runner kustom, diakses dengan mengetikkan Konfigurasikan Pelari Tugas perintah ke Command Palette (F1)

    Saya pikir pengguna VS Code hampir tidak bisa mengeluh tentang kemampuan penyesuaian, karena bahkan daftar opsi adalah tugas yang melelahkan.

    Karena opsi konfigurasi dimodulasi, pengguna hanya perlu mengurusnya mereka sangat membutuhkan, yang membantu mereka tetap fokus pada tugas yang ingin mereka lakukan. Dengan demikian, mereka akan dibiarkan dengan alur kerja yang lebih intuitif.

    Tetap Sederhana

    Kita bisa bertemu dengan Microsoft Tetap Sederhana prinsip desain inklusif di banyak tempat lain dalam pemrograman dan desain, pikirkan saja prinsip desain KISS (Keep It Simple, Stupid), dan prinsip pengembangan perangkat lunak KERING (Jangan Ulangi Diri Sendiri). Untuk konteks yang sedang berjalan ini, kami akan tetap fokus pada kesederhanaan antarmuka pengguna.

    Dalam hal aksesibilitas, antarmuka pengguna yang mudah digunakan dan sederhana biasanya direkomendasikan karena pengguna yang memiliki cacat kognitif dan intelektual. Karena Visual Studio Code adalah editor kode sumber, itu mungkin bukan perangkat lunak yang sering digunakan oleh orang-orang yang memiliki gangguan semacam ini, namun mungkin ada beberapa area abu-abu juga.

    Kesederhanaan tidak hanya penting karena mereka, sebagai antarmuka logis yang dirancang dengan baik juga bisa menurunkan kurva belajar, dan meningkatkan kecepatan kerja, membuat perangkat lunak lebih menarik bagi masyarakat umum juga.

    Kode Visual Studio juga memanfaatkan fenomena psyhologis yang terkenal, efek paparan belaka (atau fenomena keakraban), karena mengadopsi tata letak dasar yang mirip dengan tata letak editor kode sumber terkenal lainnya, seperti Atom, gunakan.

    Dari dokumen kita dapat mengetahui bahwa itu adalah upaya Microsoft memberikan dampak besar pada:

    VS Code juga menyediakan pengguna dengan fitur Pengeditan Berdampingan yang juga dapat ditemukan di editor kode sumber lainnya, dan itu bukan kebetulan, karena itu membuat proses pengkodean jauh lebih sederhana, dan tentu saja berkontribusi pada “Tetap Sederhana” prinsip desain inklusif juga.

    Di atas UI dasar, Visual Studio Code memiliki fitur keren yang layak disebutkan dalam artikel tentang desain inklusif, seperti:

    • Intellisense yang memberi pengguna saran berdasarkan konteks (bagian backend yang menggunakan kecerdasan buatan juga merupakan solusi yang bagus)
    • Mengintip (Shift + F12) yang menampilkan definisi fungsi lengkap di jendela sebaris
    • Palet Komando (F1) yang membuat semua perintah dapat diakses di tempat yang sama.

    Buat Delight

    Sangat tidak mudah untuk menemukan kriteria nyata yang dapat kita gunakan untuk memeriksa “Buat Delight” prinsip desain inklusif, jadi saya akhirnya setuju dengan kriteria fitur dapat ditemukan, sebagaimana Microsoft mendefinisikan prinsip ini dengan cara berikut:

    Ungkapan ini mungkin mengingatkan Anda akan momen mikro, salah satu hal besar terbaru Google, dan karenanya menunjukkan bagaimana perusahaan teknologi terkemuka bisa sampai pada kesimpulan yang sama ketika mereka berpikir tentang cara memajukan industri..

    Dalam desain inklusif, sangat penting untuk melakukannya melibatkan pengguna, dan membangkitkan rasa ingin tahu mereka, yang bisa kita capai mungkin yang terbaik jika kita bantu mereka bergerak maju ketika mereka mencapai titik tertentu dalam perjalanan pengguna mereka. Hanya di saat yang tepat, tidak sebelumnya, tidak setelah.

    Ketika kita berbicara tentang fitur dapat ditemukan, perwujudan yang lebih duniawi dari menciptakan kesenangan, itu dapat ditingkatkan dengan hal-hal seperti navigasi utilitas yang dirancang dengan baik, dokumentasi cerdas, dan informasi yang mendukung yang muncul hanya pada saat yang tepat.

    Kita dapat menemukan contoh untuk semua fitur ini dalam Visual Studio Code, pikirkan saja yang disebutkan di atas IntelliSense dan Palet Komando, tapi penyorotan sintaksis dan cuplikan kode khusus juga dapat membantu pengguna untuk memaksimalkan perangkat lunak. Anda perlu menilai sendiri apakah menggunakan Visual Studio Code membuat Anda senang.

    Bagi saya sendiri, saya kurang lebih menyukai pengalaman: the dokumentasi online terstruktur dengan baik, itu Visual Studio Code Marketplace yang mudah dinavigasi, dan tema warna khusus yang dapat dipratinjau real-time saat menggulir daftar drop-down (mengaksesnya melalui File> Preferensi> Tema Warna menu).

    Kata-kata terakhir

    Karena desain inklusif adalah bidang baru, industri teknologi masih dalam tahap eksperimen. Saya pikir Microsoft membuat tonggak penting oleh mendefinisikan empat prinsip desain inklusif.

    Seperti yang bisa kita lihat, mereka berhasil menerapkan teori dalam praktek di editor kode sumber baru mereka, Visual Studio Code, meskipun masih ada beberapa bidang untuk ditingkatkan, seperti memberikan dukungan Tab penuh dan fitur Pencarian dan Ganti global.

    Karena aksesibilitas dan inklusivitas keduanya bagian dari pengalaman pengguna, itu bisa menjadi ide yang baik untuk belajar lebih banyak tentang mereka jika Anda ingin mengikuti tren industri terbaru. Berikut adalah sumber daya yang dapat membantu:

    • Artikel aksesibilitas Windows Dev Center
    • Manual Toolkit Desain Inklusif Microsoft Design (PDF) (dapat diunduh)
    • Tag aksesibilitas Hongkiat.com