Introducción
Completar cuestionarios es una tarea principal de la mayoría de los trabajadores de la salud que usan apps de salud para dispositivos móviles.
El ingreso de datos puede ser difícil y pueden producirse errores. Nuestro objetivo con la biblioteca de captura de datos estructurados (SDC) y los lineamientos de diseño es brindarte las herramientas para mejorar la experiencia del usuario cuando ingresas datos y la calidad de los datos capturados.
Los cuatro temas que se abarcan en esta sección son los siguientes:
- Diseño y navegación
- Instrucciones y preguntas
- Captura de datos
- Validación de datos y mensajes de error
Diseño y navegación
Desplazamiento largo y diseño paginado
![Comparación de diseños con desplazamiento largo y paginados El desplazamiento largo tiene 3 preguntas en una página, mientras que los elementos paginados tienen una pregunta.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/comparinglayouts.png?hl=es-419)
El SDK de FHIR de Android tiene dos opciones de diseño para que elijas entre las siguientes:
- Desplazamiento largo (predeterminado)
- Paginado
Un cuestionario de desplazamiento largo muestra todas las preguntas en una página, y los usuarios navegan a cada pregunta mediante el desplazamiento.
Un cuestionario paginado muestra el contenido en distintas páginas. Las preguntas relacionadas o los campos de entrada se pueden agrupar en una sola página. Los botones Atrás y Siguiente están anclados en la parte inferior de la página para navegar entre páginas.
Aprende a paginar un cuestionario en GitHub.
¿Qué diseño deberías seleccionar?
Cada opción de diseño tiene sus ventajas y desventajas. A continuación, se incluyen algunos atributos de cada tipo de diseño que debes tener en cuenta cuando elijas el diseño que usarás.
Desplazamiento largo | Paginado | |
---|---|---|
Velocidad de navegación | Navegación más rápida | más lento para navegar |
Precisión de la navegación | Navegación menos precisa | Navegación más precisa |
Cómo volver a enfocar la pregunta después de cambiar entre tareas | Difícil de reorientar después de la interrupción | Mayor facilidad para la reorientación después de una interrupción |
Completar el cuestionario digital después de la visita (copiar en papel) | Facilidad para copiar desde papel | Es más difícil cuando se copia desde papel. |
Pantallas pequeñas | Peor para pantallas pequeñas | Ideal para pantallas pequeñas |
Accesibilidad | Peor para la accesibilidad. Difícil de navegar. | Mejor para la accesibilidad. Pantallas discretas que pueden controlarse con lectores de pantalla, texto a voz y otras tecnologías. |
Espacio de instrucciones y explicaciones | Peor por orientación e instrucciones | Más orientación e instrucciones |
Desplazamiento largo
![Cuestionario con números frente al título de la pregunta.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/numberedquestionnaire.png?hl=es-419)
Agrega números a las preguntas para facilitar la navegación en un diseño de una sola página.
![Comparación del tamaño de la fuente del título de la pregunta El desplazamiento largo es de 16 px. El tamaño paginado es de 28 px.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/adjustfont.png?hl=es-419)
Reduce el tamaño de la fuente de los títulos de las preguntas cuando uses desplazamiento largo para que se vea más contenido en la pantalla. Ejemplo: El desplazamiento largo es de 16 px. El tamaño paginado es de 28 px.
Paginación
![Pregunta paginada “¿En qué estado viven?” con selecciones del menú desplegable.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/onequestion.png?hl=es-419)
Los teclados, los menús desplegables y otros componentes ocupan espacio en la página, por lo que debes escribir una pregunta por página.
![Campos de dirección paginados en los que el campo inferior no es visible en la pantalla.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/hidecontent.png?hl=es-419)
El contenido debe estar visible en la mitad superior de la página.
![Varios campos de texto agrupados como una sola pregunta El título de la pregunta es una persona de contacto alternativa, con el nombre, la relación y el número de teléfono como campos de entrada.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/groupcontent.png?hl=es-419)
Ejemplo: Estos tres campos de texto están relacionados con información alternativa de la persona de contacto, por lo que se agrupan en una sola página.
![Hay preguntas no relacionadas en la misma página. La primera pregunta es la cobertura del seguro y la segunda pregunta es la condición de salud previa.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/unrelatedgroup.png?hl=es-419)
Evita agrupar contenido no relacionado en una sola página para evitar confusiones.
Indicador de progreso
El indicador de progreso refleja el progreso logrado en un cuestionario.
Incluye un indicador de progreso en los cuestionarios largos para ayudar a los usuarios a navegar y ver el progreso. Los indicadores de progreso muestran la ubicación dentro de un cuestionario y cuánto queda por completar.
![Indicador de progreso ubicado en la parte superior, debajo del título del cuestionario.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/progress-scroll.png?hl=es-419)
Ubícalo en la parte superior encima de la pregunta y de la línea de anclaje para que siempre sea visible, incluso cuando te desplazas.
![Indicador de progreso ubicado en la parte inferior, sobre los botones de navegación.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/progress-paginated.png?hl=es-419)
Se puede colocar en la parte inferior, arriba de los botones Atrás y Siguiente. Con este diseño, también puedes mostrar en qué página se encuentra el usuario.
Botones de navegación
Los botones de navegación (atrás, siguiente) están anclados en la parte inferior del cuestionario. En un desplazamiento infinito o en la última página de un cuestionario paginado, el botón Siguiente se denomina Enviar.
Mantén los botones en una ubicación coherente y siempre usa botones activos etiquetados con su acción, como Atrás y Siguiente.
![Los botones de navegación están activos. Botón Siguiente con relleno azul.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/active-buttons.png?hl=es-419)
Siempre muestran los botones activos, incluso si los formularios están incompletos. Cuando presiones Siguiente, se mostrará un diálogo emergente con instrucciones para completar los campos faltantes o los errores de validación.
![El botón Siguiente está inactivo. Botón Siguiente con relleno gris.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/inactive-buttons.png?hl=es-419)
Los botones inactivos dificultan que los usuarios sepan cómo solucionar el problema.
![El botón Siguiente solo tiene un ícono de flecha y ninguna descripción de texto.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/icon-buttons.png?hl=es-419)
Evita los botones que solo contienen íconos. Siempre etiqueta los botones con una acción descriptiva.
Instrucciones y preguntas
![Cuestionario paginado con anotaciones que muestra componentes de instrucciones y preguntas.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/question-banner.png?hl=es-419)
- Título del cuestionario.
- Indicador de progreso.
- Encabezado del grupo.
- Título de la pregunta.
- Instrucciones.
- Campo de entrada.
- Formato de entrada.
- Campos obligatorios
- Ayuda.
Encabezado del grupo
El encabezado del grupo es un encabezado de texto que se muestra sobre los títulos de las preguntas.
Usa el encabezado de grupo para agrupar preguntas similares. Solo usa el encabezado de grupo cuando agregue información útil.
![El encabezado del grupo es Historial de pacientes.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/group-short.png?hl=es-419)
Usa un título corto para agrupar preguntas similares. Ejemplo: Se agrupan todas las preguntas relacionadas con los antecedentes de los pacientes.
![El encabezado de grupo es información personal y de estilo de vida.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/group-long.png?hl=es-419)
Evita los títulos complejos o largos que excedan una línea.
Título de la pregunta
El título de la pregunta describe de forma concisa la información que se solicita. Los títulos de las preguntas tienen el tamaño de fuente más grande en la página para atraer la atención del usuario a la pregunta.
Todas las páginas o preguntas deben tener un título de pregunta. Los títulos de las preguntas deben ser breves o expresarse en forma de pregunta.
![El título de la pregunta es la fecha de nacimiento.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/title-short.png?hl=es-419)
Los títulos cortos facilitan la lectura para los usuarios.
![El título de la pregunta es ¿Cuál es tu fecha de nacimiento? ¿En qué ciudad naciste?](https://developers.google.cn/static/open-health-stack/design/images/data-capture/title-long.png?hl=es-419)
Evita las preguntas demasiado largas o anida dos preguntas juntas.
![Sin título de pregunta.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/title-none.png?hl=es-419)
Incluye siempre el título de una pregunta para que los usuarios sepan con más facilidad qué información deben ingresar.
Instrucciones
Instrucciones es un campo de texto opcional que se muestra debajo del título de la pregunta.
Usa el campo de instructions para explicar las instrucciones relevantes, como si la pregunta es obligatoria, cuántas selecciones se pueden realizar (una o varias) y lo que los usuarios deben hacer si no pueden completar toda la información o responder la pregunta.
![Instrucciones: Selecciona una opción. Pregunta obligatoria.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/instructions-required.png?hl=es-419)
Usa el campo de instrucciones para informar si una pregunta es obligatoria y cuántas selecciones se pueden realizar.
![Instrucciones: Si no se conoce la fecha de nacimiento exacta, selecciona la casilla de verificación correspondiente.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/instructions-edge.png?hl=es-419)
Usa las instrucciones para que los usuarios sepan qué hacer si se encuentran con una situación en la que no pueden completar todos los campos.
![Instrucciones: En caso de una situación de emergencia, se usará el contacto alternativo y podría ser un familiar (p.ej., pareja, madre o hermano).](https://developers.google.cn/static/open-health-stack/design/images/data-capture/instructions-definitions.png?hl=es-419)
Usa las instrucciones para proporcionar contexto adicional o definiciones para los términos usados en el título de la pregunta.
Texto de la etiqueta
El texto de la etiqueta informa a los usuarios sobre la información que se solicita para un campo de texto o un menú desplegable. Cuando se selecciona el campo, el texto de la etiqueta se mueve del centro del campo de texto a la parte superior.
Cada campo de texto y cuadro desplegable debe tener una etiqueta. El texto de la etiqueta debe ser corto, claro y completamente visible.
![Texto de la etiqueta: Nombre.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/label-short.png?hl=es-419)
El texto de las etiquetas debe ser corto, claro y completamente visible.
![Texto de etiqueta: Ingresa el nombre del cliente.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/label-long.png?hl=es-419)
El texto de la etiqueta no debe ser demasiado largo, truncado ni incluir varias líneas.
![No hay texto de etiqueta.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/label-none.png?hl=es-419)
Siempre etiqueta el campo de texto para que los usuarios sepan qué información ingresar.
Formato de entrada
EntryFormat se muestra debajo del campo de texto para informar a los usuarios sobre el formato específico en el que se deben ingresar los datos. Los mensajes de error se mostrarán en el campo EntryFormat y reemplazarán las instrucciones existentes de EntryFormat.
Usa EntryFormat para fechas, números de teléfono, unidades y números enteros.
![Formato de fecha: dd/mm/aaaa.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/entry-do.png?hl=es-419)
Muestra el formato de fecha debajo del campo y agrega una frase descriptiva.
![No hay formato de fecha.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/entry-none.png?hl=es-419)
Si no se muestran los formatos de datos, es posible que los datos se ingresen de forma incorrecta.
![Debajo del campo de texto Frecuencia cardíaca, el formato de entrada muestra: Rango normal: 60-100 ppm. Debajo del campo de texto Saturación de oxígeno en sangre, el
formato de entrada muestra: Rango normal: 95-100%.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/entry-range.png?hl=es-419)
Cuando ingreses rangos médicos, proporciona ejemplos del rango normal. Esto puede ayudar a los usuarios a detectar errores o números que están fuera de rango.
Campos obligatorios
Los campos obligatorios indican que un usuario debe completar el campo y que no puede avanzar hasta que este se complete.
Para indicar que un campo es obligatorio, muestra un asterisco (*) al final del título de la pregunta. Incluye la "pregunta obligatoria" en el campo de las instrucciones, ya que no es evidente para todos lo que indica un asterisco (*). Si no hay un título para la pregunta, muestra el asterisco (*) en el texto de la etiqueta.
![Un asterisco después del título de la pregunta y la pregunta obligatoria en las instrucciones que aparecen a continuación](https://developers.google.cn/static/open-health-stack/design/images/data-capture/required-explanation.png?hl=es-419)
Muestra que el campo es obligatorio con un asterisco (*) y, además, incluye instrucciones escritas que indiquen "pregunta obligatoria". Muchas personas no están familiarizadas con el significado del asterisco(*) y se beneficiarían de esta explicación.
![Un asterisco después del título de la pregunta, pero sin una descripción escrita que explique lo que significa el asterisco](https://developers.google.cn/static/open-health-stack/design/images/data-capture/required-noexplanation.png?hl=es-419)
Evita mostrar solo el asterisco (*) sin una descripción escrita de lo que significa.
![En las instrucciones que aparecen a continuación, se muestra el asterisco que aparece después del título de la pregunta y de la pregunta obligatoria.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/required-localize.png?hl=es-419)
Usa los términos que los usuarios conozcan más. Ejemplo: El término más conocido podría ser "obligatorio" y se usa en algunos países en lugar de "obligatorio".
![Sin asterisco. En las instrucciones, se muestra una pregunta opcional.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/required-optional.png?hl=es-419)
Si la mayoría de las preguntas son obligatorias, indica cuáles son opcionales.
![Asterisco después del texto de la etiqueta. Una pregunta obligatoria que se muestra en el campo de formato de entrada.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/required-label.png?hl=es-419)
Si no hay un título para la pregunta, muestra el asterisco en el texto de la etiqueta.
Ayuda
Aparecerá un ícono de ayuda junto al título de la pregunta. Cuando lo presiones, aparecerá un cuadro de información de ayuda con datos adicionales. Al volver a presionar el ícono, se cierra el cuadro de información de ayuda.
Éste es un componente opcional. Solo debe usarse cuando sea útil para mostrar información adicional que no sea necesario que esté siempre visible.
![Ayuda: La vacuna estacional contra la gripe también se llama vacunación contra la gripe.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/help-do.png?hl=es-419)
Usa la ayuda para obtener información que los usuarios podrían necesitar ver solo una vez o que proporcione información adicional.
![Ayuda: Selecciona una opción.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/help-dont.png?hl=es-419)
Evita ocultar las instrucciones dentro del cuadro de ayuda, que debería ser visible para todos.
Captura de datos
![Ocho componentes de captura de datos: campos de texto, selector de fecha, menú desplegable, control deslizante, opción única, opción booleana, opción múltiple y opción abierta.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/datacapture-banner.png?hl=es-419)
¿Cuándo usar qué componente?
Tipo de entrada de datos | Elección booleana | Opción única | Opción múltiple | Abrir elección | Lista desplegable | Selector de fecha | Campo de texto | Control deslizante | Autocompletar |
---|---|---|---|---|---|---|---|---|---|
Selecciona Sí o No | |||||||||
Seleccionar una opción | precaución |
||||||||
Seleccionar varias opciones | precaución |
||||||||
Texto | |||||||||
Fechas | |||||||||
Números | precaución |
Campos de texto
Los campos de texto indican que los usuarios pueden ingresar información.
Usa campos de texto cuando alguien necesite ingresar texto en el cuestionario, como un nombre, un número de teléfono o una dirección. Limita la entrada de datos que requiera una entrada de texto (teclado) cuando se pueda usar una selección prepropagada (opción múltiple o única).
Más información sobre los campos de texto en material.io
![Título de la pregunta: Registra a una persona nueva Campo de texto 1: nombre. Campo de texto 2: número de teléfono.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/text-do.png?hl=es-419)
Usa campos de texto para ingresar datos que requieran escribir palabras o números únicos.
![Título de la pregunta: ¿Cuál es el motivo de la visita? Campo de texto: describe el motivo](https://developers.google.cn/static/open-health-stack/design/images/data-capture/text-dont.png?hl=es-419)
Evita usar respuestas de texto libre cuando, en su lugar, puedan ser una selección múltiple, un menú desplegable o una opción única.
Opción única y elección booleana
La opción única y la elección booleana son controles de selección que aparecen como botones de selección cuando se les pide a los usuarios que seleccionen una opción.
Usa la boolean choice cuando haya una opción binaria de “Sí” o “No”. De lo contrario, utiliza el componente de opción única. Si hay alrededor de 10 opciones en la lista, usa un menú desplegable en lugar de una opción única. Un menú desplegable es más denso y fácil de navegar cuando hay muchas opciones.
![Título de la pregunta: ¿Es su primera visita? Las opciones de selección booleana son sí y no.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/singlechoice-boolean.png?hl=es-419)
Usa la opción booleana cuando las opciones sean “sí” y “no”.
![Título de la pregunta: ¿Cuál es el nivel más alto de educación alcanzado?
Estas son las opciones de opción única: 1. No sabe 2. Sin educación
3. escuela primaria 4. escuela secundaria.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/singlechoice-single.png?hl=es-419)
Usa la opción única cuando los usuarios puedan seleccionar una opción de la lista.
![Lista de opción única que muestra una lista muy larga de estados. Los estados 23 a 27 son visibles.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/singlechoice-dont.png?hl=es-419)
Evita la opción única para listas muy largas (más de 10). En su lugar, usa un menú desplegable.
Selector de fecha
El selector de fecha permite a los usuarios ingresar fechas tanto con el selector de fecha del calendario como con el teclado. El selector de fecha del calendario se activa cuando se presiona el ícono de calendario.
Usa el selector de fecha del calendario solo para fechas cercanas a la fecha de hoy, como el último período menstrual o la próxima visita. De lo contrario, prioriza la entrada de teclado para fechas como la fecha de nacimiento.
![Fecha de nacimiento La entrada de fecha del teclado está activa. Ícono de calendario a la derecha del cuadro de campo de texto. Está marcada la casilla de verificación que indica que la fecha es aproximada.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/datepicker-do.png?hl=es-419)
Para ingresar fechas, habilita la entrada con el teclado (cuando se presiona el cuadro de texto) y el selector de fecha del calendario (cuando se presiona el ícono).
![Vista de calendario del selector de fecha](https://developers.google.cn/static/open-health-stack/design/images/data-capture/datepicker-dont.png?hl=es-419)
Evita habilitar el selector de fecha de calendario como el único método de entrada para las fechas de nacimiento. Navegar por el mes y el año es difícil.
Lista desplegable
Los menús desplegables permiten que los usuarios seleccionen entre varias opciones. A medida que el usuario comienza a escribir, las opciones se filtran según lo que ingresa. Esto puede ayudar a los usuarios a encontrar rápidamente la opción correcta en una lista larga.
Los menús desplegables son una excelente alternativa a las opciones únicas cuando la lista de opciones es muy larga (más de 10 opciones), ya que ocupan menos espacio.
![Menú desplegable de los estados de la lista de estados (A-F).](https://developers.google.cn/static/open-health-stack/design/images/data-capture/dropdown-do.png?hl=es-419)
Usa un menú desplegable cuando selecciones una opción en una lista muy larga, como un estado o una ciudad.
![Menú desplegable para la edad, con los números del uno al seis.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/dropdown-dont.png?hl=es-419)
Evita usar un menú desplegable cuando sea más fácil escribir el contenido en lugar de desplazarte por todas las opciones, como la edad.
Opción múltiple
Las opciones múltiples son controles de selección que aparecen como casillas de verificación cuando los usuarios pueden realizar varias secciones a partir de una lista de opciones.
Usa la opción múltiple cuando los usuarios solo puedan seleccionar opciones de una lista predeterminada. Si los usuarios también pueden agregar su propia respuesta gratuita, usa el componente open choice en su lugar. En el campo de las instructions, escribe “Selecciona todas las opciones que correspondan” para que los usuarios sepan que pueden seleccionar varias opciones.
![Título de la pregunta: ¿Cuál es el motivo de nuestra visita de hoy? Se muestran cuatro casillas de verificación y opciones, una en cada fila.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/multiple-do.png?hl=es-419)
El aspecto predeterminado es un contenedor alrededor de las casillas de verificación para que el área táctil sea evidente.
![Título de la pregunta: ¿Cuál es el motivo de nuestra visita de hoy? Se muestran seis casillas de verificación y opciones, dos en cada fila. Parte del texto está cortado para dos de las opciones.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/multiple-dont.png?hl=es-419)
Evita mostrar varias opciones por fila, ya que el texto puede recortarse debido a la variación en el tamaño de la pantalla del teléfono y el texto.
Abrir elección
La opción abierta es similar a la opción múltiple, pero agrega la capacidad del usuario de seleccionar Otro y escribir texto libre.
Usa open choice cuando haya una lista predefinida de opciones, pero los usuarios también pueden agregar opciones adicionales. Usa Open choice cuando se conocen la mayoría de las opciones, pero preveas que algunos usuarios seleccionarán Other porque no se aplica ninguna de las opciones proporcionadas.
![Se seleccionó la opción Otro. El campo de texto para agregar texto libre está activo.
El teclado está visible.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/openchoice-do.png?hl=es-419)
Úsalo cuando sea importante que se recopilen datos precisos y no se aplique ninguna de las opciones predefinidas. Ejemplo: Profesión.
![Título de la pregunta: ¿Algo más para agregar? Tres opciones: Sí, No y Otro. Se seleccionó la opción Otro. El campo de texto para agregar texto libre está activo.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/openchoice-dont.png?hl=es-419)
Evita usar esta opción si la mayoría de las respuestas requieren seleccionar Otro. En ese caso, usa un campo de texto o un campo de párrafo.
Control deslizante
Los controles deslizantes permiten que los usuarios seleccionen un rango de valores. El control deslizante del SDK de FHIR de Android es un control deslizante discreto. Un control deslizante discreto permite a los usuarios seleccionar un valor específico de un rango predeterminado. Las comillas simples se pueden usar para indicar los valores disponibles. Evita usar el control deslizante para ingresar datos numéricos. En su lugar, usa un campo de texto o un menú desplegable.
Más información sobre los controles deslizantes de material.io
![Título de la pregunta: ¿Cuántos hijos tiene el cliente? Se selecciona un control deslizante con el número cuatro.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/slider-dont.png?hl=es-419)
Evita usar el control deslizante para valores específicos cuando el rango sea grande. Usa campos de texto con entrada de teclado en su lugar.
Validación de datos y errores
Validación de datos
Las validaciones de datos limitan el tipo de datos o los valores que se pueden ingresar en un campo de texto. La validación de datos puede mejorar la calidad de los datos recopilados.
Usa el campo EntryFormat para mostrar las restricciones de formato o valor. Muestra mensajes de error significativos de la validación de datos en línea y de inmediato para que los usuarios puedan corregir el error.
![Texto de la etiqueta: Número de teléfono. Formato de entrada: 8 dígitos.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/validation-show.png?hl=es-419)
Muestra las restricciones de validación de datos por adelantado para que los usuarios sepan cómo ingresar los datos.
![Texto de la etiqueta: Número de teléfono. Formato de entrada: ninguno](https://developers.google.cn/static/open-health-stack/design/images/data-capture/validation-hide.png?hl=es-419)
Si no se muestra la cantidad de dígitos que debe tener el número de teléfono, es probable que los usuarios encuentren un error y tarden más en completarse.
![La fecha ingresada es 22/33/4444. Mensaje de error: Formato de fecha incorrecto. El formato debe ser dd/mm/aaaa.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/validation-timely.png?hl=es-419)
Se muestran los errores de validación de datos significativos inmediatamente después de completar el campo. Los mensajes de error reemplazan el texto de formato de entrada existente.
![Diálogo. Corrige los siguientes errores. 1. número de teléfono. 2. Fecha de nacimiento.
Botón 1: Enviar de todos modos. Botón 2: Corregir errores.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/validation-dontwait.png?hl=es-419)
No esperes hasta que el usuario presione "Enviar" para mostrar errores de validación por primera vez.
Errores
Los mensajes de error alertan a los usuarios cuando algo sale mal y comunican cómo solucionarlo.
Usa colores, iconografía y texto para comunicar errores.
Más información sobre los mensajes de error en material.io
![El mensaje de error es "Pregunta obligatoria. Selecciona una opción".](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-howtofix.png?hl=es-419)
Explica por qué hay un error (pregunta obligatoria) y qué se puede hacer para corregirlo (selecciona una).
![El mensaje de error es "Error".](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-noexplanation.png?hl=es-419)
Un mensaje de error que solo dice “error” no es útil para los usuarios para saber cómo corregir el error.
![Fecha de nacimiento La fecha ingresada es 22/33/4444. El mensaje de error tiene un formato de fecha incorrecto. El formato debe ser: dd/mm/aaaa.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-noblame.png?hl=es-419)
Ejemplo: “Formato de fecha incorrecto. El formato debe ser dd/mm/aaaa".
![Fecha de nacimiento La fecha ingresada es 22/33/4444. El mensaje de error es "Ingresaste un formato de fecha incorrecto".](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-dontblame.png?hl=es-419)
Evita culpar al usuario con mensajes de error que incluyan "tú". Ejemplo: "Ingresaste el formato de fecha incorrecto".
![Mensaje de error con un ícono delante del texto rojo que muestra “Pregunta obligatoria. Selecciona una o más opciones". Los contenedores con casillas de verificación tienen un
contorno rojo.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-combo.png?hl=es-419)
Usa colores, iconografía y texto para informar a los usuarios que hay un error.
![No hay ningún mensaje o ícono de error. Los contenedores con casillas de verificación tienen un contorno rojo,
que es el único indicador de que existe un error.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-onlycolor.png?hl=es-419)
Para brindar compatibilidad con discapacidades visuales comunes, como el daltonismo, evita confiar únicamente en el color para comunicar un error.
![Los contenedores con casillas de verificación tienen un contorno rojo y un ícono de error que se muestra
detrás de cada contenedor. 3 íconos son visibles.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-icons.png?hl=es-419)
Un ícono suele ser suficiente. No te excedas en el uso de íconos para comunicar el error.