Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Estandar de Diseño de Aplicaciones de Escritorio PDF
Estandar de Diseño de Aplicaciones de Escritorio PDF
Versin 1.0.0
Setiembre 2008
TIC-DES-0019
Versin: 1.0
Historial de Revisiones
Fecha
Versin
Descripcin
Autor
01/09/2005
1.0
CCSS, 2008
ii
TIC-DES-0019
Versin: 1.0
Tabla de Contenidos
1.
Introduccin ........................................................................................................... 1
2.
Objetivos ................................................................................................................. 1
2.1
2.2
Objetivo General......................................................................................................... 1
Objetivos Especficos ................................................................................................. 1
3.
Justificacin ........................................................................................................... 2
4.
4.2
4.3
4.4
4.4.1
4.4.2
4.4.3
4.4.4
4.5
4.5.1
4.5.2
4.5.3
4.5.4
4.6
5.
Recomendaciones ............................................................................................... 29
6.
Conclusin............................................................................................................ 30
7.
Glosario ................................................................................................................ 30
CCSS, 2008
iii
TIC-DES-0019
Versin: 1.0
Introduccin
Debido a que las interfaces de usuario representan el medio por cual se puede interactuar con las
aplicaciones informticas, resulta de vital importancia que stas sean diseadas de manera que faciliten
la comunicacin USUARIO - SISTEMA y SISTEMA - USUARIO.
Seguir lineamientos y acatar recomendaciones para el diseo de dichas interfaces permite que los
usuarios de sistemas de informacin se familiaricen ms rpidamente con su uso, ya que existe un
estndar establecido que funciona como un patrn que determina cmo se comporta la aplicacin.
As como cada organizacin o institucin posee su identidad, por el uso de logos o colores
descriptivos, la estandarizacin en el diseo de las interfaces de usuario permite otorgar una identidad
nica a la Institucin en este sentido tambin.
Este documento es una propuesta de estndar de diseo de interfaces de usuario para las
aplicaciones de escritorio que se desarrollen para la Institucin. Dicho documento sirve como un marco
de referencia que gua los procesos de implementacin de aplicaciones de este tipo.
2.
Objetivos
Objetivo General
Objetivos Especficos
Disponer de una herramienta que sirva como gua para el diseo de las interfaces de usuario
para las aplicaciones de escritorio que sean implementadas para la Institucin.
CCSS 2008
1 de 34
TIC-DES-0019
Versin: 1.0
Establecer las caractersticas bsicas que deben cumplir las interfaces de usuario en lo que ha
estructura se refiere, con el fin de ordenar y estandarizar la manera que el usuario interacta
con las aplicaciones.
3.
Justificacin
La Direccin de Tecnologas de Informacin y Comunicaciones, como parte de sus prioridades, ha
retomado el tema de estandarizacin de los distintos procesos que forman parte de su mbito de accin
dentro de la Institucin. La idea es aprovecharse de este tipo de herramientas para que sirvan como un
insumo que ordene, oriente y gue los distintos esfuerzos relacionados con el desarrollo de software y
otras tareas enmarcadas dentro del mbito de tecnologas de informacin y comunicaciones.
4.
Barra de Ttulo
Seccin Superior
Seccin
Izquierda
Seccin Central
Seccin
Derecha
Seccin Inferior
CCSS 2008
2 de 34
TIC-DES-0019
Versin: 1.0
Barra de Ttulo
Seccin Superior
Seccin Izquierda
Seccin Derecha
Seccin Central
Seccin Inferior
Figura 2: Secciones de una ventana de manera grfica
Con la finalidad de simplificar la forma en que se deben estructurar las ventanas, esto para lograr un
mejor entendimiento en cuanto a la distribucin de los distintos elementos que las conforman, para los
siguientes apartados, se tomar como referencia la divisin de la ventana en las secciones detalladas en
la Figura 3.
Barra de Ttulo
Seccin Superior
Seccin Central
Seccin Inferior
Figura 3: Secciones de una ventana a utilizar para definir propuesta de estndar
CCSS 2008
3 de 34
TIC-DES-0019
Versin: 1.0
Como se puede notar, lo que antes se conoca como seccin izquierda y seccin derecha, ahora
forman parte como un todo de la seccin central. Las restantes secciones se mantienen igual, sin
variacin.
A continuacin se detalla cmo deben emplearse estas secciones en las distintas interfaces de
usuario que puede tener una aplicacin de escritorio.
4.1.1
Son aquellas que permiten al sistema autenticar y autorizar a los usuarios para utilizar un dado
sistema de informacin. Esto ocurre cuando se ingresan los datos de identificacin a travs de la interfaz
que provee la aplicacin para tal finalidad.
A. Barra de Ttulo
En la parte izquierda se debe mostrar una imagen (icono) alusiva a la funcionalidad que tiene
esta interfaz: validar los credenciales de los usuarios para permitir o denegar el acceso a las
funciones del sistema de informacin.
Se debe agregar un ttulo para la ventana, el cual debe estar compuesto por: SIGLAS DE LA
APLICACIN + UN GUIN (-) + la frase Ingreso al Sistema.
B. Seccin Superior
Esta seccin no se utilizar.
C. Seccin Central
En la parte izquierda debe existir un control que permita mostrar el logo de la aplicacin.
Estar rodeado por un marco (Frame).
Los controles para la autenticacin y autorizacin del usuario tienen que estar al lado derecho
del logo de la aplicacin. Estarn rodeados por un marco (Frame).
Deben existir dos botones, separados por un marco (Frame), los cuales estarn ubicados
debajo de los controles definidos para la autenticacin y autorizacin de los usuarios.
D. Seccin Inferior
Debe estar conformada por una barra de estado que muestre, de izquierda a derecha:
o
El logo de la Institucin
CCSS 2008
4 de 34
TIC-DES-0019
Versin: 1.0
NOTAS
Se recomienda mostrar la fecha del sistema en la barra de estado, hasta donde sea posible,
en la seccin inferior de la ventana. De aplicarse esta recomendacin, tiene que ubicarse en la
parte derecha de dicha barra.
La Figura 4 es una representacin de cmo deberan verse las ventanas de ingreso a los sistemas
de informacin, tomando en consideracin los apartados anteriores.
4.1.2
Son aquellas que se muestran una vez que se ha completado el inicio de sesin en el sistema de
forma satisfactoria, es decir, el sistema ha autenticado y autorizado al usuario para que pueda operar la
aplicacin.
Es en estas ventanas donde se ubica el men de todas las acciones que puede realizar el usuario en
el sistema.
A. Barra de Ttulo
CCSS 2008
5 de 34
TIC-DES-0019
Versin: 1.0
B. Seccin Superior
Debe contar con una barra de men que detalle cada una de las acciones a las que puede
acceder el usuario dependiendo de los permisos que posea (perfil). Dicha barra requiere tener
incorporada dos opciones bsicas:
o
Salir de la aplicacin.
Adems de cumplir con lo anterior, tiene que ajustarse a las siguientes caractersticas:
La ventana de Acerca de
C. Seccin Central
Opcionalmente, se puede colocar en esta seccin una etiqueta que identifique la unidad
usuaria del sistema.
D. Seccin Inferior
Debe estar conformada por una barra de estado que muestre, de izquierda a derecha:
o
El logo de la Institucin.
CCSS 2008
6 de 34
TIC-DES-0019
Versin: 1.0
NOTAS
Como parte del logo de la aplicacin: Se puede incorporar una imagen oficial de la
Institucin o un texto con el nombre completo de Institucin.
De manera alternativa, se podr utilizar la barra de estado de esta ventana para mostrar otro
tipo de informacin relevante para el sistema, por ejemplo: el nombre de la estacin de trabajo,
el nombre del servidor de base de datos, otros detalles.
La imagen de la Figura 5 indica cmo deberan disearse las ventanas de men principal de los
sistemas de informacin, de acuerdo a lo visto anteriormente.
CCSS 2008
7 de 34
4.1.3
TIC-DES-0019
Versin: 1.0
VENTANAS DE PROCESOS
Las ventanas catalogadas dentro de esta categora son todas aquellas que posibilitan al usuario la
ejecucin de acciones en la aplicacin. Representan la parte operacional del sistema, su razn de ser.
A. Barra de Ttulo
Debe mostrar como ttulo: SIGLAS DE LA APLICACIN + UN GUIN (-) + Nombre del
Proceso o Funcionalidad de la Ventana. El nombre del proceso se define a criterio del
diseador.
B. Seccin Superior
Debe tener establecida una barra de botones grficos con las alternativas disponibles al
usuario de acuerdo a la funcionalidad de la ventana. Si no se define una barra de men, ser
obligatorio que exista una opcin de ayuda en la barra de botones.
De manera opcional, se podr utilizar una barra de men que permita mostrar las acciones
disponibles a travs de la barra de botones grficos, as como otras alternativas no disponibles
por medio de tales botones (por motivo de espacio o esttica de la ventana). En caso de
emplearse debe ajustarse a lo siguiente:
o
Tendr un men llamado Ayuda que permita acceder a la ayuda en lnea para la
ventana de proceso. En otras palabras, este men tendr una opcin que posibilitar
la invocacin de la ayuda en lnea de la ventana (estar a la derecha de la barra).
C. Seccin Central
Debe estar rodeada por un marco (Frame).
D. Seccin Inferior
Debe estar conformada por una barra de estado que permita mostrar, de izquierda a derecha:
o
El logo de la Institucin.
La fecha de la aplicacin.
CCSS 2008
8 de 34
TIC-DES-0019
Versin: 1.0
Aunque las ventanas de este tipo, en general, obedecen a una estructura genrica, s pueden
presentar alguna variacin en cuanto a cmo debe utilizarse su seccin central. Los apartados que a
continuacin se detallan, describen las consideraciones ms importantes que deben ser tomadas en
cuenta dependiendo del tipo de ventana de proceso que se desee disear.
Para todas, debe existir una secuencia establecida para el ingreso, la modificacin y la
exclusin de la informacin, la cual debe ser respetada por el usuario.
La barra de botones grficos para estas ventanas debe tener al menos las siguientes
opciones:
o
CCSS 2008
9 de 34
Salir de la ventana.
TIC-DES-0019
Versin: 1.0
1. Para ventanas diseadas con el fin de efectuar cargas de datos mediante archivos a una fuente de
datos cualesquiera y generacin de archivos a partir de una fuente de datos cualesquiera, se deben
seguir estas directrices:
Se requiere que cuente con una barra de progreso que indique visualmente el avance del
proceso que se est realizando.
CCSS 2008
10 de 34
TIC-DES-0019
Versin: 1.0
2. Aquellas ventanas utilizadas para realizar procesos para los cuales no existe un tiempo establecido o
se desconoce la cantidad de transacciones que se deben hacer, tomar en cuenta lo siguiente:
Se tienen que emplear animaciones u otros mecanismos visuales que indiquen al usuario que
se est procesando informacin.
Para ambos casos, se tendr que utilizar la barra de estado para mostrarle al usuario que el proceso
se encuentra en ejecucin, as como cambio en el tipo de puntero del ratn (mouse) para indicar que se
est efectuando una tarea.
La Figura 8 es un ejemplo de una ventana para procesamientos masivos.
CCSS 2008
11 de 34
TIC-DES-0019
Versin: 1.0
Permitir al menos un criterio de bsqueda que facilite la seleccin del elemento que se
necesita localizar.
Proveer como mnimo un mecanismo de seleccin de los datos del catlogo mostrados en el
tabulado, luego de la bsqueda.
NOTAS
El uso de los botones minimizar, maximizar y cerrar queda a criterio del desarrollador, siempre
y cuando todas las ventanas sean consistentes en estas caractersticas.
CCSS 2008
12 de 34
TIC-DES-0019
Versin: 1.0
Cuando una ventana requiera la colaboracin de una de lista de valores, se puede hacer de
las siguientes formas:
o
Colocar a la par del dato de entrada un botn que permita acceder a lista de valores.
Emplear una tecla de acceso rpido a la lista de valores (siempre ser requerido.
Vase punto 5 del apartado 4.6 para detalle sobre la tecla a emplear).
4.1.4
VENTANAS DE MENSAJES
Su finalidad consiste en desplegar distintos tipos de mensajes al usuario por medio de una ventana
con imgenes o iconos. Estas pueden mostrarse para informar, solicitar una confirmacin, indicar un
error u otro tipo de situacin particular que debe ser de conocimiento del operador de la aplicacin, sea
para que se d por enterado o para que resuelva el mensaje con una accin especfica.
La mayora de los entornos de desarrollo de aplicaciones tienen ya definidas estas ventanas como
parte de los elementos que puede reutilizar el diseador, sin la necesidad de implementar la
funcionalidad nuevamente. Por esta razn, es conveniente que antes de disear estas ventanas, se
investigue si el lenguaje de programacin ya tiene implementadas estas ventanas de mensajes de forma
nativa.
A. Barra de Ttulo
B. Seccin Superior
Esta seccin no se utilizar.
C. Seccin Central
Deber mostrar una imagen o icono alusivo al tipo de mensaje que se mostrar al usuario
(ms adelante se ahondar en los tipos de mensajes). Este estar alineado a la izquierda de la
seccin.
Al lado de la imagen o icono se mostrar el mensaje al usuario. Este debe ser claro y
entendible.
Existir al menos un botn que permita al usuario dar por aceptado el mensaje. La cantidad de
botones depender del tipo de mensaje.
CCSS 2008
13 de 34
TIC-DES-0019
Versin: 1.0
D. Seccin Inferior
Esta seccin no se utilizar.
Informar que producto de una consulta dada, no hubo resultados; es decir, no se encontraron
registros de acuerdo a los criterios de consulta establecidos.
CCSS 2008
14 de 34
TIC-DES-0019
Versin: 1.0
Informar que no se puede procesar una solicitud ya que faltan datos por ingresar.
Informar que producto de una consulta dada, no hubo resultados; es decir, no se encontraron
registros de acuerdo a los criterios de consulta establecidos.
Informar que se han realizado cambios en el repositorio de datos que pueden ser crticos para
el sistema de informacin en general.
CCSS 2008
15 de 34
TIC-DES-0019
Versin: 1.0
NOTAS
No se permite mostrar ventanas de mensajes sin una imagen o icono. Todos los mensajes que
se ocupen dar a conocer al usuario tienen que asociarse a alguno de los tipos descritos
anteriormente.
La cantidad de botones que se utilicen en estas ventanas queda a criterio del desarrollador de
la aplicacin, el cual conoce en detalle cmo espera la respuesta del usuario ante tales
mensajes.
4.1.5
Para ms detalles sobre el uso de estas ventanas, refirase al apartado 4.5.1 de este manual.
VENTANAS ACERCA DE
Dichas ventanas describen la aplicacin que est en uso. Su objetivo es informar al usuario el
nombre de la aplicacin, la versin actual del programa, as como otros detalles relevantes.
A. Barra de Ttulo
CCSS 2008
16 de 34
TIC-DES-0019
Versin: 1.0
B. Seccin Superior
Esta seccin no se utilizar.
C. Seccin Central
El nombre asignado.
D. Seccin Inferior
Esta seccin no se utilizar.
NOTAS
Al lado del nmero de la versin del producto tiene que indicarse el mes en letras y el ao en
que fue puesta en produccin dicha versin.
CCSS 2008
17 de 34
TIC-DES-0019
Versin: 1.0
Esta ventana, una vez diseada, tiene que ser similar a la que se muestra en la Figura 15.
4.1.6
Estas ventanas funcionan como un anexo de las de Acerca de. Su funcin bsica es informar sobre
la propiedad intelectual del sistema de informacin desarrollado, adems mostrar el nmero de placa
asignado, como activo que es para la Institucin.
E. Barra de Ttulo
F. Seccin Superior
Esta seccin no se utilizar.
G. Seccin Central
Deber mostrar el mismo encabezado diseado para las ventanas Acerca de. Para detalles
refirase al apartado 4.1.5 de este documento.
Debajo del encabezado se incluir el texto oficializado por la Institucin para este fin
(propiedad intelectual). Este texto deber estar alineado a la izquierda.
CCSS 2008
18 de 34
TIC-DES-0019
Versin: 1.0
El nmero de placa asignado al sistema como activo institucional debe estar colocado de
manera que sea fcilmente visible. Para darle el sentido de activo institucional, se tendr que
digitalizar la placa metlica asignada por la Seccin Contabilidad de Bienes Mubles y
Suministros y colocarla como una imagen en esta ventana.
Existir un botn que permitir cerrar la ventana. Ser identificado por la palabra Aceptar.
H. Seccin Inferior
Esta seccin no se utilizar.
NOTAS
El texto de propiedad intelectual que se agregar a estas ventanas ser el que al momento de
desarrollar la aplicacin est vigente.
Grficamente, una ventana de propiedad intelectual tiene que verse como la Figura 16.
CCSS 2008
19 de 34
TIC-DES-0019
Versin: 1.0
1. El tamao mnimo recomendado para una ventana es 800 x 568 pxeles (ancho x alto). Esto con el
fin de que pueda operar en estaciones de trabajo cuya resolucin de monitor sea de 800 x 600
pxeles o superior.
2. Si el sistema requiere utilizar ventanas cuyo tamao supere las dimensiones recomendadas en el
punto anterior, el diseador deber tomar en consideracin que las estaciones de trabajo en donde
opere la aplicacin, tengan monitores capaces de soportar esa resolucin, de manera que el usuario
no tenga problemas con su visualizacin.
4. Los controles incluidos en cada una de las ventanas deben ser distribuidos de forma que no se dejen
grandes espacios vacos en ella, esto con el fin de mantener su esttica. As mismo, el tamao de
las ventanas debe estar ajustado a la cantidad de elementos o controles que haya en ellas.
permitan un auto ajuste en las dimensiones de los controles utilizados dentro de ellas dependiendo
del tamao que tengan (Anchor), de tal modo que no se vea afectada la esttica del diseo.
3. Como recomendacin para mantener la esttica de la aplicacin, ninguna ventana del sistema
debera ser de un tamao mayor a la del men principal.
Colores
La definicin de colores a utilizar en las interfaces de usuario es una labor que debe ser muy bien
analizada por el diseador de aplicaciones, ya que puede representar la diferencia entre la aceptacin o
rechazo del sistema.
CCSS 2008
20 de 34
TIC-DES-0019
Versin: 1.0
Para aprovechar la funcionalidad que posee el sistema operativo en cuanto al uso de colores, se
recomienda que la combinacin de estos en las aplicaciones sea administrada por l. Esto traer como
beneficio que sea el usuario el que defina la combinacin de su agrado.
En general, existen algunos criterios que pueden ayudar al diseador a hacer la seleccin adecuada
de los colores a utilizar en las interfases de usuario:
1. Todas las ventanas deben ser del color llamado Control, el cual se encuentra definido en la
mayora de entornos de desarrollo. En la paleta RGB corresponde con:
R: 236.
G: 233.
B: 216.
2. Los colores de los controles que formen parte de las ventanas deben combinar con el de las
ventanas.
3. Se debe evitar el uso de colores de la gama del amarillo, anaranjado y otros que den una impresin
repulsiva a la vista.
4. Establecer contrastes entre los colores de letra y de fondo para asegurar que es accesible por
personas con dificultades en la percepcin de ciertos colores o que utilizan monitores en blanco y
negro.
5. Cada control de ingreso de datos debe cambiar su color de fondo cuando el cursor se posiciona
sobre l. Una vez que el cursor ya no est sobre el control, entonces, el color del fondo cambiar al
que tiene establecido por omisin. Se han establecido las siguientes combinaciones:
Color cuando cursor se posiciona sobre control: Info (paleta RGB = 255,255,225).
6. El uso de combinaciones de colores la aplicacin debe ser consistente en todas las ventanas. Esto
aplica para todos los elementos de las ventanas (vase en la Figura 17).
CCSS 2008
21 de 34
TIC-DES-0019
Versin: 1.0
Tipografas
Al igual que con los colores, la seleccin del tipo de letra (fuente) a utilizar en el diseo de las
interfaces de usuario resulta muy importante.
Por lo anterior, se deben tomar las consideraciones del caso para que sin importar el ordenador, la
letra, nmeros y smbolos contenidos en las ventanas sea entendible.
Dentro de los aspectos a considerar en este sentido se encuentran:
Tipo de la fuente
El estilo de la fuente.
El tamao de la fuente.
La capitalizacin de la fuente.
4.4.1
TIPO DE LA FUENTE
Para el diseo de las ventanas se recomienda el uso de la fuente Arial o Sans-Serif, ya que no
tiende a presentar variaciones en cuanto a su forma mientras se ejecuta en diferentes ambientes o
plataformas tecnolgicas. Adems, este tipo de fuente existe para cualquier sistema operativo.
4.4.2
ESTILO DE LA FUENTE
No existe una receta en cuanto al uso de negritas, subrayado o cursivas en los elementos que
se muestran en las ventanas.
Se recomienda no sobrecargar el diseo de las interfaces de usuario con estos estilos, sino, ms
bien, utilizarlos con moderacin.
4.4.3
TAMAO DE LA FUENTE
De manera muy general, el tamao de fuente 8 es la recomendada para los distintos componentes
de las interfaces de usuario. Sin embargo, este tamao podra variar dependiendo de las caractersticas
de la aplicacin. El diseador tiene la ltima palabra.
No obstante s se tiene que tomar en cuenta que la letra debe ser fcilmente legible, ni muy pequea
ni muy grande.
CCSS 2008
22 de 34
4.4.4
TIC-DES-0019
Versin: 1.0
CAPITALIZACIN DE LA FUENTE
Al igual que con el estilo de la fuente, no hay criterio categrico en cuanto a la utilizacin de la letra
mayscula en las aplicaciones. Pero, s es recomendable que esta sea usada con moderacin.
Ayudas al Usuario
Las ayudas al usuario son todos aquellos mecanismos que indiquen o informen al usuario las
acciones a realizar o el resultado de cierto proceso. Su fin nico es facilitar el uso de la aplicacin y
mantener al usuario lo ms enterado posible de las tareas que se ejecutan a travs de la interfaz.
En los siguientes puntos, se detallan las principales ayudas al usuario que pueden implementarse
como apoyo a las tareas del usuario.
4.5.1
Cuando el usuario realiza algn tipo de procesamiento, el sistema debe indicar por medio de una
ventana de mensajes que el proceso se realiz en forma exitosa. Si por el contrario, hubo un problema
efectuando el proceso solicitado, tiene que informarse por este mismo medio al usuario, eso s, en forma
clara y entendible, de manera que el usuario comprenda el problema y pueda tomar las acciones del
caso. Vase Figura 18 para ejemplos.
4.5.2
Este mecanismo es de mucha utilidad ya que es una forma rpida y precisa para que la aplicacin
se comunique con el usuario.
Es muy importante valerse de esta barra en las siguientes circunstancias:
CCSS 2008
23 de 34
TIC-DES-0019
Versin: 1.0
2. Mostrar ayuda en el momento que el cursor este posicionado en algn control de ingreso de datos.
Permite explicar:
Otras.
3. Indicar al usuario que se realizando un proceso que puede durar varios segundos, por lo cual,
requiere esperar mientras se realiza.
Figura 19: Ejemplo del uso de barra de mensajes en las ventanas de procesos
4.5.3
Esta propiedad se puede encontrar en casi todos los objetos y lenguajes de programacin. Permite
informar al usuario cuando el puntero del ratn (mouse) est posicionado sobre algn elemento de la
ventana. Es muy cmoda de implementar y es complementaria a la barra de mensajes (vase Figura
20).
CCSS 2008
24 de 34
TIC-DES-0019
Versin: 1.0
4.5.4
AYUDAS EN LNEA
Es una ayuda mucho ms amplia que todas las anteriores. Implica explicar de manera detallada el
funcionamiento de cada ventana del sistema. Representa el manual de usuario, pero de forma
electrnica y el cual se puede acceder directamente desde la aplicacin.
Toda interfaz de usuario debe tener acceso a la ayuda en lnea de la ventana que est en uso
actualmente, de forma que se pueda analizar en detalle cmo funciona dicha ventana sin la necesidad
de navegar por toda la ayuda.
Para acceder a dicha ayuda se puede utilizar cualquiera de estos mecanismos:
1. Por medio de una tecla de acceso rpido. Vase punto 5 de apartado 4.6 para detalles sobre la tecla
a emplear.
2. Utilizar una opcin en la ventana que invoque a la ayuda en lnea (sea a travs del men o un botn
en la barra de botones).
La Figura 21 corresponde con una ventana que incorpora la ayuda en lnea a travs de una
alternativa en la barra de botones.
CCSS 2008
25 de 34
TIC-DES-0019
Versin: 1.0
1. Todas las ventanas deben estar alineadas al centro del monitor cuando se presentan al usuario.
Queda a criterio del diseador (y si el lenguaje de programacin lo posibilita) si se permite mover la
ventana o no de su ubicacin original.
2. Las etiquetas deben estar ubicados la izquierda de los controles que aceptan datos del usuario, o
con los que el usuario interacta (vase Figura 22).
3. Toda aplicacin de escritorio debe poseer una ventana Acerca de y de Propiedad Intelectual.
4. Evitar el diseo de interfaces de usuario muy coloridas y cargadas de elementos, ya que puede
distraer al usuario de lo que significa la aplicacin como herramienta de apoyo a las labores.
CCSS 2008
26 de 34
TIC-DES-0019
Versin: 1.0
han establecido estndares para acceder a las funciones comunes de la mayora de sistemas a
travs del teclado:
FUNCIN
TECLA DE ACCESO
Ayuda en lnea
F1
Nuevo
F2
Guardar
F3
Eliminar
F4
Imprimir
F5
Ctrl. + P
Salir
F9
ESC
Alt. + F4
8. La sincronizacin entre las distintas ventanas de la aplicacin debe ser tal, que al cerrarse una
ventana padre, todas las hijas se cierren tambin.
9. Las imgenes que se empleen para identificar ciertos procesos del sistema deben ser consistentes
en cada una de las ventanas que tienen la misma funcionalidad. Esto ayuda a mantener la
consistencia del sistema y facilita la interaccin del usuario con la aplicacin.
10. Hasta donde el lenguaje de programacin lo permita, se recomienda ordenar el cdigo fuente de la
aplicacin sea lgicamente (con el uso de espacios de nombres) o fsicamente (a travs del
concepto de paquetes).
11. Todas las etiquetas, botones y barras de men deben tener nombres descriptivos de la funcin que
realizan.
CCSS 2008
27 de 34
TIC-DES-0019
Versin: 1.0
12. Cuando se definan ventanas para dar mantenimiento a las tablas del repositorio de datos, dichas
ventanas deben contar con ciertas opciones como mnimo, un orden en los botones e imgenes
alusivas a la funcin que cumple cada alternativa. Vase la Figura 23 para notar estos detalles.
Salir de la ventana
Ayuda en lnea (si no existe una barra de men)
Buscar elemento en catlogo
Eliminar elemento del catlogo
Guardar elemento en catlogo
Nuevo elemento en catlogo
Figura 23: Formato de la barra de botones para ventanas de mantenimiento
13. De manera muy general, se han establecido los siguientes iconos para que sean utilizados en las
funciones comunes de todos los sistemas de informacin tipo escritorio:
ICONO
DESCRIPCIN
Guardar datos
Eliminar datos
CCSS 2008
28 de 34
ICONO
TIC-DES-0019
Versin: 1.0
DESCRIPCIN
Salir
14. Para facilitar la navegacin entre los diferentes elementos que forman parte de la ventana resulta
conveniente definir otras teclas alternativas, aparte de la que se utiliza por omisin y conocida como
Tabuladora. Por ejemplo, se puede promover el uso de la tecla Enter, las teclas direccionales,
otras.
15. La utilizacin de botones en la seccin central de la ventana queda a criterio del diseador, siempre
y cuando se respete el uso de todas las secciones descritas en este documento, dependiendo del
tipo de ventana.
16. Para todos los campos de captura de datos (cajas de texto) es requerido establecer la longitud
mxima permitida.
5.
Recomendaciones
Debido a que los temas tecnolgicos no son estticos, sino tendientes al cambio para
mejoramiento, esta herramienta no es la excepcin. As que, con esta premisa, cualquier
ajuste que se considere pertinente y que vaya en pro de la mejora continua y actualizacin
tecnolgica, sern muy bien recibidos.
CCSS 2008
29 de 34
6.
TIC-DES-0019
Versin: 1.0
Conclusin
Con el desarrollo de este manual se ha conseguido actualizar el estndar hasta hoy existente para el
Con este esfuerzo se posibilitar que los nuevos desarrollos de aplicaciones para ambientes de
escritorio sean implementados de manera estandarizada, sin importar la tecnologa (lenguaje de
programacin) que se decida usar.
El resultado obtenido por la aplicacin de esta propuesta ser de gran beneficio para toda la
Institucin, por las razones que para todos es sabido.
Por todo lo anterior, se invita a los desarrolladores a que tomen como parte de sus herramientas de
trabajo este manual, ya que ser de gran ayuda en esa labor tan importante que tienen.
7.
Glosario
BARRA DE BOTONES: Agrupacin de botones. En el contexto de este manual, est relacionada con las
distintas acciones a las que puede acceder el usuario en la ventana. La ubicacin de esta barra de men
es siempre en la seccin superior de las ventanas.
BARRA DE ESTADO: Conjunto de elementos que permiten conocer el estado actual del sistema de
informacin para un proceso especfico dentro de una ventana. Su ubicacin es siempre en la seccin
inferior de la ventana.
BARRA DE MEN: Agrupacin de opciones en forma de alternativas desplegables a las que tiene
acceso el usuario una vez que selecciona uno de los elementos visibles en la barra.
BOTN: Controles rectangulares con un nombre o imagen dentro, y los cuales funcionan como
invocadores de acciones.
CAJA DE TEXTO: Control que permite el ingreso de caracteres o dgitos a travs de algn dispositivo
perifrico para el ingreso de datos, como el teclado.
CCSS 2008
30 de 34
TIC-DES-0019
Versin: 1.0
CONTROL: Cada una de las piezas de software con las que se puede realizar el diseo de las interfaces
de usuario. Son los distintos elementos visuales que percibe el usuario cuando ingresa a la ventana.
ETIQUETA: Control cuyo fin es desplegar informacin esttica en las ventanas, generalmente para
describir el significado de un control de ingreso de datos, como una caja de texto, por ejemplo.
PERFIL: Grado de autorizacin del usuario para realizar acciones dentro de un sistema de informacin.
CCSS 2008
31 de 34