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

Certified Associate Developer

Subir su apunte de favor

  Discussion posts and replies are publicly visible

Parents
  • 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

  • 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: 

    1. Planificación. Se define el problema, objetivos, bocetos y maquetas de la nueva aplicación.
    2. Diseño. Define los detalles, incluyendo los diseños de pantallas, bases de datos, bocetos, interfaces y maquetas.
    3. 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.

Reply
  • 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: 

    1. Planificación. Se define el problema, objetivos, bocetos y maquetas de la nueva aplicación.
    2. Diseño. Define los detalles, incluyendo los diseños de pantallas, bases de datos, bocetos, interfaces y maquetas.
    3. 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.

Children
No Data