Влияние Microsoft Inclusive Design в коде Visual Studio

универсальный, или же инклюзивный дизайн это новая философия дизайна Microsoft, кажется, довольно серьезно относится к разработке программного обеспечения. Инклюзивный дизайн поднимает доступный дизайн на следующий уровень, поскольку рассматривает доступность с гораздо более широкой перспективы. Когда я тестировал новый редактор исходного кода Microsoft, Visual Studio Code, вопрос как они реализовали теорию на практике естественно возникло у меня в голове.

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

Потому что мы можем быть уверены, что инклюзивность скоро станет требованием как в программном обеспечении, так и в веб-дизайне, конечно, не только по альтруистическим причинам, но и потому, что это привлечет много новых пользователей к столу..

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

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

1. Считать универсальный.
2. Сделай это личный.
3. Оставь это просто.
4. Создайте восторг.

Если вы прочитали оригинальную статью, вы увидите, что принципы объясняются так, что их не всегда легко протестировать, используя выражения типа "эмоциональная связь", "вызвать удивление", а также «Волшебный». Так что я предпочел бы оставаться практичным, удалить эти субъективные коннотации и превратить принципы в объективные критерии.

Когда я анализирую, как они реализованы в коде Visual Studio, я использую их в следующем смысле:

1. Считать универсальныйДоступность
2. Сделай это личный: Настраиваемость, расширяемость
3. Оставь это просто: Не отвлекающий логический пользовательский интерфейс
4. Создайте восторг: Возможность обнаружения

Конечно, это только одна из возможных категорий, и есть много совпадений, например, настраиваемость также может быть частью “Создать восторг” принцип, но поскольку нам нужно что-то осязаемое, давайте придерживаться этой интерпретации на данный момент.

В то время как Центр разработки Windows рекомендует эти принципы инклюзивного дизайна для приложений Windows 10, Microsoft также посвятила свой сайт Microsoft Design инклюзивному дизайну..

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

Мыслить универсально

Под “Мыслить универсально” В принципе, мы рассмотрим, насколько доступен код Visual Studio. для разных групп пользователей, такие как пользователи вспомогательных технологий (используют ли они их для людей с ограниченными возможностями или по предпочтениям), люди с ограниченными технологиями, не носители английского языка и т. д..

1. Увеличить

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

Обратите внимание, что начиная с версии 1.1.1, на клавиатурах Windows знаки + и - не работают на цифровой клавиатуре справа, только на клавиатуре ввода (алфавитно-цифровая) - что, вероятно, не является лучшим для инклюзивности.

Функция Persisted Zoom Level несколько компенсирует это, так как позволяет легко настраивать постоянный уровень масштабирования в настройках пользователя (прочитайте мой предыдущий пост о том, как это сделать).

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 Code), и все их действия и элементы доступны с помощью клавиши Tab. Хотя пользователи Tab не могут получить доступ к функциям верхней строки меню с помощью клавиатуры. Палитра команд F1 может несколько заменить это, так как все команды, которые можно найти в верхнем меню, также могут быть доступны оттуда..

Важная особенность доступности навигации по вкладкам - это захват вкладок, который позволяет пользователям переключаться между двумя функциями клавиши Tab. Захваченная клавиша Tab позволяет перемещаться по различным частям кода VS, в то время как обычно клавиша Tab добавляет символ табуляции в текстовый файл откройте в области редактора. Пользователи могут переключаться между двумя возможностями, нажимая сочетание клавиш Ctrl + M.

5. Считыватели экрана

Конечно, доступное программное обеспечение должно быть полностью доступно и для пользователей программ чтения с экрана. В документах упоминается, что команда разработчиков VS Code протестировала доступность программы чтения с экрана с помощью программы чтения с экрана NVDA..

Для тестирования я использовал два других средства чтения с экрана: JAWS, которое является одним из наиболее широко используемых приложений для чтения с экрана, и Microsoft Narrator, которое является встроенным средством чтения с экрана в Windows 10..

JAWS старательно читайте вслух все области, команды и меню, однако у Нарратора были небольшие проблемы с заданием. Например, он правильно читает элементы верхнего меню только тогда, когда я перемещаюсь по ним с помощью мыши, но не когда я использую стрелку «Вниз» на клавиатуре. Это, однако, скорее недостаток Narrator, а не кода Visual Studio, поэтому мы можем с уверенностью предположить, что слабовидящие пользователи могут получить доступ ко всем функциям VS Code с помощью более совершенного приложения для чтения с экрана..

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

Чтобы сделать приложение полностью доступным и инклюзивным, нам также необходимо позаботиться о деталях, которые, возможно, не приходят нам на ум. В случае кода Visual Studio хорошим примером этого является отладчик. Команда разработчиков также обратила внимание на то, чтобы сделать его инклюзивным, поэтому он также поддерживает навигацию по вкладкам и клавиатуре, а также для чтения с экрана..

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

Теперь мы готовы обсудить специальные возможности VS списки кодов в документах, но есть и другие важные вещи, которые мы должны упомянуть, когда говорим о “Мыслить универсально” принцип инклюзивного дизайна. Одним из них является локализация или другими словами поддержка иностранных языков в качестве языка отображения, так как многие люди в мире не являются носителями английского языка.

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

Пользователям, приходящим с этих языков, даже не нужно настраивать язык отображения, как VS Code по умолчанию выбирает язык отображения операционной системы. Если они хотят установить другой язык в качестве языка отображения, они могут легко настроить свои locale.json файл.

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

8. Доступный размер

Современные редакторы исходного кода не очень большие, и Microsoft также присоединилась к этой тенденции, так как Visual Studio Code является менее 100 МБ скачать, и его дисковое пространство составляет менее 200 МБ.

9. Кроссплатформенная разработка

Если нам нужно инклюзивное программное обеспечение, конечно, оно также должно быть кроссплатформенным, что означает, что оно должно работать в разных операционных системах. Код VS отвечает этому требованию, так как он поддерживает Windows, OS X и Linux также.

Сделайте это личным

“Сделайте это личным” является вторым принципом инклюзивного дизайна Microsoft, и мы посмотрим на настраиваемость а также растяжимость по этому критерию, как я и обещал раньше. Visual Studio Code отвечает обоим требованиям так хорошо, что я даже написал отдельные посты для них обоих, здесь о настраиваемости и здесь о расширяемости.

Короче говоря, настраиваемость реализуется с пользовательские темы а также модульные настройки конфигурации в формате 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 за пользовательские настройки Runner, доступны, набрав Настройте Runner задач команда в палитре команд (F1)

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

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

Будь проще

Мы можем встретить Microsoft Будь проще принцип инклюзивного дизайна во многих других местах в программировании и дизайне, просто подумайте о принципе дизайна KISS (Keep It Simple, Stupid) и о принципах разработки программного обеспечения DRY (не повторяйте себя). В этом контексте мы будем уделять простота пользовательского интерфейса.

С точки зрения доступности, обычно рекомендуется простой в использовании пользовательский интерфейс из-за пользователей с когнитивными и интеллектуальными нарушениями. Поскольку Visual Studio Code является редактором исходного кода, это, вероятно, не то программное обеспечение, которое часто используется людьми с такими нарушениями, однако могут быть и серые области..

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

Visual Studio Code также использует известный психологический феномен, эффект простой экспозиции (или феномен знакомства), так как он принимает базовый макет, который похож на макет, который используют другие известные редакторы исходного кода, такие как Atom,.

Из документов мы можем узнать, что это была попытка Microsoft оказать огромное влияние на:

VS Code также предоставляет пользователям функцию параллельного редактирования, которую также можно найти в других редакторах исходного кода, и это не случайно, так как это значительно упрощает процесс кодирования, и, конечно, способствует “Будь проще” принцип инклюзивного дизайна тоже.

Помимо базового пользовательского интерфейса, Visual Studio Code имеет интересные функции, о которых стоит упомянуть в статье об инклюзивном дизайне, такие как:

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

Создать Восторг

Не особенно легко найти материальные критерии, которые мы можем использовать для изучения “Создать Восторг” принцип инклюзивного дизайна, поэтому я, наконец, остановился на критерии возможность обнаружения, Как Microsoft определил этот принцип следующим образом:

Эта фраза может напомнить многим из вас о микро-моментах, одной из последних важных вещей Google, и, следовательно, показать, как ведущие технологические компании могут прийти к аналогичным выводам, когда они думают о том, как продвинуть индустрию.

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

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

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

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

Заключительные слова

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

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

Как доступность, так и инклюзивность части пользовательского опыта, Это может быть хорошей идеей, чтобы узнать о них больше, если вы хотите идти в ногу с последними тенденциями в отрасли. Вот ресурсы, которые могут помочь:

• Статьи о доступности Центра разработки для Windows
• Руководство Inclusive Design Toolkit от Microsoft Design (PDF) (доступно для скачивания)
• Бирка доступности Hongkiat.com