LINEAMIENTOS DE INTERFAZ GRAFICA:

Uso de maysculas y minsculas

La letra inicial de cualquier texto debe estar en mayscula. 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 botn de accin, el sistema

mostrar un tooltip al situar el cursor sobre el campo, indicando un mensaje de
validacin. Ver Manejo de campos requeridos.

Al situar el cursor sobre una imagen, se mostrar un tooltip con un mensaje

descriptivo de la imagen.

Tabulacin
1. El orden de tabulacin es de izquierda-derecha y de arriba-abajo.
2. Cuando se carga una pgina 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 pgina 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 ttulo del campo, indicando la obligatoriedad de la informacin. Dicho asterisco
debe hacer parte de la etiqueta (literal o label).
Ejemplo:

Nota: El estilo del asterisco ser establecido por medio de otras

tecnologas como JQuery.
4

Para el escenario en que el usuario presiona el botn de accin (guardar,

consultar, etc.), el sistema deber indicar la obligatoriedad del campo de la
siguiente manera:
a

Se presentar un mensaje describiendo la situacin: Por favor verifique los

datos..

El fondo del campo cambiar de color.

Al ubicar el cursor sobre el campo, se mostrar un tooltip con un mensaje

de validacin: Campo requerido.. El tooltip se mostrar al ubicar el cursor
sobre el campo.

Ejemplo:

1.1

Errores de validacin de los campos

Para el escenario en que el usuario presiona el botn de accin (guardar, consultar, etc.),
el sistema deber indicar los errores de validacin de campos de la siguiente manera:
a)

Se presentar un mensaje describiendo la situacin: 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 validacin 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
slo indicar que el valor ingresado no es correcto.

1.2

Ttulos de pantallas

Se debe cumplir con las siguientes caractersticas:

(1.)

Cumplir con el numeral 5.1.

(2.)

Deben cumplir con la siguiente regla de formacin:

Nombre del sistema Nombre de la funcionalidad

Ejemplo: Seguridad de presas Administrar tipos de instrumentos

1.3

Visualizacin de tiempo de procesamiento

Mientras el sistema procese peticiones de consulta, modificacin o creacin se

mostrar la siguiente imagen:

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 utilizacin de un campo o botn, se debe desactivar en

lugar de poner invisible. Esto con el propsito de que el usuario tenga conocimiento que la
opcin existe pero no est disponible en el momento.
Las excepciones a esta regla se definirn para cada aplicacin.

1.5

Manejo de botones del navegador

Los botones del navegador tendrn el uso estndar.

1.6

Crear, eliminar y actualizar con GridViews o tablas de resultados

Cuando se tenga informacin diligenciada en GridViews o tablas de resultados, las

acciones de seleccionar, crear, eliminar y/o actualizar tomarn nicamente la informacin
mostrada y/o afectada de la pgina actual (en caso de que el GridView tenga paginacin).

MEN

2.1

Ubicacin

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

LINEAMIENTOS PARA MENSAJES

3.1

Tipos de mensajes

A continuacin se describen los diferentes tipos de mensajes que mostrar el sistema:

7

Mensaje tipo pregunta: cuando se requiera solicitar confirmacin para ejecucin

de una operacin por parte del usuario, se deber mostrar un mensaje emergente
con el que el usuario pueda interactuar.

Mensaje tipo error: cuando se presente un error en la informacin de entrada

para ejecucin de una operacin 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.

Mensaje tipo advertencia: cuando se presente una inconsistencia en la

informacin de entrada para ejecucin de una operacin 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 operacin

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 aplicacin se presentarn en la parte superior

de la misma pantalla en la que el usuario se encuentre realizando la operacin como un
mensaje de error.

3.3

Ejemplo

(1.)

Mensaje tipo Pregunta:

(2.)

Mensaje tipo Error:

(3.)

Mensaje tipo Advertencia:

(4.)

Mensaje tipo Informacin:

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 globalizacin 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 aos.
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 ao, por los
cuales se podr navegar y seleccionar la fecha deseada.

2. Si se presiona clic sobre el ao ubicado en la parte superior (para la imagen

anterior es 2010), se presentar una lista de 12 aos 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 Ao/Mes

En algunos casos se requiere ingresar la fecha pero indicando nicamente el mes de un

ao (sin el da), 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 aos.
Normalmente aparece el listado de meses para el ao actual, de los cuales se podr
seleccionar el mes deseado.

Este calendario tiene las siguientes utilidades:

1. Si se presiona clic sobre el ao ubicado en la parte superior (para la imagen
anterior es 2011), se presentar una lista de 12 aos 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
da).

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:

12

13

a AAAA: representa 4 dgitos que indican el ao.

b MM: representa 2 dgitos que indican el mes.
c DD: representa 2 dgitos que indican el da.
El formato para los valores de tipo Ao-Mes es AAAA/MM, donde:
a AAAA: representa 4 dgitos que indican el ao.
b MM: representa 2 dgitos que indican el mes.
El formato para los valores tipo hora es hh:mm:ss tt, donde:

a hh: representa 2 dgitos de la hora.

b mm: representa 2 dgitos que indican los minutos.
c ss: representa 2 dgitos 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

Smbolo de moneda: $.

3.5.3

Porcentajes

(1.)

El smbolo del porcentaje debe ir despus del nmero: 12,23%

3.5.4

Nmeros

16

Separador de decimales: coma (,).

17

Separador de miles: punto (.).

18

El tamao de un nmero decimal no tiene en cuenta el separador de decimales.

3.6

Maestros

Dado que los maestros tienen funcionalidades bsicas y comunes, a continuacin se

describen:
3.6.1

Mensajes generales

Los siguientes mensajes hacen parte del conjunto de mensajes genricos que se
presentarn de acuerdo al escenario descrito a continuacin:
19

Mensaje de creacin: Se ha creado el registro exitosamente.

20

Mensaje de eliminacin: Se han eliminado exitosamente {0} de {1} registros

seleccionados.

21

Mensaje consulta sin informacin: No fue posible encontrar registros para los
filtros ingresados.

22

Mensaje de actualizacin: Se ha modificado el registro exitosamente.

3.6.2

Navegabilidad

3.6.2.1

Eliminar

El sistema permitir la eliminacin de mltiples registros: para esto, la tabla de resultados

tendr un control de seleccin (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 botn que realiza la

operacin.

(2.)

El sistema deber presentar un mensaje tipo Pregunta, donde el usuario pueda

tomar la decisin de eliminar.

(3.)

En caso de seleccionar la opcin 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 nmero de registros eliminados del total seleccionado, y a su
vez, en la tabla de resultados colorear los registros que no pudieron ser
eliminados.