metodología · estándar de diseño de producto · v1

La pantalla sabe en qué paso vas.

La unidad de diseño no es la pantalla: es el flujo — la secuencia de decisiones que una persona toma para terminar su trabajo. UX inteligente diseña esa secuencia y elimina todo lo que hay entre una decisión y la siguiente. Minimizar clicks no es la meta; es la consecuencia. Y piensa siempre en poka-yoke: primero evita el error; si aun ocurre, volver es barato, visible y seguro.

00 la tesis

Inteligente, no shortcut-first.

Un shortcut es un atajo que hay que memorizar: la carga se la queda la persona. UX inteligente invierte la carga: la interfaz se anticipa — el foco ya está donde toca, el verbo correcto ya está servido, la memoria aparece sola — y el teclado queda como el camino natural, siempre visible, nunca un secreto.

la regla madre
Cada momento del flujo tiene un siguiente paso obvio. El trabajo del diseño es que ese paso ya esté servido: enfocado, nombrado y a una tecla de distancia.
Si la persona tiene que buscar dónde hacer click, decidir entre verbos equivalentes o salir de la pantalla a buscar un dato, el flujo está roto — no importa qué tan bonita sea la pantalla.
el lente transversal · poka-yoke
Haz difícil equivocarse y barato recuperarse. Primero elimina estados imposibles y muestra alcance y consecuencia; después conserva lo escrito, ofrece deshacer en el lugar del hecho y deja una salida segura.
Confirmar no es la estrategia por defecto. Solo se confirma lo que ni deshacer ni compensar pueden devolver. Lo irreversible se anula con motivo, historial y rastro; nunca se borra en silencio.
referencia · apple
Dynamic Island
Una sola superficie que cambia de forma según el momento. El estado no se anuncia en otro lado: vive en un lugar que se transforma. Abajo a la derecha tienes la nuestra — llévala contigo mientras lees.
referencia · apple
Liquid Glass
Los controles se transforman en vez de aparecer y desaparecer. Continuidad de material: lo nuevo nace de lo que ya estaba, y el ojo nunca pierde el hilo.
referencia · propia
mogos · búsquedas
Los patrones ya construidos y en producción: crear sin salir, resolver en el lugar, la memoria junto a la decisión, las teclas visibles. Esta metodología les pone nombre y los vuelve estándar.
01 principio · ley de Fitts

El foco es el cursor del flujo.

Al completar un paso, el foco viaja solo al siguiente. La distancia al próximo objetivo se vuelve cero: no hay mouse que mover ni click que dar, porque la interfaz ya está esperando ahí. Escribir se convierte en avanzar.

demo · el anillo que viaja
↵ completa, el anillo viaja. Nadie tocó el mouse: el siguiente campo ya estaba enfocado antes de que la persona lo pensara.
ley · Fitts: el tiempo para alcanzar un objetivo crece con la distancia — aquí la distancia es ceropatrón real · inline-entity-picker mueve el foco al siguiente focusable al confirmar
02 principio · ley de Hick

Un verbo por estado, nunca un menú.

Cada momento del flujo tiene una acción primaria — y solo una. El botón no es un botón: es una superficie que muta de verbo a medida que el estado avanza, como la isla de Apple. Elegir entre ocho opciones es trabajo; leer un verbo servido no.

demo · el botón que muta — tócalo
La búsqueda es nueva: el único movimiento posible es tomarla.
El mismo lugar, el verbo correcto. El estado decide qué se puede hacer; la persona nunca elige entre verbos equivalentes ni busca la acción en un menú.
ley · Hick: el tiempo de decisión crece con las opciones — una opción, decisión instantáneapatrón real · action-search-surface: «una acción por escalón», sin segundo verbo
03 principio · continuidad de forma

La UI se transforma, no interrumpe.

Los paneles no caen del cielo tapando la pantalla: nacen del control que los pidió. La búsqueda se expande en un vidrio que deja ver el contexto detrás, y al elegir, colapsa de vuelta en lo elegido. El ojo nunca pierde el hilo porque nada aparece — todo proviene.

demo · el vidrio que nace del buscador
El contexto sigue ahí, detrás del vidrio. El panel complementa la búsqueda en lugar de robarse la pantalla — y al confirmar, se pliega en un chip dentro del propio campo.
referencia · Liquid Glass: el material se transforma, el origen es visibleregla · un modal solo se justifica si complementa lo que la persona está haciendo
04 principio · cero callejones

El vacío es un alta: crear sin salir.

«Sin resultados» no es un final: es una invitación. Si lo que buscas no existe, el mismo panel se convierte en el formulario mínimo para crearlo — y el flujo sigue sin que nadie haya salido a otra pantalla. En un flujo inteligente no existen los callejones sin salida.

demo · la búsqueda vacía se vuelve el alta
El commit es optimista. El flujo sigue en el instante en que confirmas; el guardado real llega por detrás y el chip apenas parpadea de ámbar a verde. Nunca se espera un servidor para avanzar.
patrón real · inline-entity-picker: «the wizard must never wait on a POST»regla · si falla el guardado, degrada a texto libre — jamás pierde lo escrito
05 principio · el dato junto a la decisión

La memoria aparece donde se decide.

El dato histórico no vive en una pantalla de analytics que alguien tiene que acordarse de abrir: se despliega debajo del campo en el momento exacto de decidir. Y tiene una virtud rara: calla cuando no tiene nada que decir — una fila sin historia se queda quieta.

demo · la fila recuerda — toca el precio
Un chip que dice $12.40 debe dejar $12.40. El chip no es decoración: tomarlo escribe ese precio exacto en la celda. La memoria que miente una sola vez no se vuelve a mirar.
patrón real · quote-line-memory: sparkline + mejores deals bajo la fila, «renders nothing when it has nothing to say»
06 principio · el camino visible

El teclado se ve, no se memoriza.

La gramática es una y es corta: ↵ avanza · ⌘↵ confirma todo · esc regresa. Y siempre está escrita en la pantalla, en una barra que cambia con el foco — como los subtítulos del flujo. Quien no la usa no pierde nada; quien la usa, vuela. Eso la separa de una app shortcut-first: aquí no hay nada que aprender de memoria.

demo · la barra que subtitula el foco
La barra es honesta: solo muestra lo que se puede hacer ahora. En el último campo, ↵ siguiente se transforma en ⌘↵ confirmar todo — la barra sabe en qué paso vas.
patrón real · KeyboardHintBar en cada picker y wizard de mogosley · reconocimiento sobre memoria (Nielsen #6)
07 principio · optimismo y una sola verdad

La UI no espera al servidor.

Confirmar es instantáneo: la fila aparece en el momento del gesto, con un punto ámbar que confiesa «aún viajando». Cuando el servidor llega, el punto se vuelve verde y el folio real se completa en silencio. Y la contracara: una acción es el mismo verbo en todas las superficies — un solo hook, una sola verdad, para que el sistema nunca cuente dos historias del mismo evento.

demo · el commit optimista — confírmalo tú
UI · 0 msservidor · …
El gesto y el resultado son simultáneos. La persona nunca ve un spinner entre su decisión y la respuesta de la interfaz; la red trabaja por detrás, y solo asoma si algo sale mal.
patrón real · commit optimista del inline-entity-picker — «upgrade to a real id»regla · misma acción = mismo hook en tablero, feed y teclado
08 principio · reconocimiento sobre memoria

El contexto se ve, no se memoriza.

Un flujo que esconde lo ya decidido examina la memoria de la persona a cada paso — y la gente tiene la cabeza en su trabajo, no en tu formulario. Lo decidido permanece visible donde se decidió, comprimido en chips que acompañan el paso activo. Y no son adorno: tocar un chip reabre esa decisión con todo lo demás intacto. «¿Qué puse primero?» no es una pregunta que la interfaz tenga derecho a provocar.

demo · el rastro que acompaña
El resumen no es el último paso: es permanente. Cada decisión se vuelve un chip a la vista; dudar cuesta una mirada, corregir cuesta un toque.
ley · Nielsen #1 y #6: visibilidad del estado + reconocimiento sobre memoriaen móvil ya lo viste: los pasos cerrados pagan 44pt, pero se quedan
09 principio · poka-yoke · es de humanos equivocarse

Poka-yoke: prevenir; si ocurre, deshacer.

La primera defensa no es advertir: es hacer difícil la acción equivocada. Estados imposibles no se ofrecen; el objeto, el alcance y la consecuencia se ven antes del gesto; un error de formato, red o servidor jamás borra lo escrito. Si aun así ocurre, UX inteligente hace barata la recuperación: la acción reversible se ejecuta y el perdón queda a la vista — cinco segundos de deshacer en el lugar del hecho. El diálogo de «¿estás seguro?» queda solo para lo que ni deshacer ni compensar pueden devolver. Y lo verdaderamente irreversible no se borra: se anula con motivo y deja rastro, como un recibo con marca de agua.

demo · el perdón visible — anúlalo tú
Anulado5
Poka-yoke completo: prevenir, conservar, deshacer, recuperar. Si el tiempo corre, el recibo queda anulado con su motivo y su rastro — anulado se lee, borrado se sospecha.
regla · prevenir primero; confirmar solo lo que ni deshacer ni compensar pueden devolverpatrón real · los recibos de cobros: se anulan con motivo, conservan folio y marca de agua
10 los nueve principios juntos

Registrar una cotización, jugable.

Este flujo es real: haz click en el primer campo y no vuelvas a tocar el mouse. Escribe, ↵ para elegir, esc para volver, ⌘↵ para confirmar. Lo que ya decidiste queda a la vista en chips — si se te olvidó qué pusiste primero, míralo; si quieres corregirlo, tócalo (o esc hasta llegar). Y al registrar tienes cinco segundos de deshacer. La isla de abajo se convierte en tu barra de teclas, y los contadores llevan la cuenta — la meta es terminar con uno o dos clicks.

flujo · nueva cotización
clicks · 0teclas · 0
¿Para quién es?
Escribe y elige con ↵ — o con las flechas si hay varios.
¿Qué producto?
Si no existe en el catálogo, ↵ lo crea sin salir de aquí.
¿A qué precio?
La fila recuerda lo que has pagado antes — tómalo o escribe el tuyo.
Todo listo.
Revisa y confirma — todo junto, con una sola tecla.
Cliente—
Producto—
Precio—
✓
Cotización registrada.
#COT-0442 · guardando…
Registrada5
0
clicks
0
teclas
0
callejones
11 la prueba de fuego · admin · ventas · inventario

Los casos difíciles.

La objeción de siempre: «muy bonito el wizard, pero mi sistema tiene mil filas, lotes, filtros y un dashboard». Justo ahí es donde la metodología paga más — porque la densidad no rompe el flujo: lo multiplica. Estos cuatro demos son las pantallas que asustan, con los nueve principios aplicados fila por fila.

la ley de la densidad
Una tabla son cien flujos apilados. Un lote es un solo verbo sobre muchos objetos. Un tablero es una cola de decisiones, no un mural de números. Los nueve principios no se negocian por densidad — se aplican por fila.
Si una pantalla densa se siente lenta no es porque tenga muchos datos: es porque cada fila perdió su verbo, su memoria o su foco. Se arregla la fila y la pantalla entera se arregla sola.
c·01 inventario · la tabla administrable

La tabla es un flujo, fila por fila.

El foco viaja por filas como viajaba por campos: ↓↑ para moverse, ↵ para editar en el lugar — nada de abrir una pantalla de detalle para cambiar un número. El commit es optimista (el punto ámbar vive en la celda), y la memoria aparece bajo la fila que la necesita: la última entrada, de quién, hace cuánto. Editar cien filas se siente como escribir un texto, no como llenar cien formularios.

demo · editar sin salir de la tabla
Cero pantallas de detalle para un número. El foco es el cursor, la celda es el formulario, y la memoria llega sola a la fila que está decidiendo.
principios aplicados · 01 foco · 05 memoria · 07 optimismola fila nunca pierde su verbo
c·02 inventario · operaciones en lote

El lote es un verbo, no una pantalla.

Seleccionas con espacio y la isla sube con el verbo ya contado: «Recibir 3 en almacén». Un solo botón para muchos objetos — Hick no cambia porque haya lote. Y como la acción toca varias filas de golpe, el deshacer no es opcional: la barra misma se convierte en los cinco segundos de perdón.

demo · seleccionar, un verbo, deshacer
La barra es la isla del lote: aparece con la primera selección, cuenta sola, ejecuta con un verbo y se queda cinco segundos ofreciendo el deshacer.
principios aplicados · 02 un verbo · 07 optimismo · 09 deshacer
c·03 admin · buscar en lo denso

El filtro se escribe, se ve y se guarda.

Doce dropdowns no son filtros: son un examen. En un flujo inteligente el filtro se escribe en la misma barra de búsqueda («stock<10», «wuxi») y se convierte en un chip visible — el contexto se ve, no se memoriza, también aquí: nunca te preguntas por qué la tabla muestra lo que muestra. Y la combinación que usas cada lunes se guarda como una vista con nombre: el flujo recurrente se vuelve un solo click.

demo · de 248 filas a las 2 que importan
El estado del filtro es visible y desmontable — cada chip se quita con un toque. La vista guardada convierte el ritual del lunes en un click.
principios aplicados · 03 se transforma · 08 contexto visiblecontador honesto: 248 → 9 → 2, siempre a la vista
c·04 ventas · el tablero que decide

El tablero es una cola, no un mural.

Un dashboard de KPIs le dice al vendedor cómo le fue; una cola de decisiones le dice qué hacer ahora. Cada fila llega con su único verbo ya servido — «Enviar», «Recordar» en ámbar tras 8 días de silencio, «Tomarla» — y se resuelve en el lugar, sin navegar a otra pantalla. La fila resuelta se va, la cola baja, y el número que importa es uno: cuántas decisiones te esperan.

demo · la cola baja sola
Una acción por escalón, a escala de tablero. El mismo verbo del board de mogos: se resuelve aquí, con el mismo hook, y la cola cuenta la verdad.
principios aplicados · 02 un verbo · 07 una sola verdad · patrón real · action-center de mogos
12 los nueve principios corriendo juntos

A tamaño real.

Los micro-demos enseñan un principio a la vez; una pantalla de verdad los corre todos al mismo tiempo. Dos páginas completas — un carrito de compras y el registro de una venta con productos — donde puedes ver el foco viajando, el verbo cargando el total, la memoria sugiriendo, el vacío creando, y el deshacer perdonando, en la misma escena.

g·01 comprador · el carrito de compras

El carrito que ya sabe.

El total no vive en una esquina: vive dentro del verbo y muta con cada cambio — el contexto se ve. Quitar un producto no pregunta: quita y perdona 5 segundos. La memoria sugiere lo que sueles llevar, con su precio real. Y pagar no es otra página: el panel se transforma — dirección, pago, confirmar — sin que el carrito desaparezca de la vista.

demo · del carrito al pedido sin cambiar de página
Cuenta los principios en escena: el verbo con el total (02+08), quitar con perdón (09), la memoria que sugiere con precio real (05), el panel que se transforma en checkout (03), y el commit optimista del final (07).
una sola página, cero navegaciónquitar no pregunta: perdona
g·02 vendedor · asignar una venta con productos

La venta se escribe como una frase.

Cliente ya elegido (el chip lo recuerda por ti), y de ahí todo es teclado: escribes el producto, ↵, cantidad, precio — con la memoria de compras sirviendo el mejor precio en un chip — y ↵ hace nacer la línea siguiente con el foco adentro. El producto que no existe se crea en la misma lista sin salir. El total vive en el verbo, siempre al día. ⌘↵ registra optimista, con sus cinco segundos de vuelta atrás.

demo · dos líneas, una creada al vuelo, cero mouse
La línea nueva nace con el foco adentro — nadie busca el botón «+ agregar producto». Y «Casco naranja» no existía hace tres segundos: se creó dentro de la lista, con su punto ámbar confesando el viaje.
patrón real · quote-line-row + quote-line-memory + inline-entity-picker de mogos, en una sola escena
13 el capítulo móvil · escrito con la mesa

En el teléfono manda el pulgar.

El desktop asume que el ojo manda y el cursor obedece. El teléfono es otro régimen: alguien de pie, con una mano libre, una fila de gente al frente, señal de dos rayas y sol en la pantalla. Para escribir este capítulo sentamos una mesa de cuatro especialistas — ergonomía, motion y material, operación en campo y accesibilidad e inputs — y sus documentos completos quedan en el repo. Se diseña a 375pt (el piso real), se verifica a 430pt, y el teclado en pantalla se come 291 de los 844pt de alto: esa es la cancha.

la ley del ancho
El ancho no es escaso: está mal repartido. Tiene un solo dueño en cada momento — el paso activo — y lo toma completo. Lo vertical es infinito y gratis: ahí se compra el aire. Lo horizontal es finito y caro: ahí solo van el dinero, la identidad y los targets.
Identidad pegada al borde izquierdo, dinero alineado al derecho, un solo nivel de 16pt de padding. La prueba se mide en el mostrador: si la cajera resuelve el cobro más común sin desplegar nada, sin desplazar la lista y sin cambiar de mano, el ancho ya hizo su trabajo.
m·01 ergonomía

Un dueño por vez.

El ancho completo pertenece al paso activo; todo lo decidido se comprime a una fila de 44pt.

Es la ley de Hick aplicada al espacio: en 390pt cualquier repartición produce columnas que no se leen. Como el flujo ya sabe en qué paso vas, ese conocimiento se cobra en píxeles: el paso activo toma el 100% de borde a borde, los pasos cerrados pagan una línea de resumen con su valor en negrita — el mismo colapso "el panel muere en lo elegido" del desktop, pero vertical. Los pasos futuros ni se listan: se anuncian con un contador.

mesa · ergonomía HIGel alto total nunca cambia: la pantalla respira, no salta
demo · el paso activo toma el ancho
Lo decidido paga 44pt; lo activo toma todo. El alto total no cambia — la pantalla se reorganiza, nunca salta.
m·02 operación en campo

La fila que decide, no la tabla.

La unidad de densidad en móvil es la fila: quién, cuánto, desde cuándo y el verbo — sin abrir nada.

Una tabla de siete columnas no se encoge: se rompe. La fila operativa tiene cuatro anclas fijas: el quién arriba a la izquierda, el cuánto arriba a la derecha en cifras tabulares (el dato más pesado), el desde-cuándo abajo en palabras cortas, y el borde derecho como superficie de gesto. El fondo va edge-to-edge — las tarjetas con margen se comen 32pt que no compran nada — y el ojo baja por la columna de dinero como por una regla. Si una tabla necesita tres columnas para entenderse, no es una tabla: es una lista de detalle.

mesa · operación + ergonomíatruncar al final, nunca al medio; el número jamás se parte
demo · la tabla se vuelve fila
Dos anclas verticales: identidad al borde izquierdo, dinero al derecho. La segunda línea solo se lee cuando la primera no bastó.
m·03 ergonomía + motion

Abajo se decide, arriba se lee.

La franja inferior es territorio exclusivo del verbo — uno solo, a todo el ancho, que muta con el estado.

El arco cómodo del pulgar cubre el tercio inferior; la esquina superior exige reagarrar el teléfono — y una cajera con cola no reagarra nunca. Por eso el verbo primario vive en una barra de 56pt a ancho completo: Fitts con un target así es tiempo constante, no hay que apuntar, hay que bajar el pulgar. El texto muta como la isla — «Agregar producto» → «Cobrar $1.680» → «Cobrando…» → «Cobrado ✓» — y deshabilitado no se apaga: dice por qué («Falta el monto»). Lo destructivo se pone deliberadamente arriba, lejos, o detrás de un swipe con resorte. La superficie nunca cambia de posición: es el marco; si el marco viaja, viajó la app entera.

mesa · ergonomía + motiontargets ≥44pt; en secuencia rápida, 56pt
demo · el arco del pulgar y el verbo
Un solo target en pantalla. El monto se lee arriba y se repite dentro del verbo: lo importante nunca vive solo fuera del alcance.
m·04 ergonomía + operación + inputs

El teclado es el piso.

Con el teclado arriba quedan ~435pt: cabe una decisión, no un formulario — y el paso activo se sienta encima.

Tres cosas visibles y nada más: el contexto en una línea, el número enorme (un monto se escribe a 34–40pt, no a 17) y la barra de accesorio con el verbo pegada al teclado. El teclado de dinero es propio: dígitos, un solo punto decimal, sin autocorrector — y antes de teclear, los montos probables llegan como chips (saldo completo · mitad · $1.000): el 80% de los cobros no requiere escribir nada. Cuando el teclado es del sistema, se le declara la promesa: inputmode="decimal" y enterkeyhint="next" — ese es el ↵ móvil, pintado por el sistema en el idioma del usuario. Y el campo acepta el dato como venga: pegar «Bs. 1.234,56» no es un error de formato, es un dato que la app normaliza y muestra cómo entendió.

mesa · las cuatro sillasla tecla de retorno y el botón visible ejecutan el mismo handler, siempre
demo · el número es la interfaz
El chip que dice $1.680 deja $1.680. El caso común se resuelve con un toque; el teclado queda para la excepción.
m·05 motion + material

El vidrio sube desde abajo.

Una decisión se resuelve en un sheet que nace del control tocado y colapsa dentro de lo elegido; nunca en un modal a pantalla completa.

Dos detents y ni uno más: 0.45 anclado al contenido (si caben seis filas, el detent es seis filas) y 0.9 — nunca 1.0: ese 10% visible de la capa de abajo es la prueba de que no te fuiste a ningún lado. Entrar toma 480ms con origen real; salir toma 240 — porque la salida no tiene nada que explicar. La capa de abajo retrocede y se desatura; no se oscurece con un velo negro. Y al elegir, el sheet no "se cierra": la fila elegida se despega y viaja hasta la fila que la pidió, y el resto cae detrás de ella. Máximo tres cosas se mueven: el chip que viaja, la superficie que muta, el fondo que retrocede.

mesa · motionfull-screen solo cuando se cambia de trabajo — jamás para elegir, confirmar o editar
demo · el sheet colapsa en lo elegido
El origen es visible. El sheet deja ver el paso de arriba, y lo elegido viaja físicamente a su fila: el ojo nunca reconstruye nada.
m·06 operación + accesibilidad

La red mala es el estado normal.

La interfaz avanza en el instante del gesto; el servidor la alcanza después — y el pendiente se ve como progreso, nunca como sospecha.

Un spinner de veinte segundos con un cliente esperando produce lo peor que le puede pasar a un sistema de caja: la cajera cobra por fuera, en un cuaderno, y el dato nunca entra. Al confirmar, el cobro ya está hecho: recibo con folio reservado en el dispositivo, y un aro junto al folio — anillo hueco ámbar mientras viaja, disco lleno verde al confirmar: forma antes que color, porque bajo el sol del mostrador el ámbar y el verde son el mismo punto, y uno de cada doce hombres tampoco los distingue. Arriba, una barra fina — «1 cobro esperando señal» — informativa, jamás modal. El ámbar dice «emitiendo · se envía al volver la señal», nunca «error»; el verde no dice nada: es el silencio del sistema funcionando. Y el QR del recibo prueba el cobro desde el teléfono del cliente, sin app: la prueba en la mano.

mesa · operación + accesibilidadnunca se bloquea: buscar, cobrar en efectivo, firmar, emitir
demo · el aro que confiesa sin asustar
El folio sale del dispositivo, no del servidor. El cliente se va con REC-VE-0184 definitivo; la señal llega cuando llegue.
m·07 accesibilidad e inputs

Para todos, o no es inteligente.

El foco solo se mueve como consecuencia del gesto de la persona; todo gesto tiene un botón; y hasta 135% de texto, nada se trunca: se apila.

Quien más se beneficia de un flujo que sabe en qué paso vas es quien no ve la pantalla — si el foco viaja como consecuencia de su propio ↵, VoiceOver anuncia el paso nuevo y el sistema se siente rápido; si lo mueve un evento del servidor, la persona pierde el lugar sin forma de recuperarlo. Corolario de «un verbo por estado»: si el único verbo es un gesto, el estado no tiene verbo — el swipe de un lector de pantalla navega, no ejecuta. Con Dynamic Type al 135% la columna de 390pt tiene sitio para 28 caracteres: el par etiqueta/valor pasa de fila a columna, el botón crece sin cortar su verbo, y en el chip de memoria la prioridad es explícita: el número jamás se trunca; el proveedor sí. Reduced motion apaga el viaje, no la explicación: el panel sigue naciendo del control, por geometría en vez de por movimiento. La pantalla se aprueba en el tamaño más grande, no en el default.

mesa · accesibilidadsi el paso no cabe en 28 caracteres, pide dos decisiones: se parte
demo · muévele el texto — nada se rompe
texto · 100%
Cero alturas fijas. La fila se apila, el verbo crece completo, «Wuxi Cycle» se trunca — y $12.40 queda intacto.
la traducción, columna por columna
Principio desktopEn el teléfono
El foco viaja solo (Fitts a distancia cero)Scroll programático + el pulgar nunca sale de la franja inferior
Un verbo por estado que mutaBarra de 56pt a todo el ancho, pegada al teclado, que cambia de texto — nunca de lugar
El panel nace del controlSheet desde abajo con detent al contenido; al elegir, la fila viaja al chip y el sheet cae detrás
El vacío se vuelve altaLa fila «Crear "Tornillo M4"» aparece en el lugar exacto del resultado ausente
La memoria junto a la decisiónChips de montos probables sobre el teclado + una línea gris bajo el campo; ausente si no hay historia
Hint bar ↵ · ⌘↵ · escLa tecla de retorno del sistema (enterkeyhint) + la barra de accesorio; esc = swipe down con resorte
Commit optimistaObligatorio, no opcional: aro ámbar → disco verde, folio reservado en el dispositivo, cola de pendientes visible
Poka-yoke: prevenir y deshacerEstados imposibles fuera del alcance, consecuencia visible antes del gesto, borrador conservado y deshacer junto a la barra del pulgar; lo irreversible se anula con rastro
14 el estándar, en catorce reglas

El juramento.

Toda pantalla de un producto crescō se mide contra estas catorce. Si una falla, el flujo está roto — se arregla el flujo, no se decora la pantalla.

1Diseño el flujo, no la pantalla. Primero la secuencia de decisiones; la pantalla es donde caben.
2El foco ya está donde toca. Al completar un paso, viaja solo al siguiente. Nadie persigue campos con el mouse.
3Un verbo por estado. La acción primaria es una y muta con el estado; los menús son para lo secundario.
4Todo proviene de algo. Los paneles nacen del control que los pidió y colapsan en lo elegido. Nada aparece de la nada.
5Sin callejones. «Sin resultados» ofrece crear ahí mismo. Un error explica cómo salir. El vacío invita.
6La memoria vive junto a la decisión — y calla cuando no tiene nada que decir.
7↵ avanza, ⌘↵ confirma, esc regresa. Siempre visibles en la barra. El mouse funciona igual de bien; el teclado simplemente vuela.
8La UI nunca espera al servidor. Commit optimista, punto ámbar mientras viaja, degradación con gracia si falla.
9Una sola verdad. La misma acción es el mismo hook y la misma frase en toda superficie del producto.
10El movimiento explica, no adorna. Una sola curva, duraciones cortas, máximo tres cosas se mueven — y prefers-reduced-motion apaga el viaje, no la explicación.
11Abajo se decide, arriba se lee. En el teléfono, el verbo vive en la franja del pulgar a todo el ancho; nada crítico en la esquina superior, y el ancho tiene un solo dueño: el paso activo.
12La red mala es el estado normal. Buscar, cobrar y emitir el recibo nunca esperan señal; el pendiente es un aro que se llena — progreso, jamás sospecha — y la pantalla se aprueba con el texto en su tamaño más grande.
13El contexto se ve, no se memoriza. Lo ya decidido queda visible donde se decidió, y tocarlo lo reabre. La pantalla jamás examina la memoria de nadie.
14Poka-yoke, siempre. Primero evita el error: no ofrezcas estados imposibles y muestra alcance y consecuencia. Si aun ocurre, conserva lo escrito y permite deshacer en el lugar del hecho. Solo lo que no puede deshacerse ni compensarse se confirma; lo irreversible se anula con motivo y rastro, nunca se borra.
UX inteligente · la tesis ↵ seleccionar esc volver