Ayuda a ingresar correctamente y corregir errores directamente en el campo de información.
Progreso de la revisión
Comparar información y presentación en contexto de uso.
Pruebe la operación, cambie el estado y continúe trabajando.
Pruebe escenarios específicos al iniciar, cambiar y completar tareas.
El progreso se guarda automáticamente en este navegador.
GUÍA
Envíe el formulario al que le falta una celda y luego edítelo usando el teclado. Mantenga la etiqueta visible, describa la solicitud antes de ingresarla y coloque el error lo suficientemente cerca como para saber exactamente qué campos deben corregirse.
EJEMPLOS
La casilla denominada “Correo electrónico” y el error “Ingrese el correo electrónico como nombre@vidu.com”; El contenido recién ingresado se conserva para que el usuario edite un carácter.
El marco separa el área de entrada del fondo, manteniendo el contenido y el cursor visibles en ambos temas.
Pruebe el enfoque, el autocompletar y el zoom de texto; El marco no cubre texto ni salta de tamaño.
Ejemplo El borde del cuadro de correo electrónico se vuelve más oscuro cuando se enfoca, sin cambiar la altura de la fila.
La etiqueta existe después de que el usuario escribe; Instrucciones o condiciones de formato adicionales que debe conocer.
Ingrese los datos y luego lea los nombres de las celdas usando el lector de pantalla; La etiqueta y la sugerencia todavía están vinculadas correctamente.
Ejemplo Etiquete "Código de pedido" con la pista "Ejemplo: DZ-2048" a continuación.
Distinga los iconos de ilustración de acciones como mostrar contraseñas o eliminar palabras clave.
Tabulador para celdas y subbotones; la acción tiene un nombre claro y no elimina datos involuntariamente.
Ejemplo Icono de lupa decorativa; El botón Borrar búsqueda recibe el foco y tiene una etiqueta.
La definición de vacío, datos, foco, solo lectura, deshabilitado y error sigue las mismas reglas.
Pasar del error al reingreso; El error se actualiza a tiempo y los datos no se pierden.
Ejemplo El cuadro del código de verificación de solo lectura aún se puede copiar; La celda emisora tiene un estado de espera.
Los tamaños de celda siguen el contexto de densidad, mientras que los tamaños de fuente y las áreas táctiles siguen siendo fáciles de usar.
Coloque celdas compactas en mesas y celdas grandes en móviles; El texto no se corta verticalmente.
Ejemplo El panel de administración tiene un cuadro de filtro ordenado; La pantalla de inicio de sesión utiliza un cuadro más alto.
Utilice únicamente varias líneas cuando el contenido necesite ajustarse, manteniendo el desplazamiento y los límites claros.
Pega el párrafo largo y abre el teclado; el usuario aún ve la ubicación de entrada y el botón de enviar.
Ejemplo La celda receptiva se expande con su contenido hasta su límite y luego se desplaza dentro de la celda.
