Skip to content

Patrones de usabilidad: interfaces ZUI

Julio Nicolás Santarelli edited this page Jul 21, 2021 · 10 revisions

¿Qué es una ZUI?

Es una tipología de interfaz gráfica de usuario (GUI) en la cual los elementos informativos son desplegados sobre un escritorio o lienzo virtual posiblitando una multiplicidad de interacciones (click, zoom, rotaciones, desplazamientos, mouseover, selecciones, etc.). La interactividad sobre el componente principal dispara eventos que motorizan la navegación y propician su propósito exploratorio.

¿Cómo las utilizamos en ANDES?

Principalmente en el marco de un módulos exploratorios o de navegación: visualización de la HUDS, visualización episódica en Internación, mapa de turnos y agendas. También existen propuestas ZUI en diversos prototipos.

Teoría del punto, cluster, segmento y área

Todos los componentes principales de las interfaces exploratorias se construyen a partir de los siguientes elementos gráficos:

  • Punto: representa la mínima unidad gráfica dentro del componente principal o lienzo virtual.
  • Cluster: es un recurso visual que agrupa varios puntos que comparten una misma coordenada dentro del lienzo virtual.
  • Segmento: es un conjunto de puntos interelacionados que se extienden bajo una misma variable (por ej.: el tiempo).
  • Área: se corresponde con una superficie que engloba una serie de elementos definiendo un sub-grupo (por ej.: un recorte temporal, una zona corporal, una región en un mapa, un sector en un plano)

Lineamiento principal / idea rectora

Al ofrecer una pantalla visualmente enriquecida, el propósito a nivel usabilidad es facilitar una interpretación rápida y sintética de un universo complejo. Esta primera lectura o barrido, permite al usuario discernir y focalizar en un recorte de información deseado. Se jerarquiza el componente principal, entendiendo que es el recurso disparador de la navegación de información que ocurre en la pantalla. Estas secuencias de información pueden posibilitar la aparición de diferentes recursos tanto a nivel layout (paneles emergentes) como a nivel gráfico (alteraciones cromática, formales, etc.). Se recurre a visualizaciones preliminares (mouse over sobre puntos, clusters, rangos, tracks/layers y áreas) y se destina el panel lateral tanto para operaciones CRUD como para visualizar el detalle de las interacciones que ocurren dentro del componente principal.

Lineamientos no visuales

  • a. Foco: La selección actual, la unidad que es el centro de atención en un momento dado.
  • b. Drill down: La profundización de la información a partir del recorte dado por el recurso principal.
  • c. Lo partitivo, lo asociativo y lo jerárquico
  • Partes:
  • Asociaciones: representaciones asociativas entre puntos (trastorno-medicamentos, solicitudes-procedimientos)
  • Jerarquías:
  • d. Noción cronológica (recurso complementario): La incorporación de una representación (o notación) visual cronológica.
  • e. Noción no-lineal: representaciones visuales sin sentido cronológico (por ejemplo: una notación de grafo).
  • f. Concepción de un esquema visual que sea:
  • Escalable: Permitir la visualización de los registros de salud de un paciente extendidos en el tiempo desde una consulta hasta su HUDS entera.
  • Customizable: Posibilitar múltiples accesos a la información a partir de interacciones sobre el timeline y operaciones sobre los tracks (aditivas, comparativas, selectivas) sumado a las combinaciones que el usuario desee realizar. (conceptos con organizaciones, ámbitos, episodios, consultas, camas, turnos, etc.).
  • g. Accesibilidad

Compositivamente: jerarquía, agrupamiento y ordenamiento visual (a desarrollar)

Layouting

Se delinea a partir del componente principal (o main-feature) como por ejemplo: una línea de tiempo, un mapa, un cuerpo humano.

Navegabilidad y secuencialidad

  • Navegación de lo macro a lo micro (de lo general a lo preliminar, de lo preliminar a lo particular).

Interactividad

  • Recursos a nivel layout: Despliegue/retracción de paneles, tooltips, popovers, hints, otros paneles emergentes
  • Recursos visuales de identificación/diferenciación: cromaticidad, iconografía, aspectos formales, recursos tipográficos (uso de iniciales y números en clusters).
  • Recursos interactivos: zoomeos, paneos, filtrados, selección de tracks, puntos, rangos (áreas), clusters.

Los componentes y sus estados

Alteraciones en la percepción de los elementos como respuesta ante eventos e interacciones que pueden ocurrir en el lienzo virtual. Son representaciones (mayormente visuales) que operan complementarias al foco y enfatizan el aspecto jerárquico, partitivo y asociativo del elemento. Un componente o elemento gráfico puede experimentar 4 fases:

  • Reposo:
  • Hover:
  • Activo:
  • Seleccionado: Un componente puede alterar su estado como respuesta a una interacción u evento que ocurre sobre otro elemento y que lo involucra de manera indirecta (por caracter asociativo, jerárquico o partitivo)