El campo de texto es uno de los elementos de interfaz de usuario más populares. Aunque es un objeto relativamente simple, puede tener diferentes estilos. El estilo del campo de texto puede variar según los datos que se recopilan y el contexto en el que se utilizan. En este artículo, cubriré siete tipos populares de campos de texto.
Un campo de texto estándar es un campo de texto que se encuentra en casi todos los productos digitales.
Contenido del Articulo
Cuándo usar:
El campo de entrada estándar se puede utilizar para varios tipos de datos.
Puntas:
- Utilice el diseño de campo de entrada normal. El diseño tradicional es una caja rectangular con una etiqueta en la parte superior o izquierda. Es mejor evitar el diseño lineal (popularizado por Material Design) porque afecta negativamente la capacidad de descubrimiento.
- Soporte para diferentes estados. Necesitas diseñar para soportar todos los estados. Un campo de entrada puede estar en los estados Habilitado, Pasar el cursor (escritorio), Enfocado y Deshabilitado.
- Nunca oculte las etiquetas de entrada. Las etiquetas de entrada siempre deben estar visibles para el usuario en todo momento. No lo oculte cuando el campo de entrada se enfoca porque hará que la interfaz de usuario sea menos fácil de usar (los usuarios tendrán que recordar las etiquetas al completar el formulario).
- Use texto de marcador de posición para darle al usuario una pista sobre los datos que debe proporcionar.. Por ejemplo, si le pide al usuario que proporcione un número de seguimiento, puede agregar un marcador de posición de número de seguimiento de muestra).
- Agregue un esquema visual cuando el campo de entrada esté activo. Los usuarios confían en los indicadores visuales, como un cursor parpadeante, para saber dónde se encuentran en el formulario. Puede facilitarle la vida al usuario mediante el uso de indicadores visuales adicionales. Por ejemplo, cuando un campo de entrada está activo, un contorno contrastante puede ayudar a los usuarios a encontrar el campo seleccionado actualmente más rápidamente.
- Utilice el tamaño del campo como guía. El tamaño del campo de texto puede dar a los usuarios una idea de la longitud de la entrada deseada. Por ejemplo, si sabe que un archivo ZIP puede tener un máximo de seis caracteres, no es necesario que haga que este campo sea demasiado grande.
- Agregue un ícono de ayuda (“?” o “i”) al lado del campo para ayudar al usuario a ingresar datos. Una información sobre herramientas con información útil se hace visible cuando el usuario pasa el cursor sobre el icono. Esta característica es útil cuando desea proporcionar una guía rápida para la entrada de datos (por ejemplo, le pide al usuario que proporcione un número de seguro social, pero es posible que sepa dónde encontrarlo) o cuando recopila información personal (por ejemplo, usted pídale al usuario que proporcione un número de teléfono y explique cómo lo usará).
La diferencia clave con este tipo de campo de entrada es que los datos de entrada están ocultos. Los usuarios ven asteriscos en lugar de los caracteres que escriben.
Cuándo usar
Para contraseñas, códigos de seguridad.
Puntas:
- Ofrezca siempre una función Mostrar/Ocultar. El usuario debería poder hacer clic en el icono del ojo o en la etiqueta “Mostrar” para ver lo que ha escrito y confirmar su entrada.
- No utilice el campo Confirmar contraseña. Si ofrece una función de mostrar/ocultar, no hay necesidad de pedirle al usuario que ingrese la contraseña dos veces.
Este cuadro de texto obliga a los usuarios a dividir los datos que desean proporcionar en varias secciones separadas. Un ejemplo típico sería una fecha de nacimiento con una sección separada para el día, mes y año, o un número de teléfono con una sección separada para el código de área. Este tipo de campo de entrada define estrictamente qué formato deben usar los usuarios para cada sección.
Cuándo usar:
Si bien este tipo de campo de entrada puede ayudarlo a evitar problemas de formato de datos, es mejor no usarlo, ya que obliga a los usuarios a realizar acciones adicionales (use el botón Tabulador para navegar entre las secciones). En la mayoría de los casos, es mejor confiar en el formateo automático.
Cuando el usuario ingresa datos, se formatea automáticamente en el campo. Un ejemplo típico de un campo de este tipo es un número de teléfono o un número de tarjeta de crédito.
Cuándo usar
El formato automático facilita a los usuarios la verificación de la información proporcionada. Por ejemplo, cuando se trata de números de teléfono, es mucho más fácil verificar grupos de números que un número completo.
El formato automático también puede ayudar al usuario a la hora de introducir datos y evitar errores. Por ejemplo, cuando comienza a ingresar un código postal, ve que debe ingresar seis dígitos.
Tan pronto como el usuario comience a escribir, se abrirá el cuadro con una lista de opciones que se espera que coincidan con los criterios del usuario.
Cuándo usar:
Los cuadros de texto de sugerencia automática pueden funcionar bien para una función de búsqueda. Si desea reducir la lista de opciones que el usuario desea buscar, puede utilizar este campo.
Esto también puede funcionar bien cuando el usuario especifica una dirección de envío. Tan pronto como el usuario comience a escribir una dirección, el campo de entrada puede ofrecer una opción.
Puntas:
- Desarrollar un mecanismo de autosugerencia fácil de usar. Los usuarios cometerán errores al ingresar datos y pueden frustrarse fácilmente si el sistema no ofrece ninguna sugerencia.
- Utilice diferentes estilos de fuente para la parte proporcionada por el usuario y la parte sugerida por el sistema.. Los usuarios siempre deben poder distinguir su entrada.
El ícono del micrófono indica que el usuario puede ingresar datos usando su voz.
Cuándo usar:
Hay dos razones principales por las que podría querer usar esto:
- La entrada de voz puede ser un método de entrada de datos más conveniente para usuarios móviles. Escribir en dispositivos móviles es menos conveniente y más propenso a errores que en computadoras de escritorio, por lo que la entrada de voz puede ayudar a los usuarios móviles.
- La entrada de voz puede ser útil para usuarios con problemas de visión. Las personas que no pueden escribir pueden querer usar su voz para ingresar datos.
Consejo:
No haga que el icono del micrófono forme parte del campo de entrada; en su lugar, agréguelo al lado del campo. Esto lo ayudará a usar un ícono más grande y hará que la interacción sea más fácil de usar (más cómodo para tocar/presionar objetivos grandes).
El área de texto es una entrada de texto de varias líneas para textos extensos.
Cuándo usar:
Utilice este campo si desea recopilar dos o más líneas de texto (una línea de texto suele contener unos 60 caracteres).
Puntas:
- El tamaño del área de texto debe cambiar dinámicamente, adaptándose a la entrada del usuario.
- Si tiene un límite de caracteres, muéstrelo en la esquina inferior derecha del contenedor de entrada.
Publicado originalmente en babich.biz
Pruebe la Fundación de Diseño de Interacción. Ofrece cursos de diseño en línea que cubren el espectro completo del diseño UX, desde niveles básicos hasta avanzados. Como lector de UX Planet, obtienes 25% de descuento el primer año membresía en el IxDF.
Esta publicación contiene enlaces afiliados
