Cuando se trata de colocar iconos, creemos que hay tres reglas sencillas para asegurarse de que sus iconos siempre se colocan de una manera lógica que mejore la experiencia del usuario.
-
Toca el borde de un producto, pero no lo tapes
Es importante asegurarse de que el icono de la zona activa y el texto que aparece al pasar el ratón por encima se colocan en una posición lógica, sin obstruir ni tapar detalles importantes del producto. Colocar el icono en el centro del producto desviará la atención de la imagen, así que intente situarlo en el borde del producto siempre que sea posible.
Ejemplo de colocación correcta e incorrecta del icono, respectivamente:
Otro error que suele confundir a los usuarios son los iconos flotantes. Estos iconos están desconectados del producto al que pertenecen, haciendo que parezca que simplemente flotan en la página.
Ejemplo de icono flotante. ¿Adivinas a qué producto pertenece este icono?
2. Crea espacio suficiente
También es importante asegurarse de que los iconos no se toquen ni se apilen unos sobre otros. Para ello, crea espacio entre los iconos para evitar confusiones y aclarar qué icono pertenece a cada producto.
Ejemplo de iconos que no tienen suficiente espacio entre ellos:
Como puedes ver en el ejemplo anterior, no queda claro al instante qué icono pertenece a qué producto. Esto es mucho más claro:
Ejemplo de iconos con suficiente espacio entre ellos:
3. Se consecuente
Quizá la regla más importante para posicionar los iconos sea la coherencia. Es fundamental para una buena experiencia de usuario y también ayuda a los compradores a identificar rápidamente a qué producto pertenece el icono.
Colocación coherente de los iconos:
He aquí cómo no hacerlo
Colocación incoherente de iconos:
