Spirit Nro. 117

UX/UI

Integrantes

Agostina

Andrews

.js

Tareas generales del área

1. Mockup para web: alta fidelidad
2. Sub-sistemas de iconos: Identificar y categorizar
3. Agregados
4. Portal: maquetado landing
5. Portal: mocks + ajustes
6. Plan de indicaciones: propuesta visual (iteración)
7. Mobile: Turnos virtuales y Detalles de turnos

Media fidelidad

Mockup web

Identificar y categorizar

Sub-sistemas de iconos

• Inicio sobre 3 módulos diferentes:

1. Internación

2. Citas

*Rup

• Relevamiento interno sobre módulos

- No todos los iconos están visibles
- Solo se evidencian los iconos principales
- Los estados de los iconos son reemplazados por iconografia secundaria

- https://materialdesignicons.com/
- https://fonts.google.com/icons

Conclusión: división generada por tipo de trazo

Ejemplos:

• Categorizar los iconos existentes
• Definir lineamientos
• Descartar opciones

Agregados

Manual:

1. Se agregaron las aplicaciones on line y audiovisuales
2. Sigue faltando logo del portal paciente

Mi Portal paciente:

1. Por el momento la figura única del paciente se

        descarta como elemento principal

    2. Trabajando sobre nueva propuesta

Maquetado landing page

Portal del paciente

Propuesta visual

Plan de indicaciones

Entregable:

• Nivel navegabilidad: Definir flujo a partir de los siguientes escenarios:  

1. Embeber Rup en la pantalla de indicaciones
2. Incorporar el plan de indicaciones en RUP
3. Híbrido: Realizar todas la indicaciones en la pantalla de planificación y terminar las operaciones en 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

Plus

• Seccionado por tipo de indicación
• Definir recursos cromáticos (considerando que lo importante son los estados, no los semantics)
• Sub-semantics? Teóricamente las indicaciones son todos procedimientos, pero se pueden diferenciar por tipo considerando que existen indicaciones de medicamentos (ej.: enalapril 5mg), dispositivos (ej.: un respirador) y procedimientos propiamente (ej.:signos vitales).
• Funcionalidad tipo "carrito de compras"

fixes & features

Plex

• plex-accordion: nueva directiva plAccordion (#295) (83db570)

• plex-accordion: posibilita toggle alternado (#293) (735463d)

• plex-card: tabindex + refactor html plex-label (#290) (05437e0)

• plex-label: posibilita custom-colors (#296) (8972ce8)

• plex-slider: carrousel de elementos (#292) (557cce1)

Preguntas, sugerencias, consultas?

andes.gob.ar/plex/doc/

ui.andes.gob.ar

github.com/andes/plex/wiki

¡Muchas Gracias!​