Diseño de Interfaz de usuario

Una interfaz debe ser usable y accesible. Para ello debe ser creada por y para los usuarios. Debemos aprender a diseñar interfaces pensando en los usuarios. La disciplina que se encarga de esto es la Interacción 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 diseño universal o diseño para todos.

Existen varias normas o estándares acerca de la accesibilidad: a nivel nacional encontramos las normas UNE 139801-EX y UNE 139802-EX (que recogen más de cien requisitos de accesibilidad), y a nivel internacional podemos guiarnos por las pautas diseñadas por la "Iniciativa de Accesibilidad a la Web" (WAI) del World Wide Web Consortium (W3C), que contienen catorce pautas de diseño. 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 páginas web:

Nivel A: debe de satisfacer este punto de verificación.

Nivel AA: debería satisfacer este punto de verificación.

Nivel AAA: puede satisfacer este punto de verificación.

Entre las pautas están:

Proporcionar alternativas equivalentes de contenido visual y auditivo.

Asegurar que los textos y gráficos 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 páginas que incorporan nuevas tecnologías 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 diseño accesible: funcionalidad de acceso independiente del dispositivo, teclado operable, voz automática, etc.

Diseñar con independencia del dispositivo.

Utilizar soluciones de accesibilidad provisionales de forma que las ayudas técnicas y los antiguos navegadores operen correctamente.

Utilizar tecnologías W3C (de acuerdo con las especificaciones) y seguir las pautas de accesibilidad.

Proporcionar información de contexto y orientación para ayudar a los usuarios a entender páginas o elementos complejos.

Implementar mecanismos de navegación claros y consistentes (información orientativa, barras de navegación, 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 más fácilmente 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 diseño de interfaz.

El diseño del interfaz es uno de los elementos "clave" en la realización 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 además de entender el mensaje, ha de comprender la mecánica y la operativa que le oferta el interfaz. (sintáxis, órdenes, códigos, 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 atención 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 (animación) que se centrará en el contenido. Las ayudas al interfaz, se basarán sobre todo en la operativa y la aclaración de funciones de los elementos visuales o acústicos.

De hecho el interfaz es en realidad un modelo mental permanente, es decir una representación cognitiva o conceptualitzación 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 imágen parcial o total, etc...Una incoherencia de diseño puede aportar pérdidas de eficacia del propio contenido que se quiera dar.

Las características básicas que queremos conseguir con este interfaz, se podrían sintetizar en:

- Facilidad de aprendizaje y uso.

- Representación permanente de un contexto de acción (fondo).

- El objeto de interés ha de ser de fácil identificación.

- Diseño ergonómico (barra de acciones o iconos, preferentemente a la derecha)

- Las interacciones se basarán en acciones físicas sobre elementos de código visual o auditivo (iconos, imágenes, mensajes...) antes que en selecciones de tipo menú con sintáxis y órdenes.

- Las operaciones serán rápidas, 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 organización, combinando Información, elementos de interacción y la información interactiva.

El tratamiento del color es otro aspecto importante. Si bien el diseño de trabajo sobre la maqueta se realizará en "true color" (16 millones de colores), la concrección final se hará para un equipo estandard de 256 colores. Otras alternativas supondrían cargar excesivamente la ocupación de espacio en el CD-Rom, teniendo en cuenta, además la extensión que tienen los videos de los casos prácticos, las animaciones y también 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 gráficos y de las imágenes. El tratamiento del color ha de contar (además del diseño de las formas) con toda una serie de normas y parámetros con coherencia interna, como la luminosidad, saturación, tono, etc..

La tipografía es otro factor importante del interfaz. Se procurará la combinación de textos en letras mayúsculas y minúsculas. Procurando no mezclar en pantalla más de dos tipos y tres medidas diferentes de letra.

La integración de recursos multimedia es muy importante en este proyecto. El peso del programa recae sobre el personaje animador, con la intención de que el usuario se identifique con él. Este personaje, además, puede hablar y transmitir mensajes de acción, ayuda y/o refuerzo. También consideramos necesario el tratamiento del audio con efectos especiales y músicas escogidas para las diferentes partes del programa.

Pasos para el diseño de interfaz

Pasos Clásicos

En el proceso de diseño de una interfaz de usuario se pueden distinguir cuatro fases o pasos fundamentales:

Reunir y analizar la información del usuario

Diseñar la interfaz de usuario

Construir la interfaz de usuario

Validar la interfaz de usuario

Reunir y analizar la información del usuario: Es decir concretar a través de técnicas de requerimentación, qué tipo de usuarios van a utilizar el programa, qué tareas van a realizar los usuarios y cómo las van a realizar, qué exigen los usuarios del programa, en qué entorno se desenvuelven los usuarios (físico, social, cultural).

Diseñar la interfaz de usuario: Es importante dedicar tiempo y recursos a esta fase, antes de entrar en la codificación. 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 menús 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 versión del programa que se realice rápidamente 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 diseño que parta del usuario, y no del sistema.

Existen 11 pasos en el proceso de diseño "centrado en las tareas", similar al anterior pero que desglosa algunas actividades implícitas en otras, así:

1.- Entender quien usará el sistema para hacer qué.

2.- Elegir tareas representativas para el diseño.

3.- Plagiar o copiar.

4.- Bosquejar un diseño.

5.- Pensar acerca del diseño.

6.- Crear un prototipo.

7.- Evaluarla con los usuarios.

8.- Repetir.

9.- Construirla.

10.- Rastrearla.

11.- Cambiarla.

Técnicas y pasos avanzadas para el diseño de interfaces de usuario

Presentación de información: 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 sólo por sí mismo, sino también por su combinación con el resto de elementos presentes en la pantalla.

El número de elementos visuales que perciben son: en el caso a) 1 (el fondo); en b) 3 (la línea, lo que está encima y lo que está debajo); en c) son 5 (el espacio fuera del recuadro, el recuadro, la línea y el espacio encima y debajo de ésta); finalmente, en d) el número se eleva a 35, siguiendo el mismo criterio. Conclusión: cada elemento nuevo que se añade influye más de lo que se piensa en el usuario.

Elementos de diseño de pantalla y su percepción visual

Análisis de Color: es probablemente el elemento de la interfaz que con más frecuencia es mal utilizado. El color comunica información, no es sólo decorativo (ejemplo: reforzar mensajes de error). Deben utilizarse combinaciones adecuadas (por ejemplo, las paletas proporcionadas por los sistemas operativos). El color debe atraer la atención, pero no cansar después de un rato de trabajo. Es especialmente importante seguir las líneas de diseño

existentes. Principio básico: diseñar primero en blanco y negro, y luego añadir el color.

Análisis Audio. Primero es preciso ver cuándo es más apropiado que la información visual. Segundo, determinar el sonido adecuado. Tercero, permitir la personalización (volumen y desactivación). Como en el caso de los colores existen guías de uso. En lugares de trabajo abiertos, puede ser poco efectivo; además, puede ser embarazoso para algunas personas. El sonido debe usarse para informar, no cuando no añade nada nuevo (por ejemplo, un mensaje de aviso de correo o de bienvenida, respectivamente, al iniciar una sesión de trabajo).

Análisis Animación. Se define como un cambio en el tiempo de la apariencia visual de un elemento gráfico. Ejemplos de su uso: progreso de acciones (copia de ficheros en Windows 95, instalación de programas), estado de procesos (iconos de impresora), acciones posibles (cambios en el cursor al desplazar el ratón). La animación puede ayudar a subrayar iconos importantes, mostrar el estado de un objeto particular o explicar su comportamiento.

Diseño internacional. Debe hacerse un uso adecuado de la terminología. Hay mucho trabajo en este campo. Debe tenerse cuidado con las diferencias culturales (gestos, terminología, dibujos, formatos de teléfonos o calendarios, etc.).

Análisis y Elección 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 indicación visual de que se pueda arrastrar el objeto: ¿qué objetos se pueden arrastrar? ¿a dónde se pueden arrastrar? ¿qué ocurrirá cuando lleguen allí? ¿se podrá deshacer la acción?).

Diferentes controles para los mismos datos

Guías de Expertos Existen diversas guías de diseño sacadas de expertos y comités, que complementan a las reglas de oro estudiadas anteriormente. Por citar algunas de ellas:

Demasiada simetría puede hacer las pantallas difíciles de leer.

Si se ponen objetos sin alinear, hacerlo drásticamente.

Asimetría=activo, simetría=sereno.

Elementos de tamaño y color similares se perciben como pertenecientes a un grupo.

Asumir errores en la entrada del usuario.

Diseñar para el usuario, no para demostrar los propios conocimientos tecnológicos.

Unos gráficos espectaculares no salvarán a una mala interfaz.

Modos de Uso y Navegación

MODOS DE USO, NAVEGACIÓN, TÉCNICAS DE CODIFICACIÓN Y DISEÑO VISUAL (COLOR, ICONOS, FONDO DE LETRAS).

La primera impresión del usuario cuando visita una aplicación web la brinda el diseño 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 tipografía, colores, gráficos, navegación, composición del sitio, etc., que a continuación se detallan. En el sistema, el diseño de la interfaz está basado en páginas Web, se utilizan las tonalidades suaves y refrescantes. El vocabulario manejado es lo menos técnico posible, acercándose al utilizado por los usuarios. Se utilizan imágenes identificativas como vínculos para la navegación dentro del sitio web. La letra utilizada en todo el sistema es Times New Roman (12, 16) lográndose un diseño estándar en todo el sitio. Los mensajes de error son pequeños y en Español. Se utilizan pequeños íconos para una mayor comprensión de las acciones, aunque se seleccionaron imágenes consecuentes con el significado que se quiere trasmitir. El fondo de las páginas 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 través del sistema y facilitarle la interacción con el mismo. El sistema se manejará por medio de interfaces así la información necesaria podrá ser procesada de manera eficiente y en corto tiempo el sistema tendrá la respuesta a los requerimientos del usuario, manejando además los errores en los que este pueda incurrir. Los estándares definidos en este documento para la interfaz gráfica de usuario, serán tomados como base para el diseño de los módulos de manera que se cada modulo podrá realizar sus diseños de acuerdo a la necesidad, pero tomando como base los estándares de este documento. Para mayor entendimiento se ha definido en este documento primero estándares de los objetos básicos y luego los compuestos solo con la finalidad de mejorar el entendimiento de este documento.

DISEÑO VISUAL.

El uso de tipografía, símbolos, color y otros gráficos estáticos y dinámicos son comúnmente usados para expresar hechos, conceptos y emociones. Esto compone un diseño gráfico sistemático orientado a la información que ayuda a la gente a comprender información compleja. La comunicación visual efectiva para este sistema se basa en algunos principios básicos de diseño gráfico. Existen tres factores que pueden considerarse para el diseño de una interfaz de usuario correcta: factores de desarrollo, factores de viabilidad y factores de aceptación. Los factores de desarrollo ayudan a mejorar la comunicación visual. Esto incluye toolkits y librerías de componentes, soportes para un rápido prototipado, y adaptabilidad.

COLOR.

Las discusiones sobre el color suelen ser confusas porque científicos, artistas, diseñadores, 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 periféricos con tubos de rayos catódicos (CRTs).

Los siguientes términos aclaran conceptos sobre esta manera de entender el color:

• Matiz (Hue) es la composición 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 (también llamado intensidad).

• Saturación (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 energía luminosa al crear el color.

La importancia del color es comunicar. Los códigos de colores deben respetar el uso profesional y cultural ya existente de determinados colores. Las connotaciones varían 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 pequeños gráficos hiperenlace que:

• De forma aislada

• Acompañados de un hipertexto

• Acompañados de una etiqueta

• Acompañados de un "tooltip"

Utilizar ideografías estándar para representar las acciones de navegación. Para acciones de navegación específicas de nuestro sitio: es preferible no utilizar iconos, o, de usarlos, acompañarlos de una etiqueta. En la mayoría de casos aumenta la usabilidad un simple hipertexto, o un botón generado sólo con texto y las clases de estilo adecuadas para conferirle apariencia de botón. Los tamaños 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, NAVEGACIÓN, TÉCNICAS DE CODIFICACIÓN Y DISEÑO VISUAL. (COLOR, ÍCONOS, FONDO DE LETRAS).

Consideraciones de Diseño.

Existen tres factores que pueden considerarse para el diseño de una interfaz de usuario correcta: factores de desarrollo, factores de viabilidad y factores de aceptación.

Los factores de desarrollo ayudan a mejorar la comunicación visual. Esto incluye toolkits y librerías de componentes, soportes para un rápido 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 múltiples representaciones.

Como factores de aceptación están la política de la corporación, los mercados internacionales, y la documentación y entrenamiento.

El Lenguaje Visible.

El Lenguaje Visible se refiere a todas las técnicas gráficas usadas para comunicar el mensaje o contexto. Esto incluye:

- Disposición o Layout: formatos, proporciones, y mallas (grids); organización: ya sea 2D y 3D.

- Tipografía: selección de tipos de letra y estilos, incluyendo la anchura fija y variable.

- Color y Textura: color, textura y luminancia aportan información compleja y realidad pictorial.

- Imágenes: signos, iconos y símbolos, desde lo fotográficamente real a lo abstracto.

- Animación: un display dinámico o cinético: muy importante en la utilización de imágenes relacionadas con el vídeo.

- Secuenciamiento: el aproximamiento total del secuenciamiento visual al secuenciamiento lógico.

- 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 Diseño 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 máximo con la menor cantidad de elementos.

- Comunicar: ajustar la presentación a las capacidades del usuario.

Organizar.

Consistencia, disposición de la pantalla, relaciones y navegabilidad son importantes conceptos de organización.

Consistencia.

Existen 4 visiones de la consistencia: consistencia interna, consistencia externa, consistencia del mundo real y cuando no hay consistencia.

La primera visión, la consistencia interna, afirma que las mismas convenciones y reglas deben ser aplicadas a todos los elementos de la interfaz gráfica 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 gráficas 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 innovación, trata con la carencia de consistencia. Desviarse de las convenciones existentes sólo debe hacerse cuando proporciona un CLARO beneficio al usuario.

Disposición de la pantalla (Layout).

Hay tres formas para diseñar una disposición espacial de la pantalla: usar una estructura de malla (grid), estandarizar la disposición de la pantalla, y usar los elementos relacionados con grupos.

Una estructura de malla puede ayudar a colocar menús, paneles de diálogo o de control. Generalmente el máximo número de divisiones horizontales o verticales se ajusta a la expresión 7 +/- 2. Esto ayudará a hacer la pantalla más inteligible y menos saturada.

Relaciones.

Conectar los items relacionados y disociar los items independientes mejora sensiblemente la organización visual.

Relaciones:

Izquierda: La localización, forma y valor pueden todas ellas crear relaciones que es posible sean inapropiadas.

Derecha: relaciones claras, consistentes, apropiadas y fuertes.

Navegabilidad.

Existen tres técnicas importantes de navegabilidad:

- proveer un foco inicial para la atención del usuario.

- dirigir la atención a los items importantes, secundarios o periféricos.

- asistir la navegación a través del material.

Navegabilidad:

Izquierda: diseño pobre.

Derecha: diseño mejorado: la disposición espacial y el color ayudan a centrar la atención del usuario a las áreas más importantes.

Economizar.

Hay que considerar 4 grandes factores: simplicidad, claridad, singularidad y énfasis.

Simplicidad.

La simplicidad incluye únicamente los elementos que son más importantes para la comunicación. Debería producir también la menor obstrucción posible.

Diseño complicado y diseño más simple.

Claridad.

Iconos ambiguos y claros.

Todos los componentes deberían ser diseñados para que su significado no sea ambiguo, que no lleve al equívoco.

Singularidad.

Las propiedades de los elementos necesarios deben ser características singulares.

Énfasis.

Los elementos más importantes deben ser fácilmente percibidos.

Se debe restar énfasis a los elementos no críticos y minimizarlos para no ocultar información crítica.

Comunicar.

La interfaz gráfica de usuario debe mantener un balance entre legibilidad, tipografía, simbolismo, múltiples vistas, y color o textura, para comunicar adecuadamente.

Legibilidad.

Texto ilegible y legible.

La pantalla debe ser fácil de identificar e interpretar, además de atractiva y agradable.

Tipografía.

Incluye características de elementos individuales (tipos de letra y estilos) y sus agrupamientos (técnicas de estilo).

Se deberá usar un número reducido de tipos de letra que serán legibles, claros y singulares (por ejemplo, para distinguir diferentes clases de información).

Recomendaciones:

- un máximo de 3 tipos de letra en un máximo de 3 tamaños de puntos.

- un máximo de 40-60 caracteres por línea de texto.

- ajustar el texto a la izquierda y los números a la derecha. En listas, usar el centrado de texto.

Tipos de letra y estilos recomendados

- usar mayúsculas y minúsculas siempre que sea posible.

Múltiples vistas.

Proveer de múltiples perspectivas en la pantalla de estructuras y procesos complejos. Hacer uso de estas múltiples vistas:

- múltiples formas de representación.

- múltiples niveles de abstracción.

- vistas alternativas simultaneas.

- conexiones y referencias cruzadas.

- metadatos, metatexto y metagráficos.

Múltiples vistas verbales y visuales.

Color.

El color es uno de los más complejos elementos a la hora de intentar diseñar una interfaz gráfica correcta. Puede ser una potente herramienta de comunicación usado correctamente. Los colores pueden ser combinados para tomar un sentido visual.

Ventajas en el uso del color para facilitar la comunicación:

- enfatizar la información importante.

- identificar subsistemas de estructuras.

- portar objetos naturales de un modo realista.

- portar tiempo y progreso.

- reducir los errores de interpretación.

- añadir dimensiones a la codificación.

- incrementar la comprensibilidad.

- incrementar la credibilidad y atractivo.

Cuando el color es usado correctamente la gente suele aprender más.

La memoria para la información en color parece ser mucho más capaz que para la información presentada en blanco y negro.

También existen desventajas en el uso del color:

- requiere un equipamiento más complicado y costoso.

- la mayoría no se acomoda a la visión de los daltónicos.

- algunos colores pueden potencialmente causar molestias visuales y postimágenes.

- puede contribuir a asociaciones erróneas a causa de diferencias multidisciplinarias o multiculturales.

Términos y conceptos relacionados con el color.

Las discusiones sobre el color suelen ser confusas porque científicos, artistas, diseñadores, 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 periféricos con tubos de rayos catódicos (CRTs).

Los siguientes términos aclaran conceptos sobre esta manera de entender el color:

Matiz (Hue) es la composición 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 (también llamado intensidad).

Saturación (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 energía luminosa al crear el color.

Principios de diseño del color.

Los tres principios básicos de diseño pueden aplicarse también al color: organización del color, economía del color y comunicación del color.

Organización del color.

La organización del color influye en la consistencia de la organización. El color debe emplearse para agrupar los items relacionados.

Debe aplicarse una organización de color consistente tanto a las pantallas, como a la documentación 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 codificación del color, esta debe ser usada en toda la interfaz gráfica así como en la documentación y publicaciones relacionadas.

Economía del color.

El segundo principio del color, la economía del color, sugiere usar un máximo de 5 +/- 2 colores cuando el significado tiene que ser recordado.

La idea fundamental es usar color para aumentar la información proporcionada en blanco y negro (por ejemplo, diseñar la interfaz para que funcione bien primero en blanco y negro).

Comunicación del color.

El énfasis del color sugiere usar fuertes contrastes en valor y tono para centrar la atención del usuario en la información más importante. Cuando demasiadas figuras o campos del fondo compiten por la atención del usuario se produce cierta confusión. La jerarquía de los estados sobreiluminado, neutro e infrailuminado para todas las áreas de la pantalla deben ser cuidadosamente diseñadas para proporcionar la máxima sencillez y claridad.

La comunicación en color pugna con la legibilidad, incluyendo usar un color apropiado para las áreas central y periférica del campo visual. Las

combinaciones entre colores pueden producir influencias entre ellos y cambios en la elección 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 atención del usuario, como un cambio de tamaño o el parpadeo, por ejemplo.

El negro, azul, blanco y amarillo son apropiados para la periferia del campo visual, donde la retina es más sensitiva a ellos.

Si se produce un cambio en el tamaño de los elementos coloreados se debe tener en cuenta que nuestra percepción 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 postimágenes.

Para situaciones con poca iluminación se recomienda texto claro, líneas finas y formas pequeñas o medianas sobre un fondo oscuro; para situaciones con iluminación abundante, por el contrario, texto oscuro (azul o negro), líneas finas y formas pequeñas 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 códigos de colores deben respetar el uso profesional y cultural ya existente de determinados colores. Las connotaciones varían 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 gráfico para representar el correo electrónico, es conveniente adecuar su color al país para mejorar la comunicación.

Características del color en una interfaz gráfica.

Consideremos cuál es la razón última para aprovechar las ventajas del color: ofrecer al usuario la misma información pero de una forma más persuasiva o amistosa, incrementando su interés. Por lo tanto, la principal utilidad que va a tener el color en las pantallas de nuestra interfaz gráfica será la de resaltar las informaciones que se consideren más importantes en detrimento del resto,

para así poder identificar rápidamente los datos más relevantes, que serán aquellos a los que se presta atención prioritariamente.

Por otra parte, un buen manejo del color nos lleva a agrupar los diferentes elementos de la pantalla en conjuntos, que quedarán asociados aunque estén 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 físicos de la pantalla como a las ideas y procesos inherentes a ellos. Por ejemplo, se puede emplear la misma gama de colores para señalar una secuencia de procesos determinada sin necesidad de numeraciones o indicaciones directas. También es muy interesante cuando tenemos información dinámica en el tiempo, ya que se altera el color cuando cambia el estado de la información.

Debemos tener en cuenta que los objetos verdes o azules parecen más grandes que aquellos que son rojos o amarillos. También consideraremos que los colores fríos hacen aparecer al objeto como mucho más 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 distribución decidido desde el momento en que se conoce que se van a utilizar colores en nuestras pantallas.

Uno de los errores más habituales a la hora de diseñar una pantalla es la de, intentando aprovechar la

posibilidad de usar el color, acabar abusando de él. Esto puede ocurrir cuando en la aplicación se presentan, por ejemplo, diferente gama de colores, lo que provoca confusión a la persona que va a manejarla, ya que acaba preocupándose más de adaptar su vista al continuo cambio de color que al contenido de la información. También hay que hacer hincapié en evitar las combinaciones que puedan provocar connotaciones culturales negativas, que pueden llegar a herir susceptibilidades.

Veamos un ejemplo de combinación errónea indiscriminada en la siguiente imagen. La pantalla que se ha elegido pertenece a una aplicación sobre historiales clínicos. Dispone de dos bloques de información: los datos personales del paciente y la relación de las citas anteriores a la actual, cada uno de ellos en un marco (frame). Realmente son dos informaciones que, aunque independientes, mantienen la asociación de pertenecer a la misma persona. Sin embargo, el diseñador ha decidido distinguir claramente las diferencias al establecer los colores verde y rojo como fondo para estos marcos. La conjunción 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.

Combinación errónea indiscriminada.

Otro error en el diseño 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 nítida delimitación. Obliga a forzar los ojos, lo que desde luego agota la vista del usuario en muy poco tiempo. Además, cuando se utilizan varias tonalidades del mismo color, como es el caso, puede incluso provocar confusión, o dar la impresión de que algunos datos físicamente cercanos estén conceptualmente distantes.

Por último, veamos la diferencia entre un texto de color oscuro sobre fondo claro (como suele ser lo habitual) y al revés. La primera situación la tenemos en los datos personales y la segunda en las citas anteriores. Como se puede observar, es mucho más fácil 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 atención. Esto es debido a que a veces el problema se presenta porque la combinación errónea se compone entre pantallas.

No es de recibo que a lo largo de la aplicación el usuario pueda ver que el predominio de los tonos en tiempo de ejecución va variando sin ningún orden lógico y que lleguen, incluso, a provocar interferencias entre las pantallas. Por supuesto, hay que intentar mantener una coherencia, buscando siempre transmitir una sensación de bloque homogéneo durante toda la aplicación. Si, por ejemplo, los fondos de todas las pantallas no pertenecen a la misma gama de color, provocará sin duda confusión a la persona que en este momento observa el monitor de su ordenador, a pesar de que pantalla a pantalla la composición de tonalidades haya sido la adecuada. Desde luego, el problema de la uniformidad es extrapolable al resto de características de nuestra aplicación. El usuario debe encontrarse en un entorno homogéneo para poder trabajar.

La anterior reflexión nos lleva a establecer que cualquier medida tomada en cuanto al color para incrementar los aspectos ergonómicos de nuestras aplicaciones deben ser estudiadas tanto a nivel individual de cada pantalla como a nivel global de la aplicación 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 también 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 veíamos en la figura 1.

Combinaciones de colores.

En la combinación de colores oscuros hay que tener más cuidado, porque es más fácil 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 acomodación ó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 visión y se pasa sin transición 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 más pálido y mate.

En general, los colores tienen unas propiedades psicológicas que actúan sobre nuestro subconsciente. Existen algunos efectos de la yuxtaposición 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 más 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 pequeño parecerá aún más pequeño si se coloca cerca de una superficie grande.

- Un color claro parecerá más claro sobre un fondo oscuro que sobre un fondo claro.

- Un color llama más la atención si se encuentra sobre un color mezclado que si está sobre un color vivo.

- Un tono frío parecerá más frío cuanto más cálido sea el color sobre el que aparece.

- Cada color muestra más claramente sus características si se coloca cercano a su complementario.

Finalmente, una breve mención a un aspecto muy interesante de cara a obtener delimitaciones más finas en nuestros diseños: la escala de grises. Muchas veces es más interesante jugar con los diferentes grises que mezclar otros colores, debido a que el ojo humano percibe con más dificultad los pequeños detalles cuando se emplea el color, y sin embargo, la combinación de varios grises permite la discriminación de los elementos de manera más eficaz y agradable a la vista.

Además, se le puede añadir 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 dispersión de la atención por parte del usuario. Pero, con una pequeña dedicación, un proyecto que utilice una agrupación bien estudiada de colores va a mejorar claramente el acabado final, enriqueciéndolo de una forma muy interesante.

Guía de uso del color en el diseño de GUIs. Recomendaciones.

1.- Usar un máximo de cinco, más 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 sólo pueden discriminar entre 7,5 millones de colores.

2.- Usar colores centrales y periféricos 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 atención es una buena medida, el campo visual se adapta fácilmente a esto.

3.- Usar el mismo color para agrupar elementos relacionados. La ciencia cognitiva ha avanzado en la noción de preparar y el proceso preatento. En este contexto, puedes preparar al usuario para eventos relacionados usando un código de color común. Un grupo de imágenes 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 razón, por el mismo motivo.

4.- Usar un código de formas redundante de la misma manera que el color. Hace la pantalla más 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, líneas finas, y formas pequeñas. Nuestro sistema visual no está únicamente diseñado para estímulos 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 idónea en la periferia del campo visual.

6.- Evitar que los colores adyacentes difieran únicamente en la cantidad de azul. Los límites que difieran únicamente en la cantidad de azul se percibirán 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 periféricos.

TIEMPO DE RESPUESTA Y DE RETROALIMENTACIÓN.

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 acción de control. El tiempo de respuesta del sistema tiene dos características importantes: duración y variabilidad.

- Duración: Si la respuesta del sistema se demora mucho, la frustración y el estrés del usuario son inevitables.

- Variabilidad: es la desviación del tiempo de respuesta promedio. Una baja variabilidad permite que el usuario establezca un ritmo de interacción, 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.

RETROALIMENTACIÓN.

- 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 DISEÑAR LO QUE VERÁN LOS USUARIOS CUANDO HAGAN CLIC EN EL BOTÓN RETROALIMENTACIÓN.

- Iniciar el programa de correo electrónico con la del contacto de la compañía y almacenar la retroalimentación de clientes.

- Diseñar una página Web y Iniciar el programa de correo electrónico con la del contacto de la compañía

- Almacenar la retroalimentación de clientes y diseñar una página Web.

TIEMPO DE RESPUESTA Y RETROALIMENTACIÓN.

En un sistema interactivo la retroalimentación visual (o feedback visual) es toda forma gráfica de comunicación que va del sistema en dirección al usuario. A pesar que la retroalimentación visual es un componente de software difícil de desarrollar y difícil de diseñar para guiar y hacer fácil la tarea del usuario, la Interacción Humano Computadora (IHC) como el área de la Ingeniería de Software han propuesto hasta hoy diversas técnicas para diseñar y desarrollar la retroalimentación visual sin tener un consenso. Este trabajo preconiza los patrones de interacción como mecanismo unificador entre la Ingeniera de Software y la IHC para diseñar la retroalimentación visual en función del contexto de la tarea del usuario, y permitir a la vez la comunicación entre los especialista involucrados en su desarrollo. El presente trabajo propone como solución un categorización de patrones de interacción que permitan capturar la experiencia en el diseño de la retroalimentación visual de un SI en término de los requerimientos del usuario.

Cuando se califica un sistema de interactivo no se puede dejar de lado el estudio de la retroalimentación visual (visual feedback en inglés) que corresponde a la forma de comunicación visual que va del sistema en dirección al usuario. La retroalimentación tiene lugar en la interfaz de la aplicación 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 retroalimentación debe ser informativa, comprensible y se debe efectuar en un tiempo razonable a la tarea del usuario.

La retroalimentación visual es un factor que corresponde tanto a la ingeniería 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 caracterizándolo para lo que fue hecho. La usabilidad concierne a guiar pertinentemente al usuario en su tarea y hacer que el sistema se fácil de usar. A pesar de la importancia de este doble rol de la retroalimentación y su presencia predominante en los actuales Sistemas Interactivos (SI) desafortunadamente no se ha estudiado un mecanismo de diseño 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 número de recomendaciones ergonómicas para la retroalimentación visual, pero sin especificar “el como” diseñar y concretizar la retroalimentación visual en un SI. Ahora bien, del lado de la Ingeniera de Software numerosas técnicas de programación visual y herramientas CASE se han propuesto para desarrollar

componente de software para la retroalimentación visual. Sin embargo, estos Componentes son fuertemente dependiente de los detalles de programación (e. gr. lenguaje de codificación y de la caja de herramientas a utilizar).

LOCALIZACIÓN E INTERNACIONALIZACIÓN.

.1 Internacionalización

Consiste en la identificación de toda la información local que aparece en un sitio web, es decir, aquella información que viene dictada por el idioma y la cultura del país donde se diseñó originalmente. Por ejemplo fechas, números, moneda, información de contacto, etc. Estos elementos deberán aislarse y guardarse de forma independiente para que sea posible adaptarlos a las especificaciones de cualquier idioma.

3. Internacionalización

Todos los elementos locales del sitio deberán ser identificados y aislados. El proceso de internacionalización en muchos casos requiere drásticos cambios en el diseño 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 internacionalización sólo debe llevarse a cabo una vez y a largo plazo supondrá un gran ahorro en los planes de expansión al extranjero de cualquier empresa.

Otras consideraciones a tener en cuenta en este punto son:

- Cuáles son los idiomas a utilizar y a qué países queremos llegar. Es más fácil 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.

- Cómo se llevarán a cabo las actualizaciones de contenido. Un sitio web que no actualiza sus contenidos nunca tendrá éxito, los usuarios de Internet buscan información rápida y actual. El mejor modo de controlar las actualizaciones de contenido y la gestión diaria del sitio es mediante la utilización de un sistema de workflow y gestión de contenidos.

Los gráficos deberán ser analizados y todos aquellos que tengan texto superimpuesto deberán, o bien ser eliminados, o las versiones originales en capas deberán almacenarse en un directorio central para poder traducir la capa de texto.

Todo símbolo, color e imagen deberá contrastarse en la cultura término. Los iconos deberán ser tan neutros y genéricos como sea posible para poder ser reutilizados.

En este punto los archivos de la interfaz de usuario, contenido y código deberán separarse en diferentes archivos de recurso. Se pueden utilizar Server Side Includes (SSIs) para facilitar la tarea de actualizar el contenido sin afectar el diseño gráfico de la página.

Una vez se hayan creado los archivos de recurso es fácil calcular la magnitud del proyecto, el número de archivos, número de palabras (esencial para estimar los costes y duración de las traducciones), etc.

La funcionalidad del sitio web (que será común en todos los idiomas) y la interfaz de usuario deberán 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 código fuente y se guardará en archivos de recurso como dynamic link libraries (DLL) con un solo archivo ejecutable. Este es sólo 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 añadan tantas explicaciones como sea posible en el código fuente. Del mismo modo, los programadores no deberán nunca hacer suposiciones sobre cómo funcionan las reglas gramaticales de un idioma o sobre cómo interpreta un idioma la información.

La estructura del sitio deberá planificarse antes de comenzar el proceso de localización. Uno de los mayores problemas es decidir cómo se van a combinar las diferentes versiones. El método más común 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 página inicial con lo que sólo se necesita una URL que se puede utilizar de forma global.

Otra posibilidad es guardar cada sitio localizado en su propio país término. Este proceso hace más lento el mantenimiento pero disminuye los tiempos de descarga. Una tercera opción consiste en crear sitios diferentes para diferentes países. 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 diseños.

El objetivo final es crear un sitio con una infraestructura global que será gestionada centralmente por un único equipo técnico con módulos localizables que deberán ser traducidos y adaptados a los diferentes idiomas.

1.2. LOCALIZACIÓN

Es el proceso de adaptar un sitio web a un idioma y una cultura diferente. Esto significa mucho más que simplemente traducir el contenido de las páginas. El contenido de una página web está formado por texto e imágenes, ambos deben ser traducidos y sometidos a una adaptación cultural. El usuario nunca debe notar que ese sitio fue originalmente creado en otro idioma.

Localización

El primer paso en el proceso de localización es la identificación de los diferentes elementos que deben ser localizados:

- La interfaz de usuario

- La funcionalidad técnica

- El contenido

Estas tres áreas están íntimamente relacionadas y es esencial prestar detenida atención a cada una de ellas si se quiere conseguir una completa y satisfactoria localización. De nada sirve un sitio web donde el texto está perfectamente traducido si la funcionalidad del sitio está comprometida.

MODALIDADES DE DISEÑO EN HCI. LOCALIZACIÓN E INTERNACIONALIZACIÓN.

Se entiende por localización la adaptación de un producto, una aplicación o el contenido de un documento con el fin de adecuarlos a las necesidades (lingüísticas, culturales u otras) de un mercado destinatario concreto (una "localidad" o "local" [locale]).

La palabra localización a veces se escribe "l10n", donde 10 es la cantidad de letras entre la ele y la ene.

Aunque se la considera a menudo sinónimo de traducción de la interfaz de usuario y de la documentación, la localización suele ser un asunto considerablemente más complejo, que puede implicar la adaptación del contenido en relación con:

1. formatos numéricos, de fecha y de hora;

2. uso de símbolos de moneda;

3. uso del teclado;

4. algoritmos de comparación y ordenamiento;

5. símbolos, iconos y colores;

6. texto y gráficos que contengan referencias a objetos, acciones o ideas que, en una cultura dada, puedan ser objeto de mala interpretación o considerados ofensivos;

7. diferentes exigencias legales;

8. y muchas otras cuestiones.

La localización puede requerir incluso una reelaboración exhaustiva de la lógica, el diseño visual o la presentación, 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 relación con la cultura originaria.

INTERNACIONALIZACIÓN.

Existen diferentes definiciones para la palabra internacionalización. La que damos aquí es una definición operativa de alto nivel para usar con los materiales de la Actividad de internacionalización del W3C. Algunas personas utilizan otros términos para referirse al mismo concepto, por ejemplo, "globalización".

La internacionalización es el diseño y desarrollo de un producto, una aplicación o el contenido de un documento de modo tal que permita una fácil localización con destino a audiencias de diferentes culturas, regiones o idiomas.

La palabra internacionalización a veces se escribe "i18n", donde 18 es la cantidad de letras entre la i y la ene.

La internacionalización generalmente implica:

Un modo de diseño y desarrollo que elimine obstáculos a la localización o la distribución 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 concatenación de cadenas; o evitar que la programación dependa de valores de cadenas pertenecientes a la interfaz de usuario.

Habilitar características que tal vez no sean usadas hasta el momento de la localización. Por ejemplo, añadir en la DTD etiquetas para habilitar el texto

bidireccional o la identificación de idiomas. O hacer la CSS compatible con texto vertical u otras características tipográficas ajenas al alfabeto latino.

Preparar el código para hacer frente a las preferencias locales, regionales, lingüísticas o culturales. Por lo general, esto supone incorporar características y datos de localización 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 números, ordenamiento y presentación de listas, uso de nombres personales y formas de tratamiento, etc.

Separar del código o contenido fuente los elementos localizables, de modo que puedan cargarse o seleccionarse alternativas localizadas según determinen las preferencias internacionales del usuario.

Obsérvese que esta lista no incluye necesariamente la localización del contenido, la aplicación o el producto hacia otro idioma; se trata más bien de prácticas de diseño y desarrollo que facilitan esa migración en el futuro, pero que también pueden tener una utilidad considerable aunque la localización jamás se produzca.

MODELOS METAFÓRICOS Y CONCEPTUALES

MÉTODOS MULTIMEDIA, WEB, MODELOS METAFÓRICOS Y CONCEPTUALES.

Simplemente porque hoy día podemos digitalizar horas de video analógico 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 electrónicos (e-books) y demás documentos digitalizados no necesariamente sentiremos placer por leerlos en nuestro monitor, dado que para ciertas formas de comunicación existen soportes culturales muy fuertemente instaurados. Digitalizamos texto con el fin de emplear nuestras capacidades informáticas, como lo son las búsquedas de información y los enlaces, para ampliar nuestro aprehendimiento del material de conocimiento. Esto se hace cierto para el soporte multimedia también, dado que se requiere considerar que tan bien ha de utilizarse un ordenador y no sencillamente hacer uso de tecnologías de digitalización para convertir material analógico en contenido para un monitor. Toda la tecnología disponible en internet ha requerido forzosamente un redimensionamiento y una compresión, resultando de esto que mucho contenido creado originalmente para transmisiones analógicas no funcionará muy bien en la web. La estrategia para un contenido multimedia de calidad es entonces una manufactura (casi una artesanía) creada desde el origen para ser servida en la web.

Los diseñadores web debemos considerar siempre la expectativa del consumidor. Un usuario satisfecho regresa a un sitio web casi diríamos que siempre, pero aquel a quién 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 más común es que se desperdicie con elementos en movimiento a lo largo de un sitio con el único propósito de "entretener" al usuario y mantener su atención. Este método se basa en la presunción de que los usuarios que navegan por internet poseen un tiempo de atención muy corto, lo que en muchos casos puede demostrarse cierto, y sin embargo no justifica la creación de "dulces de colores" a lo largo de una presentación de contenidos en internet.

Uso de metáforas en diseño de interfaz.

Aplicar metáforas en el diseño de interfaz de un producto ayuda al usuario a establecer unas expectativas acerca de su utilidad y funcionamiento. Un ejemplo: el escritorio.

Metáforas.

El uso de metáforas adecuadas en el diseño 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 aplicación web o multimedia. El ejemplo más tradicional: el escritorio con sus iconos representando carpetas y documentos. Las metáforas ayudan al usuario a entender más rápidamente cómo moverse por un producto interactivo.

Características de una buena metáfora.

Si el objetivo de un producto es ser usado de forma eficiente, algunas de las características que deben tenerse en cuenta son:

Debe ser consistente aplicándose de forma coherente y sólida 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 información superflua o innecesaria.

Tipos de metáforas.

Metáforas organizacionales

Se fundamentan en la estructura existente de un grupo, sistema u organización.

Por ejemplo: un sitio web de un supermercado puede estar agrupado por departamentos o secciones como los supermercados “físicos”. Panadería, carnicería, 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 metáfora: 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 además le resultará inútil en su tarea de comprar.

Metáforas 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 cómo puede reutilizar parte de su trabajo en la misma o diferentes aplicaciones.

Metáforas visuales.

Se basan en elementos gráficos familiares para la mayoría de la gente. Por ejemplo: un sitio de música 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 metáforas no es diseñar con “estilo”.

Es necesario ayudar al usuario a entender lo que le ofrece el sistema evitando la mezcla o el uso de metáforas inadecuadas. Muchos diseñadores confunden el hecho de aplicar metáforas en su trabajo con un diseño moderno o

rompedor. Es mejor prescindir de metáforas cuando pueden desorientar al usuario a no ser que esta “desorientación” sea uno de los objetivos del sistema como en entornos virtuales, de juego y/o aprendizaje en los que la exploración tiene gran protagonismo.

El modelo conceptual de un sistema software constituye una abstracción 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 diseños conceptuales se dividen en:

Modelo mental del usuario.

Modelo mental del diseñador.

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 diseño es aquel que interpreta fielmente los modelos mentales del usuario. Se forman a través de la experiencia, la formación y la instrucción.

PSICOLOGÍA DE LA INTERFAZ DE USUARIO

PSICOLOGÍA DEL HCI.

Al igual que en la actividad empresarial se comenzó con una orientación claramente productiva, y a lo largo del siglo pasado y lo que llevamos de este ha ido variando esta orientación hasta centrar al cliente como objetivo primero y último de la misma, el diseño de programas informáticos ha ido evolucionando desde su concepción inicial a la resolución de problemas, pocas veces teniendo en cuenta el problema mismo de usar dichos programas, hacia la mejora de la experiencia del usuario, mediante aplicación de pautas en el diseño de interfaces.

Pero al igual una vez más 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 informático suele focalizar sus objetivos en el diseño robusto, eficiente, eficaz... incluso maquiavélico de sus programas, es decir, suele centrarse principalmente en la técnica, y no en el usuario al que va dirigido. Por otro lado la formación de los diseñadores incide en aspectos técnicos como la teoría de color, la fotografía digital, la combinación de estilos, las pautas y estándares, o en aspectos subjetivos como los modelos de

comunicación gráfica, siempre con el objetivo de agradar e incluso comunicar algo al usuario, pero pocas veces pensando en que él va a ser el partícipe de esto.

En resumen, el informático busca que su programa tenga una gran funcionalidad con una gran técnica y el diseñador que sea bonito y llamativo por demás. 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 también es cierto que cada día más se profesionaliza el diseño de interfaces a partir de investigaciones en campos tan variados pero relacionados como la psicología cognitiva, la psicología de la comunicación, la lingüística, la teoría de la información, la accesibilidad y la usabilidad, la inteligencia artificial, la minería de uso o los interfaces adaptativos, de las que actualmente se desprenden ocho reglas de oro genéricas en el diseño de interfaces.

Consistencia: Uno de los aspectos más importantes a tener en cuenta en el diseño de interfaces es el conseguir su consistencia a lo largo del mismo, pero también es una de las reglas que más veces se rompe. Consistencia significa una composición de color, estilos y fuentes homogénea a lo largo de la interfaz, pero también un uso del lenguaje y la terminología, unos métodos de ayuda, una forma de recuperación 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 hablábamos 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 psicológicos y de aprendizaje, tales como los rangos de edad, las discapacidades o la diferenciación en general entre el principiante y el experto en el uso de aplicaciones de escritorio.

Realimentación 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 realimentación rica pero sin sobrecargar de información al usuario, aprovechando los principios del diseño universal para mostrar en mayor o menor medida la realimentación en función de las capacidades del usuario.

Conducir las tareas: El interfaz es un medio de comunicación entre el usuario que desea efectuar alguna tarea con el sistema y el sistema que las efectúa. 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 finalización, guiando el proceso en todo momento, aprovechando para

realimentar de manera eficiente y para aplicar principios de diseño universal que permitan la construcción 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 máximo desde el diseño de la interfaz que el usuario pueda cometer errores en la introducción de datos, en las etapas de resolución 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 recuperación del sistema, bien automáticamente, bien informando de manera correcta al usuario, indicándole el error producido, los motivos y los medios para resolverlo, y por supuesto, siendo consistente a lo largo de toda la aplicación 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 atrás de manera sencilla acciones que han dado lugar a un error. Si se produce una situación no deseada y el usuario tiene la capacidad de manera sencilla de echar atrás dicha situación, le dará mayor seguridad sobre la realización 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 errónea en un procesador de textos es fácilmente 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 información necesaria por requerir excesiva información o excesivos pasos, la dificultad para realizar determinadas acciones... El ejemplo más sencillo suelen ser los interfaces de los bancos, dónde cada acción requiere un dato de entrada normalmente vinculado a una acción 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 información a corto plazo, la denominada regla del "siete más/menos dos", lo que implica que las interfaces de usuario deberían 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, diseñando el mismo con una orientación clara hacia la consecución de las tareas, dónde se guía al usuario desde su

inicio hasta su finalización, y atendiendo en general a los principios de diseño universal.

PATRONES DE DISEÑO DE INTERFAZ.

Un patrón es una solución probada que se puede aplicar con éxito a un determinado tipo de problemas que aparece con frecuencia. Se intenta reutilizar diseños que hayan demostrado su eficacia en previas aplicaciones. Esqueleto de aplicación básica que el diseñador ha de adaptar a sus necesidades.

Igual que los patrones de diseño en programación nos permiten estudiar diferentes técnicas de programación y diseño, 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 diseño está en la arquitectura).

En este caso concreto, una buena aplicación del concepto son los patrones de interface de usuario o de interacción. ¿Cuándo es mejor utilizar tags? ¿Cuál es la forma más amigable de presentar una paginación? ¿En qué casos puede ser interesante proporcionar un Wizard?

ESTÁNDARES DE INTERFAZ

Estándares.

El objetivo de los estándares es hacer las cosas más fáciles, definiendo características de objetos y sistemas que se utilizan cotidianamente. El diseño de un teclado de teléfono es un estándar que se utiliza continuamente.

Hardware: Suelen reflejar la importancia de la ergonomía en las interfaces de usuario

Software: Suelen aplicarse a las características básicas de la interfaz usuario. Pretenden eliminar variaciones innecesarias e inconsistencias en la interfaz.

Iure: Son generados por un comité con ‘estatus‘ legal y están avalados por el apoyo de un gobierno o institución para producir estándares. Su elaboración 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 investigación de universidades y que tienen gran difusión.

Un estándar es un requisito, regla o recomendación basada en principios probados y en la práctica. Representa un acuerdo de un grupo de profesionales oficialmente autorizados a nivel

Local (aceptado desde una industria, organización profesional o entidad empresarial)

Nacional (aceptado por una amplia variedad de organizaciones dentro de una nación)

Internacional (consenso entre organizaciones de estándares a nivel mundial)Cuando se asegura la consistencia a través de las diferentes partes de un sistema o a través de una familia de sistemas, es fundamental para los desarrolladores basar sus diseños en un conjunto de principios y directrices, a esto se le denominan guías de estilo.

El seguimiento de un estándar o de una guía de estilo no garantiza la usabilidad de un producto, es decir, son elementos muy útiles para el diseño y la evaluación en IPO, pero deben ser empleados adecuadamente.

ISO (International Organization for Standardization , Organización Internacional para Estándares) Es la que tiene más estándares publicados relacionados con la interfaz de usuario.

Uno de los estándares más conocidos relacionado con interfaces de usuario es el Estándar ISO 9241 titulado “Requerimientos ergonómicos para trabajo de oficina con terminales de presentación visual “. Este estándar 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 estándar, el ISO 9995, indica por ejemplo las características de un teclado: distribución y etiquetas de las teclas, teclas de edición, etc.

ANSI (American National Standards Institute, Instituto Nacional Americano para Estándares) creado en 1918. Instituto de carácter privado, sin ánimo de lucro, dedicado a la representación de los intereses de casi 1000 compañías, organizaciones y agencias del gobierno. Su principal misión es ampliar la competitividad de las empresas de los EEUU a través de la generación de estándares.

IEEE (Institute of Electrical and Electronics Engineers,Instituto de Ingenieros Eléctricos y Electrónicos Americano. Asociación para Estándares) Su principal misión es desarrollar y publicar estándares generalmente aceptados, que promoverán la teoría y práctica de la ingeniería eléctrica, electrónica e

informática, así como el resto de ramas de la ingeniería y artes o ciencias relacionadas.

CEN (Comité Européen de Normalisation ,Comité Europeo para la Estandarización) Es el principal proveedor de estándares europeos y especificaciones técnicas.

W3C (Consorcio para el World Wide Web) creado en 1994 por Tim Berners-Lee en el MIT, con la colaboración del Instituto Nacional de Investigación en Informática y Automática (INRIA) y la Universidad de Keio (Japón). Su objetivo es llevar el World Wide Web a su pleno potencial, desarrollando protocolos comunes que promueven su evolución y aseguran su interoperabilidad. Está constituido por más de 500 organizaciones en todo el mundo. Proporciona ‘recomendaciones’ creadas por grupos de trabajo en áreas relacionadas con las interfaces de usuario: accesibilidad, Internacionalización. Disponibilidad totalmente gratuita http://www.w3c.org

LA NORMA ISO 9241 es la norma enfocada a la calidad en usabilidad y ergonomía 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 ergonomía y la usabilidad tanto de hardware como de software. Con el paso del tiempo se ha ido modificando y mejorando, hasta llegar a la versión actual (ISO/IEC 9241-9: 2001).

ANSI (American National Standards Institute, Instituto Nacional Americano para Estándares) es una organización sin ánimo de lucro que supervisa el desarrollo de estándares para productos, servicios, procesos y sistemas en los Estados Unidos. ANSI es miembro de la Organización Internacional para la Estandarización (ISO) y de la Comisión Electrotécnica Internacional (International Electrotechnical Commission, IEC). La organización también coordina estándares del país estadounidense con estándares internacionales, de tal modo que los productos de dicho país puedan usarse en todo el mundo. Por ejemplo, los estándares aseguran que la fabricación de objetos cotidianos, como pueden ser las cámaras fotográficas, 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 cámara fotográfica, la gente puede comprar carretes para la misma independientemente del páis donde se encuentre y el proveedor del mismo.

Por otro lado, el sistema de exposición fotográfico ASA se convirtió en la base para el sistema ISO de velocidad de película (en inglés: film speed), el cual es ampliamente utilizado actualmente en todo el mundo.

Esta organización aprueba estándares que se obtienen como fruto del desarrollo de tentativas de estándares por parte de otras organizaciones, agencias gubernamentales, compañías y otras entidades. Estos estándares

aseguran que las características y las prestaciones de los productos son consistentes, es decir, que la gente use dichos productos en los mismos términos y que esta categoría 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 estándares internacionales. Los programas de acreditación ANSI se rigen de acuerdo a directrices internacionales en cuanto a la verificación gubernamental y a la revisión de las validaciones.

En Microsoft Windows, la palabra ANSI hace referencia a las páginas de código ANSI de Windows. La mayoría de estos códigos tienen la misión de arreglar la anchura aunque existen algunas anchuras variables para lenguajes ideográficos. Algunos de estos códigos se acercan bastante a las series ISO_8859-1 provocando que muchos asuman de una forma equivocada que son idénticos.

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

.