martes, 12 de junio de 2012

República Bolivariana de Venezuela.
 Ministerio del Poder Popular para la Educación Universitaria.
Universidad Politécnica de Guárico. 

Calabozo -Edo- Guárico.

DISEÑO DE INTERFAZ DE USUARIO




Profesor:                         Autores: 
Eliomar Nieves.                  Bastidas, Yettsy CI.21.277.471.
Ingenieria en informática. Milano, María CI. 20.523.388. 
Sección: # 04.                       Palacios, Yadurmis CI. 21.280.458.
                                                    Sumoza, Erika CI. 20.524.992.
                                       Zambrano, Jhoskary CI. 20.521.654.


 Junio – 2012
MÉTODOS MULTIMEDIA.  


           El diseño es mucho más que el embellecimiento de la parte exterior de las cosas. El diseño, se puede decir, es solo una parte de un proceso de hacer que los objetos o cosas sean atractivos, usables, asequibles. El Diseño es un proceso de creación visual con un propósito comunicativo. Un buen diseño es la mejor expresión visual de la esencia de "algo", bien sea un mensaje o un producto. Para hacerlo fiel y eficaz, el diseñador debe buscar la mejor forma de que ese "ALGO" sea conformado, usado, distribuido y relacionado a su ambiente. Esta creación deberá estética y funcionalmente reflejar el gusto de su época.
 
LENGUAJE VISUAL.

        Es la base de creación en diseño.  Es el seguimiento de unas reglas o conceptos en cuanto a la conformación visual.  Sus leyes no son obvias.  En el diseño de interfaces, el lenguaje visual es la utilización de un conjunto de imágenes y objetos gráficos (iconos, ventanas, tipografía, imágenes, fotografías, ilustraciones, textos, videos, animaciones, menús, entre otros) para representar la información y acciones disponibles en la interfaz.  Los objetos que se integran en la Interfaz Gráfica de Usuario (GUI), se disponen en el plano llamado pantalla de manera ordenada siguiendo conceptos de diseño básico como pueden ser:
•    Elementos conceptuales
•    Elementos Visuales
•    Elementos Relacionales
•    Elementos Prácticos
Conceptuales: Son los que realmente no están en el plano, pero se pueden deducir:
1.    Punto: Por ejemplo, una flor roja en un jardín de donde predomine el amarillo.
2.    Línea: Una fotografía arquitectónica las refleja.
3. Plano: Una área de cualquier forma geométrica coloreada.
4.    Volumen: Objetos que tengan profundidad volumétrica.

Visuales:
1.    Forma: Todo lo que pueda ser visto, tiene forma
2.    Medida: Todo lo que se ve tiene una medida (pixeles en el caso de la pantalla)
3.  Color: Existe toda una teoría aplicable. Primarios, secundarios, terciarios, neutros, tonos, luminosidad, etc. También existe una teoría de esquemas de color: Frios, cálidos, análogos, opuestos, adyacentes,
4.  Textura: Atrae el sentido del tacto o la vista. Una fotografía de varias ventanas puede ser una textura.

Relacionales: Nos ubican dentro del espacio y pueden ser sentidos aunque no literalmente como la gravedad y el espacio. Otros más obvios, pueden ser percibidos claramente como la dirección y la posición.
1. Dirección: Varios rectángulos ordenados en fila denotarían una dirección a seguir
2.    Posición: Arriba, abajo, derecha, izquierda, etc
3.   Espacio: Los espacios vacíos son muy apreciados por los diseñadores de interfaces
4.  Gravedad: Es una sensación sicológica. Transfiere sensaciones de pesadez, liviandad, estabilidad, etc.
Prácticos: Subyacen en el contendio y los alcances de un determinado diseño.
1.  Representación: Realista o abstracta, una representación pretende mostrar la naturaleza de las cosas en un plano.
2.   Significado: El diseño transporta un mensaje.
3.  Función: Se hace presente cuando el diseño tiene un determinado propósito.
Todos los elementos visuales están enmarcados dentro de una Pantalla. La Pantalla no es solamente el dispositivo elctrónico del computador o aparato electrónico, puede sonsiderarse también como pantalla a una tela donde se proyecte una imagen, un marco de un lienzo, una hoja de papel.
PRINCIPIOS Y ESTANDARES DE INTERFAZ.

 
          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 Iníciales" 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.
 
Consistencia: 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:
1Interpretació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.
2.  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.
3.  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.
4.  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.
5.  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.
6. 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.
7.  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.

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 decolores 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.










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.
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 pagina 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 pagina Web.



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

       HumanoComputadora (IHC), que en inglés se conoce como Human-Computer Interaction (HCI) denominación usada a nivel internacional  de proporcionar a los usuarios todos los beneficios de utilidad y usabilidad (fácil de aprender, fácil de usar), disminución de costos y de errores cometidos por parte de los usuarios, efectividad, eficiencia, motivación y aceptación, con el fin de aumentar la productividad – individual y organizacional  y la seguridad tanto del sistema como de los usuarios, asegurando que ambos elementos se integren de manera apropiada en el escenario dela organización. En resumen, la IHC permite diseñar sistemas computarizados que ayudan a los humanos a realizar sus actividades de una manera  productiva y segura.. Para producir sistemas con una buena usabilidad, los diseñadores tratan de entender factores tales como psicológico, ergonómico, laboral, ambiental, organizacional y social, que determinan como las personas operan y usan efectivamente la tecnología de computación. Además, es necesario determinar los requerimientos funcionales y realizar un estudio de factibilidad para determinar factores tales como costo, tiempo, presupuesto, personal, equipamiento, edificación, etc. Conocimiento de las metas, capacidades y limites humanos, Conocimiento de la  funcionalidad del sistema, Conocimiento de los aspectos sociales, físicos y la  organización del ambiente de trabajo, Conocimiento de las  Estudio de factibilidad.


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.
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.

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.
En esta relación de hombres o personas y máquinas, se comprende que las interaccciones en sí, se relacionan con los procesos internos automáticos del ser humano. Estos procesos internos son rutinas de procesamientos de la información,así las máquinas llevan en sí algoritmos que procuran mejorar el desempeño de la persona y aumentar su inteligencia, como asimismo sus niveles de conciencia, dado que las personas utilizan las máquinas para su uso personal.
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.

 PSICOLOGÍA DE HCI.
        La Interacción Persona-Ordenador, es la disciplina que estudia el intercambio de información entre las personas y los ordenadores. Su objetivo es que este intercambio sea más eficiente: minimiza los errores, incrementa la satisfacción, disminuye la frustración y en definitiva, hace más productivas las tareas que envuelven a las personas y los ordenadores. Los orígenes de la IPO/HCI hay que buscarlas en la rama de la Psicología Aplicada que estudia la Interacción Persona-Ordenador. Las dos disciplinas de las que surge la IPO/HCI son las llamadas "Human Factors" y la Ergonomía (en realidad es la misma disciplina, el primer termino se utiliza en EE.UU y el segundo en Europa). Actualmente el uso de estos términos no esta claramente establecido y incluso a veces se utilizan de manera indistinta. El predominio tradicional en la IPO/HCI ha sido de los ingenieros, aunque la influencia de la psicología es creciente. La Psicología es la disciplina que estudia la percepción, la memoria, la adquisición de habilidades y el aprendizaje, la resolución de problemas, el movimiento, las tareas de juicio, de búsqueda o procesamiento de información y de la comunicación, es decir, procesos todos cuyo conocimiento se requiere para el adecuado diseño de mecanismos de interacción del usuario. Aunque la Psicología Cognitiva es una ciencia muy joven en lo que respecta a investigaciones de carácter básico y sistemático, existen actualmente suficientes hallazgos basados en resultados empíricos que permiten el desarrollo de la IPO/HCI y, por ende, de sitios web adaptados a los usuarios. La IPO/HCI es también una disciplina joven, pero no tanto como pudiera parecer. Desde el primer ordenador ha sido necesario el diseño de un sistema de comunicación persona-ordenador. Los estudios en esta disciplina han permitido dar una base teórica al diseño y a la evaluación de aplicaciones informáticas.
        La importancia de esta disciplina se pone sobre relieve al leer artículos sobre el tema escritos hace cuarenta años en los que se predecían elementos de interacción de los que se dispone actualmente. Una de las asociaciones más influyentes en este campo es la ACM SIGCHI (Association for Computing Machinery's Special Interest Group on Computer-Human Interaction) que desde 1982 reune a los mejores especialistas en IPO/HCI.  Los primeros estudios específicos de IPO/HCI aparecieron en los años sesenta y se referían a la simbiosis Persona-Ordenador (Licklider, 1960). Este autor afirmó anticipándose a la problemática posterior que el problema de la interacción hombre-ordenador no es crear ordenadores productores de respuestas, sino ordenadores que sean capaces de anticipar y participar en la formulación de las preguntas.