L'influenza di Microsoft Inclusive Design in Visual Studio Code

Il design universale o inclusivo è una nuova filosofia di design che Microsoft sembra prendere molto seriamente nello sviluppo del software di recente. Il design inclusivo porta il design accessibile al livello successivo, poiché considera l'accessibilità da una prospettiva molto più ampia. Quando stavo testando il nuovo editor di codice sorgente di Microsoft, Visual Studio Code, la questione di come essi implementassero la teoria in pratica è sorta naturalmente nella mia mente.

Questo post non intende essere solo una descrizione delle funzionalità di accessibilità del codice di Visual Studio, come nei documenti ufficiali è possibile trovare un riepilogo grande di loro, ma piuttosto si propone di essere un caso di studio su cosa prestare attenzione quando si desidera progettare un'app inclusiva in futuro.

Perché possiamo essere sicuri che l'inclusività sarà presto un requisito sia nel software che nel web design, ovviamente non solo per ragioni altruistiche, ma perché porterà molti nuovi utenti al tavolo.

I 4 principi di Microsoft del progetto inclusivo

Windows Dev Center mette il design del software accessibile all'interno della categoria Usability e pubblica anche molti articoli sull'argomento. I quattro principi di progettazione inclusiva di Microsoft (elencati brevemente di seguito) sono discussi in questo articolo.

1. Pensa universale .
2. Personalizzalo .
3. Mantienilo semplice .
4. Crea piacere .

Se hai letto l'articolo originale, vedrai che i principi sono spiegati in un modo che non è sempre facile da testare, usando espressioni come "connessione emotiva", "evoca meraviglia" e "magico" . Quindi preferirei stare con i piedi per terra, rimuovere queste connotazioni soggettive e trasformare i principi in criteri oggettivi.

Quando analizzo come sono implementati in Visual Studio Code, li uso nel seguente senso:

1. Pensa universale : accessibilità
2. Personalizzalo, personalizzabilità, estensibilità
3. Rendilo semplice : interfaccia utente logica e priva di distrazioni
4. Crea piacere : funzionalità Discoverability

Naturalmente, questa è solo una possibile categorizzazione, e ci sono molte sovrapposizioni, ad esempio la personalizzazione può anche far parte del principio "Crea piacere", ma poiché abbiamo bisogno di qualcosa di tangibile, restiamo fedeli a questa interpretazione per ora.

Mentre Windows Dev Center consiglia di applicare questi principi di progettazione inclusiva per le app di Windows 10, Microsoft ha dedicato anche il proprio sito di progettazione Microsoft al design inclusivo.

Sebbene Visual Studio Code non sia solo per Windows 10 ma abbia lo scopo di essere un software multipiattaforma, possiamo ancora testare in sicurezza le sue funzionalità rispetto ai principi sopra menzionati, dato che Microsoft considera il design inclusivo come il percorso di progettazione del software che vogliono seguire in futuro .

Pensa universale

Secondo il principio "Think Universal", esamineremo in che modo il codice Visual Studio è accessibile a diversi gruppi di utenti, come gli utenti di tecnologie assistive (indipendentemente dal fatto che li utilizzino per disabilità o preferenza), persone con tecnologie limitate, non madrelingua inglese, eccetera.

1. Zoom

Lo zoom può essere facilmente eseguito premendo la scorciatoia da tastiera Ctrl + = / Cmd + = (Mac) per Zoom In, e la scorciatoia Ctrl + - / Cmd + - (Mac) per Zoom Out, e possiamo anche accedere alla funzione Zoom tramite la barra dei menu in alto.

Si noti che, a partire dalla versione 1.1.1, sulle tastiere Windows i segni + e - non funzionano sul tastierino numerico sulla destra, solo sulla tastiera di digitazione (alfanumerica) - che probabilmente non è il migliore per l'inclusività.

La funzione Persisted Zoom Level in qualche modo compensa questo, in quanto ci consente di configurare facilmente un livello di zoom persistente nelle Impostazioni utente (leggi il mio post permaloso su come farlo).

2. Tema ad alto contrasto

I temi ad alto contrasto facilitano l' elaborazione di informazioni visive per gli utenti ipovedenti e pertanto rappresentano un elemento importante dell'accessibilità.

C'è un tema di contrasto elevato predefinito in Codice di Visual Studio, che puoi impostare facendo clic sul menu File > Preferences > Color Theme, ma puoi anche scaricarne altri dal Marketplace di codice di Visual Studio.

Microsoft ha introdotto temi ad alto contrasto in Windows 7, è bello vedere che seguono questa funzionalità.

3. Navigazione tramite tastiera

Fornire la navigazione tramite tastiera è essenziale per le persone che non possono utilizzare il mouse a causa di disabilità visive o di mobilità. L'efficace navigazione da tastiera comporta che gli utenti possano controllare ogni funzionalità di un software usando solo la tastiera .

Il codice di Visual Studio implementa piacevolmente questa funzionalità e, sebbene abbia molti collegamenti di tasti preimpostati (vedi l'elenco completo), gli utenti possono anche personalizzare le scorciatoie da tastiera con l'aiuto di un file di configurazione in formato JSON.

4. Navigazione a schede

La navigazione con schede consente di saltare su tutte le diverse aree del codice di Visual Studio.

Attualmente, a partire dalla versione 1.1.1, VS Code non supporta la navigazione delle schede per tutte le aree, ad esempio la barra dei menu in alto non è disponibile in questo modo. La buona notizia è che Microsoft riconosce la mancanza di questa funzionalità nei problemi noti correnti nei documenti.

Durante il test, ho scoperto che l' Editor, la barra laterale, la barra di visualizzazione (vedere la denominazione delle aree del codice VS) e tutte le loro azioni e voci sono accessibili con il tasto Tab. Sebbene gli utenti di Tab non possano accedere alle funzionalità della barra dei menu in alto con la loro tastiera. La Command Palette F1 può in qualche modo sostituirsi a questo, poiché tutti i comandi che si possono trovare nel menu principale sono accessibili anche da lì.

Un'importante funzione di accessibilità della navigazione delle schede è il trapping delle schede che consente agli utenti di passare tra le due funzionalità del tasto Tab. Il tasto Tab intrappolato consente di spostarsi tra le diverse parti del codice VS, mentre normalmente il tasto Tab aggiunge un carattere Tab al file di testo aperto nell'area Editor. Gli utenti possono passare tra le due funzionalità premendo il tasto Ctrl + M.

5. Lettori di schermo

Ovviamente, un software accessibile deve essere pienamente disponibile anche per gli utenti di screen reader. I documenti riportano che il team di sviluppatori di VS Code ha testato la disponibilità dello screen reader con lo screen reader NVDA.

Per il test, ho utilizzato altri due lettori di schermo, JAWS, una delle app di lettura schermo più utilizzate e Microsoft Narrator che è lo screen reader integrato di Windows 10.

JAWS leggeva ad alta voce tutte le aree, i comandi e i menu in modo diligente, tuttavia Narrator aveva alcuni problemi minori con il compito. Ad esempio, legge le voci del menu in alto solo quando le ho spostate con il mouse, ma non quando ho usato la freccia giù sulla tastiera. Questo, tuttavia, è piuttosto una carenza di Narratore, non di Visual Studio Code, quindi possiamo tranquillamente presumere che gli utenti ipovedenti possano accedere a tutte le funzionalità di VS Code utilizzando un'app screen reader più avanzata.

6. Accessibilità del debugger

Per rendere un'app completamente accessibile e inclusiva, dobbiamo anche occuparci di parti che probabilmente non ci vengono in mente all'inizio. Nel caso di Visual Studio Code, il Debugger ne è un buon esempio. Il team di sviluppo ha prestato attenzione a renderlo inclusivo, quindi supporta anche la navigazione con scheda e tastiera, ed è accessibile allo screen reader.

7. Localizzazione

Ora siamo pronti a discutere le caratteristiche di accessibilità degli elenchi di codici VS nei documenti, ma ci sono anche altre cose importanti che dobbiamo menzionare quando parliamo del principio del design inclusivo "Think Universal" . Uno di questi è la localizzazione, o con altre parole il supporto per le lingue straniere come lingua di visualizzazione, dato che molte persone nel mondo non sono madrelingua inglesi.

Il codice di Visual Studio è attualmente localizzato per 10 diverse lingue di visualizzazione (inglese, cinese semplificato, cinese tradizionale, francese, tedesco, italiano, giapponese, coreano, russo, spagnolo) .

Gli utenti che arrivano da queste lingue non hanno nemmeno bisogno di configurare la loro lingua di visualizzazione, poiché VS Code preleva la lingua di visualizzazione del sistema operativo per impostazione predefinita . Se vogliono impostare un'altra lingua come lingua di visualizzazione, possono facilmente configurare il loro file locale.json .

Probabilmente 10 lingue di visualizzazione non sono così tante, ma non è male se prendiamo in considerazione che VS Code è un nuovo software, e Microsoft probabilmente supporterà di più in futuro. Per ora, gli utenti la cui lingua non è tra quelli supportati ottengono il loro codice VS installato in inglese.

8. Dimensioni accessibili

I moderni editor di codice sorgente non sono molto grandi e Microsoft ha anche aderito a questa tendenza, poiché il codice di Visual Studio è inferiore a 100 MB e il suo ingombro del disco è inferiore a 200 MB.

9. Sviluppo multipiattaforma

Se vogliamo un software inclusivo, ovviamente deve anche essere multipiattaforma, il che significa che deve essere eseguito su diversi sistemi operativi. VS Code soddisfa questo requisito, in quanto supporta anche Windows, OS X e Linux .

Rendilo personale

"Make It Personal" è il secondo principio di progettazione inclusiva di Microsoft e daremo un'occhiata a personalizzazione ed estensibilità in base a questo criterio, come l'avevo promesso in precedenza. Visual Studio Code soddisfa entrambi i requisiti così bene che ho persino scritto post separati su entrambi, qui su customizability e qui su estensibilità.

In breve, la personalizzazione è implementata con temi personalizzati e impostazioni di configurazione in formato JSON modulari, mentre l'estensibilità viene raggiunta dalle estensioni personalizzate che gli utenti possono scaricare dal marketplace di Visual Studio o creare da soli in TypeScript o JavaScript.

Puoi leggere di più sul background tecnico dell'approccio del codice di Visual Studio all'estensibilità qui.

La personalizzazione è risolta in un modo che è ideale per le persone esperte di tecnologia che sono gli utenti tipici degli editor di codice sorgente, poiché una parte significativa di esso viene implementata tramite file di configurazione in formato JSON modulare .

Questa è un'ottima soluzione, poiché le opzioni di configurazione non sono nascoste dietro un'enorme gerarchia di menu che è difficile da vedere. Gli utenti, anche se non sono esperti di codifica, possono facilmente modificare i propri file .json personalizzati, poiché Visual Studio Code apre le impostazioni predefinite e le impostazioni personalizzate in due riquadri di editor, uno accanto all'altro, consentendo agli utenti di sperimentare facilmente con loro.

I file di configurazione sono modularizzati, vengono come una gerarchia strutturata logicamente di file .json, ecco un elenco dei più importanti:

1. settings.json per le Impostazioni utente personalizzate, accessibile tramite il menu File > Preferences > User Settings
2. .vscode/settings.json per le .vscode/settings.json personalizzate dello spazio di lavoro, accessibili tramite il menu File > Preferences > Workpraces Settings
3. keybindings.json per keybindings.json di keybindings.json personalizzate, accessibile tramite il menu File > Preferences > Keyboard Shortcuts rapida
4. javascript.json, php.json, css.json, c.json e una serie di altri file .json per diversi linguaggi di programmazione per l'impostazione di frammenti utente personalizzati, accessibili tramite il menu File > Preferences > User Snippets
5. launch.json per Impostazioni debugger personalizzate, accessibile facendo clic sull'icona a forma di ingranaggio nella barra superiore di Debug View (a sinistra dell'editor)
6. .vscode/locale.json per le impostazioni della lingua di visualizzazione personalizzate, accessibile digitando il comando Configure Language nella tavolozza dei comandi (F1)
7. .vscode/tasks.json per le impostazioni personalizzate del Runner attività, accessibile digitando il comando Configure Task Runner nella palette dei comandi (F1)

Penso che gli utenti del codice VS difficilmente possano lamentarsi della personalizzazione, in quanto anche elencare le opzioni era un compito completo.

Poiché le opzioni di configurazione sono modularizzate, gli utenti devono solo occuparsi di quelli di cui hanno realmente bisogno, il che li aiuta a rimanere concentrati sulle attività che desiderano eseguire. Pertanto, saranno lasciati con un flusso di lavoro più intuitivo.

Keep It Simple

Siamo in grado di soddisfare il principio di progettazione inclusiva di Keep It Simple di Microsoft in molti altri aspetti della programmazione e del design, basti pensare al principio di progettazione KISS (Keep It Simple, Stupid) e al principio di sviluppo del software DRY (Do not Repeat Yourself). Per questo contesto in esecuzione, continueremo a concentrarci sulla semplicità dell'interfaccia utente .

In termini di accessibilità, una semplice interfaccia utente di facile utilizzo è generalmente consigliata a causa di utenti con disabilità intellettive e cognitive. Poiché Visual Studio Code è un editor di codice sorgente, probabilmente non è un software utilizzato frequentemente da persone con questo tipo di compromissione, tuttavia potrebbero esserci anche alcune aree grigie.

Tuttavia, la semplicità non è importante solo per loro, poiché un'interfaccia logica ben progettata può anche ridurre la curva di apprendimento e aumentare la velocità di lavoro, rendendo un software più attraente per la popolazione generale.

Visual Studio Code sfrutta anche il ben noto fenomeno psyhological, l'effetto di mera esposizione (o fenomeno di familiarità ), in quanto adotta un layout di base simile a quello di altri ben noti editor di codice sorgente, come Atom, use.

Dai documenti possiamo capire che è stato uno sforzo che Microsoft ha avuto un enorme impatto su:

VS Code fornisce anche agli utenti la funzione di modifica Side by Side che può essere trovata anche in altri editor di codice sorgente, e non è una coincidenza, poiché rende il processo di codifica molto più semplice e, naturalmente, contribuisce al "Keep It Simple" incluso principio di progettazione, anche.

Oltre all'interfaccia utente di base, Visual Studio Code presenta funzionalità interessanti che vale la pena menzionare in un articolo sul design inclusivo, come ad esempio:

• Intellisense che fornisce agli utenti suggerimenti in base al contesto (anche la parte di backend che utilizza l'intelligenza artificiale è una buona soluzione)
• Peek (Shift + F12) che visualizza definizioni di funzioni complete in una finestra inline
• Command Palette (F1) che rende tutti i comandi accessibili nello stesso posto.

Crea piacere

Non è particolarmente facile trovare criteri tangibili che possiamo usare per esaminare il principio del design inclusivo "Crea piacere", quindi ho finalmente optato per il criterio di rilevabilità delle funzionalità, in quanto Microsoft ha definito questo principio nel seguente modo:

Questo fraseggio potrebbe ricordare a molti di voi micro-momenti, una delle ultime novità di Google, e quindi mostrare come le principali aziende tecnologiche potrebbero giungere a conclusioni simili quando pensano a come far avanzare il settore.

Nel design inclusivo, è molto importante coinvolgere gli utenti e suscitare la loro curiosità, che possiamo ottenere probabilmente il meglio se li aiutiamo ad andare avanti quando raggiungono un certo punto nel loro percorso utente. Proprio nel momento giusto, non prima, non dopo.

Quando parliamo di scopribilità delle funzioni, la manifestazione più mondana di creare piacere, può essere aumentata da cose come navigazione di utilità ben progettata, documentazione intelligente e informazioni di supporto che si aprono solo nel momento giusto.

Possiamo trovare esempi di tutte queste funzionalità in Visual Studio Code, basti pensare alla già citata IntelliSense e Command Palette, ma l' evidenziazione della sintassi e gli snippet di codice personalizzati possono anche aiutare gli utenti a ottenere il massimo dal software. Devi giudicare da te se usare Visual Studio Code ti lascia con la sensazione di piacere.

Per quanto mi riguarda, ho più o meno apprezzato l'esperienza: la documentazione online ben strutturata, il marketplace di Visual Studio facile da navigare e i temi di colore personalizzati che possono essere visualizzati in anteprima in tempo reale mentre si scorre un elenco a discesa (accesso tramite il menu File > Preferences > Color Theme ).

Parole finali

Poiché il design inclusivo è un nuovo campo, l'industria tecnologica è ancora in fase di sperimentazione. Penso che Microsoft abbia fatto una pietra miliare significativa definendo i quattro principi del design inclusivo .

Come abbiamo potuto vedere, sono riusciti a implementare con successo la teoria nel loro nuovo editor di codice sorgente, Visual Studio Code, anche se ci sono ancora alcuni campi da migliorare, come fornire il supporto completo Tab e una funzione di ricerca e sostituzione globale.

Poiché sia ​​l'accessibilità che l'inclusività fanno parte dell'esperienza utente, può essere una buona idea apprenderne di più se si vuole tenere il passo con le ultime tendenze del settore. Qui ci sono risorse che possono aiutare:

• Articoli sull'accessibilità di Windows Dev Center
• Manuale del toolkit Inclusive Design di Microsoft Design (PDF) (scaricabile)
• Tag di accessibilità Hongkiat.com