Diseo de Interfaz de usuario

Una interfaz debe ser usable y accesible. Para ello debe ser creada por y para los usuarios. Debemos
aprender a disear interfaces pensando en los usuarios. La disciplina que se encarga de esto es la
Interaccin Humano-Computador
Accesibilidad
La accesibilidad es la parte de la usabilidad que implica la necesidad de facilitar el acceso. Una web, para
ser usable, debe ser accesible. No olvidemos que la usabilidad parte de los principios del diseo universal o
diseo para todos.
Existen varias normas o estndares acerca de la accesibilidad: a nivel nacional encontramos las normas
UNE 139801-EX y UNE 139802-EX (que recogen ms de cien requisitos de accesibilidad), y a nivel
internacional podemos guiarnos por las pautas diseadas por la "Iniciativa de Accesibilidad a la Web"
(WAI) del World Wide Web Consortium (W3C), que contienen catorce pautas de diseo. En la WAI se han
determinado tres niveles de profundidad al dotar de accesibilidad a los sitios web, por los que un
proveedor de contenidos de pginas web:
Nivel A: debe de satisfacer este punto de verificacin.
Nivel AA: debera satisfacer este punto de verificacin.
Nivel AAA: puede satisfacer este punto de verificacin.
Entre las pautas estn:
Proporcionar alternativas equivalentes de contenido visual y auditivo.
Asegurar que los textos y grficos son comprensibles cuando se vean sin color.
Utilizar marcadores y hojas de estilo apropiadamente.
Identificar el lenguaje natural usado.
Crear tablas que se transformen correctamente.
Asegurar que las pginas que incorporan nuevas tecnologas se transformen correctamente.
Proporcionar al usuario el control sobre los cambios de los contenidos "tiempo dependientes".
Asegurar que el interfaz de usuario sigue los principios de un diseo accesible: funcionalidad de acceso
independiente del dispositivo, teclado operable, voz automtica, etc.
Disear con independencia del dispositivo.
Utilizar soluciones de accesibilidad provisionales de forma que las ayudas tcnicas y los antiguos
navegadores operen correctamente.
Utilizar tecnologas W3C (de acuerdo con las especificaciones) y seguir las pautas de accesibilidad.
Proporcionar informacin de contexto y orientacin para ayudar a los usuarios a entender pginas o
elementos complejos.
Implementar mecanismos de navegacin claros y consistentes (informacin orientativa, barras de
navegacin, un mapa del sitio, etc.) para incrementar la probabilidad de que una persona encuentre lo que
est buscando en un sitio.
Asegurar que los documentos son claros y simples para que puedan ser ms fcilmente comprendidos.
Usabilidad
usabilidad es algo que funciona bien: significa que una persona de capacidad y aptitudes medias (o
incluso por debajo de la media) pueda usar algo, tanto si es un sitio Web, un mando a distancia o una
puerta giratoria, para lo que se supone que sirve, sin frustrarse mientras lo hace. Steve Krug.
La verdadera usabilidad es invisible. Si algo anda bien, nadie se queja. Jeffrey Rubin & Dana Chisnell

Aspectos del diseo de interfaz.
El diseo del interfaz es uno de los elementos "clave" en la realizacin del programa. Podemos definir el
interfaz como: "el conjunto de trabajos y pasos que seguir el usuario, durante todo el tiempo que se
relacione con el programa , detalllando lo que ver y escuchar en cada momento, y las acciones que
realizar, as como las respuestas que el sistema le dar".
Este interfaz requiere, en s mismo, un esfuerzo mental independiente del contenido que nos muestre. El
usuario adems de entender el mensaje, ha de comprender la mecnica y la operativa que le oferta el
interfaz. (sintxis, rdenes, cdigos, abreviaciones, iconos...) Todo esto supone una carga de memoria
sumada por el usuario. Un buen sistema, por tanto, ha de requerir menos esfuerzos mentales de manejo
del interfaz y concentrar la atencin en el contenido que quiere transmitir.
Con el fin de que esta carga de memoria sea minimizada, es muy importante establecer un sistema de
ayudas adecuado. Estas ayudas han de ser diferentes de las que proporciona el personaje central
(animacin) que se centrar en el contenido. Las ayudas al interfaz, se basarn sobre todo en la operativa
y la aclaracin de funciones de los elementos visuales o acsticos.
De hecho el interfaz es en realidad un modelo mental permanente, es decir una representacin cognitiva
o conceptualitzacin que el usuario hace del sistema. A fin de que este modelo se mantenga a lo largo del
programa ha de tener una consistencia, es decir mantener su coherencia de principio a fin. Por ello se han
de mantener las reglas, los criterios en la operatividad, la imgen parcial o total, etc...Una incoherencia
de diseo puede aportar prdidas de eficacia del propio contenido que se quiera dar.
Las caractersticas bsicas que queremos conseguir con este interfaz, se podran sintetizar en:
- Facilidad de aprendizaje y uso.
- Representacin permanente de un contexto de accin (fondo).
- El objeto de inters ha de ser de fcil identificacin.
- Diseo ergonmico (barra de acciones o iconos, preferentemente a la derecha)
- Las interacciones se basarn en acciones fsicas sobre elementos de cdigo visual o auditivo (iconos,
imgenes, mensajes...) antes que en selecciones de tipo men con sintxis y rdenes.
- Las operaciones sern rpidas, incrementales y reversibles, con efectos immediatos.
- Tratamiento del error bien cuidado y adecuado al nivel de usuario y contenidos trabajados.
Ya que el elemento principal de este interfaz es la pantalla del ordenador, se tendr especial cuidado en
su organizacin, combinando Informacin, elementos de interaccin y la informacin interactiva.
El tratamiento del color es otro aspecto importante. Si bien el diseo de trabajo sobre la maqueta se
realizar en "true color" (16 millones de colores), la concreccin final se har para un equipo estandard
de 256 colores. Otras alternativas supondran cargar excesivamente la ocupacin de espacio en el CD-
Rom, teniendo en cuenta, adems la extensin que tienen los videos de los casos prcticos, las
animaciones y tambin el sonido. Por tanto, el ahorro de espacio ser un factor decisivo.
Pero este ahorro no implica una falta de calidad directa, en el tratamiento de los grficos y de las
imgenes. El tratamiento del color ha de contar (adems del diseo de las formas) con toda una serie de
normas y parmetros con coherencia interna, como la luminosidad, saturacin, tono, etc..
La tipografa es otro factor importante del interfaz. Se procurar la combinacin de textos en letras
maysculas y minsculas. Procurando no mezclar en pantalla ms de dos tipos y tres medidas diferentes
de letra.
La integracin de recursos multimedia es muy importante en este proyecto. El peso del programa recae
sobre el personaje animador, con la intencin de que el usuario se identifique con l. Este personaje,
adems, puede hablar y transmitir mensajes de accin, ayuda y/o refuerzo. Tambin consideramos
necesario el tratamiento del audio con efectos especiales y msicas escogidas para las diferentes partes
del programa.
Pasos para el diseo de interfaz
Pasos Clsicos
En el proceso de diseo de una interfaz de usuario se pueden distinguir cuatro fases o pasos
fundamentales:
Reunir y analizar la informacin del usuario
Disear la interfaz de usuario
Construir la interfaz de usuario
Validar la interfaz de usuario

Reunir y analizar la informacin del usuario: Es decir concretar a travs de tcnicas de requerimentacin,
qu tipo de usuarios van a utilizar el programa, qu tareas van a realizar los usuarios y cmo las van a
realizar, qu exigen los usuarios del programa, en qu entorno se desenvuelven los usuarios (fsico,
social, cultural).
Disear la interfaz de usuario: Es importante dedicar tiempo y recursos a esta fase, antes de entrar en la
codificacin. En esta fase se definen los objetivos de usabilidad del programa, las tareas del usuario, los
objetos y acciones de la interfaz, los iconos, vistas y representaciones visuales de los objetos, los mens
de los objetos y ventanas. Todos los elementos visuales se pueden hacer primero a mano y luego refinar
con las herramientas adecuadas.
Construir la interfaz de usuario: Es interesante realizar un prototipo previo, una primera versin del
programa que se realice rpidamente y permita visualizar el producto para poderlo probar antes de
codificarlo definitivamente
Validar la interfaz de usuario: Se deben realizar pruebas de usabilidad del producto, a ser posible con los
propios usuarios finales del mismo.
Es importante, en suma, realizar un diseo que parta del usuario, y no del sistema.
Existen 11 pasos en el proceso de diseo "centrado en las tareas", similar al anterior pero que desglosa
algunas actividades implcitas en otras, as:
1.- Entender quien usar el sistema para hacer qu.
2.- Elegir tareas representativas para el diseo.
3.- Plagiar o copiar.
4.- Bosquejar un diseo.
5.- Pensar acerca del diseo.
6.- Crear un prototipo.
7.- Evaluarla con los usuarios.
8.- Repetir.
9.- Construirla.
10.- Rastrearla.
11.- Cambiarla.


Tcnicas y pasos avanzadas para el diseo de interfaces de usuario
Presentacin de informacin: No se deben colocar demasiados objetos en la pantalla, y los que existen
deben estar bien distribuidos. Cada elemento visual influye en el usuario no slo por s mismo, sino
tambin por su combinacin con el resto de elementos presentes en la pantalla.
El nmero de elementos visuales que perciben son: en el caso a) 1 (el fondo); en b) 3 (la lnea, lo que est
encima y lo que est debajo); en c) son 5 (el espacio fuera del recuadro, el recuadro, la lnea y el espacio
encima y debajo de sta); finalmente, en d) el nmero se eleva a 35, siguiendo el mismo criterio.
Conclusin: cada elemento nuevo que se aade influye ms de lo que se piensa en el usuario.
Elementos de diseo de pantalla y su percepcin visual
Anlisis de Color: es probablemente el elemento de la interfaz que con ms frecuencia es mal utilizado. El
color comunica informacin, no es slo decorativo (ejemplo: reforzar mensajes de error). Deben
utilizarse combinaciones adecuadas (por ejemplo, las paletas proporcionadas por los sistemas
operativos). El color debe atraer la atencin, pero no cansar despus de un rato de trabajo. Es
especialmente importante seguir las lneas de diseo existentes. Principio bsico: disear primero en
blanco y negro, y luego aadir el color.
Anlisis Audio. Primero es preciso ver cundo es ms apropiado que la informacin visual. Segundo,
determinar el sonido adecuado. Tercero, permitir la personalizacin (volumen y desactivacin). Como en
el caso de los colores existen guas de uso. En lugares de trabajo abiertos, puede ser poco efectivo;
adems, puede ser embarazoso para algunas personas. El sonido debe usarse para informar, no cuando
no aade nada nuevo (por ejemplo, un mensaje de aviso de correo o de bienvenida, respectivamente, al
iniciar una sesin de trabajo).
Anlisis Animacin. Se define como un cambio en el tiempo de la apariencia visual de un elemento
grfico. Ejemplos de su uso: progreso de acciones (copia de ficheros en Windows 95, instalacin de
programas), estado de procesos (iconos de impresora), acciones posibles (cambios en el cursor al
desplazar el ratn). La animacin puede ayudar a subrayar iconos importantes, mostrar el estado de un
objeto particular o explicar su comportamiento.
Diseo internacional. Debe hacerse un uso adecuado de la terminologa. Hay mucho trabajo en este
campo. Debe tenerse cuidado con las diferencias culturales (gestos, terminologa, dibujos, formatos de
telfonos o calendarios, etc.).
Anlisis y Eleccin de controles. Muchas veces existe la duda de qu controles utilizar.
En realidad no existe una nica forma correcta. Un aspecto a considerar es la escalabilidad (men de
10/1000 elementos; ejemplo: programas del men inicio de Windows 95).
Ejemplo de alternativas: usar un men de barra o de paleta, permitir arrastrar objetos o no (problema: no
existe indicacin visual de que se pueda arrastrar el objeto: qu objetos se pueden arrastrar? a dnde se
pueden arrastrar? qu ocurrir cuando lleguen all? se podr deshacer la accin?).
Diferentes controles para los mismos datos
Guas de Expertos Existen diversas guas de diseo sacadas de expertos y comits, que complementan a
las reglas de oro estudiadas anteriormente. Por citar algunas de ellas:
Demasiada simetra puede hacer las pantallas difciles de leer.
Si se ponen objetos sin alinear, hacerlo drsticamente.
Asimetra=activo, simetra=sereno.
Elementos de tamao y color similares se perciben como pertenecientes a un grupo.
Asumir errores en la entrada del usuario.
Disear para el usuario, no para demostrar los propios conocimientos tecnolgicos.
Unos grficos espectaculares no salvarn a una mala interfaz.

Modos de Uso y Navegacin
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. Para acciones de navegacin
especficas de nuestro sitio: 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 micros iconos y tienen un peso apreciablemente
menor:
40 X 40 pixeles Peso < 1 KBytes.
20 X 20 pixeles Peso < 300 Bytes.
12 X 12 pixeles Peso < 100 Bytes.

2.- MODOS DE USO, NAVEGACIN, TCNICAS DE CODIFICACIN Y DISEO VISUAL. (COLOR, CONOS,
FONDO DE LETRAS).

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.
Los factores de desarrollo ayudan a mejorar la comunicacin visual. Esto incluye toolkits y libreras de
componentes, soportes para un rpido prototipado, y adaptabilidad.
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.
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.
- Secuenciamiento: el aproximamiento total del secuenciamiento visual al secuenciamiento lgico.
- Sonido: abstracto, vocal, concreto, o musical.
- Identidad Visual: las reglas adicionales y nicas que proporcionan consistencia de conjunto a una
interfaz de usuario.
Principios del Diseo de interfaces de usuario.
Existen tres principios fundamentales relacionados 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.
Consistencia.
Existen 4 visiones de la consistencia: consistencia interna, consistencia externa, consistencia del mundo
real y cuando no hay consistencia.
La primera visin, la consistencia interna, afirma que las mismas convenciones y reglas deben ser
aplicadas a todos los elementos de la interfaz grfica de usuario.
Los mismos tipos de elementos se muestran en los mismos lugares.
Aquellos con diferentes tipos de comportamiento tienen su propia apariencia especial.
La consistencia externa afirma que las plataformas existentes y convenciones culturales deben ser
utilizadas y aplicadas en las interfaces grficas de usuario.
Consistencia externa para iconos de herramientas de texto.
Estos iconos son de diferentes aplicaciones, pero generalmente tienen el mismo significado.
Consistencia del mundo real.
La consistencia del mundo real afirma que las convenciones y reglas deben ser consistentes y
consecuentes con las experiencias del mundo real, y las observaciones y percepciones del usuario.
El ltimo punto, la innovacin, trata con la carencia de consistencia. Desviarse de las convenciones
existentes slo debe hacerse cuando proporciona un CLARO beneficio al usuario.

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.
Una estructura de malla puede ayudar a colocar mens, paneles de dilogo o de control. Generalmente el
mximo nmero de divisiones horizontales o verticales se ajusta a la expresin 7 +/- 2. Esto ayudar a
hacer la pantalla ms inteligible y menos saturada.
Relaciones.
Conectar los items relacionados y disociar los items independientes mejora sensiblemente la
organizacin visual.
Relaciones:
Izquierda: La localizacin, forma y valor pueden todas ellas crear relaciones que es posible sean
inapropiadas.
Derecha: relaciones claras, consistentes, apropiadas y fuertes.
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.
Navegabilidad:
Izquierda: diseo pobre.
Derecha: diseo mejorado: la disposicin espacial y el color ayudan a centrar la atencin del usuario a las
reas ms importantes.
Economizar.
Hay que considerar 4 grandes factores: 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.
Diseo complicado y diseo ms simple.

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.
Texto ilegible y legible.
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).
Se deber usar un nmero reducido de tipos de letra que sern legibles, claros y singulares (por ejemplo,
para distinguir diferentes clases de informacin).
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.
- portar tiempo y progreso.
- 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.
La memoria para la informacin en color parece ser mucho ms capaz que para la informacin
presentada en blanco y negro.

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.

Trminos y conceptos relacionados con el 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.
Principios de diseo del color.
Los tres principios bsicos de diseo pueden aplicarse tambin al color: organizacin del color, economa
del color y comunicacin del color.
Organizacin del color.
La organizacin del color influye en la consistencia de la organizacin. 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 completud y 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.
El segundo principio del color, la economa del color, sugiere usar un mximo de 5 +/- 2 colores cuando el
significado tiene que ser recordado.
La idea fundamental es usar color para aumentar la informacin proporcionada en blanco y negro (por
ejemplo, disear la interfaz para que funcione bien primero en blanco y negro).
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. Cuando demasiadas figuras o campos del fondo compiten por la atencin
del usuario se produce cierta confusin. La jerarqua de los estados sobreiluminado, neutro e
infrailuminado para todas las reas de la pantalla deben ser cuidadosamente diseadas para
proporcionar la mxima sencillez y claridad.
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, por ejemplo.
El negro, azul, blanco y amarillo son apropiados para la periferia del campo visual, donde la retina es ms
sensitiva a ellos.
Si se produce un cambio en el tamao de los elementos coloreados se debe tener en cuenta que nuestra
percepcin sobre su luminancia o tono puede cambiar, y tomar las medidas oportunas.
Es preciso usar colores que difieran tanto en valor como en tono. Las combinaciones rojo/verde,
azul/amarillo, verde/azul, y rojo/azul deben ser evitadas excepto si se necesita un efecto visual especial.
Pueden crear vibraciones, ilusiones, sombras y postimgenes.
Para situaciones con poca iluminacin se recomienda texto claro, lneas finas y formas pequeas o
medianas sobre un fondo oscuro; para situaciones con iluminacin abundante, por el contrario, texto
oscuro (azul o negro), lneas finas y formas pequeas sobre fondo claro. Estas combinaciones son para
presentaciones con transparencias, videos, papel o estaciones de trabajo.
Simbolismo del 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.

Por ejemplo: los buzones de correos son azules en Estados Unidos, rojo brillante en Inglaterra y amarillos
en Grecia. Si se usa un icono grfico para representar el correo electrnico, es conveniente adecuar su
color al pas para mejorar la comunicacin.
Caractersticas del color en una interfaz grfica.
Consideremos cul es la razn ltima para aprovechar las ventajas del color: ofrecer al usuario la misma
informacin pero de una forma ms persuasiva o amistosa, incrementando su inters. Por lo tanto, la
principal utilidad que va a tener el color en las pantallas de nuestra interfaz grfica ser la de resaltar las
informaciones que se consideren ms importantes en detrimento del resto, para as poder identificar
rpidamente los datos ms relevantes, que sern aquellos a los que se presta atencin prioritariamente.
Por otra parte, un buen manejo del color nos lleva a agrupar los diferentes elementos de la pantalla en
conjuntos, que quedarn asociados aunque estn distanciados espacialmente, y a distribuir de forma
clara los que deben diferenciarse. Este punto de vista de asociaciones y divisiones se aplica tanto a los
componentes fsicos de la pantalla como a las ideas y procesos inherentes a ellos. Por ejemplo, se puede
emplear la misma gama de colores para sealar una secuencia de procesos determinada sin necesidad de
numeraciones o indicaciones directas. Tambin es muy interesante cuando tenemos informacin
dinmica en el tiempo, ya que se altera el color cuando cambia el estado de la informacin.
Debemos tener en cuenta que los objetos verdes o azules parecen ms grandes que aquellos que son
rojos o amarillos. Tambin consideraremos que los colores fros hacen aparecer al objeto como mucho
ms plano que los calientes, que producen efecto de relieve.
Pero, como se ha enunciado brevemente antes, no se puede emplear cualquier color en cualquier
momento. Es necesario tener un criterio de distribucin decidido desde el momento en que se conoce
que se van a utilizar colores en nuestras pantallas.
Uno de los errores ms habituales a la hora de disear una pantalla es la de, intentando aprovechar la
posibilidad de usar el color, acabar abusando de l. Esto puede ocurrir cuando en la aplicacin se
presentan, por ejemplo, diferente gama de colores, lo que provoca confusin a la persona que va a
manejarla, ya que acaba preocupndose ms de adaptar su vista al continuo cambio de color que al
contenido de la informacin. Tambin hay que hacer hincapi en evitar las combinaciones que puedan
provocar connotaciones culturales negativas, que pueden llegar a herir susceptibilidades.
Veamos un ejemplo de combinacin errnea indiscriminada en la siguiente imagen. La pantalla que se ha
elegido pertenece a una aplicacin sobre historiales clnicos. Dispone de dos bloques de informacin: los
datos personales del paciente y la relacin de las citas anteriores a la actual, cada uno de ellos en un
marco (frame). Realmente son dos informaciones que, aunque independientes, mantienen la asociacin
de pertenecer a la misma persona. Sin embargo, el diseador ha decidido distinguir claramente las
diferencias al establecer los colores verde y rojo como fondo para estos marcos. La conjuncin de dos
tonos tan distintos entre s invita a pensar que ambos conceptos son completamente exclusivos, aunque
en la realidad no sea el caso, ya que tanto los datos personales como las citas anteriores se refieren al
mismo paciente.
Combinacin errnea indiscriminada.
Otro error en el diseo de esta pantalla ha sido la de utilizar unas etiquetas con un color muy parecido en
el fondo. Ocurre en los cuadros de texto de los datos personales. El azul es muy semejante al verde y por
lo tanto no permite una ntida delimitacin. Obliga a forzar los ojos, lo que desde luego agota la vista del
usuario en muy poco tiempo. Adems, cuando se utilizan varias tonalidades del mismo color, como es el
caso, puede incluso provocar confusin, o dar la impresin de que algunos datos fsicamente cercanos
estn conceptualmente distantes.
Por ltimo, veamos la diferencia entre un texto de color oscuro sobre fondo claro (como suele ser lo
habitual) y al revs. La primera situacin la tenemos en los datos personales y la segunda en las citas
anteriores. Como se puede observar, es mucho ms fcil trabajar con situaciones como la del marco
superior.
Pantalla con colores adecuados.
Este problema de atropello de los colores no es exclusivo de cada pantalla considerada de una manera
singular. Es posible que se estudie cada pantalla de forma individual y nos parezca que las combinaciones
han sido las adecuadas, que el efecto ptico que producen es armonioso y no son susceptibles de
provocar efectos negativos en el ojo del usuario ni desviaciones desproporcionadas de atencin. Esto es
debido a que a veces el problema se presenta porque la combinacin errnea se compone entre
pantallas.
No es de recibo que a lo largo de la aplicacin el usuario pueda ver que el predominio de los tonos en
tiempo de ejecucin va variando sin ningn orden lgico y que lleguen, incluso, a provocar interferencias
entre las pantallas. Por supuesto, hay que intentar mantener una coherencia, buscando siempre
transmitir una sensacin de bloque homogneo durante toda la aplicacin. Si, por ejemplo, los fondos de
todas las pantallas no pertenecen a la misma gama de color, provocar sin duda confusin a la persona
que en este momento observa el monitor de su ordenador, a pesar de que pantalla a pantalla la
composicin de tonalidades haya sido la adecuada. Desde luego, el problema de la uniformidad es
extrapolable al resto de caractersticas de nuestra aplicacin. El usuario debe encontrarse en un entorno
homogneo para poder trabajar.
La anterior reflexin nos lleva a establecer que cualquier medida tomada en cuanto al color para
incrementar los aspectos ergonmicos de nuestras aplicaciones deben ser estudiadas tanto a nivel
individual de cada pantalla como a nivel global de la aplicacin completa.
Combinaciones entre colores.
En el siguiente cuadro vemos ciertas combinaciones entre colores que pueden considerarse correctas e
incorrectas. Por ejemplo, los colores claros quedan bien integrados si se unen con colores oscuros, ya que
hay un buen contraste, pero en determinados casos se pueden combinar con tonos tambin claros,
excepto si son demasiado parecidos, como ocurre con el azul y el verde. En general, digamos que tanto
un fondo claro con texto y figuras oscuras es tan admisible como un fondo oscuro con texto y figuras
claros, pero en el primer caso se gana en legibilidad, como veamos en la figura 1.
Combinaciones de colores.
En la combinacin de colores oscuros hay que tener ms cuidado, porque es ms fcil confundirse y que
se unan colores que hagan un mal efecto. Tonos oscuros como el rojo y el azul presentados en una misma
pantalla obligan al usuario a un esfuerzo de acomodacin ptica innecesario.
Cuando pensamos en qu colores debemos emplear en nuestras pantallas debemos reparar en la
influencia que un determinado color puede llegar a tener sobre el resto. Los colores provocan
sensaciones cuando se abandona su visin y se pasa sin transicin a observar otro. Por ejemplo, si
estamos viendo el color azul y pasamos a ver un amarillo, ste se ver brillante. Si no se pasa
anteriormente por el azul, el amarillo se ver mucho ms plido y mate.
En general, los colores tienen unas propiedades psicolgicas que actan sobre nuestro subconsciente.
Existen algunos efectos de la yuxtaposicin entre colores que se admiten de forma general. Por ejemplo,
el color amarillo, que como hemos dicho es alegre y brillante, pierde toda su fuerza cuando se combina
con el blanco. Para rebajar el excesivo dinamismo que evoca el naranja no hay nada como mezclarlo con
el blanco. Sin embargo, combinado con el rojo forma un color pardo demasiado denso. El violeta
combina muy bien con el rojo, porque da ms prestancia a la imagen noble y altiva del violeta, pero si se
mezcla con el blanco resulta cursi.
Veamos ciertas relaciones que se deben considerar a la hora de seleccionar la gama de colores de
nuestras pantallas:
- Un objeto pequeo parecer an ms pequeo si se coloca cerca de una superficie grande.
- Un color claro parecer ms claro sobre un fondo oscuro que sobre un fondo claro.
- Un color llama ms la atencin si se encuentra sobre un color mezclado que si est sobre un color vivo.
- Un tono fro parecer ms fro cuanto ms clido sea el color sobre el que aparece.
- Cada color muestra ms claramente sus caractersticas si se coloca cercano a su complementario.
Finalmente, una breve mencin a un aspecto muy interesante de cara a obtener delimitaciones ms finas
en nuestros diseos: la escala de grises. Muchas veces es ms interesante jugar con los diferentes grises
que mezclar otros colores, debido a que el ojo humano percibe con ms dificultad los pequeos detalles
cuando se emplea el color, y sin embargo, la combinacin de varios grises permite la discriminacin de
los elementos de manera ms eficaz y agradable a la vista.
Adems, se le puede aadir azul para suavizar las posibles connotaciones negativas que se comentaban
anteriormente.

En definitiva, cuando estamos hablando se colores es mejor pecar de prudentes antes que arriesgarnos a
que se provoque una dispersin de la atencin por parte del usuario. Pero, con una pequea dedicacin,
un proyecto que utilice una agrupacin bien estudiada de colores va a mejorar claramente el acabado
final, enriquecindolo de una forma muy interesante.

Gua de uso del color en el diseo de GUIs. Recomendaciones.
1.- Usar un mximo de cinco, ms menos dos colores. Cuatro colores distintos son apropiados. Permite
mayor sitio adicional en la memoria a corto plazo (memoria de trabajo). Los ordenadores pueden
proporcionar alrededor de 16 millones de colores, pero los humanos slo pueden discriminar entre 7,5
millones de colores.
2.- Usar colores centrales y perifricos de forma apropiada. Usar el color azul para reas grandes, no para
detalles o texto. El azul es apropiado para fondos de transparencias y pantallas. Usar el rojo y el verde
para captar la atencin es una buena medida, el campo visual se adapta fcilmente a esto.
3.- Usar el mismo color para agrupar elementos relacionados. La ciencia cognitiva ha avanzado en la
nocin de preparar y el proceso preatento. En este contexto, puedes preparar al usuario para eventos
relacionados usando un cdigo de color comn. Un grupo de imgenes sucesivas puede mostrarse para
relacionarse usando el mismo color. Colores similares pueden evocar significados similares. Es preciso
mantener el color de fondo a no ser que exista una poderosa razn, por el mismo motivo.
4.- Usar un cdigo de formas redundante de la misma manera que el color. Hace la pantalla ms
impermeable a distorsiones en el color. Los cambios en la claridad del ambiente pueden provocar
cambios en el color percibido.
5.- Evitar azul para el texto, lneas finas, y formas pequeas. Nuestro sistema visual no est nicamente
diseado para estmulos detallados y precisos en longitudes de onda corta. Sin embargo, el azul es muy
aconsejable para el color de fondo, y se percibe de manera idnea en la periferia del campo visual.
6.- Evitar que los colores adyacentes difieran nicamente en la cantidad de azul. Los lmites que difieran
nicamente en la cantidad de azul se percibirn distintos.
7.- Evitar el rojo y el verde en la periferia de pantallas de gran escala. Debido a la insensibilidad de la
periferia retinal al rojo y al verde, estos colores deben ser evitados en la periferia en su forma saturada.
El amarillo y el azul son buenos colores perifricos.

TIEMPO DE RESPUESTA Y DE RETROALIMENTACIN.
El tiempo de respuesta del sistema es la primera queja sobre muchas aplicaciones interactivas. En
general, se mide desde el punto en que el usuario realiza alguna accin de control. El tiempo de respuesta
del sistema tiene dos caractersticas importantes: duracin y variabilidad.
- Duracin: Si la respuesta del sistema se demora mucho, la frustracin y el estrs del usuario son
inevitables.
- Variabilidad: es la desviacin del tiempo de respuesta promedio. Una baja variabilidad permite que el
usuario establezca un ritmo de interaccin, aunque el tiempo de respuesta sea relativamente largo.
Una vez que se ha creado un prototipo de interfaz de usuario operacional, debe evaluarse y
determinar si satisface las necesidades del usuario.
RETROALIMENTACIN.
- Proceso por el cual parte de la respuesta del receptor es comunicada al emisor.
- Proceso por el cual parte de la respuesta del emisor es comunicada al receptor.
- Proceso donde ni el emisor ni el receptor saben la respuesta.
FORMAS PARA DISEAR LO QUE VERN LOS USUARIOS CUANDO HAGAN CLIC EN EL BOTN
RETROALIMENTACIN.
- Iniciar el programa de correo electrnico con la del contacto de la compaa y almacenar la
retroalimentacin de clientes.
- Disear una pgina Web y Iniciar el programa de correo electrnico con la del contacto de la
compaa
- Almacenar la retroalimentacin de clientes y disear una pgina Web.
TIEMPO DE RESPUESTA Y RETROALIMENTACIN.
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.
Cuando se califica un sistema de interactivo no se puede dejar de lado el estudio de la retroalimentacin
visual (visual feedback en ingls) que corresponde a la forma de comunicacin visual que va del sistema
en direccin al usuario. La retroalimentacin tiene lugar en la interfaz de la aplicacin en forma de
expresiones de salida (e.gr. ventanas, iconos, mapas sensibles, mensajes de error), a fin de informar al
usuario sobre el efecto de sus acciones y sobre el estado actual del sistema. Para tal efecto, la
retroalimentacin debe ser informativa, comprensible y se debe efectuar en un tiempo razonable a la
tarea del usuario.
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. 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. Ahora
bien, del lado de la Ingeniera de Software numerosas tcnicas de programacin visual y herramientas
CASE se han propuesto para desarrollar componente de software para la retroalimentacin visual. Sin
embargo, estos Componentes son fuertemente dependiente de los detalles de programacin (e. gr.
lenguaje de codificacin y de la caja de herramientas a utilizar).

LOCALIZACIN E INTERNACIONALIZACIN.
.1 Internacionalizacin
Consiste en la identificacin de toda la informacin local que aparece en un sitio web, es decir, aquella
informacin que viene dictada por el idioma y la cultura del pas donde se dise originalmente. Por
ejemplo fechas, nmeros, moneda, informacin de contacto, etc. Estos elementos debern aislarse y
guardarse de forma independiente para que sea posible adaptarlos a las especificaciones de cualquier
idioma.
3. Internacionalizacin
Todos los elementos locales del sitio debern ser identificados y aislados. El proceso de
internacionalizacin en muchos casos requiere drsticos cambios en el diseo y la funcionalidad del sitio.
Esto puede ser costoso y llevar mucho tiempo pero una vez el sitio est internacionalizado, podr
localizarse a cualquier otro idioma con gran facilidad. El proceso de internacionalizacin slo debe
llevarse a cabo una vez y a largo plazo supondr un gran ahorro en los planes de expansin al extranjero
de cualquier empresa.
Otras consideraciones a tener en cuenta en este punto son:
- Cules son los idiomas a utilizar y a qu pases queremos llegar. Es ms fcil trabajar con idiomas
europeos occidentales, por ejemplo, que con el ruso que utiliza un alfabeto distinto o el rabe que se
escribe de derecha a izquierda.
- Cmo se llevarn a cabo las actualizaciones de contenido. Un sitio web que no actualiza sus
contenidos nunca tendr xito, los usuarios de Internet buscan informacin rpida y actual. El mejor
modo de controlar las actualizaciones de contenido y la gestin diaria del sitio es mediante la utilizacin
de un sistema de workflow y gestin de contenidos.
Los grficos debern ser analizados y todos aquellos que tengan texto superimpuesto debern, o bien
ser eliminados, o las versiones originales en capas debern almacenarse en un directorio central para
poder traducir la capa de texto.
Todo smbolo, color e imagen deber contrastarse en la cultura trmino. Los iconos debern ser tan
neutros y genricos como sea posible para poder ser reutilizados.
En este punto los archivos de la interfaz de usuario, contenido y cdigo debern separarse en diferentes
archivos de recurso. Se pueden utilizar Server Side Includes (SSIs) para facilitar la tarea de actualizar el
contenido sin afectar el diseo grfico de la pgina.
Una vez se hayan creado los archivos de recurso es fcil calcular la magnitud del proyecto, el nmero de
archivos, nmero de palabras (esencial para estimar los costes y duracin de las traducciones), etc.
La funcionalidad del sitio web (que ser comn en todos los idiomas) y la interfaz de usuario debern
separarse claramente. Es importante diferenciar entre lo que se debe traducir (lo que ve el usuario) y la
funcionalidad del sitio, que normalmente permanece oculta y, por lo tanto, no necesita ser localizada.
Todo contenido localizable se extraer del cdigo fuente y se guardar en archivos de recurso como
dynamic link libraries (DLL) con un solo archivo ejecutable. Este es slo un ejemplo de la forma que este
sistema puede adoptar:
app.exe
Ing_res.dll
Ale_res.dll
Fra_res.dll
Esp_res.dll
etc.
En esta etapa del proyecto es muy importante que los programadores trabajen conjuntamente con los
traductores y que aadan tantas explicaciones como sea posible en el cdigo fuente. Del mismo modo,
los programadores no debern nunca hacer suposiciones sobre cmo funcionan las reglas gramaticales
de un idioma o sobre cmo interpreta un idioma la informacin.
La estructura del sitio deber planificarse antes de comenzar el proceso de localizacin. Uno de los
mayores problemas es decidir cmo se van a combinar las diferentes versiones. El mtodo ms comn
consiste en guardar cada idioma en el mismo servidor puesto que as se pueden sincronizar las
actualizaciones en todos los idiomas a la vez. Normalmente este tipo de sitio tendr un enlace a cada uno
de los idiomas en su pgina inicial con lo que slo se necesita una URL que se puede utilizar de forma
global.
Otra posibilidad es guardar cada sitio localizado en su propio pas trmino. Este proceso hace ms lento
el mantenimiento pero disminuye los tiempos de descarga. Una tercera opcin consiste en crear sitios
diferentes para diferentes pases. Esto ocurre cuando los nombres de domino son totalmente diferentes
si se traducen, el contenido es totalmente dependiente de una cultura determinada o cuando se utilizan
diferentes diseos.
El objetivo final es crear un sitio con una infraestructura global que ser gestionada centralmente por un
nico equipo tcnico con mdulos localizables que debern ser traducidos y adaptados a los diferentes
idiomas.

1.2. LOCALIZACIN
Es el proceso de adaptar un sitio web a un idioma y una cultura diferente. Esto significa mucho ms que
simplemente traducir el contenido de las pginas. El contenido de una pgina web est formado por
texto e imgenes, ambos deben ser traducidos y sometidos a una adaptacin cultural. El usuario nunca
debe notar que ese sitio fue originalmente creado en otro idioma.
Localizacin
El primer paso en el proceso de localizacin es la identificacin de los diferentes elementos que deben
ser localizados:
- La interfaz de usuario
- La funcionalidad tcnica
- El contenido
Estas tres reas estn ntimamente relacionadas y es esencial prestar detenida atencin a cada una de
ellas si se quiere conseguir una completa y satisfactoria localizacin. De nada sirve un sitio web donde el
texto est perfectamente traducido si la funcionalidad del sitio est comprometida.
MODALIDADES DE DISEO EN HCI. LOCALIZACIN E INTERNACIONALIZACIN.
Se entiende por localizacin la adaptacin de un producto, una aplicacin o el contenido de un
documento con el fin de adecuarlos a las necesidades (lingsticas, culturales u otras) de un mercado
destinatario concreto (una "localidad" o "local" [locale]).
La palabra localizacin a veces se escribe "l10n", donde 10 es la cantidad de letras entre la ele y la ene.
Aunque se la considera a menudo sinnimo de traduccin de la interfaz de usuario y de la
documentacin, la localizacin suele ser un asunto considerablemente ms complejo, que puede implicar
la adaptacin del contenido en relacin con:
1. formatos numricos, de fecha y de hora;
2. uso de smbolos de moneda;
3. uso del teclado;
4. algoritmos de comparacin y ordenamiento;
5. smbolos, iconos y colores;
6. texto y grficos que contengan referencias a objetos, acciones o ideas que, en una cultura dada,
puedan ser objeto de mala interpretacin o considerados ofensivos;
7. diferentes exigencias legales;
8. y muchas otras cuestiones.

La localizacin puede requerir incluso una reelaboracin exhaustiva de la lgica, el diseo visual o la
presentacin, si la forma de hacer negocios (por ejemplo, las normas contables) o el paradigma aceptado
de aprendizaje (por ejemplo, nfasis en el individuo o en el grupo) en la localidad de destino difieren
mucho en relacin con la cultura originaria.
INTERNACIONALIZACIN.
Existen diferentes definiciones para la palabra internacionalizacin. La que damos aqu es una definicin
operativa de alto nivel para usar con los materiales de la Actividad de internacionalizacin del W3C.
Algunas personas utilizan otros trminos para referirse al mismo concepto, por ejemplo, "globalizacin".
La internacionalizacin es el diseo y desarrollo de un producto, una aplicacin o el contenido de un
documento de modo tal que permita una fcil localizacin con destino a audiencias de diferentes
culturas, regiones o idiomas.
La palabra internacionalizacin a veces se escribe "i18n", donde 18 es la cantidad de letras entre la i y la
ene.
La internacionalizacin generalmente implica:
Un modo de diseo y desarrollo que elimine obstculos a la localizacin o la distribucin internacional.
Esto incluye cuestiones tales como (entre otras) usar Unicode o asegurar, all donde corresponda, un
correcto tratamiento de las codificaciones de caracteres anticuadas; controlar la concatenacin de
cadenas; o evitar que la programacin dependa de valores de cadenas pertenecientes a la interfaz de
usuario.
Habilitar caractersticas que tal vez no sean usadas hasta el momento de la localizacin. Por ejemplo,
aadir en la DTD etiquetas para habilitar el texto bidireccional o la identificacin de idiomas. O hacer la
CSS compatible con texto vertical u otras caractersticas tipogrficas ajenas al alfabeto latino.
Preparar el cdigo para hacer frente a las preferencias locales, regionales, lingsticas o culturales. Por lo
general, esto supone incorporar caractersticas y datos de localizacin predefinidos a partir de
bibliotecas existentes o de las preferencias del usuario. Algunos ejemplos son: formatos de fecha y hora,
calendarios locales, formatos y sistemas de nmeros, ordenamiento y presentacin de listas, uso de
nombres personales y formas de tratamiento, etc.
Separar del cdigo o contenido fuente los elementos localizables, de modo que puedan cargarse o
seleccionarse alternativas localizadas segn determinen las preferencias internacionales del usuario.
Obsrvese que esta lista no incluye necesariamente la localizacin del contenido, la aplicacin o el
producto hacia otro idioma; se trata ms bien de prcticas de diseo y desarrollo que facilitan esa
migracin en el futuro, pero que tambin pueden tener una utilidad considerable aunque la localizacin
jams se produzca.

MODELOS METAFRICOS Y CONCEPTUALES
MTODOS MULTIMEDIA, WEB, MODELOS METAFRICOS Y CONCEPTUALES.
Simplemente porque hoy da podemos digitalizar horas de video analgico y reproducirlo en tiempo real
(streaming) en un sitio web, no significa que nos veamos obligados a hacerlo. Lo mismo cabe decir que
por poseer libros electrnicos (e-books) y dems documentos digitalizados no necesariamente
sentiremos placer por leerlos en nuestro monitor, dado que para ciertas formas de comunicacin existen
soportes culturales muy fuertemente instaurados. Digitalizamos texto con el fin de emplear nuestras
capacidades informticas, como lo son las bsquedas de informacin y los enlaces, para ampliar nuestro
aprehendimiento del material de conocimiento. Esto se hace cierto para el soporte multimedia tambin,
dado que se requiere considerar que tan bien ha de utilizarse un ordenador y no sencillamente hacer uso
de tecnologas de digitalizacin para convertir material analgico en contenido para un monitor. Toda la
tecnologa disponible en internet ha requerido forzosamente un redimensionamiento y una compresin,
resultando de esto que mucho contenido creado originalmente para transmisiones analgicas no
funcionar muy bien en la web. La estrategia para un contenido multimedia de calidad es entonces una
manufactura (casi una artesana) creada desde el origen para ser servida en la web.
Los diseadores web debemos considerar siempre la expectativa del consumidor. Un usuario satisfecho
regresa a un sitio web casi diramos que siempre, pero aquel a quin han hecho esperar o recibe de un
sitio contenidos o productos irrelevantes, probablemente dedicar su tiempo en otro sitio. Dado que el
contenido multimedial llega con un precio alto, debe ser administrado con juicio y mensura. Lo ms
comn es que se desperdicie con elementos en movimiento a lo largo de un sitio con el nico propsito
de "entretener" al usuario y mantener su atencin. Este mtodo se basa en la presuncin de que los
usuarios que navegan por internet poseen un tiempo de atencin muy corto, lo que en muchos casos
puede demostrarse cierto, y sin embargo no justifica la creacin de "dulces de colores" a lo largo de una
presentacin de contenidos en internet.



Uso de metforas en diseo de interfaz.
Aplicar metforas en el diseo de interfaz de un producto ayuda al usuario a establecer unas expectativas
acerca de su utilidad y funcionamiento. Un ejemplo: el escritorio.
Metforas.
El uso de metforas adecuadas en el diseo de un interfaz, facilita y acelera el aprendizaje del
funcionamiento de un producto.
Similitudes con otros mecanismos y procesos conocidos por el usuario que aplica lo que ya conoce a los
elementos y relaciones dentro de un dominio no familiar como puede ser una aplicacin web o
multimedia. El ejemplo ms tradicional: el escritorio con sus iconos representando carpetas y
documentos. Las metforas ayudan al usuario a entender ms rpidamente cmo moverse por un
producto interactivo.
Caractersticas de una buena metfora.
Si el objetivo de un producto es ser usado de forma eficiente, algunas de las caractersticas que deben
tenerse en cuenta son:
Debe ser consistente aplicndose de forma coherente y slida a lo largo de todo el sistema.
Autoexplicativa: Debe facilitar al usuario conocer las acciones posibles en cada momento.
Debe hacer visibles partes y procesos invisibles al usuario, incluyendo el modelo conceptual del sistema
las acciones alternativas y el resultado de las acciones.
Debe informar con claridad al usuario acerca del estado actual del sistema y de las consecuencias de sus
acciones.
No desbordar al usuario con informacin superflua o innecesaria.
Tipos de metforas.
Metforas organizacionales
Se fundamentan en la estructura existente de un grupo, sistema u organizacin.
Por ejemplo: un sitio web de un supermercado puede estar agrupado por departamentos o secciones
como los supermercados fsicos. Panadera, carnicera, higiene, limpieza de esta manera, el usuario
aplica su conocimiento de la vida real al sitio web y puede comenzar a moverse.
Es importante que el usuario encuentre sentido y utilidad a la metfora: si es un sitio de compras, no es
conveniente organizarlo como reflejo de la estructura corporativa de la empresa, que es algo que el
usuario no entiende y que adems le resultar intil en su tarea de comprar.


Metforas funcionales.
Se apoyan en tareas o funciones que el usuario puede realizar en su vida cotidiana. Ejemplo: Adobe
Photoshop o MS Word y en general todos los programas que funcionan bajo sistemas de ventanas tienen
las funciones Copiar, Cortar y Pegar, que permiten que el usuario entienda cmo puede reutilizar parte
de su trabajo en la misma o diferentes aplicaciones.
Metforas visuales.
Se basan en elementos grficos familiares para la mayora de la gente. Por ejemplo: un sitio de msica en
la que los usuarios puedan escuchar canciones, se les puede proveer de tres iconos Play Pause y
Stop, que ya le son familiares en todos los aparatos de CD, DVD, etc
Usar metforas no es disear con estilo.
Es necesario ayudar al usuario a entender lo que le ofrece el sistema evitando la mezcla o el uso de
metforas inadecuadas. Muchos diseadores confunden el hecho de aplicar metforas en su trabajo con
un diseo moderno o rompedor. Es mejor prescindir de metforas cuando pueden desorientar al usuario
a no ser que esta desorientacin sea uno de los objetivos del sistema como en entornos virtuales, de
juego y/o aprendizaje en los que la exploracin tiene gran protagonismo.
El modelo conceptual de un sistema software constituye una abstraccin externa que describe mediante
diagramas y notaciones con distinto grado de formalidad el conocimiento que debe poseer una persona
acerca de un sistema, conocimiento que se encuentra almacenado en la Memoria a Largo Plazo.
Los diseos conceptuales se dividen en:
Modelo mental del usuario.
Modelo mental del diseador.
Imagen final del sistema.
Modelo Mental.
Aquellas ideas, que al estar establecidas en el cerebro, determinan las creencias del ser humano y
influyen en sus acciones. Un buen diseo es aquel que interpreta fielmente los modelos mentales del
usuario. Se forman a travs de la experiencia, la formacin y la instruccin.

PSICOLOGA DE LA INTERFAZ DE USUARIO
PSICOLOGA DEL HCI.
Al igual que en la actividad empresarial se comenz con una orientacin claramente productiva, y a lo
largo del siglo pasado y lo que llevamos de este ha ido variando esta orientacin hasta centrar al cliente
como objetivo primero y ltimo de la misma, el diseo de programas informticos ha ido evolucionando
desde su concepcin inicial a la resolucin de problemas, pocas veces teniendo en cuenta el problema
mismo de usar dichos programas, hacia la mejora de la experiencia del usuario, mediante aplicacin de
pautas en el diseo de interfaces.
Pero al igual una vez ms que en el entorno empresarial, esto no siempre es as, y no lo es principalmente
por falta de enfoque de las personas que componen el equipo. As pues, el informtico suele focalizar sus
objetivos en el diseo robusto, eficiente, eficaz... incluso maquiavlico de sus programas, es decir, suele
centrarse principalmente en la tcnica, y no en el usuario al que va dirigido. Por otro lado la formacin de
los diseadores incide en aspectos tcnicos como la teora de color, la fotografa digital, la combinacin
de estilos, las pautas y estndares, o en aspectos subjetivos como los modelos de comunicacin grfica,
siempre con el objetivo de agradar e incluso comunicar algo al usuario, pero pocas veces pensando en
que l va a ser el partcipe de esto.
En resumen, el informtico busca que su programa tenga una gran funcionalidad con una gran tcnica y
el diseador que sea bonito y llamativo por dems. Y no siempre se combinan ambos objetivos para darle
al usuario lo que realmente quiere o necesita. Y esto incluso en grandes proyectos con gran xito, como
por ejemplo Facebook.
Pero tambin es cierto que cada da ms se profesionaliza el diseo de interfaces a partir de
investigaciones en campos tan variados pero relacionados como la psicologa cognitiva, la psicologa de
la comunicacin, la lingstica, la teora de la informacin, la accesibilidad y la usabilidad, la inteligencia
artificial, la minera de uso o los interfaces adaptativos, de las que actualmente se desprenden ocho
reglas de oro genricas en el diseo de interfaces.
Consistencia: Uno de los aspectos ms importantes a tener en cuenta en el diseo de interfaces es el
conseguir su consistencia a lo largo del mismo, pero tambin es una de las reglas que ms veces se
rompe. Consistencia significa una composicin de color, estilos y fuentes homognea a lo largo de la
interfaz, pero tambin un uso del lenguaje y la terminologa, unos mtodos de ayuda, una forma de
recuperacin de errores e incluso una forma de reaccionar ante acciones del programa de manera
consistente a lo largo del mismo.
Usabilidad universal: En este blog ya tratamos este aspecto cuando hablbamos del Center of Universal
Design o del proyecto Build for All. En cualquier caso la usabilidad universal hace referencia tanto a los
diferentes aspectos socio-culturales en el caso de aplicaciones globales, como puedan ser las aplicaciones
Web, como a aspectos psicolgicos y de aprendizaje, tales como los rangos de edad, las discapacidades o
la diferenciacin en general entre el principiante y el experto en el uso de aplicaciones de escritorio.
Realimentacin informativa: En todo momento el usuario debe conocer el estado del sistema y de sus
acciones, para lo cual es preciso que el mismo interfaz ofrezca una realimentacin rica pero sin
sobrecargar de informacin al usuario, aprovechando los principios del diseo universal para mostrar en
mayor o menor medida la realimentacin en funcin de las capacidades del usuario.
Conducir las tareas: El interfaz es un medio de comunicacin entre el usuario que desea efectuar alguna
tarea con el sistema y el sistema que las efecta. El sistema estar organizado para realizar las tareas de
un modo u otro, y la interfaz debe facilitar el camino al usuario desde el comienzo de la misma hasta su
finalizacin, guiando el proceso en todo momento, aprovechando para realimentar de manera eficiente y
para aplicar principios de diseo universal que permitan la construccin de atajos o liberen de sobrecarga
de confirmaciones al usuario avanzado, por supuesto siempre manteniendo la consistencia en los modos
de uso.
Prevenir errores: Tal y como inscribi Sigmound Freud en su retrato, "No hay medicina contra la muerte y
contra el error no se ha hallado ninguna regla", puesto que un error puede aparecer en cualquier
momento, se debe evitar al mximo desde el diseo de la interfaz que el usuario pueda cometer errores
en la introduccin de datos, en las etapas de resolucin de las tareas y en general en todo aquello que
pueda comprometer la consistencia del sistema. En caso de producirse errores se debe permitir una
recuperacin del sistema, bien automticamente, bien informando de manera correcta al usuario,
indicndole el error producido, los motivos y los medios para resolverlo, y por supuesto, siendo
consistente a lo largo de toda la aplicacin en esta tarea.
Deshacer acciones: No hay nada que de mayor control que la seguridad, y la seguridad se da sobre todo
cuando no se tiene miedo al error. Una manera de no tener miedo al error es permitir echar atrs de
manera sencilla acciones que han dado lugar a un error. Si se produce una situacin no deseada y el
usuario tiene la capacidad de manera sencilla de echar atrs dicha situacin, le dar mayor seguridad
sobre la realizacin de la tarea y por tanto aumentar su aprendizaje y mejorar su experiencia de uso.
Esto es posible en ciertas aplicaciones, por ejemplo, una entrada errnea en un procesador de textos es
fcilmente restaurable, en cambio una entrada incorrecta en un proceso de carga de asientos contables
no lo es tanto. Se deber llegar a un compromiso, pero en cualquier caso siempre la posibilidad de
restaurar estados seguros del sistema son positivos tanto para el sistema como para el usuario del
mismo.
"Dar soporte al locus de control interno": Significa hacer a los usuarios "iniciadores de acciones", que
obtengan el control del sistema, que sean ellos los que dominen y manden las acciones y el sistema
responda a ellos, todo ello a partir de la interfaz de usuario. Para ello se deben eliminar las secuencias de
entrada de datos tediosas, la dificultad para obtener la informacin necesaria por requerir excesiva
informacin o excesivos pasos, la dificultad para realizar determinadas acciones... El ejemplo ms sencillo
suelen ser los interfaces de los bancos, dnde cada accin requiere un dato de entrada normalmente
vinculado a una accin anterior pero sin continuidad entre ellas.
Reducir la necesidad de memoria a corto plazo: Numerosos estudios indican que el ser humano suele
recordar entre 5 y 9 elementos de informacin a corto plazo, la denominada regla del "siete ms/menos
dos", lo que implica que las interfaces de usuario deberan liberar al usuario de la necesidad de aprender
excesivos datos a corto plazo para su uso inmediato, lo que se mejora siguiendo la consistencia del
sistema, diseando el mismo con una orientacin clara hacia la consecucin de las tareas, dnde se gua
al usuario desde su inicio hasta su finalizacin, y atendiendo en general a los principios de diseo
universal.



PATRONES DE DISEO DE INTERFAZ.
Un patrn es una solucin probada que se puede aplicar con xito a un determinado tipo de problemas
que aparece con frecuencia. Se intenta reutilizar diseos que hayan demostrado su eficacia en previas
aplicaciones. Esqueleto de aplicacin bsica que el diseador ha de adaptar a sus necesidades.
Igual que los patrones de diseo en programacin nos permiten estudiar diferentes tcnicas de
programacin y diseo, estructurarlas, ponerles un nombre para que los programadores nos
entendamos, etc, lo mismo puede hacerse para casi cualquier disciplina (de hecho, el origen de los
patrones de diseo est en la arquitectura).
En este caso concreto, una buena aplicacin del concepto son los patrones de interface de usuario o de
interaccin. Cundo es mejor utilizar tags? Cul es la forma ms amigable de presentar una paginacin?
En qu casos puede ser interesante proporcionar un Wizard?

ESTNDARES DE INTERFAZ
Estndares.
El objetivo de los estndares es hacer las cosas ms fciles, definiendo caractersticas de objetos y
sistemas que se utilizan cotidianamente. El diseo de un teclado de telfono es un estndar que se utiliza
continuamente.
Hardware: Suelen reflejar la importancia de la ergonoma en las interfaces de usuario
Software: Suelen aplicarse a las caractersticas bsicas de la interfaz usuario. Pretenden eliminar
variaciones innecesarias e inconsistencias en la interfaz.
Iure: Son generados por un comit con estatus legal y estn avalados por el apoyo de un gobierno o
institucin para producir estndares. Su elaboracin requiere de un proceso complejo.
Facto: Nacen a partir de productos de la industria que tienen un gran xito en el mercado, o bien a partir
de desarrollos hechos por grupos de investigacin de universidades y que tienen gran difusin.
Un estndar es un requisito, regla o recomendacin basada en principios probados y en la prctica.
Representa un acuerdo de un grupo de profesionales oficialmente autorizados a nivel
Local (aceptado desde una industria, organizacin profesional o entidad empresarial)
Nacional (aceptado por una amplia variedad de organizaciones dentro de una nacin)
Internacional (consenso entre organizaciones de estndares a nivel mundial)Cuando se asegura la
consistencia a travs de las diferentes partes de un sistema o a travs de una familia de sistemas, es
fundamental para los desarrolladores basar sus diseos en un conjunto de principios y directrices, a esto
se le denominan guas de estilo.
El seguimiento de un estndar o de una gua de estilo no garantiza la usabilidad de un producto, es decir,
son elementos muy tiles para el diseo y la evaluacin en IPO, pero deben ser empleados
adecuadamente.
ISO (International Organization for Standardization , Organizacin Internacional para Estndares) Es la
que tiene ms estndares publicados relacionados con la interfaz de usuario.
Uno de los estndares ms conocidos relacionado con interfaces de usuario es el Estndar ISO 9241
titulado Requerimientos ergonmicos para trabajo de oficina con terminales de presentacin visual .
Este estndar tiene como objetivo promover la seguridad y garantizar la salud de los usuarios que
trabajan con monitores de ordenadores. Incluye tanto requisitos que ha de cumplir el software como
requisitos que ha de cumplir el hardware para conseguirlo. Otro estndar, el ISO 9995, indica por ejemplo
las caractersticas de un teclado: distribucin y etiquetas de las teclas, teclas de edicin, etc.
ANSI (American National Standards Institute, Instituto Nacional Americano para Estndares) creado en
1918. Instituto de carcter privado, sin nimo de lucro, dedicado a la representacin de los intereses de
casi 1000 compaas, organizaciones y agencias del gobierno. Su principal misin es ampliar la
competitividad de las empresas de los EEUU a travs de la generacin de estndares.
IEEE (Institute of Electrical and Electronics Engineers,Instituto de Ingenieros Elctricos y Electrnicos
Americano. Asociacin para Estndares) Su principal misin es desarrollar y publicar estndares
generalmente aceptados, que promovern la teora y prctica de la ingeniera elctrica, electrnica e
informtica, as como el resto de ramas de la ingeniera y artes o ciencias relacionadas.
CEN (Comit Europen de Normalisation ,Comit Europeo para la Estandarizacin) Es el principal
proveedor de estndares europeos y especificaciones tcnicas.
W3C (Consorcio para el World Wide Web) creado en 1994 por Tim Berners-Lee en el MIT, con la
colaboracin del Instituto Nacional de Investigacin en Informtica y Automtica (INRIA) y la Universidad
de Keio (Japn). Su objetivo es llevar el World Wide Web a su pleno potencial, desarrollando protocolos
comunes que promueven su evolucin y aseguran su interoperabilidad. Est constituido por ms de 500
organizaciones en todo el mundo. Proporciona recomendaciones creadas por grupos de trabajo en
reas relacionadas con las interfaces de usuario: accesibilidad, Internacionalizacin. Disponibilidad
totalmente gratuita http://www.w3c.org
LA NORMA ISO 9241 es la norma enfocada a la calidad en usabilidad y ergonoma tanto de hardware
como de software, fue creada por la ISO y la IEC. Fue creada en 1999 por estas dos organizaciones con el
fin de regular la calidad de la ergonoma y la usabilidad tanto de hardware como de software. Con el paso
del tiempo se ha ido modificando y mejorando, hasta llegar a la versin actual (ISO/IEC 9241-9: 2001).
ANSI (American National Standards Institute, Instituto Nacional Americano para Estndares) es una
organizacin sin nimo de lucro que supervisa el desarrollo de estndares para productos, servicios,
procesos y sistemas en los Estados Unidos. ANSI es miembro de la Organizacin Internacional para la
Estandarizacin (ISO) y de la Comisin Electrotcnica Internacional (International Electrotechnical
Commission, IEC). La organizacin tambin coordina estndares del pas estadounidense con estndares
internacionales, de tal modo que los productos de dicho pas puedan usarse en todo el mundo. Por
ejemplo, los estndares aseguran que la fabricacin de objetos cotidianos, como pueden ser las cmaras
fotogrficas, se realice de tal forma que dichos objetos puedan usar complementos fabricados en
cualquier parte del mundo por empresas ajenas al fabricante original. De ste modo, y siguiendo con el
ejemplo de la cmara fotogrfica, la gente puede comprar carretes para la misma independientemente
del pis donde se encuentre y el proveedor del mismo.
Por otro lado, el sistema de exposicin fotogrfico ASA se convirti en la base para el sistema ISO de
velocidad de pelcula (en ingls: film speed), el cual es ampliamente utilizado actualmente en todo el
mundo.
Esta organizacin aprueba estndares que se obtienen como fruto del desarrollo de tentativas de
estndares por parte de otras organizaciones, agencias gubernamentales, compaas y otras entidades.
Estos estndares aseguran que las caractersticas y las prestaciones de los productos son consistentes, es
decir, que la gente use dichos productos en los mismos trminos y que esta categora de productos se
vea afectada por las mismas pruebas de validez y calidad.
ANSI acredita a organizaciones que realizan certificaciones de productos o de personal de acuerdo con
los requisitos definidos en los estndares internacionales. Los programas de acreditacin ANSI se rigen
de acuerdo a directrices internacionales en cuanto a la verificacin gubernamental y a la revisin de las
validaciones.
En Microsoft Windows, la palabra ANSI hace referencia a las pginas de cdigo ANSI de Windows. La
mayora de estos cdigos tienen la misin de arreglar la anchura aunque existen algunas anchuras
variables para lenguajes ideogrficos. Algunos de estos cdigos se acercan bastante a las series
ISO_8859-1 provocando que muchos asuman de una forma equivocada que son idnticos.

El Arte ASCII, el cual es coloreado o animado a partir de unos cdigos de control denominados secuencias
X3.64 que se reciben en un terminal ANSI, est relacionado comnmente con el arte ANSI. Este fue muy
popular en los foros a lo largo de los 1980s y los 1990s.
.