Spirit Nro. 116

UX/UI

Integrantes

Agostina

Andrews

.js

Tareas generales del área

1. Id-visual: Manual avances
2. Mockup para web: media fidelidad
3. Portal: punto de inicio
4. Plan de indicaciones: propuesta visual
5. Plex: mini-navbar + ajustes grid
6. Mobile: Turnos virtuales y Detalles de turnos

Manual avances

Id - visual

• Se agrega índice

• Definidos subíndices (falta aplicaciones online)

• Placas con encabezado

• Se agrega aplicaciones gráficas

Media fidelidad

Mockup web

• Pase media fidelidad / alta fidelidad

• Definir enfoques y detalles de imagenes

• Colores correspondientes

Propuesta de punto de inicio

Portal del paciente

Actualmente, el usuario accede directamente a una sección (mi HUDS) evitando una adecuada visualización del resto de las secciones.

Tarea

Generar un "dashboard" o "punto de inicio de situación" del paciente

La propuesta debe contemplar las siguientes caracterísiticas:

• Tener un paneo general de su salud (autocuidado, info proveniente del sistema de salud y posibles acciones).
• Visualizar turnos, mensajes, interconsultas, tracking del estado de sus solicitudes e informes
• Datos propios del usuario (estadísticas de uso, sus frecuentes, lo último que hizo, si le quedó algo inconcluso, sus turnos del día/semana, etc.)
• Customización de la información (no sólo desde sesión/perfil sino desde la usabilidad)
• Avisos, alertas, alarmas sobre diferentes situaciones (turnos próximos, resultados de laboratorios listos)
• Visualización y funcionalidad actualmente presente en la app móvil:
• • • Mis turnos (ver historial, sacar turno)
    • Mis laboratorios (ver, descargar)
    • Mis vacunas
    • Poder ingresar a una cuenta delegada

Propuesta visual

Plan de indicaciones

Entregable:

• Nivel navegabilidad: Generar flujo de trabajo claro hacia el usuario, predecible y optimizando la cantidad de pasos (ver lineamientos ZUI). Reveer flujo (idas y vueltas con RUP).

• Nivel interactivo: Definir selección/registro múltiple. Foco en los momentos de la interfaz y la pertinencia de los datos a mostrar.

• Nivel layout: Reubicar elementos en función de lineamientos (panel de acciones sobre indicaciones)

• Nivel componentes: Incorporar correcto uso de componente plex

ajustes/mejoras: mini-navbar, plex-grid y plex-label

Plex + Misc.

• plex-grid (PLEX-288): Se agrega size/type como input. Actualmente son atributos css, lo cual limita su uso de manera dinámica.
  ​
• plex-label (PR): Diferenciar elementos de un listado. El color se configura mediante el selector de la propiedad [color]. El color se aplica sólo al icono.

​

• plex-mininav (PR): Se genera PR con versión inicial del componente. Se modifica estructura interna, se agrega atributo link (para ruteos). Se ajustan estilos generales.

​

• plex-accordion (merged): permite toggle alternado

Turnos virtuales y detalles de turnos

Mobile

User flow

Rediseño de página

User flow

Pantalla de detalle y user flow

Preguntas, sugerencias, consultas?

andes.gob.ar/plex/doc/

ui.andes.gob.ar

github.com/andes/plex/wiki

¡Muchas Gracias!​