Campos de texto en el diseño de la interfaz de usuario: 7 estilos comunes | Nick Babich | septiembre 2022

Vistas: 29
0 0
Tiempo de lectura:6 Minutos, 58 Segundos

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.

Un cuadro de texto estándar con una etiqueta a la izquierda y en la parte superior del contenedor de entrada.

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.
El campo de entrada es solo una cadena en comparación con un campo de entrada normal.
  • 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.
Los estados Habilitado, Enfocado y Deshabilitado para el campo de entrada.
  • 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).
El campo de entrada oculta la etiqueta de enfoque y la etiqueta permanece encima del campo de enfoque.
  • 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).
Texto de marcador de posición en lugar de texto de marcador de posición útil.
  • 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.
Falta de contorno visual en comparación con el contorno visual contrastante.
  • 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.
El campo de entrada es demasiado grande en comparación con el tamaño correcto.
  • 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á).
Ícono de ayuda con información sobre herramientas con información adicional.

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.

Campo de contraseña.

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.
Opción “Mostrar-ocultar contraseña”.
  • 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.

Cuadro de texto con secciones separadas

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.

Campo de número de teléfono con formato automático. Imagen: Josh Moroni

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.

Cuadro de texto con sugerencia automática

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 sitio web de Amazon utiliza un mecanismo de autohipnosis.

El ícono del micrófono indica que el usuario puede ingresar datos usando su voz.

Campo de texto con entrada de 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).

Un ícono de micrófono que activa la entrada de voz dentro del campo de entrada en lugar de afuera.

El área de texto es una entrada de texto de varias líneas para textos extensos.

área de texto

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.
El área de texto cambia dinámicamente
  • Si tiene un límite de caracteres, muéstrelo en la esquina inferior derecha del contenedor de entrada.
Un área de texto con un límite de caracteres.

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

Happy
Happy
0
Sad
Sad
0
Excited
Excited
0
Sleepy
Sleepy
0
Angry
Angry
0
Surprise
Surprise
0
Previous post Google anuncia la actualización principal de septiembre de 2022.
Next post Adobe compra Figma por 20.000 millones de dólares

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Deja una respuesta