La influencia del diseño inclusivo de Microsoft en el código de Visual Studio

Universal, o diseño inclusivo Es una nueva filosofía de diseño. Microsoft parece tomarse muy en serio recientemente en el desarrollo de software.. Diseño inclusivo lleva el diseño accesible al siguiente nivel, ya que ve la accesibilidad desde una perspectiva mucho más amplia. Cuando estaba probando el nuevo editor de código fuente de Microsoft, Visual Studio Code, la pregunta de Cómo implementaron la teoría en la práctica. naturalmente surgio en mi mente.

Esta publicación no pretende ser únicamente una descripción de las funciones de accesibilidad del código de Visual Studio, ya que en los documentos oficiales puede encontrar un gran resumen de ellas, sino que pretende ser un estudio de caso sobre a qué prestar atención cuando desee. diseñar una aplicación inclusiva en el futuro.

Porque podemos estar seguros de que la inclusión pronto será un requisito tanto en el software como en el diseño web, por supuesto, no solo por razones altruistas, sino porque traerá muchos nuevos usuarios a la mesa..

Los 4 principios de diseño inclusivo de Microsoft

Windows Dev Center pone un diseño de software accesible dentro de la categoría de usabilidad, y también publicaron muchos grandes artículos sobre el tema. De Microsoft Cuatro principios del diseño inclusivo. (enumerados brevemente a continuación) se discuten en este artículo.

1. Pensar universal.
2. Hazlo personal.
3. Quédatelo sencillo.
4. Crear deleite.

Si ha leído el artículo original, verá que los principios se explican de una manera que no siempre es fácil de probar, usando expresiones como "conexión emocional", "evocar maravilla", y "mágico". Así que prefiero quedarme a la tierra, eliminar estas connotaciones subjetivas y convertir los principios en criterios objetivos.

Cuando analizo cómo se implementan en Visual Studio Code, los uso en el siguiente sentido:

1. Pensar universal: Accesibilidad
2. Hazlo personal: Personalización, extensibilidad
3. Quédatelo sencillo: Interfaz de usuario lógica, libre de distracciones
4. Crear deleite: Descubrimiento de características

Por supuesto, esta es solo una categorización posible, y hay muchas superposiciones, por ejemplo, la personalización también puede ser parte de la “Crear deleite” principio, pero como necesitamos algo tangible, sigamos con esta interpretación por ahora.

Si bien el Centro de desarrollo de Windows recomienda que estos principios de diseño inclusivo se apliquen a las aplicaciones de Windows 10, Microsoft también dedicó su sitio de diseño de Microsoft al diseño inclusivo..

Aunque Visual Studio Code no es únicamente para Windows 10, sino que pretende ser un software multiplataforma, Aún podemos probar sus características de forma segura según los principios antes mencionados, ya que Microsoft claramente trata el diseño inclusivo como la ruta de diseño de software que desean seguir en el futuro..

Piensa universal

Bajo la “Piensa universal” principio, analizaremos qué tan accesible es Visual Studio Code para diversos grupos de usuarios, tales como usuarios de tecnologías de asistencia (ya sea que las usen para discapacidades o preferencias), personas con tecnologías limitadas, personas que no hablan inglés, etc..

1. Zoom

El zoom se puede realizar fácilmente presionando Ctrl + = / Cmd + = (Mac) atajo de teclado para Acercarse, y el Ctrl + - / Cmd + - (Mac) atajo para Disminuir el zoom, y también podemos acceder a la función de zoom a través de la barra de menú superior.

Tenga en cuenta que a partir de la versión 1.1.1, en los teclados de Windows los signos + y - no funcionan en el teclado numérico de la derecha, solo en el teclado tipográfico (alfanumérico), que probablemente no sea el mejor para la inclusión..

La función de nivel de zoom persistente compensa esto, ya que nos permite configurar fácilmente un nivel de zoom persistente en la Configuración del usuario (lea mi publicación anterior sobre cómo hacer esto).

2. Tema de alto contraste

Temas de alto contraste facilitan en procesamiento de información visual para usuarios con discapacidad visual, y por lo tanto son un elemento importante de accesibilidad.

Hay una tema predeterminado de alto contraste en Visual Studio Code, que puede configurar haciendo clic en el Archivo> Preferencias> Tema de color menú, pero también puede descargar otros desde Visual Studio Code Marketplace.

Microsoft introdujo los temas de Alto Contraste en Windows 7, es bueno ver que siguen esta característica.

3. Teclado de navegación

Proporcionar navegación con el teclado es esencial para las personas que no pueden usar el mouse debido a discapacidades visuales o de movilidad. La navegación efectiva del teclado implica que los usuarios puede controlar cada funcionalidad de un software usando solo el teclado.

Visual Studio Code implementa muy bien esta característica, y si bien tiene muchos enlaces de teclas preestablecidas (consulte la lista completa), los usuarios también pueden personalizar los métodos abreviados de teclado con la ayuda de un archivo de configuración en formato JSON.

4. Navegación de la pestaña

La navegación con pestañas hace posible Salta por todas las zonas. de Visual Studio Code.

Actualmente, a partir de la versión 1.1.1, VS Code no admite la navegación con pestañas en todas las áreas, por ejemplo, la barra de menú superior no está disponible de esta manera. La buena noticia es que Microsoft reconoce la falta de esta función en los problemas actuales conocidos en los documentos..

Durante la prueba, encontré que el Editor, la Barra lateral, la Barra de vista (vea el nombre de las áreas de VS Code), y todas sus acciones y elementos son accesibles con la tecla Tab. Aunque los usuarios de Tab no pueden acceder a las funciones de la barra de menú superior con su teclado. La paleta de comandos F1 puede sustituir esto, ya que también se puede acceder a todos los comandos que se encuentran en el menú superior..

Una importante característica de accesibilidad de la navegación con pestañas es la captura de pestañas que permite a los usuarios cambiar entre las dos funcionalidades de la tecla Tab. La tecla Tab atrapada hace posible moverse a través de las diferentes partes del Código VS, Mientras que normalmente la tecla Tab agrega un carácter de tabulación al archivo de texto Abrir en el área Editor. Los usuarios pueden cambiar entre las dos capacidades presionando la combinación de teclas Ctrl + M.

5. Lectores de pantalla

Por supuesto, un software accesible también debe estar completamente disponible para los usuarios de lectores de pantalla. Los documentos mencionan que el equipo de desarrollo de VS Code probó la disponibilidad del lector de pantalla con el lector de pantalla NVDA.

Para las pruebas, utilicé otros dos lectores de pantalla, JAWS, que es una de las aplicaciones de lectura de pantalla más utilizadas, y Narrador de Microsoft, que es el lector de pantalla integrado de Windows 10..

MANDÍBULAS lea en voz alta todas las áreas, comandos y menús con diligencia; sin embargo, Narrador tuvo algunos problemas menores con la tarea. Por ejemplo, solo leí los elementos del menú superior correctamente cuando me moví a través de ellos con el mouse, pero no cuando usé la flecha hacia abajo en mi teclado. Sin embargo, esto es más bien un defecto de Narrador, no de Visual Studio Code, por lo que podemos asumir con seguridad que los usuarios con discapacidades visuales pueden acceder a todas las funcionalidades de VS Code mediante el uso de una aplicación de lector de pantalla más avanzada..

6. Accesibilidad del depurador

Para hacer que una aplicación sea totalmente accesible e inclusiva, también debemos cuidar las partes que probablemente no nos vienen a la mente. En el caso de Visual Studio Code, el depurador es un buen ejemplo para esto. El equipo de desarrollo también prestó atención para que sea inclusivo, por lo tanto, también es compatible con la navegación por tabulador y teclado, y es accesible para el lector de pantalla.

7. localización

Ahora estamos listos para discutir las funciones de accesibilidad de las listas de códigos VS en los documentos, pero también hay otras cosas importantes que debemos mencionar cuando hablamos de “Piensa universal” principio de diseño inclusivo. Uno de estos es la localización, o con otras palabras. soporte para idiomas extranjeros como idioma de visualización, ya que muchas personas en el mundo no son hablantes nativos de inglés.

El código de Visual Studio está actualmente localizado para 10 idiomas diferentes de visualización (Inglés, chino simplificado, chino tradicional, francés, alemán, italiano, japonés, coreano, ruso, español).

Los usuarios que provienen de estos idiomas ni siquiera tienen que configurar su idioma de visualización, como VS Code recoge el idioma de visualización del sistema operativo por defecto. Si desean establecer otro idioma como idioma de visualización, pueden configurar fácilmente su locale.json expediente.

Es probable que 10 idiomas de visualización no sean tantos, pero tampoco está mal si tenemos en cuenta que VS Code es un nuevo software, y que Microsoft probablemente brindará más soporte en el futuro. Por ahora, los usuarios cuyo idioma no se encuentra entre los admitidos obtienen su Código VS instalado en inglés.

8. Tamaño accesible

Los editores de código fuente modernos no son realmente grandes, y Microsoft también se ha unido a esta tendencia, ya que Visual Studio Code es un menos de 100 MB descarga, y su huella de disco es inferior a 200 MB.

9. Desarrollo multiplataforma

Si queremos un software inclusivo, por supuesto, también debe ser multiplataforma, lo que significa que debe ejecutarse en diferentes sistemas operativos. VS Code cumple con este requisito, ya que soporta Windows, OS X y Linux también.

Hazlo personal

“Hazlo personal” es el segundo principio de diseño inclusivo de Microsoft, y echaremos un vistazo a personalización y extensibilidad Bajo este criterio, como lo prometí antes. Visual Studio Code cumple ambos requisitos tan bien que incluso escribí publicaciones separadas en ambos, aquí sobre personalización y aquí sobre extensibilidad..

En resumen, la personalización se implementa con temas personalizados y Ajustes de configuración de formato JSON modularizados., mientras que la extensibilidad se logra por extensiones personalizadas que los usuarios pueden descargar desde Visual Studio Code Marketplace, o crear los suyos en TypeScript o JavaScript.

Puede leer más sobre los antecedentes técnicos del enfoque de extensibilidad de Visual Studio Code aquí.

La personalización se resuelve de una manera ideal para personas con conocimientos de tecnología que son los usuarios típicos de los editores de código fuente, ya que una parte significativa de ella se implementa a través de Archivos de configuración de formato JSON modularizados..

Esta es una gran solución, ya que las opciones de configuración no están ocultas detrás de una enorme jerarquía de menús que es difícil de ver. Los usuarios, incluso si no son expertos en codificación, pueden edita facilmente su costumbre .json archivos, a medida que Visual Studio Code abre la configuración predeterminada y la configuración personalizada en dos paneles de edición, uno al lado del otro, lo que permite a los usuarios experimentar fácilmente con ellos.

Los archivos de configuración están modularizados, vienen como una jerarquía estructurada lógicamente de .json Archivos, aquí hay una lista de los más importantes:

1. settings.json para Configuraciones de usuario personalizadas, accesible a través de la Archivo> Preferencias> Configuración de usuario menú
2. .vscode / settings.json para Configuración personalizada del espacio de trabajo, accesible a través de la Archivo> Preferencias> Configuración de Workpraces menú
3. keybindings.json para enlaces de teclas personalizados, accesible a través de la Archivo> Preferencias> Atajos de teclado menú
4. javascript.json, php.json, css.json, c.json, y un montón de otros .json Archivos para diferentes lenguajes de programación para la configuración. Fragmentos de usuario personalizados, accesible a través de la Archivo> Preferencias> Fragmentos de usuario menú
5. launch.json para Configuraciones personalizadas del depurador, accesible haciendo clic en el icono de engranaje en la barra superior de Debug View (a la izquierda del editor)
6. .vscode / locale.json para configuración de idioma de pantalla personalizada, accesible escribiendo la Configurar idioma comando en la paleta de comandos (F1)
7. .vscode / tasks.json para Configuración personalizada del corredor de tareas, accesible escribiendo la Configurar Task Runner comando en la paleta de comandos (F1)

Creo que los usuarios de VS Code no pueden quejarse de la personalización, ya que incluso enumerar las opciones fue una tarea exhaustiva.

Como las opciones de configuración son modulares, los usuarios solo tienen que cuidarlas. realmente necesitan, Lo que les ayuda a mantenerse enfocados en las tareas que quieren realizar. Así, se quedarán con un flujo de trabajo más intuitivo..

Mantenlo simple

Podemos cumplir con los de Microsoft Mantenlo simple principio de diseño inclusivo en muchos otros lugares en programación y diseño, solo piense en el principio de diseño KISS (Keep It Simple, Stupid) y el principio de desarrollo de software DRY (Don't Repeat Yourself). Para este contexto de ejecución, mantendremos nuestro enfoque en el simplicidad de la interfaz de usuario.

En términos de accesibilidad, generalmente se recomienda una interfaz de usuario simple y fácil de usar debido a los usuarios que tienen discapacidades cognitivas e intelectuales. Ya que Visual Studio Code es un editor de código fuente, probablemente no sea un software que es usado frecuentemente por personas que tienen este tipo de discapacidad, sin embargo, también puede haber algunas áreas grises.

Sin embargo, la simplicidad no solo es importante porque, como una interfaz lógica bien diseñada, también puede bajar la curva de aprendizaje, y aumentar la velocidad de trabajo, Haciendo un software más atractivo para la población general también.

Visual Studio Code también Aprovecha el conocido fenómeno psicológico., el efecto de mera exposición (o fenómeno de familiaridad), ya que adopta un diseño básico que es similar al diseño que otros editores de código fuente conocidos, como Atom, utilizan.

A partir de los documentos, podemos llegar a saber que fue un esfuerzo de Microsoft que tuvo un gran impacto en:

VS Code también proporciona a los usuarios la función de Edición en paralelo que también se puede encontrar en otros editores de código fuente, y no es una coincidencia, ya que Hace que el proceso de codificación sea mucho más simple., y por supuesto contribuye a la “Mantenlo simple” principio de diseño inclusivo, también.

Además de la interfaz de usuario básica, Visual Studio Code tiene características interesantes que vale la pena mencionar en un artículo sobre diseño inclusivo, como:

• Intellisense que proporciona a los usuarios sugerencias basadas en el contexto (la parte del backend que utiliza inteligencia artificial también es una buena solución)
• Ojeada (Mayús + F12) que muestra definiciones de funciones completas en una ventana en línea
• Paleta de comandos (F1) que hace que todos los comandos sean accesibles en el mismo lugar.

Crear delicia

No es especialmente fácil encontrar criterios tangibles que podamos usar para examinar el “Crear delicia” principio de diseño inclusivo, así que finalmente me conformé con el criterio de característica de descubrimiento, Como Microsoft definió este principio de la siguiente manera:

Este fraseo puede recordar a muchos de ustedes los micro-momentos, uno de los últimos grandes avances de Google, y por lo tanto mostrar cómo las compañías de tecnología líderes pueden llegar a conclusiones similares cuando piensan cómo hacer avanzar a la industria..

En diseño inclusivo, es muy importante involucrar a los usuarios, y despertar su curiosidad, que podemos lograr probablemente lo mejor si ayúdalos a avanzar cuando llegaron a un cierto punto en su viaje de usuario. Sólo en el momento adecuado, no antes, no después.

Cuando hablamos de característica de descubrimiento, La manifestación más mundana de crear deleite puede incrementarse con cosas como la navegación de utilidad bien diseñada, la documentación inteligente y la información de apoyo que aparece solo en el momento adecuado..

Podemos encontrar ejemplos de todas estas funciones en Visual Studio Code, solo piense en lo mencionado anteriormente IntelliSense y Paleta de comandos, pero resaltado de sintaxis y fragmentos de código personalizados También puede ayudar a los usuarios a aprovechar al máximo el software. Debes juzgar por ti mismo si el uso de Visual Studio Code te deja con la sensación de deleite.

Por mi parte, más o menos me gustó la experiencia: la documentación en línea bien estructurada, la Visual Studio Code Marketplace es fácil de navegar, y el temas de colores personalizados que puede previsualizarse en tiempo real mientras se desplaza por una lista desplegable (acceda a ella a través del Archivo> Preferencias> Tema de color menú).

Ultimas palabras

Dado que el diseño inclusivo es un campo nuevo, la industria de la tecnología aún se encuentra en la fase de experimentación. Creo que Microsoft hizo un hito significativo por Definiendo los cuatro principios del diseño inclusivo..

Como pudimos ver, lograron implementar con éxito la teoría en la práctica en su nuevo editor de código fuente, Visual Studio Code, aunque todavía hay algunos campos que mejorar, como proporcionar soporte completo de pestañas y una función global de búsqueda y reemplazo.

Como tanto la accesibilidad como la inclusividad son partes de la experiencia del usuario, Puede ser una buena idea aprender más sobre ellos si desea mantenerse al día con las últimas tendencias de la industria. Aquí hay recursos que pueden ayudar:

• Artículos de accesibilidad de Windows Dev Center
• Manual del Kit de herramientas de diseño inclusivo de Microsoft Design (PDF) (descargable)
• Etiqueta de accesibilidad de Hongkiat.com