Share via

Herramientas de evaluación para Visual Studio

  • Artículo

Lista de comprobación de artesanía para Visual Studio

Use esta lista de comprobación para evaluar la calidad de la experiencia del usuario para obtener detalles visuales e interacciones.

  • Compruebe que todos los comandos dan como resultado comentarios que indican a los usuarios que se han llevado a cabo sus comandos.

  • Compruebe que todos los elementos y controles de la interfaz de usuario estén visibles en todos los temas y en el modo de contraste alto.

  • Compruebe que la selección activa y inactiva siempre se diferencia, tanto en el modo estándar como en el modo contraste alto.

  • Compruebe que el foco siempre es visible y aparente.

Rendimiento

  • Compruebe que se muestra algún tipo de indicador "ocupado" si un comando tarda más de un segundo en completarse.

  • Compruebe que si un comando tarda más de 10 segundos en completarse, se muestra una barra de progreso explícita, determinada (preferida) o indeterminada.

Texto de la interfaz de usuario

  • Compruebe que todas las etiquetas sean mayúsculas de minúsculas o oraciones y que ningún texto esté completamente en minúsculas.

    Correcto Incorrecto
    Texto del comando (todos) Caso de oración:

    Nombre del directorio:    		 Nombre del directorio:
    Texto del botón (cliente) Caso de título:

    [ Establecer como predeterminado ]    		 ESTABLECER COMO PREDETERMINADO
    Texto del botón (en línea) Caso de oración:

    [ Establecer como valor predeterminado ]

  • Compruebe que todas las etiquetas, excepto los encabezados de grupo y los botones, terminen con dos puntos y precedan al control con el que están emparejados.

  • Compruebe que los botones, comandos y vínculos de comandos que inician la interfaz de usuario para capturar el final de entrada del usuario en un botón de puntos suspensivos [...].

    Ejemplos:

    • Botón [Avanzado...] en un cuadro de diálogo.

    • Las opciones de comando del menú Herramientas (Opciones de herramientas>) no deben obtener puntos suspensivos, ya que iniciar el propio cuadro de diálogo es la intención del comando.

  • Compruebe que la interfaz de usuario no contiene abreviaturas, excepto los términos estándar del sector. Por ejemplo, no es necesario escribir HTML ni TCP/IP, aunque OOM (memoria insuficiente) y PII (información de identificación personal).

Acceso mediante el teclado

  • Compruebe que hay una manera de realizar cada tarea con el teclado. Por lo general, esto se logra a través del acceso al teclado para cada control, pero para algunas áreas muy visuales, una solución alternativa como ir a la vista de código es aceptable.

  • Compruebe que puede realizar tabulaciones a través de controles en un orden lógico (de izquierda a derecha y de arriba abajo). Aunque se trata de un procedimiento recomendado para la mayoría de los controles, no todos los controles requieren este enfoque. Por ejemplo, compruebe que los controles de botón de radio están en un grupo con una sola tabulación.

  • Compruebe que todos los controles tienen etiquetas y que cada etiqueta tiene un mnemónico (las excepciones incluyen algunos controles sin etiqueta que podrían seguir un control etiquetado en la pestaña).

  • Compruebe que no haya conflictos mnemónicos.

Fuentes

  • Compruebe que todas las fuentes (cara, tamaño, color) se usan de forma coherente y mantienen la jerarquía.

  • Compruebe que todos los elementos de la interfaz de usuario usan el servicio de fuentes del entorno. (Consulte Fuentes y formato para Visual Studio)

    Para comprobar si se usa el servicio, vaya a Herramientas > Opciones > fuentes y colores. En la lista desplegable Configuración, elija Fuente del entorno y cambie la cara de fuente a algo estilísticomente diferente (como Harrington o Comic Sans) y establezca el tamaño en 12 pt. Después, haga clic en Aceptar. Es posible que tenga que reiniciar el IDE, pero la mayoría de la interfaz de usuario cambiará inmediatamente. Las áreas que no recogen el cambio de fuente incluso al reiniciar no usan la fuente del entorno.

  • Compruebe que las fuentes derivadas del servicio (por ejemplo, texto en negrita o ampliado) conservan su tamaño y formato en relación con el texto "normal" cuando se cambia el tamaño de fuente del entorno.

  • Compruebe que no hay errores de recorte debido a fuentes ampliadas. Es probable que las fuentes que se recortan sean el resultado de controles de alto fijos o contenedores de alto fijo.

Diálogos

  • Compruebe que el título del cuadro de diálogo es el mismo que el comando que lo inició.

  • Compruebe que todos los controles estándar son coherentes con el sistema operativo: el color de fondo es estándar y ningún control debe tener un estilo especial de plantilla que los haga parecer diferentes de los controles estándar.

  • Compruebe que los márgenes del formulario deben ser de 12 píxeles y deben aparecer uniformes y coherentes.

  • Compruebe que los diálogos aparecen centrados en el shell del IDE o en la ventana que los generó.

  • Cuando resulta útil, los cuadros de diálogo se deben cambiar de tamaño. En el caso de los diálogos que se pueden cambiar de tamaño, compruebe que al cambiar el tamaño, los controles adecuados deben cambiar el tamaño mientras que otras partes del cuadro de diálogo permanecen constantes.

  • Compruebe que los cuadros de diálogo que se pueden cambiar de tamaño conservan cualquier tamaño ajustado por el usuario (tamaño, ubicación, expansión de controles de diálogo, etc.).

  • Compruebe que no hay ningún icono en la barra de título.

  • Compruebe que no haya botones Minimizar y Maximizar en la barra de título.

Botones de operación de cuadro de diálogo (solo cliente de VS)

  • Compruebe que los botones de operación están en este orden: Aceptar, Cancelar, Aplicar.

  • Compruebe que los botones Aceptar y Cancelar son el tamaño estándar: 75 x 23 píxeles.

  • Compruebe que los botones Aceptar y Cancelar tienen un tamaño igual, independientemente de la longitud de la cadena.

  • Si la etiqueta de un botón de operación requiere que el botón sea más amplio que el estándar, compruebe que el botón Cancelar correspondiente sea de igual tamaño.

  • Compruebe que hay un relleno de 6 píxeles entre botones y controles asociados.

  • Compruebe que los botones Aceptar y Cancelar no tienen mnemonics (teclas de acceso definidas por una letra subrayada).

  • Compruebe que un botón (normalmente Correcto) tiene el foco de forma predeterminada.

  • Comprobación de que Esc cancela el cuadro de diálogo

  • Compruebe que Entrar ejecuta el botón predeterminado si el foco no está en un control que procesa Entrar.

  • Compruebe que los botones Aceptar y Cancelar están colocados en la esquina inferior derecha del cuadro de diálogo. En raras excepciones, es aceptable que se apilan verticalmente en la esquina superior derecha.

  • Compruebe que la configuración vertical solo se usa si otros botones están en una alineación horizontal dentro del cuadro de diálogo.

Estándares de control

General

  • Compruebe que, cuando sea posible, hay buenos valores predeterminados para acelerar la interacción del usuario y dirigir a los usuarios hacia un resultado seguro o común.

  • Compruebe que los controles estándar se comportan de la misma manera para que los usuarios sepan lo que ocurrirá en función de la experiencia anterior.

Controles de etiqueta

  • Compruebe que cada control tiene una etiqueta y que cada etiqueta está emparejada visualmente con su control (generalmente dentro de un intervalo de 4 a 6 píxeles) y está más cerca de su control correspondiente que a otros controles.

  • Compruebe que las etiquetas están colocadas a la izquierda con el borde izquierdo del control si están colocados encima y centrados horizontalmente, de modo que la línea base de la etiqueta esté alineada con la línea base del texto de entrada si se coloca a la izquierda.

  • Compruebe que si hay varias etiquetas apiladas y controles de entrada situados a la izquierda de un control, las etiquetas se vacían a la izquierda y una distancia igual desde el borde del cuadro de diálogo, nunca vacíe a la derecha y a la misma distancia de los controles. Los pares deben distribuirse uniformemente a menos que necesiten espaciado adicional para indicar la agrupación.

Controles de entrada (cuadros de texto y cuadros combinados)

  • Compruebe que al usar la fuente de entorno predeterminada, el alto de la pantalla de los cuadros de texto, los cuadros combinados y los botones son de 23 píxeles.

  • Si se usa el texto de la sugerencia, compruebe que el color está establecido en Environment.ControlEditHintText mediante el servicio de color.

  • Si el campo es un campo obligatorio que debe identificarse como tal, compruebe:

    • que el fondo se establece Environment.ControlEditRequiredBackground en y el primer plano se establece en Environment.ControlEditRequiredHintText

    • que hay texto de sugerencia en el control que aparece como "<Obligatorio>"

Controles de botón

  • Compruebe que los botones tienen un tamaño mínimo de 75 x 23 píxeles, a menos que se ajuste al texto más largo.

  • Compruebe que los botones tienen márgenes izquierdo y derecho de 3 a 5 píxeles, así como relleno para el contenido.

  • Es aceptable usar un pequeño botón cuadrado con solo un botón de puntos suspensivos [...] en lugar de un botón [Examinar...] (o una funcionalidad similar). Si se usa, compruebe que el botón tiene un tamaño de 23 x 23.

  • Si hay más de un botón [Examinar...] en un cuadro de diálogo, compruebe que la versión abreviada (solo puntos suspensivos [...]) se usa para todos.

  • Compruebe que los puntos suspensivos [...] no tienen un mnemonic. Cuando el foco está en el control de entrada junto a él, una pestaña debe mover el foco al botón de puntos suspensivos.

  • Compruebe que los botones, comandos y vínculos de comandos que inician la interfaz de usuario secundaria que captura más entrada del usuario deben terminar en puntos suspensivos [...].

  • Compruebe que un control de hipervínculo nunca parpadea en rojo cuando está activo. Se trata de un indicador de que el servicio de color no se está usando.

  • Compruebe que los colores de VS usados son:

    • Environment.ControlLinkText

    • Environment.ControlLinkTextHover

    • Environment.ControlLinkTextPressed

  • Compruebe que los hipervínculos aparecen en azul sin subrayado a menos que se inserten en un párrafo.

Casillas

  • Si una casilla tiene texto de varias líneas, compruebe que el cuadro se alinea con la primera línea de texto, no centrada verticalmente en todas las líneas.

  • Compruebe que las casillas siempre indican una opción binaria y no navegan por el usuario ni abren nuevas ventanas o páginas.

  • Si una casilla presenta una opción relacionada con un control de entrada, compruebe que está colocado vaciado a la izquierda y muy cerca de ese control para indicar su relación.

  • Compruebe que nunca se usa una casilla como medio para habilitar todo el contenido de un cuadro de diálogo o página.

Cuadros de grupo

  • Compruebe que un cuadro de diálogo no contiene un único cuadro de grupo dentro de él que contiene todo el contenido del diálogo.

  • Compruebe que hay al menos dos controles dentro de cada cuadro de grupo.

  • Rara vez debería haber más de dos cuadros de grupo en un cuadro de diálogo.

  • Compruebe que no haya cuadros de grupo anidados.

Iconos

  • Compruebe que los iconos aparecen correctamente invertidos cuando están en el tema oscuro.

  • Compruebe que todos los iconos se basan en conceptos básicos.

  • Compruebe que cada icono es distinto, fácil de reconocer y no contiene más de dos conceptos (sin modificador de estado o lenguaje).

  • Compruebe que el icono base aparece centrado dentro del espacio.

  • Compruebe que todos los iconos aparecen legibles en modo contraste alto.

  • Compruebe que cualquier color usado se alinee con los estándares de uso de colores.

  • Compruebe que no haya ningún halos (bordes) alrededor de los iconos. (Si está presente, el halo debe coincidir con el color de fondo de la interfaz de usuario adyacente).

Interfaz de usuario habilitada para entrada táctil

  • Compruebe que los controles interactivos son lo suficientemente grandes como para ser fácilmente táctiles: un tamaño mínimo de 23 x 23 píxeles .

  • Compruebe que los controles usados con más frecuencia tienen al menos un tamaño de 40 x 40 píxeles .

  • Compruebe que los controles interactivos tengan al menos 5 píxeles de espaciado entre ellos