confusión sobre el diseño de opciones para dashboard

Tengo 7 opciones diferentes para nuestras máquinas que puse en la parte superior de la página para dar a los usuarios opciones para averiguar lo que está pasando en sus máquinas, lo que he creado está abajo options

muestra cuántas máquinas están en qué estado, pero hay dos problemas con él (en lo que se sabe) que están ocupados mucho espacio, no tengo idea de cuál es la mejor manera de mostrar estos? Sé que no hay una manera única, pero al menos quiero conseguir algo de información, estoy pensando en poner un botón simple con una placa como abajo:

pero el problema es, depende de la longitud de texto de él el tamaño se vuelve diferente, cualquier idea será apreciada

Pregunta hecha hace 3 años, 4 meses, 13 días - Por bitcraftsman

2 Respuestas:

  • Para mostrar las opciones de una manera más compacta y uniforme, podrías considerar utilizar un dropdown con las opciones desplegables. Esto ayudaría a ahorrar espacio en la página y mantener un diseño más limpio.

    Aquí te muestro cómo podrías implementarlo en HTML y Bootstrap:

    html

    
  
  
    
    All 236    Run 4    STOP 4    Data_Incomplete 33

    Esto te permitirá mostrar las opciones en un menú desplegable y los usuarios podrán seleccionar la opción deseada de una manera más ordenada y compacta.

    Espero que esta sugerencia te sea útil. Si tienes alguna otra pregunta o necesitas más ayuda, ¡no dudes en decírmelo!

    Respondida el Dec 18, 2020 a las 11:24 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Problemas con el diseño actual:

    Ocupa mucho espacio. Es difícil de leer y comprender.

    Opción 1: Botones con insignias

    Tu sugerencia de utilizar botones con insignias es una buena idea porque:

    Es más compacto. Muestra claramente el número de máquinas en cada estado.

    Sin embargo, tienes razón en que los tamaños de los botones pueden variar según la longitud del texto. Para solucionar esto, puedes:

    Usar el mismo texto para todos los botones: Por ejemplo, "Máquinas: [Estado]". Ajustar el espaciado de los botones: Agrega un poco de espacio adicional entre los botones para que tengan tamaños uniformes. Usar iconos en lugar de texto: Los iconos pueden ser más compactos y consistentes en tamaño.

    Opción 2: Gráfico de barras

    Otra opción es utilizar un gráfico de barras para mostrar el número de máquinas en cada estado. Esto puede ser más fácil de leer y comparar que los botones.

    Opción 3: Cuadro de texto

    También puedes utilizar un cuadro de texto simple para mostrar el número de máquinas en cada estado. Esto puede ser más compacto que los botones, pero menos fácil de leer de un vistazo.

    Recomendaciones:

    Elige la opción que mejor se adapte a tus necesidades específicas. Ten en cuenta el espacio disponible, la facilidad de lectura y las preferencias del usuario. Prueba diferentes opciones y obtén comentarios. Pide a los usuarios que prueben diferentes diseños y te den su opinión. Considera usar una combinación de opciones. Por ejemplo, puedes usar botones para los estados más comunes y un gráfico de barras para los estados menos comunes.

    Respondida el Dec 18, 2020 a las 11:33 - por Gemini

    Votos positivos: 0 | Votos negativos: 0