Reemplazar el servicio Data Export con código
15 Marzo 2024
Ahora, reemplaza el servicio de Data Export con código a través del desarrollo de plugins. Replicando los datos en una BBDD SQL de una forma sencilla, fiable y muy rápida.
Principios UX/UI para Canvas App
Introducción
La evolución en el desarrollo de software ha llevado a la popularización de enfoques de desarrollo de aplicaciones más accesibles, como el diseño gráfico mediante low-code. Este método permite a usuarios con conocimientos limitados en programación crear interfaces visuales y funcionalidades de software de manera eficiente, reduciendo la necesidad de codificación extensa. Una forma común de implementar el diseño gráfico mediante low-code es a través de las Canvas Apps, aplicaciones que utilizan lienzos visuales para simplificar la creación de interfaces y lógica de usuario. A continuación, exploraremos en detalle cómo las Canvas Apps se integran en el ámbito del diseño gráfico mediante low-code y sus aplicaciones prácticas.
¿Qué es Canvas App?
Una «Canvas App» se refiere comúnmente a una aplicación que utiliza un lienzo visual para crear y diseñar interfaces de usuario de manera intuitiva. Estas aplicaciones permiten a los usuarios construir experiencias interactivas sin necesidad de programación extensa o codificación.
Las Canvas Apps son versátiles y se utilizan en una variedad de contextos, desde la creación de aplicaciones internas en empresas hasta la construcción de herramientas específicas para ciertos procesos. Pueden conectarse a diversas fuentes de datos y servicios, como bases de datos, servicios en la nube o APIs, para integrar funcionalidades avanzadas en la aplicación.
Problema común
Al diseñar una Canvas App, el desafío inicial es enfrentarse a una pantalla en blanco. Esto puede resultar abrumador, especialmente para aquellos sin experiencia en programación. Sin embargo, el diseño gráfico mediante low-code facilita esto al proporcionar elementos predefinidos que se pueden arrastrar y soltar en el lienzo. Esto simplifica la creación de interfaces sin necesidad de escribir mucho código. Además, la vista previa en tiempo real permite a los diseñadores ver cómo se verá y funcionará la aplicación mientras la diseñan, agilizando el proceso y facilitando ajustes rápidos.
Pasos iniciales
¿Qué es la UX?
Se refiere al diseño que se encarga de entender cuáles son las necesidades del negocio y del usuario para tratarlas al mismo nivel en el desarrollo de un producto o servicio. Es decir, entender que un negocio va a triunfar cuando ofrezca lo que sus usuarios necesitan. Siendo imprescindible el estudio de los usuarios.
Por lo cual se emplea el User Research, investigación de los usuarios reales y potenciales mediante entrevistas y formularios. Este estudio se realiza a través del Design Thinking, dividido en diferentes etapas:
- Empatizar, definir el desafío y explorar el contexto humano.
- Definir, cómo voy a ayudar con él.
- Idear, brainstorming.
- Prototipar, de una forma económica y veloz con un MVO (Mínimo Producto Viable).
- Testear, implementar y redefine el producto (Lean UX).
¿Qué es el UI?
Es la parte visual del proceso. Cuando la UX termina sus test con los resultados deseados, el visual designer se encarga de aplicar la última capa en el proyecto. Es el momento del diseño de la interfaz. Qué dará cómo resultado, cómo se ve tu aplicación y cómo de buena es su interacción.
Recomendaciones generales
Según un estudio del UXmovement, está demostrado que hay ciertas funcionalidades que hay que incorporar para conseguir la óptima interacción con el público, las cuales son:
- Tamaño de los botones: min 10×10 mm.
- Colores: Primario y Secundario.
- Forma: Redondas.
- Consistencia: si has optado por botones redondos, TODOS deberán ser redondos.
- Logo: Arriba a la izquierda en web, arriba en medio en móvil.
- Extra: Si el color primario es alguna tonalidad de rojo, los mensajes de error deberán ser otro que no sea rojo…, como el púrpura.
Para un rendimiento óptimo es imprescindible programar ciertos valores de cierta manera específica. Los botones son un valor esencial que debe tenerse muy en cuenta a la hora de crear o personalizar aplicaciones. Teniendo en cuenta cómo coloco los botones, dónde los coloco y qué botones debo colocar.
A continuación, veremos varios ejemplos de diferentes escenarios con una óptima disposición de los elementos para su mejor rendimiento.
Colocación de botones en Canvas Apps
- Acción primaria y secundaria debajo del formulario.
- Acción primaria y secundaria a la izquierda.
- Acción terciaria debajo de la primaria.
- Acción de retroceder arriba a la izquierda.
Colocar los filtros encima de la galería
Campos requeridos
- Marcar los campos opcionales, no los obligatorios.
- La mayoría de los diseños utilizan asteriscos para indicar los campos obligatorios (¡y encima en rojo!).
- Los asteriscos hacen que aumente el riesgo de errores y reduce la tasa de finalización del formulario.
Ventanas emergentes (Pop-ups)
Los mensajes de instrucción que el cliente tiene delante cumplen una gran función. El fin de dichos mensajes se basan en facilitar el uso y el objetivo final del cliente, no deben hacerle dudar, hacerle sentir que no controla lo que tiene entre manos. Los mensajes deben ser afirmaciones, no preguntas. Ejemplo: Borrar la imagen Vs. ¿Desea borrar la imagen?. Más asertivos, borrando este elemento de forma permanente, sin vuelta atrás.
Tipo de menú
Cómo se aplica a Power Apps
Propiedades OnStart
Declarar los colores primario, secundario y terciarios:
Set(gblAppColors,{
// Primary Colors
//Violeta InfoAvan
Primary:ColorValue(«#500CB0»),//RGBA(80, 2, 176,1) -> #500CB0
//Verde InfoAvan
Secondary:ColorValue(«#00D1C2»),//RGBA(0,209,194,1) -> #00D1C2
Transparent:RGBA(0,0,0,0),
// Accent Colors
Black:ColorValue(«#000000»),
Cyan:ColorValue(«#17A2B8»),
GreenCorrect:ColorValue(«#28A745»),
Orange:ColorValue(«#FD7E14»),
RedWrong:ColorValue(«#DF2B2A»),
PurpleWrong:ColorValue(«#7400b8»),
// Neutral Colors
GrayDark:ColorValue(«#484644»),
GrayMediumDark:ColorValue(«#8A8886»),
GrayMedium:ColorValue(«#B3b0AD»),
GrayMediumLight:ColorValue(«#D2D0CE»),
GrayLight:ColorValue(«#F4F4F4»)
}
);
Y por cada control declarar su aspecto:
Set(gblControlFormat, {
PrimaryButton: {
- Align: Align.Center,
- AutoDisableOnSelect: true,
- BorderColor: gblAppColors.Primary,
- BorderStyle: BorderStyle.Solid,
- BorderThickness: 0, // Si es disabled, queda más visible un 1
- Color: gblAppColors.White,
- DisplayMode: DisplayMode.Edit,
- DisabledBorderColor: gblAppColors.GrayLight,
- DisabledColor: gblAppColors.GrayMedium,
- DisabledFill: gblAppColors.GrayLight,
- FocusedBorderColor: gblAppColors.Primary,
- FocusedBorderThickness: 0,
- Fill: gblAppColors.Primary,
- Font: gblAppFonts.Body,
- FontWeight: FontWeight.Normal,
- Height: 40,
- HoverBorderColor: gblAppColors.Primary,
- HoverColor: gblAppColors.White,
- HoverFill: ColorFade(gblAppColors.Primary, 10%),
- Italic: false,
- PressedBorderColor: gblAppColors.Primary,
- PressedColor: gblAppColors.White,
- PressedFill: gblAppColors.Primary,
- RadiusBottomLeft: 25,
- RadiusBottomRight: 25,
- RadiusTopLeft: 25,
- RadiusTopRight: 25,
- Size: gblAppFonts.Size.Regular,
- Strikethrough: false,
- TabIndex: 0,
- Tooltip: «»,
- Underline: false,
- VerticalAlign: VerticalAlign.Middle,
- Visible: true,
- Width: 200
},…}
Ejemplo 1
De este modo, con todas las recomendaciones anteriormente vistas y su implementación en Power Apps, se puede crear una aplicación de base donde guardar el formato de todos los componentes.
Y en el caso de querer cambiar los colores de la aplicación, solo habría que cambiar los colores primario y secundario, lo que conllevaría:
- Primary:ColorValue(«#D45151»),
- Secondary:ColorValue(«#8E50D4»),
Conclusión
En conclusión, la aplicación de principios de User Experience (UX) y User Interface (UI) en el diseño de Canvas Apps se revela como un enfoque esencial. Al equilibrar las necesidades del negocio con las del usuario, se crea una experiencia integral y efectiva. La facilidad de uso, la comprensión de las expectativas del usuario y la optimización de la interfaz gráfica en las Canvas Apps son fundamentales para el éxito de un producto o servicio. Integrar estos principios no solo simplifica el proceso de diseño, sino que también garantiza la entrega de soluciones que realmente satisfacen las necesidades de los usuarios, contribuyendo así al triunfo del negocio.
Transformando la Gestión de Datos en Dataverse
23 Noviembre 2023
En la era digital actual, donde la gestión de datos se ha convertido en un pilar fundamental para el éxito empresarial, surge una pregunta imperante: ¿Cómo podemos optimizar la gestión de datos e
Infoavan participó en el I Foro de Directivos de Inteligencia Artificial
17 Noviembre 2023
Infoavan fue uno de los patrocinadores del I Foro de Directivos de Inteligencia Artificial. Reunió a expertos de renombre que exploraron cómo la adopción de la Inteligencia Artificial impulsa la in