Subdirección de las Tecnologías de la Información y Comunicaciones

Área de Gobernanza y Calidad

Versión

Tabla de Contenido

Cumplimiento Normativo

Histórico de cambios

Los cambios en la normativa vendrán acompañados de un registro de las modificaciones. De este modo se podrá realizar un seguimiento y consultar su evolución. Ordenándose de mas recientes a menos recientes, prestando especial cuidado a las cabeceras de la tablas dónde se indican las fechas de entrada en vigor y versión.

1. Definición

Las necesidades de homogeneización y reducción de la curva de aprendizaje en las diferentes soluciones software, basadas en interacciones hombre máquina, y el volumen y dispersión de las mismas, en el ámbito del Servicio Andaluz de Salud, hacen que la aplicación de un sistema de diseño nos proporcione ventajas que afectan a la UX y la productividad de los usuarios finales.

Desde el punto de vista de los costes de la implementación de soluciones software, la aplicación de sistemas de diseño mejora el aprovechamiento de los equipos de desarrollo, dotándolos de patrones de diseño e interacción con el usuario y de herramientas adicionales preconfiguradas para su aprovechamiento en cortos lapsos de tiempo.

El sistema de diseño proporcionará un interfaz de usuario basado en los siguientes principios:

• Simulación de superficies: Se adopta el enfoque de la reinvención del planteamiento del papel y tinta, dónde se aplicará profundidad a los diferentes elementos de la interfaz de usuario en base a sombreados coherentes y la aplicación de tipografías concretas, homogéneas y bien equilibradas.
• Grafismos, pesos e relevancia: Se adoptan métodos de impresión y maquetado ampliamente utilizados en la industria, estas normativas definirán aspectos para un uso consistente de tipografías, grids, espaciados, escalados, colores e imágenes con el objetivo principal de crear jerarquías significativas y enfocar la atención en la información relevante, consiguiendo una experiencia de usuario inmersiva en la visualización del dato. Para ello, se proporcionarán no sólo documentos que pauten el desarrollo, sino también recursos concretos para su implementación así como artefactos más complejos que le permitirán avanzar más rápidamente en sus desarrollos.

1.1 Objetivos

1. Definir las pautas que se ha de seguir en el desarrollo de una SSUI para maximizar su reutilización y hacerlo homogéneo entre aplicaciones.
2. Articular mecanismos de comprobación estándares para la validación de la aplicación de las reglas y su correcta integración en el sistema de diseño.

1.2 Especificaciones

Se define Software Solution for User Interaction como SSUI , este conceptualmente puede ser desde un Web Component hasta una SPA , pasando por un Micro Frontend.
El sistema de diseño tiene un impacto transversal, compuesto por:

• Theming:

  • Es el mecanismo encargado de dotar a la SSUI de capacidades de reutilización y encaje automático en otras SSUI
    
• División orgánica de la solución para la interfaz de usuario.
  • Se detallarán patrones de diseño orientados a reducir el acoplamiento y mejorar la cohesión, mejorando notablemente la mantenibilidad y escalado de su SSUI .
• División arquitectónica de la solución para la interfaz de usuario.
  • Se definen componentes transversales como el routing, fetching, eventbus y otros mecanismos que permite a su SSUI escalar y completar su UX en base a otros SSUI .

1.3 Theming

La provisión de mecanismos estandarizados que aseguren la reutilización y la aplicación de aspectos importantes en la interfaz de usuario, que afectan directamente a la percepción y recepción de la información por parte del usuario final.
Para articular el theming, se ha de entender que dicho theming es posible definirlo en este sistema de diseño según las necesidades, proporcionando los siguientes ámbitos dónde puede ubicarse la su SSUI , y heredando de dicho ámbito los valores de theming que serán aplicables:

• Ámbito STIC (Ámbito corporativo): Ubica su SSUI en un ámbito corporativo concreto. Al adoptar los mecanismo de theming en su aplicación se garantiza la reutilización de los aspectos estéticos de las SSUI .
• Ámbito de Negocio: Delimita su SSUI en un ámbito funcional concreto, no sólo marcado por las necesidades de su negocio, sino también por la especialización en un determinado segmento de negocio de los agentes que harán la interacción con la SSUI .
• Ámbito de Aplicación (Ámbito Funcional): Delimita su SSUI en el ámbito de una aplicación.
• Ámbito de Componente (Ámbito del SSUI ): Es el ámbito que define su SSUI , cualquier elemento dentro de ella forma parte del SSUI en cuestión.

La articulación del theming en el sistema de diseño se encuentra basada en la definición y posterior aplicación de variables estandarizadas. Estas variables se deberán aplicar en el ámbito del componente de su SSUI y se definirán en un paquete de theming que contendrá los valores definidos para los demás ámbitos, desde el de componente hasta el más exterior (Ámbito STIC).

Se aborda el mecanismo de theming dentro del sistema de diseño desde dominios segmentados en las siguientes secciones.

1.4 Variables Custom CSS globales

De manera global y en paralelos a todas las secciones del theming se han creado una Variables Custom CSS para poder trabajar en los temas que se tratan a continuación:

• Colores

Se definen las siguiente Variables Custom CSS para poder trabajar con ellas en el ámbito de generación de colores cuando se tenga que hacer referencia a la luminosidad:

• Tipografías

Se definen las siguiente Variables Custom CSS para poder trabajar con ellas en el ámbito de generación de propiedades dentro de las tipografías, cuando se tenga que hacer referencia al peso de la fuente:

• Estados

Se definen las siguiente Variables Custom CSS para poder trabajar con ellas en el ámbito de generación de elevaciones trabajando con los estados, cuando se tenga que hacer referencia a DPs:

• Z-index

Se definen las siguiente Variables Custom CSS para poder trabajar con ellas en el ámbito la elevacion de las capas dentro de los componentes:

1.5 Acrónimos

• SSUI: Software Solution for the User Interaction
• SPA: Single Page Application
• UX: User Experience