Documento de Estndares de

Interfaz Grfica

Versin 1.0

Elaborado por:

Sandra Mendoza

F. Elaboracin:

19/01/2010

Modificado por:

Carlos Romero

F. Ultima Modificacin:

20/01/2010

Aprobado por:

Csar Rodrguez

F. Aprobacin:

21/01/2010

Sistema de Gestin Hotelera - Mdulo de Compras y Almacenes

HISTORIAL DE VERSIONES

Versin:
1.0
Realizado por:
Descripcin:
Aprobado por:

Documento Interno

Sandra Mendoza
Define los estndares de Interfaz Grfica.
Csar Rodrguez

Fecha modificacin:

19/01/2010

Fecha aprobacin :

21/01/2010

Versin: 1.0

Pgina 2 de 10

Sistema de Gestin Hotelera - Mdulo de Compras y Almacenes

NDICE

CAPTULO 1.

Estndares de Interfaz Grfica.................................................................................4

1.1.

Objetivos............................................................................................................................... 4

1.2.

Alcance................................................................................................................................. 4

CAPTULO 2.

Diseo de la interfaz grfica.....................................................................................5

2.1.

Consideraciones Generales.................................................................................................. 5

2.2.

Elementos Visuales de la Interfaz de Usuario.......................................................................6

2.2.1.

Estructura de la Ventana Inicial....................................................................................6

2.2.2.

Estructura de la Pantalla de Bsqueda de Datos.........................................................7

2.2.3.

Estructura de las Ventanas de ingreso de datos...........................................................8

2.2.4.

Mensaje de confirmacin de acciones..........................................................................9

2.2.5.

Mensaje al usuario........................................................................................................ 9

2.2.6.

Fuentes y Colores......................................................................................................... 9

2.2.7.

Botones....................................................................................................................... 10

2.2.8.

Presentacin del cuerpo del reporte...........................................................................10

Documento Interno

Versin: 1.0

Pgina 3 de 10

Sistema de Gestin Hotelera - Mdulo de Compras y Almacenes

CAPTULO 1.
1.1.

Estndares de Interfaz Grfica

Objetivos
Establecer estndares generales para el diseo de los componentes grficos en la aplicacin
a desarrollar.
El presente documento nos servir como referencia de estandarizacin de las interfaces
grficas para facilitar el desarrollo de la aplicacin, en este sentido se trabajar de manera
que se pueda uniformizar las formas y el uso de las pantallas, formatos y nombres.
Finalmente, una vez cumplido todo lo anterior permitir que el usuario final del sistema se
familiarice muy fcilmente en un corto tiempo sin perjudicar su trabajo y por el contrario
hacerlo ms ligero.

1.2.

Alcance
Todos los mdulos en los que se ha dividido el proyecto trabajarn de acuerdo a los
estndares establecidos en este documento, para de esta manera poder integrarlos
fcilmente y de manera correcta. Cabe resaltar que en el producto final, algunos elementos
pueden variar, ms no las convenciones para nombres y tamaos adems las imgenes
mostradas son referenciales y no reflejan el producto final.

Documento Interno

Versin: 1.0

Pgina 4 de 10

Sistema de Gestin Hotelera - Mdulo de Compras y Almacenes

CAPTULO 2.
2.1.

Diseo de la interfaz grfica

Consideraciones Generales
El sistema debe presentar la informacin claramente al usuario, es decir mostrar un ttulo
adecuado por cada pantalla, minimizando el uso de abreviaturas y proporcionando una
retroalimentacin de usuario clara.
El sistema debe ser consistente a lo largo de sus pantallas. Se puede lograr consistencia
por medio de:
o

Ubicacin de ttulos, fecha, hora y mensajes de operador, en todas las pantallas.

Saliendo de cada pantalla mediante la misma opcin (a travs de enlaces, botones o

pulsando sobre un grfico determinado).

El uso de colores de manera homognea para todas las pantallas.

El uso de iconos para operaciones establecidos de manera similar.

El Sistema debe realizar un reconocimiento de la aceptacin de entrada, es decir, el

reconocimiento que la entrada est en la forma correcta. Antes del envo de datos a
servidor, se debe validar en la medida de lo posible que lo que se desea ingresar sea
correcto, o, por lo menos, sea un valor posible.
El sistema debe informar de forma clara y explcita del problema con los datos ingresados
de forma clara al usuario, en los casos que sea necesario.
Los usuarios deben saber cuando su peticin esta completa y si pueden efectuar nuevas
solicitudes para ello el sistema desplegar un mensaje de retroalimentacin.
El sistema debe mostrar mensajes que ha de incluir regreso a la definicin de la peticin
para que el usuario pueda revisar si los datos fueron ingresados correctamente, en lugar de
dar comandos que no pueden ser ejecutados.
El ttulo de la pgina debe permitir al usuario identificar claramente en qu lugar del sistema
se encuentra ubicado.
En caso de interfaces secuenciales se debe permitir al usuario acceso a la siguiente o
anterior interfaz de la gua consecutiva.
Las pginas deben tener como tamao mximo una pantalla y media, tomando como base
una pantalla que tiene una resolucin de 800 x 600 pixeles.
Los campos de solo lectura aparecern sombreados, mientras que los campos editables
sern de fondo blanco. Otra caracterstica de los campos no editables es que al estar
deshabilitados no reciben el enfoque.
El enfoque de los controles van de arriba hacia abajo y de izquierda a derecha, se tendr
en cuenta que los campos no editables no recibirn el enfoque.

Documento Interno

Versin: 1.0

Pgina 5 de 10

Sistema de Gestin Hotelera - Mdulo de Compras y Almacenes

2.2.

Elementos Visuales de la Interfaz de Usuario

2.2.1. Estructura de la Ventana Inicial

La ventana inicial tendr las siguientes caractersticas estructurales:
Barra de ttulo, donde se indique el ttulo de la funcionalidad que se est cargando.
Barra de men, en esta zona aparece las principales opciones de las funcionalidades del
sistema.
Pantalla funcional: en esta zona, se visualizar la interfaz propia a la funcionalidad que se
est utilizando.
En el siguiente grfico se muestra la estructura de la ventana inicial:

Barra de
Titulo

VENTANA DE INICIO
Ttulo

Men 1
Barra de
Men

Men 2

Opcin 1
Opcin 2

PANTALLA FUNCIONAL

Documento Interno

Versin: 1.0

Pgina 6 de 10

Sistema de Gestin Hotelera - Mdulo de Compras y Almacenes

2.2.2. Estructura de la Pantalla de Bsqueda de Datos

Las pantallas de bsqueda de informacin estn compuestas por dos secciones, en la
primera se ubicarn los filtros especificados de acuerdo al tipo de consulta, mientras que en la
segunda seccin se visualizar el resultado de la consulta.

Barra de
Titulo

Pantalla de Bsqueda de Datos

Ttulo
Logo

Subttulo

botonera
Filtros

Limpiar

Etiqueta 1
Etiqueta 2

Buscar

Grilla que muestra resultado de consulta

2.2.3. Estructura de las Ventanas de ingreso de datos

Documento Interno

Versin: 1.0

Pgina 7 de 10

Sistema de Gestin Hotelera - Mdulo de Compras y Almacenes

Estas pantallas contendrn cuadros de texto o cajas de seleccin para el ingreso de datos; cada uno de los cuales tendrn su
correspondiente etiqueta de texto que identifique dichos elementos.
En el siguiente grfico se muestra la estructura de una pantalla de ingreso de datos:

Documento Interno

Versin: 1.0

Pgina 8 de 10

Sistema de Gestin Hotelera - Mdulo de Compras y Almacenes

2.2.4. Mensaje de confirmacin de acciones

CUADROS DE DIALOGO

Etiquetas
de texto

STOP

Desea guardar los

cambios realizados?
Aceptar

Cancelar

Botones de
Accin
Imagen de llamada
de atencin

2.2.5. Mensaje al usuario

2.2.6. Fuentes y Colores

Documento Interno

Fuentes

Microsoft Sans Serif, 8.25pt

Color de la fuente

#000000

Color de fondo (formulario)

#ECE9D8

Versin: 1.0

Pgina 9 de 10

Sistema de Gestin Hotelera - Mdulo de Compras y Almacenes

2.2.7. Botones
Botones Men
Agregar

Editar

Eliminar

Botones de accin
Buscar
Limpiar
Grabar
Cancelar

2.2.8. Presentacin del cuerpo del reporte

FECHA:

dd/mm/yyyy

TITULO
Sub Titulo

Documento Interno

Versin: 1.0

Pgina 10 de 10