INSTITUTO SUPERIOR

TECNOLGICO RUMIAHUI
CARRERA DE SISTEMAS
ANLISIS DE SISTEMA
DEBER
TEMA:
ESTNDARES Y GUAS DE ESTILOS GUI
ELABORADO POR:
CURSO Y SECCIN

SANGOLQU, 12 DE AGOSTO DEL 2014

PRINCIPIOS GENERALES DE LA INTERFAZ

A continuacin se presentarn los estndares que se han definido para la Interfaz
Grfica de Usuario del Sistema de Simulacin de Cortes ALRAZ.
Esquema de la pantalla principal
La ventana principal tendr dos zonas: el rea de Botones Grficos y el rea de
Cliente.

En el rea de Botones Grficos irn los botones de las principales

funcionalidades del sistema.

El rea Cliente siempre buscar presentarse de forma minimalista, solo

mostrados las opciones que realmente son necesarias en ese momento.

Las ventanas para funciones especficas no contendrn un rea de men, si no

una barra de botones con conos descriptivos y visualmente agradables.

Se har uso extensivo de paneles que se irn superponiendo uno a uno para
evitar la cantidad de ventanas emergentes.

Especificacin de colores
Los colores que se utilizarn en las ventanas estarn basados en el siguiente
esquema:
Especificacin de Colores
Caracterstica

Estndar

Color de fondo de ventanas

RGB (61,65,76)

Color de fuentes

RGB (206, 202, 206)

Especificacin de fuentes
La fuente que se utilizarn ser Lucida Grande, en estilo Bold normal y tamao de 12
puntos y Myriad Pro, en estilo SemiBold y tamao 13.
Principios para el Diseo de Interfaces de Usuario

Existen principios relevantes para el diseo e implementacin de IU, ya sea para las IU
grficas, como para la Web.
Anticipacin
Las aplicaciones deberan intentar anticiparse a las necesidades del usuario y no
esperar a que el usuario tenga que buscar la informacin, recopilarla o invocar las
herramientas que va a utilizar
Autonoma
La computadora, la IU y el entorno de trabajo deben estar a disposicin del usuario. Se
debe dar al usuario el ambiente flexible para que pueda aprender rpidamente a usar la
aplicacin. Sin embargo, est comprobado que el entorno de trabajo debe tener ciertas
cotas, es decir, ser explorable pero no azaroso. Es importante utilizar mecanismos
indicadores de estado del sistema que mantengan a los usuarios alertas e informados.
No puede existir autonoma en ausencia de control, y el control no puede ser ejercido
sin informacin suficiente. Adems, se debe mantener informacin del estado del
sistema en ubicaciones fciles de visualizar.
Percepcin del Color
Aunque se utilicen convenciones de color en la IU, se deberan usar otros mecanismos
secundarios para proveer la informacin a aquellos usuarios con problemas en la
visualizacin de colores
Valores por Defecto
No se debe utilizar la palabra "Defecto" en una aplicacin o servicio. Puede ser
reemplazada por "Estndar" o "Definida por el Usuario", "Restaurar Valores Iniciales" o
algn otro trmino especifico que describa lo que est sucediendo. Los valores por
defecto deberan ser opciones inteligentes y sensatas. Adems, los mismos tienen que
ser fciles de modificar.
Consistencia
Para lograr una mayor consistencia en la IU se requiere profundizar en diferentes
aspectos que estn catalogados en niveles. Se realiza un ordenamiento de mayor a
menor consistencia:
Interpretacin del comportamiento del usuario: la IU debe comprender el significado
que le atribuye un usuario a cada requerimiento. Ejemplo: mantener el significado de
las los comandos abreviados (shortcut-keys) definidos por el usuario.

Estructuras invisibles: se requiere una definicin clara de las mismas, ya que sino el
usuario nunca podra llegar a descubrir su uso. Ejemplo: la ampliacin de ventanas
mediante la extensin de sus bordes.
Pequeas estructuras visibles: se puede establecer un conjunto de objetos visibles
capaces de ser controlados por el usuario, que permitan ahorrar tiempo en la ejecucin
de tareas especficas. Ejemplo: cono y/o botn para impresin.

Una sola aplicacin o servicio: la IU permite visualizar a la aplicacin o servicio

utilizado como un componente nico. Ejemplo: La IU despliega un nico men,
pudiendo adems acceder al mismo mediante comandos abreviados.
Un conjunto de aplicaciones o servicios: la IU visualiza a la aplicacin o servicio
utilizado como un conjunto de componentes. Ejemplo: La IU se presenta como un
conjunto de barras de comandos desplegadas en diferentes lugares de la pantalla,
pudiendo ser desactivadas en forma independiente.
Consistencia del ambiente: la IU se mantiene en concordancia con el ambiente de
trabajo. Ejemplo: La IU utiliza objetos de control como menes, botones de comandos
de manera anloga a otras IU que se usen en el ambiente de trabajo.
Consistencia de la plataforma: La IU es concordante con la plataforma. Ejemplo: La
IU tiene un esquema basado en ventanas, el cual es acorde al manejo del sistema
operativo Windows.

La inconsistencia en el comportamiento de componentes de la IU debe ser fcil de

visualizar. Se debe evitar la uniformidad en los componentes de la IU. Los objetos
deben ser consistentes con su comportamiento. Si dos objetos actan en forma
diferente, deben lucir diferentes. La nica forma de verificar si la IU satisface las
expectativas del usuario es mediante testeo.
Eficiencia del Usuario
Se debe considerar la productividad del usuario antes que la productividad de la
mquina. Si el usuario debe esperar la respuesta del sistema por un perodo
prolongado, estas prdidas de tiempo se pueden convertir en prdidas econmicas
para la organizacin. Los mensajes de ayuda deben ser sencillos y proveer respuestas
a los problemas. Los menes y etiquetas de botones deberan tener las palabras claves
del proceso.

Ley de Fitt
El tiempo para alcanzar un objetivo es una funcin de la distancia y tamao del
objetivo. Es por ello, que es conveniente usar objetos grandes para las funciones
importantes.
Interfaces Explorables
Siempre que sea posible se debe permitir que el usuario pueda salir gilmente de la IU,
dejando una marca del estado de avance de su trabajo, para que pueda continuarlo en
otra oportunidad. Para aquellos usuarios que sean noveles en el uso de la aplicacin,
se deber proveer de guas para realizar tareas que no sean habituales.Es conveniente
que el usuario pueda incorporar elementos visuales estables que permitan, no
solamente un desplazamiento rpido a ciertos puntos del trabajo que est realizando,
sino tambin un sentido de "casa" o punto de partida. La IU debe poder realizar la
inversa de cualquier accin que pueda llegar a ser de riesgo, de esta forma se apoya al
usuario a explorar el sistema sin temores.
Siempre se debe contar con un comando "Deshacer". Este suprimir la necesidad de
tener que contar con dilogos de confirmacin para cada accin que realice en sistema.
El usuario debe sentirse seguro de poder salir del sistema cuando lo desee. Es por ello
que la IU debe tener un objeto fcil de accionar con el cual poder finalizar la
aplicacin.Objetos de Interfaz Humana. Los objetos de interfaz humana no son
necesariamente los objetos que se encuentran en los sistemas orientados a objetos.
Estos pueden ser vistos, escuchados, tocados o percibidos de alguna forma. Adems,
estos objetos deberan ser entendibles, consistentes y estables.
Uso de Metforas
Las buenas metforas crean figuras mentales fciles de recordar. La IU puede contener
objetos asociados al modelo conceptual en forma visual, con sonido u otra
caracterstica perceptible por el usuario que ayude a simplificar el uso del sistema.
Curva de Aprendizaje
El aprendizaje de un producto y su usabilidad no son mutuamente excluyentes. El ideal
es que la curva de aprendizaje sea nula, y que el usuario principiante pueda alcanzar el
dominio total de la aplicacin sin esfuerzo.
Reduccin de Latencia
Siempre que sea posible, el uso de tramas (multi-threading) permite colocar la latencia
en segundo plano (background). Las tcnicas de trabajo multitarea posibilitan el trabajo

ininterrumpido del usuario, realizando las tareas de transmisin y computacin de datos

en segundo plano.
Proteccin del Trabajo
Se debe poder asegurar que el usuario nunca pierda su trabajo, ya sea por error de su
parte, problemas de transmisin de datos, de energa, o alguna otra razn inevitable.
Auditora del Sistema
La mayora de los navegadores de Internet (browsers), no mantienen informacin
acerca de la situacin del usuario en el entorno, pero para cualquier aplicacin es
conveniente conocer un conjunto de caractersticas tales como: hora de acceso al
sistema, ubicacin del usuario en el sistema y lugares a los que ha accedido, entre
otros. Adems, el usuario debera poder salir del sistema y al volver a ingresar
continuar trabajando en lugar dnde haba dejado.
Legibilidad
Para que la IU favorezca la usabilidad del sistema de software, la informacin que se
exhiba en ella debe ser fcil de ubicar y leer. Para lograr obtener este resultado se
deben tener en cuenta alguna como: el texto que aparezca en la IU debera tener un
alto contraste, se debe utilizar combinaciones de colores como el texto en negro sobre
fondo blanco o amarillo suave. El tamao de las fuentes tiene que ser lo
suficientemente grande como para poder ser ledo en monitores estndar. Es
importante hacer clara la presentacin visual (colocacin/agrupacin de objetos, evitar
la presentacin de excesiva informacin.
Interfaces Visibles
El uso de Internet, ha favorecido la implementacin de interfaces invisibles. Esto
significa que el usuario siempre ve una pgina especfica, pero nunca puede conocer la
totalidad del espacio de pginas de Internet. La navegacin en las aplicaciones debe
ser reducida a la mnima expresin. El usuario debe sentir que se mantiene en un nico
lugar y que el que va variando es su trabajo. Esto no solamente elimina la necesidad de
mantener mapas u otras ayudas de navegacin, sino que adems brindan al usuario
una sensacin de autonoma.
2. MODOS DE USO, NAVEGACIN, TCNICAS DE CODIFICACIN Y DISEO
VISUAL (COLOR, ICONOS, FONDO DE LETRAS).
La primera impresin del usuario cuando visita una aplicacin web la brinda el diseo
de la interfaz. Es por ello que, para lograr la apariencia adecuada y que el usuario se
sienta confortable, se tienen en cuenta varios aspectos, sobre todo relacionados con

tipografa, colores, grficos, navegacin, composicin del sitio, etc., que a continuacin
se detallan. En el sistema, el diseo de la interfaz est basado en pginas Web, se
utilizan las tonalidades suaves y refrescantes. El vocabulario manejado es lo menos
tcnico posible, acercndose al utilizado por los usuarios.
Se utilizan imgenes identificativas como vnculos para la navegacin dentro del sitio
web. La letra utilizada en todo el sistema es Times New Roman (12, 16) logrndose un
diseo estndar en todo el sitio. Los mensajes de error son pequeos y en Espaol.
Se utilizan pequeos conos para una mayor comprensin de las acciones, aunque se
seleccionaron imgenes consecuentes con el significado que se quiere trasmitir.
El fondo de las pginas es de color blanco para mayor frescura de la vista. Todo esto
se ha hecho con el objetivo de que el uso del sitio brinde comodidad y confort al
usuario.
La finalidad principal de la interfaz grafica es el de guiar a los usuarios de manera
intuitiva a travs del sistema y facilitarle la interaccin con el mismo. El sistema se
manejar por medio de interfaces as la informacin necesaria podr ser procesada de
manera eficiente y en corto tiempo el sistema tendr la respuesta a los requerimientos
del usuario, manejando adems los errores en los que este pueda incurrir.
Los estndares definidos en este documento para la interfaz grfica de usuario, sern
tomados como base para el diseo de los mdulos de manera que se cada modulo
podr realizar sus diseos de acuerdo a la necesidad, pero tomando como base los
estndares de este documento.
Para mayor entendimiento se ha definido en este documento primero estndares de los
objetos bsicos y luego los compuestos solo con la finalidad de mejorar el
entendimiento de este documento.

DISEO VISUAL.
El uso de tipografa, smbolos, color y otros grficos estticos y dinmicos son
comnmente usados para expresar hechos, conceptos y emociones. Esto compone un
diseo grfico sistemtico orientado a la informacin que ayuda a la gente a
comprender informacin compleja. La comunicacin visual efectiva para este sistema
se basa en algunos principios bsicos de diseo grfico.
Existen tres factores que pueden considerarse para el diseo de una interfaz de
usuario correcta: factores de desarrollo, factores de viabilidad y factores de aceptacin.

Los factores de desarrollo ayudan a mejorar la comunicacin visual. Esto incluye

toolkits y libreras de componentes, soportes para un rpido prototipado, y
adaptabilidad.

COLOR
Las discusiones sobre el color suelen ser confusas porque cientficos, artistas,
diseadores, programadores y profesionales del marketing describen el color de
diferentes formas.
Algunas de estas formas difieren del rojo, verde y azul que basan el sistema de color
RGB, familiar para los usuarios de perifricos con tubos de rayos catdicos (CRTs).
Los siguientes trminos aclaran conceptos sobre esta manera de entender el color:
Matiz (Hue) es la composicin espectral de longitud de onda que produce percepciones
de ser azul, naranja, verde, etc. por ejemplo.
Valor (Value) es la cantidad relativa de claridad u oscuridad del color en un rango desde
el negro al blanco (tambin llamado intensidad).
Saturacin (Chroma) es la pureza del color en una escala desde el gris a la variante
mas viva del color percibido.
Brillo (Brightness) es la cantidad de energa luminosa al crear el color.
La importancia del color es comunicar. Los cdigos de colores deben respetar el uso
profesional y cultural ya existente de determinados colores. Las connotaciones varan
fuertemente respecto a los diferentes tipos de usuario, especialmente cuando son de
diferentes culturas. Las connotaciones del color deben ser usadas con sumo cuidado.

ICONOS: Son pequeos grficos hiperenlace que:

De forma aislada
Acompaados de un hipertexto
Acompaados de una etiqueta
Acompaados de un "tooltip"

Utilizar ideografas estndar para representar las acciones de navegacin. No ser

innovador a este respecto, al menos no en el concepto bsico representado: generar
cierto grado de confusin con seguridad.
Para acciones de navegacin especficas de nuestro site: es preferible no utilizar
iconos, o, de usarlos, acompaarlos de una etiqueta.
En la mayora de casos aumenta la usabilidad un simple hipertexto, o un botn
generado slo con texto y las clases de estilo adecuadas para conferirle apariencia de
botn.
Los tamaos pueden ser variables, aunque se ha demostrado la misma eficacia para
los micro iconos y tienen un peso apreciablemente menor:
o

40 X 40 pixeles Peso < 1 KBytes

20 X 20 pixeles Peso < 300 Bytes

12 X 12 pixeles Peso < 100 Bytes

3. Tiempo de Respuesta y Retroalimentacin

Tiene el usuario todo el control sobre el interfaz? Se debe evitar el uso de

ventanas pop-up, ventanas que se abren a pantalla completa, banners
intrusivos...

Se informa constantemente al usuario acerca de lo que est pasando? Por

ejemplo, si el usuario tiene que esperar hasta que se termine una operacin, la
pgina debe mostrar un mensaje indicndole lo que est ocurriendo y que debe
esperar. Aadir en el mensaje el tiempo estimado que tendr que esperar el
usuario, o una barra de progreso, ayudar al usuario en este sentido.

Se informa al usuario de lo que ha pasado? Por ejemplo, cuando un usuario

valora un artculo o responde a una encuesta, se le debe informar de que su
voto ha sido procesado correctamente.

Cuando se produce un error,

Se informa de forma clara y no alarmista al usuario de lo ocurrido y de cmo
solucionar el problema? Siempre es mejor intentar evitar que se produzcan errores a
tener que informar al usuario del error.

Posee el usuario libertad para actuar? Se debe evitar restringir la libertad del
usuario: Evite el uso de animaciones que no pueden ser "saltadas", pginas en

las que desaparecen los botones de navegacin del browser, no impida al

usuario poder usar el botn derecho de su ratn...

Se ha controlado el tiempo de respuesta? Aunque esto tiene que ver con el

peso de cada pgina (accesibilidad) tambin tiene relacin con el tiempo que
tarda el servidor en finalizar una tarea y responder al usuario. El tiempo mximo
que esperar un usuario son 10 segundos.

En un sistema interactivo la retroalimentacin visual (o feedback visual) es toda forma

grfica de comunicacin que va del sistema en direccin al usuario. A pesar que la
retroalimentacin visual es un componente de software difcil de desarrollar y difcil de
disear para guiar y hacer fcil la tarea del usuario, la Interaccin Humano
Computadora (IHC) como el rea de la Ingeniera de Software han propuesto hasta hoy
diversas tcnicas para disear y desarrollar la retroalimentacin visual sin tener un
consenso. Este trabajo preconiza los patrones de interaccin como mecanismo
unificador entre la Ingeniera de Software y la IHC para disear la retroalimentacin
visual en funcin del contexto de la tarea del usuario, y permitir a la vez la
comunicacin entre los especialista involucrados en su desarrollo. El presente trabajo
propone como solucin un categorizacin de patrones de interaccin que permitan
capturar la experiencia en el diseo de la retroalimentacin visual de un SI en trmino
de los requerimientos del usuario.
Mejor dicho La retroalimentacin visual es un factor que corresponde tanto a la
ingeniera de software como a la IHC pues contribuye respectivamente en la utilidad y
la usabilidad de un sistema interactivo. La utilidad concierne a la funcionalidad del
software del sistema caracterizndolo para lo que fue hecho. La usabilidad concierne a
guiar pertinentemente al usuario en su tarea y hacer que el sistema se fcil de usar. A
pesar de la importancia de este doble rol de la retroalimentacin y su presencia
predominante en los actuales Sistemas Interactivos (SI) desafortunadamente no se ha
estudiado un mecanismo de diseo que permita encontrar un compromiso entre los
factores de Ingeniera de Software y de la IHC [9] [5]. De lado de la IHC, se han
propuesto un gran nmero de recomendaciones ergonmicas para la retroalimentacin
visual, pero sin especificar el como disear y concretizar la retroalimentacin visual en
un SI.
4.
MODALIDADES
DE
INTERNACIONALIZACIN.

DISEO

EN

HCI,

LOCALIZACIN

INTERNACIONALIZACIN: Es la operacin por medio de la cual se modifica un

programa, o conjunto de programas en un paquete, para que pueda adecuarse a
mltiples idiomas y convenciones culturales.

LOCALIZACIN: nos referimos a la operacin por la que, sobre un conjunto de

programas que ya han sido internacionalizados, se le proporciona al programa toda la
informacin necesaria para que pueda manejar su entrada y su salida de un modo que
sea correcto respecto a determinados hbitos lingsticos y culturales (por ejemplo el
signo de la moneda de un pas, el orden en que se expresan mes, da y ao en una
fecha.
5. MTODOS MULTIMEDIA, WEB, MODELOS METAFRICOS Y CONCEPTUALES
MULTIMEDIA
DirectX
Conjunto de interfaces de programacin de aplicaciones orientadas a la multimedia La
distribucin contiene:
Una librera en tiempo de ejecucin que consta de varias las cuales pueden ser
distribuidas con la aplicacin un sistema de desarrollo asociado, el
DirectX SDK, con varios archivos de librera y de cabeceras.
GDI (Graphics Device Interface)
Proporciona dibujo 2D y comandos de ventana no proporciona soporte multimedia.

MCI (Media Control Interface) primer arquitectura multimedia de Microsoft proporciona

comandos para la ejecucin multimedia (play, pause, stop, ...) para audio y vdeo no
soporta captura y edicin de vdeo

VFW (Video For Windows)

Primera arquitectura multimedia para Windows (1990)soporte de archivos AVI incluye
herramientas para captura y compresin de vdeo Tecnologas Multimedia - Desarrollo
de Aplicaciones Multimedia 5

QTW (QuickTime for Windows) portada por Apple de Mac a Windows (1993)al principio
solo soportaba reproduccin, aadiendo posteriormente captura y compresin

ActiveMovie
Reemplazo de VFW (1996) soporte de AVI, WAV y MPEG DirestShow
Reemplazo de ActiveMovie (1998) soporta captura y compresin
Integrada originalmente en la arquitectura DirectX (DirectX SDK)
(Actualmente disponible en Windows SDK) sustituida progresivamente por la nueva
arquitectura Media Foundation

CONCEPTUALES: Son los que realmente no estn en el plano, pero se pueden

deducir:

Punto: Por ejemplo, una flor roja en un jardn de donde predomine el amarillo.
Lnea: Una fotografa arquitectnica las refleja.
Plano: Una rea de cualquier forma geomtrica coloreada.
Volumen: Objetos que tengan profundidad volumtrica.

LA METFORA
Antes de comenzar a disear la interfaz es imprescindible pensar el concepto que se
necesita expresar. Elegir una metfora adecuada apoya y refuerza el concepto y el
proceso de comunicacin sin distraer, proporcionando una realidad fsica para el
entorno abstracto en el que se tienen que introducir los usuarios.
Es una estrategia para el diseo de interfaces es el uso de metforas. Un ejemplo
clsico es el diseo de la interface con el usuario de las computadoras Macintosh.
Antiguamente, para realizar cualquier operacin con una computadora era necesario
escribir una serie de comandos con una sintaxis perfecta. Desde que Apple Computer
empez a utilizar metforas, es posible para usuarios no conocedores de lenguajes de
programacin realizar operaciones con la computadora. Ya no es necesario saber los
comandos con los cuales se desecha un archivo. Ahora es posible simplemente tomar

el archivo y llevarlo al bote de la basura. Gracias al uso correcto de interfaces, la

tecnologa resulta transparente al usuario.
La metfora ha dado paso, sin embargo, a una nueva perspectiva: la virtualidad. Bajo la
perspectiva de la virtualidad
6. PSICOLOGA EN HCI.
Las expectativas extradas de los estudios de la psicologa cognitiva acerca de que las
palabras con mayor ndice de familiaridad serian ms fciles de aprender fueron
contradichas por el hallazgo de que estas fueron las menos precisas de todas.
La psicologa cognoscitiva ha jugado un papel importante en el diseo de interfaces
pues provee las bases tericas sobre cmo procesa informacin el ser humano. Sin
embargo, las implicaciones del diseo de interfaz llegan ms all de lo estrictamente
tcnico o cognitivo, llegando a poner en duda la esencia misma de nuestras personas y
nuestras relaciones. Este breve ensayo esboza la relacin entre tecnologas de
comunicacin e identidad, a partir del anlisis de la virtualidad como un fenmeno que
ha trascendido su mera funcionalidad como estrategia para el diseo de interfaz. Las
tecnologas, para ser usadas efectivamente, requieren ser transparentes.
Transparencia significa "la cualidad de una configuracin especfica de medios (y no de
los medios mismos) en la cual el usuario ignora la presencia de los componentes del
sistema y es capaz de ver a travs del sistema para concentrarse completamente en la
funcin ltima.

Conclusiones

Es importante destacar que aunque se sigan estrictamente las normas de la gua

no hay garanta de que la interface sea usable.

Es mejor seguir las guas que no, no seguirlas. Puede que podamos hacer un
diseo mejor, pero seguramente los problemas que pueda plantear pueden ser
superiores a los problemas que aporta.

Linografa
http://kenderprogramacion.blogcindario.com/2012/06/00002-estandares-de-interfazgrafica.html