Day 11: ¿Que entendiste de: Interfaces 102: Build Interfaces Using an Expression?
Discussion posts and replies are publicly visible
Jesús Reyes Hernández
Interfaces 102: Building Dynamic Interfaces
Hay dos modos para crear objetos de interfaz, el modo de diseño y el modo de expresión.
En el modo de diseño, se encuentra una paleta de componentes de interfaz que se pueden agregar a una interfaz simplemente arrastrando y soltando.
Encima del panel de configuración se encuentra el panel Variables locales.
La vista en vivo en el centro de la pantalla actúa como una herramienta de vista previa y edición.
Al cambiar a la pestaña Vista previa, se eliminan las opciones para configurar o eliminar componentes directamente.
Al cambiar al modo Expresión, se oculta la paleta Componentes y panel de configuración y en su lugar muestra la expresión de la interfaz.
Se puede utilizar la función de resaltado y la capacidad de contraer y expandir partes de la expresión para facilitar la comprensión de la estructura de alto nivel de la interfaz.
La vista en vivo de la interfaz y el panel de configuración del componente son representaciones visuales de la expresión de definición de la interfaz.
Utilizaremos variables locales para almacenar los datos
Crearemos una variable local llamada "paquetes bancarios" para almacenar los registros de los paquetes. También llamaremos a una regla de expresión llamada "CC obtener paquetes de comida" para obtener los registros de los paquetes. Definir la consulta fuera de la interfaz nos permite reutilizarla en otras partes de la aplicación si es necesario.
Utilizaremos la función "a!forEach" para iterar sobre la lista de paquetes y aplicar la plantilla de tarjeta a cada uno.
Sintaxis:
a!forEach(
items: una matriz que contiene los elementos para iterar sobre expresiones.
expressions: una expresión que se evaluara para cada elemento de la matriz.
)
Variables de función:
Puede ocurrir un error si un paquete no tiene una imagen especificada. Para manejar este caso, utilizaremos la función "if" para mostrar una imagen de muestra cuando falte la imagen del paquete. La función "if" tiene tres parámetros: la condición, el valor a devolver si la condición es verdadera y el valor a devolver si la condición es falsa.
Los enlaces dinámicos se utilizan para registrar las selecciones del usuario y anidar e interactuar dentro de otra interfaz. Los enlaces dinámicos convierten texto enriquecido estático, íconos, sellos, tarjetas y otros componentes en elementos dinámicos que se pueden usar para mostrar, ocultar o modificar condicionalmente otros componentes en una interfaz.
a!dynamicLink()
parámetros:
Para crear un cuadricula editable se comienza creando una variable local para almacenar los artículos agregados por los usuarios. Se utiliza un tipo de registro para contener los elementos de menú adicionales. Se configuran los encabezados de las columnas en la cuadrícula y se agregan más columnas Se configura la última columna para incluir un enlace que permita eliminar elementos de la lista. Se definen los datos de cada fila de la cuadrícula.
Para implementar el patrón de diseño “wizard type form”, puedes arrastrar y soltar el patrón de barra de hitos desde la pestaña "Patrones" en la paleta de diseño. Este patrón crea una plantilla de asistente con pestañas, tarjetas para indicar el progreso del usuario, contenido para cada paso y botones para avanzar o retroceder. Puedes personalizar los pasos y su contenido según tus necesidades. La expresión del asistente se estructura dentro de una función de variables locales y utiliza variables locales para controlar el progreso y los pasos del asistente. Además, se utiliza una función de selección para mostrar el contenido correspondiente al paso actual del usuario.
UX Desing and Appian
Un buen diseño de UX mejora la probabilidad de éxito de una aplicación, medida en términos de productividad y satisfacción de los usuarios.
Las decisiones de diseño deben enfocarse en maximizar la capacidad de los usuarios para realizar su trabajo de manera rápida y eficiente.
En Appian, los usuarios interactúan con diferentes interfaces, como formularios y informes, para realizar su trabajo y obtener información agregada sobre indicadores clave de rendimiento.
Para crear una experiencia significativa y productiva, la interfaz debe ser funcional, eficiente, intuitiva y atractiva visualmente.
Aunque puede parecer que la experiencia de usuario es una tarea adicional, es importante considerarla, ya que los usuarios necesitan poder lograr sus objetivos de manera rápida y eficiente.
Una interfaz insatisfactoria puede ralentizar el trabajo de los usuarios y afectar su apoyo a la aplicación.
La planificación y prueba de UX se pueden realizar rápidamente con herramientas de baja fidelidad como papel y pizarra.
Es más costoso realizar cambios en el diseño de UX más adelante cuando la aplicación ya está en producción, por lo que es mejor incorporarlos durante el desarrollo.
Comprender a los usuarios: Identificar los diferentes tipos de usuarios, conocer sus necesidades, objetivos y preocupaciones a través de entrevistas y la creación de personas ficticias.
Esbozar la interfaz: Generar ideas rápidamente utilizando herramientas de baja fidelidad como papel o pizarras, centrándote en la progresión del usuario sin preocuparte por los detalles de diseño.
Crear wireframes: Desarrollar esquemas básicos de los elementos clave en cada pantalla de la interfaz, prestando atención a la arquitectura de la información, la navegación y la disposición del contenido y los controles.
Diseñar según las mejores prácticas: Aplicar principios de diseño y considerar la disposición de los elementos, los componentes de la interfaz y las opciones de diseño para optimizar la experiencia del usuario.
Realizar pruebas de usabilidad: Evaluar si las interfaces cumplen con las necesidades y expectativas de los usuarios, realizando pruebas tempranas y frecuentes, recopilando comentarios y utilizando la retroalimentación para refinar los diseños.
Trabajar con clientes que tienen su propio equipo de diseño de UX.
Conocer los límites y capacidades del diseño de UX.
Familiarizar con diferentes diseños, componentes y patrones de diseño comprobados.
Mantenerse actualizado sobre las nuevas características y aprovecharlas en los diseños.
Elegir el diseño adecuado para organizar y resaltar el contenido.
Configurar secciones colapsables para una mejor navegación en interfaces con mucha información.
Moderar el usode diseños de cajas y tarjetas para evitar que las páginas se vean desordenadas.
La función decorativa de los diseños de carteles y la advertencia de no utilizarlos para información crucial.
Los componentes de interfaz tienen conjuntos de propiedades propias.
Algunas propiedades comunes incluyen etiquetas, instrucciones y consejos útiles.
Las etiquetas pueden ubicarse en diferentes posiciones: encima, adyacentes, justificadas u ocultas.
La posición de la etiqueta debe seleccionarse en función de si el campo es editable o de solo lectura.
Las instrucciones deben utilizarse para proporcionar orientación importante para completar una tarea.
El texto de marcador de posición puede utilizarse para describir el formato de entrada correcto o proporcionar una pista breve.
Los botones se utilizan para el control de flujo y acciones en línea en la interfaz.
Los botones de control de flujo deben estar en el mismo grupo en la parte inferior del formulario.
Los botones de acciones en línea deben colocarse en el cuerpo de la interfaz.
Se debe utilizar un botón principal para la acción más común en la interfaz.
Los botones destructivos deben usarse con precaución y solo en casos de pérdida permanente de datos.
Se recomienda utilizar verbos imperativos para las etiquetas de los botones.
Los asistentes (wizards) deben utilizar etiquetas como "Siguiente" o "Continuar" para indicar el progreso.
Estilo de tarjetas para selección de usuarios: Se recomienda utilizar iconos grandes y de tamaño medio, colores de acento y de segundo plano, y espacio en blanco para mantener un diseño limpio y reconocible.
Diseño estándar de tarjetas: Las tarjetas deben tener una forma cuadrada, tamaño consistente y estar dispuestas en columnas fijas para lograr una apariencia equilibrada.
Destacar tarjetas seleccionadas: Se sugiere utilizar un color de fondo de acento y cambiar el icono decorativo por una marca de verificación para resaltar las tarjetas seleccionadas.
Diseño general de la página: El uso de espacios en blanco vertical, tamaños y estilos diferentes para los títulos, y una alineación centrada ayuda a crear jerarquía y claridad en la página.
Estilo de enlaces: Se recomienda utilizar el estilo de enlace en línea solo cuando se encuentren dentro de un párrafo de texto. Para enlaces independientes, se debe utilizar un estilo más limpio y sin subrayado.
Uso de cursiva: La cursiva debe utilizarse para enfatizar palabras o frases específicas, no para decorar frases completas. Es importante mantener la legibilidad y claridad del texto.
Alineación vertical de contenido: Se debe evitar la falta de alineación causada por dejar una etiqueta vacía encima de un campo. Ocultar la etiqueta restaura la alineación y evita la confusión visual.
Es importante crear jerarquías de información y una estructura visual equilibrada en las interfaces de usuario.
Resalta la información más importante.
Utilizar componentes predefinidos y patrones de diseño en la herramienta de diseño de interfaces para agilizar el proceso de diseño y garantizar la coherencia visual.
Comunicarse con los usuarios durante todo el proceso de diseño y desarrollo de aplicaciones para garantizar que se cumplan sus necesidades.