Начална » Toolkit » Влиянието на Microsoft Inclusive Design в Visual Studio Code

    Влиянието на Microsoft Inclusive Design в Visual Studio Code

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

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

    Защото можем да сме сигурни, че инклузивността скоро ще бъде изискване както в софтуера, така и в уеб дизайна, разбира се, не само по алтруистични причини, но и защото ще доведе много нови потребители до таблицата..

    4 принципа на Microsoft за приобщаващ дизайн

    Windows Dev Center поставя достъпен софтуер в категорията Удобство, и те също публикуваха много велики статии по темата. на Microsoft четири принципа на интегрирания дизайн (изброени накратко по-долу) са разгледани в тази статия.

    1. Мисля универсален.
    2. Направи го персонален.
    3. Запази го прост.
    4. създавам наслада.

    Ако сте прочели оригиналната статия, ще видите, че принципите са обяснени по начин, който не винаги е лесен за тестване, като използвате изрази като "емоционална връзка", "предизвиква чудо", и "Магически". Затова бих предпочел да остана на земята, да премахна тези субективни конотации и да превърна принципите в обективни критерии.

    Когато анализирам как се прилагат в Visual Studio Code, използвам ги в следния смисъл:

    1. Мисля универсален: Достъпност
    2. Направи го персонален: Възможност за персонализиране, разширяемост
    3. Запази го прост: Безпроблемен, логичен потребителски интерфейс
    4. създавам наслада: Откриваемост на функциите

    Разбира се, това е само една възможна категоризация и има много припокривания, например приспособимостта също може да бъде част от “Създайте наслада” принцип, но тъй като имаме нужда от нещо осезаемо, нека сега се придържаме към това тълкуване.

    Докато Windows Dev Center препоръчва тези принципи за включване да се прилагат за приложенията в Windows 10, Microsoft също така посвети своя дизайн на Microsoft Design към включителен дизайн.

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

    Помислете Universal

    Под “Помислете Universal” принцип, ние ще разгледаме колко достъпни са Visual Studio Code за различни групи потребители, като потребители на помощни технологии (независимо дали ги използват за увреждания или предпочитания), хора с ограничени технологии, чужди англоговорящи и т.н..

    1. Мащабиране

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

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

    Функцията „Стойност на мащаба“ донякъде компенсира това, тъй като ни позволява лесно да конфигурираме a постоянно ниво на мащабиране в Потребителските настройки (прочетете предишната ми публикация за това как да направя това).

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

    Темите с висок контраст улесняват обработка на визуална информация за потребители с увредено зрение и следователно те са важен елемент от достъпността.

    Има По подразбиране темата за висок контраст в Visual Studio Code, който можете да зададете, като кликнете върху Файл> Предпочитания> Цвят на темата менюто, но можете да изтеглите и други от Visual Studio Code Marketplace.

    Microsoft представи високо контрастни теми в Windows 7, приятно е да видим, че те следват тази функция.

    3. Навигация на клавиатурата

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

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

    4. Раздел Навигация

    Навигационната таблица прави възможно скочи из всички области на Visual Studio Code.

    Понастоящем, от версия 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 Code, така че можем спокойно да предположим, че потребителите със зрителни увреждания могат да имат достъп до всички функционалности на VS код, като използват по-усъвършенствано приложение за четене на екрани..

    6. Достъпност на дебъгерите

    За да направим приложението напълно достъпно и приобщаващо, ние също трябва да се погрижим за частите, които вероятно не ни идват първоначално. В случай на Visual Studio Code, Debugger е добър пример за това. Екипът на разработчиците обърна внимание и на това, че е включен, следователно също така поддържа и навигация с клавиши Tab и клавиатура, а достъпът до него е и на екрана.

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

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

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

    Потребителите, които идват от тези езици, дори не трябва да конфигурират езика на дисплея си като VS код по подразбиране набира езика на дисплея на операционната система. Ако искат да зададат друг език като език за показване, те могат лесно да конфигурират своя език locale.json досие.

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

    8. Достъпни размери

    Съвременните редактори на изходния код не са наистина големи и Microsoft се присъедини към тази тенденция, тъй като Visual Studio Code е a по-малко от 100 MB изтегляне и неговият диск е по-малък от 200 MB.

    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 за персонализирани настройки на Debugger, достъпен, като кликнете върху иконата на зъбно колело в горната лента на 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 Code е редактор на изходния код, той вероятно не е софтуер, който често се използва от хора с този вид увреждане, но може да има и някои сиви области.

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

    Visual Studio Code също повдига добре познатия психологически феномен, ефектът на обикновеното излагане (или. \ t феномен на познаване), тъй като приема основно оформление, подобно на оформлението, други известни редактори на изходния код, като Atom, използват.

    От документите, които можем да разберем, че това е стремеж Microsoft да окаже огромно влияние върху:

    VS Code също така предоставя на потребителите функцията Side by Side Editing, която може да бъде намерена и в други редактори на изходния код, и това не е съвпадение, тъй като прави процеса на кодиране много по-прост, и разбира се допринася за това “Не го усложнявай” принцип на включване.

    В допълнение към основния интерфейс, Visual Studio Code има страхотни функции, които си струва да бъдат споменати в статия за инклузивния дизайн, като:

    • Intellisense който предоставя на потребителите предложения, основани на контекста (частта на бекенда, която използва изкуствен интелект, също е хубаво решение)
    • поглед (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 Design (PDF) (за изтегляне)
    • Маркер за достъпност на Hongkiat.com