Tu visitante recorre el formulario con la vista en dos segundos antes de escribir un solo carácter. Lee el tamaño de los campos, el espaciado, la disposición. Un campo de código postal tan ancho como todo el formulario provoca confusión. Un área de texto de una sola línea para una opinión detallada transmite que no esperas mucho.
El ancho de tu campo le dice al usuario cuánto texto esperas que escriba. Una caja de texto diminuta indica "dame tu nombre". Un área de texto alta indica "cuéntame tu historia". Si te equivocas, te buscas confusión, esfuerzo al escribir y abandono del formulario.
Tu formulario tiene dos tipos de campos de entrada de texto: el campo de una línea y el área de texto de varias líneas. Se ven distintos, se comportan distinto y resuelven problemas distintos. Elegir el adecuado no es complicado, pero influye en cómo perciben tu formulario los usuarios y en si lo rellenan.
Qué es un campo de texto
Un campo de texto es una caja de una sola línea donde los usuarios escriben un texto corto. No salta a una línea nueva cuando llegas al borde. No admite varios párrafos. Si pulsas Intro, el formulario se envía (o pasa al siguiente campo). Está pensado para datos breves y acotados.
Un campo de texto establece un contrato mental con el usuario. Le estás pidiendo algo rápido. Un nombre. Un correo. Un código postal. Una fecha. Un solo dato.
Qué es un área de texto
Un área de texto es una caja de texto de varias líneas que crece a medida que los usuarios escriben. Si pulsas Intro, obtienes una línea nueva. Se desplaza en vertical cuando el contenido supera el área visible. Indica al usuario que esperas más que unas pocas palabras. Aquí se admiten párrafos. Se esperan ideas detalladas.
Un área de texto quita la restricción. El usuario sabe que puede escribir todo lo que necesite sin meter su respuesta en una sola línea.
Cuándo usar un campo de texto de una línea
Usa un campo de texto cuando la respuesta esperada cabe en una línea y el usuario puede contestar con pocas palabras o menos.
Datos de contacto
Nombre, correo, número de teléfono. Estos campos son siempre de una línea. El usuario espera escribir un nombre y seguir, no abrir un editor de texto para su teléfono.
Identificadores cortos
Nombre de usuario, número de cuenta, código postal, contraseña. Tienen longitudes definidas o se espera que sean breves. Un campo de una línea tiene sentido.
Campos de ubicación y logística
Ciudad, estado, país, dirección (primera línea). Suelen ser entradas de una línea. Puedes dividir la dirección en varios campos de una línea en lugar de usar un área de texto grande.
Búsqueda y filtrado
Cajas de búsqueda. Filtros de producto. Rangos de fechas. Esperan una entrada rápida, no un párrafo. Los campos de una línea encajan bien.
Fechas y números
Cualquier campo donde el usuario introduce una fecha, hora, cantidad o precio concretos. Campo de una línea. A veces conviene un tipo de campo especializado para fechas (como un selector de fecha), pero el modelo de interacción sigue siendo de una línea.
Cuándo usar un área de texto
Usa un área de texto cuando esperes que el usuario escriba más de una frase o cuando la respuesta sea de forma natural más larga que una línea.
Comentarios y opiniones
Si preguntas "¿Qué opinión tienes?", el usuario piensa en párrafos, no en palabras sueltas. Un área de texto indica que hay espacio para su idea completa. No se sentirán encajonados.
Formularios de mensaje y consulta
Cuando un visitante rellena un formulario de contacto con un campo de mensaje, necesita espacio para explicar su situación. La cantidad de texto varía mucho. Un área de texto admite tanto una pregunta rápida de dos frases como una solicitud detallada de dos párrafos.
Campos de descripción y detalles
Descripciones de producto, briefs de proyecto, requisitos de servicio. Cualquier campo que pida al usuario contexto o detalle. Un área de texto invita a dar ese detalle.
Notas e instrucciones especiales
Un campo que dice "Añade cualquier petición especial" o "Notas para la entrega" suele necesitar un área de texto porque no puedes prever si el usuario tiene dos palabras o dos párrafos que añadir.
El principio del tamaño: el ancho del campo anticipa la longitud esperada
El tamaño de tu campo envía un mensaje antes de que el usuario escriba un solo carácter. Un campo de código postal que ocupa todo el ancho del formulario crea confusión. El usuario ve todo ese espacio y piensa "¿he entendido mal lo que me pides?".
Usa esta regla: el tamaño visual del campo debe corresponder a la longitud esperada de la respuesta.
Campos de texto cortos
Para un código postal, haz el campo estrecho. Quizá de 80 a 120 píxeles de ancho en ordenador. Esta señal visual dice al usuario "escribe cinco dígitos, no un párrafo".
Para un campo de nombre, usa un ancho medio. Quizá de 200 a 300 píxeles. Lo bastante largo para "Alexander Thompson" pero no tan ancho como para invitar a escribir una biografía.
Áreas de texto
Las áreas de texto se expanden en horizontal y en vertical. Un área de texto de cuatro líneas de alto indica una respuesta más larga que una de dos líneas. Haz que tu área de texto corresponda al esfuerzo esperado.
Si esperas unas pocas frases, empieza con tres a cinco líneas visibles. Si pides una opinión detallada, empieza con seis a ocho líneas. Los usuarios pueden redimensionar el campo si necesitan más espacio, pero el tamaño inicial marca su expectativa.
Reglas de diseño para los campos de texto
Acompáñalos siempre de una etiqueta
Nunca uses el texto del placeholder como sustituto de una etiqueta visible. El texto del placeholder desaparece cuando el usuario empieza a escribir, rompe la accesibilidad y le deja adivinando qué quería el campo. Usa una etiqueta clara encima o al lado del campo, y usa el placeholder solo como una pista discreta.
Mal ejemplo: un campo sin etiqueta, solo con un placeholder gris que dice "Escribe tu nombre".
Buen ejemplo: una etiqueta que dice "Nombre" encima del campo, con un placeholder opcional como "John Doe".
Indica con claridad los campos obligatorios
Marca los campos obligatorios con un asterisco (*) o con la palabra "(obligatorio)" entre paréntesis. No dejes a los usuarios adivinando si un campo es opcional.
Valida pronto y deja recuperarse con facilidad
Si un usuario introduce un correo no válido o un teléfono con formato incorrecto, no borres lo que escribió. Muestra un mensaje de error que explique el problema con precisión y conserva lo que ya había escrito para que pueda corregirlo en lugar de volver a escribirlo desde cero.
Admite el tipo de entrada esperado
Para el correo, usa type="email" para que los usuarios de móvil reciban un teclado optimizado para correo. Para el teléfono, usa type="tel". Para los números, usa type="number". Estos tipos de campo especializados mejoran la experiencia en móvil sin darte trabajo extra.
Reglas de diseño para las áreas de texto
Haz que el área de texto crezca con el contenido
Si un usuario escribe un mensaje largo y el área de texto mantiene un tamaño fijo, tiene que desplazarse dentro del campo mientras escribe. Eso rompe la experiencia de escritura. Usa CSS o JavaScript para que el área de texto se expanda automáticamente a medida que el usuario añade líneas. Escribe con naturalidad, el campo crece y no hay que desplazarse dentro del propio campo.
Muestra claramente el tamaño inicial
Un área de texto debe tener altura visible suficiente para indicar que esperas más que una sola línea. Muestra al menos de tres a cinco líneas de espacio vacío para que los usuarios entiendan que no es un campo de una línea.
Fija un límite de caracteres razonable si hace falta
Algunas áreas de texto tienen límites. Un formulario de atención al cliente puede limitar las opiniones a 5000 caracteres. Si tienes un límite, muestra el recuento de caracteres restantes mientras el usuario escribe. Deja que vea cuánto espacio le queda sin descubrirlo al chocar contra el tope.
Usa una fuente monoespaciada para código o entradas técnicas
Si el área de texto es para fragmentos de código o datos técnicos, usa una fuente monoespaciada para que el espaciado y la alineación se vean bien. Para texto normal como mensajes u opiniones, usa la fuente sans-serif por defecto que encaje con tu marca.
Errores comunes con los campos de texto
Dar el mismo ancho a todos los campos de texto
Si todos los campos de tu formulario tienen el mismo ancho, pierdes la señal visual sobre la longitud esperada. Un campo de código postal no debería ser tan ancho como uno de nombre. Deja que el tamaño comunique la expectativa.
Usar el placeholder en lugar de etiquetas
Ya se ha mencionado, pero es crítico. El placeholder sirve como pista, no como etiqueta. Un usuario con lector de pantalla no verá el placeholder. Un usuario que ha rellenado algunos campos y vuelve más tarde olvidará qué quería el campo.
No mostrar los errores de validación en contexto
Si el usuario escribe un correo no válido y el mensaje de error aparece arriba del formulario mientras el campo de correo está abajo, tiene que desplazarse para encontrar el problema. Mantén los mensajes de error cerca del campo que los provocó, en color (rojo o naranja) y con un icono que indique "algo va mal".
No permitir deshacer al borrar
Si el usuario borra un campo por accidente o el formulario tiene un botón "Borrar" que lo limpia todo, asegúrate de que puede deshacer esa acción. Un solo toque de botón no debería destruir cinco minutos de trabajo rellenando el formulario.
Errores comunes con las áreas de texto
Áreas de texto de tamaño fijo que no se expanden
Un área de texto que mantiene el mismo tamaño mientras el contenido se desborda y obliga a desplazarse fuerza al usuario a escribir en una ventana minúscula. Su experiencia parece rota. Haz que el área de texto se expanda con el contenido.
Sin una indicación clara del límite de caracteres
Si tu área de texto tiene una longitud máxima, el usuario debe saberlo antes de alcanzarla. Muestra un contador de caracteres que se actualice mientras escribe. "Quedan 500 caracteres" o "2 de 5000 caracteres" le dice al instante cuánto espacio tiene.
Empezar demasiado pequeña
Un área de texto de una sola línea de alto no comunica "quiero tu opinión detallada". Parece que sigue siendo un campo de una línea. Empieza con al menos tres o cuatro líneas visibles para que el usuario entienda que puede escribir más.
Ejemplos: campo de texto o área de texto en contexto
Un formulario de contacto
Campo de nombre: campo de texto de una línea. Lo bastante ancho para un nombre largo pero lo bastante estrecho para indicar "solo tu nombre".
Campo de correo: campo de texto de una línea con type="email".
Campo de teléfono: campo de texto de una línea con type="tel".
Campo de mensaje: área de texto, lo bastante alta para unos cuantos párrafos.
Un formulario de reseña de producto
Tu nombre: campo de una línea.
Tu correo: campo de una línea con type="email".
Valoración (de 1 a 5 estrellas): un tipo de campo especializado, pero no un área de texto.
Tu reseña: área de texto.
Lo recomendaría a otras personas: una casilla, no un campo de texto.
Un formulario de pago
Nombre, apellidos, correo, teléfono: todos campos de una línea.
Dirección de envío (calle, ciudad, estado, código postal): normalmente varios campos de una línea, no un área de texto para la dirección completa.
Instrucciones especiales de entrega: área de texto. El usuario puede tener una frase o tres según sus necesidades.
Formularios de WEMASY: crear campos de texto y áreas de texto
El creador de formularios de WEMASY incluye campos de texto y áreas de texto. Cuando añades un campo a tu formulario, eliges el tipo de campo según lo que estés pidiendo.
Para un formulario de contacto en WEMASY, añadirías un campo de texto para el nombre y el correo del visitante, y un área de texto para su mensaje. WEMASY se encarga del estilo automáticamente para que tus campos de texto y áreas de texto combinen con los colores y la tipografía de tu marca. Tú te centras en hacer las preguntas correctas. El creador de formularios gestiona la disposición y el comportamiento de los campos.
Si necesitas un tipo de campo especializado (como un selector de fecha o validación de correo), WEMASY también lo admite. El tamaño, el comportamiento y la validación del campo trabajan juntos para guiar al usuario hasta el final.