Day 11: ¿Que entendiste de: Interfaces 102: Build Interfaces Using an Expression?

Interfaces 102: Building dynamic interfaces

Beneficios de ocupar interfaces dinamicas

• Se adapta a las necesidades/preferencias del usuario
• Reduce el desorden visual
• Reduce la confusion que pudiera tener el usuario
• Incrementa la usabilidad

Review the basics

Se muestra un resumen de lo aprendido hasta el momento

Introduccion to expression Mode

Podemos ocupar tanto el expression como el design mode para crear nuestras interfaces y dependerá de nosotros elegir cual es el mas conveniente según sea el caso.

Local Variables to Store Data

 a!local variables ocupa la "expression" como ultimo parametro por lo cual al definir nuestras variables estás deben ir antes que la expresion de la interfaz

Dynamic Links

Podemos usar a!dynamicLink para definirlo en expression mode

Define un vínculo que desencadena actualizaciones de una o más variables.

Podemos anidar una interfaz dentro de una interfaz ocupando un rule input

Mediante el style property y utilizando una condicion podemos hacer que nuestros items s resalten

Editable grid

A!gridLayout, de esta forma se define un editable grid en expression mode

Append function, esta funcion añade el items al final de la lista

La funcion remove es lo contratio a Append y permite remover elementos de una lista basada en el Index

Interface Pattern

Son templates preconstruidas que permiten crear dinamicas y avanzadas interfaces

Variable scoped

Define el alcance de la funcion, si una variable es local solo puede ser invocada desde la funcion que la define, será inalcanzable para las demas

Create a Wizard and Save your Data

Variable Local

Guardan datos temporalmente for uso en una interfaz o expression rules

Rule Inputs

Transfieren datos dentro o fuera de interfaces y expression rules

Los botones tiene dos valores

Cuando solo es un parametro se ocupa:

Value

Saveinto

Cuando son multiples datos de entrada

Ocupamos Saveinto y las funcion a!save la cual tiene dos parametros

Target

Value

103: Build Complex Interfaces by Adapting Patterns

Users stories

Explicación general de una característica del software escrita desde la perspectiva del usuario final o cliente.

Acceptance criteria

Lista de elementos que debe incluir al crear sus interfaces. Incluyen orientación y consejos generales para desarrolladores.

Mock Ups

Representa un high level overview de lo que buscamos hacer

UX Design and Appian

Antes de saber si tu interfaz cumple los princios del UX design, debes asegurarte que esta sea funcional. Incorporar los principios en la fase de desarrollo es mejor debido a que incorporarlos una vez que se recibio feedback esto será mas costoso

UX design principles

Efficient:  Usuarios pueden completar su trabajo en el menor tiempo posible y esta debe de ser responsive para minimizar el numero de pasos que el usuario debe realizar para realizar una tarea

intuitive : Debe de ser facilmente manejada, que pueda ser usada con mínimas instrucciones

Beautiful : La interfaz debe de ser atractiva, armoniosa y debe de verse moderna

UX Planning in Apian

Hay cuatro fases que seguir

• Understand your users : Quien usara la interfaz, sus roles, debes obtener los objetivos e informacion

• Sketch : imagina como los usuarios interactuaran con tu aplicación, con la interfaz, enfócate en lo general no en detalles. Se puede ocupar un storyboard para este punto. Posteriormente puedes apoyarte en un wireframe en donde tendrás que ser mas detallado y pensar en la colocación y propósito de tu contenido, pregúntate como navegan, que observan y como interactúan.

• Design: Debes asegurarte de mostrar la informacion correcta, y de que se muestren las acciones correctas y no crear acciones o distracciones para los usuarios. Qué necesitan y qué no necesitan los usuarios.

Considera las best practices para layouts y Components

• Test: Aquí se mide la interface usability, en donde se asegura que la interfaz cumple las necesidades y expectativas de los usuarios. El testing de la aplicación debe de comenzar tan pronto como sea posible debido a que es un proceso iterativo. Ocupa el feedback de los usuarios para mejorar la interfaz.

Algunos metodos utiles pueden ser los siguientes

• Hallway feedback

• Monitoring sessions

• Surveys

Layouts

Permiten juntar componentes

Hay diferentes tipos de layouts

• Form layouts

• Column layouts

• -Side by side layouts

• Box layout

• Card layout

• Billboard layout

Component best practices

Labels position

• Above: funciona para campos editables
• Adjacent: funcionan para RO values
• Justified: funciona para RO values
• Hidden

Evita la redundancia cuando algo sea muy obvio, debido a que esto puede distraer al usuario

Help tooltil: son utiles para incluir informacion que es necesaria, pero que no necesita ser mostrada todo el tiempo

Placeholder text: Utilizalo para mostrar que tipo datos se requieren o para asistir al usuario

Buttons

Tienen dos principales funciones

Flow control, Move forward or backwards

Realizar una acción

- El botón primario de una interfaz siempre debe de ir del lado derecho y en caso de que haya dos botones debe ser el que vaya a la izquierda

- El boton primario y secundarios deben de tener un estilo diferente

- Ocupa verbos imperativos: añadir, aprobar, etc para los botones

Design for Great User Experiences

Como hacer una app de Appian "beautiful"

Puedes comenzar buscando el tipo de compañía u organización para la cual vas a diseñar debido a que posiblemente ya se tenga un patrón definido para las interfaces, esto nos evitara empezar de cero.

TIPS

Color (Choose tasteful colors)

• Apégate a una paleta de colores pequeña

• Ocupa iconos para que el usuario pueda entender facilmente el contexto

• Ocupa colores en headers y footers, evita en el resto de la pagina debido a que puede hacerla parecer pesada

Images(understand how best to use images)

• Ocupa avatar style para las fotos de usuario

• Deja que las fotos llenen sus contenedores

• Evita ocupar fotos en lugar de iconos(distraen)

Typography (select varied and appropriate typography)

• Ocupa diferentes tipos de tipografía(tamaño y tipo) para enfatizar correctamente el contenido

Balance (la interfaz debe lucir armoniosa, bien distribuida)(Think explicity about visual Balance)

• Ocupa left alignment
• Ocupa las esquinas de tus componentes
• Ocupa el simple center para enfatizar cuando sea necesario
• No dejes espacios que luzcan raros
• Considera el espacio en blanco apropiado

Clutter (Avoid unnecessary clutter)

• Evita innecesarios contenedores anidados, hace lucir a la aplicación desordenada
• Ocupa Billboards escasamente, solo cuando sean necesarios

Al mostrar informacion esta debe de demostrar una jerarquia respecto a la importancia de la misma, es decir debe resaltar.

La pagina debe verse balanceada y estructurada

Interfaces 102: Building dynamic interfaces

Beneficios de ocupar interfaces dinamicas

• Se adapta a las necesidades/preferencias del usuario
• Reduce el desorden visual
• Reduce la confusion que pudiera tener el usuario
• Incrementa la usabilidad

Review the basics

Se muestra un resumen de lo aprendido hasta el momento

Introduccion to expression Mode

Podemos ocupar tanto el expression como el design mode para crear nuestras interfaces y dependerá de nosotros elegir cual es el mas conveniente según sea el caso.

Local Variables to Store Data

 a!local variables ocupa la "expression" como ultimo parametro por lo cual al definir nuestras variables estás deben ir antes que la expresion de la interfaz

Dynamic Links

Podemos usar a!dynamicLink para definirlo en expression mode

Define un vínculo que desencadena actualizaciones de una o más variables.

Podemos anidar una interfaz dentro de una interfaz ocupando un rule input

Mediante el style property y utilizando una condicion podemos hacer que nuestros items s resalten

Editable grid

A!gridLayout, de esta forma se define un editable grid en expression mode

Append function, esta funcion añade el items al final de la lista

La funcion remove es lo contratio a Append y permite remover elementos de una lista basada en el Index

Interface Pattern

Son templates preconstruidas que permiten crear dinamicas y avanzadas interfaces

Variable scoped

Define el alcance de la funcion, si una variable es local solo puede ser invocada desde la funcion que la define, será inalcanzable para las demas

Create a Wizard and Save your Data

Variable Local

Guardan datos temporalmente for uso en una interfaz o expression rules

Rule Inputs

Transfieren datos dentro o fuera de interfaces y expression rules

Los botones tiene dos valores

Cuando solo es un parametro se ocupa:

Value

Saveinto

Cuando son multiples datos de entrada

Ocupamos Saveinto y las funcion a!save la cual tiene dos parametros

Target

Value

103: Build Complex Interfaces by Adapting Patterns

Users stories

Explicación general de una característica del software escrita desde la perspectiva del usuario final o cliente.

Acceptance criteria

Lista de elementos que debe incluir al crear sus interfaces. Incluyen orientación y consejos generales para desarrolladores.

Mock Ups

Representa un high level overview de lo que buscamos hacer

UX Design and Appian

Antes de saber si tu interfaz cumple los princios del UX design, debes asegurarte que esta sea funcional. Incorporar los principios en la fase de desarrollo es mejor debido a que incorporarlos una vez que se recibio feedback esto será mas costoso

UX design principles

Efficient:  Usuarios pueden completar su trabajo en el menor tiempo posible y esta debe de ser responsive para minimizar el numero de pasos que el usuario debe realizar para realizar una tarea

intuitive : Debe de ser facilmente manejada, que pueda ser usada con mínimas instrucciones

Beautiful : La interfaz debe de ser atractiva, armoniosa y debe de verse moderna

UX Planning in Apian

Hay cuatro fases que seguir

• Understand your users : Quien usara la interfaz, sus roles, debes obtener los objetivos e informacion

• Sketch : imagina como los usuarios interactuaran con tu aplicación, con la interfaz, enfócate en lo general no en detalles. Se puede ocupar un storyboard para este punto. Posteriormente puedes apoyarte en un wireframe en donde tendrás que ser mas detallado y pensar en la colocación y propósito de tu contenido, pregúntate como navegan, que observan y como interactúan.

• Design: Debes asegurarte de mostrar la informacion correcta, y de que se muestren las acciones correctas y no crear acciones o distracciones para los usuarios. Qué necesitan y qué no necesitan los usuarios.

Considera las best practices para layouts y Components

• Test: Aquí se mide la interface usability, en donde se asegura que la interfaz cumple las necesidades y expectativas de los usuarios. El testing de la aplicación debe de comenzar tan pronto como sea posible debido a que es un proceso iterativo. Ocupa el feedback de los usuarios para mejorar la interfaz.

Algunos metodos utiles pueden ser los siguientes

• Hallway feedback

• Monitoring sessions

• Surveys

Layouts

Permiten juntar componentes

Hay diferentes tipos de layouts

• Form layouts

• Column layouts

• -Side by side layouts

• Box layout

• Card layout

• Billboard layout

Component best practices

Labels position

• Above: funciona para campos editables
• Adjacent: funcionan para RO values
• Justified: funciona para RO values
• Hidden

Evita la redundancia cuando algo sea muy obvio, debido a que esto puede distraer al usuario

Help tooltil: son utiles para incluir informacion que es necesaria, pero que no necesita ser mostrada todo el tiempo

Placeholder text: Utilizalo para mostrar que tipo datos se requieren o para asistir al usuario

Buttons

Tienen dos principales funciones

Flow control, Move forward or backwards

Realizar una acción

- El botón primario de una interfaz siempre debe de ir del lado derecho y en caso de que haya dos botones debe ser el que vaya a la izquierda

- El boton primario y secundarios deben de tener un estilo diferente

- Ocupa verbos imperativos: añadir, aprobar, etc para los botones

Design for Great User Experiences

Como hacer una app de Appian "beautiful"

Puedes comenzar buscando el tipo de compañía u organización para la cual vas a diseñar debido a que posiblemente ya se tenga un patrón definido para las interfaces, esto nos evitara empezar de cero.

TIPS

Color (Choose tasteful colors)

• Apégate a una paleta de colores pequeña

• Ocupa iconos para que el usuario pueda entender facilmente el contexto

• Ocupa colores en headers y footers, evita en el resto de la pagina debido a que puede hacerla parecer pesada

Images(understand how best to use images)

• Ocupa avatar style para las fotos de usuario

• Deja que las fotos llenen sus contenedores

• Evita ocupar fotos en lugar de iconos(distraen)

Typography (select varied and appropriate typography)

• Ocupa diferentes tipos de tipografía(tamaño y tipo) para enfatizar correctamente el contenido

Balance (la interfaz debe lucir armoniosa, bien distribuida)(Think explicity about visual Balance)

• Ocupa left alignment
• Ocupa las esquinas de tus componentes
• Ocupa el simple center para enfatizar cuando sea necesario
• No dejes espacios que luzcan raros
• Considera el espacio en blanco apropiado

Clutter (Avoid unnecessary clutter)

• Evita innecesarios contenedores anidados, hace lucir a la aplicación desordenada
• Ocupa Billboards escasamente, solo cuando sean necesarios

Al mostrar informacion esta debe de demostrar una jerarquia respecto a la importancia de la misma, es decir debe resaltar.

La pagina debe verse balanceada y estructurada