¿Que aprendieron de los temas Interfaces "103: Build Complex Interfaces by Adapting Patterns" y "UX Design Appian"?

Hola Marco, acá mis apuntes del día 02 de febrero:

Interfaces 103. Build Complex Interfaces by Adapting Patterns
-Recursos de Appian
--SAIL Design System Site. Puedes visitarlo para ver ejemplos y las mejores prácticas para ayudarte a construir mejores interfaces.
--Appian Documentation. Incluye documentación, tutoriales, recetas, las mejpres prácticas y patrones.
--Appian Community. Es el sitio web para desarrolladores (para parender y colaborar).
--Appian developer learning path. Una serie de cursos para apoyar a nuevos desarrolladores a prepararse para la certificación.
--Appian Community Youtube Channel. Tutoriales de expertos, tips y trucos para construir apps empresariales rápido.

UX Design and Appian
Tres fases de diseño centrado en el usuario: Plan (definir el problema, alcance, objetivos, wireframes y maquetas para la nueva aplicación), diseño (definir detalles incluyendo diseño de pantallas, bases de datos, interfaces y maquetas) y pruebas (Validar diseño con usuarios de forma temprana y frecuente).
-Appian UX Design Building Blocks. Una interface en Appian debería ser:
--Funcional: Los usuarios no pueden terminar su trabajo si la interface no les da lo que necesitan.
--Eficiente: La interface debe ser responsiva a acciones de usuario y requerir el minímo esfuerzo.
--Intuitiva: Los usuarios deberán encontrar lo que necesitan con las minímas instrucciones.
--Bonita: Los usuarios deben disfrutar lo que ven.

Plan. Necesitas entender a tus usuarios y sus necesidades. (Establecer "Personas", Establecer casos de uso [Quién usará la app, Qué quieren hacer los usuarios, con qué frecuencia, cuántos pasos necesitan para realizar una tarea, cómo la app responde a las acciones, qué dispositivos usa el usuario, etc] y Conceptualizar y bosquejar el storyboard (ilustra el flujo de acciones de un usuario en un escenario dado))
Wireframe: Es un esquema básico de los elementos clave en la pantalla.
Mockup: (Maqueta) es una representación de alta fidelidad de su diseño que muestra cómo se verá el producto terminado.

Diseño. La clave para un buen diseño de interfaces es el equilibrio, equlibra lo que el suaurio necesita con un diseño atractivo.
Buenas prácticas: Colabora frecuentemente con SMEs (subject matter experts, expertos en la materia), Prueba frecuentemente casi diario, diseña teniendo en cuenta requisitos de accesibilidad, las maquetas en Appian se construyen rápidamente enfocate en la arquitectura de la información antes de los detalles de la interface.

Pruebas. Deben realizarse temprano y con frecuencia. Evaluar si la interfaz satisface las necesidades y expectativas del usuario. Es un proceso iterativo que integra retro alimentación dentro del diseño de interface.
Sientate con el usuario. Pídele que realice algunas tareas especificas. Observa lo que hacen. Comenta la experiencia de usuario con ellos. Define objetivos de la información. Prueba en el entorno y navegadores en los que trabajan los usuarios. Lo más importante es tener suficiente tiempo para ajustar la interface basado de lo que aprenda de los comentarios que recibe.

Layouts.
SAIL UI Framework. Componentes y layouts reusables, lenguaje de expresión. Contiene Forms (Punto de entrada para crear o iniciar una tarea), Card Header y Billboard Header (Puede ser Landing page, report o navegación secundaria), Sections (Un grupo de partes relacioandas de una interface), Columns (Organiza los componentes a lo largo del ancho de la página), Side by Side (Organizan los componentes a lo ancho de una página), Box (Crea un grupo visual fuerte de componentes relacionados), Card (Grupo de contenido relacionado y equilibra una página llena), Billboard (Elementos decorativos con alto impacto visual).

Componentes. Toda interface esta hecha por al menos un componente.
Display. Rich Text (Te permite aplicar diferentes tamaños, colores y estilos, así como agregar iconos a una interface), Images (Puede enricqueder una interface con elementos visuales que ayuden a interpretar a lo usuarios más rápido la información), Styled icons (Puedes optar por un ícono sobre una imagen, son más simples y evitan saturar la página con mucho texto).
Action. Buttons (Ayudan a los usuarios a entender como interactuar con una interface), Record Actions (Permite colocar uan acción relacionada o record list action en una interface).
Grid and list. Read-only and Editable Grids (Un forma que te ayuda a mostrar datos en un layout estructurado).
Charts. Appian provee 6 tipos de gráficas: area, bar, chart, line, pie, y scatter. Preguntate cuál es la mejor opción para usar dependiendo de lo que quieres mostrar.

Templates and Patterns. Te proveen un inicio de bonitas interfaces.
Templates (Ayudan a definir rápidamente la estructura de una nueva interface, poseen Forms, pages, examples y builders).
Patterns (Cuando diseñas interfaces complejas deberías usar y adaptar patrones para ahorrar tiempo y esfuerzo, algunos patrones son: breadcrumbs, cards as buttons, grid with detail view y drilldown).
Design Library (te permite seleccionar una colección de diseños y componentes reusables que te permitan controlar el diseño de la interface, promueve las mejores práctivas y crear una experiencia de usuario consistente).

Resources and Guidelines. SAIL Design System (Inspiración, ejemplos y las mejores prácticas para construir bonitas y funcionales interfaces).
Pages guidelines. (Page width: Asegúrese que el ancho de la página funcione bien para todo el contenido que se muestra en la página. Columns vs Side by Side. El usuario lee una columna de arriba hacia abajo, side by side se lee de derecha a izquierda.)
Configurando componentes. (Labels y Inputs, Apoyo para los usuarios (Texto con instrucciones, tooltips de ayuda, texto como placeholder)).
Accesibilidad (Provee un texto equivalente a imagenes e iconos, describe forms de manera clara, no uses color para comunicar información central, Defina la estructura de la página con etiquetas de componentes y el parámetro "Etiqueta de encabezado de accesibilidad"), Mobile considerations (Utilice la vista previa del factor de forma para confirmar que una interface se muestra bien en pantallas pequeñas, Los diseños de columnas y botones se pasan a una sola columna en los teléfonos, Asegúrese de que el orden de los botones tenga sentido en el diseño alternativo, Reduzca el desorden, el envoltorio y el desplazamiento en las pantallas de los teléfonos).

Hola Marco, acá mis apuntes del día 02 de febrero:

Interfaces 103. Build Complex Interfaces by Adapting Patterns
-Recursos de Appian
--SAIL Design System Site. Puedes visitarlo para ver ejemplos y las mejores prácticas para ayudarte a construir mejores interfaces.
--Appian Documentation. Incluye documentación, tutoriales, recetas, las mejpres prácticas y patrones.
--Appian Community. Es el sitio web para desarrolladores (para parender y colaborar).
--Appian developer learning path. Una serie de cursos para apoyar a nuevos desarrolladores a prepararse para la certificación.
--Appian Community Youtube Channel. Tutoriales de expertos, tips y trucos para construir apps empresariales rápido.

UX Design and Appian
Tres fases de diseño centrado en el usuario: Plan (definir el problema, alcance, objetivos, wireframes y maquetas para la nueva aplicación), diseño (definir detalles incluyendo diseño de pantallas, bases de datos, interfaces y maquetas) y pruebas (Validar diseño con usuarios de forma temprana y frecuente).
-Appian UX Design Building Blocks. Una interface en Appian debería ser:
--Funcional: Los usuarios no pueden terminar su trabajo si la interface no les da lo que necesitan.
--Eficiente: La interface debe ser responsiva a acciones de usuario y requerir el minímo esfuerzo.
--Intuitiva: Los usuarios deberán encontrar lo que necesitan con las minímas instrucciones.
--Bonita: Los usuarios deben disfrutar lo que ven.

Plan. Necesitas entender a tus usuarios y sus necesidades. (Establecer "Personas", Establecer casos de uso [Quién usará la app, Qué quieren hacer los usuarios, con qué frecuencia, cuántos pasos necesitan para realizar una tarea, cómo la app responde a las acciones, qué dispositivos usa el usuario, etc] y Conceptualizar y bosquejar el storyboard (ilustra el flujo de acciones de un usuario en un escenario dado))
Wireframe: Es un esquema básico de los elementos clave en la pantalla.
Mockup: (Maqueta) es una representación de alta fidelidad de su diseño que muestra cómo se verá el producto terminado.

Diseño. La clave para un buen diseño de interfaces es el equilibrio, equlibra lo que el suaurio necesita con un diseño atractivo.
Buenas prácticas: Colabora frecuentemente con SMEs (subject matter experts, expertos en la materia), Prueba frecuentemente casi diario, diseña teniendo en cuenta requisitos de accesibilidad, las maquetas en Appian se construyen rápidamente enfocate en la arquitectura de la información antes de los detalles de la interface.

Pruebas. Deben realizarse temprano y con frecuencia. Evaluar si la interfaz satisface las necesidades y expectativas del usuario. Es un proceso iterativo que integra retro alimentación dentro del diseño de interface.
Sientate con el usuario. Pídele que realice algunas tareas especificas. Observa lo que hacen. Comenta la experiencia de usuario con ellos. Define objetivos de la información. Prueba en el entorno y navegadores en los que trabajan los usuarios. Lo más importante es tener suficiente tiempo para ajustar la interface basado de lo que aprenda de los comentarios que recibe.

Layouts.
SAIL UI Framework. Componentes y layouts reusables, lenguaje de expresión. Contiene Forms (Punto de entrada para crear o iniciar una tarea), Card Header y Billboard Header (Puede ser Landing page, report o navegación secundaria), Sections (Un grupo de partes relacioandas de una interface), Columns (Organiza los componentes a lo largo del ancho de la página), Side by Side (Organizan los componentes a lo ancho de una página), Box (Crea un grupo visual fuerte de componentes relacionados), Card (Grupo de contenido relacionado y equilibra una página llena), Billboard (Elementos decorativos con alto impacto visual).

Componentes. Toda interface esta hecha por al menos un componente.
Display. Rich Text (Te permite aplicar diferentes tamaños, colores y estilos, así como agregar iconos a una interface), Images (Puede enricqueder una interface con elementos visuales que ayuden a interpretar a lo usuarios más rápido la información), Styled icons (Puedes optar por un ícono sobre una imagen, son más simples y evitan saturar la página con mucho texto).
Action. Buttons (Ayudan a los usuarios a entender como interactuar con una interface), Record Actions (Permite colocar uan acción relacionada o record list action en una interface).
Grid and list. Read-only and Editable Grids (Un forma que te ayuda a mostrar datos en un layout estructurado).
Charts. Appian provee 6 tipos de gráficas: area, bar, chart, line, pie, y scatter. Preguntate cuál es la mejor opción para usar dependiendo de lo que quieres mostrar.

Templates and Patterns. Te proveen un inicio de bonitas interfaces.
Templates (Ayudan a definir rápidamente la estructura de una nueva interface, poseen Forms, pages, examples y builders).
Patterns (Cuando diseñas interfaces complejas deberías usar y adaptar patrones para ahorrar tiempo y esfuerzo, algunos patrones son: breadcrumbs, cards as buttons, grid with detail view y drilldown).
Design Library (te permite seleccionar una colección de diseños y componentes reusables que te permitan controlar el diseño de la interface, promueve las mejores práctivas y crear una experiencia de usuario consistente).

Resources and Guidelines. SAIL Design System (Inspiración, ejemplos y las mejores prácticas para construir bonitas y funcionales interfaces).
Pages guidelines. (Page width: Asegúrese que el ancho de la página funcione bien para todo el contenido que se muestra en la página. Columns vs Side by Side. El usuario lee una columna de arriba hacia abajo, side by side se lee de derecha a izquierda.)
Configurando componentes. (Labels y Inputs, Apoyo para los usuarios (Texto con instrucciones, tooltips de ayuda, texto como placeholder)).
Accesibilidad (Provee un texto equivalente a imagenes e iconos, describe forms de manera clara, no uses color para comunicar información central, Defina la estructura de la página con etiquetas de componentes y el parámetro "Etiqueta de encabezado de accesibilidad"), Mobile considerations (Utilice la vista previa del factor de forma para confirmar que una interface se muestra bien en pantallas pequeñas, Los diseños de columnas y botones se pasan a una sola columna en los teléfonos, Asegúrese de que el orden de los botones tenga sentido en el diseño alternativo, Reduzca el desorden, el envoltorio y el desplazamiento en las pantallas de los teléfonos).