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

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

Mauricio González Sánchez — Fri, 09 Feb 2024 15:17:52 GMT

UX DESIGN AND APPIAN
UX design consiste en planear, diseñar y probar
UI es un subconjunto de UX design, es el desarrollo del look and feel
PLAN
Plan: define el problema, alcance, objetivos, esquemas y maquetas para una nueva aplicación
Design: Define detalles, diseño de pantallas, base de datos, sketches, interfaces y maquetas.
Test: Valida diseños con los usuarios temprano y frecuentemente
DESIGN AND TEST
El marco SAIL fue diseñado con la accesibilidad como preocupación principal.
Enjoyable: ¿Se cumplieron las expectativas de los usuarios?
Functional ¿Pueden los usuarios a completar lo que necesitan hacer?
Intuitive: ¿Pueden los usuarios averiguar qué hacer con una instrucción mínima?
Efficient: ¿Pueden los usuarios hacer su trabajo con poco tiempo posible?
Las interfaces Appian emplean automáticamente un enfoque de "escribir una vez, desplegar en cualquier lugar" para asegurarse de que no tiene que construir interfaces separadas para probar en varios dispositivos.
Hallway Test(prueba de pasillo): Es el tipo de prueba de usabilidad informal e ideal para obtener rápidamente comentarios de los usuarios sobre pequeños cambios durante cualquier fase de diseño.

LAYOUTS
Form
Card header and Billboard header
Section
Columns
Side by side
Box
Card
Billboard

COMPONENTS
DISPLAY
Rich Text
Images
Styled icons
ACTION
Buttons
Record actions
Grids and Lists
Charts

TEMPLATES AND PATTERNS
Templates
Forms
Pages
Examples
Builders
Patterns
Breadcrums
Cards as buttons
Grid with detail view
Drilldown
Design library
PAGE GUIDELINES
Page width
Narrow
Medium
Wide
Full
SUPPORT YOUR USERS
Instruction text
Help tooltips
Placeholder text

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

Mauricio González Sánchez — Fri, 09 Feb 2024 02:13:16 GMT

Evidencias de los temas:

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

IsraelMarcelinoGarciaHernandez — Tue, 06 Feb 2024 15:54:31 GMT

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).

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

Magaly Diana Leana Fierros — Tue, 06 Feb 2024 04:10:50 GMT

Magaly Diana Leana Fierros

Adjunto las evidencias de mis ejercicios.
community.appian.com/.../Evidences-the-exercises-in-Appian.docx

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

Mauricio Garduño Magaña — Sun, 04 Feb 2024 20:18:08 GMT

UX Design and Appian

Las interfaces deben de ser:

Funcionales.

Eficientes.

Intuitivas.

Bonitas y disfrutables.

Las tres fases del proceso de diseño centrado en el usuario:

Planificación. Se define el problema, objetivos, bocetos y maquetas de la nueva aplicación.
Diseño. Define los detalles, incluyendo los diseños de pantallas, bases de datos, bocetos, interfaces y maquetas.
Prueba. Valida el diseño tempranamente con los usuarios y regularmente.

Las pruebas de usabilidad son un método para medir qué tan intuitiva y fácil de usar es una aplicación de software. Implemente pruebas de usabilidad formales mediante sesiones de monitoreo en las que:

Se sienten con los usuarios
Pídales que completen algunas tareas específicas
Observa lo que hacen
Comenta la experiencia del usuario con ellos

Elija un diseño de lado a lado (side by side layout) en lugar de un diseño de columnas cuando necesite un control detallado sobre pequeños grupos de componentes relacionados.

Cuando el fondo de la página es blanco, despliega los componentes sin sombra y con bordes, cuando el fondo de la página es gris o transparente, o de un color claro, despliega los componentes con sombra y sin borde, si se está usando un fondo oscuro aplique un tono más claro que el color de fondo de la página en cada tarjeta y omita las sombras y los bordes por completo.

Utilice un billboard para mostrar contenido superpuesto a un color de fondo, una foto o un vídeo. Puede configurar la altura del cartel y configurar el tipo, posición y transparencia de la superposición.

El estilo “Avatar” hace que las imágenes se desplieguen en con una forma circular, éste es el mejor estilo para desplegar fotos de perfiles.

Puede optar por un ícono en lugar de una imagen porque los íconos son más simples y reducen el desorden en una página ocupada con mucho texto.

REF: docs.appian.com/.../ux-images.html

En los botones, para un botón de “confirmación”, se recomienda posicionar del lado derecho y usar el estilo “Solid” con un color “Accent” para destacar, mientras que el botón de “cancelar”, ubicarlo del lado izquierdo y que tenga un estilo “Outline” con un color “Secondary”, si el idioma donde se destina la aplicación es de lectura de derecha a izquierda, el orden se invierte.

REF: https://docs.appian.com/suite/help/23.4/sail/ux-buttons.html

Las cuadrículas editables (editable grids) y de solo lectura (read-only grids) son una forma útil de mostrar datos en un diseño estructurado y escaneable.

No debes utilizar rutas de navegación (breadcrumbs) para mostrar el historial de navegación.

Disposición de páginas. Rellena el navegador cuando se ve en una pantalla típica. "Wide" limita el ancho cuando se ve en monitores ultra anchos para brindar una experiencia consistente a los usuarios con configuraciones de pantalla variadas.

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

Mauricio Garduño Magaña — Sat, 03 Feb 2024 05:54:09 GMT

Interfaces 103: Build Complex Interfaces by Adapting Patterns

Se configuró el ambiente para la aplicación Personal Finance que se estará usando en la lección.

Criterios de aceptación. Son una lista de elementos que debe incluir al crear sus interfaces.

Historias de Usuarios. Recopilación de requerimientos para el ejercicio ejemplo del tema.

Interfaz simple, donde tenga lo necesario para el usuario.

Configuración de un dashboard donde vea sus opciones (metas, transacciones, cuentas) para administrarlas.

Crear objetos, interactuar con la aplicación

Llevar un seguimiento de sus registros.

Que sea accesible desde celular también

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

Francisco Javier Tonatiuh Fuentes Juarez — Sat, 03 Feb 2024 04:48:37 GMT

Interfaces 103: Building complex Interfaces

En el Sail Design System es donde podemos encontrar guías para poder crear interfaces llamativas , además de que podemos recurrir siempre al resto de documentación de Appian o conseguir apoyo de la comunidad en los foros. Recordar que Appian también está pensado para comportarse adecuadamente en todo tipo de dispositivos, incluyendo móviles (Similar al diseño responsivo de tecnología frontend)

UX Design Appian

Es muy importante considerar un buen diseño UX, esto teniendo en cuenta la usabilidad, accesibilidad de cara al usuario y el su experiencia sea lo mas tranquila posible.

Debemos enfocarnos en estos pilares al diseñar UX:

Funcional: Que el usuario final sea capaz de poder hacer lo que se supone debe hacer en la aplicación
Eficiente: La experiencia debe ser lo más rápida y fluida posible.
Intuitivo: Debe ser poco complicada visualmente y de fácil entendimiento para el usuario.
Hermoso: Que llame la atención del usuario, que disfrute lo que está viendo.

Es importante probar la aplicación y garantizar estos puntos para que el usuario tenga una experiencia satisfactoria de uso. Esto tambien aplica en caso de que el objetivo final (Aplicación) sea multiplataforma, cuidando las interfaces, por decirlo a groso modo “Escritorio y Móvil”
Se recomienda utilizar imágenes en formatos JPG y PNG, por ser los de mayor calidad.

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

Carlos Alonso Casales Ortega — Sat, 03 Feb 2024 04:39:17 GMT

En general el curso UX Design and Appian indica diversos pasos a seguir para lograr el diseño de una aplicación de manera exitosa:

- Capas

- Plantillas y patrones

- Recursos y Tutoriales

- Branding

- entre otros patrones de diseñor a seguir

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

Carlos Alonso Casales Ortega — Sat, 03 Feb 2024 04:26:46 GMT

El diseño de la interfaz de usuario (UX) en Appian se basa en cuatro bloques fundamentales:

Funcional:

La interfaz debe proporcionar las funciones necesarias para que los usuarios completen sus tareas sin problemas no contra tiempos.

Eficiente:

La interfaz debe navegar de manera rápida y eficaz a las acciones del usuario, requiriendo un esfuerzo mínimo por parte de ellos.

Intuitiva:

Los usuarios deben poder encontrar lo que necesitan con mucha facilidad, mejorando la navegación y comprensión de la interfaz.

Atractiva:

La interfaz debe ser visualmente atractiva, con elementos intuitivos, para que los usuarios disfruten interactuando con los mismos.

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

Eric Castañeda — Sat, 03 Feb 2024 00:42:51 GMT

Sail Design System: un recurso donde puede encontrar pautas de interfaz, inspiración y ejemplos.
Documentación de Appian (Documentos): documentación de Appian (documentación de productos, tutoriales, mejores prácticas y patrones)
Canal de YouTube de la comunidad Appian: tutoriales dirigidos por expertos, webcasts y consejos y trucos de expertos para crear aplicaciones rápidamente
Appian Community: sitio web comunitario para que los desarrolladores de Appian aprendan y colaboren con otros

Appian no solo está pensado para diseñar sitios o portales en computadoras, si no tambien en dispositivos móviles
Entendiendo que los dispositivos móviles tienen una vista más reducida. Appian nos permite diseñar de tal forma que se pueda adaptar la información a estos dispositivos.
Incluso si la iformación es muy extensa o compleja, se puede ir seccionando la navegación para ir desplegando la información con forme se vaya avanzando o necesitando.

Mantener el contenido relacionado cerca uno del otro es un ejemplo de diseño UX eficiente.

Un buen diseño de UX optimiza la usabilidad, la accesibilidad y el placer al interactuar con una aplicación de software.

Deacuerdo a la pirámide de diseño de UX. Esta debe ser con un diseño:
Funcional: los usuarios pueden acceder a la información y las herramientas que necesitan.
Eficiente: los usuarios pueden completar su trabajo rápidamente.
Intuitivo: los usuarios encuentran lo que necesitan con una instrucción mínima.
Hermoso: los usuarios disfrutan mirándolo.

Las pruebas de usabilidad son un método para medir qué tan intuitiva y fácil de usar es una aplicación de software.

Cuando creas una representación de alta fidelidad que muestra cómo se verá el producto terminado, estás simulando una interfaz.

Cuando se formule preguntas y tareas para pruebas de usabilidad, hay que tener en cuenta la pirámide de diseño de Appian.
- Funcional: ¿Pueden los usuarios lograr lo que necesitan?
- Eficiente: ¿Pueden los usuarios realizar su trabajo en el menor tiempo posible?
- Intuitivo: ¿Pueden los usuarios saber qué hacer con una instrucción mínima?
- Agradable: ¿Se cumplieron sus expectativas?

Las interfaces de Appian emplean automáticamente una tecnología de "escribir una vez, implementar en cualquier lugar" para evitar crear interfaces separadas para diferentes dispositivos.

Se debe usar pruebas de pasillo para obtener rápidamente comentarios de los usuarios sobre pequeños cambios durante cualquier fase de diseño centrada en el usuario.

Por lo general, no debe configurar una sección para que sea plegable porque debe evitar ocultar datos a los usuarios. Si algunas secciones son plegables y otras no, la página puede parecer desequilibrada. Considere configurar secciones plegables si esto facilita significativamente la navegación para los usuarios, especialmente en un dispositivo móvil.

Tipos de estilos:
"Normal" es el estilo de botón predeterminado.
"Principal" para los botones de envío de formularios.
"Secundario" para botones en línea que no sean acciones de envío de formularios.
"Destructivo" para acciones que resulten en la pérdida permanente de datos. Utilice el estilo "Enlace" para que los botones sin énfasis realicen acciones poco frecuentes.

Recomendaciones con las imágenes:
JPG y PNG son los mejores formatos de archivo para imágenes.
El estilo redondo "Avatar" es la mejor manera de mostrar fotos de perfil de personas.
Utilizar una pequeña selección de iconos indicadores. Para mayor accesibilidad, siempre se debe proporcionar texto alternativo para los íconos.
Estandarizar la altura de las imágenes que aparecen una al lado de la otra.

El "diálogo" permite a los usuarios completar la acción de registro sin salir de la página.

Las rutas de navegación (breadcrumbs) son un excelente ejemplo de cómo mostrar al usuario su ubicación dentro de una jerarquía organizacional.

Debes ser miembro del grupo Editores de la biblioteca de diseño para agregarlo a tu biblioteca de diseño.

El patrón de desglose permite a los usuarios seleccionar un elemento de una cuadrícula para ver más detalles en lugar de la cuadrícula.

No debes utilizar rutas de navegación para mostrar el historial de navegación.