Microcopy: los textos pequeños que hacen que una web se sienta cuidada

Cuando reviso una web que acaba de llegar al estudio, hay una prueba que hago casi sin pensar: relleno el formulario de contacto mal a propósito. Dejo el email a medias, me salto un campo obligatorio y pulso enviar. Lo que aparece en pantalla en ese momento dice mucho de cómo se ha hecho la web. Hay veces que sale un «Error: campo inválido» en rojo chillón, y otras un «Parece que al email le falta la @» justo debajo del campo. Las dos webs pueden tener el mismo diseño, la misma tipografía y las mismas fotos, pero solo una de ellas da la sensación de que alguien pensó en ti.

Esos textos pequeños tienen nombre: microcopy. Y aunque casi nunca salen en la presentación del proyecto, son de lo que más se recuerda al usar una web.

01Qué es el microcopy y por qué se nota tanto

El microcopy son los textos breves que acompañan a la interfaz. No es el titular de la home ni el texto de la sección «Sobre nosotros», sino todo lo demás: lo que pone en los botones, las etiquetas de los campos, la ayuda que aparece debajo de una contraseña, el mensaje que confirma que tu pedido ha salido, el aviso de cookies, la página que ves cuando un enlace ya no existe.

Son textos que se leen en medio segundo y casi siempre en un momento de acción. La persona está haciendo algo (pedir cita, comprar, apuntarse, buscar) y el microcopy le dice qué va a pasar, qué ha pasado o qué tiene que hacer ahora. Por eso pesa tanto. Un titular bonito se lee una vez; el texto de un botón se lee justo antes de decidir si se pulsa o no.

Hay otra razón por la que me parece tan valioso. Es el sitio donde una marca puede sonar como una persona sin tener que escribir un manifiesto. Con una frase de seis palabras en el momento justo, la web pasa de parecer un trámite a parecer un sitio atendido.

02Botones y formularios: decir qué va a pasar

El caso más común es el botón genérico. «Enviar», «Aceptar», «Continuar», «Click aquí». Funcionan, pero no ayudan. El texto de un botón tiene que contestar a una pregunta muy concreta: si pulso esto, ¿qué ocurre?

Unos ejemplos de los que vemos a menudo:

• →Una clínica con un formulario de cita que termina en «Enviar». Mejor: «Pedir cita».
• →Una tienda con un botón «Continuar» en el carrito. Mejor: «Ir al pago» o «Revisar mi pedido», según el paso.
• →Un boletín con «Suscribirse». Mejor: «Quiero recibirlo», o algo que diga qué llega y cada cuánto.

Con los formularios pasa algo parecido. Las etiquetas deben ser claras y estar siempre visibles (el texto de ejemplo dentro del campo desaparece en cuanto empiezas a escribir, así que no sirve como etiqueta). Y si un dato necesita contexto, se explica al lado, en una línea. Debajo del teléfono, por ejemplo, un «Solo lo usaremos para confirmar la cita» quita dudas antes de que aparezcan. En la guía sobre formularios que la gente sí rellena entramos más a fondo en la estructura; aquí me quedo con la parte del texto, que es la que más rápido se mejora.

Un detalle que me gusta revisar es la coherencia entre el botón y lo que viene después. Si el botón dice «Pedir presupuesto», la pantalla siguiente no debería decir «Formulario enviado correctamente», sino algo como «Recibido. Te escribimos con el presupuesto en un par de días». Mismo vocabulario, misma conversación.

03Mensajes de error y de éxito: acompañar en el momento justo

Los mensajes de error son el lugar donde más se nota la diferencia entre una web cuidada y una que no lo está. Un buen error explica qué ha pasado, en qué campo, y cómo arreglarlo. Sin culpar a nadie y sin tecnicismos.

Clave: un mensaje de error útil responde a tres cosas en una frase corta: dónde está el problema, qué falta y qué hacer para seguir.

Algunos antes y después, de nuevo como ejemplo genérico:

• →«Campo obligatorio» pasa a «Necesitamos tu email para responderte».
• →«Formato de fecha incorrecto» pasa a «Escribe la fecha así: 14/03/2027».
• →«Error 500. Inténtelo más tarde» pasa a «Algo ha fallado por nuestra parte. Vuelve a probar en un minuto; lo que has escrito sigue aquí».
• →«Contraseña no válida» pasa a «La contraseña necesita al menos 8 caracteres y un número».

Fíjate en que ninguno de los «después» es gracioso. No hace falta. En un error, la persona suele estar un poco frustrada, y lo que agradece es claridad y algo de calma. El humor, si lo hay, mejor guardarlo para otros momentos.

Los mensajes de éxito son la otra cara y a menudo se desaprovechan. Un «Operación completada» cierra la conversación en seco. En cambio, una confirmación que repite lo esencial («Tu cita es el jueves a las 10:30. Te hemos enviado los detalles por email») y dice qué viene ahora tranquiliza a quien acaba de dar un paso. Si además añade algo útil, como dónde aparcar o qué traer, la web empieza a hacer de recepcionista.

Esto conecta con las microinteracciones: el texto y el pequeño movimiento que lo acompaña trabajan juntos. Un check que aparece suave y una frase bien escrita hacen más que cualquiera de los dos por separado.

04Estados vacíos, cookies y la página 404

Hay pantallas que casi nadie diseña porque «no deberían verse»: el carrito vacío, una búsqueda sin resultados, la zona de favoritos cuando aún no has guardado nada. Se ven muchísimo. Y un estado vacío bien escrito convierte un callejón sin salida en una invitación.

Un buscador que devuelve «0 resultados» deja a la persona sola. Uno que dice «No hemos encontrado nada con "sillas jardín". Prueba con "sillas exterior" o mira toda la colección de terraza» le da dos caminos. En un carrito vacío, un «Todavía no hay nada por aquí» con un enlace a lo más pedido funciona mejor que una pantalla en blanco con un icono triste.

El aviso de cookies es un caso curioso. Tiene que ser claro, cumplir la normativa y dar opciones de verdad, así que el margen creativo es menor. Aun así, se puede escribir como una persona: frases cortas, sin jerga legal en la primera capa, botones que digan lo que hacen («Aceptar todas», «Solo las necesarias», «Elegir») y un enlace a la política completa para quien quiera leerla. Lo que no conviene es usar el texto para empujar a aceptar con trucos; eso se nota y resta confianza.

Y luego está la 404, que es probablemente el sitio donde más se permite jugar. Alguien ha llegado a una página que no existe, y la web puede contestar con un frío «Not Found» o con algo de su propia voz. Para un restaurante, por ejemplo, un «Esta mesa no existe, pero la carta sigue en su sitio» con enlaces a la carta y a reservas. Para un despacho de abogados, algo sobrio y amable: «No encontramos esta página. Puede que la dirección haya cambiado». Las dos cumplen la misma función, que es devolver a la persona a un sitio útil, y las dos suenan a su marca.

05Cómo darle el tono de tu marca

El microcopy es, en el fondo, la forma de hablar de la marca aplicada a frases muy cortas. Si la marca ya tiene definido su tono de voz, el trabajo consiste en bajarlo a tierra. Si no lo tiene, escribir el microcopy suele ser una buena excusa para definirlo.

En el estudio solemos empezar con unas pocas decisiones sencillas:

Tú o usted. Parece una tontería y no lo es. Una marca de surf y una notaría no se dirigen igual a la gente. Se decide una vez y se respeta en toda la web, incluidos los emails automáticos.

Cuánta cercanía y en qué momentos. Hay marcas que se permiten un guiño en la 404 y en el boletín, pero son sobrias en pagos y datos personales. Me parece un criterio muy sano: la personalidad aparece donde suma y se aparta donde la persona necesita concentrarse.

Un vocabulario propio. Si en la web hablamos de «reservas», no puede aparecer de repente «solicitud» en el botón y «petición» en el email. Una pequeña lista de palabras de la casa evita muchos despistes, sobre todo cuando varias personas tocan los textos.

Frases que se puedan leer en voz alta. Es mi prueba favorita. Si un texto de la web suena raro dicho en voz alta en el mostrador de tu negocio, probablemente suena raro también en pantalla.

Con eso se puede montar una hoja breve con ejemplos: cómo escribimos un botón, un error, una confirmación, un estado vacío. No hace falta que sea un documento enorme. Lo útil es que quien añada una sección nueva dentro de seis meses tenga a mano cómo suena la marca.

06Un repaso que se puede hacer esta semana

No hace falta rediseñar una web para mejorar su microcopy. Basta con recorrerla como lo haría un cliente nuevo, con el móvil en la mano. Pulsa cada botón importante y comprueba si lo que pasa coincide con lo que prometía. Rellena los formularios mal, a propósito. Busca algo que no exista. Vacía el carrito. Escribe una dirección inventada para llegar a la 404. Y anota cada texto que suene a mensaje de sistema en lugar de a persona.

Con esa lista en la mano, la mayoría de cambios son de una línea. Hay que tener en cuenta también la accesibilidad: los mensajes de error deben estar asociados a su campo y no depender solo del color, y los enlaces deberían entenderse fuera de contexto («Ver la carta» en lugar de «Pincha aquí»). Lo que mejora la experiencia de una persona con lector de pantalla suele mejorarla para todos.

Cuando diseñamos una web en SIMA, el microcopy entra en el proceso desde los primeros wireframes, porque es parte de cómo funciona la interfaz y no un relleno de última hora. Si quieres que tu web hable con la misma voz que tu marca, puedes ver cómo trabajamos el diseño web y la experiencia digital o escribirnos y lo vemos juntos.