Вплив Microsoft Inclusive Design на Visual Studio Code

Універсальний, або інклюзивний дизайн це нова філософія дизайну Microsoft, здається, досить серйозно ставиться до розробки програмного забезпечення останнім часом. Інклюзивний дизайн забезпечує доступність дизайну до наступного рівня, оскільки розглядає доступність з набагато ширшої точки зору. Коли я тестував новий редактор вихідного коду Microsoft, код Visual Studio, питання як вони реалізували теорію на практиці природно виникло в моїй свідомості.

Ця посада не має на меті бути лише описом функцій доступності коду Visual Studio, оскільки в офіційних документах можна знайти чудову інформацію про них, а навпаки - це те, на що слід звернути увагу, коли потрібно розробити інклюзивний додаток в майбутньому.

Тому що ми можемо бути впевнені, що інклюзивність незабаром буде обов'язковою умовою як для програмного забезпечення, так і для веб-дизайну, звичайно, не тільки з альтруїстичних причин, але й тому, що вона принесе багато нових користувачів до таблиці.

4 принципу інклюзивного дизайну Microsoft

Windows Dev Center надає доступне програмне забезпечення всередині категорії юзабіліті, вони також опублікували багато чудових статей на цю тему. Microsoft чотири принципи інклюзивного дизайну (наведені нижче) наведені в цій статті.

1. Подумайте універсальний.
2. Зроби це особистий.
3. Тримай це просто.
4. Створити захоплення.

Якщо ви прочитали оригінальну статтю, ви побачите, що принципи пояснюються таким чином, що не завжди легко перевірити, використовуючи подібні вирази "емоційна зв'язок", "викликати чудо", і "чарівний". Тому я вважаю за краще залишатися на землі, усунути ці суб'єктивні коннотації і перетворити принципи на об'єктивні критерії.

Коли я аналізую, як вони реалізовані в коді Visual Studio, я використовую їх у наступному сенсі:

1. Подумайте універсальний: Доступність
2. Зроби це особистий: Настроюваність, розширюваність
3. Тримай це просто: Безвідповідальний інтерфейс користувача
4. Створити захоплення: Можливість виявлення

Звичайно, це лише одна можлива категоризація, і є багато накладок, наприклад, можливість налаштування також може бути частиною “Створіть захоплення” Принцип, але, оскільки нам потрібно щось відчутне, давайте дотримуватимемося цього тлумачення.

Незважаючи на те, що Windows Dev Center рекомендує застосувати ці принципи інклюзивного дизайну для додатків Windows 10, корпорація Майкрософт також присвятила свій сайт дизайну Microsoft Design.

Хоча Visual Studio Code не виключно для Windows 10, але спрямований на те, щоб бути крос-платформне програмне забезпечення, ми все ще можемо безпечно перевірити його функції на вищезазначених принципах, оскільки Microsoft чітко розглядає інклюзивний дизайн як шлях до розробки програмного забезпечення, який вони хочуть дотримуватися в майбутньому.

Думайте універсально

Під “Думайте універсально” В принципі, ми розглянемо, наскільки доступний Visual Studio Code для різних груп користувачів, такі, як користувачі допоміжних технологій (незалежно від того, чи використовують вони їх для інвалідів або переваг), людей з обмеженими технологіями, носіїв англійської мови, які не є рідними, тощо.

1. Збільшити

Збільшити можна легко, натиснувши Ctrl + = / Cmd + = (Мак) для клавіатури Приближувати, і Ctrl + - / Cmd + - (Мак) ярлик для Зменшення, і ми також можемо отримати доступ до функції масштабування через верхню панель меню.

Зауважте, що за версією 1.1.1 на клавіатурі Windows знаки + та - не працюють на цифровій клавіатурі праворуч, тільки на клавіатурі, що набирає (алфавітно-цифрову) клавіатуру, яка, напевно, не найкраща для інклюзивності.

Функція «Рівень стійкого збільшення» дещо компенсує це, оскільки це дозволяє нам легко налаштувати a стійкий рівень масштабування у налаштуваннях користувача (прочитайте мій попередній пост про те, як це зробити).

2. Висока контрастна тема

Висока контрастність тем сприяє в обробка візуальної інформації для людей з вадами зору, і тому вони є важливим елементом доступності.

Є за замовчуванням тема високої контрастності в коді Visual Studio, який можна встановити, натиснувши на Файл> Параметри> Тема кольору меню, але ви також можете завантажити інші з Visual Studio Code Marketplace.

Microsoft представила теми високої контрастності в Windows 7, приємно бачити, що вони виконують цю функцію.

3. Навігація за клавіатурою

Забезпечення навігації за клавіатурою є важливим для людей, які не можуть використовувати мишу через візуальну або рухливість. Ефективна навігація за клавіатурою передбачає, що користувачі може керувати кожною функціональністю програмного забезпечення за допомогою лише клавіатури.

Visual Studio Code красиво реалізує цю функцію, і, хоча вона має багато попередньо встановлені прив'язки клавіш (див. повний список), користувачі можуть також налаштувати комбінації клавіш за допомогою конфігураційного файлу формату JSON.

4. Вкладка Навігація

Вкладка навігації дозволяє стрибати по всіх районах коду Visual Studio.

В даний час, у версії 1.1.1, VS Code не підтримує навігацію за вкладками для всіх областей, наприклад, верхня панель меню недоступна. Доброю новиною є те, що Microsoft визнає відсутність цієї функції у поточних відомих проблемах у документах.

Під час тестування я виявив, що Редактор, Сторона бар, Бар з видом (див. назви областей коду VS), і всі їх дії та елементи доступні за допомогою клавіші Tab. Хоча користувачі Tab не можуть отримати доступ до функціональних можливостей верхнього рядка меню за допомогою клавіатури. Палітра команд F1 може дещо замінити це, оскільки доступні всі команди, які можна знайти у верхньому меню..

Важливою особливістю доступності навігації за допомогою вкладки є затримка вкладок, яка дозволяє користувачам перемикатися між двома функціями клавіші Tab. Захоплену клавішу Tab дозволяє пересуватися по різних частинах коду VS, в той час як звичайно клавіша Tab додає символ Tab до текстового файлу відкрити в області редактора. Користувачі можуть перемикатися між двома можливостями, натискаючи прив'язку клавіш Ctrl + M.

5. Читачі екрану

Звичайно, доступне програмне забезпечення має бути повністю доступним для користувачів програми для читання з екрану. У документах згадується, що команда розробників VS Code перевіряла доступність програми для читання з екрана за допомогою програми читання з екрана NVDA.

Для тестування я використав два інших програми для читання з екрана - JAWS, що є одним з найбільш широко використовуваних програм для читання з екрана, і розробник Microsoft, який є вбудованим у читання екрану Windows 10.

JAWS читати вголос всі області, команди і меню старанно, однак Оповідач мав деякі дрібні проблеми з завданням. Наприклад, він правильно читає пункти головного меню, коли я пересувався між ними за допомогою миші, але не тоді, коли використовував стрілку "Вниз" на моїй клавіатурі. Це, однак, скоріше недолік розмовника, а не коду Visual Studio, тому ми можемо сміливо припустити, що користувачі з вадами зору можуть отримати доступ до всіх функцій коду VS, використовуючи більш просунуту програму для читання з екрана..

6. Доступність відладчика

Щоб зробити програму повністю доступною та інклюзивною, ми також повинні дбати про частини, які, напевно, не приходять спочатку до нашого розуму. У випадку Visual Studio Code, Debugger є хорошим прикладом для цього. Команда розробників звернула увагу і на те, щоб зробити її включною, тому вона також підтримує навігацію Tab і клавіатуру, а також доступний екранний читач.

7. Локалізація

Тепер ми готові до обговорення списків VS Code у доступних функціях у документах, але є й інші важливі речі, про які треба згадати, коли ми говоримо про “Думайте універсально” принцип інклюзивного дизайну. Одним з них є локалізація, або іншими словами підтримка іноземних мов як мова відображення, оскільки багато людей у ​​світі не є носіями англійської мови.

Код Visual Studio в даний час локалізовано для 10 різних мов відображення (Англійська, спрощена китайська, традиційна китайська, французька, німецька, італійська, японська, корейська, російська, іспанська).

Користувачі з цих мов навіть не повинні налаштовувати свою мову відображення, як VS Code за замовчуванням вибирає мову відображення операційної системи. Якщо вони хочуть встановити іншу мову як мову відображення, вони можуть легко налаштувати їх locale.json файл.

Напевно, 10 мов відображення не так вже й багато, але це також не погано, якщо взяти до уваги, що VS Code - це нове програмне забезпечення, і Microsoft, швидше за все, підтримає більше в майбутньому. Наразі користувачі, чия мова не входить до числа підтримуваних, встановлюють свій код VS англійською мовою.

8. Доступний розмір

Сучасні редактори вихідного коду не дуже великі, і Microsoft також приєдналася до цієї тенденції, оскільки код Visual Studio є менше 100 МБ завантаження, а його розмір на диску менше 200 МБ.

9. Крос-платформний розвиток

Якщо ми хочемо, щоб інклюзивне програмне забезпечення, звичайно, також потрібно бути крос-платформним, що означає, що він повинен працювати на різних операційних системах. Код VS відповідає цій вимозі, оскільки він підтримує Windows, OS X і Linux так само.

Зробити це особисто

“Зробити це особисто” є другим принципом інклюзивного дизайну Microsoft, і ми подивимося можливість налаштування і розширюваність за цим критерієм, як я і обіцяв раніше. Код Visual Studio відповідає обом вимогам так красиво, що я навіть написав окремі публікації на обох, тут про налаштування, а тут про розширюваність.

Коротше кажучи, налаштування здійснюється з спеціальні теми і модульні конфігураційні налаштування формату JSON, тоді як розширюваність досягається спеціальні розширення які користувачі можуть завантажувати з Visual Studio Code Marketplace, або створювати свої власні в TypeScript або JavaScript.

Докладніше про технічну основу підходу Visual Studio Code до розширюваності читайте тут.

Можливість налаштування вирішується таким чином, що ідеально підходить для технічно підкованих людей, які є типовими користувачами редакторів вихідного коду, оскільки значна його частина реалізована за допомогою модульні конфігураційні файли формату JSON.

Це відмінне рішення, оскільки параметри конфігурації не приховані за величезною ієрархією меню, яку важко побачити. Користувачі, навіть якщо вони не є експертами з кодування, можуть легко редагувати власні .json файлів, як Visual Studio Code відкриває типові параметри за замовчуванням у двох панелях редактора поруч один з одним, дозволяючи користувачам легко експериментувати з ними.

Конфігураційні файли модулюються, вони приходять як логічно структурована ієрархія .json файлів, тут наведено список найбільш важливих:

1. settings.json для налаштування користувача, доступні через Файл> Параметри> Параметри користувача меню
2. .vscode / settings.json для користувацьких налаштувань робочої області, доступні через Файл> Параметри> Налаштування робочих місць меню
3. keybindings.json для користувацькі прив'язки клавіш, доступні через Файл> Параметри> Комбінації клавіш меню
4. javascript.json, php.json, css.json, c.json, і купа інших .json файли для різних мов програмування для налаштування користувацькі фрагменти користувача, доступні через Файл> Параметри> Фрагменти користувача меню
5. launch.json для власні налаштування відладчика, доступний, натиснувши на значок шестірні на верхній панелі Debug View (ліворуч від редактора)
6. .vscode / locale.json для власні налаштування мови відображення, доступні, ввівши Налаштувати мову Команда в Панель команд (F1)
7. .vscode / tasks.json для користувальницькі налаштування бігука завдань, доступні, ввівши Налаштування бігуна завдань Команда в Панель команд (F1)

Я думаю, що користувачі VS Code навряд чи можуть скаржитися на можливість налаштування, оскільки навіть перелік варіантів був вичерпним завданням.

Оскільки параметри конфігурації модульовані, користувачам потрібно лише подбати про них вони дійсно потребують, яка допомагає їм зосередитися на завданнях, які вони хочуть виконувати. Таким чином, вони залишаться більш інтуїтивними.

Не ускладнювати

Ми можемо зустріти Microsoft Не ускладнювати Інклюзивний принцип дизайну в багатьох інших місцях програмування та дизайну, просто подумайте про принцип дизайну KISS (Keep It Simple, Stupid) і принцип розробки програмного забезпечення DRY (Don't Repeat Yourself). У цьому контексті ми зосередимося на простота інтерфейсу користувача.

З точки зору доступності, простий у використанні, простий користувальницький інтерфейс зазвичай рекомендується через користувачів, які мають когнітивні та інтелектуальні обмеження. Оскільки код Visual Studio є редактором вихідних кодів, це, ймовірно, не програмне забезпечення, яке часто використовується людьми, які мають такий вид порушення, однак можуть бути й деякі сірі області.

Простота важлива не тільки через те, що, хоча і добре продуманий логічний інтерфейс знизити криву навчання, і збільшити швидкість роботи, зробити програмне забезпечення більш привабливим для населення в цілому.

Код Visual Studio також використовує відоме психологічне явище, ефект простого впливу (або явище знайомства), оскільки він використовує базовий макет, схожий на макет інших відомих редакторів вихідного коду, таких як Atom, використання.

З документів ми можемо дізнатися, що це була спроба Microsoft надати величезний вплив на:

Код VS також надає користувачам функцію "Паралельне редагування", яка також може бути знайдена в інших редакторах вихідного коду, і це не випадково, оскільки це робить процес кодування набагато простішим, і, звичайно, сприяє “Не ускладнювати” принцип інклюзивного дизайну.

На додаток до основного інтерфейсу, Visual Studio Code має цікаві функції, про які варто згадати в статті про інклюзивний дизайн, наприклад:

• Intellisense що надає користувачам пропозиції, що ґрунтуються на контексті (частина, яка використовує штучний інтелект, також є гарним рішенням)
• Peek (Shift + F12), що відображає повне визначення функцій у вбудованому вікні
• Палітра команд (F1), що робить всі команди доступними на одному місці.

Створити захоплення

Нелегко знайти конкретні критерії, які ми можемо використовувати для вивчення “Створити захоплення” Інклюзивний принцип дизайну, тому я нарешті вирішив за критерієм особливість виявлення, як Microsoft визначила цей принцип наступним чином:

Це формулювання може нагадати багатьом з вас про мікромоменти, одне з останніх великих рішень Google, і тому показують, як провідні технологічні компанії можуть прийти до подібних висновків, коли вони думають про те, як рухати галузь.

В інклюзивному дизайні це дуже важливо залучати користувачів, і викликають їхню цікавість, що ми можемо досягти, мабуть, найкраще, якщо ми допомогти їм рухатися вперед коли вони досягли певного моменту в подорожі користувача. Просто в потрібний момент, не раніше, а не після.

Коли ми говоримо про це особливість виявлення, чим більше мирський прояв створення захоплення, його можна збільшити завдяки належним чином розробленим навігаційним посібникам, розумній документації та допоміжній інформації, яка з'являється лише у потрібний момент.

Ми можемо знайти приклади для всіх цих функцій у Visual Studio Code, просто подумайте про вищезазначене IntelliSense і Палітра команд, але підсвічування синтаксису і спеціальні фрагменти коду також може допомогти користувачам максимально використовувати програмне забезпечення. Потрібно самостійно судити про те, чи використовує Visual Studio Code відчуття захвату.

Для себе я більш-менш сподобався досвід: добре структурована онлайн-документація, простий у навігації Visual Studio Code Marketplace, і спеціальні кольорові теми що можна переглядати в режимі реального часу під час прокручування списку (доступ до нього через Файл> Параметри> Тема кольору меню).

Заключні слова

Оскільки інклюзивний дизайн є новою галуззю, технологічна індустрія все ще знаходиться на етапі експериментів. Я думаю, що Microsoft зробила значну віху визначення чотирьох принципів інклюзивного дизайну.

Як ми могли бачити, їм вдалося успішно реалізувати теорію на практиці у своєму новому редакторі вихідного коду, Visual Studio Code, хоча є ще деякі поля для поліпшення, такі як надання повної підтримки Tab і глобальної функції пошуку та заміни..

Як доступність, так і інклюзивність частини користувальницького досвіду, Це може бути гарною ідеєю, щоб дізнатися більше про них, якщо ви хочете йти в ногу з останніми тенденціями галузі. Ось ресурси, які можуть допомогти:

• Статті доступності Windows Dev Center
• Інструментарій Інклюзивного дизайну дизайну Microsoft (PDF) (можна завантажити)
• Тег доступності Hongkiat.com