it-swarm-es.com

¿Cuál es un buen color para un botón de pausa?

Tenemos una aplicación con un cronómetro incorporado. Si el cronómetro está funcionando, se muestra el botón de pausa y si se detiene, se muestra el botón de reproducción. Actualmente, el cronómetro y el botón están en colores neutros.

Sería genial si el color del botón de reproducción/pausa pudiera ayudar al usuario a usar el cronómetro de manera más efectiva.

El fondo debe permanecer neutral por razones técnicas, por lo que la única opción de diseño que tenemos es colorear el botón. He leído el discusión sobre la separación del botón de reproducción y pausa y tiene mucho sentido, pero nuevamente, las razones técnicas me impiden tener dos botones. Entonces, un botón sobre un fondo gris es.

¿Debería el cronómetro en funcionamiento con el botón de pausa ser verde o rojo?

Un botón de parada verde sería un gran indicador de que el cronómetro está funcionando, pero sería extraño presionar un botón verde para detener algo. Un botón rojo de detención sería un gran indicador de que se trata de un botón DETENER, pero luego el cronómetro en funcionamiento siempre mostrará el botón rojo, lo cual es un poco extraño.

17
Sandra

La respuesta de ChrisF es muy correcta: ¡asegúrese de que los colores no sean la única indicación! Asumiendo que ya te estás ocupando de eso:

Si la elección es estricta entre verde y rojo, elija rojo.

El botón es una acción, no un indicador. Si fuera un indicador, es posible que lo haya querido en verde (para mostrar que está "bien" o en ejecución), pero cuando se trata de acciones, el rojo significa "detener" (y "pausa" es una especie de "detener").

Además, no necesita más indicaciones de que el cronómetro está funcionando, ¡verá que los números reales cambian!

Por cierto, si solo tiene un botón, después de presionar "pausa", ¿en qué se convierte el botón? ¿Al presionarlo nuevamente se reanudará o se detendrá?

9
Dan Barak

Recuerde que una proporción significativa de su base de usuarios será daltónica en rojo/verde, por lo que tener un botón que cambie el color de rojo a verde no los ayudará.

Sería mejor cambiar el ícono. Yo usaría el estándar > para empezar, || para pausa y [] (cuadrado) para detener si necesita esa opción.

Esto significaría que cuando se detenga, el botón mostrará > significa "haga clic para comenzar". Al ejecutar, el botón mostraría || significa "hacer clic para pausar".

8
ChrisF

Una opción que podría funcionar es hacer que el botón sea de color mientras el reloj está funcionando y neutral cuando no lo está. En lugar de mostrar> y ||, puede hacer que se vea como un botón físico con un LED incorporado que se ilumina cuando el reloj está funcionando. Puntos de bonificación si puede hacer que el botón parezca presionado cuando el cronómetro está "activado".

Picture of a toaster oven with a button that has a blue light and remains depressed when on

Esperaba que pudieras usar una luz roja para indicar el estado (el reloj se está ejecutando) o la acción (detener el reloj): esquivar el combinación de dos funciones mencionado por Jim Jarrett en la reproducción/pausa pregunta y Dan Barak aquí. Pero de acuerdo con una encuesta rápida de los electrodomésticos y la electrónica en mi casa, el rojo nunca se usa para indicar "encendido". (Con una notable excepción: el horno). La mayoría usa luces azules, algunas usan verde. Algunos en realidad usan rojo para indicar apagado (pero encuéntrame en la oscuridad) .

Por lo tanto, no creo que sea una idea particularmente buena. (Me gusta más la respuesta de Dan.) Pero la publicaré de todos modos porque a veces podemos aprender tanto de ideas que no funcionan como las que sí funcionan.

6
Patrick McElhaney

Creo que el color no es una opción. Si usa colores diferentes de los colores de su interfaz de usuario, será una distracción. Sugiero concentrar la atención del usuario en INFORMACIÓN (tiempo) y usar la posición diferente para los controles de comando. Por ejemplo, sé que el botón Inicio/Continuar estará en el centro del espacio de trabajo y Pausa en la parte inferior (1). Entonces veo el tiempo que pasé para alguna tarea. Si quiero detener mi temporizador, encontraré mi botón de detener en la parte inferior (2). Luego veo que mi temporizador está inactivo (la etiqueta de tiempo está inactiva) y encontraré el botón Continuar en el mismo lugar que el de inicio (3).

stopwatch in action

Además, para evitar el "doble" clic (que puede ser causado por demoras en la ejecución, etc.), es un buen hábito colocar controles de acción multi exclusivos en los diferentes lugares.

3
igor

La iconografía de reproducción y pausa parece más relacionada con el video y el audio que con un temporizador.

Un botón con el texto "Inicio" sería fácil de entender. Al presionar este botón de inicio, necesitará acciones para que el usuario haga una pausa y se detenga, si se supone que es un cronómetro.

En cuanto al color, sugeriría verde para comenzar, gris para pausa, rojo para detener: se podría aplicar un tinte monocromático para asegurarse de que el contraste no sea demasiado grande.

Dando un paso atrás del problema inicial, ¿ha considerado que algunos usuarios verán su botón como un indicador del estado actual?

En mi reproductor de MP3, la pantalla muestra reproducción (>) cuando realmente se está reproduciendo y pausa (||) cuando está en pausa. Mi grabadora de video VHS, reproductor de DVD y decodificador también hacen esto.

Con lo que te estás encontrando es un problema bien conocido con los controles de "alternar": el ser Interface Hall of Shame solía tener buenos comentarios al respecto. Esencialmente, no puede predecir si los usuarios interpretarán el botón como estado disponible o estado actual .

Sugeriría lo siguiente:

Muestra dos botones debajo de tu cronómetro, reproduce y pausa: >||

Cuando el cronómetro está funcionando:

  • Desactiva el juego y elimina el color
  • Habilitar Pausa, colorearlo de amarillo/naranja

Cuando se detiene el cronómetro

  • Habilita el juego y coloréalo de verde
  • Desactivar pausa y eliminar coloración
2
Bevan

¿No es genial cómo hemos pasado de dispositivos que tienen botones de detener, pausar y reproducir, para alternar?

El color aleja el foco de otras tareas, por lo que si la intención del cronómetro es que solo unos pocos usuarios lo usen, o que solo lo use ocasionalmente, entonces evitaría distraer el color.

1
JeromeR

He visto rojo para parar en una aplicación de entrada de tiempo. Podría haber varios temporizadores listados en una tabla, pero solo uno podría estar ejecutándose a la vez. Tener el temporizador activo con un botón rojo de parada ayuda al usuario a encontrarlo en la lista.

Supongo que en la facturación por hora, presionar 'detener' en su temporizador es algo peligroso;)

0
JeffO