A Microsoft Inclusive Design hatása a Visual Studio kódban

Egyetemes, vagy befogadó design új designfilozófia A Microsoft úgy tűnik, hogy a közelmúltban nagyon komolyan veszi a szoftverfejlesztést. Inkluzív design a hozzáférhető tervezést a következő szintre emeli, mivel a hozzáférhetőséget sokkal szélesebb nézőpontból tekintheti meg. Amikor teszteltem a Microsoft új forráskódszerkesztőjét, a Visual Studio Code-t, a kérdés hogyan valósították meg az elméletet a gyakorlatban természetesen felemelkedett a fejemben.

Ez a bejegyzés nem csupán a Visual Studio Code hozzáférhetőségének leírását kívánja leírni, mivel a hivatalos dokumentumokban nagyszerű visszavonást találhat róluk, hanem inkább egy esettanulmányra törekszik, hogy mit érdemes figyelni tervezzen befogadó alkalmazást a jövőben.

Mert biztosak lehetünk abban, hogy az inkluzivitás hamarosan követelmény lesz mind a szoftver, mind a web design terén, természetesen nemcsak altruista okok miatt, hanem azért, mert sok új felhasználót hoz az asztalhoz.

A Microsoft 4 inklúziótervezési elve

A Windows Dev Center hozzáférhető szoftvertervezést hoz létre a használhatósági kategórián belül, és számos nagy cikket is publikáltak a témáról. Microsoft a befogadó tervezés négy elve Az alábbiakban röviden ismertetjük a cikket.

1. Gondol egyetemes.
2. Csináld meg személyes.
3. Tartsd meg egyszerű.
4. teremt élvezet.

Ha elolvasta az eredeti cikket, látni fogja, hogy az elveket olyan módon ismertetik, amely nem mindig könnyen tesztelhető "érzelmi kapcsolat", "kiváltó csoda", és "mágikus". Szóval inkább a földön maradok, eltávolítom ezeket a szubjektív konnotációkat, és az elveket objektív kritériumokká alakítom.

Amikor elemzem, hogyan valósítják meg azokat a Visual Studio Kódban, azokat az alábbi értelemben használom:

1. Gondol egyetemes: Hozzáférhetőség
2. Csináld meg személyes: Testreszabhatóság, bővíthetőség
3. Tartsd meg egyszerű: Eltérésmentes, logikus felhasználói felület
4. teremt élvezet: Feature felfedezés

Természetesen ez csak egy lehetséges kategorizálás, és vannak sok átfedés, például a testreszabhatóság is része lehet a programnak “Legyen öröm” elvben, de mivel valami kézzelfogható, szükségünk van erre az értelmezésre.

Míg a Windows Dev Center ezeket az inkluzív tervezési elveket ajánlja a Windows 10 alkalmazásokhoz, a Microsoft a Microsoft Design webhelyet is befogadó tervezésnek szentelte.

Bár a Visual Studio Code nem kizárólag a Windows 10-hez készült, hanem a platformok közötti szoftver, továbbra is biztonságosan tesztelhetjük jellemzőit a fent említett elvekkel szemben, mivel a Microsoft egyértelműen kezeli a befogadó tervezést, mint a jövőben követni kívánt szoftvertervezési utat.

Gondolj egyet

Alatt “Gondolj egyet” alapelv, megvizsgáljuk, hogy a Visual Studio Code elérhető különböző felhasználói csoportok számára, mint például a segítő technológiák használói (függetlenül attól, hogy fogyatékkal élők vagy preferenciák használják), korlátozott technológiával rendelkező emberek, nem angol anyanyelvűek stb..

1. Zoom

A zoom könnyen elvégezhető a Ctrl + = / Cmd + = gomb megnyomásával (Mac) billentyűparancs Ráközelíteni, és a Ctrl + - / Cmd + - (Mac) parancsikon Kicsinyítés, és a Zoom funkciót a felső menüsoron keresztül is elérhetjük.

Ne feledje, hogy az 1.1.1-es verzióban a Windows billentyűzeten a + és - jelek nem működnek a jobb oldali numerikus billentyűzeten, csak a gépelési (alfanumerikus) billentyűzeten - ami valószínűleg nem a legjobb az inkluzivitás szempontjából.

A kitartó zoom szint funkció kissé kompenzálja ezt, mivel lehetővé teszi, hogy könnyen konfigurálhassuk a tartós Zoom szint a Felhasználói beállítások menüben (olvassa el a perverz üzenetemet, hogyan kell ezt tenni).

2. Magas kontrasztú téma

A nagy kontrasztú témák megkönnyítik a vizuális információk feldolgozása látássérült felhasználók számára, és ezért ezek a hozzáférhetőség fontos elemei.

Van egy alapértelmezett magas kontrasztú téma a Visual Studio kódban, amelyet a Fájl> Beállítások> Színes téma menü, de mások is letölthetők a Visual Studio Code Marketplace-ből.

A Microsoft a Windows 7-ben bevezette a High Contrast témákat, jó látni, hogy ezt a funkciót követi.

3. Billentyűzet navigáció

A billentyűzet-navigáció elengedhetetlen azok számára, akik nem használhatják az egeret vizuális vagy mozgássérültek miatt. A hatékony billentyűzet navigáció azt jelenti, hogy a felhasználók minden funkciót vezérelhet egy szoftver csak a billentyűzet használatával.

A Visual Studio Code szépen végrehajtja ezt a funkciót, és sokszor van előre beállított kulcskötések (lásd a teljes listát), a felhasználók testreszabhatják a billentyűparancsokat egy JSON-formátumú konfigurációs fájl segítségével.

4. Lapos navigáció

A Tab navigáció lehetővé teszi ugorj át a különböző területeken a Visual Studio Kód.

Jelenleg az 1.1.1-es verzió óta a VS-kód nem támogatja a lapok navigációját minden területen, például a felső menüsor nem érhető el így. A jó hír az, hogy a Microsoft elismeri, hogy ez a funkció hiányzik a dokumentumok aktuális ismeretében.

A vizsgálat során megállapítottam, hogy a Szerkesztő, a Oldalsáv, a A Bar megtekintése (lásd a VS kódjainak elnevezését), és minden tevékenységük és elemük elérhető a Tab gombbal. Bár a Tab-felhasználók nem férhetnek hozzá a legfelső menüsor funkcióihoz a billentyűzettel. Az F1 parancspalettája némiképp helyettesítheti ezt, mivel az összes parancs, amely a felső menüben található, innen is elérhető.

A tabulációs navigáció fontos hozzáférhetőségi jellemzője a tabulátor csapdázása, amely lehetővé teszi a felhasználók számára, hogy a Tab gomb két funkciója között váltsanak. A csapdába helyezett Tab gomb lehetővé teszi mozoghat a VS kód különböző részein, míg általában a Tab gomb hozzáad egy Tab karaktert a szövegfájlhoz nyissa meg a Szerkesztő területen. A felhasználók a Ctrl + M billentyűkötéshez a két képesség között válthatnak.

5. Képernyőolvasók

Természetesen egy hozzáférhető szoftvernek is teljes mértékben elérhetőnek kell lennie a képernyőolvasó felhasználók számára is. A dokumentumok megemlítik, hogy a VS Code dev csapat tesztelte a képernyőolvasó elérhetőségét az NVDA képernyőolvasóval.

A teszteléshez két másik képernyőolvasót használtam, a JAWS, amely az egyik legszélesebb körben használt képernyőolvasó alkalmazás, és a Microsoft narrátor, amely a Windows 10 beépített képernyőolvasója..

JAWS gondosan olvassa el az összes területet, parancsokat és menüket, de az elbeszélőnek néhány kisebb problémája volt a feladattal. Például, csak a legfelső menüpontokat megfelelően olvassa el, amikor az egérrel áthelyeztem őket, de nem a billentyűzetem alsó nyílával. Ez azonban inkább a Narrátor, nem pedig a Visual Studio kód hiányossága, így biztonságosan feltételezhetjük, hogy a látássérült felhasználók hozzáférhetnek az összes VS kód funkcióhoz egy fejlettebb képernyőolvasó alkalmazással.

6. Debugger Accessibility

Ahhoz, hogy egy alkalmazás teljesen hozzáférhető legyen és befogadható legyen, gondoskodnunk kell arról is, hogy az alkatrészeket először nem tudjuk elképzelni. Visual Studio kód esetén a Debugger jó példa erre. A dev csapat figyelmet fordított a befogadásra is, ezért támogatja a Tab és a billentyűzet navigációját, valamint a képernyőolvasót is.

7. Lokalizáció

Most már készen állunk, hogy megvitassuk a hozzáférhetőségi jellemzők VS kódlistáit a dokumentumokban, de vannak más fontos dolgok is, meg kell említenünk, amikor beszélünk a “Gondolj egyet” inkluzív tervezési elv. Ezek közül az egyik a lokalizáció, vagy más szavakkal idegen nyelvek támogatása mint a megjelenítési nyelv, mivel sokan a világon nem anyanyelvűek.

A Visual Studio kód jelenleg lokalizált 10 különböző megjelenítési nyelv (Angol, egyszerűsített kínai, hagyományos kínai, francia, német, olasz, japán, koreai, orosz, spanyol).

Az ezekből a nyelvekből érkező felhasználóknak még a VS kódként sem kell konfigurálniuk a kijelző nyelvét alapértelmezés szerint felveszi az operációs rendszer megjelenítési nyelvét. Ha egy másik nyelvet kíván megjeleníteni, akkor könnyen konfigurálhatók locale.json fájl.

Valószínűleg nem sok 10 megjelenítési nyelv, de nem is rossz, ha figyelembe vesszük, hogy a VS kód egy új szoftver, és a Microsoft valószínűleg többet fog támogatni a jövőben. A felhasználók, akiknek a nyelve nem tartozik a támogatottak közé, mostanáig angolul telepítik a VS kódot.

8. Elérhető méret

A modern forráskód-szerkesztők nem igazán nagyok, és a Microsoft is csatlakozott ehhez a trendhez, mivel a Visual Studio Code a kevesebb mint 100 MB letölthető, és a lemez lábnyoma kevesebb, mint 200 MB.

9. Platformok közötti fejlesztés

Ha inkluzív szoftvert akarunk, természetesen keresztplatformnak kell lennie, ami azt jelenti, hogy különböző operációs rendszereken kell futnia. A VS kód megfelel ennek a követelménynek, mivel támogatja Windows, OS X és Linux is.

Tedd személyre!

“Tedd személyre!” A Microsoft a befogadó tervezés második elve, és megnézzük testreszabhatóság és nyújthatóság e kritérium szerint, ahogy azt korábban megígértem. A Visual Studio Code mindkét követelményt olyan szépen teljesíti, hogy mindkettőnkre külön-külön írtam, itt a testreszabhatóságról, és itt a bővíthetőségről.

Röviden, a testreszabhatóságot a egyedi témák és moduláris JSON-formátumú konfigurációs beállítások, míg a nyújthatóságot a egyéni kiterjesztések hogy a felhasználók letölthessék a Visual Studio Code Marketplace-ből, vagy saját típust hozhatnak létre a TypeScript vagy a JavaScript programban.

A Visual Studio Code megközelíthetőségének technikai hátteréről bővebben itt olvashat.

A testreszabhatóságot olyan módon oldják meg, amely ideális a tech-hozzáértő emberek számára, akik a forráskódszerkesztők tipikus felhasználói, mivel jelentős része annak megvalósítása moduláris JSON-formátumú konfigurációs fájlok.

Ez egy nagyszerű megoldás, mivel a konfigurációs opciók nem rejtettek el egy hatalmas menühierarchiát, amelyet nehéz megnézni. A felhasználók, még ha nem is kódoló szakértők, képesek könnyen szerkesztheti szokásaikat .jSON fájlok, mivel a Visual Studio Code megnyitja az alapértelmezett és az egyéni beállításokat két egymás melletti szerkesztőpanelben, lehetővé téve a felhasználók számára, hogy könnyedén kísérletezzenek velük.

A konfigurációs fájlok modulárisak, logikailag strukturált hierarchiája .jSON fájlok, itt a legfontosabbak listája:

1. settings.json mert egyéni felhasználói beállítások, hozzáférhető a Fájl> Beállítások> Felhasználói beállítások menü
2. .vscode / settings.json mert egyéni munkaterület-beállítások, hozzáférhető a Fájl> Beállítások> Munkahelyi beállítások menü
3. keybindings.json mert egyedi kulcskötések, hozzáférhető a Fájl> Beállítások> Billentyűparancsok menü
4. javascript.json, php.json, css.json, c.json, és egy csomó más .jSON fájlokat különböző programozási nyelvekhez a beállításhoz egyéni felhasználói töredékek, hozzáférhető a Fájl> Beállítások> Felhasználói töredékek menü
5. launch.json mert egyéni hibakeresési beállítások, elérhető a fogaskerék ikonjára kattintva a Debug View felső sávján (a szerkesztő bal oldalán)
6. .vscode / locale.json mert egyéni megjelenítési nyelv beállításai, hozzáférhető az Nyelv beállítása parancsot a parancssorba (F1)
7. .vscode / tasks.json mert egyéni feladat-futó beállításai, hozzáférhető az Konfigurálja a feladat futóját parancsot a parancssorba (F1)

Azt hiszem, a VS kód felhasználóinak aligha lehet panaszkodni a testreszabhatóságról, mivel még az opciók listázása is kimerítő feladat volt.

Mivel a konfigurációs beállítások modulárisak, a felhasználóknak csak gondoskodniuk kell ezekről igazán szükségük van rá, amely segít nekik arra, hogy a feladatokra összpontosítsanak. Így egy intuitívabb munkafolyamat marad.

Ne komplikáld túl

Meg tudjuk felelni a Microsoft-nak Ne komplikáld túl a programozás és a tervezés számos más helyén a befogadó tervezési elv, csak gondoljon a KISS (Keep It Simple, Stupid) tervezési elvre és a DRY (Ne ismételje meg magad) szoftverfejlesztési elvét. Ennek a futó kontextusnak a figyelembevételével a hangsúlyt a a felhasználói felület egyszerűsége.

A hozzáférhetőség szempontjából a könnyen használható, egyszerű felhasználói felületet általában a kognitív és szellemi fogyatékossággal rendelkező felhasználók miatt ajánljuk. Mivel a Visual Studio Kód egy forráskódszerkesztő, valószínűleg nem olyan szoftver, amelyet gyakran használnak azok a személyek, akik ilyen jellegű károsodást szenvednek, azonban lehetnek szürke területek is.

Az egyszerűség nemcsak azért fontos, mert a jól megtervezett, logikus felület is csökkentse a tanulási görbét, és növelje a munka sebességét, egy szoftver vonzóbbá tétele az általános lakosság számára is.

Visual Studio kód is kihasználja a jól ismert pszichológiai jelenséget, a puszta expozíciós hatás (vagy ismertségi jelenség), mivel az elrendezéshez hasonló alapelrendezést fogad el, más jól ismert forráskód-szerkesztők, mint például az Atom.

A dokumentumokból megtudhatjuk, hogy ez a törekvés A Microsoft hatalmas hatást gyakorolt ​​a következőkre:

A VS kód biztosítja a felhasználók számára a Side by Side Editing funkciót, amely más forráskód szerkesztőkben is megtalálható, és nem véletlen, mint sokkal egyszerűbbé teszi a kódolási folyamatot, és természetesen hozzájárul a “Ne komplikáld túl” inkluzív tervezési elv.

Az alapszintű felhasználói felület tetején a Visual Studio Code hűvös funkciókkal rendelkezik, amelyeket érdemes megemlíteni az inkluzív designról szóló cikkben, például:

• Intellisense amely kontextuson alapuló javaslatokat nyújt a felhasználóknak (a mesterséges intelligenciát használó backend-rész is jó megoldás)
• Kandikál (Shift + F12), amely teljes függvénydefiníciókat jelenít meg egy inline ablakban
• Parancspaletta (F1), amely minden parancsot ugyanazon a helyen ér el.

Készítsen Delight-ot

Nem különösebben könnyű olyan kézzelfogható kritériumokat találni, amelyekkel megvizsgálhatjuk a “Készítsen Delight-ot” a befogadó tervezési elv, ezért végül elértem a funkció felfedezhetősége, mivel a Microsoft ezt az elvet az alábbi módon határozta meg:

Ez a megfogalmazás sokaknak emlékeztetheti Önt a mikro-pillanatokról, amelyek a Google egyik legfrissebb nagy dologja, és ezért megmutatják, hogy a vezető technológiai vállalatok hasonló következtetésekhez juthatnak, amikor gondolkodnak arról, hogyan lehet az iparágat továbbítani.

Az inkluzív tervezésben nagyon fontos a felhasználók bevonása, és felkelteni kíváncsiságukat, hogy valószínűleg a legjobbat érjük el, ha mi segítsen nekik előre haladni amikor elérték egy bizonyos pontot a felhasználói utazás során. Éppen a megfelelő pillanatban, nem korábban, nem utána.

Amikor beszélünk funkció felfedezhetősége, minél világiabb megnyilvánulása az öröm megteremtésének, növelhető az olyan dolgok, mint a jól megtervezett segédprogram navigáció, az intelligens dokumentáció és a támogató információ, amely csak a megfelelő pillanatban jelenik meg.

Mindezekre a példákra a Visual Studio Code-ban találunk példákat, gondoljunk csak a fentiekre IntelliSense és Parancspaletta, de szintaxis kiemelése és egyéni kódrészletek segíthet a felhasználóknak abban, hogy a legtöbbet hozzák ki a szoftverből. Magadnak kell eldöntenie, hogy a Visual Studio Code használatával érzi-e az öröm érzését.

Magamnak többé-kevésbé tetszett a tapasztalat: a jól strukturált online dokumentáció, a könnyen navigálható Visual Studio Code Marketplace, és a egyedi színes témák amely a legördülő lista görgetése közben valós időben megtekinthető (hozzáférhető a Fájl> Beállítások> Színes téma menü).

Végső szavak

Mivel a befogadó design új terület, a technológiai ipar még mindig a kísérleti szakaszban van. Azt hiszem, a Microsoft jelentős mérföldkövet tett az inkluzív tervezés négy elvének meghatározása.

Ahogy láttuk, sikerült sikeresen végrehajtaniuk az elméletet a gyakorlatban új forráskódszerkesztőjükben, a Visual Studio Code-ban, bár még vannak olyan mezők, amelyek javíthatók, például teljes laptámogatás és globális keresési és helyettesítési szolgáltatás nyújtása.

Mivel mind a hozzáférhetőség, mind az inkluzivitás felhasználói élmény részei, jó ötlet, ha többet szeretne megtudni róluk, ha szeretné lépést tartani a legújabb iparági trendekkel. Itt vannak olyan források, amelyek segíthetnek:

• A Windows Dev Center hozzáférhetőségi cikkei
• Microsoft Design Inclusive Design Toolkit kézikönyv (PDF) (letölthető)
• Hongkiat.com hozzáférhetőségi címke