Estndares para el

Diseo de interfaces

Jos Luis Dorado B.

Daro Fernndez.

INTERFAZ GRFICA

Interfaz
Grfica
Es el conjunto de elementos grficos (ventanas, mens, botones,
animaciones, opciones, imgenes etc.) que permiten la interaccin
del usuario con la aplicacin.

Interfaz
Grfica
Una interfaz de usuario mal diseada es un
factor que frena su uso.

Las interfaces grficas son los elementos que permiten comunicarnos

con todos los elementos sin necesidad de aprender cmo navegar
en l.

Caractersticas bsicas de una

buena interfaz :
Las interacciones se deben basar en
acciones fsicas sobre elementos
visuales (iconos, botones, imgenes,
barras de desplazamiento

Las acciones deben ser rpidas y

reversibles,
con efectos inmediatos
Existencia de
herramientas de Ayuda
y Consulta
Evitar errores en la
configuracin de las acciones

Diseo ergonmico mediante el

establecimiento de mens, barras
de acciones e iconos de fcil acceso

Es el conjunto de
conocimientos
cientficos
aplicados para
que los
productos y
ambientes se
adapten a las
capacidades y
limitaciones
fsicas y
mentales de la
persona.

Representacin fija y permanente

de un determinado contexto de
accin (fondo)
El objeto de inters ha de ser
de fcil identificacin

Facilidad de
comprensin,
aprendizaje y uso

ESTANDAR.

Estndar es usar las

herramientas correctamente:
Especificaciones que determinan la manera en que se
construye y funciona a una tecnologa en particular.
El uso correcto de las tecnologas, guas y normas disponibles,
produce a los
desarrolladores resultados rentables y mayor productividad y
competitividad.

Son guas para utilizar herramientas que brinden a los sitios la

posibilidad de ser fcilmente mantenidos, extendidos, rediseados,
usados
y comprendidos, debido a la estandarizacin.

Algunos de los ms
importantes son:

ISO/IEC 9126: Evaluacin de productos software:

caractersticas de calidad y directrices para su uso
ISO 9241: requisitos ergonmicos para trabajar con
terminales de presentacin visual (VDT)
ISO/IEC 10741: interaccin de dilogos
ISO/IEC 11581: smbolos y funciones de los iconos
ISO 11064: diseo ergonmico de centros de control
ISO 13406: requisitos ergonmicos para trabajar con
presentaciones visuales basadas en paneles planos
ISO 13407: procesos de diseo centrados en la
persona para sistemas interactivos

Consideraciones de
Diseo

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.

Consideraciones de
Diseo

Los factores de desarrollo ayudan a mejorar la

comunicacin visual. Esto incluye toolkits y
libreras de componentes, soportes para un
rpido prototipado, y adaptabilidad.

Consideraciones de
Diseo

Los factores de viabilidad tienen en cuenta

factores humanos y expresan una fuerte
identidad visual. Esto incluye: habilidades
humanas, la identidad del producto, un claro
modelo conceptual, y mltiples
representaciones.

Consideraciones de
Diseo

Como factores de aceptacin estn la poltica

de la corporacin, los mercados
internacionales, y la documentacin y
entrenamiento.

El Lenguaje Visible.
El Lenguaje Visible se refiere a todas las tcnicas grficas
usadas para comunicar el mensaje o contexto. Esto incluye:
Disposicin o Layout: formatos, proporciones, y mallas
(grids).
Organizacin: ya sea 2D y 3D.
Tipografa: seleccin de tipos de letra y estilos, incluyendo la
anchura fija y variable.
Color y Textura: color, textura y luminancia aportan
informacin compleja y realidad pictorial.
Imgenes:
signos, iconos y smbolos, desde lo
fotogrficamente real a lo abstracto.
Animacin: un display dinmico o cintico: muy importante
en la utilizacin de imgenes relacionadas con el vdeo.

Principios fundamentales
en el uso del lenguaje
visible

Organizar: proveer al usuario de una estructura

conceptual clara y consistente.
Economizar: hacer lo mximo con la menor
cantidad de elementos.
Comunicar: ajustar la presentacin a las
capacidades del usuario.

Organizar.

Consistencia, disposicin de la pantalla,

relaciones y navegabilidad son importantes
conceptos de organizacin.

Disposicin de la
pantalla (Layout).

Hay tres formas para disear una disposicin

espacial de la pantalla: usar una estructura de
malla (grid), estandarizar la disposicin de la
pantalla, y usar los elementos relacionados con
grupos.

Relaciones.

Conectar los items relacionados y disociar los

items independientes mejora sensiblemente la
organizacin visual.

Navegabilidad.

Existen tres tcnicas importantes de

navegabilidad:
proveer un foco inicial para la atencin del
usuario.
dirigir la atencin a los items importantes,
secundarios o perifricos.
asistir la navegacin a travs del material.

Economizar.

Consiste en simplicidad, claridad, singularidad

y nfasis

Simplicidad.

La simplicidad incluye nicamente los

elementos que son ms importantes para la
comunicacin. Debera producir tambin la
menor obstruccin posible.

Claridad..

Iconos ambiguos y claros.

Todos los componentes deberan ser diseados
para que su significado no sea ambiguo, que no
lleve al equvoco.

Singularidad..

Las propiedades de los elementos necesarios

deben ser caractersticas singulares.

nfasis.

Los elementos ms importantes deben ser

fcilmente percibidos.
Se debe restar nfasis a los elementos no
crticos y minimizarlos para no ocultar
informacin crtica.

Comunicar.

La interfaz grfica de usuario debe mantener

un balance entre legibilidad, tipografa,
simbolismo, mltiples vistas, y color o textura,
para comunicar adecuadamente.

Legibilidad.

La pantalla debe ser fcil de identificar e

interpretar, adems de atractiva y agradable.

Tipografa.

Incluye caractersticas de elementos individuales

(tipos de letra y estilos) y sus agrupamientos
(tcnicas de estilo).
Recomendaciones:
un mximo de 3 tipos de letra en un mximo de 3
tamaos de puntos.
un mximo de 40-60 caracteres por lnea de texto.
ajustar el texto a la izquierda y los nmeros a la
derecha. En listas, usar el centrado de texto.
Tipos de letra y estilos recomendados
usar maysculas y minsculas siempre que sea
posible.

Mltiples vistas.
Proveer de mltiples perspectivas en la pantalla
de estructuras y procesos complejos. Hacer uso
de estas mltiples vistas:
- mltiples formas de representacin.
- mltiples niveles de abstraccin.
- vistas alternativas simultaneas.
- conexiones y referencias cruzadas.
- metadatos, metatexto y metagrficos.
Mltiples vistas verbales y visuales.

Color.

El color es uno de los ms complejos elementos

a la hora de intentar disear una interfaz
grfica correcta. Puede ser una potente
herramienta
de
comunicacin
usado
correctamente. Los colores pueden ser
combinados para tomar un sentido visual.

Ventajas en el uso del

color para facilitar la
comunicacin:

enfatizar la informacin importante.

identificar subsistemas de estructuras.
portar objetos naturales de un modo realista.
reducir los errores de interpretacin.
aadir dimensiones a la codificacin.
incrementar la comprensibilidad.
incrementar la credibilidad y atractivo.

Cuando el color es usado correctamente la gente suele

aprender ms.
Tambin existen desventajas en el uso del color:
requiere un equipamiento ms complicado y costoso.
la mayora no se acomoda a la visin de los
daltnicos.
algunos
colores pueden potencialmente causar
molestias visuales y postimgenes.
puede contribuir a asociaciones errneas a causa de
diferencias multidisciplinarias o multiculturales.

Los tres principios

bsicos de diseo

organizacin del color.

economa del color
comunicacin del color.

La organizacin del
color

El color debe emplearse para agrupar los items

relacionados.
Debe aplicarse una organizacin de color
consistente tanto a las pantallas, como a la
documentacin y a los materiales de entrenamiento.
Los colores similares infieren similitud en los
objetos. Se debe mirar la consistencia al agrupar
objetos con el mismo color.
Una vez se establece una codificacin del color, esta
debe ser usada en toda la interfaz grfica as como
en la documentacin y publicaciones relacionadas

Economa del color.

La economa del color, sugiere usar un mximo

de 5 +/- 2 colores cuando el significado tiene
que ser recordado.

Comunicacin del color.

El nfasis del color sugiere usar fuertes contrastes en

valor y tono para centrar la atencin del usuario en la
informacin ms importante.
La comunicacin en color pugna con la legibilidad,
incluyendo usar un color apropiado para las reas central
y perifrica del campo visual. Las combinaciones entre
colores pueden producir influencias entre ellos y cambios
en la eleccin de los mismos.
Es aconsejable que el color rojo y el verde no sean usados
en la periferia del campo visual sino en el centro. Si son
usados en la periferia, es necesario un medio para captar
la atencin del usuario, como un cambio de tamao o el
parpadeo.

GRACIAS!