LINEAMIENTOS DE INTERFAZ GRAFICA:

Uso de mayúsculas y minúsculas

La letra inicial de cualquier texto debe estar en mayúscula. Ejemplos: Mi formulario, Guardar lectura.

Tooltips

Se define el uso de tooltips para los siguientes escenarios:

(1.) Cuando un campo es requerido, el usuario presiona el botón de acción, el sistema mostrará un tooltip al situar el cursor sobre el campo, indicando un mensaje de validación. Ver Manejo de campos requeridos.

(2.) Al situar el cursor sobre una imagen, se mostrará un tooltip con un mensaje descriptivo de la imagen.

Tabulación

1. El orden de tabulación es de izquierda-derecha y de arriba-abajo.

2. Cuando se carga una página se debe establecer el foco o cursor en el primer control que permita visualizar que el campo está activo. Para definir éste primer control, se debe recorrer la página de izquierda-derecha y de arriba-abajo.

Manejo de campos requeridos

(3.) Para cada campo que sea requerido, se deberá mostrar un asterisco a la izquierda del título del campo, indicando la obligatoriedad de la información. Dicho asterisco debe hacer parte de la etiqueta (literal o label).

Ejemplo:

Nota: El estilo del asterisco será establecido por medio de otras tecnologías como JQuery.

(4.) Para el escenario en que el usuario presiona el botón de acción (guardar, consultar, etc.), el sistema deberá indicar la obligatoriedad del campo de la siguiente manera:

a) Se presentará un mensaje describiendo la situación: “Por favor verifique los datos.”.

b) El fondo del campo cambiará de color.

c) Al ubicar el cursor sobre el campo, se mostrará un tooltip con un mensaje de validación: “Campo requerido.”. El tooltip se mostrará al ubicar el cursor sobre el campo.

Ejemplo:

1.1 Errores de validación de los campos

Para el escenario en que el usuario presiona el botón de acción (guardar, consultar, etc.), el sistema deberá indicar los errores de validación de campos de la siguiente manera:

a) Se presentará un mensaje describiendo la situación: “Por favor verifique los datos.”.

b) El fondo del campo cambiará de color.

c) Al ubicar el cursor sobre el campo, se mostrará un tooltip con el mensaje respectivo. El tooltip se mostrará al ubicar el cursor sobre el campo.

Ejemplo:

Algunas de las validaciones son:

a) No se cumple con una validación de rango. El mensaje del tooltip debe indicar los valores desde y hasta que conforman el rango.

b) No se cumple con el formato. El mensaje del tooltip debe indicar el formato correcto. En campos donde el formato es intuitivo, se puede obviar el formato y sólo indicar que el valor ingresado no es correcto.

1.2 Títulos de pantallas

Se debe cumplir con las siguientes características:

(1.) Cumplir con el numeral 5.1.

(2.) Deben cumplir con la siguiente regla de formación:

Nombre del sistema – Nombre de la funcionalidad

Ejemplo: Seguridad de presas – Administrar tipos de instrumentos

1.3 Visualización de tiempo de procesamiento

(5.) Mientras el sistema procese peticiones de consulta, modificación o creación se mostrará la siguiente imagen:

(6.) Mientras el sistema procese peticiones para upload (carga de documentos) o download (descarga de documentos) de archivos se mostrará una barra de avance.

1.4 Activar/desactivar campos o botones

Cuando se requiera indicar la no utilización de un campo o botón, se debe desactivar en lugar de poner invisible. Esto con el propósito de que el usuario tenga conocimiento que la opción existe pero no está disponible en el momento.

Las excepciones a esta regla se definirán para cada aplicación.

1.5 Manejo de botones del navegador

Los botones del navegador tendrán el uso estándar.

1.6 Crear, eliminar y actualizar con GridViews o tablas de resultados

Cuando se tenga información diligenciada en GridViews o tablas de resultados, las acciones de seleccionar, crear, eliminar y/o actualizar tomarán únicamente la información mostrada y/o afectada de la página actual (en caso de que el GridView tenga paginación).

2 MENÚ

2.1 Ubicación

El menú estará ubicado en la parte superior del sistema y de manera horizontal.

3 LINEAMIENTOS PARA MENSAJES

3.1 Tipos de mensajes

A continuación se describen los diferentes tipos de mensajes que mostrará el sistema:

(7.) Mensaje tipo pregunta: cuando se requiera solicitar confirmación para ejecución de una operación por parte del usuario, se deberá mostrar un mensaje emergente con el que el usuario pueda interactuar.

(8.) Mensaje tipo error: cuando se presente un error en la información de entrada para ejecución de una operación por parte del usuario, se deberá mostrar un mensaje en la parte superior de la ventana con un ícono alusivo al hecho. Este tipo de mensaje se presenta por escenarios inesperados para el usuario, ejemplo: indisponibilidad del sistema, indisponibilidad de la base de datos, etc.

(9.) Mensaje tipo advertencia: cuando se presente una inconsistencia en la información de entrada para ejecución de una operación por parte del usuario, se deberá mostrar un mensaje en la parte superior de la ventana con un ícono alusivo al hecho. Este tipo de mensaje se presenta por escenarios en que el usuario ingresó algo indebido.

(10.) Mensaje tipo informativo: cuando se ejecute satisfactoriamente una operación en el sistema, se deberá mostrar el mensaje respectivo en la parte superior de la ventana con un ícono alusivo al hecho.

3.2 Excepciones

Los mensajes asociados a excepciones de aplicación se presentarán en la parte superior de la misma pantalla en la que el usuario se encuentre realizando la operación como un mensaje de error.

3.3 Ejemplo

(1.) Mensaje tipo Pregunta:

(2.) Mensaje tipo Error:

(3.) Mensaje tipo Advertencia:

(4.) Mensaje tipo Información:

3.4 Campos de fechas

Se contará con una caja de texto y una imagen a su derecha que representa el calendario.

Nota: El idioma del calendario dependerá de la globalización o cultura del sistema.

Cuando se desee borrar una fecha seleccionada, se debe hacer clic sobre el ícono que representa una “X” que aparece al lado derecho de la imagen del calendario.

Nota: Dicho ícono será visible siempre y cuando exista una fecha seleccionada y se pueda editar.

3.4.1 Campos de fechas comunes

Para ingresar la fecha, se debe hacer clic sobre la imagen dado que la caja de texto no es editable, de esta manera se despliega un cuadro con el calendario de todos los años. Normalmente aparece el mes actual.

Este calendario tiene las siguientes utilidades:

1. Si se presiona clic sobre el nombre del mes ubicado en la parte superior (para la imagen anterior es “December”), se presentará la lista de meses del año, por los cuales se podrá navegar y seleccionar la fecha deseada.

2. Si se presiona clic sobre el año ubicado en la parte superior (para la imagen anterior es “2010”), se presentará una lista de 12 años relacionados, por los cuales se podrá navegar y seleccionar la fecha deseada.

3. Si se presiona clic sobre la fecha ubicada en la parte inferior (para la imagen anterior es “Today: December 11, 2010”), se seleccionará la fecha actual.

3.4.2 Campos de fechas Año/Mes

En algunos casos se requiere ingresar la fecha pero indicando únicamente el mes de un año (sin el día), para esto se debe hacer clic sobre la imagen dado que la caja de texto no es editable, de esta manera se despliega un cuadro con el calendario de todos los años. Normalmente aparece el listado de meses para el año actual, de los cuales se podrá seleccionar el mes deseado.

Este calendario tiene las siguientes utilidades:

1. Si se presiona clic sobre el año ubicado en la parte superior (para la imagen anterior es “2011”), se presentará una lista de 12 años relacionados, por los cuales se podrá navegar y seleccionar la fecha deseada.

2. Si se presiona clic sobre la fecha ubicada en la parte inferior (para la imagen anterior es “Today: octubre 22, 2011”), se seleccionará la fecha actual (sin incluir el día).

3.5 Formatos y manejo de tipos de datos

3.5.1 Fecha y Hora

(11.) El formato para los valores de tipo fecha es DD/MM/AAAA, donde:

a) AAAA: representa 4 dígitos que indican el año.

b) MM: representa 2 dígitos que indican el mes.

c) DD: representa 2 dígitos que indican el día.

(12.) El formato para los valores de tipo Año-Mes es AAAA/MM, donde:

a) AAAA: representa 4 dígitos que indican el año.

b) MM: representa 2 dígitos que indican el mes.

(13.) El formato para los valores tipo hora es hh:mm:ss tt, donde:

a) hh: representa 2 dígitos de la hora.

b) mm: representa 2 dígitos que indican los minutos.

c) ss: representa 2 dígitos que indican los segundos.

d) tt: permite indicar si la hora es a.m. o p.m.

El formato para fecha con hora es una mezcla de los dos formatos anteriores.

(14.) El valor en los controles de tipo fecha no debe ser mayor a la fecha actual a menos que se especifique lo contrario en el caso de uso. Si el valor en un control de tipo fecha es mayor a la fecha actual, se debe presentar el mensaje “La fecha ingresada supera a la fecha actual. Por favor verifique e intente nuevamente.”.

3.5.2 Moneda

(15.) Símbolo de moneda: $.

3.5.3 Porcentajes

(1.) El símbolo del porcentaje debe ir después del número: 12,23%

3.5.4 Números

(16.) Separador de decimales: coma (,).

(17.) Separador de miles: punto (.).

(18.) El tamaño de un número decimal no tiene en cuenta el separador de decimales.

3.6 Maestros

Dado que los maestros tienen funcionalidades básicas y comunes, a continuación se describen:

3.6.1 Mensajes generales

Los siguientes mensajes hacen parte del conjunto de mensajes genéricos que se presentarán de acuerdo al escenario descrito a continuación:

(19.) Mensaje de creación: “Se ha creado el registro exitosamente.”

(20.) Mensaje de eliminación: “Se han eliminado exitosamente {0} de {1} registros seleccionados.”

(21.) Mensaje consulta sin información: “No fue posible encontrar registros para los filtros ingresados.”

(22.) Mensaje de actualización: “Se ha modificado el registro exitosamente.”

3.6.2 Navegabilidad

3.6.2.1 Eliminar

El sistema permitirá la eliminación de múltiples registros: para esto, la tabla de resultados tendrá un control de selección (checkBox) por registro donde el usuario podrá seleccionar varios registros a la vez. El comportamiento cuando se requiera eliminar deberá ser el siguiente:

(1.) El usuario selecciona los registros a eliminar y presiona el botón que realiza la operación.

(2.) El sistema deberá presentar un mensaje tipo Pregunta, donde el usuario pueda tomar la decisión de eliminar.

(3.) En caso de seleccionar la opción que permite eliminar, el sistema intentará eliminar los registros seleccionados. Dado que es posible que algunos de los registros seleccionados no puedan ser eliminados, el sistema presentará un mensaje indicando el número de registros eliminados del total seleccionado, y a su vez, en la tabla de resultados coloreará los registros que no pudieron ser eliminados.