Fundamentos de la experiencia de usuario de Visual Studio
procedimientos recomendados
1. Ser coherente dentro del entorno de Visual Studio.
Siga los patrones de interacción existentes dentro del shell.
Características de diseño para ser coherentes con el lenguaje visual del shell y los requisitos de artesanía.
Use comandos y controles compartidos cuando existan.
Comprenda la jerarquía de Visual Studio y cómo establece el contexto y controla la interfaz de usuario.
2. Use el servicio de entorno para fuentes y colores.
La interfaz de usuario debe respetar la configuración actual de la fuente del entorno a menos que se exponga para la personalización en la página Fuentes y colores del cuadro de diálogo Opciones.
Los elementos de la interfaz de usuario deben usar el servicio VSColor, mediante tokens de entorno compartido o tokens específicos de características.
3. Hacer que todas las imágenes sean coherentes con el nuevo estilo vs.
Siga los principios de diseño de Visual Studio para iconos, glifos y otros gráficos.
No coloque texto en elementos gráficos.
4. Diseñar desde una perspectiva centrada en el usuario.
Cree el flujo de tareas antes de las características individuales dentro de ella.
Familiarícese con los usuarios y haga que ese conocimiento sea explícito en la especificación.
Al revisar la interfaz de usuario, evalúe la experiencia completa, así como los detalles.
Diseñe la interfaz de usuario para que siga siendo funcional y atractiva, independientemente de la configuración regional o del lenguaje.
Resolución de pantalla
Resolución mínima
La resolución mínima para Visual Studio 2015 es 1280x720. Esto significa que es posible usar Visual Studio en esta resolución, aunque es posible que no sea una experiencia de usuario óptima. No hay ninguna garantía de que todos los aspectos se puedan usar en resoluciones inferiores a 1280x720.
La resolución de destino para Visual Studio es 1366x768. Esta es la resolución más baja en la que prometemos una buena experiencia de usuario.
El alto inicial del cuadro de diálogo debe ser inferior a 700 píxeles, por lo que se ajusta a la resolución mínima del marco IDE en 96 ppp.
Pantallas de alta densidad
La interfaz de usuario de Visual Studio debe funcionar bien en todos los factores de escalado de PPP que Windows admite de forma predeterminada: 150 %, 200 % y 250 %.
Antipatrones
Visual Studio contiene muchos ejemplos de interfaz de usuario que siguen nuestras directrices y procedimientos recomendados. En un esfuerzo por ser coherente, los desarrolladores suelen tomar prestados los patrones de diseño de la interfaz de usuario del producto de forma similar a lo que están creando. Aunque este es un buen enfoque que nos ayuda a impulsar la coherencia en la interacción del usuario y el diseño visual, hacemos en ocasiones características de envío con algunos detalles que no cumplen nuestras directrices debido a restricciones de programación o priorización de defectos. En estos casos, no queremos que los equipos copien uno de estos "antipatrones" porque proliferan una interfaz de usuario incorrecta o incoherente en el entorno de Visual Studio.
Campos o configuraciones obligatorios que se muestran en estado de error de forma predeterminada
Objetivos del equipo de características
Advertir a los usuarios de que han agregado un elemento que se debe configurar.
Dibuje la atención del usuario a las áreas que necesitan entrada.
Solución antipatrones
Tan pronto como el usuario haya iniciado una acción y antes de que hayan completado la tarea, coloque inmediatamente los iconos de detención crítica junto a las áreas que necesitan configuración.
Ejemplo: declaraciones del Diseñador de manifiestos
Al agregar una declaración a la lista, se coloca inmediatamente en un estado de error, que se conserva hasta que el usuario establece las propiedades necesarias.
En este caso, hay una preocupación adicional porque el icono usado para la alerta contiene un icono de "×", por lo que el icono de eliminación común no se puede usar junto a ella. Como resultado, la interfaz de usuario usa un botón Quitar, un control más desordenado.
Colocar la interfaz de usuario en un estado de error de forma predeterminada es un antipatrón de Visual Studio.
Alternativas
Una mejor solución a este problema es:
Permitir que el usuario agregue una declaración sin advertencia y, a continuación, mueva inmediatamente para establecer propiedades en el elemento.
Agregue el icono de advertencia (triángulo de oro) cuando el foco se mueva del elemento, como para agregar otra declaración a la lista o para intentar cambiar las pestañas dentro del diseñador.
Si el usuario intenta cambiar las pestañas antes de establecer las propiedades en cualquier declaración, abra un cuadro de diálogo que explique que la aplicación no se compilará (ni las implicaciones) hasta que se resuelvan las advertencias. Si el usuario descarta el cuadro de diálogo y cambia las pestañas de todos modos, se agrega un icono (crítico o advertencia, según corresponda) a la pestaña Declaraciones.
Varios clics para descartar la interfaz de usuario
Objetivos del equipo de características
No permita que el usuario descarte la interfaz de usuario sin ver primero el texto de la explicación.
Antipatrón
El equipo que inserta los vínculos de vídeo en varios lugares dentro de la interfaz de usuario de VS decidió contra el patrón común del botón de cierre "×" y la explicación de información sobre herramientas, tal como especifica la experiencia de usuario, y en su lugar implementó un vínculo desplegable y "No mostrar de nuevo".
Ejemplo: Vínculos de vídeo en Team Explorer
Forzar al usuario a leer texto explicativo antes de descartar la interfaz de usuario es un antipatrón dentro de Visual Studio. Diseñado correctamente, los vínculos de vídeo deben mostrar una información sobre herramientas con información adicional sobre el mouse y hacer clic en la "×" debe descartar el mensaje sin necesidad de interacción adicional.
Patrón de vínculo de vídeo incorrecto
En lugar de un simple botón de cierre (un clic), el usuario se ve obligado a usar dos clics para simplemente descartar la interfaz de usuario en cada lugar en el que aparecen los vínculos de vídeo.
El diseño correcto para esta situación es seguir el patrón común a Internet Explorer, Office y Visual Studio: al mantener el puntero, el usuario puede ver la descripción de la información sobre herramientas y un clic oculta la interfaz de usuario.
Patrón de vínculo de vídeo correcto
Uso de barras de comandos para la configuración
La figura A representa este antipatrón: colocando una configuración debajo de un botón de comando que se aplica a más que solo el comando. En este croquis, hay comandos además de Iniciar depuración , como Ver en el explorador, Iniciar sin depurar y Entrar en paso a paso, que respetarán la configuración seleccionada.
Figura A: Antipatrón de barra de comandos
Ligeramente mejor, pero aún no deseado, está colocando la configuración de este tipo en las barras de herramientas, como se muestra en la figura B. Aunque los botones divididos ocupan menos espacio y, por tanto, son una mejora de las listas desplegables, ambos diseños siguen usando una barra de herramientas para promover algo que realmente no es un comando.
Figura B: Mejor, pero sigue siendo un antipatrón de barra de comandos
En el enfoque correcto que se muestra en la figura C, la configuración está vinculada a una serie de comandos. No hay ninguna configuración global establecida y simplemente estamos cambiando entre cuatro comandos. Esta es la única situación en la que los comandos de la barra de herramientas son aceptables.
Figura C: Uso correcto del patrón de barra de comandos de Visual Studio
Control de antipatrones
Algunos antipatrones son simplemente un uso incorrecto o la presentación de un control o grupo de controles.
Esquematización que se usa como etiqueta de grupo, no como hipervínculo
El texto de subrayado solo se debe usar para hipervínculos.
Incorrecto:
El texto subrayado que no es un hipervínculo es un antipatrón de Visual Studio.
Correcto:
Con un estilo correcto, el texto que no es hipervínculo aparece sin adornado en la fuente del entorno.
Al hacer clic en una casilla, se produce un cuadro de diálogo emergente.
Al hacer clic en la casilla "Habilitar Escritorio remoto para todos los roles" del asistente "Publicar windows App de Azure lication" aparece inmediatamente un cuadro de diálogo emergente, un antipatrón de Visual Studio. Además, el campo de casilla no se rellena con una casilla después de seleccionarse, otro antipatrón de interacción.
Al abrir un cuadro de diálogo después de hacer clic en una casilla, se muestra un antipatrón de Visual Studio.
Antipatrones de hipervínculo
En el ejemplo siguiente se incluyen dos antipatrones:
El primer plano que activa el puntero rojo significa que no se usa el color compartido correcto del servicio de fuentes.
"Más información" no es el texto adecuado para un vínculo a un tema conceptual. El objetivo del usuario no es obtener más información, es comprender las ramificaciones de su elección.
Omitir el servicio de color y usar "Más información" para los hipervínculos son antipatrones de Visual Studio.
Mejor solución: haga clic en el vínculo para plantear la pregunta que el usuario le preguntará. Por ejemplo:
¿Cómo funcionan los servicios de Windows Azure?
¿Cuándo necesito un proyecto de Windows Azure Mobile Services?
Uso de "Haga clic aquí" para vínculos
Los hipervínculos deben ser auto descriptivos. Es un antipatrón usar "Haga clic aquí" o cualquier variación similar.
Incorrecto: "Haga clic aquí para obtener instrucciones sobre cómo crear un nuevo proyecto".
Bueno: "Cómo crear un nuevo proyecto?"