Pantalla Lean

¿Qué hace Pantalla Lean?

La primera pantalla es el trabajo, dibujado una vez, al ancho del trabajo. Una segunda frase, un segundo número o un segundo panel tiene que ganarse su lugar cambiando lo que la persona hace a continuación.

Esta skill es dueña de la plantilla de pantalla que los agentes de codificación emiten por defecto: héroes de métricas, subtítulos explicativos, tarjetas iguales, columnas centrales comprimidas y listas vestidas como dashboards. No es dueña de la lógica de tarea, los formularios ni la accesibilidad. Esos permanecen en ux-best-practices. No elige una identidad visual. Si existe un sistema de diseño, úsalo. No rediseñes el producto para aplicar esta skill.

Ejecuta la lista de verificación en references/tells.md antes de llamar a una pantalla terminada. Una coincidencia significa cortar la decoración o mover el hecho. Eliminar una función que la persona aún necesita y no dejar ningún camino hacia ella es una pantalla fallida.

Antes de dibujar

Nombra el trabajo de esta pantalla a partir del producto que tienes delante. No tomes prestado el trabajo, los sustantivos ni el verbo de un proyecto anterior.

Haz coincidir la pantalla con ese trabajo:

• Una acción en una superficie existente → un botón. No construyas una página.
• Una lista en la que la persona actúa → esa lista.
• Un registro que leen o editan → ese registro.
• Un valor que vinieron a comprobar → ese valor.

El control principal usa el verbo del trabajo. "Nuevo", "Editar" y "Eliminar" son primarios solo cuando son el trabajo. "Abrir" no es un verbo de trabajo. Las acciones de utilidad permanecen discretas y fuera del primer grupo de lectura.

Dónde vive el resto

Bajo demanda significa un lugar con un nombre que la persona pueda predecir. Un resumen, un historial, un conjunto de totales o una herramienta poco frecuente obtiene un panel, una segunda vista o una línea discreta. Construye ese lugar. No elimines el hecho porque no se le permitió ser una tarjeta héroe.

Nombra el lugar por lo que contiene. "Datos", "Más" e "Información" no son nombres. Si la pantalla anterior tenía una función y esta no tiene forma de alcanzarla, la pantalla no está terminada.

Una pestaña o una segunda vista es un trabajo diferente, no una segunda copia de las mismas tarjetas. No pongas un control en la primera pantalla cuyo único propósito sea ocultar el dashboard. Si el panel necesita un botón de ocultar, no era la primera pantalla.

El producto tiene un caparazón

Cuando el producto tiene más de un área, las áreas viven en una navegación lateral persistente. Agrúpalas. Marca la actual. Pon un conteo en un elemento cuando el conteo sea un trabajo pendiente sobre el que la persona actúa. La página es un área. No lleva el resto del producto y no elimina el resto porque no encajan.

Unos pocos modos de la misma área son pestañas debajo del título, nombradas por el modo. Unas pocas vistas estables de la misma lista (con conteos) se sientan con la lista. No son cuatro menús desplegables ni una segunda barra lateral.

La búsqueda global pertenece al caparazón. La búsqueda de esta lista pertenece a la lista. La acción principal del área se sitúa donde comienza el trabajo. Las utilidades permanecen en el caparazón, discretas.

Un catálogo largo muestra una ventana y una forma honesta de ver el resto. No vuelca cada fila y no esconde el resto detrás de un control sin nombre.

La personalidad es la composición

Usa el tipo, el acento y la densidad que el producto ya tiene. Si no tiene ninguno, usa una cara de texto neutral y un acento. El acento marca el elemento de navegación activo y la acción principal. Casi todo lo demás es neutral.

Lo que se lee como terminado es la alineación, una fila clara, texto secundario atenuado y el lugar actual obvio. Una cara decorativa, un degradado o una nueva paleta no arreglan una página cuya estructura es incorrecta. No rediseñes el producto para que parezca diseñado.

Qué contiene la primera pantalla

Solo lo que este trabajo necesita ahora. El orden, el estado y los verbos siguen el trabajo. No son un diseño fijo.

• Cuando la persona debe actuar sobre elementos, muestra los elementos y la acción. Pon el trabajo incompleto primero solo cuando el trabajo sea terminar el trabajo. Un directorio permanece en el orden que pidieron.
• Cuando la persona debe leer o comparar, muestra esa lectura. Varias medidas comparables pueden sentarse en una fila compacta cuando compararlas es el trabajo. Cada una lleva una comparación real (período anterior, objetivo o un vacío honesto). Una minigráfica o un gráfico es el cuerpo solo si la serie existe. Un pie de foto no repite el número. Una insignia en la tarjeta no reemplaza la comparación. Una medida que es todo el trabajo aparece una vez, no como par de tres decoraciones.
• Cuando el trabajo es una sola acción, la pantalla es esa acción.
• Una palabra de estado aparece solo cuando cambia lo que la persona hace a continuación. Una palabra, y tiene que ser verdadera. El estilo de éxito en un trabajo parcial es una mentira. Parcial sigue siendo parcial.

Un conteo se permite una vez, pequeño, junto a la cosa que cuenta, cuando cambia la siguiente acción. Un número más grande que el trabajo es vanidad cuando el número no es el trabajo. Dos números grandes que significan cosas diferentes y parecen un par son una rima falsa. Mantén el único hecho que decide el siguiente clic.

Qué sale de la primera pantalla

Totales adicionales, gráficos, historial, campos vacíos, filtros raros, explicaciones y un formulario que edita cada campo. Se mueven al lugar nombrado anteriormente. No desaparecen y no se vuelcan todos en el objeto como un impuesto por cada acción de fila.

Mantén un total, gráfico o historial adicional en la primera pantalla cuando ese sea el trabajo. No degrades el trabajo a una divulgación para que la página se vea minimalista.

Un gestor no es una hoja de cálculo

Cuando el trabajo es gestionar una colección, la fila es el objeto más la acción. El nombre es el texto más pesado. El verbo del trabajo está en la fila. Los campos que la persona compara se quedan. Los campos que están vacíos para la mayoría de las filas y los campos que rara vez se comparan no son columnas.

El fallo de la hoja de cálculo es cada propiedad como columna, un guion donde faltan datos, un icono de copia en cada valor, una categoría pegada debajo del nombre y un solo botón que solo abre el registro. Usar el ancho completo para agregar esas columnas es el mismo error que el dashboard estrecho. El ancho pertenece a la identidad y la acción.

Una fila se lee como un solo objeto. El nombre es el más fuerte. Un estado o una cantidad se sientan discretos al final. Una segunda línea es una vista previa que la persona escanea, atenuada, no una pila de etiquetas. La forma de acceder al registro es la fila misma o una señal final, y no reemplaza el verbo del trabajo.

Eliminar un elemento es una acción de lista cuando la persona está gestionando la lista. Mantenlo en la fila, nombrado y discreto, en un menú en esa fila si debe permanecer fuera de lo principal. No fuerces una pantalla de detalle solo para eliminar. Confirma con el nombre del objeto y di si el registro desaparece o lo que apunta. Eliminar permanece fuera de la fila solo cuando es raro y más peligroso que gestionar la lista. Entonces el detalle lo contiene y el verbo del trabajo aún está en la fila.

Composición

• Un peso. Entrecerrar los ojos. Un grupo es más pesado, y ese grupo es el trabajo. Tarjetas iguales, insignias iguales y botones de encabezado iguales significan que no hay enfoque. Arregla el peso antes de agregar algo.
• Ancho completo del área de trabajo. Una herramienta, una tabla, una cola o una consola usan la región de contenido junto al caparazón. No la envuelvas en max-w-4xl, max-w-6xl, max-w-7xl o una columna estrecha centrada que deje amplios márgenes vacíos mientras los datos están apretados. Limita la longitud de línea solo para prosa que esperes que alguien lea (aproximadamente 65–75 caracteres).
• Sin muebles de página que repitan la página. Un título, el nombre del lugar o del objeto. Sin ceja en mayúsculas pequeñas sobre él. Sin subtítulo que defina el título ("Biblioteca — donde vive tu biblioteca"). Sin insignia junto al título que repita el producto. Se permite una segunda línea solo para un hecho que el título aún no dice, y solo si ese hecho cambia la acción.
• Sin línea de instrucción. "Haz clic en un chip para filtrar al instante" significa que el control no parece un control. Arregla el control y elimina la frase. No presumas de que una interacción es instantánea.
• Agrupación por posición, no por cajas. Proximidad y un encabezado. Una tarjeta es para un objeto repetido que la persona escanea como unidad, o para un límite real (un modal, un mosaico arrastrable). Una estadística, una tira de filtros y una tabla no obtienen cada una su propia tarjeta. Nunca una tarjeta dentro de una tarjeta. Una lista de siete no se convierte en siete tarjetas grandes.
• Una columna que está mayormente vacía no es una columna. Colapsa. Un guion no son datos. Un valor obligatorio faltante no debe parecer un espacio en blanco opcional. Muestra el vacío cuando cambia la acción. Omídelo cuando no.
• No codifiques triple. Una fracción, un porcentaje y una barra para dos elementos son un hecho tres veces. Prefiere los elementos, nombrados, marcables, cuando la persona debe completarlos. Una barra que no se puede distinguir de un vistazo (50% versus 67% de tres) no pertenece.
• No decores la fila. Mosaicos de monograma cuando el nombre ya está ahí, una categoría repetida debajo de cada nombre, un icono de copia permanente, una píldora más una barra más un porcentaje. Copiar y otros actos raros aparecen al enfocar. La fila es tan alta como sus datos.
• Los actos destructivos son discretos, nombrados y alcanzables. Un icono de papelera sin etiqueta pegado al único botón es un clic erróneo. También lo es un eliminar que existe solo después de "Abrir". Sigue la regla del gestor anterior.
• Los filtros se ganan su lugar. La búsqueda y los filtros aparecen cuando la lista es lo suficientemente larga como para que escanear falle. Un ordenamiento disfrazado de filtro ("Nombre A–Z" junto a "Estado (Todos)") es un ordenamiento. Un chip de filtro con cero coincidencias no es un par de los reales.
• Sin objetos de relleno. No inventes una fila, un cubo o un registro de muestra para que el diseño se vea poblado. No muestres un valor truncado o incierto como si estuviera confirmado.

Cuando aparece la plantilla de administrador

El reflejo es una pila de encabezado, una fila de tarjetas métricas, chips, una barra de filtros, una tabla rayada y Editar más Eliminar. Úsala solo cuando ese sea realmente el trabajo. De lo contrario:

1. Un título. El nombre del lugar o del objeto.
2. El trabajo en sí, al ancho del contenido. Una lista, un registro, un valor o una sola acción. No una cola sustituta.
3. El cromo que repite el trabajo sale de la primera pantalla.
4. Los totales y el historial se mueven a un lugar nombrado a menos que sean el trabajo. No se eliminan.

No hagas

• No agregues un dashboard a una tarea que es un botón.
• No conviertas una lectura, un registro o una sola acción en una cola de objetos incompletos.
• No enseñes la pantalla con un subtítulo.
• No uses el ajuste preestablecido de tipo ceja + título + frase de apoyo en secciones, tarjetas o la página.
• No lideres con métricas que no sean el trabajo.
• No centres una herramienta apretada en un mar de margen vacío.
• No hagas que cada región sea una tarjeta.
• No uses color de éxito para trabajo incompleto.
• No le des varios nombres a una idea a menos que la diferencia cambie la acción. Elige una palabra.
• No envíes una pantalla donde una persona no pueda señalar el siguiente clic, o la cosa que vino a leer, en un segundo.
• No respondas a una pantalla abarrotada eliminando sus funciones. Mueve lo secundario. Mantén lo que el trabajo necesita en la superficie.
• No conviertas un gestor en una cuadrícula de base de datos cuya única acción sea "Abrir".
• No pongas cada área del producto en una página y no elimines esas áreas porque la página es delgada. Dales la barra lateral.
• No inventes un tipo de letra o una paleta para fabricar personalidad. Arregla el caparazón, la fila y el acento.