La crítica donde tu pantalla va a la pared
Crítica del jueves, media hora
Diseñadora Objetivo en la primera diapositiva: llegar a un filtro guardado sin entrar en ajustes. Traigo dos versiones.
Diseñador Empiezo por lo que veo. En la de la izquierda todo pesa igual: el ojo arranca en una esquina y se rinde.
Diseñadora La fila entera se pulsa, esa es la gracia.
Diseñador Se pulsa y no lo dice nada. Ponle una sombra, o una flecha pequeña. Ahora mismo el único aviso lo tienes tú en la cabeza porque la dibujaste.
Front En la versión de la derecha hay tres ideas nuevas en una pantalla. Para un primer arranque es mucho que sostener a la vez.
Diseñadora Entonces lo avanzado se descubre cuando lo piden y la primera pantalla se queda con dos cosas.
Contenido El botón principal dice «Guardar y continuar» y la pantalla solo guarda. Eso acaba en un aviso de soporte.
Diseñador Otra cosa: por qué esto abre una ventana que bloquea. Tapa la lista que estás filtrando, así que la gente la cierra para mirar y se le va el formulario.
Diseñadora Pues que suba desde el borde inferior. La lista se queda detrás.
Front El icono de limpiar tiene un punto de contacto minúsculo. Amplía la zona de toque y deja el icono igual.
Contenido Y la pantalla sin datos dice «Vacío». Es lo primero que ve una cuenta nueva y ahí no hay nada que leer.
Diseñador La última, y la digo con su nombre: la casilla marcada de fábrica al final es un patrón oscuro. Desmárcala o quítala.
Diseñadora Desmarcada. Panel desde el borde, flecha, dos líneas donde no había ninguna. Vuelvo el jueves.
Media hora, cuatro personas, una pantalla. Cada frase de la sala apunta a algo que tiene nombre, y el nombre es lo que separa la crítica del gusto.
La crítica va de lo que hace el ojo a lo que la pantalla le pide a una persona
Se empieza mirando: peso, tamaño, qué se distingue como control. Luego se pasa a la carga: cuánto hay que sostener a la vez y qué puede esperar. Y se termina donde una interfaz deja de ser incómoda y empieza a ser injusta.
Crítica de diseñoDesign critique
Sesión con formato en la que los diseñadores dan feedback contra los objetivos declarados, no contra su gusto personal.
Lo llevamos a la crítica del jueves, con el problema planteado en la primera diapositiva.
La reunión misma, y la razón de que sea un oficio y no una ronda de pareceres. Cuando el objetivo falta en la diapositiva inicial, el hueco lo llena el gusto.
Jerarquía visualVisual hierarchy
La disposición de tamaños, grosores y espacios que le dice al ojo qué leer primero.
La jerarquía visual está plana, todo grita al mismo volumen.
Lo primero a lo que alguien reacciona, casi siempre sin ponerle nombre. «Recargado» y «lioso» son esto mismo, dicho por quien no tiene la palabra.
Affordance
Propiedad de un objeto que hace posible una acción; en interfaces, lo que un control te deja hacer con él.
La affordance de pulsar la tiene toda la fila, no solo la flecha del final.
Lo que una cosa deja hacer de verdad, lo note la persona o no. Media discusión de la sala sale de confundirlo con la pista que lo anuncia.
SignificanteSignifier
Pista visible — una sombra, una flecha, una etiqueta — que dice dónde y cómo se puede actuar.
Falta un significante: una flecha, una sombra, algo que diga que eso se mueve.
La otra media, y la mitad que a los diseñadores se les olvida dibujar. Un control puede responder perfectamente al dedo y ser invisible.
Carga cognitivaCognitive load
Cuánto hay que pensar a la vez para hacer una tarea; la interfaz o la aumenta o se la queda ella.
Tres conceptos nuevos en una misma pantalla es demasiada carga cognitiva.
El motivo de que una pantalla técnicamente terminada vuelva atrás. En la sala nadie la mide y todo el mundo la nota.
Revelación progresivaProgressive disclosure
Mostrar solo lo que hace falta ahora y descubrir las opciones avanzadas cuando la persona las pide.
Los ajustes avanzados van en revelación progresiva, no en un formulario kilométrico.
La respuesta de siempre cuando la pantalla está bien y hay demasiada a la vez. Con esconder cosas se confunde: una espera a que se la pidan, la otra confía en pasar inadvertida.
Modal
Ventana que bloquea el resto de la interfaz hasta que se resuelve.
Tres modales seguidos al primer arranque, normal que la gente se vaya.
Se elige mucho más de lo que se defiende. Le cuesta a la persona el contexto con el que venía, y por eso acaba cambiándose por otra cosa.
Bottom sheet
Panel que sube desde la parte baja de una pantalla móvil, por encima del contenido y no en su lugar.
Metemos los filtros en un bottom sheet para que la lista siga a la vista.
Ese cambio, en el teléfono. Aquí ya se pide por costumbre más que por decisión.
Estado vacíoEmpty state
Lo que muestra una pantalla cuando todavía no hay datos; suele ser la primera impresión real del producto.
El estado vacío pone «No hay elementos», y así se desperdicia la primera pantalla.
La pantalla que casi todo el mundo ve primero y que casi ningún equipo escribe a tiempo. Es una conversación entera con una cuenta recién abierta, y suele durar una palabra.
Microcopy
Los textos pequeños de la interfaz — etiquetas de botón, pistas, mensajes de error — que guían la acción.
El microcopy de ese botón promete algo que la pantalla no hace.
El texto más chico del producto y el que más promete. Cuando la pantalla y él discrepan, soporte se entera antes que el equipo.
Área táctilTouch target
La zona de un control con la que se puede acertar con el dedo; tiene que ser lo bastante grande.
El área táctil son 24 puntos: agranda la zona sin tocar el icono.
Donde una discusión de diseño se vuelve una medida, y el dibujo puede quedarse como está.
Patrón oscuroDark pattern
Interfaz diseñada para llevar con engaño a decisiones que la persona no quería: costes ocultos, cancelación escondida.
Poner la baja en gris y diminuta es un patrón oscuro, y legal dirá lo mismo.
La raya que la sala anda buscando cuando se queda en silencio. Rara vez se dibuja a propósito: suele ser el resultado de pedir un número con demasiada firmeza.
La pantalla vuelve el jueves que viene
Con una flecha, con un panel en vez de una ventana y con dos líneas donde había una. Las palabras serán las mismas. Quien la presente serás tú.
Preguntas y respuestas
¿Y las demás palabras del oficio?
En la página del tema, las 150. Aquí hay doce: las que gasta una sola crítica.
¿Por qué está el inglés al lado?
El vocabulario de las interfaces viaja en inglés y se discute en español, y «affordance» no tiene una traducción cómoda en ninguna parte. Las dos formas van en la misma tarjeta.
¿De dónde salen las definiciones?
Del tema «Producto y UX»: las mismas tarjetas que en la app.
La crítica que viene irá sobre otras doce.
En el tema «Producto y UX» hay 150; en la app llegan de unas pocas en unas pocas cada día.
