| Tabla de contenidos | ||||||
|---|---|---|---|---|---|---|
|
Introducción
Este documento tiene como objetivo identificar los elementos de interacción normalizados presentes en la plataforma, con una definición de comportamiento a nivel de experiencia de usuario, mostrando las vistas a nivel de wireframe y diseño UI.
Estructura general
El layout general para el área de gestión tiene un comportamiento líquido ocupando toda el área disponible de la pantalla. Se distribuirá en las siguientes áreas de navegación y visualización de información:
Figura: Vista de wireframe de estructura general de layout
Cabecera
Área siempre visible en pantalla, se divide en tres áreas según su ubicación horizontal:
...
- Sidenav izquierdo colapsable: El Sidenav Izquierdo se podrá colapsar cuando en el Espacio de trabajo se muestre un detalll de entidad o listados no correspondientes a entidades de primer nivel dentro del módulo activo, de forma similar a como se presenta en la siguiente imagen.
...
- Cambios de contexto: El cambio de contexto aplica cuando un usuario está creando o editando una entidad de contenido (p.ej. Solicitud de evaluación de ética) que pueda presentar un menú de navegación secundario y requiere de la edición de una entidad relacionada (p.ej. Memoria), que pueda también tener una navegación interna a través de un menú secundario o agrupación de campos / listados. En estos casos, en el momento del cambio de edición hacia la entidad relacionada, se realizará un cambio de contexto, esto es, un cambio de entidad que recargará el Espacio de trabajo con los datos y navegación de la nueva entidad, sustituyendo los elementos de BreadCrumb, Titular, Menú lateral y Contenido, e intentando vincular la navegación entre estas entidades relacionadas a través de botones situados bajo el menú lateral.
...
Área de trabajo
Sidenav izquierdo
Menú
Figura: Vista de wireframe de sidenav izquierdo
Se contempla un menú vertical que ocupará el sidenav izquierdo. Cada elemento de menú será presentado por un icono, un texto descriptivo de la función/sección y un icono que da acceso a la función de desplegable, mostrando las subfunciones/subsecciones del elemento de menú de primer nivel. El submenú que se despliega tras esta interacción mostrará un listado de subelementos de menú con un texto descriptivo clickable que dará acceso a la subfunción/subsección y un icono de alta de nuevo registro asociado a la entidad relacionada. Las acciones de navegación de este menú cargarán el contenido en el Espacio de trabajo.
Este menú tendrá un comportamiento colapsable cuando en el Espacio de trabajo se cargue una entidad de contenido desde un listado principal, reduciendo el espacio de visualización del Sidenav izquierdo a la presentación del icono. Existirá un comportamiento hover que desplegará el menú completo superponiendo o empujando a la derecha el Espacio de trabajo.
Figura: Vista de wireframe de sidenav izquierdo colapsado
Espacio de trabajo
El Espacio de trabajo se destina a la mostrar la información y a la gestión de entidades a través de listados y formularios. Tentro del área de trabajo se identifican los siguientes componentes:
...
El titular es el elemento de texto que identifica la sección o pantalla actual en la que se encuentra el usuario. Se corresponde con el último nivel mostrado en el Breadcrumb.
Menú vertical
...
Bajo el titular puede existir un componente de navegación vertical presentado en formato de menú desplegable. Este componente posibilitará la navegación entre grupos de campos de una entidad, si su número o complejidad así lo requieren, así como entre listados y entidades dependientes o subrogadas a la entidad principal.
...
En el área de menú vertical dentro del área de trabajo también se contempla un espacio para la inclusión de enlaces bajo el menú. Este espacio está destinado a incluir aquí enlaces de relación entre la entidad principal sobre la que está trabajando son otras entidades vinculadas. El formato de presentación será diferente para evitar la confusión confusión .
Figura: Vista de wireframe de menú vertical
Listados y tablas
Figura: Vista de wireframe de listado/tabla
En el espacio de trabajo se visualizarán listados de registros y tablas. Estos listados podrán presentar los siguientes componentes o funciones:
- Búsqueda de registros: Se trata de un componente de búsqueda situado en la parte superior de la tabla y que permitirá realizar un filtrado de registros en el listado o tabla. Presentará una serie de campos y un botón de búsqueda, así como otro para reiniciar la búsqueda y mostrar los datos sin filtrado.
- Encabezados de tabla: Ordenación
- Configurador de visibilidad de columnas: En determinados listados con formatos de tabla permitirá al usuario definir las columnas que desea visualizar así como su orden. Será un botón que abrirá una vista en modal de un formulario de configuración.
- Listado de registros: Listado de elementos con campos organizados en columnas.
- Columna de acciones: La columna derecha del listado se reservará para aglutinar las acciones de edición y borrado de los elementos, a través de iconos. Adicionalmente podrán existir otras acciones, también representadas con iconos.
- Paginación: Bajo el listado/tabla se podrá mostrar un elemento de paginación que mostrará flechas adelante y atrás, así como acceso directo al número de la página del listado de elementos que se desee visualizar.
...
- Casillas multiselección: Casillas de verificación situadas a la izquierda de cada elemento que permitirán realizar una selección múltiple de elementos de listado. En el encabezado del listado/tabla existirá una casilla de verificación que permitirá seleccionar todos los elementos del listado. Con los elementos seleccionados se podrá realizar una acción simultánea a todos los elementos utilizando el desplegable de acciones.
- Desplegable de acciones: Bajo el listado/tabla se podrá mostrar un desplegable que permitirá seleccionar la acción a realizar a todos los elementos seleccionados con las casillas multiselección.
Formularios
...
Figura: Vista de wireframe de listado/tabla con los componentes identificados
Formularios
La edición de la información de las entidades se realizará a través de campos de formulario. Los campos de formulario tendrán una etiqueta (label) que identificará si son de cumplimentación obligatoria u opcional. Los elementos de formulario disponibles serán:
...
Los campos mostrarán claramente un indicador visual que identifique un error de validación en el guardado o incumplimiento de formato.
Figura: Vista de wireframe de formulario
Área de acciones
...
Las acciones de creación o guardado sobre la entidad principal se mostrarán en un área de navegación que se situará siempre en la parte inferior de la pantalla, en posición absoluta y que por tanto estará siempre visible independientemente de la extensión del contenido que se esté mostrando en el área de trabajo. Estas acciones se mostrarán a través de botones y enlaces.
En este área también se mostrarán mensajes de aviso ante modificaciones de contenido y validación de los datos en el momento del guardado.
Figura: Vista de wireframe de área de acciones
Avisos y notificaciones
Existirán tres tipos de notificaciones que se mostrarán en el interfaz:
- Notificaciones superiores: Actuarán como mensajes emergentes que se mostrarán tras la realización de una determinada acción (guardado, no validación, etc). Podrán incluir un botón de cierre (para acciones que requerirán la acción del usuario) o bien podrán desaparecer automáticamente sin interacción.
Figura: Vista de wireframe de notificaciones superiores
- Modal de notificaciones: Se podrá mostrar como acción de bloqueo ante determinadas interacciones, como el borrado de una entidad. Mostrará un texto informativo acompañado de un botón de Cancelar la acción o bien proseguir confirmando la visualización del aviso.
Figura: Vista de wireframe de modal de notificaciones
- Tooltip de área de acciones inferior: Se mostrará a la derecha de los botones de acción principal en la Área de acciones y mostrará un icono de aviso y un texto informativo.
Figura: Vista de wireframe de tooltip de área de acciones inferior