it-swarm-es.com

¿Cómo optimizar el espacio utilizado por las etiquetas en la columna derecha de los sitios de StackExchange?

En esta metapregunta sobre cómo debería ser el sitio de la interfaz de usuario de StackExchange , estoy trabajando (lea: jugando con) un diseño para el sitio. Estoy usando una herramienta basada en la web para editar el CSS de la página, lo que me da mucha libertad para cambiar las cosas al tiempo que me limita al HTML disponible representado por el servidor.

Al cambiar y reorganizar cosas (principalmente elementos como la tipografía y el peso visual) me di cuenta de que la columna de la derecha, como se muestra en casi todos los sitios web de StackExchange, es bastante ineficiente. Así es como se ve en el meta sitio:

How the tags look on beta sites

Las etiquetas (y debajo, las insignias) son objetos pequeños de mayor longitud horizontalmente que verticalmente. Cada uno tiene varios atributos:

  • Nombre del objeto.
  • Número de veces que se ha otorgado la etiqueta o miembro al que se ha asignado la insignia
  • Un elemento visual para reforzar la noción del objeto.
  • Un ancho horizontal distinto según la longitud del nombre

La forma en que se organizan las cosas ahora se siente muy ineficiente:

  • Cada etiqueta/insignia ocupa una línea de espacio, a pesar de no necesitar todo el ancho horizontal.
  • La representación visual de la etiqueta y la insignia en esta página se siente inadecuada. Si bien las etiquetas y las insignias están diseñadas para mostrarse por sí mismas, por ejemplo, una etiqueta en una pregunta o una insignia en el perfil de un miembro, en estos casos van acompañadas de metadatos: la cantidad de veces que se ha aplicado la etiqueta o el miembro la insignia se otorga a. Pero la representación visual aún asume una aplicación genérica.
  • En la mayoría de los sitios de StackExchange, estos elementos tienen bordes fuertes, lo que crea mucho espacio negativo incómodo entre cada elemento, ya que se encuentra en una línea.

En mi rediseño Me he ocupado de reducir la fuerza de las etiquetas (todavía no he abordado las insignias) para reducir ese ruido visual, pero no he encontrado una buena manera de representar las etiquetas en combinación con el número de veces aplicadas todavía. He tenido algunas ideas, pero ninguna de ellas se siente bien:

  • Renderizarlos en una nube de etiquetas. Esto usaría más espacio horizontal y menos vertical. Sin embargo, las nubes de etiquetas son en su mayoría escaneables y no legibles. Sin embargo, no estoy seguro de si eso es un problema.
  • Considere una nueva representación visual para la combinación de etiqueta con número de aplicaciones. Quizás al incluir el número en la etiqueta: <discusión] x14 se convertiría en <discusión | 14]. O aumentando la altura del elemento de etiqueta y colocando el "14" debajo del nombre. Eso ocuparía más espacio vertical en general, pero permitiría varias etiquetas en cada fila.
  • Elimine la referencia a un número específico de aplicaciones y, en su lugar, use una metáfora visual para indicar el número de veces que se aplica. Quizás utilizando una paleta de termómetro: las etiquetas "calientes" podrían ser más rojas y las frías más azules. Sin embargo, esto no sería inmediatamente evidente para los nuevos usuarios.
  • Elimine la referencia a un número específico de aplicaciones y, en su lugar, use el ancho para indicar el calor. Cuanto más ancha es una etiqueta (en la columna de la derecha), más popular es. Como anteriormente, sin embargo, esto sería algo confuso inicialmente.

Turno de preguntas: ¿Cuál sería una forma efectiva de rediseñar la forma en que se muestran las etiquetas y los distintivos en la columna de la derecha, dado que solo puedo modificar el CSS y no puedo manipularlo? el HTML?

8
Rahul

Felicitaciones por el esfuerzo - muy agradable!

Tengo algunos comentarios sobre la lista al final:

  • Personalmente, siento que las nubes de etiquetas no son muy útiles.
    El orden entre los elementos no está claro, no siempre es fácil ver cuál es más grande y no sabes por qué están ordenadas las etiquetas.
  • En cuanto a su segunda sugerencia, podría tener una pequeña mejora, pero tampoco se siente bien: use el ancho, pero no simplemente amplíe la etiqueta - ¡apílelos!
    Es decir. simplemente muestre una "sombra" a la derecha de cada etiqueta para cada instancia.
    alt text
    Naturalmente, establecerás un límite y cualquier cosa por encima de 10 tendrá puntos suspensivos (...)
    Si lo desea, puede incorporar el número de apariencias sobre la pila, pero puede crear desorden.
7
Dan Barak

¿Tal vez usar el enfoque de tamaño de fuente ponderado o color de fuente?


(fuente: ljplus.r )

4
Kostya

Creo que la desalentadora lista de etiquetas en este sitio me hace evitar, ya que inconscientemente me asusta por ser tan largo. Creo que limitarlo a los diez primeros con una opción para verlos a todos haría que el usuario lo escanee rápidamente y vea qué sucede en cuestión de segundos.

Además, nunca pude entender cómo se clasificaron las etiquetas. Me parece que están ordenados por los números a la derecha en lugar de los recientes. Por lo tanto, creo que mover los números a la izquierda y alinearlos (los números) a la derecha crearía la certeza de que están ordenados por él. Eliminar el signo "x" repetitivo y el gráfico alrededor de cada etiqueta despejaría la lista y mejoraría la capacidad de escaneo.

Además, hacer que las etiquetas se vean como enlaces significaría que se puede hacer clic y que lo llevará a otra página.

enter image description here

4
Denzo

Algunas ideas, más para spark otras ideas listas para usar que cualquier otra cosa:

  • Un control deslizante (los paneles de etiquetas se desvanecen de forma consecutiva)
  • Stock-ticker de etiquetas
  • Gráfico de etiqueta estática
  • Gráfico interactivo de etiquetas
  • Algo similar a las visualizaciones en Digg Labs .
0
Virtuosi Media