A influência do Microsoft Inclusive Design no Visual Studio Code

Universal, ou design inclusivo é uma nova filosofia de design que a Microsoft parece levar muito a sério no desenvolvimento de software recentemente. Design inclusivo leva o design acessível ao próximo nível, pois ele vê a acessibilidade de uma perspectiva muito mais ampla. Quando eu estava testando o novo editor de código-fonte da Microsoft, o Visual Studio Code, a questão da como eles implementaram a teoria na prática naturalmente surgiu em minha mente.

Este post não pretende ser apenas uma descrição dos recursos de acessibilidade do Visual Studio Code, já que nos documentos oficiais você pode encontrar uma boa recapitulação deles, mas pretende ser um estudo de caso sobre o que prestar atenção quando você quiser criar um aplicativo inclusivo no futuro.

Porque podemos ter certeza de que a inclusividade em breve será um requisito tanto no software quanto no web design, obviamente não apenas por razões altruístas, mas porque trará muitos novos usuários à mesa..

4 Princípios do Design Inclusivo da Microsoft

O Windows Dev Center coloca o design de software acessível dentro da categoria Usabilidade, e eles também publicaram muitos artigos excelentes sobre o assunto. Da Microsoft quatro princípios do design inclusivo (listados brevemente abaixo) são discutidos neste artigo.

1. Pensar universal.
2. Faça pessoal.
3. Mantê-la simples.
4. Crio deleite.

Se você leu o artigo original, verá que os princípios são explicados de uma maneira que nem sempre é fácil de testar, usando expressões como "Conexão emocional", "evocar maravilha", e "mágico". Então eu prefiro ficar pé no chão, remover essas conotações subjetivas e transformar os princípios em critérios objetivos.

Quando analiso como eles são implementados no código do Visual Studio, eu os uso no seguinte sentido:

1. Pensar universal: Acessibilidade
2. Faça pessoal: Customizabilidade, extensibilidade
3. Mantê-la simples: Interface de usuário lógica sem distração
4. Crio deleite: Descoberta de recursos

Claro, esta é apenas uma categorização possível, e existem muitas sobreposições, por exemplo, a personalização também pode fazer parte do “Criar prazer” princípio, mas como precisamos de algo tangível, vamos nos ater a essa interpretação por enquanto.

Enquanto o Windows Dev Center recomenda que esses princípios de design inclusivos sejam aplicados a aplicativos do Windows 10, a Microsoft também dedicou seu site Microsoft Design ao design inclusivo.

Embora o Visual Studio Code não seja apenas para o Windows 10, mas destinado a ser um software de plataforma cruzada, Ainda podemos testar com segurança seus recursos em relação aos princípios mencionados anteriormente, pois a Microsoft trata claramente o design inclusivo como o caminho de design de software que deseja seguir no futuro.

Pense Universal

Debaixo de “Pense Universal” princípio, vamos examinar como o código do Visual Studio é acessível para diversos grupos de usuários, como usuários de tecnologias assistivas (sejam eles portadores de deficiências ou preferências), pessoas com tecnologias limitadas, falantes não nativos de inglês, etc..

1. Zoom

O zoom pode ser facilmente executado pressionando Ctrl + = / Cmd + = (Mac) atalho de teclado para Mais Zoom, e o Ctrl + - / Cmd + - (Mac) atalho para Reduzir o zoom, e também podemos acessar o recurso Zoom através da barra de menu superior.

Observe que, a partir da versão 1.1.1, nos teclados do Windows, os sinais + e - não funcionam no teclado numérico à direita, apenas no teclado de digitação (alfanumérico) - que provavelmente não é o melhor para inclusão.

O recurso de Nível de Zoom Persistente de alguma forma compensa isso, já que nos permite configurar facilmente nível de zoom persistente nas configurações do usuário (leia meu post anterior sobre como fazer isso).

2. Tema de Alto Contraste

Temas de alto contraste facilitam processando informação visual para usuários com deficiência visual e, portanto, são um elemento importante da acessibilidade.

Há um tema padrão de alto contraste no Visual Studio Code, que você pode definir clicando no Arquivo> Preferências> Tema de Cores menu, mas você pode baixar outros do Visual Studio Code Marketplace, bem.

A Microsoft apresentou os temas de Alto Contraste no Windows 7, é bom ver que eles seguem com esse recurso.

3. Navegação por Teclado

Fornecer navegação pelo teclado é essencial para pessoas que não podem usar o mouse devido a deficiências visuais ou de mobilidade. A navegação efetiva pelo teclado implica que os usuários pode controlar todas as funcionalidades de um software usando apenas o teclado.

O código do Visual Studio implementa bem esse recurso e, embora tenha muitos ligações de teclas predefinidas (veja a lista completa), os usuários também podem personalizar atalhos de teclado com a ajuda de um arquivo de configuração no formato JSON.

4. Navegação por abas

A navegação por separadores torna possível saltar por todas as áreas diferentes do código do Visual Studio.

Atualmente, a partir da versão 1.1.1, o VS Code não suporta navegação por abas para todas as áreas, por exemplo, a barra de menu superior não está disponível desta forma. A boa notícia é que a Microsoft reconhece a falta desse recurso em Current Known Issues nos documentos.

Durante o teste, descobri que o editor, a Barra Lateral, a Barra de visualização (veja a nomenclatura das áreas do Código VS), e todas as suas ações e itens são acessíveis com a tecla Tab. Embora os usuários Tab não possam acessar as funcionalidades da barra de menu superior com o teclado. O Command Palette F1 pode, de algum modo, substituir isso, já que todos os comandos que podem ser encontrados no menu superior podem ser acessados ​​a partir de lá também.

Um importante recurso de acessibilidade da guia de navegação é o trapping de guias, que permite aos usuários alternar entre as duas funcionalidades da tecla Tab. A tecla Tab aprisionada torna possível percorrer as diferentes partes do Código VS, enquanto normalmente a tecla Tab adiciona um caractere de tabulação ao arquivo de texto aberto na área Editor. Os usuários podem alternar entre os dois recursos, pressionando a tecla Ctrl + M.

5. Leitores de tela

Naturalmente, um software acessível também precisa estar totalmente disponível para os usuários de leitores de tela. Os documentos mencionam que a equipe de desenvolvimento do VS Code testou a disponibilidade do leitor de tela com o leitor de tela do NVDA..

Para testar, usei dois outros leitores de tela, o JAWS, que é um dos aplicativos de leitura de tela mais usados, e o Microsoft Narrator, que é o leitor de tela integrado do Windows 10..

MANDÍBULAS leia em voz alta todas as áreas, comandos e menus de forma diligente, no entanto, o Narrator teve alguns problemas menores com a tarefa. Por exemplo, ele só leu os itens do menu superior corretamente quando eu os movi com o mouse, mas não quando usei a seta para baixo no teclado. Isso, no entanto, é uma falha do Narrator, não do Visual Studio Code, portanto, podemos assumir com segurança que os usuários com deficiência visual podem acessar todas as funcionalidades do VS Code usando um aplicativo de leitura de tela mais avançado..

6. Acessibilidade do depurador

Para tornar um aplicativo totalmente acessível e inclusivo, também precisamos tomar cuidado com as partes que provavelmente não vêm de primeira à nossa mente. No caso do código do Visual Studio, o depurador é um bom exemplo disso. A equipe de desenvolvedores também prestou atenção para torná-lo inclusiva, portanto, também oferece suporte à navegação por guias e teclados, e é acessível ao leitor de tela.

7. Localização

Agora estamos prontos para discutir as listas de códigos VS de recursos de acessibilidade nos documentos, mas também há outras coisas importantes que precisamos mencionar quando falamos sobre o “Pense Universal” princípio do design inclusivo. Uma delas é a localização ou com outras palavras suporte para idiomas estrangeiros como linguagem de exibição, como muitas pessoas no mundo não são falantes nativos de inglês.

O código do Visual Studio está atualmente localizado para 10 diferentes idiomas de exibição (Inglês, Chinês Simplificado, Chinês Tradicional, Francês, Alemão, Italiano, Japonês, Coreano, Russo, Espanhol).

Os usuários que vêm desses idiomas nem precisam configurar seu idioma de exibição, como o VS Code pega o idioma de exibição do sistema operacional por padrão. Se eles quiserem definir outro idioma como idioma de exibição, eles podem configurar facilmente locale.json Arquivo.

Provavelmente, 10 idiomas de exibição não são muitos, mas também não é ruim se levarmos em consideração que o VS Code é um novo software, e a Microsoft provavelmente suportará mais no futuro. Por enquanto, os usuários cujo idioma não está entre os suportados obtêm seu VS Code instalado em inglês.

8. Tamanho Acessível

Editores de código fonte modernos não são realmente grandes, e a Microsoft também se uniu a essa tendência, já que o Visual Studio Code é um menos de 100 MB download, e sua pegada de disco é inferior a 200 MB.

9. Desenvolvimento multiplataforma

Se quisermos um software inclusivo, é claro que ele também precisa ser compatível com várias plataformas, o que significa que ele precisa ser executado em sistemas operacionais diferentes. O Código VS atende a esse requisito, já que ele suporta Windows, OS X e Linux também.

Torná-lo pessoal

“Torná-lo pessoal” é o segundo princípio de design inclusivo da Microsoft, e vamos dar uma olhada personalização e extensibilidade sob este critério, como prometi antes. O Visual Studio Code atende a ambos os requisitos tão bem que até escrevi posts separados sobre ambos, aqui sobre a possibilidade de personalização, e aqui sobre extensibilidade.

Em suma, a personalização é implementada com temas personalizados e configurações de formato modular JSON, enquanto a extensibilidade é alcançada por extensões personalizadas que os usuários podem fazer o download do Marketplace do Visual Studio Code ou criar seus próprios no TypeScript ou JavaScript.

Você pode ler mais sobre o contexto técnico da abordagem do Visual Studio Code à extensibilidade aqui.

A customização é resolvida de uma maneira ideal para pessoas com experiência em tecnologia que são os usuários típicos de editores de código-fonte, já que uma parte significativa dela é implementada via arquivos de configuração de formato JSON modularizados.

Esta é uma ótima solução, já que as opções de configuração não estão ocultas por trás de uma enorme hierarquia de menus difícil de ver. Os usuários, mesmo que não sejam especialistas em codificação, podem editar facilmente o seu costume .json arquivos, O código do Visual Studio abre as configurações padrão e personalizadas em dois painéis de editor ao lado um do outro, permitindo que os usuários façam experiências facilmente com eles.

Os arquivos de configuração são modularizados, eles vêm como uma hierarquia logicamente estruturada de .json arquivos, aqui está uma lista dos mais importantes:

1. settings.json para configurações de usuário personalizadas, acessível através do Arquivo> Preferências> Configurações do Usuário cardápio
2. .vscode / settings.json para configurações personalizadas do espaço de trabalho, acessível através do Arquivo> Preferências> Configurações de Espaços de Trabalho cardápio
3. keybindings.json para Brincos-chave personalizados, acessível através do Arquivo> Preferências> Atalhos de Teclado cardápio
4. javascript.json, php.json, css.json, c.json, e um monte de outras .json arquivos para diferentes linguagens de programação para configuração trechos personalizados do usuário, acessível através do Arquivo> Preferências> Snippets de usuário cardápio
5. launch.json para configurações personalizadas do depurador, acessível clicando no ícone de engrenagem na barra superior da Visualização de Depuração (à esquerda do editor)
6. .vscode / locale.json para configurações personalizadas de idioma de exibição, acessível digitando o Configurar o idioma comando na paleta de comandos (F1)
7. .vscode / tasks.json para configurações personalizadas do executor de tarefas, acessível digitando o Configurar o executor de tarefas comando na paleta de comandos (F1)

Eu acho que os usuários do VS Code dificilmente podem reclamar sobre a personalização, já que listar as opções era uma tarefa exaustiva.

Como as opções de configuração são modularizadas, os usuários só precisam cuidar eles realmente precisam, que os ajuda a manter o foco nas tarefas que eles querem executar. Assim, eles ficarão com um fluxo de trabalho mais intuitivo.

Mantenha simples

Podemos nos encontrar com a Microsoft Mantenha simples Princípio do design inclusivo em muitos outros lugares em programação e design, apenas pense no princípio de projeto KISS (Keep It Simple, Stupid) e no princípio de desenvolvimento de software DRY (Don't Repeat Yourself). Para este contexto de corrida, vamos manter nosso foco no simplicidade da interface do usuário.

Em termos de acessibilidade, uma interface de usuário simples e fácil de usar geralmente é recomendada por causa de usuários com deficiências cognitivas e intelectuais. Como o Visual Studio Code é um editor de código-fonte, provavelmente não é um software que é freqüentemente usado por pessoas que têm esse tipo de deficiência, no entanto, pode haver algumas áreas cinza também.

A simplicidade não é importante apenas por causa deles, já que uma interface lógica bem projetada também pode abaixe a curva de aprendizado, e aumentar a velocidade do trabalho, tornando um software mais atraente para a população em geral, bem.

Visual Studio Code também aproveita o fenómeno psicológico bem conhecido, o efeito de mera exposição (ou fenômeno de familiaridade), pois adota um layout básico que é semelhante ao layout de outros editores de códigos-fonte bem conhecidos, como o Atom,.

Dos documentos podemos saber que foi um esforço da Microsoft ter um grande impacto:

O VS Code também fornece aos usuários o recurso de edição lado a lado, que também pode ser encontrado em outros editores de código-fonte, e não é uma coincidência, como isso torna o processo de codificação muito mais simples, e, claro, contribui para o “Mantenha simples” princípio de design inclusivo, também.

No topo da interface do usuário básica, o Visual Studio Code tem recursos interessantes que merecem ser mencionados em um artigo sobre design inclusivo, como:

• Intellisense que fornece aos usuários sugestões baseadas no contexto (a parte de back-end que usa inteligência artificial também é uma boa solução)
• Olhadinha (Shift + F12) que exibe as definições completas das funções em uma janela embutida
• Paleta de Comando (F1) que torna todos os comandos acessíveis no mesmo lugar.

Criar prazer

Não é especialmente fácil encontrar critérios tangíveis que possamos usar para examinar “Criar prazer” princípio de design inclusivo, então eu finalmente resolvido pelo critério de característica de descoberta, como a Microsoft definiu este princípio da seguinte maneira:

Esse fraseado pode lembrar a você muitos dos micro-momentos, uma das coisas mais recentes do Google, e, portanto, mostrar como as principais empresas de tecnologia podem chegar a conclusões semelhantes quando pensam em como levar a indústria adiante.

No design inclusivo, é muito importante engajar usuários, e despertar sua curiosidade, que podemos alcançar, provavelmente, o melhor se nós ajude-os a avançar quando chegaram a um certo ponto na jornada do usuário. Somente no momento certo, não antes, não depois.

Quando falamos sobre característica de descoberta, a manifestação mais mundana de criar prazer, pode ser aumentada por coisas como navegação de utilitário bem projetada, documentação esperta e informação de apoio que só aparece no momento certo.

Podemos encontrar exemplos para todos esses recursos no Visual Studio Code, basta pensar sobre o acima mencionado IntelliSense e Paleta de Comando, mas realce de sintaxe e trechos de código personalizados também pode ajudar os usuários a aproveitar ao máximo o software. Você precisa julgar por si mesmo se usar o Visual Studio Code deixa você com a sensação de prazer.

Para mim, gostei mais ou menos da experiência: o documentação online bem estruturada, a fácil de navegar no Visual Studio Code Marketplace, e a temas de cores personalizadas que pode ser visualizado em tempo real durante a rolagem de uma lista suspensa (acessá-lo via Arquivo> Preferências> Tema de Cores cardápio).

Palavras finais

Como o design inclusivo é um novo campo, a indústria de tecnologia ainda está na fase de experimentação. Eu acho que a Microsoft fez um marco significativo por definindo os quatro princípios do design inclusivo.

Como poderíamos ter visto, eles conseguiram implementar com sucesso a teoria na prática em seu novo editor de código-fonte, o Visual Studio Code, embora ainda existam alguns campos para melhorar, como fornecer suporte completo a Tab e um recurso global de Pesquisa e Substituição..

Como acessibilidade e inclusividade são partes da experiência do usuário, Pode ser uma boa ideia aprender mais sobre eles se quiser acompanhar as últimas tendências do setor. Aqui estão os recursos que podem ajudar:

• Artigos de acessibilidade do Windows Dev Center
• Manual do Microsoft Design's Inclusive Design Toolkit (PDF) (download)
• Tag de acessibilidade do Hongkiat.com