Resaltar acciones primarias y secundarias
A través de gráficos y diferentes tipos de resaltes (fuentes, colores, etc) podemos guiar mejor el usuario para que alcance con éxito sus objetivos.
Voy a ilustrar esto con 3 ejemplos llevados a cabo en el proyecto Cinemavip.
Enlaces y botones
En la zona superior del sitio web Cinemavip se define claramente a quien va dirigido y que puede ofrecer esta red audiovisual.
- Por un lado destacan los enlaces a la secciones de usuarios, el directorio de empresas y las ofertas de empleo. Tres pilares básicos de la red social.
- Por otro lado tenemos el Marketplace, un nuevo servicio sobre el que se quiere captar la atención. Por ello en este último caso gana fuerza el empleo de un botón, aunque con las mismas sinergias de colores que los enlaces.
Botón de formulario como acción principal
En los formularios el usuario puede realizar varias acciones: enviar, guardar, borrar, cancelar, volver atrás, etc. Para mejorar la experiencia de uso podemos identificar que acciones son más comunes y en base a ello destacarlas visualmente.
En este caso volvemos a recurrir al empleo de un botón para realizar la acción principal «Enviar». Por otro lado disponemos de un enlace para «volver atrás», una acción claramente secundaria. De esta forma evitamos el empleo de dos botones iguales que se enfrentarían por ganar el foco de atención.
Destacar a base de color
En este ejemplo vemos 3 eventos próximos en el tiempo, pero el más cercano esta ubicado como el primero de ellos y bajo un color de fondo más oscuro, resaltándolo frente a los otros dos y así alertando de su cercanía.
Los 3 ejemplos pueden parecer pequeñas tonterías pero conviene prestar atención a detalles así, los cuales son cruciales para la experiencia del usuario.
7 Comments
Skeku
Aunque no lo has dicho del mismo modo (lo enfocas como acciones primaras y secundarias), sí que comparto tu visión. A nivel de interacción un hipervinculo representa navegación, movimiento o transición entre secciónes. Por otro lado, un botón es la metáfora de acción determinada: «Enviar», «Pedir presupuesto», «Hacer sugerencia».
Es realmente MUY interesante el diseño de interacción a este nivel sobretodo si tenemos en cuenta también lo divertido de los «Call to actions», los textos gancho que consiguen ese clic tan deseado. Tenemos un ejemplo clarísimo en la versión Premium de google Adsense. Es exactamente lo mismo sólo que podemos configurar, entre otras cosas, el quitar la coletilla de «Anuncios Goooogle». Con esto el impacto es brutal a nivel de retorno de clics.
A menor nivel, «Gratis» «Free» «Gift» son palabritas que también tienen su magia. Por ejemplo en el blog, sí que he notado que haciendo pequeños cambios de este tipo, la cosa cambia. Pues con los botones y los hipervínculos, más de lo mismo. Quizá para no diversificar entre diferentes tipos de elemento se puede emplear la diferenciación de tamaño de botones, su color,etc…
Resumiendo, que todo esto no viene mucho a cuento pero para un sitio en el que dejo comentarios, me tengo que explayar xD
javiaurea
Muyyy interesante el comentario Skeku.
A nivel de interacción yo creo (no se si con mucho criterio) que la diferencia que planteas entre enlace (movimiento) y botón (acción) ha quedado diluida y se ve normal enlaces con acciones como: cerrar sesión, responder, incluso enviar.
Muy curiosa la apreciación de google adsense, y las llamadas de acción. Si a ti te han dado resultado seguro que funciona, será por visitas 😉
Explayate eso y más que así da gusto. Y para mi un orgullo que el todopopuloso skeku comente en mi blogito.
Joan Garnet
Tres ejemplos muy ilustrativos de buenas prácticas de UX 🙂
Visto así a primera vista parece tan obvio… pero ponerlo en práctica de forma elegante es ciertamente dificl (yo soy 100% developer).
Saludos!
javiaurea
Me alegro que te resulten ilustrativos, pero es cierto que son muy obvios.
Nos seguimos Joan. Gracias 🙂
Marcos
Cómo me gustan estos temas, que es donde verdaderamente se le da valor a las webs más allá de lo esencial, pero que es precisamente con lo que se logra destacar. Al igual que en diseño los detalles pueden ser la clave del éxito, en web lo mismo ocurre con la facilidad que se le da al usuario para manejar lo que tiene delante, y en este caso, diseño + usabilidad….
Qué buenas entradas mantienes en el blog Javi, encima en esta ocasión con un caso real de primera línea 🙂
javiaurea
Muchas gracias Marcos, comentarios así son los que hacen que uno comparta con el doble de felicidad.
Comments are closed for this post