Unidad 3. Diseño de Interfaz de usuario (HCI, siglas en Inglés)

PRINCIPIOS Y ESTÁNDARES DE INTERFAZ

El diseño de la interfaz ha estado dirigido a evitar errores, teniendo en cuenta paralelamente la creación de interfaces útiles y amigables. Se ha buscado simplificar la validación de los datos garantizando una validación intrínseca de los mismos, procurando facilitar la corrección de errores lógicos tanto en la introducción de la información como en cualquier otro momento del tratamiento de la misma.

Los formularios manejan los datos en memoria y solo se actualiza en la base de datos cuando se indique salvarlos

§  . Los diseñadores no son expertos en estos temas y necesitan unos principios generales de diseño consensuados por los expertos

§  Estos principios son conceptos de muy alto nivel que se plasman en unas reglas de diseño que guían al diseñador con el fin de conseguir productos usables

§  Objetivo: conseguir un software más fácil y seguro, estableciendo unos requisitos mínimos de fabricación, eliminando inconsistencias y variaciones innecesarias en las interfaces

§   

 ESTÁNDARES

Son requisitos, reglas o recomendaciones basadas en principios probados y en práctica.

• Los diseñadores no son expertos en estos temas y necesitan unos principios generales de diseño consensuados por los expertos
• Estos principios son conceptos de muy alto nivel que se plasman en unas reglas de diseño que guían al diseñador con el fin de conseguir productos usables

 PRINCIPIOS PARA EL DISEÑO DE INTERFACES DE USUARIO.

Existen principios relevantes para el diseño e implementación de IU, ya sea para las IU gráficas, como para la Web.

Anticipación

Las aplicaciones deberían intentar anticiparse a las necesidades del usuario y no esperar a que el usuario tenga que buscar la información, recopilarla o invocar las herramientas que va a utilizar.

AUTONOMÍA

La computadora, la IU y el entorno de trabajo deben estar a disposición del usuario. Se debe dar al usuario el ambiente flexible para que pueda aprender rápidamente a usar la aplicación. Sin embargo, está comprobado que el entorno de trabajo debe tener ciertas cotas, es decir, ser explorable pero no azaroso.

PERCEPCIÓN DEL COLOR

Aunque se utilicen convenciones de color en la IU, se deberían usar otros mecanismos secundarios para proveer la información a aquellos usuarios con problemas en la visualización de colores

VALORES POR DEFECTO

No se debe utilizar la palabra "Defecto" en una aplicación o servicio. Puede ser reemplazada por "Estándar" o "Definida por el Usuario", "Restaurar Valores Iniciales" o algún otro término especifico que describa lo que está sucediendo. Los valores por defecto deberían ser opciones inteligentes y sensatas. Además, los mismos tienen que ser fáciles de modificar.

Para lograr una mayor consistencia en la IU se requiere profundizar en diferentes aspectos que están catalogados en niveles. Se realiza un ordenamiento de mayor a menor consistencia:

Interpretación del comportamiento del usuario: la IU debe comprender el significado que le atribuye un usuario a cada requerimiento. Ejemplo: mantener el significado de las los comandos abreviados (shortcut-keys) definidos por el usuario.

Estructuras invisibles: se requiere una definición clara de las mismas, ya que sino el usuario nunca podría llegar a descubrir su uso. Ejemplo: la ampliación de ventanas mediante la extensión de sus bordes.

Pequeñas estructuras visibles: se puede establecer un conjunto de objetos visibles capaces de ser controlados por el usuario, que permitan ahorrar tiempo en la ejecución de tareas específicas. Ejemplo: ícono y/o botón para impresión.

Una sola aplicación o servicio: la IU permite visualizar a la aplicación o servicio utilizado como un componente único. Ejemplo: La IU despliega un único menú, pudiendo además acceder al mismo mediante comandos abreviados.

Un conjunto de aplicaciones o servicios: la IU visualiza a la aplicación o servicio utilizado como un conjunto de componentes. Ejemplo: La IU se presenta como un conjunto de barras de comandos desplegadas en diferentes lugares de la pantalla, pudiendo ser desactivadas en forma independiente.

Consistencia del ambiente: la IU se mantiene en concordancia con el ambiente de trabajo. Ejemplo: La IU utiliza objetos de control como menúes, botones de comandos de manera análoga a otras IU que se usen en el ambiente de trabajo.

Consistencia de la plataforma: La IU es concordante con la plataforma. Ejemplo: La IU tiene un esquema basado en ventanas, el cual es acorde al manejo del sistema operativo Windows.

EFICIENCIA DEL USUARIO

Se debe considerar la productividad del usuario antes que la productividad de la máquina. Si el usuario debe esperar la respuesta del sistema por un período prolongado, estas pérdidas de tiempo se pueden convertir en pérdidas económicas para la organización. Los mensajes de ayuda deben ser sencillos y proveer respuestas a los problemas. Los menúes y etiquetas de botones deberían tener las palabras claves del proceso.

LEY DE FITT

El tiempo para alcanzar un objetivo es una función de la distancia y tamaño del objetivo. Es por ello, que es conveniente usar objetos grandes para las funciones importantes.

INTERFACES EXPLORABLES

Siempre que sea posible se debe permitir que el usuario pueda salir ágilmente de la IU, dejando una marca del estado de avance de su trabajo, para que pueda continuarlo en otra oportunidad.

OBJETOS DE INTERFAZ HUMANA

Los objetos de interfaz humana no son necesariamente los objetos que se encuentran en los sistemas orientados a objetos. Estos pueden ser vistos, escuchados, tocados o percibidos de alguna forma. Además, estos objetos deberían ser entendibles, consistentes y estables.

USO DE METÁFORAS

Las buenas metáforas crean figuras mentales fáciles de recordar. La IU puede contener objetos asociados al modelo conceptual en forma visual, con sonido u otra característica perceptible por el usuario que ayude a simplificar el uso del sistema.

CURVA DE APRENDIZAJE

El aprendizaje de un producto y su usabilidad no son mutuamente excluyentes. El ideal es que la curva de aprendizaje sea nula, y que el usuario principiante pueda alcanzar el dominio total de la aplicación sin esfuerzo.

REDUCCIÓN DE LATENCIA

Siempre que sea posible, el uso de tramas (multi-threading) permite colocar la latencia en segundo plano (background). Las técnicas de trabajo multitarea posibilitan el trabajo ininterrumpido del usuario, realizando las tareas de transmisión y computación de datos en segundo plano.

PROTECCIÓN DEL TRABAJO

Se debe poder asegurar que el usuario nunca pierda su trabajo, ya sea por error de su parte, problemas de transmisión de datos, de energía, o alguna otra razón inevitable.

AUDITORÍA DEL SISTEMA

La mayoría de los navegadores de Internet (browsers), no mantienen información acerca de la situación del usuario en el entorno, pero para cualquier aplicación es conveniente conocer un conjunto de características tales como: hora de acceso al sistema, ubicación del usuario en el sistema y lugares a los que ha accedido, entre otros. Además, el usuario debería poder salir del sistema y al volver a ingresar continuar trabajando en lugar dónde había dejado.

LEGIBILIDAD

Para que la IU favorezca la usabilidad del sistema de software, la información que se exhiba en ella debe ser fácil de ubicar y leer. Para lograr obtener este resultado se deben tener en cuenta alguna como: el texto que aparezca en la IU debería tener un alto contraste, se debe utilizar combinaciones de colores como el texto en negro sobre fondo blanco o amarillo suave. El tamaño de las fuentes tiene que ser lo suficientemente grande como para poder ser leído en monitores estándar. Es importante hacer clara la presentación visual (colocación/agrupación de objetos, evitar la presentación de excesiva información.

INTERFACES VISIBLES

El uso de Internet, ha favorecido la implementación de interfaces invisibles. Esto significa que el usuario siempre ve una página específica, pero nunca puede conocer la totalidad del espacio de páginas de Internet. La navegación en las aplicaciones debe ser reducida a la mínima expresión. El usuario debe sentir que se mantiene en un único lugar y que el que va variando es su trabajo. Esto no solamente elimina la necesidad de mantener mapas u otras ayudas de navegación, sino que además brindan al usuario una sensación de autonomía.

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. No ser innovador a este respecto, al menos no en el concepto básico representado: generará cierto grado de confusión con seguridad.

Para acciones de navegación específicas de nuestro site: 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 micro iconos y tienen un peso apreciablemente menor:

o    40 X 40 pixeles Peso < 1 KBytes

o    20 X 20 pixeles Peso < 300 Bytes

o    12 X 12 pixeles Peso < 100 Bytes

TIEMPO DE RESPUESTA O RETROALIMENTACIÓN

RETROALIMENTACIÓN:

La retroalimentación se produce cuando las salidas del sistema o la influencia de las salidas de los sistemas en el contexto, vuelven a ingresar al sistema como recursos o información.

La retroalimentación permite el control de un sistema y que el mismo tome medidas de corrección en base a la información retroalimentada.

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 se respuesta del sistema tiene dos características importantes:

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.

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

INTERNACIONALIZACIÓN: Es la operación por medio de la cual se modifica un programa, o conjunto de programas en un paquete, para que pueda adecuarse a múltiples idiomas y convenciones culturales. 

LOCALIZACIÓN: nos referimos a la operación por la que, sobre un conjunto de programas que ya han sido internacionalizados, se le proporciona al programa toda la información necesaria para que pueda manejar su entrada y su salida de un modo que sea correcto respecto a determinados hábitos lingüísticos y culturales (por ejemplo el signo de la moneda de un país, el orden en que se expresan mes, día y año en una fecha.

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

MULTIMEDIA

DirectX

Conjunto de interfaces de programación de aplicaciones  orientadas a la multimedia La distribución contiene:

Una librería en tiempo de ejecución que consta de varias las cuales pueden ser distribuidas con la aplicación un sistema de desarrollo asociado, el

DirectX SDK, con varios archivos de librería y de cabeceras.

GDI (Graphics Device Interface)

 Proporciona dibujo 2D y comandos de ventana no proporciona soporte multimedia.

 MCI (Media Control Interface) primer arquitectura multimedia de Microsoft  proporciona comandos para la ejecución multimedia (play, pause, stop, ...) para audio y vídeo no soporta captura y edición de vídeo

 VFW (Video For Windows)

 Primera arquitectura multimedia para Windows (1990)soporte de archivos AVI incluye herramientas para captura y compresión de vídeo Tecnologías Multimedia - Desarrollo de Aplicaciones Multimedia 5

 QTW (QuickTime for Windows) portada por Apple de Mac a Windows (1993)al principio solo soportaba reproducción, añadiendo posteriormente captura y compresión

ActiveMovie

 Reemplazo de VFW (1996) soporte de AVI, WAV y MPEG DirestShow

 Reemplazo de ActiveMovie (1998) soporta captura y compresión

 Integrada originalmente en la arquitectura DirectX (DirectX SDK)

(Actualmente disponible en Windows SDK) sustituida progresivamente por la nueva arquitectura Media Foundation

CONCEPTUALES: Son los que realmente no están en el plano, pero se pueden deducir:

Punto: Por ejemplo, una flor roja en un jardín de donde predomine el amarillo.

Línea: Una fotografía arquitectónica las refleja.

Plano: Una área de cualquier forma geométrica coloreada.

Volumen: Objetos que tengan profundidad volumétrica.

LA METÁFORA

Antes de comenzar a diseñar la interfaz es imprescindible pensar el concepto que se necesita expresar. Elegir una metáfora adecuada apoya y refuerza el concepto y el proceso de comunicación sin distraer, proporcionando una realidad “física” para el entorno abstracto en el que se tienen que introducir los usuarios.

Es una estrategia para el diseño de interfaces es el uso de metáforas. Un ejemplo clásico es el diseño de la interface con el usuario de las computadoras Macintosh. Antiguamente, para realizar cualquier operación con una computadora era necesario escribir una serie de comandos con una sintaxis perfecta. Desde que Apple Computer empezó a utilizar metáforas, es posible para usuarios no conocedores de lenguajes de programación realizar operaciones con la computadora. Ya no es necesario saber los comandos con los cuales se desecha un archivo. Ahora es posible simplemente tomar el archivo y llevarlo al bote de la basura. Gracias al uso correcto de interfaces, la tecnología resulta transparente al usuario.
La metáfora ha dado paso, sin embargo, a una nueva perspectiva: la virtualidad. Bajo la perspectiva de la virtualidad

PSICOLOGÍA EN HCI.

Las expectativas  extraídas de los estudios de la psicología cognitiva acerca de que las palabras con mayor índice de familiaridad serian más fáciles de aprender fueron contradichas por el hallazgo de que estas fueron las menos precisas de todas.

La psicología cognoscitiva ha jugado un papel importante en el diseño de interfaces pues provee las bases teóricas sobre cómo procesa información el ser humano. Sin embargo, las implicaciones del diseño de interfaz llegan más allá de lo estrictamente técnico o cognitivo, llegando a poner en duda la esencia misma de nuestras personas y nuestras relaciones. Este breve ensayo esboza la relación entre tecnologías de comunicación e identidad, a partir del análisis de la virtualidad como un fenómeno que ha trascendido su mera funcionalidad como estrategia para el diseño de interfaz. Las tecnologías, para ser usadas efectivamente, requieren ser transparentes. Transparencia significa "la cualidad de una configuración específica de medios (y no de los medios mismos) en la cual el usuario ignora la presencia de los componentes del sistema y es capaz de ver a través del sistema para concentrarse completamente en la función última.

Integrantes:

Ascanio, Maryeling.

Chouza, Jose.

Prado, Williana.

Torrealba, Anadilis.

PNF informática , sección 4.(NOCTURNO).