PRINCIPIOS GENERALES DE LA INTERFAZ

A continuación se presentarán los estándares que se han definido para la Interfaz Gráfica de Usuario del Sistema de Simulación de Cortes ALRAZ.

Esquema de la pantalla principal

La ventana principal tendrá dos zonas: el área de Botones Gráficos y el área de Cliente.

 

En el área de Botones Gráficos irán los botones de las principales funcionalidades del sistema.

El área Cliente siempre buscará presentarse de forma minimalista, solo mostrados las opciones que realmente son necesarias en ese momento.

Las ventanas para funciones específicas no contendrán un área de menú, si no una barra de botones con íconos descriptivos y visualmente agradables.

Se hará uso extensivo de paneles que se irán superponiendo uno a uno para evitar la cantidad de ventanas emergentes.

Especificación de colores

Los colores que se utilizarán en las ventanas estarán basados en el siguiente esquema:

 Especificación de ColoresCaracterística EstándarColor de fondo de ventanas RGB (61,65,76)Color de fuentes RGB (206, 202, 206)

Especificación de fuentes

La fuente que se utilizarán será Lucida Grande, en estilo Bold normal y tamaño de 12 puntos y Myriad Pro, en estilo SemiBold y tamaño 13.

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. Es importante utilizar mecanismos indicadores de estado del sistema que mantengan a los usuarios alertas e informados. No puede existir autonomía en ausencia de control, y el control no puede ser ejercido sin información suficiente. Además, se debe mantener información del estado del sistema en ubicaciones fáciles de visualizar.

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.

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:

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.

 

La inconsistencia en el comportamiento de componentes de la IU debe ser fácil de visualizar. Se debe evitar la uniformidad en los componentes de la IU. Los objetos deben ser consistentes con su comportamiento. Si dos objetos actúan en forma diferente, deben lucir diferentes. La única forma de verificar si la IU satisface las expectativas del usuario es mediante testeo.

 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. Para aquellos usuarios que sean noveles en el uso de la aplicación, se deberá proveer de guías para realizar tareas que no sean habituales.Es conveniente que el usuario pueda incorporar elementos visuales estables que permitan, no solamente un desplazamiento rápido a ciertos puntos del trabajo que esté realizando, sino también un sentido de "casa" o punto de partida. La IU debe poder realizar la inversa de cualquier acción que pueda llegar a ser de riesgo, de esta forma se apoya al usuario a explorar el sistema sin temores.

Siempre se debe contar con un comando "Deshacer". Este suprimirá la necesidad de tener que contar con diálogos de confirmación para cada acción que realice en sistema. El usuario debe sentirse seguro de poder salir del sistema cuando lo desee. Es por ello que la IU debe tener un objeto fácil de accionar con el cual poder finalizar la aplicación.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.

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

 3. Tiempo de Respuesta y Retroalimentación

¿Tiene el usuario todo el control sobre el interfaz? Se debe evitar el uso de ventanas pop-up, ventanas que se abren a pantalla completa, banners intrusivos...

¿Se informa constantemente al usuario acerca de lo que está pasando? Por ejemplo, si el usuario tiene que esperar hasta que se termine una operación, la página debe mostrar un mensaje indicándole lo que está ocurriendo y que debe esperar. Añadir en el mensaje el tiempo estimado que tendrá que esperar el usuario, o una barra de progreso, ayudará al usuario en este sentido.

 ¿Se informa al usuario de lo que ha pasado? Por ejemplo, cuando un usuario valora un artículo o responde a una encuesta, se le debe informar de que su voto ha sido procesado correctamente.

 Cuando se produce un error,

 ¿Se informa de forma clara y no alarmista al usuario de lo ocurrido y de cómo solucionar el problema? Siempre es mejor intentar evitar que se produzcan errores a tener que informar al usuario del error.

 ¿Posee el usuario libertad para actuar? Se debe evitar restringir la libertad del usuario: Evite el uso de animaciones que no pueden ser "saltadas", páginas en las que desaparecen los botones de navegación del browser, no impida al usuario poder usar el botón derecho de su ratón...

¿Se ha controlado el tiempo de respuesta? Aunque esto tiene que ver con el peso de cada página (accesibilidad) también tiene relación con el tiempo que tarda el servidor en finalizar una tarea y responder al usuario. El tiempo máximo que esperará un usuario son 10 segundos.

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.

Mejor dicho 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 [9] [5]. 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.

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

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

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

Conclusiones

Es importante destacar que aunque se sigan estrictamente las normas de la guía no hay garantía de que la interface sea usable.

Es mejor seguir las guías que no, no seguirlas. Puede que podamos hacer un diseño mejor, pero seguramente los problemas que pueda plantear pueden ser superiores a los problemas que aporta.

Linografía

http://kenderprogramacion.blogcindario.com/2012/06/00002-estandares-de-interfaz-

grafica.html