Sistema de diseño de tablas
Se me ocurrió la idea de escribir esta guía de interfaz de usuario (que ya fue escrita mil veces antes, pero no con la brillantez con la que la voy a escribir…) mientras realizaba algunas tareas de mantenimiento de nuestro producto (sí, en nuestra startup, la persona más veterana hace la limpieza…).
Revisé más de 30 herramientas y SDKs diferentes de SeaS que estamos utilizando y jugué con sus tableros para revisar algunos números, recoger algunas ideas, y hacer pequeñas modificaciones. No pude evitar darme cuenta de lo mal implementados que estaban esos cuadros, en términos de diseño de interfaz de usuario y funcionalidad básica (y estoy hablando de buenos productos Saas).
Dado que he estado desarrollando (y usando) tablas durante 20 años (sí, sé que soy viejo, un día tú también te harás viejo…) – he decidido que es hora de resumir las reglas más básicas de UI/UX que son simplemente imprescindibles para todo producto que trate con tablas y cuadrículas.
Sí, ya sé que la ordenación y los filtros son molestos, yo también los odio, pero por eso tienen que ser lo primero (a menos que, por supuesto, planees tener una tabla elegante con menos de 10 registros o algo así…).
Tabla de Figma
En sentido estricto, los datos no se visualizan en tablas. Sin embargo, las tablas se encuentran a menudo cerca de las visualizaciones de datos, se utilizan en lugar de éstas o son creadas por las mismas personas. Aquí exploraremos cuándo utilizar una tabla en lugar de un gráfico y cómo mejorar los diseños de las tablas. Lo haremos para las tablas en un contexto de narración de historias. Desplázate hasta el final del artículo si te interesa diseñar tablas para la pura exploración.
Utiliza tablas si quieres que los lectores puedan buscar información específica. Los lectores podrán encontrar los datos que se aplican a ellos -su ubicación, edad, rango de ingresos, etc. – a menudo más rápido en una tabla que en un texto o un gráfico. De hecho, la mayoría de la gente no leerá una tabla entera (sobre todo si está compuesta por más de 3 filas) y sólo mirará los datos que le interesan. Estos datos pueden no ser sólo números, sino datos de texto estructurados como nombres, equipos, estados. Si estos datos están actualmente integrados en un bloque de texto, considere la posibilidad de utilizar tablas en el futuro.
Utilice gráficos en lugar de tablas si quiere dar una visión general de sus datos numéricos o mostrar un patrón. Las tablas se leen de forma secuencial: primero la primera fila, luego la segunda, etc. Si la tabla es larga, los lectores podrían abandonar antes de llegar a los valores más importantes. Los gráficos, sin embargo, muestran una imagen global. Es difícil no notar los valores atípicos, el valor más grande o el más pequeño. Son más fáciles de detectar en un gráfico y es más probable que se recuerden.
Cómo diseñar un mueble de mesa
La construcción de una tabla de componentes es una tarea que tarde o temprano se le presenta a todo desarrollador de sistemas de diseño en Figma. Existen tres enfoques de diseño de tablas para crear una rejilla de datos con una arquitectura flexible. En cada caso, se utiliza un componente de fila, un componente de columna o un componente de celda. Cada uno de los casos se discutirá en detalle a continuación.
¿Por qué poner todo en una sola caja? ¿Un proyecto de tamaño medio necesita realmente esta flexibilidad? ¿Necesito una arquitectura de componentes para una tabla normal? Dentro de un proyecto de equipo grande, es la única forma verdadera de crear nuevas tablas de datos: a través de un componente. Esto ayuda a generar más opciones y a validar nuevas ideas más rápidamente.
Mis observaciones muestran que no todos los diseñadores de Figma se entrenan para trabajar con componentes desde las primeras etapas de un nuevo proyecto. Según una encuesta reciente en el chat de Figma, poco menos de la mitad de los diseñadores utilizan componentes. La mayor parte se limita a utilizar marcos y a copiar y pegar. Pero aquellos que lograron cambiar su flujo de trabajo a uno de componentes probablemente nunca darán un paso atrás, porque este enfoque da más flexibilidad y está en demanda entre las organizaciones con su propio personal de diseño. Si desea mantener el interés en su vacante, si usted está pensando en unirse a una organización fresca donde ya están trabajando en el Figma – trabajar con componentes.
Plantilla de tabla Figma
Al enviar este formulario, reconoce y acepta que sus datos personales pueden ser transferidos, almacenados y procesados en servidores situados fuera de la República Popular China y que sus datos personales serán procesados por Salesforce de acuerdo con la Declaración de privacidad.
Estoy de acuerdo con la Declaración de Privacidad y con el tratamiento de mis datos personales. En particular, doy mi consentimiento para la transferencia de mi información personal a otros países, incluidos los Estados Unidos, con el fin de alojar y procesar la información según lo establecido en la Declaración de privacidad. Entiendo que estos países pueden no tener las mismas leyes de protección de datos que el país desde el que proporciono mi información personal. Para obtener más información, haga clic aquí.