Spirit Nro. 115

UX/UI

Integrantes

Agostina

Andrews

.js

Tareas generales del área

Índice

  1. Botón volver: Propuesta gráfica + lineamiento
  2. Logo portal: Avances
  3. Id-visual: Indice principal del manual
  4. Timeline: aplicación de estilos
  5. Portal: usabilidad + ui demanda rechazada
  6. Misc: Relevamiento plan de indicaciones
  7. Moblie: Mapas de salud

 

 

UX/UI

Propuesta gráfica + lineamiento

Botón volver

Botón volver | Propuesta gráfica

  • Antes

Botón volver | Propuesta gráfica

  • Después

Botón volver | Propuesta gráfica

  • Componente + plex title

Botón volver | Lineamiento

Caso pantalla escritorio

En caso de campo de texto...

* Si la pantalla no contiene un título inicial, y en su lugar se encuentra solo el campo de texto, se deberá pensar la posibilidad de generar un título para esa pantalla

* Botón ubicado junto a un plex title, respetando este orden:

Caso apps/ versión mobile

También se aplica a portal paciente sección privada

Avances

Logo portal

"Lo hice con mis lagrimas"

Logo Portal | Avances

  • Protagonista - Activo - Empoderado - Participativo

 

Continuara...

Manual de marca

ID visual

Id visual | Manual

  • ¿Qué es un manual de marca?

1. Presentación de la marca ANDES
2. Situaciones de composición (Reticula, espaciado de la marca, tamaños permitidos)
3. Aquitectura de la marca (Submarcas existentes)
4. Paleta crómatica/tipografia (Colores principales, secundarios y tipografias de cada identidad)
5. Usos permitidos/usos no permitidos (Usos correcto de la marca y usos no existentes)
6. Contexto de aplicación (merchandising, web, mobile, landing, etc)

 

  • Indice

Principales elementos gráficos de una marca

Aplicación de hoja de estilos

Timeline

Documentación | ZUI Components

Definir y estandarizar estilos considerando que tanto la exploración visual de la HUDS como el mapa de turnos y plan de indicaciones comparten múltiples elementos gráficos.

 

Tarea

  • Hoja de estilos (BEM) para elementos gráficos de pantallas ZUI en base a lineamientos definidos en la primera iteración.

 

  • Aplicación de hoja de estilos desarrollada en propuesta visual definida en HUDS-13

Lectura + resumen

Portal

Portal | Material de lectura | PDP-2

Demanda insatisfecha: Diseño UI / usabilidad

Portal

Portal | Diseño UI / usabilidad demanda insatisfecha

Contexto

Paciente que necesita acceder a una prestación (de acceso directo) no disponible dentro de las agendas publicadas por la organización que le corresponde por georeferencia. 

 

Propósito

Que el paciente pueda dejar constancia de la necesidad de acceder a una prestación eventualmente no disponible para que gestión de pacientes/agendas visibilice la necesidad y actúe para brindar una respuesta.

 

La propuesta debe contemplar:

  1. La posibilidad de seleccionar la prestación de acceso directo 
  2. La posibilidad de seleccionar el efector (independientemente de su localización)
  3. Que el paciente obtenga una respuesta clara y concisa de la solicitud enviada (qué ocurrirá con su pedido?)

Portal | Diseño UI / usabilidad demanda insatisfecha

Portal | Diseño UI / usabilidad demanda insatisfecha

Portal | Diseño UI / usabilidad demanda insatisfecha

Portal | Diseño UI / usabilidad demanda insatisfecha

Next (en base a feed-back)

  • Establecer diálogo entre portal y paciente (herramienta/usuario)
  • Jerarquizar Turnos
  • Reforzar mensaje (spoilear!) lo que va a suceder
  • Ser bien claro en que no se está obteniendo un turno!
  • Textos demasiado largos, complejos de lee

Mockup mapas de salud

Mobile

Mobile | Mockup mapas de salud

User flow

Uso de FAB (Floating Action Button) como contenedor de mapas

Preguntas, sugerencias, consultas?

andes.gob.ar/plex/doc/

ui.andes.gob.ar

github.com/andes/plex/wiki

¡Muchas Gracias!​

Spirit 115 - UX UI

By ANDES | Apps Neuquinas de Salud

Spirit 115 - UX UI

Plex, documentación, refactors, PR's y mocks

  • 242