Compartir a través de


Iconos estándar

Nota

Esta guía de diseño se creó para Windows 7 y no se ha actualizado para las versiones más recientes de Windows. Gran parte de las instrucciones todavía se aplican en principio, pero la presentación y los ejemplos no reflejan nuestra guía de diseño actual .

Los iconos estándar son los iconos de error, advertencia, información y signo de interrogación que forman parte de Windows.

captura de pantalla de cuatro iconos estándar

Iconos estándar de error, advertencia, información y signo de interrogación.

Los iconos estándar tienen estos significados:

  • Icono de error. La interfaz de usuario (UI) presenta un error o problema que se ha producido.
  • Icono de advertencia. La interfaz de usuario presenta una condición que podría causar un problema en el futuro.
  • Icono de información. La interfaz de usuario presenta información útil.
  • Icono de signo de interrogación. La interfaz de usuario indica un punto de entrada de Ayuda.

Los iconos estándar son importantes porque están integrados en muchas interfaces de programación de aplicaciones (API) de Windows, como cuadros de diálogo de tareas, cuadros de mensaje, globosy notificaciones. También se usan normalmente en mensajes locales y barras de estado de .

Nota: Directrices relacionadas con iconos se presentan en un artículo independiente.

Conceptos de diseño

Hay varios factores en la elección del icono estándar adecuado que, en parte, explica por qué a menudo se usan incorrectamente. Los errores más comunes son:

  • Usar un icono de advertencia para errores menores. Las advertencias no son errores "suavizados".
  • Usar un icono estándar cuando es mejor no usar ningún icono en absoluto. No todos los mensajes necesitan un icono.
  • Usuarios alarmantes al proporcionar advertencias para problemas menores o presentar preguntas rutinarias como advertencias. Al hacerlo, los programas parecen propensos a riesgos y se desvirtecen de problemas realmente significativos.

En el resto de esta sección se explica cómo pensar en los iconos estándar para evitar estos errores comunes.

Tipo de mensaje frente a gravedad

Elija iconos estándar según el tipo de mensaje, no la gravedad del problema subyacente. Los tipos de mensaje son:

  • Error. Error o problema que se ha producido.
  • Advertencia. Condición que podría causar un problema en el futuro.
  • Información. Información útil.

Por lo tanto, un mensaje de error puede tomar un icono de error, pero nunca un icono de advertencia. No use iconos de advertencia como una manera de "suavizar" errores menores. Por lo tanto, a pesar de su diferencia de gravedad, "Tamaño de fuente incorrecto" es un error, mientras que "Continuar con esta operación establecerá su casa en el fuego" es una advertencia.

Determinar el tipo de mensaje adecuado

Algunos problemas se pueden presentar como un error, una advertencia o información, según el énfasis y la expresión. Por ejemplo, supongamos que una página web no puede cargar un control ActiveX sin firmar basado en la configuración actual de Windows Internet Explorer:

  • Error. "Esta página no puede cargar un control ActiveX sin firmar". (Fraseda como un problema existente).
  • Advertencia. "Es posible que esta página no se comporte como se esperaba porque Windows Internet Explorer no está configurado para cargar controles ActiveX sin firmar" o "Permitir que esta página instale un control ActiveX sin firmar? Si lo hace desde orígenes que no son de confianza, puede dañar el equipo". (Ambas frases como condiciones que pueden causar problemas futuros).
  • Información. "Ha configurado Windows Internet Explorer para bloquear controles ActiveX sin firmar". (Frase como una declaración de hecho).

Para determinar el tipo de mensaje adecuado, céntrese en el aspecto más importante del problema que los usuarios necesitan conocer o actuar. Normalmente, si un problema impide que el usuario continúe, se presenta como un error; si el usuario puede continuar, se trata de una advertencia. Cree el instrucción principal u otro texto correspondiente basado en ese foco y, a continuación, elija un icono (estándar o de otro modo) que coincida con el texto. El texto de la instrucción principal y los iconos siempre deben coincidir.

Severidad

Aunque la gravedad no es una consideración al elegir entre los iconos de error, advertencia e información, gravedad es un factor para determinar si se debe usar un icono estándar en absoluto.

Los iconos funcionan mejor cuando se usan para comunicarse visualmente. (Tenga en cuenta que, por motivos de accesibilidad, esta comunicación visual siempre debe ser redundante con otro formulario, como texto o sonido). Los usuarios deben poder distinguir de un vistazo la naturaleza de la información y las consecuencias de su respuesta, por lo que debemos diferenciar los errores críticos y las advertencias de sus homólogos ordinarios. Los errores críticos y las advertencias tienen estas características:

  • Implican una posible pérdida de uno o varios de los siguientes elementos:
    • Un recurso valioso, como la pérdida de datos o la pérdida financiera.
    • Acceso o integridad del sistema.
    • Privacidad o control sobre información confidencial.
    • Tiempo del usuario (una cantidad significativa, como 30 segundos o más).
  • Tienen consecuencias inesperadas o no deseadas.
  • Ahora requieren un control correcto, ya que los errores no se pueden corregir fácilmente e incluso pueden ser irreversibles.

Para distinguir errores y advertencias no críticos de los críticos, los mensajes no críticos se muestran normalmente sin un icono. Si lo hace, llama la atención a los mensajes críticos, hace que los mensajes críticos y no críticos sean visualmente distintos y sea coherente con el tono de Windows de .

No todos los mensajes necesitan un icono. Los iconos no son una manera de decorar los mensajes.

A continuación se muestra un buen ejemplo de una advertencia crítica porque cumple las características definidas anteriormente.

captura de pantalla de una advertencia para realizar copias de seguridad de datos

En este ejemplo, una advertencia crítica alerta a los usuarios de posibles pérdidas de datos irreversibles.

Sin embargo, el ejemplo siguiente no es crítico porque es probable que sea intencional y sus resultados se deshacen fácilmente.

incorrecto:

captura de pantalla de un uso engañoso de un icono de advertencia

En este ejemplo, esta confirmación no es fundamental porque es probable que sea intencionada y fácil de deshacer.

En una interfaz de usuario típica, la mayoría de los errores se relacionan con los errores de entrada del usuario. La mayoría de los errores de entrada de usuario no son críticos porque se corrigen fácilmente y los usuarios deben corregirlos antes de continuar. Además, atraer demasiada atención a errores menores de usuario es contrario al tono de Windows. Por lo tanto, los errores de entrada de usuario menores normalmente se muestran sin un icono de error. Para reforzar su naturaleza no crítica, nos referimos a ellos como problemas de entrada del usuario.

captura de pantalla que informa a los usuarios de la de entrada correcta

En este ejemplo, este problema de entrada de usuario secundario no es crítico, por lo que no necesita un icono cuando se presenta en un cuadro de diálogo.

Evitar la advertencia excesiva

Contamos con la advertencia en los programas de Windows. El programa típico de Windows tiene iconos de advertencia aparentemente en todas partes, advertencia sobre las cosas que tienen poca importancia. En algunos programas, casi todas las preguntas se presentan como una advertencia. Las advertencias excesivas hacen que el uso de un programa se sienta como una actividad peligrosa y se destrae de problemas realmente significativos.

El mero potencial de pérdida de datos por sí solo es insuficiente para llamar a un icono de advertencia. Además, los resultados no deseados deben ser inesperados o no deseados y no corregirse fácilmente. De lo contrario, se podría interpretar cualquier pregunta respondida incorrectamente para provocar la pérdida de datos de algún tipo y merecer un icono de advertencia.

Para centrar los iconos de advertencia en problemas realmente críticos:

  • Asegúrese de que el problema garantiza una mayor atención del usuario. las confirmaciones rutinarias y preguntas no deben tener iconos de advertencia.
  • ¿Es probable que los usuarios se comporten de forma diferente como resultado del icono de advertencia? ¿Es probable que los usuarios tengan en cuenta la decisión con más cuidado?

incorrecto:

captura de pantalla del icono de advertencia usado innecesariamente

En este ejemplo, ¿es probable que los usuarios respondan a esta pregunta de forma diferente debido al icono de advertencia?

  • ¿Hay alguna acción importante para hacer o tomar decisiones? Las advertencias sin acciones hacen que los usuarios se sientan paranoides.

incorrecto:

captura de pantalla del icono de advertencia usado con el de recordatorio

¿Por qué esta notificación es una advertencia? ¿Qué se supone que deben hacer los usuarios (además de preocuparse)?

Contexto

El contexto también es una consideración en el uso de iconos estándar porque el propio contexto comunica información. Específicamente:

  • Aunque los cuadros de diálogo (incluidos los cuadros de diálogo de tareas y los cuadros de mensaje) y las notificaciones no necesitan iconos para errores no críticos, los errores en contexto siempre necesitan iconos de error. De lo contrario, estos comentarios no modales serían demasiado fáciles de pasar por alto.
  • Las advertencias en contexto siempre necesitan iconos de advertencia para distinguirlos del texto normal.
  • Los cuadros de diálogo, las notificaciones y los globos no necesitan iconos de información porque presentan información claramente. Por el contrario, los banners necesitan información de 16 x 16 píxeles u otros iconos porque estos comentarios no modales serían demasiado fáciles de pasar por alto.

Dado que el contexto es un factor significativo en el uso de iconos, las directrices de iconos estándar de este artículo se proporcionan en términos de su contexto.

Evaluación de la idoneidad del icono estándar

Al evaluar el texto de la interfaz de usuario, lea también los iconos estándar. Lea iconos de error como "error!", iconos de advertencia como "advertencia, tenga mucho cuidado aquí!", e iconos de información como "atención!". A continuación, continúe leyendo el contexto restante, como las instrucciones principales, el área de contenido y los botones de confirmación. Asegúrese de que el significado y el tono de cada icono estándar coinciden con el significado y el tono de su contexto. Si no lo hacen, ha encontrado un problema.

Si solo haces una cosa...

Asegúrese de que el significado y el tono de cada icono estándar coinciden con el significado y el tono de su contexto. Si no coinciden, cambie o quite el icono.

Directrices

Nota: Para las instrucciones siguientes, "en contexto" significa en cualquier superficie de ventana normal, como dentro del área de contenido de un asistente, hoja de propiedades o página de elementos del panel de control.

General

  • Elija iconos estándar según su tipo de mensaje, no la gravedad del problema subyacente:
    • Error. Error o problema que se ha producido.
    • Advertencia. Condición que podría causar un problema en el futuro.
    • Información. Información útil.
  • Si un problema se basa en diferentes tipos de mensajes, céntrese en el aspecto más importante en el que los usuarios necesitan actuar.
  • Los iconos siempre deben coincidir con la instrucción principal u otro texto correspondiente.

Correcto:

captura de pantalla del icono de error usado con texto de error

incorrecto:

captura de pantalla del icono de advertencia usado con texto de error

En el ejemplo incorrecto, el icono de advertencia estándar no coincide con la instrucción principal (lo que da un error).

Tamaño del icono

  • Elija el tamaño estándar del icono en función del contexto:

    Contexto Cuándo usar
    Cuadros de diálogo
    Use 32 x 32 píxeles para los iconos del área de contenido; 16 x 16 píxeles para los iconos del área de notas al pie.
    En contexto
    Use 32 x 32 píxeles para páginas de error; Iconos de 16 x 16 píxeles para todos los demás.
    Notificaciones
    Use iconos de 16 x 16 píxeles.
    Globos
    Use iconos de 16 x 16 píxeles.
    Banners
    Use iconos de 16 x 16 píxeles.

Iconos de error

  • Usar iconos de error solo cuando se ha producido un error o un problema:

    Contexto Cuándo usar
    Cuadros de diálogo
    Use solo para errores críticos. (no use iconos estándar para errores no críticos).
    Captura de pantalla que muestra el icono de error usado con el mensaje de error
    Errores en contexto
    Use para todos los errores.
    captura de pantalla del icono de error usado con un mensaje de error.
    Notificaciones
    Use solo para errores críticos. (para errores de acción ).
    Captura de pantalla que muestra un icono de error usado con un mensaje de error de notificación.
    Globos
    No uses. Los globos no deben usarse para errores críticos y no necesitan iconos de error para errores no críticos.
    Banners
    No uses. Los banners no deben usarse para errores.
  • Por lo general, los iconos de error no son necesarios para problemas de entrada de usuario no críticos. Sin embargo, se necesitan iconos para errores en contexto, ya que, de lo contrario, estos comentarios contextuales serían demasiado fáciles de pasar por alto.

  • En el caso de los cuadros de diálogo de tareas, no use iconos de nota al pie de error. Los iconos de error solo se deben presentar en el área de contenido.

Iconos de advertencia

  • Usar iconos de advertencia solo cuando una condición podría causar un problema en el futuro:

    Contexto Cuándo usar
    Cuadros de diálogo
    Use para todas las advertencias.
    advertencia de captura de pantalla del cambio de extensión de nombre de archivo
    Advertencias en contexto
    Use para identificar el texto como una advertencia.
    captura de pantalla de advertencia de no suficiente espacio libre
    Notificaciones
    Use para todas las advertencias. (para eventos del sistema no críticos).
    captura de pantalla de la notificación de advertencia de batería baja
    Globos
    Use para condiciones especiales.
    captura de pantalla de la advertencia de globo de bloqueo de capuchas en
    Banners
    Use para llamar la atención sobre el banner.
    captura de pantalla de banner con advertencia de falta de tpm
  • No use iconos de advertencia para "suavizar" errores no críticos. En su lugar, los errores no son advertencias que aplican las directrices del icono de error.

  • En los cuadros de diálogo de preguntas, use iconos de advertencia solo para preguntas con consecuencias significativas. No use iconos de advertencia para preguntas rutinarias.

Correcto:

advertencia de captura de pantalla para no detener la restauración del sistema

incorrecto:

captura de pantalla de advertencia sobre el descarte de avisos

En el ejemplo incorrecto, se usa incorrectamente un icono de advertencia para una pregunta rutinaria.

  • En el caso de los diálogos de tareas, puede usar un icono de nota al pie de advertencia para alertar a los usuarios de consecuencias de riesgo. Sin embargo, use un icono de advertencia en el área de contenido o en el área de notas al pie, pero no en ambos.

advertencia de captura de pantalla de un archivo potencialmente no seguro

En este ejemplo, se usa un escudo de seguridad amarillo en una nota al pie.

Iconos de información

  • Usar iconos de información solo cuando el contexto no presenta información obviamente:

    Contexto Cuándo usar
    Cuadros de diálogo
    No uses.
    En contexto
    No uses. Use texto estático sin formato o un banner en su lugar.
    Notificaciones
    No uses.
    Globos
    No uses.
    Banners
    use para llamar la atención al banner.
    captura de pantalla de de banner con información de configuración
  • Los iconos de información no son necesarios en cuadros de diálogo, notificaciones y globos porque su contexto comunica lo suficiente que están proporcionando a los usuarios información.

  • En el caso de los diálogos de tareas, no use iconos de nota al pie de información. Las notas al pie son lo suficientemente visibles y no dicen que son información.

Iconos de signo de interrogación

  • Use el icono de signo de interrogación solo para los puntos de entrada de ayuda. Para obtener más información, consulte las directrices de punto de entrada de ayuda.
  • No use el icono de signo de interrogación para formular preguntas. De nuevo, use el icono de signo de interrogación solo para los puntos de entrada de ayuda. No es necesario hacer preguntas con el icono de signo de interrogación de todos modos es suficiente presentar una instrucción principal como una pregunta.
  • No reemplace de forma rutinaria iconos de signo de interrogación por iconos de advertencia. Reemplace un icono de signo de interrogación por un icono de advertencia solo si la pregunta tiene consecuencias significativas. De lo contrario, no use ningún icono.