Diseña un mejor campo de texto ‍

May 09 2022
15 consideraciones al diseñar un campo de texto de craqueo
Introducción No soy un experto en campos de texto, pero he trabajado bastante con ellos a lo largo de los años. Trato de ser lógico en lo que tiene sentido y crear lo que es accesible y fácil de usar.

Introducción

No soy un experto en campos de texto, pero he trabajado bastante con ellos a lo largo de los años. Trato de ser lógico en lo que tiene sentido y crear lo que es accesible y fácil de usar.

Parece simple verdad. Bueno, lo es y no lo es.

La mayor parte de lo que hablo es de campos de texto en sitios web con personas que usan una computadora de escritorio o portátil. No me concentro en el lado móvil de las cosas. Alguna vez intentó hacer hover en un dispositivo móvil .

Entremos en ello.

CONTENIDO— 3 PARTES

¿Qué es un campo de texto?
Las partes de un campo de texto
Los estados de un campo de texto

Advertencia: esta lista no es exhaustiva, pero contiene la mayor parte de lo que necesita para crear un campo de texto utilizable sólido.

¿QUÉ ES UN CAMPO DE TEXTO?

También conocido como cuadro de entrada o cuadro de texto. Un campo de texto en este contexto es un elemento o sección en un sitio web o aplicación que le permite a alguien ingresar letras o números.

¿Es un campo de texto si puede agregarle números? Buena pregunta.

Si está reservando su boda en línea en Elvis Chapel en Las Vegas, ordenando comida de Uber Eats en Miami o limpiando sus zapatillas en Sneaker Laundry en Melbourne, deberá completar algunos detalles en línea para hacerlo.

Estarás usando un campo de texto.

LAS PARTES DEL CAMPO DE TEXTO

1. El contenedor

El contenedor es la base del campo de texto.

No se moleste en reinventar la rueda en esto.

  • Mantenga el color de relleno simple
    . Aconsejaría un relleno interior blanco. Google dice lo contrario con su opción gris, no soy fanático de la opción gris oscuro con accesibilidad y colores de fuente, etc. Las personas a menudo tienen un relleno gris claro que puede funcionar bien para separarlo de un fondo de página blanco.
  • Delinear o subrayar
    Me gusta la opción delineada, como mi favorita a continuación. Da un punto de contacto claro y fácil. El subrayado (una de las opciones de Material Design) es un lugar común para Android, pero no soy un gran fan porque el punto de contacto no es tan claro.
  • Grosor de la línea del contenedor La línea
    del contenedor de 1 px funciona bien para el estado predeterminado. Tenga en cuenta que el estado de enfoque funciona bien con una línea de contenedor más gruesa que la predeterminada.
  • Accesibilidad y color de la línea del contenedor
    Ingrese a Webaim , marque el fondo de la página en la que se colocará el contenedor. Agregue el color que desea usar para la línea Contenedor. Consulte la sección Objetos gráficos en la parte inferior. Si eso falla, deséchelo y pruebe con un nuevo color. La mayoría de los sitios no tienen líneas de contenedores muy accesibles. Me he equivocado en esto varias veces.
  • Radio de esquina del contenedor Los
    bordes cuadrados o un radio de esquina pequeño funcionan. Depende de usted, pero evite un radio de esquina grande, ya que esto puede no funcionar con algunos de los elementos que pueda necesitar. Hasta una esquina de 4px, el radio funciona bastante bien.
  • El área del punto de contacto del contenedor
    voy a 44px de altura. No iría menos por web o móvil. Hasta 48px también funciona.
  • Longitud del contenedor
    Algunos trabajan con el área que tienen para la longitud. Me gusta tener contenedores que se adapten al elemento en el que se encuentra (como un modal) además de adaptarse a lo que está pasando en el contenedor. Tener un recipiente largo para poner en tu edad no es lo ideal. Por supuesto, todavía puede ser utilizable. Pero intente trabajar con una longitud de contenedor que funcione para lo que se ingresa.

La etiqueta es el encabezado del campo de texto.

  • Etiqueta o no etiqueta
    Hay veces que esta etiqueta puede no ser necesaria. Yo diría que, por regla general, tenga uno.
  • ¿Debería optar por una elegante etiqueta de estilo de material de Google?
    Lo mantendría simple e iría por la etiqueta sobre el contenedor. El diseño de materiales lo hace con el marcador de posición como una etiqueta en el contenedor y luego se mueve para romper la línea. Para mí, la etiqueta de material lista para usar es demasiado pequeña cuando está enfocada (ver más abajo). Si la copia de la etiqueta es más grande, esto funcionaría mucho mejor para mí.
  • Negrita, seminegrita, media
    Depende mucho de usted y de su fuente. Mis etiquetas de texto actuales tienen un tamaño de fuente de 14 px y medio (500).
  • Tamaño, color y accesibilidad de
    la etiqueta Tenga la etiqueta de al menos 14 píxeles de tamaño. Pásalo por Webaim y asegúrate de que el color funcione.
  • Longitud de la etiqueta
    Sea breve, hasta 4 palabras es bueno. No hay reglas aquí, pero es un encabezado que debe aclarar de qué se trata el campo de texto. El texto de ayuda/sugerencia puede elaborar si es necesario.

El marcador de posición le permite saber qué se debe poner en el campo.

  • No reemplazar la etiqueta
    Algunas personas usan el marcador de posición en lugar de la etiqueta. Ahorra espacio, pero el marcador de posición desaparece cuando toca el campo de texto. Material Design lo hace para que toque el campo de texto y se mueva a la posición de la etiqueta rompiendo la línea (como señalé anteriormente).
  • Tamaño del marcador de posición, color y accesibilidad
    Póngalo a través de Webaim y asegúrese de que el color que ha elegido sea accesible. Opto por un mínimo de 16px en tamaño de fuente y en peso de fuente normal (400).

Este es el texto que has escrito.

  • Tono más oscuro
    Tenga esto en un tono más oscuro que el texto del marcador de posición. Uso nuestro Hex gris más oscuro #101828
  • Tamaño
    de fuente El tamaño de fuente coincidirá con el tamaño del texto del marcador de posición. Yo uso 16px, tamaño de fuente normal (400).

Esta es una copia de formato corto que brinda información útil y ayuda contextual para el campo de texto.

  • Información importante
    Esta es información que es crucial para el campo de texto y es una adición a la etiqueta. Es el compinche útil de la etiqueta. El texto de ayuda/sugerencia es información esencial para que el usuario complete la tarea.
  • Tamaño y color del texto
    Al igual que con todos estos elementos, colóquelos en Webaim y asegúrese de que sean accesibles. El texto de la sugerencia de ayuda no debe ser más grande que el tamaño del texto de la etiqueta para mantener la jerarquía correcta. Lo tengo a 14px y un tono más claro que la etiqueta con Hex # 475467.
  • Texto de error y secciones deshabilitadas
    Lo mostraré en las secciones posteriores. El texto de ayuda/sugerencia tiene un triple uso.
    - Como texto de ayuda/sugerencia.
    - Como un texto de error (normalmente en rojo) cuando algo está mal o no se ha completado.
    Cuando un campo de texto está deshabilitado, uso el texto de ayuda/sugerencia para explicar por qué.

La información no esencial (pero útil) relacionada con el campo de texto se incluye en la información sobre herramientas. Las personas no deberían necesitar leer una información sobre herramientas para completar su tarea.

  • Tamaño
    Puede haber varias oraciones en una información sobre herramientas. No hay regla aquí. Mi regla es mantenerlo en 2 o 3 oraciones.
  • No esencial (pero importante)
    Esta es información que no es esencial para completar la tarea. Sin embargo, puede elaborar sobre lo que ya está allí.
  • Icono
    de información sobre herramientas El icono puede ser información o un signo de interrogación. No hay reglas estrictas aquí, pero parecen comunes y ampliamente entendidas.
  • Color
    del icono Haga que el icono sea lo suficientemente oscuro para que sea accesible. Vuelva a ir a Webaim y pase su color.
  • Color
    de la información sobre herramientas Voy a la información sobre herramientas en negro con una copia en blanco. Esto depende en gran medida del color de su sitio web y del modo oscuro, etc. Lo principal aquí es dejar claro que se puede ver el sitio detrás de él. Por lo tanto, un sitio en modo oscuro puede tener una información sobre herramientas blanca y viceversa para un sitio claro con una información sobre herramientas oscura.
  • Tamaño de copia
    Yo optaría por un tamaño mínimo de 14 px. Al menos en fuente regular 400.
  • Ubicación del ícono para la información sobre herramientas
    . Lo puse después de la etiqueta. Funciona bien para mí.
  • Pase el cursor o toque
    La información sobre herramientas debe ser fácilmente accesible. Debería ser que pasas el cursor y ves la información sobre herramientas. Hay personas que tienen que tocar el ícono y ver la información sobre herramientas. Ambos funcionan, pero el hover es menos trabajo.

Este es un icono al comienzo del campo de texto.

  • No esencial pero útil
    Esta es una bestia rara y puede ayudar en algunos casos, como un sobre para la dirección de correo electrónico o una tarjeta bancaria (como la anterior) para agregar los detalles de su tarjeta de crédito. No hay necesidad de preocuparse demasiado por esto. Siento que es bueno tener un elemento no esencial en el campo de texto.

Este es el icono al final de un campo de texto.

  • Más útil que el icono principal
    Esta área dentro del campo de texto es un área más útil que el área del icono principal. Esto tiene algunos iconos que son realmente útiles e importantes. Ver y ocultar el texto como el de arriba es un buen ejemplo.
  • Otros ejemplos
    El calendario (ver más abajo) es un pequeño ícono explicativo para agregar la fecha. También podría tener el ícono del micrófono de grabación de voz en el mismo lugar.

Este es un elemento que se encuentra antes del texto/números que se van a ingresar.

  • Moneda
    El signo de moneda se agrega primero. Cuando se agregan números al campo de texto, comienzan después del signo de dólar.
  • Opción alternativa
    También puede agregar el icono de prefijo fuera del campo de texto (ver más abajo). Esto funciona igual de bien, pero no es mi preferencia.
  • Fin del campo de texto
    Si necesita agregar un porcentaje o peso en libras, primero debe tener los números y luego el elemento relacionado.
  • Opción alternativa
    También puede agregar el ícono suficiente fuera del campo de texto. Para ser honesto, nunca he visto esto, pero se puede hacer.

Esto muestra cuando se permite un número limitado de caracteres en el campo de texto.

  • Variaciones
    Hay algunas maneras en que esto se puede hacer. Puede contar hasta cero, lo que funciona bien. Algunos muestran el número total permitido con la reducción del número, diciendo que ha utilizado 122 de los 200 caracteres permitidos, por ejemplo, 122/200.

12. Estado de desplazamiento

El estado de desplazamiento indica al usuario que es interactivo.

  • Pocas opciones
    Hay algunas opciones para pasar el cursor sobre un campo de texto. El cursor debería cambiar para mostrar que se puede hacer clic en el campo de texto y que está vivo. El contenedor del campo de texto puede volverse de un color sombreado muy claro. El contenedor puede volverse más oscuro o quizás más grueso (ver mi versión extrema arriba).

Toca el campo de texto y está enfocado.

  • Pocas opciones aquí
    La forma en que me gusta es una línea de contenedor más audaz y oscura. Algunos sitios web gubernamentales hacen que la fila de contenedores sea más oscura y gruesa. También agregan una línea exterior brillante y audaz a la línea del contenedor. A continuación se muestra el aspecto del campo de texto centrado en el sitio web de gov.uk.

Cuando el campo de texto tiene un error, debe quedar claro para el usuario.

  • El rojo es el color
    El rojo es el color estándar que uso. No puedo hablar por todas las culturas, pero el rojo es el color común para los errores.
  • Opciones
    Algunas personas hacen que la etiqueta sea roja, otras hacen que la línea del contenedor sea roja y otras hacen que el texto de ayuda sea rojo. Algunos hacen una mezcla de los tres. Busco la línea del contenedor y el texto de ayuda en rojo (como en la imagen de arriba).
  • Texto de ayuda
    Es muy importante que el texto de ayuda indique que hay un error y qué se puede hacer para solucionarlo. Por ejemplo, si es un campo obligatorio, debería indicarlo en el texto de ayuda del error.
  • Ícono con el texto de ayuda
    Si el usuario no ve claramente el color rojo, puede ser inteligente tener un ícono de error para mostrar claramente que hay un error, vea a continuación.

Es bueno mantener a la gente informada sobre por qué un campo de texto está deshabilitado.

  • Cambio de cursor
    Cuando pasa el cursor por encima, es posible que se muestre este pequeño tipo de señal digital de prohibición de entrada. Esta es una buena indicación de que puedes hacer cualquier cosa. Sin embargo, no da mucha explicación de por qué.
  • Opciones para ayudar a las personas un poco más
    Hay algunas cosas que se pueden hacer para ayudar a las personas cuando ven un campo de texto deshabilitado. Muéstreles una información sobre herramientas cuando pasen el cursor sobre el campo de texto. Esto ayuda a explicar lo que está pasando. O puede agregar alguna copia de ayuda que sea visible por adelantado. La información sobre herramientas no se muestra por adelantado, por lo que podría ser un inconveniente. Sin embargo, puede obtener más información en una información sobre herramientas que podría ser útil.

Creo que he tenido una sobredosis de campos de texto durante un tiempo, así que me despido. Solo recuerde, los campos de texto son elementos funcionales, así que no intente volverse demasiado elegante con ellos. El diseño de materiales se volvió elegante y perdió algo de usabilidad en el camino.

Muchas gracias por leer

Aplaude 50 veces por favor si disfrutaste este artículo
Sígueme, Guy Ligertwood , para mantenerte al día con mis escritos. Probablemente no quieras perderte cosas tan emocionantes como los campos de texto

Mis 20 historias más populares

© Copyright 2021 - 2022 | unogogo.com | All Rights Reserved