it-swarm-es.com

¿Debería "Sí, eliminarlo" ser rojo o verde?

Al diseñar una interfaz para un CMS (Sistema de gestión de contenido), me topé con una paradoja y estoy un poco confundido acerca de qué hacer y por qué hacerlo.

Contexto

Antes de eliminar un álbum, se le pide al usuario que confirme la acción.

Verde "Sí"

First option

Rojo "sí"

Second option

¿Qué opción es más intuitiva para el usuario?

787
Diéssica

Ambas formas parecen plantear un paradigma falso positivo. Esto puede ser más simple y no tener que obligar al usuario a pasar tiempo entendiendo la asociación de color a etiqueta.

Simplemente haga que el botón "Eliminar" sea más destacado. Haga que el botón "Cancelar" sea menos prominente. En lo que respecta al etiquetado dentro de los botones, no es necesario poner mucho contexto en lo que esencialmente son acciones simples (¿no/sí? O cancelar/eliminar) ya que eso requiere más procesamiento por parte de los usuarios.

enter image description here

Los usuarios generalmente asociarán una acción como "Eliminar" o "Eliminar" a rojo. Y, como siempre, proporcione una forma de "cancelar" la acción.

1358
jnmnrd

No estoy tan seguro de que debas pensar solo en términos de rojo y verde. El rojo típicamente ha sido asociado con el peligro , que posiblemente se remonta a la Edad Media (cita requerida). Un rápido búsqueda de imágenes de Google para "eliminar" produce imágenes casi completamente rojas.

Para mí (y para bootstrap ) verde indica éxito, rojo indica peligro.

Bootstrap buttons

Como eliminar es una acción peligrosa, recomendaría mantener el botón Eliminar rojo. ¿Estás restringido a usar verde/rojo? Si es así, recomendaría usar su segunda imagen. Las luces de freno de Estados Unidos me indican que el verde significa "continuar". Usando este razonamiento, podría decir un botón verde "No, manténgalo" significa "No, manténgalo y continúe" y un rojo "Sí, elimínelo" significa "Sí, elimínelo aunque sea peligroso". De todos modos, consideraría hacer que el botón "No, mantenerlo" sea azul porque es un color de acción bastante estándar (por ejemplo, es el color predeterminado de los enlaces sin estilo).

Editar : Creo que @ JNMNRD tiene la mejor respuesta sobre esto. Aquí está la imagen de @ JNMNRD sin palabras. ¿Puedes decir qué botón significa eliminar?

Delete

321
circuitry

Mirando esto desde un ángulo ligeramente diferente, donde sea posible, podría considerar eliminar la confirmación por completo y cambiar a un proceso de "Hacer/Deshacer".

Este método se usa a menudo en los servicios de Google:

enter image description here

Tiene las ventajas de que es culturalmente neutral y más eficiente para el usuario (un clic en lugar de dos para eliminar).

La desventaja es que es un enlace transitorio y se anula cuando se toma otra acción, por ejemplo, cuando se informa que otro correo electrónico es spam. También se descarta una vez que cierra la sesión, pierde el foco o se actualiza.

Para ayudar a evitar estas desventajas, podría considerar incluir algún tipo de funcionalidad de papelera de reciclaje en el sitio, como lo hace SharePoint.

221
Graham Wager

Con el debido respeto, creo que cada respuesta hasta ahora ha fallado un poco.

En primer lugar, según la sección Contexto de su pregunta ...

Contexto

Antes de eliminar un álbum, se le pide al usuario que confirme la acción.

... podemos deducir que esto no es un éxito o error modal, sino que es una confirmación modal, lo que implica una advertencia o precaución color como amarillo , no verde o rojo , como éxito y error los colores implican respectivamente. Y dado que es un modal de confirmación, la redacción probablemente debería cambiar a algo como:

Confirma la eliminación de este álbum:

Para promover la usabilidad del modal de confirmación, puede envalentonar the Confirme el botón para que se destaque un poco más. Y para aquellos que tienen daltonismo o problemas de lectura , normalmente pongo un icono que coincide con lo que se confirma. En este caso, un bote de basura parece encajar.

Cuando agrega todo eso, aquí hay un ejemplo de lo que obtiene:

confirmation modal


Actualización basada en comentarios sobre la redacción de los botones ...

He estado pensando en la redacción de esto por algún tiempo. Los comentarios se inclinan hacia el uso de Eliminar en lugar de Confirmar , pero creo que hay algo mejor. Dado que el icono es un bote de basura y estamos hablando de deshacerse de un álbum , creo que la redacción debe coincidir con que en lugar.

Entonces, lo pensé y se me ocurrió Keep and Basura en su lugar. Ambos coinciden con la pregunta de si se debe eliminar el álbum o cancelar la acción, sin mencionar que los colores aún funcionan para los usuarios daltónicos, el envalentonado Keep deja en claro cuál es la acción predeterminada, y juntas, las palabras hacen que sea 100 % claro sobre qué acción se está confirmando.

updated confirmation modal

132
Code Maverick

Es más probable que los usuarios lo piensen dos veces antes de hacer clic en algo que es rojo. ¿Para cuál de las dos opciones quieres que lo piensen dos veces antes de hacer clic?
¿Cuál de las dos opciones potencialmente desencadenará más eventos irreversibles?

Fuente: http://en.wikipedia.org/wiki/Red#Warning_and_danger

43
Rolf

Investigué un poco después de leer sus preguntas y las respuestas actuales, y descubrí que existe evidencia que sugiere que la preferencia por el color rojo en los humanos, como en otros primates no humanos, depende de si el contexto es amigable u hostil. ( Maier et al., 2009 y estudios de seguimiento).

Como se resume en el resumen (énfasis mío):

Se realizaron tres experimentos sobre preferencia de color utilizando un paradigma de selección espontánea con participantes infantiles.

El experimento 1 demostró que los participantes prefieren rojo sobre verde en un ambiente de laboratorio amigable.

El experimento 2 demostró que la preferencia de los participantes por el rojo varía con el contexto en el que se presenta el color: Se prefiere el rojo en un contexto hospitalario (después de una cara feliz), pero no en un contexto hostil ( siguiendo una cara enojada). Se encontró el patrón opuesto para el color de control verde.

El experimento 3 usó la misma manipulación de contexto, pero se agregó un segundo color de control, gris, para examinar claramente si el contexto afecta la preferencia por el rojo solamente. Como se predijo, dada una segunda opción alternativa, se encontró una preferencia dependiente del contexto para el rojo, pero no el verde o el gris. Estos resultados representan la primera evidencia de moderación de contexto en la literatura de preferencia de color.

(Registro de base de datos PsycINFO (c) 2012 APA, todos los derechos reservados)

Uno se pregunta si el contexto de esta acción, eliminar algo, sería suficiente para llevarlo a un territorio "hostil". Mi intuición es que sería si la eliminación fuera accidental (el usuario presiona 'eliminar', se da cuenta de que no tenían la intención de hacerlo y se les presenta una última oportunidad para guardar su trabajo), y posiblemente aún así, incluso si fueron intencionales (¿el usuario está frustrado por tener que superar otro obstáculo en el camino hacia la meta?).

28
Jessica Yang

¿Cuál es el estándar existente en el resto de su aplicación? ¿Utiliza botones rojos para indicar "Quiero completar esta acción" y botones verdes para indicar "cancelar esta acción"? ¿O es al revés?

Si es algo así como, bueno, casi todas las piezas de software que he visto, entonces mi dinero está en verde para "seguir adelante y hacerlo" y en rojo para "¡abortar! ¡Abortar!".

Mientras que "rojo" para "advertencia" es un punto justo, su lugar es antes llegando a esta etapa - haga que el botón original "eliminar" sea rojo. Pero aquí está preguntando acerca de la etapa de confirmación, que debería siempre tratar "continuar" y "cancelar" de forma coherente, independientemente de la operación que se pueda continuar o cancelar. Si el rojo suele ser "cancelar", pero a veces "continuar", entonces solo está invitando a la confusión del usuario.

18
Dave Sherohman

Puede elegir establecer una llamada a la acción primaria y secundaria.

Ejemplo de LinkedIn:

example

Esto proporciona una acción de confirmación única y obvia que el usuario puede tomar sin la preocupación perturbadora por la accesibilidad, el sesgo cultural y la confusión de decisiones que puede provenir de dividir las opciones por color solo.

Además, cómo está escrito en el ejemplo anterior es muy claro. Cómo se puede reformular la pregunta no deja ambigüedad:

¿Estás seguro de que deseas eliminar este álbum? SÍ/Cancelar

También piense en el flujo de usuarios para esto. No es una buena práctica proporcionar una acción absoluta sin una prueba de fallas.

proporcionar un deshacer

Fuente: ¿Cuáles son algunas alternativas a la frase "¿Está seguro de que desea XYZ" en los cuadros de diálogo de confirmación?

Aquí también hay otra versión sobre la posibilidad de eliminar:

example

Los usuarios pueden cometer errores en las ventanas de confirmación. Si el usuario está a punto de eliminar algo importante que nunca recuperará, es importante que se asegure de que los usuarios estén absolutamente seguros antes de continuar. En lugar de dar a los usuarios un botón de confirmación que podrían presionar por error, deles un campo de texto y pídales que escriban la palabra "eliminar" para confirmar. Cuando el usuario escribe "eliminar" en el campo de texto, no hay duda de que desea eliminar. No se presiona accidentalmente el botón Eliminar. No hay arrepentimiento cuando el usuario elimina, porque el campo de texto de confirmación les asegura lo que van a hacer antes de hacerlo.

Fuente: http://uxmovement.com/buttons/how-to-make-sure-users-dont-accidentally-delete/

17
Pdxd

Mi solución para eliminar cosas es un botón con un icono de papelera que abre un popover. Creo que esta es una buena solución porque:

  • sin diálogo perturbador, ¡todos odian los diálogos de confirmación!
  • se requiere confirmación. sin clics accidentales
  • el usuario solo tiene que leer dos palabras, sin preguntas molestas
  • el color rojo indica que realmente se ha eliminado, puede empasizarlo agregando "irreversible" para eliminar
  • mínimo de movimiento del mouse y del ojo
  • mínimo de espacio desperdiciado
  • sin cambio de contexto

screenshot## Heading ##

13
daniel

El verde generalmente se usa en interfaces y lugares para indicar "ir", "continuar" o "sí". En su caso, eso es exactamente lo que el usuario está tratando de hacer. Continúan con su acción pasada (que fue presionar el botón Eliminar). El rojo es visto como una parada, como "¡Alto, he cambiado de opinión!"

En su caso, iría con lo que los usuarios están acostumbrados: verde para continuar y rojo para cancelar.

10
Mike

¿Por qué tienen que ser dos colores diferentes? Parece que esto está complicando las cosas debido a las diferencias culturales y otros problemas que se han planteado (aunque, no estoy seguro de cuál es el público para esta aplicación o sitio web. Entonces, tal vez las diferencias culturales, en su mayor parte, son irrelevantes si se trata de una base de usuarios muy específica para una aplicación).

Como alguien más mencionó, ¿por qué no hacer que el botón de acción principal sea más prominente y el botón Cancelar menos prominente? En iTunes, por ejemplo, cuando elimina un archivo de música, la ventana de solicitud tiene un botón gris para el botón Cancelar, y el botón de acción principal es azul. Además de ser azul, el color pulsa para llamar la atención.

Además, en su ejemplo inicial, las etiquetas de los botones parecen prolijas. Ya les preguntas "¿Realmente quieres eliminar este álbum?" ¿Por qué no etiquetar los botones simplemente como "No" y "Sí" o "Cancelar" y "Eliminar"?

9
Dmacatude

El verde siempre debe ser positivo, en relación con la opción "Sí, adelante", por lo que debe ser verde. El hecho de que esté eliminando algo en lugar de crearlo es irrelevante.

Rojo está acostumbrado a "No, he cambiado de opinión" o "No, no quiero que hagas eso", sea lo que sea "eso".

7
Dave Murray

Los botones se utilizan para enviar/enviar información o tomar medidas, no para avisar de inacción. El único botón debe ser uno que avance por el flujo. Cualquier otra acción debe estar representada por un enlace. En este contexto, recomendaría el uso de un color de botón que no se use en ningún otro lugar del sitio, o que esté reservado solo para las acciones más serias. Supongo que esto sería rojo. El punto es forzar al usuario a salir de un estado mental pasivo de hacer clic en botones de color X en la posición Y (verde, abajo a la derecha) y hacer que pregunten explícitamente "¿qué hará esto?"

7
Matt Langan

No use ningún color para tal acción. Ambas acciones tienen igual importancia. Tal vez el usuario haya hecho clic accidentalmente en 'Eliminar', o el usuario realmente quiere 'Eliminar' el Álbum.

El color es una distracción innecesaria en tal escenario y no ayuda con el contexto.

Permita que el texto en las etiquetas de los botones confirme las acciones: "Cancelar" y "Eliminar álbum"

4
Sumi

@JNMNRD tiene la mejor solución.

Normalmente, la acción que desea que realicen los usuarios debe colocarse a la derecha, y como se trata de un mensaje de confirmación, la acción de eliminación debe colocarse a la derecha.

Además, al dar dos colores a las diferentes acciones, de alguna manera les está dando la misma jerarquía. Mientras que si los usuarios ya realizaron una acción para eliminar, y esto es solo una confirmación, las acciones no deberían competir. Esto debería funcionar solo para fines de validación.

Es por eso que dejar la opción de cancelar neutral es lo más útil, ya que su usuario leerá las instrucciones y se centrará inmediatamente en el botón Eliminar, pero aún así, si se arrepiente, tendrá la oportunidad de cancelar.

1
Miguel Fernandez

En realidad, me gusta mucho la experiencia del usuario de Github al eliminar un proyecto, el color de la tipografía junto con el borde se cambia a rojo, lo que indica claramente que algo peligroso está sucediendo.

enter image description here

Github muestra una ventana emergente para asegurarse de que el usuario realmente quiera eliminar el proyecto o el repositorio.

enter image description here

0
Pir Abdul