Usabilidad

GABRIEL CONDE
ANDRS GUERRA
ANTONIO IGLESIAS
JOS REYES
MODELO DE
APRENDIZAJE S.O.I.
Propicia la activacin de los elementos
cognitivos, que forman parte del
proceso de aprendizaje de la persona
el que aprende.
Esta teora es aplicable, en ambientes
educativos, en la confeccin de
contenidos en formato electrnico ,
libros de texto y cualquier contenido
que se disee con intencionalidad
instruccional.
Procesos Cognitivos
Asociados al Modelo
Seleccin de la Informacin

Debe ser pertinente, es la informacin

que ser objeto de tratamiento futuro.
El mensaje representado en imgenes y
palabras, es brevemente representado
en las memorias sensoriales, debido a lo
limitado de la memoria activa solo
algunas representaciones son
conservadas para su tratamiento.
Procesos Cognitivos
Asociados al Modelo
Organizacin de la Informacin

Es el proceso de ordenacin mental de

las representaciones auditivas y
imgenes seleccionadas en
representaciones verbales y grficas
coherentes respectivamente.
Procesos Cognitivos
Asociados al Modelo
Integracin de la Informacin

Elabora las conexiones entre los

elementos de las representaciones
grficas y verbales, la nueva
informacin y el conocimiento previo.
Procesos Cognitivos
Asociados al Modelo
Procesos Cognitivos
Asociados al Modelo
Este modelo de aprendizaje es,
particularmente interesante, en los
planteamientos de sus tcnicas de
estimulacin de los procesos cognitivos,
porque brindan el fundamento terico,
que soporta la necesidad de establecer
pautas que permitan estandarizar el
diseo de interfases grficas de
aplicaciones de software
Tcnicas de
Estimulacin de los
Procesos
Tcnicas paraCognitivos
Estimular la Seleccin de la
Informacin Pertinente
Uso de ttulos, cursivas, negritas, tamaos de letra
grandes, vietas, flechas, conos, subrayados, notas al
margen, repeticiones y espacios en blanco para resaltar
la informacin de inters.
Uso de preguntas y afirmaciones sobre los objetivos
instruccionales para destacar la informacin relevante.
Uso del resumen para centrar la informacin.
Ser concisos.
Eliminar la informacin interesante no relevante.
Tcnicas de
Estimulacin de los
Procesos Cognitivos
Tcnicas para Estimular
la Organizacin
de la Informacin:
El contenido debe presentar una estructura
comprensible (jerrquica, enumeracin, etc.)
Aplicacin de Imgenes coherentes con los
contenidos textuales o auditivos combinado con
sealizaciones (vietas, numeracin , etc.)
contribuye a elaborar representaciones mentales
coherentes de la estructura del contenido.
Las reseas coordinadas con los ttulos y
locuciones indicadoras contribuyen a simplificar
la deteccin de la estructura del contenido.
Tcnicas de
Estimulacin de los
Procesos Cognitivos
Tcnicas para Estimular la Integracin de la
Informacin:
Uso de ilustraciones que correspondan con el contenido,
propiciando la conexin entre el conocimiento previo y la
nueva informacin.
Uso de Organizadores Avanzados: analoga de nuevos
contenidos con los con conocimientos previos.
Uso de ilustraciones con cuadros mltiples y subttulos que
expliquen la representacin de los cuadros (Imagen+Texto).
Uso simultneo de animacin y narracin (video + sonido).
Tcnicas de
Estimulacin de los
Procesos Cognitivos
Pautas de Diseo de Interfases Grficas
Principios de Composicin de Elementos en el Diseo de la
Ventana

Diseo Visual

Un buen Diseo Visual esta centrado en la Comunicacin.

La informacin visual es, especficamente, un
complemento del diseo estructural de una aplicacin.
El uso de pautas de Diseo de Interfase sobre sus
formularios, har que el usuario pueda entender
fcilmente la informacin presentada
Diseo Visual
Pautas de Diseo de
Interfases Grficas
Estructura de la informacin y las
tareas del usuario en la aplicacin

Se distingue aqu la posicin y jerarqua de los

elementos visuales con respecto a los otros
elementos que componen la ventana.

Influye adems, el orden de ejecucin de las

tareas del usuario, debe facilitarse la
comprensin de este orden.
Estructura de la
informacin y las tareas
del usuario en la
aplicacin
Pautas de Diseo de
Interfases Grficas
Punto Focal en la ventana

Este punto focal, debe destacarse sobre los

dems elementos o controles de la interfaz,
con tcnicas que estimulen el proceso
cognitivo de Seleccin (de la informacin
pertinente): uso de espaciado, aislamiento
u otros mtodos.
Punto Focal
Pautas de Diseo de
Interfases Grficas
Estructura y Consistencia entre
ventanas

La estructura de la organizacin de los

elementos en todas las ventanas de
una aplicacin debe ser constante,
estandarizndose elementos como:
presentacin de mens, botones de
comandos, etiquetas, etc.
Estructura y
Consistencia entre
ventanas
Pautas de Diseo de
Interfases Grficas
Relacin entre elementos

Trata de la proximidad espacial que

debe existir entre elementos de la
interfaz que presenten nexo
informativo-comunicativo, por ejemplo:
una lista que permita seleccionar
valores que son cargables a un cuadro
de texto, en este caso, ambos controles
deben estar espacialmente cercanos
Relacin entre
elementos
Pautas de Diseo de
Interfases Grficas
Legibilidad y Flujo entre los
elementos

Facilidad de lectura y comprensin de la

comunicacin de las ventanas, dada en
funcin de espaciado y alineacin de los
elementos de la interfaz.
Legibilidad y Flujo
entre los elementos
Pautas de Diseo de
Interfases Grficas
Integracin

Se mide la relacin entre el diseo

visual de la aplicacin y las aplicaciones
del sistema u otras aplicaciones del
entorno grfico con las que se utiliza.
Integracin
COLOR

El color debe ser considerado como una

herramienta adicional en el diseo, no
una necesidad bsica.
No depender de colores para mostrar
informacin importante, recuerde que si
los colores no son correctamente
percibidos (en casos de que el usuario
tenga sistemas de poca resolucin o
posea algn impedimento visual leve),
su aplicacin debe continuar siendo
usable.
COLOR

El color es una forma de

informacin secundaria
Evite confiar en el color como nico medio
de informar una condicin o valor.
Aplique conjunto limitado de
colores
Los colores apagados, sutiles y
complementarios suelen ser los ms
apropiados en el diseo de interfases en
aplicaciones de corte empresarial y
acadmicas
COLOR

En el caso de que la audiencia de los

componentes instruccionales sean
nios, debe disearse la interfaz, como
corresponde siempre, en funcin de los
intereses de la audiencia: edad, cultura,
conocimientos y conductas previas, etc.
COLOR

Uso de Paletas

El uso de paletas de combinacin de

colores a aplicar en los formularios
brinda una apariencia de unificacin,
consistencia y formalidad, minimizando
la posibilidad de distractores visuales.
Color
Matiz Resplandor
Contraste
Los usuarios con desordenes visuales
(ceguera nocturna, o baja visin
nocturna) requieren alternativas para la
asignacin de colores por defecto de
una aplicacin.
Una buena Interfase de usuario se
anticipa a estas necesidades,
proporcionando una opcin para la
personalizacin de las preferencias del
color.
Matiz Resplandor
Contraste
Disposicin de la Ventana
(Formulario).
La localizacin visual de los
componentes es importante porque la
relacin entre los componentes es
indicada por su posicin. Esto se
llama LAYOUT en diseo de
Interfases.
Un layout limpio es crucial para crear
un flujo visual de informacin sin
problemas para el usuario. En esta
seccin se describen la ubicacin
adecuada de los componentes y el
espaciado recomendado en el
estndar GNOME.
CUADROS DE DIALOGOS
Cuando un usuario revisa un cuadro de dialogo de
Preferencias complejo (que contiene muchas etiquetas,
cuadro de texto, botones varios, etc.), es fcil ver, como
esta Interfase puede convertirse en un estorbo cuando el
layout es deficiente y en consecuencia, el diseo visual,
es pobre tambin.
 Alineacin

Debe proporcionarse una alineacin a los

controles, de manera que se brinde al usuario un
margen firme un punto de ancla o eje de
lectura que permita la lectura vertical en forma
organizada y rpida.
Cuando los controles (cuadro de texto) tengan la
misma longitud, se recomienda alineacin
izquierda.
Si la mayora de un grupo de etiquetas difieren en
longitud, se recomienda alineacin derecha,
cuidando de que el final del control no este
ubicado demasiado lejos de su respectiva
etiqueta.
 Alineacin

El uso de marcos con bordes visibles para separar grupos

esta censurado. Use espaciado y encabezados en
negrita en su lugar, esto es ms efectivo porque se
garantiza el menor numero de lneas adicionales que
distraeran al usuario del contenido principal de la
ventana. Su uso se reserva a lo estrictamente necesario.
Se debe mantener la consistencia de los componentes de
la ventana en trminos de alineacin y tamao. Esto es
particularmente importante cuando se requiere agrupar
muchos controles, y la habilidad del usuario de scanear
la informacin rpidamente, no debe ser sacrificada.
Minimice tanto como sea posible, la necesidad de que
los ojos del usuario tengan que dar saltos de un lado a
otro cuando revisa el layout de la ventana.
 Especificaciones de
Layout
Deje un mnimo de 12- pxel 120 Twips entre el borde de
la ventana y el control ms cercano.
Deje 12- pxel 120 Twips horizontales entre el control y
su etiqueta. (esta distancia puede ser mayor entre controles
de un mismo grupo, dependiendo del tamao de la
etiqueta).
Las etiquetas deben ser concisas y tener sentido, aun
leyendo la ventana fuera de contexto.
Asignar teclas de acceso a todos los controles editables.
Asegrese de tener un orden adecuado de TAB ORDER, de
tal manera de, si se accede por teclado, el orden de los
controles sea el correspondiente.
Especificaciones de
Layout
 Espaciado

Proporcionar un espacio adecuado entre controles y grupo de

controles. (Facilitar al usuario encontrar y organizar
mentalmente la informacin)
Como regla bsica, use un espaciado mnimo de 12 pxel (o
120 Twips) entre componentes de la interface que estn
relacionados (entre un control y etiqueta asociada al control).
Disee listas de seleccin de grupos pequeos. Aplique
botones de opcin o de chequeo para menos de 8 valores.
En caso de poseer mayor cantidad de valores, aplique men
o listas desplegables
Identifique los componentes de grupo a 12 pxel ( 120 Twips)
de un rotulo para denotar jerarqua.
 Espaciado

Minimice los puntos de alineacin en su ventana. Un punto de

alineacin es una lnea imaginaria horizontal o vertical que
atraviesa su ventana, esta lnea es reflejada por el borde de uno
o ms controles dentro de la ventana.
Estructure los componentes de la Interface de izquierda a
derecha y de arriba hacia abajo en orden de importancia. El
primer elemento significativo debe ubicarse en la esquina
superior izquierda y el menos significativo en la esquina inferior
derecha.
Use espacios en blancos e identificacin para delimitar grupos
de informacin es mas claro y preferible a lneas graficas.
Sea consistente en cuanto a alineacin, espaciado y tamao de
los componentes en toda su aplicacin.
No disee ventanas que sean 50% ms largas en una dimensin
que en otra.
Espaciado
Elementos del Formulario:
Guas Generales
Sea consistente con el uso de etiquetas y su semntica, es
decir, si se usa una misma etiqueta en varios formularios,
esta debe tener siempre el mismo significado.
No use la misma etiqueta mas de una vez en un mismo
formulario.
No aplique mas de tres fuentes y tamaos de letras en su
aplicacin. Demasiadas fuentes y tamaos de letras
harn que la Interfase luzca no profesional y recargada,
dificultando la lectura.
No use grficos en fondo de agua detrs del texto, esto
interfiere en el contraste que debe existir entre Texto y su
Fondo, lo que puede causar dificultades a los usuarios con
impedimentos visuales.
 Uso de Maysculas

Existen dos estilos de uso de maysculas dentro

de los elementos de Interface de Usuario
GNOME:
1. Estilo Maysculas de Encabezado: Inicia en
maysculas todas las palabras de los elementos,
con las excepciones:
Artculos: un, una, el, la, los, las
Conjunciones: y, pero, mas, para, todava
2. Estilo Maysculas de Oracin: Coloque en
mayscula la primera letra de la palabra inicial y
cualquier otra palabra, normalmente iniciada en
mayscula en oraciones
 Fuentes del Texto de la
Interfaz
Recuerde siempre que las fuentes son, en general,
menos legibles en pantalla que en un material
impreso, se recomienda:
Evite las fuentes en cursiva y Serif, suelen ser
ms difciles de leer, especialmente en bajas
resoluciones.
Limite el nmero de fuentes y estilos usadas en
las interfaces de sus aplicaciones, un uso
excesivo de fuentes diferentes tender al
desorden visual de las ventanas.
 Fuentes del Texto de la
Interfaz
Use adecuadamente las negritas: aplquelas
para estimular los procesos cognitivos de
Seleccin y Organizacin convenientemente, su
aplicacin excesiva reduce el nfasis en la
informacin y dificulta la lectura.
Siempre que sea posible, use la fuente estndar
del sistema para los elementos comunes de la
interfaz para estandarizar e integrar su
aplicacin con las ventanas de las dems
herramientas del sistema.
 Fuentes del Texto de la
Interfaz
Es conveniente de ser factible, permitir el
ajuste del tamao de las fuentes de la
aplicacin.

En general, la fuente predeterminada para

Windows 98 y Windows NT 4.0 es MS San Serif
de 8 puntos. Para Windows 2000 es
recomendable Tahoma de 8 puntos. Tahoma 8,
ofrece mejoras en la legibilidad y soporte de
globalizacin.
Fuentes del Texto de la
Interfaz
Redaccin de Texto de la
Interfaz
Brevedad: Los estudios de facilidad de uso
reportan que es ms probable que los usuarios
lean bloques de texto corto que bloques largos,
por lo tanto elimine las palabras innecesarias,
redactando textos cortos sin sacrificar claridad y
facilidad de comprensin.

Enfatice lo que el usuario debe conocer sin

aditamentos ni informacin opcional.
Use palabras y frases sencillas.
Redaccin de Texto de la
Interfaz
Lenguaje: Utilice la gramtica correcta y estndar, un lenguaje
claro y coherente en la interfaz, mejora la facilidad de uso de la
aplicacin.
Escriba frases positivas: evite usar frases negativas como
problemas, mal, incorrecto, fallo, error, fatal, terminar y
dificultad. En su lugar indquele al usuario cul es el problema,
qu debe hacer y por qu.
Evite redundancias como: Entorno circundante, Absolutamente
completo, Exactamente idntico, Repetir de nuevo, etc.
Utilice una redaccin coherente en situaciones similares.
Utilice una redaccin familiar en los mens, etiquetas de los
controles y barras de herramientas.
Evite la jerga tcnica, escriba de forma que el usuario con menos
conocimientos pueda entender.
CAPITULO DOS: OBJETOS DE
LA INTERFAZ OBJETO MENU
OBJETO MENU

Los mens componen el rango de comando u operaciones

ejecutables de una aplicacin. Cuando se disea una
nueva aplicacin, es recomendable colocar los items del
men, en el mismo lugar que stos aparecen en otras
aplicaciones.
Barra de Men

Proporciona acceso a un subconjunto de mens

desplegables (drop-down o pull-down menu). . Esta barra
esta siempre visible y accesible desde el teclado y con el
mouse.
Barra de Men: Guas para
el Diseo de Interfases
Proporcione una barra de men para la ventana principal de la
aplicacin conteniendo como mnimo el item Ayuda.

Organice los ttulos del men, de acuerdo al estndar.

No inactive Items de la barra de men.

Use palabras sencillas con la primera letra en mayscula para

rotular los items de la barra de men.

No proporcione mecanismos para ocultar la barra de men.

Men Desplegables
Un men desplegable se muestra cuando se selecciona un
item de la barra de men (presionando clic con el mouse o
con el foco en ttulo, presionando Enter) .
Men Desplegables: Guias
para el Diseo de Interfaces
Solo coloque items relacionados con el ttulo de la Barra de Men.

Organice u ordene los items del men para aplicaciones de propsito

especfico de acuerdo algn criterio lgico o funcional.

Limite el nmero mximo de items a 15.

Use la lnea como separador grfico para denotar agrupacin de

opciones relacionadas (Se recomienda la agrupacin entre 2 y 5 items).

No remueva ni agregue items del men en tiempo de ejecucin, si fuera

necesario, inhabilite el item.
Men Desplegables: Guias
para el Diseo de
Interfaces
Proporcione teclas de acceso rpido (Shorcut) para opciones de
acceso frecuente.

Slo cuando un comando del men requiera informacin adicional

para ser ejecutado agregue tres puntos al final de la frase del item
(...) (por ejemplo Guardar como.

Use combinacin de maysculas tipo oracin.

Use Items de chequeo (marca de chequeo en los items de men)

slo cuando sea obvio que la opcin posee un estado lgico o
naturalmente opuesto entre dos valores tales como on y off.

Nunca cambie la etiqueta de un item men checkbox como respuesta

a la seleccin del usuario.
Men de Cascada

Un submen o men de cascada esta integrado a un item

del men desplegable, indicado por una flecha pequea
que se muestra al lado del texto del item. Se recomienda
para agrupar operaciones relacionadas.
Men de Cascada: Guas para
el Diseo de Interfaces

Aplique su uso, solo en casos necesarios.

No disee submen con menos de tres

opciones, a menos que sus items sean
agregados dinmicamente.

No anide submen dentro de submen. Ms de

dos niveles de jerarqua son difciles de
memorizar y navegar.
Men Contextuales o
Emergentes (PopUp Men)
Es un tipo de men desplegable que se muestra bajo
determinadas situaciones: debe estar enfocado un objeto y
presionarse el botn derecho del mouse. Se emplean como
su nombre lo indica, para proporcionar la ejecucin
Contextual de una serie de comandos asociados al objeto
que tiene el foco al momento de ser invocado el men.
Men de Contextuales: Guas
para el Diseo de Interfaces

Dado que muchos usuarios podran no estar conscientes

de su existencia, proporcione acceso alternativo para
cada una de las funciones o tareas que configure en un
men contextual.

Deben ser lo ms simples posibles para maximizar su

eficiencia: Coloque un mximo de 10 items.

Ordene los items de acuerdo al criterio lgico, operativo

o funcional segn convenga.

Use la lnea como separador grfico para denotar

agrupacin de opciones relacionadas.
OBJETO CUADROS DE
TEXTO (TextBox)
Son usados para ingresar una o ms lneas de texto plano.
Cuadros de Texto: Guas para
el Diseo de Interfaces

Rotule los TextBox con etiquetas textuales colocadas encima o a la izquierda

del control textbox.

Justifique a la derecha los cuadros de texto cuyo contenido sea

exclusivamente numrico.

Ajuste el tamao del cuadro de texto de acuerdo al probable tamao de los

datos de entrada.

Proporcione un texto esttico explicativo para aquellos textbox que

requieran una entrada en un formato particular
Cuadros de Texto:
Guas para el Diseo de
Interfaces
Cuando sea posible, proporcione un control adicional o

alternativo que limite la entrada de datos requeridas a un
rango valido.

Teclas ENTER (RETURN) y TAB: Proporcione el cambio de

foco entre controles de cuadros de texto de su interfaz a
travs de la presin de estas teclas.
Objeto Botones de
Comando

Un botn de comando o Comand button, inicia una accin

determinada cuando el usuario hace clic sobre l.
Botones de Opcin:
Guas para el Diseo de
Interfases
Aplique botones de opcin para implementar la

seleccin entre un conjunto de valores de,
mnimo dos elementos.

No inicie una accin cuando el usuario haga clic

sobre un botn de opcin.

La seleccin de un botn de opcin no debera

afectar el valor de ningn otro control. Sin
embargo esta accin si pudiese habilitar o
inhabilitar, ocultar o mostrar otros controles de
la interfase.
Botones de Opcin:
Guas para el Diseo de
Interfases
Para rotular el grupo de
botones de opcin, use
combinacin de maysculas de encabezado, por
ejemplo: Estilo del Borde. Ubique esta etiqueta del grupo
arriba de los botones o al lado izquierdo de los mismos.
Rotule cada botn en particular en combinacin de
maysculas de oracin.
El nmero de elementos para botones de opcin no debe
exceder a ocho (8), si se sobrepasa este valor evalese la
posibilidad de aplicar listas desplegables simples.
Trate de alinear los botones de opcin verticalmente,
esto contribuye a hacer ms fcil la revisin visual de la
ventana.
Botones de Opcin:
Guas para el Diseo de
Interfases
Objeto Botones de
Chequeo (CheckBox)
Son usados para denotar la posibilidad de
seleccin de mltiples opciones o valores
dentro de un conjunto, estos valores no son
mutuamente incluyentes.
Botones de Chequeo:
Guas para el Diseo de
Interfases
No inicie una accin cuando el usuario haga clic sobre

un checkbox.
La seleccin de un botn de chequeo no debera
afectar el valor de ningn otro control. Sin embargo
esta accin si pudiese habilitar o inhabilitar, ocultar o
mostrar otros controles de la interfase.
Si la seleccin de un botn de chequeo afecta a otro
control, ubquelo inmediatamente encima o al lado
izquierdo del control que es afectado. Esto ayuda a
indicar que el control depende del estado del botn de
chequeo.
Botones de Chequeo:
Guas para el Diseo de
Interfases
Use combinacin de maysculas de encabezado para

rotular los el grupo botones de chequeo, ubique la
etiqueta arriba o a la izquierda.
Aplique a los botones combinacin de maysculas de
oracin.
El nmero de elementos para botones de chequeo no
debe exceder a ocho (8), si se sobrepasa este valor
evalese la posibilidad de aplicar listas desplegables
con opcin de marcas de chequeo .
Trate de alinear los botones de chequeo
verticalmente, esto contribuye a hacer ms fcil la
revisin visual de la ventana.
Botones de Chequeo:
Guas para el Diseo de
Interfases
Objeto Cuadro
Combinado (Combo
Box)
Son usados para brindar al usuario la capacidad

de seleccin dentro de un conjunto de valores
dados en la interfaz a travs de una lista. En
trminos de objeto, este control combina la
capacidad de un cuadro de texto y una lista.
Cuadro Combinado:
Guas para el Diseo de
Interfases
Se recomienda su uso para gestionar la seleccin de un

nico valor entre un conjunto de valores de ms de ocho
(8) elementos.
La seleccin de un item de la lista no debera iniciar
ninguna accin en la aplicacin
Rotule este objeto con una etiqueta colocada arriba o a la
izquierda del control, aplicando maysculas de
encabezado. Aplique a los elementos de la lista,
combinacin de maysculas de oracin
Trate de alinear los botones de opcin verticalmente, esto
contribuye a hacer ms fcil la revisin visual de la
ventana.
Cuadro Combinado:
Guas para el Diseo de
Interfases
Objeto Lista (List Box)
Son usados para brindar al usuario la capacidad de
seleccin de uno o varios valores dentro de un conjunto
de valores dados en la interfaz a travs de una lista.
Permiten al usuario inspeccionar, manipular y seleccionar
valores, pueden tener varias columnas de informacin,
contener textos, grficos y otros controles simples.
Listas: Guas para el
Diseo de Interfases
Siempre rotule este objeto con una etiqueta colocada
arriba o a la izquierda del control, usando
combinacin de mayscula de encabezado. Aplique a
los elementos de la lista, combinacin de maysculas
de oracin

En la interfaz, disee la lista para que muestre al

menos cuatro (4) items a la vez sin realizar scrolling.
Para listas de 10 o ms items adecue estas tamao
de manera apropiada.

No disee listas con menos de cinco (5) items.

Listas: Guas para el
Diseo de Interfases
Slo use encabezado de columnas cuando:
.-la lista tenga ms de una columna
.-la lista tenga solamente una columna pero exista la
posibilidad de reordenamiento en tiempo de ejecucin.

Rotule siempre las columnas cuando las use.

Considere el uso de Listas de Seleccin Mltiple

( implementable en VB Style = 1-CheckBox ), esto hace
ms obvio que la seleccin mltiple es posible.
Listas: Guas para el
Diseo de Interfases
Para listas de seleccin mltiple muestre el nmero de
items actualmente seleccionados en un texto esttico
debajo de la lista. Por ejemplo: Nmero de Item
Seleccionados: 5. Esto hace ms evidente que la
seleccin mltiple es posible.
Considere la posibilidad de proporcionar botones
Seleccionar Todo Deseleccionar Todo al lado de la
lista de seleccin mltiple si es apropiado.
La seleccin de un item de la lista no debera iniciar
ninguna accin en la aplicacin.
Trate de alinear los botones de opcin verticalmente,
esto contribuye a hacer ms fcil la revisin visual de la
ventana.
Listas: Guas para el
Diseo de Interfases
Objeto Tabbed (Control
Tabbed o Tabbed
NoteBooks ) para presentar informacin
Es un objeto adecuado

relacionada en la misma ventana, sin tener que
desplegarla toda al mismo tiempo.
Tabbed: Guas para el
Diseo de Interfases
No coloque demasiadas pginas en el mismo
cuaderno (se recomiendan 4 Tabs).

Rotule las pginas o Tabs con combinacin de

mayscula de Encabezado. Trate de mantener todas
las etiquetas de los rtulos de la misma longitud.

Si un control afecta el contenido de una sola

pgina colquelo dentro de esta pgina, si afecta a
todas las pginas ubquelo fuera del Control.
Tabbed: Guas para el
Diseo de Interfases
Objeto Marcos y
Separadores (Control
Frame
Un marco )
es un cuadro con ttulo que puede dibujarse
alrededor de un grupo de objetos o controles de la
interfaz para organizarlos como grupos funcionales. Un
Separador es una lnea simple, horizontal o vertical que
pueden usarse para dividir la ventana en grupos
funcionales.
Marcos: Guas para el
Diseo de Interfases
Antes de agregar marcos y separadores grficos evale
siempre la posibilidad de disear con identacin y
espaciado para reflejar la relacin entre controles, esto
da limpieza y evita el recargo de la interfaz.
No aplique marcos y separadores para compensar un
diseo pobre de la disposicin y alineacin de los
objetos de la interfaz.
No mezcle grupos de objetos enmarcados y no
enmarcados en la misma ventana.
No anide un marco dentro de otro, esto sobrecarga la
disposicin visual de los elementos. (Grupo GENOME,
2002)
Marcos: Guas para el
Diseo de Interfases