¿Qué recuerdan más los usuarios, la posición o el color de los elementos?


11

Tengo un menú de navegación con algunos botones, que se parece un poco a esto (NOTA: cada botón tiene un ícono distintivo que lo diferencia del resto, no los agregué a la maqueta, pero son similares a los íconos de Wins8):

ingrese la descripción de la imagen aquí

Algunos usuarios informaron haber hecho clic accidentalmente en Firmar en lugar de Enviar, algo que es simplemente inadmisible. Ahora estoy considerando formas de diferenciar más los botones. Una opción es mover Sign a la derecha. El otro, (probablemente agregando a moverlo) para cambiar su color:

ingrese la descripción de la imagen aquí

¿Es la posición suficientemente buena diferenciación? ¿O debería considerar usar color también? Agregar un nuevo color a esta navegación tiene cierto impacto en la paleta y el aspecto general, por lo que tiene un precio que tendría que pagar.


2
No llamaría a esto "fuera de tema", pero podría tener más sentido migrar a UX.
DA01

@ DA01 Sí, lo estaba considerando. La parte de color de las cosas me hizo pensar, y finalmente pensé: ¿Puede pertenecer a ambos? ¡Sin embargo, no me importa migrarlo!
Yisela

Algunos de sus usuarios tendrán ceguera al color azul / amarillo. ¡Asegúrese de que estos colores sean distintos para ellos!
keshlam

@keshlam definitivamente! Tengo una aplicación daltónica en la barra de tareas para probar las paletas :)
Yisela

Yo diría que tampoco. El olor es más memorable :)
Scott

Respuestas:


5

Tampoco ayuda que estés trabajando con tres palabras de cuatro letras que comienzan con la letra 'S'. :)

El color es un indicador inmediato de que algo es diferente. En su primer ejemplo, realmente no tiene idea de lo que hacen cualquiera de esos botones a menos que realmente se tome el tiempo de prestar atención y leerlos, de un vistazo, son muy similares para diferenciarse. Un paradigma que utilizamos donde trabajo es que hacemos de nuestra acción primaria un color separado de cualquier acción menos importante o menos permanente / finalizante.

Pero el color no es necesariamente lo que lo hace o lo rompe tampoco. Otra estrategia válida sería asociar un ícono con cada botón (no solo con los dos últimos). De esa manera, está creando otra diferencia fácilmente distinguible en los elementos.

En cuanto a su pregunta real, si la posición es suficiente diferenciación, creo que ciertamente ayuda porque el patrón de botones está roto por los dos más pequeños, lo que lo obliga a mirar realmente las diferencias en los botones en lugar de ignorarlos. El color agregado solo ayuda a acentuar esto aún más, y personalmente, si es posible, también agregaría el color, ya que eso ayuda a probarlo en el futuro en caso de que se agreguen más opciones más tarde y el botón se omita con más frecuencia nuevamente. Sin embargo, siempre que sea difícil cambiar el color, creo que el nuevo posicionamiento es suficiente.

Sin embargo, lo que creo es probablemente mucho menos relevante de lo que piensan o hacen sus usuarios, y si tiene los recursos para hacerlo, probaría algunos diseños diferentes y lo probaría con los usuarios para ver cuáles prefieren y por qué razones.


¡Gracias! Solo una nota: los botones tienen íconos bastante distintos, no puedo revelar las capturas de pantalla reales, y no los agregué a las maquetas ... ¡pero la gente los confunde!
Yisela

Pensé que no eran fieles a la vida, aunque no podría inferir si tenían o no íconos, gracias por aclarar eso.
Hanna

6

Cosas que se pueden usar para diferenciar botones:

  • las etiquetas (obviamente)
  • color
  • Talla
  • orden
  • ubicación
  • proximidad
  • forma / estilo

Mientras más daño involuntario pueda causar una acción, es más probable que desee elegir entre más de una de las opciones anteriores.

Sin conocer el flujo de usuario para estos comandos, no sé si su sugerencia es suficiente, pero definitivamente es una mejora con respecto a la anterior, ya que ahora ha movido la acción 'uh oh', enviar, lejos de los otros dos.

Tal vez iría un paso más allá y usaría una diferenciación de proximidad juiciosa. Quizás algo tan drástico como esto:

--------  --------
| SAVE |  | SIGN |                                               DELIVER -->
--------  --------   

He usado varios diferenciadores aquí ... proximidad, estilo / tipo de botón, y renombrado 'enviar' para 'entregar' (ver más abajo).

Otro desafío que parece tener es un caso masivo de aliteración. Eso puede tomar algo de creatividad para superar eso. Por ejemplo, es probable que nunca desee tener dos botones uno al lado del otro con las etiquetas "eliminar" y "entregar" :)


3

Estoy de acuerdo con Johannes y DA01, ambos han planteado los puntos que quisiera con respecto al posicionamiento, la aliteración, etc.

Pero lo que me gustaría agregar.

Dado que ya tiene iconos para guardar y enviar signos, entonces el reposicionamiento solo del botón de envío debería ser suficiente. Sugeriría no cambiar el color ya que no es necesario y también es un cambio un poco más drástico para los usuarios (no me malinterpreten, sé que podrían hacer frente, pero no creo que sea necesario).

Si los símbolos son lo suficientemente reconocibles para las personas, la separación del botón de envío debería ser suficiente.

Si sus íconos son menos reconocibles de inmediato, es decir, tal vez tenga un disco o un usb en lugar del disquete tradicional para el ícono de guardar, le sugiero que cambie el color como ha sugerido, la gente entiende que el verde significa ir.

Espero que los usuarios terminen contentos;)


1

¿Qué recuerdan más los usuarios, la posición o el color de los elementos?

No propondré sugerencias concretas, sino un breve comentario en el titular: es muy individual. Al igual que algunas personas dirán "Entiendo lo que quieres decir" y otras dirán "Te escucho" o algo similar. Algunas personas están sintonizadas con imágenes, algunas personas están más sintonizadas con el sonido.

Algunas personas están más en sintonía con la forma, otras con los colores. Del mismo modo que necesita satisfacer el daltónico, debe tener en cuenta que no todas las personas ven la forma y el color como sus pistas principales para la navegación (algunas personas identificarán un árbol, un animal, una casa por forma o color; algunos lo verán). Identifique un automóvil conduciendo por el sonido en lugar de la forma y / o el color, etc.

En este caso, por supuesto, es un equilibrio entre los dos (sería divertido saber qué tipo de usuarios se equivocan al presionar el botón equivocado. Puede haber un patrón allí. Además, creo que los usuarios con excelentes habilidades informáticas serán más rápidos en suponiendo dónde encontrar el botón correcto).

Como no puede mostrarnos los botones reales con los íconos, es difícil sugerir. Una manera simple podría ser simplemente hacer que la distancia sea mayor a la que está "fuera", como sugiere @ DA01. Algo así como MailApp:

ingrese la descripción de la imagen aquí

Solo un pensamiento.


Editar

Un experimento que es divertido es presentar a un puñado de personas una maqueta primitiva (cuanto más simple, mejor: dibujos, post-it en la pared, bocetos, pizarra, etc.) con botones colocados pero no marcados e identificados. Luego pregunte a las personas qué esperan que hagan los botones anónimos. A veces, esto puede traer resultados informativos y muy interesantes.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.