Herramientas de evaluación de Visual StudioEvaluation Tools for Visual Studio

Lista de comprobación de acabado de Visual StudioCraftsmanship checklist for Visual Studio

Use esta lista de comprobación para evaluar la calidad de la experiencia de usuario para obtener más información visual y la interacción.Use this checklist to evaluate user experience quality for visual and interaction details.

Información generalOverview

  • Compruebe que todos los comandos dan como resultado de comentarios que indique a los usuarios que se han efectuado sus comandos.Verify that all commands result in feedback that tells users that their commands have been carried out.

  • Compruebe que todos los elementos de interfaz de usuario y los controles son visibles en todos los temas y en modo de contraste alto.Verify that all UI elements and controls are visible in all themes and in High Contrast mode.

  • Compruebe que siempre se diferencian selección inactiva y activa, tanto en modo de contraste alto y estándar.Verify that inactive and active selection are always differentiated, both in standard and High Contrast mode.

  • Compruebe que foco siempre está visible y aparente.Verify that focus is always visible and apparent.

RendimientoPerformance

  • Compruebe que el indicador de algún tipo de "ocupado" aparece si un comando tiene más de un segundo que se complete.Verify that some kind of "busy" indicator is shown if a command takes more than one second to complete.

  • Compruebe que si un comando tarda más de 10 segundos en completarse, una barra de progreso explícita, o bien determinado (opción preferida) o indeterminado, se muestra.Verify that if a command takes more than 10 seconds to complete, an explicit progress bar, either determinate (preferred) or indeterminate, is displayed.

Texto de la interfaz de usuarioUI text

  • Compruebe que todas las etiquetas distinguen mayúsculas de la frase o el título y que no hay texto está completamente en minúsculas.Verify that all labels are sentence- or title-case and that no text is entirely lowercase.

    CorregirCorrect IncorrectoIncorrect
    Texto del comando (todos)Command text (all) Tipo de oración:Sentence case:

    Nombre del directorio:Directory name:
    Nombre del directorio:Directory Name:
    Texto del botón (cliente)Button text (client) Título:Title case:

    [Establecer como predeterminada][ Set As Default ]
    VALOR PREDETERMINADO DE SET ASSET AS DEFAULT
    Texto del botón (con conexión)Button text (online) Tipo de oración:Sentence case:

    [Establecer como predeterminado][ Set as default ]
  • Compruebe que todas las etiquetas, excepto los encabezados de grupo y los botones, terminan con un signo de dos puntos y preceden el control con el que se complementa.Verify that all labels, except group headers and buttons, end with a colon and precede the control with which they are paired.

  • Compruebe que botones, los comandos y los vínculos de comandos que inician la interfaz de usuario para capturar la entrada del usuario finalización en los puntos suspensivos [...] .Verify that buttons, commands, and command links that launch UI to capture user input end in an ellipsis [...].

    Ejemplos:Examples:

    • Un [avanzadas...] botón en un cuadro de diálogo.An [Advanced...] button on a dialog.

    • Las opciones de comando en el menú Herramientas (Herramientas > opciones) no se debe obtener un botón de puntos suspensivos, porque iniciar el cuadro de diálogo es la intención del comando.The command options under the Tools menu (Tools > Options) should not get an ellipsis, because launching the dialog itself is the intent of the command.

  • Compruebe que la interfaz de usuario no contiene ningún abreviaturas, excepto los términos estándar del sector.Verify that the UI contains no abbreviations, except for industry-standard terms. Por ejemplo, HTML ni TCP/IP necesario deletrear, aunque deben OOM (memoria insuficiente) y PII (información de identificación personal).For instance, neither HTML nor TCP/IP need to be spelled out, though OOM (out of memory) and PII (personally identifiable information) should.

Acceso mediante el tecladoKeyboard access

  • Compruebe que hay una manera de realizar cada tarea con el teclado.Verify that there is a way to accomplish each task with the keyboard. Por lo general, esto se logra a través del acceso de teclado para cada control, pero para algunas áreas muy visuales, una solución como desplazándose hasta la vista de código es aceptable.Generally this is accomplished through keyboard access for each control, but for some highly visual areas, a workaround such as going to code view is acceptable.

  • Compruebe que puede cambiar mediante tabulación a través de controles en un orden lógico (de izquierda a derecha y de arriba a abajo).Verify that you can Tab through controls in a logical order (left-to-right and top-to-bottom). Aunque esto es una práctica recomendada para la mayoría de los controles, no todos los controles requieren este enfoque.While this is a best practice for most controls, not all controls require this approach. Por ejemplo, compruebe ese botón de radio son controles en un grupo con una sola tabulación.For example, verify that radio button controls are in a group with a single tab stop.

  • Compruebe que todos los controles tienen las etiquetas y que cada etiqueta tiene una tecla de acceso (excepciones incluyen algunos controles no etiquetado que podrían seguir en un control con la etiqueta en la ficha).Verify that all controls have labels and that each label has a mnemonic (exceptions include some non-labeled controls that might follow a labeled control in the tab).

  • Compruebe que no hay ningún conflicto de tecla de acceso.Verify that there are no mnemonic conflicts.

FuentesFonts

  • Compruebe que todas las fuentes (fuente, tamaño, color) se usan de forma coherente y mantienen la jerarquía.Verify that all fonts (face, size, color) are used consistently and maintain hierarchy.

  • Compruebe que todos los elementos de interfaz de usuario usan el servicio de fuente del entorno.Verify that all UI elements use the environment font service. (Consulte fuentes y el formato de Visual Studio)(See Fonts and Formatting for Visual Studio)

    Para comprobar si el servicio se está utilizando, vaya a Herramientas > Opciones > fuentes y colores.To check if the service is being used, go to Tools > Options > Fonts and Colors. En la lista desplegable de configuración, elija la fuente del entorno y cambie el nombre de fuente a algo asimilar diferente (por ejemplo, Harrington o Comic Sans) y establezca el tamaño a 12 pto.In the Settings dropdown, choose Environment Font and change the font face to something stylistically different (such as Harrington or Comic Sans) and set the size to 12 pt. A continuación, haga clic en Aceptar.Then click OK. Es posible que deba reiniciar el IDE, pero la mayoría de la interfaz de usuario cambiará inmediatamente.You might need to restart the IDE, but most UI will change immediately. Las áreas que no refleje el cambio de fuente incluso en el reinicio no usa la fuente del entorno.Areas that don't pick up the font change even on restart are not using the environment font.

  • Compruebe que las fuentes que se deriva del servicio (por ejemplo, texto en negrita o ampliación) conservan su tamaño y el formato en relación con el texto "normal" cuando se cambia el tamaño de fuente del entorno.Verify that fonts that are derivative of the service (for example, bold or enlarged text) retain their size and formatting in relation to "normal" text when the environment font size is changed.

  • Compruebe que no hay ningún error de recorte debido a las fuentes aumentadas.Verify that there are no clipping bugs due to enlarged fonts. Las fuentes que se pierda probablemente son el resultado de los controles de alto fijo o contenedores de alto fijo.Fonts that get clipped are likely the result of fixed height controls or fixed height containers.

Cuadros de diálogoDialogs

  • Compruebe que el título del cuadro de diálogo es el mismo que el comando que se inició.Verify that the dialog title is the same as the command that launched it.

  • Compruebe que todos los controles estándares son coherentes con el sistema operativo: color de fondo es estándar y no los controles deben tener un estilo de plantilla re especial que hace que se muestren diferentes de los controles estándar.Verify that all standard controls are consistent with the operating system: background color is standard and no controls should have a special re-templated style that makes them appear different from standard controls.

  • Compruebe que los márgenes dentro del formulario deben ser de 12 píxeles y deben aparecer uniforme y coherente.Verify that margins within the form should be 12 pixels and should appear uniform and consistent.

  • Compruebe que los cuadros de diálogo aparecen centrados en el shell IDE o en la ventana que se generó.Verify that dialogs appear centered within the IDE shell or the window that spawned them.

  • Cuando es útil, puede cambiar el tamaño los cuadros de diálogo.When useful, dialogs should be resizable. Para los cuadros de diálogo que se puede cambiar el 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 permanezcan constantes.For dialogs that are resizable, verify that upon resizing, the appropriate controls must resize while other parts of the dialog remain constant.

  • Compruebe que los cuadros de diálogo de tamaño variable conservan cualquier tamaño ajustado por el usuario (tamaño, la ubicación, expansión de controles de cuadro de diálogo y así sucesivamente).Verify that resizable dialogs persist any user-adjusted size (size, location, expansion of dialog controls, and so on).

  • Compruebe que no hay ningún icono en la barra de título.Verify that there is no icon in the title bar.

  • Compruebe que no hay ningún botones Minimizar y maximizar en la barra de título.Verify that there are no Minimize and Maximize buttons in the title bar.

Botones de operación de cuadro de diálogo (sólo cliente frente a)Dialog operation buttons (VS Client only)

  • Compruebe que los botones de operación se encuentran en este orden: Aceptar, cancelar, aplicar.Verify that operation buttons are in this order: OK, Cancel, Apply.

  • Compruebe que Aceptar y cancelar botones tienen el tamaño estándar: 23 x 75 píxeles.Verify that OK and Cancel buttons are the standard size: 75x23 pixels.

  • Compruebe que Aceptar y cancelar botones son del mismo tamaño, independientemente de la longitud de la cadena.Verify that OK and Cancel buttons are of equal size regardless of string length.

  • Si la etiqueta de un botón de la operación requiere que el botón de más anchas que estándar, compruebe que el correspondiente cancelar botón es del mismo tamaño.If the label on an operation button requires the button to be wider than standard, verify that the corresponding Cancel button is of equal size.

  • Compruebe que hay un relleno de 6 píxeles entre los botones y los controles asociados.Verify that there is a 6-pixel padding between buttons and associated controls.

  • Compruebe que la Aceptar y cancelar botones no tienen teclas de acceso definida por una letra subrayada.Verify that the OK and Cancel buttons do not have mnemonics (access keys defined by an underlined letter).

  • Compruebe que un botón (normalmente Aceptar) tiene el foco de forma predeterminada.Verify that one button (typically OK) has focus by default.

  • Compruebe que Esc cancela el cuadro de diálogoVerify that Esc cancels the dialog

  • Compruebe que ENTRAR ejecuta el botón predeterminado si el foco no está en un control que procesa ENTRAR.Verify that Enter executes the default button if focus is not in a control that processes Enter.

  • Compruebe que la Aceptar y cancelar botones se colocan en la esquina inferior derecha del cuadro de diálogo.Verify that the OK and Cancel buttons are positioned in the bottom right corner of the dialog. En raras excepciones, es aceptable para la que se apilan verticalmente en la esquina superior derecha.In rare exceptions, it is acceptable for them to be stacked vertically in the upper right.

  • Compruebe que la configuración vertical se usa solo si otros botones que se encuentran en una alineación horizontal en el cuadro de diálogo.Verify that the vertical configuration is used only if other buttons are in a horizontal alignment within the dialog.

Estándares de controlControl standards

GeneralGeneral

  • 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 comunes.Verify that, when possible, there are good default values to speed up user interaction and direct users toward a safe or common outcome.

  • Compruebe que los controles estándar comportan de la misma manera para que los usuarios sepan lo que ocurrirá según la experiencia anterior.Verify that standard controls behave the same way so that users know what will happen based on earlier experience.

Controles de etiquetaLabel controls

  • Compruebe que cada control tiene una etiqueta y que cada etiqueta visualmente se empareja con su control (generalmente dentro de un intervalo de píxel de 4 a 6) y es más cercano a su control correspondiente que para otros controles.Verify that each control has a label and that each label is visually paired with its control (generally within a 4-6 pixel range) and is closer to its corresponding control than to other controls.

  • Compruebe que las etiquetas se colocan vaciar izquierda con el control si situado por encima del borde izquierdo y centra horizontalmente, para que la línea de base de la etiqueta se alinea con la línea base del texto de entrada si situado a la izquierda.Verify that labels are positioned flush left with the control left edge if positioned above and centered horizontally, so that the baseline of the label is aligned with the baseline of the input text if positioned to the left.

  • Compruebe que si se colocan varias etiqueta apilada y controles de entrada a la izquierda de un control, vaciar se mantienen las etiquetas y una distancia equivalente desde el borde del cuadro de diálogo, nunca vaciar derecha y una distancia equivalente de los controles.Verify that if several stacked label and input controls are positioned to the left of a control, the labels are flush left and an equal distance from the edge of the dialog, never flush right and an equal distance from the controls. Pares deben distribuirse uniformemente a menos que necesita espacio adicional para indicar la agrupación.Pairs should be evenly distributed unless they need additional spacing to indicate grouping.

Controles de entrada (cuadros de texto y cuadros combinados)Input controls (text boxes and combo boxes)

  • Compruebe que, cuando se utiliza la fuente del entorno de forma predeterminada, el alto de pantalla de cuadros de texto, cuadros combinados y botones son 23 todos los píxeles.Verify that when using the default environment font, the display height for text boxes, combo boxes and buttons are all 23 pixels.

  • Si se utiliza el texto de la sugerencia, compruebe que el color esté establecido en Environment.ControlEditHintText mediante el servicio de color.If hint text is used, verify that the color is set to Environment.ControlEditHintText using the color service.

  • Si el campo es un campo obligatorio que se debe identificar como tal, compruebe:If the field is a required field that must be identified as such, verify:

    • que el fondo se establece en Environment.ControlEditRequiredBackground y primer plano se establece enEnvironment.ControlEditRequiredHintTextthat the background is set to Environment.ControlEditRequiredBackground and the foreground is set to Environment.ControlEditRequiredHintText

    • que hay texto de sugerencia en el control que aparece como "<necesario >"that there is hint text within the control that appears as "<Required>"

Controles de botónButton controls

  • Compruebe que los botones sean un tamaño mínimo de 75 x 23 píxeles, a menos que ajustando la longitud del texto.Verify that buttons are a minimum size of 75x23 pixels, unless accommodating longer text.

  • Compruebe que los botones han dejado y los márgenes de 3 a 5 píxeles, así como relleno para el contenido de la derecha.Verify that buttons have left and right margins of 3-5 pixels, as well as padding for the content.

  • Es aceptable utilizar un cuadrado pequeño botón con sólo puntos suspensivos [...] en ella en lugar de un [Examinar...] botón (o una funcionalidad similar).It is acceptable to use a small square button with only an ellipsis [...] on it instead of a [Browse...] button (or similar functionality). Si usa, compruebe que el botón es 23 x 23 de tamaño.If used, verify that the button is 23x23 in size.

  • Si hay más de un [Examinar...] botón en un cuadro de diálogo, a continuación, compruebe que la versión abreviada (solo puntos suspensivos [...] ) se utiliza para todas.If there is more than one [Browse...] button in a dialog, then verify that the shortened version (ellipsis-only [...]) is used for all.

  • Compruebe que puntos suspensivos [...] botones no tiene una tecla de acceso.Verify that ellipsis [...] buttons do not have a mnemonic. Cuando el foco está en el control de entrada junto a él, una pestaña debe mover el foco en el botón de puntos suspensivos.When focus is on the input control beside it, one tab should move focus to the ellipsis button.

  • Compruebe que los botones, los comandos y los vínculos de comandos que inician la interfaz de usuario secundaria que captura más proporcionados por el usuario deben terminar en los puntos suspensivos [...] .Verify that buttons, commands, and command links that launch secondary UI that captures more user input must end in an ellipsis [...].

  • Compruebe que un control de hipervínculo nunca parpadea rojo cuando está activo.Verify that a hyperlink control never flashes red when active. Se trata de un indicador de que el servicio de color no se va a usarThis is an indicator that the color service is not being use

  • Compruebe que los colores de VS utilizados son:Verify that the VS Colors used are:

    • Environment.ControlLinkText

    • Environment.ControlLinkTextHover

    • Environment.ControlLinkTextPressed

  • Compruebe que los hipervínculos aparecen azules con ningún subrayado, a menos que se incrustan en un párrafo.Verify that hyperlinks appear blue with no underline unless embedded in a paragraph.

Casillas de verificaciónCheck boxes

  • Si una casilla de verificación tiene texto de varias líneas, compruebe que el cuadro se alinee con la primera línea de texto, no debe centrada verticalmente en todas las líneas.If a check box has multi-line text, verify that the box aligns with the first line of text, not centered vertically across all lines.

  • Compruebe que casillas de verificación siempre indica una opción binaria y no el usuario navegue por o abrir nuevas ventanas o páginas.Verify that check boxes always indicate a binary choice and do not navigate the user or open new windows or pages.

  • Si una casilla de verificación presenta una opción relacionada con un control de entrada, comprobar que está colocado vaciar izquierdo y cierre muy bajo ese control para indicar a su relación.If a check box presents an option related to an input control, verify that it is positioned flush left and very close under that control to indicate its relation.

  • Compruebe que es una casilla de verificación nunca usa como un medio para habilitar todo el contenido de un cuadro de diálogo o una página.Verify that a check box is never used as a means to enable the entire contents of a dialog or page.

Cuadros de grupoGroup boxes

  • Compruebe que un cuadro de diálogo no contiene un cuadro de grupo único dentro de él que contiene todo el contenido del cuadro de diálogo.Verify that a dialog does not contain a single group box within it that contains the entire contents of the dialog.

  • Compruebe que hay al menos dos controles dentro de cada cuadro de grupo.Verify that there are at least two controls within each group box.

  • Rara vez se debe haber más de dos cuadros de grupo en un cuadro de diálogo.Rarely should there be more than two group boxes on a dialog.

  • Compruebe que no hay ningún cuadro de grupo anidado.Verify that there are no nested group boxes.

IconosIcons

  • Compruebe que los iconos aparecen invertidos correctamente cuando se encuentra en el tema oscuro.Verify that icons appear correctly inverted when in the dark theme.

  • Compruebe que todos los iconos se basan en conceptos básicos.Verify that all icons are based on core concepts.

  • Compruebe que cada icono es distinto, fácil de reconocer y no contiene más de dos conceptos (sin el modificador de estado/language).Verify that each icon is distinct, easy to recognize and does not contain more than two concepts (without status modifier/language).

  • Compruebe que el icono base aparece centrado en el espacio.Verify that the base icon appears centered within the space.

  • Compruebe que todos los iconos aparecen legibles en el modo de contraste alto.Verify that all icons appear legible in High Contrast mode.

  • Compruebe que cualquier color que se usa se alinee con las normas de uso de color.Verify that any color used aligns with color usage standards.

  • Compruebe que no hay ningún halos (bordes) alrededor de iconos.Verify that there are no halos (borders) around icons. (Si está presente, el halo debe coincidir con el color de fondo de la interfaz de usuario adyacente).(If present, the halo should match the background color of the adjacent UI).

Interfaz de usuario táctilTouch-enabled UI

  • Compruebe que los controles interactivos son lo suficientemente grandes como para ser fácilmente touchable: mínimo 23 x 23 píxeles de tamañoVerify that interactive controls are large enough to be easily touchable - minimum 23x23 pixels in size

  • Compruebe que los controles usados con más frecuencia son al menos 40 por 40 píxeles de tamaño.Verify that the most frequently used controls are at least 40x40 pixels in size.

  • Compruebe que los controles interactivos tienen al menos 5 píxeles de espaciado entre ellosVerify that interactive controls have at least 5 pixels of spacing between them