En esta ocasión aprenderemos todo sobre otro de los componentes web de introducción y selección de datos al sistema, el componente de valoraciones. De este componente vamos a comprender bien para qué sirve, cómo es y cómo usarlo bien y qué variantes ofrece.
Valoraciones (ratings)
Las valoraciones o ratings sirven para introducir una puntuación de un producto, contenido, experiencia o servicio al sistema de modo que el resto de usuarios pueda tener más información y tomar mejores decisiones respecto a ese producto.
No hay una escala ni unidad única de valoración. Por ello podríamos por ejemplo crear un sistema de valoración con un rango de 1, 2 y 3 corazones, o incluso con un rango de A, B, C, D, E y F. Ahora bien, como sabemos, es bueno adaptarse al estándar porque es lo que mejor conoce el usuario y más errores puede evitar. Así que la mejor opción es ofrecer el clásico sistema de 1 a 5 estrellas.
Es importante señalar que si las valoraciones siguen una escala con decimales. Estas valoraciones deben hacerse sobre una barra de rango para un correcto uso de las valoraciones.
En cuanto a la anatomía, las valoraciones deben ser bastante limpias. Por ello, solo debe incluirse los botones de posición con los que seleccionar la puntuación. Si queremos poner alguna instrucción de uso, escala o valoración la pondremos fuera del componente. Esto que vemos de la anatomía entronca muy bien con el siguiente punto, los estados y el comportamiento.
Estados y comportamiento de las valoraciones
Los estados son 2, seleccionado y sin seleccionar. Los comportamientos son los siguientes:
- Si no hay ningún botón de posición seleccionado, donde pinchemos será la nueva posición y valoración.
- Si ya hay un botón seleccionado y pinchamos sobre otro botón diferente. Cambiamos a esa posición.
- Si ya hay un botón seleccionado y pinchamos sobre esa misma posición, borramos la valoración.
Sistema de aprobación
Los sistemas de valoración tienen una alternativa o variante bastante común que es el sistema de aprobación. Esta es otra manera de puntuar muy común utilizada para valorar contenidos – por ejemplo comentarios – y consiste en un sistema de dos puntuaciones. Aprobación y desaprobación. Una opción común es usar iconos de + y -, una flecha para arriba y otra para abajo, pero si vamos a implementar este sistema de valoración, lo mejor es hacerlo con el estándar de icono con pulgar hacia arriba y pulgar hacia abajo.
De este sistema de aprobación y desaprobación surge luego el panel de reacción. Donde en lugar de limitarnos a señalar que algo nos gusta o nos disgusta podemos reaccionar de distintas maneras como señalando que nos encanta, nos enfada, nos confunde o nos hace reír.
Por supuesto, ni que decir tiene que una vez atribuido un criterio de valoración a un item, el sistema de valoración se hace universal para todo el producto digital. Es decir, aunque tengamos una web que permita valorar restaurantes, cines y otro tipo de establecimientos, no podemos tener un sistema de tenedores para los restaurantes y otro de estatuillas para los cines. Debemos aunar todos en un criterio común.
Buenas prácticas del componente de valoraciones
Una muy buena práctica en cuanto a comportamiento si ya hay una puntuación dada es, al hacer hover, poner un subrayado sobre la antigua valoración y marcar el cambio de posición a la nueva posible valoración. Lo explico mejor en la imagen siguiente
En cuanto a la distribución y la alineación, el componente debe estar en formato horizontal y los elementos clicables a la misma altura y con el mismo espaciado.
¡Extra! Text áreas para dar más información. Muchas veces, el componente de valoración suele ir acompañado de un text area para dar información más allá de una simple valoración y aclarar el porqué de esa decisión. Como esa información no puntúa el item, no se puede considerar el área de texto como parte del componente de valoración.
