Diseño de tablas de datos

Lo esencial

La capacidad de consultar y manipular datos es uno de los requisitos clave para la mayoría de los productos que están siendo diseñados en este momento. Teniendo en cuenta las metas y objetivos comerciales, y haciendo que el trabajo diario sea más fácil y productivo para miles de personas obligadas a usar el producto que diseñó 8 horas al día. Hoy hablamos de tablas de datos.

Trabajando como diseñador de UI / UX, especialmente si su enfoque son los productos empresariales, siempre encontrará muchas tablas de datos. Francamente, si hablamos de aplicaciones web complejas, la mayoría de las pantallas que tendrá que diseñar contienen, o simplemente es una gran cuadrícula. Como soy uno de los afortunados en trabajar en este tipo de proyectos, apenas hay un día en que no necesite diseñar uno de esos. Entonces, ¿qué es la mesa? Combinaciones de columnas y filas que lo ayudan a presentar sus datos de la manera más aburrida. Bueno, no es tan fácil como parece. Aquí hay varios consejos para mejorar sus tablas de datos.

1. ¿Cuándo usar tablas y cuáles son los beneficios?

La tabla de datos es una gran solución cuando necesita mostrar mucha información para una gran cantidad de elementos. Por ejemplo, la lista de clientes con su ID, estado, contactos, última actividad, etc., se mostrará mejor como una tabla de datos. Hay muchos otros beneficios, como: gran uso del espacio, escalabilidad fácil, desarrollo fácil, usuario cómodo trabajando con cuadrículas (la mayoría ya trabaja con Excel durante muchos años). Manera fácil de encontrar y cambiar algo.

Pero recuerde, hay muchas formas de representar datos. La decisión de usar o no usar la cuadrícula debe estar dirigida por las necesidades del usuario. Cuando necesite proporcionar una descripción general / resumen mejor para usar más gráficos que tablas. Por ejemplo, el historial del precio de las acciones de algunas acciones durante un año se puede mostrar en una tabla enorme, pero el gráfico es una forma mucho más efectiva de absorber toda esta información.

2. ¿Qué información mostrar?

La información que muestra en una cuadrícula y el orden en lo que el usuario lo ve son importantes. Entonces, decidir qué valores muestran y en qué orden juega un papel crucial al final. Afecta el tiempo y la cantidad de esfuerzo que requerirá para que el usuario complete su tarea. La selección de puntos de datos debe basarse en las personas y escenarios de los usuarios, las versiones anteriores de la aplicación y una buena parte de la lógica. Así que no te apresures a diseñarlo, y solo pasa un tiempo pensando en ello

"Pensar es el trabajo más duro que existe, y esa es probablemente la razón por la que tan pocos se dedican a ello" - Henry Ford

No tiene sentido agregar una columna de agujas a la tabla, incluso si parece vacía, solo distraerá la atención del usuario de los valores importantes. Pero casi nunca es un caso, en la mayoría de los casos, usted tiene una solicitud de parte interesada para colocar 23 columnas en su monitor más antiguo y más pequeño. Pero piense en ello, ya que demasiado de algo bueno es malo. Más columnas agrega más difícil para que los usuarios lo escaneen. Es mejor ser estricto en su selección y eliminar todo lo innecesario. Mantenga esa información secundaria oculta a menos que el usuario esté interesado en el elemento de la lista.

3. Centrarse en lo más importante

Intente colocar las columnas clave de izquierda a derecha (esto puede ser de la manera opuesta, según la región para la que diseña), esto se basa en la forma en que leemos la información. Las columnas de la izquierda recibirán la mayor cantidad de atención y solo si nos interesa algo, verificaremos otras columnas.

El diseño F se basa en varios estudios de seguimiento ocular para su concepto fundamental. Estos estudios científicos muestran que los internautas leen la pantalla en un patrón "F", que ven la parte superior, la esquina superior izquierda y los lados izquierdos de la pantalla más ... solo ocasionalmente mirando hacia el lado derecho de la pantalla. Estos estudios de seguimiento visual argumentan a favor de colocar los elementos más importantes de su sitio (marca, navegación, llamado a la acción) en el lado izquierdo del diseño. Puede encontrar más información sobre los patrones F en este arte por Brandon Jones http: / /webdesign.tutsplus.com

4. Alineación de texto

La alineación juega un papel importante en la legibilidad de la tabla, la facilidad con la que puede hacer cálculos en su mente y la comparación entre diferentes filas.

Hay 3 reglas simples.

  • Columnas numéricas alineadas a la derecha
  • Columnas de texto alineadas a la izquierda
  • Nombres de columna alineados como contenido de columna

Seguir estas pautas ayudará a que su texto en la cuadrícula se vea atractivo y fácil de leer. Lo que su texto dice a los usuarios es importante.

5. El tamaño importa

La forma de la tabla debe basarse en las necesidades y habilidades de los usuarios. Más visualización de la tabla de información, más compleja es su obtención, las fuentes y la altura de la fila se hacen más pequeñas para adaptarse a más filas por encima del pliegue de la pantalla. Por otro lado, si sabe que el número de filas no será tan grande, como por ejemplo la lista de artículos en su carrito de compras, no debe hacerlo muy pequeño.

Muy a menudo, el tamaño más pequeño es el camino a seguir. Cuando tiene grandes listas de elementos, la cantidad de elementos que puede mostrar sin ningún desplazamiento o interacción es muy importante. La disminución de la altura de la fila a veces aumenta el número de elementos que muestra sobre el doblez dos veces y eso es un gran problema. Por lo general, desea que la altura de la fila sea más delgada hasta el punto en que aún se vea limpia, y la información no se mezcle en un gran desorden.

Pero, no me malinterpretes, no te animo a meter todo lo que puedas en tu pantalla de bienes raíces. Intenta duplicar tu espacio en blanco. Incluso si la tabla de datos tiene una tonelada de información, si tiene un relleno decente, su diseño no se verá pesado.

6. tipografía

En el diseño, la tipografía es una de las cosas clave que hacen que su trabajo sea excelente u ordinario, o incluso terrible. El diseño de tablas no es una diferencia. El arte de trabajar con fuentes no es parte de la historia y no soy la mejor persona para hablar sobre esto) Aquí hay varios consejos que incluso puedo dar

  • No uses mayúsculas porque es difícil de leer
  • Evite usar fuentes Serif ya que crean ruido visual adicional
  • Evite usar negrita y cursiva
  • Use solo buenas fuentes

7. Eliminar todo lo innecesario

Probablemente haya escuchado el término diseño "limpio" a menudo antes de leer este artículo. Lo que trato de decir: menos es más. La interfaz de usuario debe ser lo más invisible posible. Especialmente cuando se trata de grandes cantidades de datos, ya está ejerciendo mucha presión sobre los humanos que trabajarán con su producto, por lo que no es necesario agregar distracciones visuales. Su objetivo es hacer que el contenido brille, no la envoltura a su alrededor.

  • Eliminar separadores innecesarios
  • Eliminar fondo despojado de fila
  • Eliminar sombras, efectos 3d, brillo, etc.

8. Evita la duplicación

Veo duplicaciones innecesarias muy a menudo en el diseño de la interfaz de usuario. Tiene un gran impacto en la legibilidad, ya que anuncia elementos adicionales que no agregan ningún valor.

9. Patrones de diseño e interacciones comunes.

Los diseñadores de UX pueden aprovechar fácilmente las tendencias de búsqueda de patrones de los usuarios. La clave reside en los patrones de diseño, que son soluciones reutilizables para los problemas de usabilidad. También ahorran tiempo. Los patrones son las primeras soluciones a las que recurren las personas cuando no tienen tiempo para inventar algo nuevo. Y como muchas soluciones de "simplemente funciona", los patrones tienden a quedarse.

Gracias por leer hasta el final. Espero que hayas multado este pequeño artículo útil. No seas tan duro conmigo ya que es mi primer intento en medio)