inspiration - tables design css

¿Qué dirección deberían apuntar las flechas en una tabla ordenada? (17)

En una tabla ordenada, es común tener una flecha hacia arriba o hacia abajo que indique el estilo de clasificación. Sin embargo, estoy teniendo problemas para determinar en qué dirección debe apuntar la flecha. En una clasificación ASC, los caracteres se ordenan 1-9A-Za-z. ¿Debería la flecha apuntar hacia arriba o hacia abajo?

Encontré implementaciones de ambos en la web, así que eso no me ayudó mucho: Up y Down (primero tienes que crear la tabla).

¿Existe una regla dura y rápida para esto? Me encuentro capaz de justificar ambas implementaciones. ¿Qué método usas? ¿Cuál es más intuitivo para ti y por qué?

Editar: Algunos de ustedes han sugerido implementaciones alternativas como barras ascendentes o letras con una flecha que indica la dirección de clasificación. Grandes sugerencias Definitivamente estoy abierto a otras opciones. Cuanto menos ambiguo, mejor. Puede ser quisquilloso, pero realmente me gustaría que haya una confusión mínima o ninguna por parte del usuario.

Editar: terminé yendo con las barras ascendentes y descendentes por ahora. No es estándar, pero parece menos ambiguo que los triángulos. La columna de clasificación actual muestra tres barras, pequeñas a grandes (de izquierda a derecha) para ASC, lo opuesto para DESC. Otras columnas ordenables no tienen barras por defecto, pero al pasar el cursor sobre cualquier encabezado de columna ordenable (incluido el actual) se muestran barras que representan cómo se ordenará la tabla si se hace clic en ese título de columna.

"¿Existe una regla dura y rápida para esto?" - Aparentemente no, ya que encontraste ejemplos de ambos.

Para una coherencia general, diría que la flecha debe apuntar hacia arriba, abajo hacia abajo. Esto es coherente con Windows (haga clic en el encabezado de una columna en el Explorador) y en Office (filtre / ordene una columna en Excel).

Creo que todos están de acuerdo en que la dirección de la flecha requiere que los usuarios piensen sobre su significado. ¿Qué significa una flecha hacia abajo? AZ o ZA? ¿Qué significa al ordenar las fechas? Está claro solo cuando el usuario mira los datos ordenados reales.

Por esta razón, me parece mejor no utilizar ninguna indicación de dirección . Es suficiente para indicar el hecho de que las filas están ordenadas por una determinada columna. Es importante averiguar de qué manera los usuarios esperan que las filas se clasifiquen para el primer clic. El segundo clic invierte el orden, el tercer clic desactiva la ordenación.

Lo he implementado varias veces y los usuarios no tienen problemas para ordenar las filas por columnas diferentes de la manera que les gusta.

El mejor lugar para comprobar, en mi opinión ... serían los grandes sitios web corporativos como amazon , dabs , etc. ya que estos serán los usuarios a los que están más acostumbrados.

Espero que las flechas muestren el estado actual (apuntando hacia arriba cuando la lista está actualmente ascendiendo). Esto es lo que hace Windows Explorer en la Vista de detalles.

Esta es una pregunta muy obstinada. Pero aquí hay una solución lógica y la razón detrás de por qué la elegí:

Solución:

Si utiliza una flecha para mostrar el orden de clasificación en una columna de tabla, será mejor usar una flecha hacia abajo para ascender y viceversa.

Razones:

Si nos referimos a una imagen o un gráfico, donde el recorrido visual y basado en valores están en la misma dirección, el uso de "Ascendente" o "Descendente" cumplirá su propósito según lo previsto. Pero cuando se trata de Tablas, la principal fuente de confusión es que los valores se atraviesan a valores más altos (hacia arriba, pero solo conceptualmente), pero la dirección del recorrido visual es hacia abajo. Y como una flecha es una pista visual (dirección), podría ser más fácil para alguien entender mejor el recorrido direccional con ella.
Para muchas personas, el concepto de ascender y descender es comprensible en términos de valores. Pero en ciertos casos, los usuarios de esa tabla pueden no estar al tanto de estos conceptos. Por ejemplo, alguien que nunca ha ido a la escuela o un niño de escuela primaria o alguien completamente nuevo en el mundo digital. Para ellos, el concepto direccional será más fácil de entender. Como en az, hacia arriba o hacia abajo. Como en 1-9 hacia arriba o hacia abajo. Cabe señalar que los usuarios educados o con experiencia pueden entenderlo de cualquier manera (el cuarto motivo).
La siguiente razón es que ya sea que seamos maestros en tablas digitales o no, siempre hemos escrito listas y tablas. Y en casi todos los casos, lo escribimos en orden ascendente en direcciones descendentes. Por lo tanto, está un poco conectado a nuestro cerebro.
Finalmente, la confusión sobre este tema siempre existió y un método universal siempre es mejor. Hasta el día de hoy, siempre analizo cómo se ordenan los valores para ver si están en orden ascendente o descendente. Las flechas direccionales nunca cumplieron su propósito, ya que no es confiable. Para usuarios educados o experimentados, saber el pedido de inmediato no será un problema. Sin embargo, cuando creamos un estándar universal, debemos asegurarnos de que cada usuario probable sea capaz de entenderlo ...

Cómo lo uso:

Utilizo una flecha de cola para números, alfabetos o cualquier otro valor que aumenta progresivamente al atravesar en esa dirección.

Dado que los valores están aumentando (de forma predeterminada), el usuario puede llamarlo Ascendente si así lo desea, pero la flecha está hacia abajo. Esto también me ayuda a clasificar ''juegos de palabras'' (por ejemplo, el estado de un registro en la tabla. Puede que no esté ordenado en orden alfanumérico, sino en orden de progresión de estado).

Espero que esto haya ayudado.

He hecho pruebas de usabilidad en esto. No parece haber una interpretación consistente entre los usuarios sobre lo que significan las flechas. Me parece recordar que incluso cada usuario no era consistente, pensando que la flecha hacia abajo significaba ascender en un caso y descender en otro. Probé las flechas hacia la izquierda y hacia la derecha (tipo "adelante" contra "atrás"), pero tampoco se interpretaron de manera consistente. Intenté mostrar el estado actual y mostrar el estado que resultaría. Ninguno funcionó.

Lo que sí funcionó fue una descripción esquemática de texto del orden de clasificación: "A..Z" y "Z..A" para alfa, "1..9" y "9..1" para numérico, "1..12 "Y" 12..1 "para las fechas (la prueba de usabilidad utilizó el formato de fecha mm / dd / aa).

Mostrar este texto como de solo lectura que indica el estado actual. Coloque un botón al lado del texto para establecer o cambiar el orden de clasificación.

No probé el ícono de barra ascendente / descendente, pero espero que pueda tener dificultades donde "más grande" sea ambiguo. Por ejemplo, ¿una fecha anterior en el pasado es más grande (más tiempo atrás) o más pequeña (más cercana a Tiempo 0) que una fecha más reciente? ¿La prioridad 1 es más grande o más pequeña que la prioridad 2? ¿Grado A más grande o más pequeño que Grado B? Para el caso, ¿quién, aparte de los geeks, piensa que "Zuschlag" es mucho más grande que "Abbott"? No es que me tome esto personalmente, por supuesto.

La otra cosa que debe tener en cuenta es si la flecha representa la dirección de clasificación actual o la dirección de clasificación que se aplicará si hace clic en la flecha. (No siempre es obvio a partir del contenido de la tabla, ya que puede haber flechas en cada columna)

Perdón por agregar confusión, pero debes considerar esto.

La aclaración en este frente se puede lograr parcialmente agregando una información sobre herramientas adecuadamente redactada a la flecha.

Me gusta:

flecha apuntando hacia abajo por orden ascendente
flecha apuntando hacia arriba por orden descendente

¿Por qué? Porque parece que acabo de ordenar la página. Hice clic en el encabezado y fue "¡Guau !, ordenado de arriba a abajo". La razón por la cual "de arriba hacia abajo" se llama ascendente, se debe a que los números / letras aumentan de valor a medida que la computadora escribe en la pantalla. Lo contrario para descender. Sin embargo, la lista desciende por la pantalla de arriba hacia abajo, de la aa la z. Cuando lo ordena de otra manera, el comienzo de la lista se encuentra en la parte inferior de la pantalla.

Entonces, para la lógica mental física humana -el tipo que significa que las agujas del reloj están cerca y en sentido contrario a las agujas del reloj está abierto, tiene sentido ignorar cómo la máquina clasifica y saca los datos, y piensa más bien cómo un humano podría ordenar los datos: comenzar en el comenzando (valores más pequeños) y en la parte superior del papel, luego avance hasta el final (valor más grande) en el papel.

La razón por la que el comienzo es más pequeño, es porque 1 viene antes que 2, y el alfabeto romano comienza con A y termina con Z. Entonces, esto es una especie de defecto para los humanos en este momento. Escribimos de arriba a abajo y de izquierda a derecha. Tiene que ver con la destreza y la forma en que sujetamos el papel, creo. En realidad, no soy especialista en interfaz humana. Solo pensé en por qué parece más natural. Los chicos de KDE son especialistas en interfaces humanas. Mire cómo se hace el oxígeno.

La otra manera que creo que está bien es un triángulo que muestra que los datos son de menor a mayor. De nuevo, esto es bastante técnico y, a primera vista, el ser humano podría no "entenderlo".

Mi favorito es en realidad la forma en que, por ejemplo, Excel lo maneja: no use una flecha, sino un icono personalizado con

A | Z V

para el género ascendente y

Z | A V

para el tipo descendente. Nadie se preguntará en qué dirección está ordenando.

Ahora, si no puede usar un ícono personalizado, sino que necesita un carácter imprimible, yo diría que las personas tienen la misma probabilidad de confundirse. Windows usa la "pequeña parte de la flecha corresponde a un valor más pequeño" para Explorer, lo que significa que la ordenación ascendente apunta hacia arriba. Pero muchas otras fuentes asumen que la base de la flecha comienza en el valor más bajo y apunta en la dirección del género, lo que francamente tiene tanto sentido como cualquier otra cosa. En otras palabras, la mitad de sus usuarios probablemente tendrá que ajustar de cualquier manera.

No existe una regla rígida y rápida, pero el mejor enfoque es reducir la complejidad aparente para el usuario, utilizando el mejor mapeo de las flechas descendentes y ascendentes con la terminología "Ascendente" y "Descendente".

Tenga en cuenta que la mayoría de los conceptos no numéricos no tienen un mapeo natural fuerte para "subir" o "bajar". ¿Las letras / palabras van "arriba" o "abajo" en el diccionario? ¿Qué hay de las fechas y horarios? Donde es ambiguo, creo que no hay una respuesta "correcta". Recomiendo que "Descending" represente el orden más conveniente para la coherencia, ya que es probable que el usuario piense que la tabla está "inactiva" mientras mueve su ojos hacia abajo. Dejando de lado las representaciones digitales ya que los usuarios de la mayoría de las aplicaciones no conocen ni se preocupan por la representación interna. Por lo tanto, la clasificación alfabética podría ser "Descendente" para AZ, y el tiempo podría ser Descendente con el más reciente primero. La buena noticia es que, siempre que el primer clic proporcione al usuario el comportamiento de clasificación que esperan y el segundo lo invierta, a la mayoría de ellos no le importará cuál de los dos modos se usa.

Ese desafío sobre el tipo correcto de hacer "primero" (al mostrar el contenido, o al ordenar en una nueva columna) es la implicación más importante de la pregunta. El tipo Y el uso previsto de la información determina que debe ordenar. Alfabético siempre debe estar predeterminado AZ, "descendiendo" según mi lógica anterior. Los números varían mucho más con el uso: los números que representan identificadores secuenciales, por ejemplo, una identificación de empleado sería ascendente (1-10), mientras que la ordenación de las cantidades o el precio generalmente sería descendente, para llevar los valores más grandes a la parte superior. El tiempo también varía; el más reciente primero ("Descendente") generalmente funciona, pero en algunos contextos, el más antiguo debe aparecer primero.

No los considero como flechas, sino como una nemotécnica visual del estado actual. Por lo tanto, mostrar un triángulo que apunta hacia abajo muestra el orden descendente. Está visualmente alineado con el ícono con el ítem más grande (base del triángulo) en la parte superior de la lista y el más pequeño (el punto del triángulo) en la parte inferior.

Por alguna razón, siento que siempre está al revés. Para mí, la flecha / triángulo apuntando hacia abajo debería representar la forma en que generalmente leo las cosas (de arriba a abajo -> de aa z) y la flecha hacia arriba está hacia atrás desde la forma en que leo las cosas (de z a a). Pero así soy yo, ya que las IU más populares (Mac, Windows, etc.) lo usan de otra forma, deben saber algo :).

En cualquier caso, la coherencia con lo que el usuario está acostumbrado es una buena opción.

Recuerde que el descender es para d propio. Entonces, usaría la flecha hacia abajo para descender. Pero, de todos modos, siempre me confundo. Le recomiendo que use letras en su lugar, como AZ y ZA en lugar de las flechas. O bien, úselos junto con las flechas.

Siempre fui con lo siguiente:

Ascendiendo - flecha apuntando hacia arriba
Descendente - flecha apuntando hacia abajo

En mi opinión, la representación visual de la flecha que apunta hacia arriba / abajo explica con mayor precisión el orden de clasificación.

Una flecha que apunta hacia arriba generalmente significa más grande o más grande, por lo que debería usarse para orden ascendente. Una flecha que apunta hacia abajo por lo general significa que algo es más pequeño o cada vez más pequeño y debe usarse para orden descendente.

en el buscador clásico, Apple no usó flechas. en su lugar, había un pequeño ícono que parecía tres (o cuatro) líneas horizontales de longitud creciente o decreciente. a primera vista, era como un triángulo; pero al mirarlo, estaba claro si se estaba haciendo más grande o más pequeño.

otras GUI (KDE, por ejemplo) usan triángulos, pero la mayoría de las personas las interpreta como flechas, lo que hace que el mensaje sea ambiguo.

Ascendente : flecha apuntando hacia arriba
Descendente : flecha apuntando hacia abajo

Trucos para recordar:

Alfabetos:
- A Scending ie ABCD
- D esdente, es decir, DCBA
Números:
- A = 1, B = 2 ... Z = 26.
- Ascendiendo ABCD por lo 1 2 3 4, es decir, de pequeño a grande
- DCBA descendiente, por lo que 4 3 2 1, es decir, grande a pequeño
Fecha:
- La fecha en realidad se convierte en un número, aumenta en la base del día, por lo que funciona de nuevo un sistema numérico. hoy es más grande que ayer, hoy es más pequeño que mañana.