Introducción
Completar cuestionarios es una tarea fundamental para la mayoría de los trabajadores de la salud que usan apps de salud móviles.
La entrada de datos puede ser difícil y pueden ocurrir errores. Nuestro objetivo con la biblioteca de Structured Data Capture (SDC) y los lineamientos de diseño es permitirte mejorar la experiencia del usuario en el ingreso de datos y la calidad de los datos capturados.
Los cuatro temas que se abordan en esta sección son los siguientes:
- Diseño y navegación
- Preguntas e instrucciones
- Captura de datos
- Validación de datos y mensajes de error
Diseño y navegación
Diseño paginado y de desplazamiento largo
El SDK de FHIR de Android tiene dos opciones de diseño entre las que puedes elegir:
- Desplazamiento largo (predeterminado)
- Paginado
Un cuestionario de desplazamiento largo muestra todas las preguntas en una sola página, y los usuarios navegan a cada pregunta desplazándose.
Un cuestionario paginado muestra el contenido en páginas separadas. Las preguntas o los campos de entrada relacionados 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 las 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 a la hora de elegir qué diseño usar.
| Desplazamiento largo | Paginado | |
|---|---|---|
| Velocidad de navegación | Navegación más rápida | Navegación más lenta |
| Precisión de la navegación | Navegación menos precisa | Navegación más precisa |
| Cómo volver a enfocarse en la pregunta después de cambiar de tarea | Es difícil reorientarse después de una interrupción | Mayor facilidad para reorientarse después de una interrupción |
| Completar el cuestionario digital después de la visita (copiarlo del papel) | Más fácil cuando se copia de papel | Más difícil cuando se copia de papel |
| Pantallas pequeñas | Peor para pantallas pequeñas | Mejor para pantallas pequeñas |
| Accesibilidad | Es peor para la accesibilidad. Es difícil navegar. | Mejor para la accesibilidad. Pantallas discretas que pueden ser controladas por lectores de pantalla, texto a voz y otras tecnologías. |
| Espacio para instrucciones y explicaciones | Peor para la orientación y las instrucciones | Mejor para la orientación y las instrucciones |
Desplazamiento largo
Numera las preguntas para facilitar la navegación en un diseño de una sola página.
Reduce el tamaño de la fuente de los títulos de las preguntas cuando se use el desplazamiento largo para que se vea más contenido en la pantalla. Ejemplo: El desplazamiento largo es de 16 px. El paginado es de 28 px.
Paginación
Los teclados, los menús desplegables y otros componentes ocupan espacio en la página, por lo que debes intentar incluir una pregunta por página.
El contenido debe ser visible en la mitad superior de la página.
Ejemplo: Estos tres campos de texto se relacionan con la información de una persona de contacto alternativa, por lo que se agrupan en una sola página.
Para evitar confusiones, no agrupes contenido no relacionado en una misma página.
Indicador de progreso
El indicador de progreso refleja el progreso realizado en un cuestionario.
Incluye un indicador de progreso en los cuestionarios largos para ayudar a los usuarios a navegar y ver su progreso. Los indicadores de progreso muestran la ubicación dentro de un cuestionario y cuánto falta para completarlo.
Coloca el elemento en la parte superior, sobre la pregunta, y anclado para que siempre esté visible, incluso cuando se desplace.
Se puede colocar en la parte inferior, sobre los botones de atrás y siguiente. Con este diseño, también puedes mostrar en qué página se encuentra el usuario.
Navigation Buttons
Los botones de navegación (atrás, siguiente) están anclados en la parte inferior del cuestionario. En un cuestionario de desplazamiento infinito o en la última página de un cuestionario paginado, el botón siguiente se etiqueta como Enviar.
Mantén los botones en una ubicación coherente y usa siempre botones activos que estén etiquetados con su acción, como atrás y siguiente.
Siempre muestra los botones activos, incluso si los formularios están incompletos. Cuando se presiona Siguiente, se muestra un diálogo emergente con instrucciones para completar los campos faltantes o corregir los errores de validación.
Los botones inactivos dificultan que los usuarios sepan cómo solucionar el problema.
Evita los botones solo con íconos. Siempre etiqueta los botones con una acción descriptiva.
Preguntas e instrucciones
- Título del cuestionario.
- Indicador de progreso.
- Es el 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.
Usa un título corto para agrupar preguntas similares. Ejemplo: Se agrupan todas las preguntas relacionadas con el historial del paciente.
Evita los títulos complejos o largos que ocupen más de una línea.
Título de la pregunta
El título de la pregunta describe de forma concisa qué información se solicita. Los títulos de las preguntas tienen el tamaño de fuente más grande de la página para atraer la atención del usuario hacia la pregunta.
Cada página o pregunta debe tener un título de pregunta. Mantén los títulos de las preguntas cortos o formula la pregunta.
Los títulos cortos facilitan la lectura a los usuarios.
Evita las preguntas muy largas o anidar dos preguntas juntas.
Siempre incluye un título de pregunta para que los usuarios sepan más fácilmente 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 instrucciones para explicar las instrucciones pertinentes, como si la pregunta es obligatoria, cuántas selecciones se pueden hacer (una o muchas) y qué deben hacer los usuarios si no pueden completar toda la información o responder la pregunta.
Usa el campo de instrucciones para informar si se requiere una pregunta y cuántas selecciones se pueden hacer.
Usa instrucciones para que los usuarios sepan qué hacer si se encuentran con una situación como no poder completar todos los campos.
Usa instrucciones para proporcionar contexto adicional o definiciones de los términos que se usan 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 en un campo de texto o un menú desplegable. Cuando se selecciona el campo, el texto de la etiqueta se mueve desde el medio del campo de texto hacia la parte superior.
Cada campo de texto y menú desplegable debe tener una etiqueta. El texto de la etiqueta debe ser corto, claro y completamente visible.
El texto de la etiqueta debe ser corto, claro y completamente visible.
El texto de la etiqueta no debe ser demasiado largo, estar truncado ni ocupar varias líneas.
Siempre etiqueta el campo de texto para que los usuarios sepan qué información deben 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.
Muestra el formato de fecha debajo del campo e incluye una frase descriptiva.
No mostrar los formatos de datos puede provocar que los datos se ingresen de forma incorrecta.
Cuando se ingresen rangos médicos, proporciona ejemplos del rango normal. Esto puede ayudar a los usuarios a detectar errores o números fuera de rango.
Campos obligatorios
Los campos obligatorios indican que un usuario debe completar el campo y no puede avanzar hasta que lo haga.
Para indicar que un campo es obligatorio, muestra un asterisco (*) al final del título de la pregunta. Incluye "pregunta obligatoria" en el campo de instrucciones, ya que no es obvio para todos lo que indica un asterisco (*). Si no hay un título de pregunta, muestra el asterisco (*) en el texto de la etiqueta.
Muestra que el campo es obligatorio con un asterisco (*) y agrega instrucciones escritas que indiquen "pregunta obligatoria". Muchas personas no saben qué significa el asterisco(*) y se beneficiarían con la explicación.
Evita mostrar solo el asterisco (*) sin ninguna descripción escrita de lo que significa.
Usa los términos que sean más familiares para tus usuarios. Ejemplo: "Obligatorio" podría ser el término más familiar y usarse en algunos países en lugar de "Requerido".
Si la mayoría de las preguntas son obligatorias, indica cuáles son opcionales.
Si no hay un título de pregunta, muestra el asterisco en el texto de la etiqueta.
Ayuda
Se muestra un ícono de ayuda junto al título de la pregunta. Cuando se presiona el ícono, aparece un cuadro de información de ayuda con datos adicionales. Si vuelves a presionar el ícono, se cerrará el cuadro de información de ayuda.
Éste es un componente opcional. Solo se usa cuando es útil mostrar información adicional que no siempre debe estar visible.
Usa la ayuda para brindar información que los usuarios solo necesiten ver una vez o que proporcione información adicional.
Evita ocultar las instrucciones dentro del cuadro de ayuda que deberían ser visibles para todos.
Captura de datos
¿Cuándo usar cada componente?
| Tipo de entrada de datos | Elección booleana | Opción única | Opción múltiple | Opción abierta | Lista desplegable | Selector de fecha | Campo de texto | Control deslizante | Autocompletar |
|---|---|---|---|---|---|---|---|---|---|
| Selecciona Sí o No | |||||||||
| Seleccionar una opción | precaución |
||||||||
| Selecciona varias opciones | precaución |
||||||||
| Texto | |||||||||
| Fechas | |||||||||
| Numbers | 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 requiere la entrada de texto (teclado) cuando se puede usar una selección completada previamente (opción múltiple o única).
Obtén más información sobre los campos de texto en material.io
Usa campos de texto para la entrada de datos que requieran escribir palabras o números únicos.
Evita usar respuestas de texto libre cuando se podría usar una selección de opción única, una selección de opción múltiple o un menú desplegable.
Selección única y selección booleana
Opción única y opción booleana son controles de selección que aparecen como botones de selección cuando se les pide a los usuarios que elijan una opción.
Usa opción booleana cuando haya una opción binaria de "Sí" o "No". De lo contrario, usa el componente de opción única. Si hay más de 10 opciones en la lista, usa un menú desplegable en lugar de una sola opción. Un menú desplegable es más compacto y fácil de navegar cuando hay muchas opciones.
Usa la opción booleana cuando las opciones sean "sí" y "no".
Usa la opción de selección única cuando los usuarios puedan seleccionar una opción de la lista.
Evita la selecció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 a través del selector de fecha del calendario y 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 las fechas cercanas a la fecha actual, como la última menstruación o la próxima visita. De lo contrario, prioriza la entrada con el teclado para fechas como la de nacimiento.
Para ingresar fechas, habilita la entrada con teclado (presionando el cuadro de texto) y el selector de fecha del calendario (presionando el ícono).
Evita habilitar el selector de fecha del calendario como el único método de entrada para las fechas de nacimiento. Es difícil navegar al mes y al año.
Lista desplegable
Los menús desplegables permiten que los usuarios seleccionen una opción entre varias. A medida que el usuario comienza a escribir, las opciones se filtran según lo que se ingresa. Esto puede ayudar a los usuarios a encontrar rápidamente la opción correcta en una lista grande.
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.
Usa un menú desplegable cuando selecciones una opción en una lista muy larga de opciones, como seleccionar un estado o una ciudad.
Evita usar un menú desplegable cuando sería más fácil escribir el contenido que desplazarse por todas las opciones, como la edad.
Opción múltiple
Opción múltiple es un control de selección que aparece como casillas de verificación cuando los usuarios pueden realizar varias selecciones de una lista de opciones.
Usa opción múltiple cuando los usuarios solo puedan seleccionar entre una lista predeterminada de opciones. Si los usuarios también pueden agregar su propia respuesta libre, usa el componente de opción abierta. En el campo instrucciones, escribe "Selecciona todas las opciones que correspondan" para que los usuarios sepan que pueden seleccionar varias opciones.
La apariencia predeterminada es un contenedor alrededor de las casillas de verificación para que el área en la que se puede presionar sea obvia.
Evita mostrar varias opciones por fila, ya que, debido a la variación en el tamaño de la pantalla y el texto del teléfono, el texto puede cortarse.
Opción abierta
La opción Abierta es similar a la de opción múltiple, pero agrega la capacidad de que el usuario seleccione Otro y escriba texto libre.
Usa opción abierta cuando haya una lista de opciones preestablecida, pero los usuarios también puedan agregar opciones adicionales. Usa opción abierta cuando conozcas la mayoría de las opciones, pero preveas que algunos usuarios seleccionarán Otro porque no se aplica ninguna de las opciones proporcionadas.
Úsala cuando sea importante recopilar datos precisos y no se aplique ninguna de las opciones predefinidas. Ejemplo: occupation.
Evita usar esta opción si la mayoría de las respuestas requerirían 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 elementos de un rango de valores. El control deslizante del SDK de FHIR de Android es discreto. Un control deslizante discreto permite a los usuarios seleccionar un valor específico de un rango predeterminado. Las marcas de verificación 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.
Obtén más información sobre los controles deslizantes en material.io
Evita usar el control deslizante para valores específicos cuando haya un rango grande. En su lugar, usa campos de texto con entrada de teclado.
Validación de datos y errores
Validación de datos
Las validaciones de datos restringen 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 restricciones de formato o valor. Muestra mensajes de error de validación de datos significativos de forma intercalada y de inmediato para que los usuarios puedan corregir el error.
Muestra las restricciones de validación de datos por adelantado para que los usuarios sepan cómo ingresar los datos.
Si no se muestra cuántos dígitos debe tener el número de teléfono, es probable que los usuarios encuentren un error y tarden más en completar el proceso.
Muestra errores de validación de datos significativos inmediatamente después de completar el campo. Los mensajes de error reemplazan el texto del formato de entrada existente.
No esperes hasta que el usuario presione "Enviar" para mostrar los errores de validación por primera vez.
Errores
Los mensajes de error alertan a los usuarios cuando algo sale mal y les indican cómo solucionar el problema.
Usa colores, íconos y texto para comunicar errores.
Obtén más información sobre los mensajes de error en material.io
Explica por qué hay un error (pregunta obligatoria) y qué se puede hacer para corregirlo (selecciona una opción).
Un mensaje de error que solo dice "error" no ayuda a los usuarios a saber cómo solucionar el problema.
Ejemplo: "El formato de fecha es incorrecto. El formato debe ser dd/mm/aaaa".
Evita culpar al usuario con mensajes de error que incluyan "tú". Ejemplo: "Ingresaste el formato de fecha incorrecto".
Usa color, iconografía y texto para informar a los usuarios que hay un error.
Para admitir deficiencias visuales comunes, como el daltonismo rojo-verde, evita basarte solo en el color para comunicar un error.
Un ícono suele ser suficiente. No abuses del uso de íconos para comunicar el error.