Prácticas recomendadas para el formulario de acceso

Usa las funciones multiplataforma del navegador para crear formularios de acceso seguros, accesibles y fáciles de usar.

Sam Dutton

Si los usuarios necesitan acceder a tu sitio, entonces es recomendable fundamental. Esto es especialmente cierto para las personas con conexiones deficientes, en dispositivos móviles, en apurado o bajo estrés. Los formularios de acceso mal diseñados tienen porcentajes de rebote altos. Cada rebote podría significar que un usuario se perdió y descontento; no solo que no accediera a su cuenta. oportunidades.

Este es un ejemplo de un formulario de acceso simple que demuestra todas las prácticas recomendadas:

Lista de tareas

• Usa elementos HTML significativos: <form>, <input>, <label> y <button>.
• Etiqueta cada entrada con una <label>.
• Usa atributos de elementos para acceder al navegador integrado funciones: type, name, autocomplete y required.
• Proporciona valores estables de los atributos name y id de entrada que no cambien entre las cargas de página o las implementaciones de sitios web.
• Incluir el acceso en su propio <form> .
• Asegúrate de que el formulario se haya enviado correctamente.
• Usa autocomplete="new-password" y id="new-password" para el ingreso de la contraseña en un formulario de registro y para la nueva contraseña en un formulario de restablecimiento de contraseña.
• Usa autocomplete="current-password" y id="current-password". para obtener una contraseña de acceso.
• Proporciona la funcionalidad de Mostrar contraseña.
• Usa aria-label y aria-describedby para contraseñas.
• No dupliques las entradas.
• Diseña formularios para que el teclado del dispositivo móvil no oculte las entradas o botones.
• Asegúrese de que los formularios se puedan usar en dispositivos móviles: use texto legible. y asegúrate de que las entradas y los botones sean lo suficientemente grandes para funcionar como objetivos táctiles.
• Mantén el desarrollo de la marca y el estilo en tus páginas de registro y acceso.
• Realiza pruebas en el campo y en el lab: crea estadísticas de la página, analítica de interacción y medición de rendimiento centrada en los usuarios proceso de registro y acceso.
• Realizar pruebas en varios navegadores y dispositivos: El comportamiento del formulario varía. significativamente en las plataformas.

Usa HTML significativo

Usa elementos compilados para el trabajo: <form>, <label> y <button>. Estos permiten funciones del navegador integradas, mejorar la accesibilidad y agregar significado a tus el lenguaje de marcado.

Usa <form>

Es posible que te sientas tentado a unir entradas en una <div> y controlar los datos de entrada. envío puramente con JavaScript. En general, es mejor usar una técnica <form> . De esta forma, los lectores de pantalla y otros lectores de pantalla pueden acceder a tu sitio de Google, habilita una variedad de funciones integradas del navegador, facilita la creación un acceso funcional básico en navegadores más antiguos y puede funcionar incluso si JavaScript falla.

Usa <label>

Para etiquetar una entrada, usa un <label>.

<label for="email">Email</label>
<input id="email" …>

Estos son dos motivos:

• Cuando presionas una etiqueta o haces clic en ella, el foco se mueve a la entrada. Asociar una etiqueta a una la entrada usando el atributo for de la etiqueta con el name o id de la entrada.
• Los lectores de pantalla anuncian el texto de la etiqueta cuando la etiqueta o su entrada no te enfocas en eso.

No uses marcadores de posición como etiquetas de entrada. Las personas suelen olvidarse de lo que entrada es cuando empiezan a escribir, en especial si distraído ("¿ingresé una dirección de correo electrónico, un número de teléfono o una cuenta ?"). Existen muchos otros problemas posibles con los marcadores de posición: consulta No Utiliza el marcador de posición Atributo y Los marcadores de posición en los campos del formulario son Perjudicial si se trata de no se convence.

Probablemente sea mejor colocar las etiquetas encima de las entradas. Esto permite establecer en dispositivos móviles y computadoras de escritorio, y, según la IA de Google investigación, permite un análisis más rápido por parte de los usuarios. Obtendrás etiquetas y entradas de ancho completo, y no es necesario ajustar el ancho de la etiqueta y la entrada para que se ajusten al texto de la etiqueta.

Abre el Glitch de label-position en un dispositivo móvil para comprobarlo tú mismo.

Usa <button>

Usa <button>. para los botones. Los elementos de los botones brindan un comportamiento accesible y un formato integrado la funcionalidad de envío de mensajes y se pueden diseñar fácilmente. No tiene sentido usando un <div> o algún otro elemento que haga de cuenta ser un botón

Asegúrate de que el botón Enviar dice lo que hace. Algunos ejemplos son Crear cuenta o Accede, no con Enviar ni Comenzar.

Asegúrate de que el formulario se haya enviado correctamente

Ayuda a los administradores de contraseñas a comprender que se envió un formulario. Existen dos maneras de hacerlo:

• Navega a otra página.
• Emula la navegación con History.pushState() o History.replaceState(). y quite el formulario de contraseñas.

Con una solicitud XMLHttpRequest o fetch, asegúrate de que el acceso correcto se informa en la respuesta y también se controla con la forma fuera del DOM. como indicar el éxito del usuario.

Considera inhabilitar el botón Acceder una vez que el usuario lo presione o haga clic. que la modifica. Muchos usuarios hacen clic en los botones varias veces incluso en sitios que son rápidos y responsivos. Eso ralentiza las interacciones y agrega a la carga del servidor.

Por el contrario, no inhabilites el envío de formularios a la espera de la entrada del usuario. Por ejemplo: No inhabilites el botón Acceder si los usuarios no ingresaron su cliente. PIN. Es posible que los usuarios se pierdan algo del formulario y, luego, intenten presionar repetidamente el (inhabilitado) Botón Acceder y crees que no funciona. Como mínimo, si debes inhabilitar el envío de formularios, explicarle al usuario qué falta cuando haz clic en el botón Inhabilitar.

No dupliques las entradas

Algunos sitios obligan a los usuarios a ingresar correos electrónicos o contraseñas dos veces. Eso podría reducir errores para algunos usuarios, pero genera trabajo adicional para todos los usuarios y aumenta abandono de alto rendimiento. Preguntar dos veces tampoco tiene sentido si los navegadores autocompletan las direcciones de correo electrónico o sugerir contraseñas seguras. Es mejor permitir que los usuarios confirmen su correo electrónico (deberás hacerlo de todas formas) y facilítales el restablecimiento de su contraseña si es necesario.

Aprovecha al máximo los atributos de los elementos

¡Aquí es donde realmente ocurre la magia! Los navegadores tienen varias funciones integradas útiles que utilizan atributos de elementos de entrada.

Mantén las contraseñas privadas, pero permite que los usuarios puedan verlas si lo desean.

Las entradas de contraseñas deben tener type="password" para ocultar el texto de la contraseña y ayudar a navegador entienden que la entrada es para contraseñas. (Ten en cuenta que los navegadores usan diversas técnicas para comprender los roles de entrada y decidir si ofrecer o no guardar las contraseñas).

Debes agregar un botón de activación de Mostrar contraseña para permitir que los usuarios comprueben el el texto que haya ingresado y no olvide agregar el vínculo ¿Olvidó su contraseña? Consulta Habilita la visualización de las contraseñas.

Proporciona a los usuarios de dispositivos móviles el teclado adecuado

Usa <input type="email"> para ofrecer a los usuarios de dispositivos móviles un teclado adecuado y habilitar la validación de dirección de correo electrónico integrada básica por el navegador... no es JavaScript. .

Si necesitas usar un número de teléfono en lugar de una dirección de correo electrónico, <input type="tel"> habilita un teclado de teléfono en dispositivos móviles. También puedes usar El atributo inputmode cuando sea necesario: inputmode="numeric" es ideal para el PIN. y números de serie. Todo lo que siempre quisiste saber sobre inputmode tiene más detalles.

Evitar que el teclado del dispositivo móvil obstruya el botón Acceder

Si no tienes cuidado, es posible que los teclados móviles cubran el formulario o lo que es peor, obstruir parcialmente el botón Acceder. Los usuarios pueden darse por vencidos antes darse cuenta de lo que ha sucedido.

Para evitar esto, siempre que sea posible, muestra solo el correo electrónico, el teléfono y la contraseña, y el botón Acceder en la parte superior de la página de acceso. Coloca otro contenido a continuación.

Haz pruebas en una amplia gama de dispositivos

Deberás realizar pruebas en una variedad de dispositivos para tu público objetivo y ajustar según corresponda. BrowserStack permite realizar pruebas gratuitas para código abierto proyectos en una variedad de dispositivos reales y navegadores.

Considera usar dos páginas

Algunos sitios (incluidos Amazon e eBay) evitan el problema al solicitar correo electrónico/teléfono y contraseña en dos páginas. Este enfoque también simplifica el experiencia: al usuario solo se le asigna una tarea a la vez.

Lo ideal sería que se implemente con un solo <form>. Usa JavaScript para mostrar inicialmente solo la entrada de correo electrónico y, luego, ocultarla y mostrar la entrada de la contraseña. Si debes obligar al usuario a navegar a una nueva página entre el ingreso de su correo electrónico y el formulario de la segunda página debe tener un elemento de entrada oculto con el de correo electrónico para permitir que los administradores de contraseñas almacenen el valor correcto. Contraseña Estilos de formulario que Chromium comprende proporciona un ejemplo de código.

Ayuda a los usuarios a evitar el reingreso de datos

Puedes ayudar a los navegadores a almacenar datos correctamente y a autocompletar entradas para que los usuarios no necesiten debes recordar ingresar los valores de correo electrónico y contraseña. Esto es particularmente importante en dispositivos móviles y es crucial para las entradas de correo electrónico, que generan porcentajes de abandono altos.

Esto se divide en dos partes:

1. Los atributos autocomplete, name, id y type ayudan a los navegadores a comprender el rol de las entradas para almacenar datos que luego pueden usarse para el autocompletado. Para permitir que los datos se almacenen para el autocompletado, los navegadores modernos también requieren entradas para tener un valor de name o id estable (no se genera de forma aleatoria en cada carga de página o implementación en un sitio) y estar en un <form> con un botón submit.

2. El atributo autocomplete ayuda a los navegadores a autocompletar correctamente las entradas usando y almacenar los datos almacenados.

Para las entradas de correo electrónico, usa autocomplete="username", ya que se reconoce username. por los administradores de contraseñas en navegadores modernos, aunque deberías usar type="email" y te recomendamos que uses id="email" y name="email".

Para las entradas de contraseña, usa los valores de autocomplete y id adecuados para ayudar a los navegadores diferenciar entre contraseñas nuevas y actuales.

Usa autocomplete="new-password" y id="new-password" para una contraseña nueva

• Usa autocomplete="new-password" y id="new-password" para ingresar la contraseña en un registro formulario o la nueva contraseña en un formulario de cambio de contraseña.

Usa autocomplete="current-password" y id="current-password" para una contraseña existente

• Usa autocomplete="current-password" y id="current-password" para ingresar la contraseña en un el formulario de acceso o la entrada de la contraseña anterior del usuario en un formulario de cambio de contraseña. Esto le indica al navegador que deseas que use la contraseña actual que almacenó para el sitio.

Para un formulario de registro:

<input type="password" autocomplete="new-password" id="new-password" …>

Para acceder:

<input type="password" autocomplete="current-password" id="current-password" …>

Cómo admitir administradores de contraseñas

Los diferentes navegadores manejan la función de autocompletar correo electrónico y las sugerencias de contraseña de alguna manera. de forma diferente, pero los efectos son muy los mismos. En Safari 11 y versiones posteriores en computadoras, por ejemplo, se muestra el administrador de contraseñas se utiliza la autenticación (huella digital o reconocimiento facial) si está disponible.

La versión de Chrome para computadoras de escritorio muestra sugerencias de correos electrónicos, el Administrador de contraseñas y autocompleta la contraseña.

Las contraseñas del navegador y los sistemas de autocompletar no son simples. Los algoritmos para adivinar, almacenar y mostrar valores no están estandarizados y varían de plataforma a plataforma. Por ejemplo, según lo señaló Hidde de Varía: "El administrador de contraseñas de Firefox complementa su heurística con una sistema de recetas.

Autocompletar: lo que los desarrolladores web deberían saber, pero no debes tiene mucha más información sobre el uso de name y autocomplete. El archivo HTML especificación enumera los 59 valores posibles.

Habilita el navegador para que sugiera una contraseña segura

Los navegadores modernos usan una heurística para decidir cuándo mostrar la IU del administrador de contraseñas y sugerir una contraseña segura.

A continuación, te mostramos cómo lo hace Safari en una computadora de escritorio.

(La sugerencia de contraseña única está disponible en Safari desde la versión 12.0).

Gracias a los generadores de contraseñas integrados en los navegadores, los usuarios y desarrolladores no necesitan para averiguar qué es una "contraseña segura" en la nube. Como los navegadores pueden almacenar datos las contraseñas y autocompletarlas según sea necesario, no es necesario que los usuarios las recuerden o ingresar contraseñas. Alentar a los usuarios a aprovechar el navegador integrado generadores de contraseñas también significa que es más probable que usen una contraseña segura en tu sitio y es menos probable que reutilices una contraseña que podría vulnerados en otros lugares.

Ayuda a evitar que los usuarios falten entradas accidentalmente

Agrega el atributo required a los campos de correo electrónico y contraseña. Los navegadores modernos solicitan y fijan el foco en los datos faltantes de manera automática. No se requiere JavaScript.

Diseña para dedos y pulgares

Es el tamaño predeterminado del navegador para casi todo lo relacionado con los elementos de entrada. y botones es demasiado pequeño, especialmente en dispositivos móviles. Esto puede parecer obvio, pero un problema común con los formularios de acceso en muchos sitios.

Asegúrate de que las entradas y los botones sean lo suficientemente grandes

El tamaño y el padding predeterminados para las entradas y los botones son demasiado pequeños en las computadoras de escritorio y es aún peor en los dispositivos móviles.

Según la accesibilidad de Android guía el tamaño de objetivo recomendado para los objetos en una pantalla táctil es de 7 mm a 10 mm. Interfaz de Apple las pautas sugieren un tamaño de 48 x 48 px, y el W3C sugiere un CSS de, al menos, 44 x 44. píxeles. Sobre eso agrega (al menos) alrededor de 15 px de relleno a los elementos y botones de entrada para en dispositivos móviles y unos 10 px en las de escritorio. Prueba esto con un dispositivo móvil real y un dedo o pulgar reales. Deberías poder presionar cómodamente cada uno de los entradas y botones.

Los objetivos táctiles no tienen el tamaño adecuado La auditoría de Lighthouse puede ayudarte a automatizar el proceso de detección de elementos de entrada que son demasiado pequeños.

Diseñe el sitio para el pulgar

Busca el objetivo táctil y verás muchas imágenes de los dedos. Sin embargo, en el mundo real, muchos las personas usan el pulgar para interactuar con el teléfono. Los dedos son más grandes que los dedos, y el control es menos preciso. Otra razón por la que se administrará objetivos táctiles de gran tamaño.

Haz que el texto sea lo suficientemente grande

Al igual que con el tamaño y el relleno, el tamaño de fuente predeterminado del navegador para los elementos de entrada y botones es demasiado pequeño, particularmente en dispositivos móviles.

Los navegadores de diferentes plataformas ajustan las fuentes de manera diferente, por lo que es difícil especificar un tamaño de fuente particular que funcione bien en todas partes. Una breve encuesta Los sitios web populares muestran tamaños de 13 a 16 píxeles en computadoras de escritorio: coinciden con el tamaño físico. es un buen mínimo para el texto en dispositivos móviles.

Esto significa que debes usar un tamaño de píxeles más grande en dispositivos móviles: 16px en Chrome para escritorio es bastante legible, pero incluso con buena visión es difícil de leer 16px texto en Chrome para Android. Puedes establecer diferentes tamaños de píxeles de fuente para distintas tamaños de viewports con medios del usuario. 20px funciona directamente en dispositivos móviles, pero deberías probarlo con amigos o colegas con baja visión.

El archivo El documento no usa tamaños de fuente legibles. La auditoría de Lighthouse puede ayudarte a automatizar el proceso de detección de texto pequeño.

Proporciona espacio suficiente entre las entradas

Agrega suficiente margen para que las entradas funcionen bien como objetivos táctiles. En otras palabras, apunta para un margen de aproximadamente un dedo.

Asegúrate de que las entradas se vean claramente

El estilo de borde predeterminado para las entradas hace que sean difíciles de ver. Son casi invisible en algunas plataformas como Chrome para Android.

Además de relleno, agregue un borde: sobre un fondo blanco, una buena regla general es para usar #ccc o un tono más oscuro.

Usa las funciones integradas del navegador para advertir sobre los valores de entrada no válidos.

Los navegadores tienen funciones integradas para realizar validaciones básicas de formularios para entradas con una atributo type. Los navegadores advierten cuando envías un formulario con un valor no válido y enfocarte en la entrada problemática.

Puedes usar el selector CSS de :invalid para destacar los datos no válidos. Usa :not(:placeholder-shown) para evitar seleccionar entradas sin contenido

input[type=email]:not(:placeholder-shown):invalid {
  color: red;
  outline-color: red;
}

Prueba diferentes formas de destacar las entradas con valores no válidos.

Usa JavaScript cuando sea necesario

Activar o desactivar la visualización de la contraseña

Debes agregar un botón de activación de Mostrar contraseña para permitir que los usuarios comprueben el el texto que se ingresaron. Usabilidad se ve afectado cuando los usuarios no pueden ver el texto que ingresaron. Actualmente, no hay una forma integrada de hacer lo siguiente: aunque hay planes para implementación. Deberás necesitas usar JavaScript.

El siguiente código usa un botón de texto para agregar la funcionalidad Mostrar contraseña.

HTML:

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button" aria-label="Show password as plain text. Warning: this will display your password on the screen.">Show password</button>
  <input id="password" name="password" type="password" autocomplete="current-password" required>
</section>

Este es el código CSS para que el botón se vea como texto sin formato:

button#toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  /* Media query isn't shown here. */
  font-size: var(--mobile-font-size);
  font-weight: 300;
  padding: 0;
  /* Display at the top right of the container */
  position: absolute;
  top: 0;
  right: 0;
}

Y el JavaScript para mostrar la contraseña:

const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('toggle-password');

togglePasswordButton.addEventListener('click', togglePassword);

function togglePassword() {
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
    togglePasswordButton.textContent = 'Hide password';
    togglePasswordButton.setAttribute('aria-label',
      'Hide password.');
  } else {
    passwordInput.type = 'password';
    togglePasswordButton.textContent = 'Show password';
    togglePasswordButton.setAttribute('aria-label',
      'Show password as plain text. ' +
      'Warning: this will display your password on the screen.');
  }
}

Este es el resultado final:

Haz que las entradas de contraseña sean accesibles

Usa aria-describedby para definir las reglas de contraseñas con el ID del que describe las restricciones. Los lectores de pantalla proporcionan el texto de la etiqueta, el tipo de entrada (contraseña) y, luego, la descripción.

<input type="password" aria-describedby="password-constraints" …>
<div id="password-constraints">Eight or more characters with a mix of letters, numbers and symbols.</div>

Cuando agregues la funcionalidad Mostrar contraseña, asegúrate de incluir un elemento aria-label para advertir que se mostrará la contraseña. De lo contrario, los usuarios pueden revelar las contraseñas sin querer.

<button id="toggle-password"
        aria-label="Show password as plain text.
                    Warning: this will display your password on the screen.">
  Show password
</button>

Puedes ver ambas funciones de ARIA en acción en el siguiente Glitch:

En Cómo crear formularios accesibles, encontrarás más sugerencias que te ayudarán a que los formularios sean accesibles.

Validarla en tiempo real y antes del envío

Los elementos y atributos del formulario HTML tienen funciones integradas para una validación básica, pero debería usar JavaScript para una validación más robusta cuando ingresan los datos y cuando intentan enviar el formulario.

Paso 5 del formulario de acceso codelab usa la validación de restricciones API (que es amplia compatible) para agregar validación personalizada con una IU integrada en el navegador para enfocar y mostrar mensajes.

Obtén más información: Usa JavaScript para obtener datos en tiempo real más complejos validación.

Analytics y RUM

“Lo que no se puede medir, no se puede mejorar” es particularmente cierto para los registros y los formularios de acceso. Debe establecer objetivos, medir el éxito, mejorar su sitio repetir.

Usa usabilidad de descuento las pruebas útil para probar cambios, pero necesitarás datos del mundo real para realmente comprender la experiencia de los usuarios con los formularios de registro y acceso:

• Estadísticas de páginas: Vistas de páginas de registro y acceso, porcentajes de rebote y salidas.
• Estadísticas de interacción: objetivo embudos (en los que usuarios abandonan tu flujo de acceso?) y eventos (¿qué acciones realizan los usuarios cuando interactúan con sus formularios?)
• Rendimiento del sitio web: centrado en el usuario métricas (son las métricas de registro pueden ser lentos por algún motivo y, de ser así, ¿cuál es la causa?).

También recomendamos que consideres implementar pruebas A/B para probar diferentes enfoques de registro y acceso, y lanzamientos en etapas para validar cambios en un subconjunto de usuarios antes de lanzar cambios para todos los usuarios.

Lineamientos generales

Una IU y UX bien diseñadas pueden reducir el abandono del formulario de acceso:

• No hagas que los usuarios busquen acceder a sus cuentas. Colocar un vínculo al formulario de acceso en la parte superior de la página, con una redacción comprensible, como Acceder, Crear cuenta. o Register.
• Mantén la concentración. Los formularios de registro no son el lugar ideal para distraer a las personas con ofertas y otras funciones del sitio.
• Minimiza la complejidad del registro. Recopilar otros datos del usuario (como direcciones o detalles de la tarjeta de crédito) únicamente cuando los usuarios vean un beneficio claro al proporcionar esa de datos no estructurados.
• Antes de que los usuarios comiencen a completar el formulario de registro, aclara cuál es el valor propuesta. ¿Cómo se benefician del acceso? Proporciona información concreta a los usuarios incentivos para completar el registro.
• Si es posible, permite que los usuarios se identifiquen con un número de teléfono celular en lugar de una dirección de correo electrónico, ya que algunos usuarios podrían no usar el correo electrónico.
• Haz que sea fácil para los usuarios restablecer su contraseña y haz que la sección ¿Olvidaste tu contraseña? contraseña? está claro.
• Vínculo a los documentos de las condiciones del servicio y la política de privacidad (deja en claro a a los usuarios desde el principio cómo proteges sus datos.
• Incluye el logotipo y el nombre de tu organización o empresa en el registro y las páginas de acceso y asegúrate de que el idioma, las fuentes y los estilos coincidan con el resto de tu sitio. Parece que algunos formularios no pertenecen al mismo sitio que otros especialmente si tienen una URL significativamente diferente.

Sigue aprendiendo

• Crea formularios asombrosos
• Prácticas recomendadas para el diseño de formularios para dispositivos móviles
• Controles de formularios más eficaces
• Crea formularios accesibles
• Optimiza el flujo de acceso con la API de Credential Management
• Verifica números de teléfono en la Web con la API de WebOTP

Foto de Meghan Schiereck en Unsplash.