2.3 Creación de interfaces de usuario interactivas
Una interfaz de usuario interactiva bien diseñada es fundamental para la facilidad de uso y la eficacia de una aplicación de base de datos de FileMaker. En este tutorial, nos centraremos en cómo puede crear elementos interactivos como elementos de navegación (menús y botones), diálogos personalizados y ventanas emergentes para mejorar la experiencia del usuario en su base de datos. Además, cubriremos algunos consejos probados para mejorar la usabilidad de sus interfaces de usuario.
Índice
- 2.3 Creación de interfaces de usuario interactivas
- Creación de elementos de navegación (menús, botones)
- Menú y navegación personalizados en gFM-Business
- Diálogos y ventanas emergentes definidos por el usuario
- Consejos para mejorar la facilidad de uso
- gFM-Business Open Source FileMaker Basis ERP El curso intensivo de software
- Preguntas frecuentes sobre interfaces de usuario interactivas
Antes de empezar a crear elementos de navegación, es importante pensar en cómo quieres que los usuarios naveguen por tu aplicación. Piensa qué diseños o funciones se utilizan con frecuencia y cómo puedes hacer que acceder a ellos sea lo más fácil posible.
- Menú de navegación principalConsidere si tiene sentido un menú de navegación central visible en todas las páginas. Este menú podría contener enlaces a las áreas más importantes de la aplicación, como "Página de inicio", "Clientes", "Pedidos" e "Informes".
- Navegación contextualPiense en añadir elementos de navegación contextuales que cambien en función de la presentación o de los datos actuales. Por ejemplo, puedes añadir botones que solo aparezcan cuando se cumplan determinadas condiciones, como mostrar un botón "Editar" solo para los registros existentes.
Paso 2: Crear botones
Los botones son un elemento esencial de cualquier interfaz de usuario y permiten a los usuarios realizar determinadas acciones, como abrir un diseño diferente, ejecutar un script o guardar datos.
- Añadir botónCambia al modo de diseño y selecciona Herramienta clave en la barra de herramientas superior. Haga clic en el área de diseño para añadir un botón.
- Etiquetado del botónAsigne al botón una etiqueta clara y comprensible, como "Guardar", "Borrar" o "Siguiente". El etiquetado debe ser breve y significativo.
- Asignar acciónEn el diálogo del botón bajo Acción puede asignar una acción específica al botón, como ejecutar un script, cambiar a un diseño diferente o ejecutar una función personalizada. Estas acciones se ejecutan cuando el usuario hace clic en el botón.
- Estilo de los botonesUtilice el inspector para personalizar el aspecto del botón. Puede cambiar los colores, las fuentes y los márgenes para integrar el botón en el diseño general.
Paso 3: Crear menús
Los menús proporcionan una forma estructurada y fácilmente accesible de ofrecer a los usuarios diversas opciones o funciones.
- Crear menú desplegableSeleccione el campo deseado con el ratón y pase a la última pestaña del inspector. En el área "Estilo de control", utilice el botón Menú desplegable o Lista de fundidos para crear un menú. En "Valores de", seleccione una lista de valores que se mostrarán para su selección.
- Definir elementos de menúDefina los elementos del menú como una lista de valores en [Archivo > Definir > Listas de valores]. Una lista de valores puede contener valores estáticos o valores de campos o campos relacionados. gFM Business utiliza a menudo listas de valores dinámicas con la función "MagicValueList". En este caso, se especifica "MagicValueList" como lista de valores y se asigna un activador de script al campo (en la entrada), que crea la lista de valores dinámicamente utilizando la función [MagicValueList]. Una lista de valores asignada de esta forma no tiene que estar predefinida como lista de valores en FileMaker.
- Asignar acciones de menúCada elemento de menú puede desencadenar una acción, de forma similar a los botones. Utilice activadores de guiones para especificar si debe ocurrir algo cuando un usuario selecciona un elemento de menú.
Una vez creados los elementos de navegación, pruebe la navegación desde la perspectiva del usuario. Compruebe que todos los enlaces y botones funcionan correctamente y que la navegación es intuitiva y fluida.
Los elementos del menú de navegación y del menú principal del software ERP gFM Business no tienen que personalizarse individualmente en los diseños, sino que están predefinidos en el módulo de desarrollo "Administración" en las pestañas [Navegación] y [Menú principal]. Para el desarrollador, esto tiene la ventaja de que todos los elementos de navegación son idénticos en todas las pantallas y pueden copiarse simplemente de un diseño existente. La versión Profesional también admite menús principales y navegaciones multilingües.
Diálogos y ventanas emergentes definidos por el usuario
Los diálogos definidos por el usuario y los elementos emergentes son elementos interactivos que muestran información adicional o requieren la intervención del usuario sin abandonar la presentación actual.
Paso 1: Crear diálogos personalizados
Los diálogos personalizados son ventanas emergentes que se pueden utilizar para mostrar mensajes al usuario o solicitar información.
- Crear guiónPara mostrar un diálogo definido por el usuario, debe crear un script. En el menú [Scripts], vaya al área de trabajo de scripts (Cmd/Ctrl+Shift+S) y haga clic en Nuevo guión.
- Definir diálogosUtilice el comando Mostrar su propio cuadro de diálogo en el script para crear el diálogo. Puede definir el título, el mensaje de texto y hasta tres botones.
- Añadir campos de entradaPuede añadir hasta tres campos de entrada en los que los usuarios puedan introducir datos. Estos campos pueden utilizarse para introducir valores que luego se procesan en el script.
- Acciones basadas en la entrada del usuarioUtilice sentencias condicionales (sentencias If) en el script para realizar diferentes acciones basadas en la entrada del usuario o en el botón seleccionado.
Paso 2: Crear popovers
Los popovers son pequeñas ventanas que aparecen cuando el usuario hace clic en un elemento y muestran información adicional o campos de entrada. Son especialmente útiles para organizar con claridad interfaces de usuario complejas.
- Añadir popoverSeleccione el elemento "Botón emergente" en la herramienta de botones de la barra de herramientas superior y haga clic en el diseño para añadir un botón emergente. Un botón emergente se parece a un botón normal, pero abre una ventana emergente cuando se hace clic en él.
- Diseñar contenido emergenteEn cuanto haya creado el botón emergente, haga doble clic para abrir el editor de botones emergentes. Aquí puede añadir campos, textos, botones y otros objetos, igual que en un diseño normal.
- Añadir interaccionesUtilice scripts o acciones directas para controlar la interactividad de la ventana emergente. Por ejemplo, puede especificar que se validen determinados campos de la ventana emergente antes de que el usuario pueda guardar los cambios.
- PruebasPruebe la ventana emergente en el modo de navegación para asegurarse de que se muestra correctamente y realiza las acciones deseadas.
Consejos para mejorar la facilidad de uso
Paso 1: Mantener la coherencia
Una interfaz de usuario coherente es más fácil de aprender y utilizar. Utilice colores, fuentes y estilos coherentes en todos los diseños. Asegúrate de que los elementos de navegación, como botones y menús, aparecen en los mismos lugares y funcionan de la misma manera.
Los usuarios siempre deben saber dónde están y cómo llegar a las funciones deseadas. Utiliza un etiquetado claro y conciso para los botones y menús. Asegúrate de que el camino a las funciones más importantes no esté nunca a más de dos o tres clics de distancia.
Paso 3: Comentarios y confirmaciones
Proporcione siempre a los usuarios información sobre sus acciones. Por ejemplo, muestre un mensaje de confirmación cuando se hayan guardado datos o una advertencia antes de borrar datos importantes. Esto evita errores y aumenta la confianza del usuario en la aplicación.
Paso 4: Prevención y tratamiento de errores
Diseña tu interfaz de usuario de modo que los usuarios sólo puedan hacer entradas válidas. Utiliza menús desplegables, casillas de verificación y otras opciones predefinidas para minimizar la introducción de errores. Si se produce un error, muestre mensajes de error claros y sugiera soluciones.
Paso 5: Pruebas con usuarios reales
Es importante probar la interfaz de usuario con usuarios reales para asegurarse de que es intuitiva y eficaz. Recoge opiniones y realiza ajustes para mejorar continuamente la experiencia del usuario.
gFM-Business Open Source FileMaker Basis-ERP
El software para el curso intensivo
Descargar gratis
Preguntas frecuentes sobre interfaces de usuario interactivas
- ¿Cómo puedo crear elementos de navegación en FileMaker para guiar a mis usuarios por la aplicación?
- Puede crear elementos de navegación añadiendo botones y barras de botones en el modo de diseño. Permiten a los usuarios cambiar fácilmente entre distintas presentaciones o funciones. Puede vincular botones a secuencias de comandos que dirijan al usuario a otra presentación, filtren registros o realicen una acción específica. La barra de botones es especialmente útil para crear una navegación coherente en la parte superior o lateral de la maqueta.
- ¿Cómo añado un popover a mi interfaz de usuario?
- Una ventana emergente es un objeto de diseño que muestra información u opciones adicionales cuando el usuario hace clic en un botón. Para crear una ventana emergente, seleccione la opción "Botón emergente" de la barra de herramientas en el modo de maquetación. Coloque el botón en su maqueta y podrá añadir contenido como campos, texto u otros botones en la ventana emergente. Los elementos emergentes son ideales para obtener información contextual o para ofrecer opciones avanzadas sin sacar al usuario de la presentación actual.
- ¿Cómo puedo crear cuadros de diálogo interactivos en FileMaker?
- Los cuadros de diálogo son útiles para mostrar información importante a los usuarios o para solicitarles información. Puede crear un cuadro de diálogo personalizado utilizando un script. En el editor de scripts, seleccione la función "Mostrar cuadro de diálogo personalizado" y podrá añadir hasta tres campos de entrada y botones como "Aceptar" y "Cancelar". Esto es ideal para confirmar las decisiones del usuario o introducir datos adicionales antes de ejecutar una acción.
- ¿Cómo puedo crear flujos de trabajo interactivos con botones?
- Los botones son un elemento central en las interfaces de usuario interactivas. Puede añadir botones y asignarles secuencias de comandos que realicen acciones específicas, como crear un nuevo registro, eliminar un registro o navegar a una presentación específica. Añadiendo condiciones a los scripts, puede controlar los botones de forma dinámica, en función del rol del usuario o del estado de un registro de datos.
- ¿Cómo puedo utilizar los controles de pestañas para mantener una visión de conjunto en diseños complejos?
- Los controles de pestañas son una excelente forma de organizar los datos en áreas similares a pestañas y ayudar a los usuarios a cambiar entre diferentes secciones de un diseño sin recargar toda la página. Puede añadir un control de pestañas en modo presentación y crear pestañas que muestren contenidos o datos diferentes. Esto facilita la navegación por maquetaciones complejas mostrando información relacionada en una estructura clara y organizada.
- ¿Cómo puedo mejorar la facilidad de uso de mis diseños?
- Para mejorar la usabilidad, asegúrese de que los diseños sean claros e intuitivos. Utilice botones grandes y visibles, etiquetas claras y colores de alto contraste para los elementos importantes. Reduzca la información superflua y céntrese en hacer accesibles al usuario las funciones más importantes. Los tooltips (textos de ayuda) también pueden ser útiles para dar a los usuarios información adicional cuando pasan el ratón por encima de un objeto.
- ¿Cómo puedo asegurarme de que mi interfaz de usuario interactiva funciona bien en distintos dispositivos?
- FileMaker admite el diseño adaptable para que las presentaciones se vean bien en distintos dispositivos, como ordenadores de sobremesa, tabletas y teléfonos inteligentes. Utilice las funciones de anclaje del Inspector para determinar cómo se adaptan los objetos al tamaño de la ventana. Para los dispositivos móviles, asegúrese de que los botones sean lo suficientemente grandes y fáciles de usar. Cree diseños optimizados para dispositivos móviles con navegación simplificada y tamaño de fuente adaptado.
- ¿Cómo configuro el formato condicional para proporcionar indicaciones visuales a los usuarios?
- El formato condicional permite resaltar visualmente campos u objetos en función de determinados criterios. Por ejemplo, puede mostrar automáticamente en un color diferente los registros de datos que tengan un determinado estado. En el modo de presentación, puede seleccionar un objeto y definir reglas en el inspector, en "Formato condicional", para cambiar dinámicamente su apariencia. Esto ayuda a los usuarios a reconocer inmediatamente la información importante.
- ¿Cómo puedo utilizar la información sobre herramientas para mejorar mi interfaz de usuario?
- Las descripciones emergentes son pequeñas ventanas de información que aparecen cuando un usuario pasa el ratón por encima de un objeto. Puede añadir información sobre herramientas a cualquier campo, botón u otro objeto de FileMaker para proporcionar información o instrucciones adicionales. En el Inspector, puede definir una información sobre herramientas para el objeto seleccionado en la primera pestaña "Posición" de "Información sobre herramientas". La información sobre herramientas es útil para ayudar a los usuarios sin que tengan que salir de la presentación o abrir diálogos adicionales.
- ¿Cómo optimizar la interfaz de usuario para interacciones rápidas?
- Para permitir una interacción rápida, hay que evitar los clics redundantes y facilitar el acceso a las acciones importantes. Los botones deben colocarse cerca de la información relevante y ser lo suficientemente grandes para que se pueda hacer clic en ellos con facilidad. Los atajos y los métodos abreviados de teclado también pueden mejorar la eficacia. Puedes definir atajos en los scripts para que las acciones comunes sean más accesibles, por ejemplo, guardar un registro de datos o realizar una búsqueda.
- ¿Cómo puedo crear cuadros de mando interactivos en FileMaker?
- Los cuadros de mando ofrecen una visión general de los datos y KPI importantes. Puede crear cuadros de mando utilizando gráficos, campos de resumen y botones. Los gráficos pueden generarse a partir de los datos para visualizar tendencias y cifras clave. Los botones y ventanas emergentes pueden integrarse en el cuadro de mando para permitir la orientación interactiva del usuario, por ejemplo, filtrando datos o mostrando información detallada.
- ¿Cómo puedo integrar contenidos dinámicos en mi interfaz de usuario?
- El contenido dinámico puede integrarse utilizando campos de cálculo, visibilidad condicional y scripts. Por ejemplo, puede utilizar campos de cálculo para mostrar valores dinámicos que cambien en función de la entrada del usuario. Con la visibilidad condicional, puede mostrar u ocultar objetos de diseño en función de la situación actual, por ejemplo, el estado de un registro de datos. Los scripts permiten dinamizar aún más la interfaz de usuario reaccionando a determinadas acciones del usuario.
