it-swarm-es.com

Qué color elegir como "peligro" si el color principal de mi aplicación es el rojo

Tengo esta pregunta alrededor de mi cabeza por bastante tiempo. El caso es que mi aplicación principal tiene un tema de color rojo. Y para cancelar botones solía usar solo colores grises, pero ahora que necesito un color "peligroso" ... ¿Qué debo usar? ¿Púrpura? ¿Naranja? Usar el rojo nuevamente es incómodo, ¿tal vez un rojo más oscuro?

PD: No puedo usar el azul porque es el color de nuestros competidores.

enter image description here

56
caravana_942

Creo que necesitas jugar. Si sus pantallas son rojas y está a punto de usar una advertencia o peligro. Tengo las siguientes sugerencias:

1- Aún puedes usar rojo pero en diferente grado para diferenciar entre el color de la aplicación y tu acción de peligro.

2- Puede usar una ventana emergente blanca pura y aplicar iconos rojos , signos de exclamación o signos dentro de esta ventana emergente.

3- Otra sugerencia es usar color negro y usar signos blancos sobre la ventana emergente negra . Esto puede ser un cambio.

Si puede proporcionarnos una pantalla de su sistema rojo, puedo darle una solución sencilla.

enter image description here

101
Khalil Hanna

En lugar de enfocarse solo en el color del botón, es mejor enfocarse en la experiencia como un todo para esa tarea en particular. No necesariamente necesita un color de peligro separado para un botón Eliminar. Puede usar su botón rojo estándar, pero admitirlo con otros mensajes de peligro. Me gusta esto:

enter image description here

Si su usuario está a punto de hacer algo peligroso, es mejor usar una alerta y un mensaje para resaltar el peligro, en lugar de confiar solo en el color del botón.

También vale la pena decir que no hay nada inherentemente peligroso o aterrador en una aplicación roja. Diseñé para Coca-Cola por un tiempo, y el color de su marca principal es el rojo. Son un muy buen ejemplo de cómo aplicar la marca roja a sitios web y aplicaciones, si está buscando uno. Utilizan principalmente negro, gris y blanco como sus colores de acento.

52
Michael

Una cosa absolutamente clave a tener en cuenta aquí:

No confíes únicamente en el color para transmitir significado.

Los colores son útiles para transmitir un mensaje visual, pero debe tener en cuenta la accesibilidad al tomar este tipo de decisiones de UX. Si su usuario tiene algún tipo de daltonismo u otra discapacidad visual, necesita algún otro tipo de indicador (iconos o palabras) para transmitir el significado. El hecho de que el botón se titule Delete es excelente, pero si le preocupa que sea información 'crítica para el sistema', entonces eso debe transmitirse mucho más allá de simplemente usar el color como indicador.

Este artículo cubre el uso del color con respecto a la accesibilidad, y tiene un párrafo específicamente sobre esto:

"... asegure la accesibilidad asegurándose de no confiar en el color para transmitir información crucial del sistema. Por lo tanto, para cosas como estados de error, estados de éxito o advertencias del sistema, asegúrese de incorporar mensajes o iconografía que indique claramente lo que está sucediendo en."

Además, teniendo en cuenta que el rojo es el color clave de su aplicación: asegúrese de utilizar un contraste de al menos 4.5:1 para cumplir WCAG 2 nivel AA como mínimo. Esta es una herramienta realmente útil para verificar que: https://webaim.org/resources/contrastchecker/

35
indextwo

A medida que aumenta el número de opciones viables, puede ser más difícil tomar una decisión final. Una vez que lo haya reducido a unos pocos, puede considerar permitir que los usuarios seleccionen el esquema que prefieran .

Algunos esquemas de color a considerar:

  • Rojo = peligro = tu aplicación es peligrosa. Cambia el color principal de tu aplicación.

  • Azul = color de la competencia. Competidor = peligroso. Usa el azul para el peligro. Mientras que un azul más claro puede confundirse con una alerta positiva (como el éxito), un azul oscuro puede no serlo.

  • Use blanco y negro. Los ejemplos en respuesta de Khalil Hanna son sorprendentes. El problema es que negro/blanco puede confundirse con texto ordinario. Negro + naranja/amarillo puede no tener el mismo problema.

  • Use colores estándar independientemente del color principal de su tema. Verde = éxito. Amarillo/Naranja = Precaución. Rojo = peligro/advertencia. Etc.

    Sin embargo, como Aline señala , el so del color del diseño de material de Google aconseja: "Dado que el rojo es un color de marca, tampoco úselo para transmitir un estado de error . Elija colores de alerta alternativos que no utilicen el color de la marca ". Su ejemplo usa naranja. Pero el púrpura también parece una opción viable.

    Material Design Example

10
習約塔

El "color de peligro" debe sobresalir del esquema de color de su aplicación. También es bueno considerar el significado. Rojo/naranja/amarillo, en la mayoría de las culturas, indica peligro, alerta, atención. Por lo general, si veo un mensaje azul o verde, automáticamente pienso que es un comentario exitoso. Creo que deberías usar naranja o amarillo, para destacarte de los colores principales.

En Google Material Design, usan naranja con temas rojos: https://material.io/design/color/color-usage.html#meaning

5
Aline

El primer esquema de color que viene a la mente para indicar peligro es una combinación de amarillo y negro, particularmente si el negro está en rayas diagonales. Sospecharía que la asociación con el peligro proviene de las abejas en la naturaleza.

Simplemente escribiendo yellow black sign en Google generará muchos signos que indican algún tipo de peligro. Canta sobre el veneno, sobre el peligro de caerse, la cinta utilizada en las escenas del crimen, etc.

Personalmente, he visto cuadros de mensaje con un borde grueso, con franjas diagonales amarillas y negras, y siempre me hacen pensar que hay algo potencialmente peligroso, probablemente una decisión posiblemente peligrosa. Ver un botón con un triángulo redondeado con el mismo patrón me indicaría que debo ser muy cauteloso si presiono ese botón.

Para mí, el rojo liso no es realmente tan fuerte, y necesitaría blanco y negro para superar completamente el mismo nivel de peligro.

5
trlkly

Si ya está usando el color rojo, use amarillo y negro. Es una señal de advertencia natrual de la naturaleza, y definitivamente llamará la atención. Se usa también en muchas señales de peligro para sitios de construcción.

enter image description here

En los países occidentales, no hay nada culturalmente más peligroso que el negro sobre el rojo:

enter image description here

2
Danielillo

OBTENER ATENCIÓN

¡EL COLOR FALTA SIGNIFICADO

El color por sí solo no transmite significado, y como tal por sí mismo no se debe confiar en él para cualquier expresión de "peligro" o "advertencia". Además, las deficiencias visuales como la deuteranomalía (el 6% de los hombres afectados) hacen que ciertos contrastes de color sean invisibles, sin mencionar las diferencias culturales como han mencionado varios.

CONTRASTE, SÍMBOLOS Y TEXTO

Se eligieron colores como el rojo, el amarillo y el naranja no porque el color tenga un significado específico, sino porque el color proporciona un cierto contraste de color, contraste de luminancia y "captación visual", y por lo tanto se destaca en el fondo.

Es más importante tener un contraste de luminancia adecuado y usar símbolos orientados a la atención/atracción que sean claros en su intención.

El contraste de luminancia no se basa en el contraste de color que se puede percibir erróneamente debido a impedimentos o diferencias culturales, y ayuda a que el símbolo se destaque. Usar un contraste de luminancia más alto que los estímulos circundantes (texto, botones, etc.) es lo que ayudará a atraer la atención y la concentración del usuario.

El contraste de color puede ayudar a aumentar la conciencia en términos de reconocimiento cognitivo de una advertencia, pero debe ser una consideración de diseño secundaria. Por ejemplo, si el mercado es América del Norte, el verde es posiblemente una mala opción para una advertencia, pero el verde en combinación con su oponente es el color rojo (incluidos los púrpuras) ) crea una detección de bordes muy fuerte en la percepción visual humana normal.

Los símbolos comprensibles pueden ser muy útiles para transmitir significado de una manera que (idealmente) no requiere traducción. Aunque nuevamente las diferencias culturales pueden tener una fuerte influencia.

En Las Vegas, el MGM Grand Hotel fue diseñado originalmente donde la entrada principal era a través de una boca de león gigante de color esmeralda. Poco después de abrir el pensamiento, lo derribaron y reconstruyeron la entrada para eliminar la boca del león porque descubrieron que la boca de un león tenía un simbolismo particularmente negativo en algunas culturas asiáticas.

Sin embargo, dentro del ámbito de las computadoras, hay íconos comunes que han logrado una aceptación internacional de ciertos significados: el bien entendido suele ser la mejor opción, especialmente para transmitir una advertencia.

El texto es el rey, a pesar de las diferencias de idioma . El texto claro y simple es la mejor manera de transmitir un significado específico. Una sola palabra con información emergente emergente de información adicional es mi preferencia personal para la usabilidad.

La animación y el movimiento afectarán la atención si ese es el objetivo. Un solo LED rojo parpadeante en una pared de 1000 LED rojos seguramente atraerá su atención, por ejemplo.

TL; DR

En resumen, es más importante tener un buen/alto contraste de luminancia y texto descriptivo y símbolos que cualquier combinación de colores específica.

Aquí hay un ejemplo de uso de contraste de luminancia, una modificación de su botón de eliminación de ejemplo frente al botón Guardar:

SAVE DELETE MODIFIED

1
Myndex

Algo a tener en cuenta al crear interfaces de usuario es que el color nunca debe transmitir significado. Sin embargo, puede resaltar botones destructivos haciéndolos diferentes de otros botones o del resto de su interfaz. En lugar de pensar en los colores que podría usar, intente pensar en cómo hacer que el botón se vea diferente .

Cambiar el diseño

  • Bordes - Si su diseño actual tiene botones sin borde, intente agregar un borde negro o blanco muy distinto (¿grueso?). Esto hace que el botón "salte" del resto de la interfaz.
  • Tamaño - Intenta jugar con la altura o el ancho del botón. El tamaño puede ayudar a diferenciar los botones destructivos de los botones normales. Pero no siempre tiene que ser del tamaño del botón, ¿tal vez podría cambiar el tamaño de fuente de la etiqueta?
  • Estilo de fuente - Hablando de fuentes, ¿qué tal si agrega un subrayado, cursiva o negrita a la etiqueta para que se destaque?
  • Estilo - Quizás agregue una sombra o solo tenga bordes y no tenga color de relleno. Juega con el diseño y haz que se vea diferente .

Colores

El lado creativo de cada persona varía, por lo que si desea mantener su estilo actual pero cambiar los colores, recomendaría mirar una rueda de colores para los colores opuestos a los rojos. Esto ayudará a que el botón se destaque. También puede enfatizar el botón eligiendo colores destructivos como amarillos, rojos (obviamente más oscuros o más claros), negro o blanco (si se adapta a su diseño).

El diseño es una parte muy difícil del proceso de desarrollo, por lo que jugar definitivamente ayudará. Obtenga la opinión de la gente: haga que elija un diseño. Haz algunos diseños de maquetas. Espero que esto haya ayudado.

0
Aaron