Читать книгу Integración de la funcionalidad en productos multimedia. ARGN0110 - Juan Luis Perles García - Страница 13

Se considera interfaz o de manera más técnica GUI –Graphical User Interface (Interfaz Gráfica de Usuario)– al conjunto de elementos gráficos, que hacen posible la interacción entre una persona y un ordenador, normalmente mediante un sistema de visualización o periférico de salida, como puede ser la pantalla o monitor y unos periféricos de entrada como son el ratón, el teclado y/o los dispositivos táctiles.

Esto permite una comunicación “amigable” entre el ordenador y la persona, mediante una representación gráfica basada en imágenes y objetos como iconos, ventanas, textos, etc., que conforman un lenguaje visual y apoyada por otros elementos secundarios (sonidos o animaciones por ejemplo que refuerzan la interactividad), evitando así la comunicación en lenguaje máquina.

Imagen en la que se muestra la clara evolución de cuatro ejemplos de interfaces desarrolladas a lo largo del tiempo. De arriba abajo: MS-Dos, Yast para Ms-Dos, Windows 95 y KWin Cube para KDE.

Sabía que...

Internamente cualquier sistema informático almacena la información codificada en binario, es decir, “ceros” y “unos”, por lo que para un “fácil” manejo es necesario un sistema de comunicación entre las personas y el sistema, totalmente humano.

El GUI surge por tanto como evolución del uso de los sistemas informáticos antiguos, que tenían que ser manejados mediante la introducción de órdenes o comandos con sus respectivas opciones (sistema operativo MS-DOS, por ejemplo). Esto dificultaba enormemente el trabajo, ya que era necesario saber usar esas órdenes y no todas las personas tenían ese conocimiento o podían adquirirlo.

La interfaz gráfica tiene como objetivo por tanto eliminar esa dificultad, presentando una serie de objetos de fácil visualización e interpretación, con características óptimas de interactividad accesible, usable y lo más atractiva posible, lo cual beneficia la experiencia del usuario con la misma. La interfaz debe en todo momento conservar la funcionalidad del sistema.

Representación conceptual de un interface en la que se muestra a la izquierda los bits, que representan el almacenamiento interno de los datos en el ordenador y a la derecha el programa informático que permite a la persona que lo maneja, de manera “amigable” acceder a dicha información, usando los periféricos de entrada y salida.

El diseño de la interfaz gráfica es una tarea primordial en el desarrollo de una aplicación multimedia, y crítica, en el sentido de que el éxito o el fracaso de la misma, se fundamenta en buena medida en un correcto diseño. Es la base de la estrategia visual de comunicación, de navegación y de acceso a los contenidos de la aplicación.

Los aspectos generales que influyen en el diseño de interfaces, se basan en unos principios que pueden relacionarse con propiedades básicas de diseño, características de accesibilidad y características de usabilidad, aunque todos ellos guardan relación entre sí –por ejemplo un diseño multimedia tiene características óptimas de usabilidad, cuando su utilización no es compleja (característica de sencillez)–.

Características de diseño

A continuación se describen las características más importantes que debe cumplir el diseño de una interfaz.

Sencillez

Una interfaz es sencilla cuando presenta la información de manera clara, concisa y fácil de interpretar. Un error muy común es intentar presentar demasiadas cosas. No es necesario mostrarlo todo, hay que transmitir la información precisa en cada momento, pues jugando con el sistema de navegación se le permitirá al usuario final acceder a los distintos contenidos.

Lo contrario deriva en una saturación de datos que termina distrayendo al usuario, dificultando su compresión, y haciendo que al final no muestre interés en la misma. No es lo mismo sencillez que minimalismo: lógicamente un diseño minimalista puede ser sencillo, pero no al contrario.

Definición

Minimalismo

Corriente artística surgida en los años 60 que solo utiliza elementos mínimos y básicos. En el mundo del diseño actual, busca reducir el mismo a lo esencial y no presentar elementos sobrantes o accesorios, usando el eclecticismo, la abstracción, la funcionalidad pura y la síntesis.

Transparencia

Una interfaz es transparente cuando el diseño y la integración de los elementos que la componen, no llaman la atención de manera negativa, o sobrecargada, dificultando el acceso o la interacción con los elementos. Una interfaz transparente permite un uso fluido por parte de los usuarios.

Actividades

7. De al menos dos ejemplos de periféricos de entrada y otros dos de periféricos de salida.

8. ¿Qué es un bit? ¿Es lo mismo que un píxel?

Coherencia

Es la característica de aquellos diseños que ofrecen una unidad de estilo, en cuanto a los colores, iconos, tipos de letra y tamaños, controles de navegación y en general lo elementos gráficos que se usen. Se trata de conservar una línea maestra de diseño en todas las pantallas, evitando que al pasar de una a otra se produzcan grandes cambios o saltos, lo que va en detrimento de la experiencia con la aplicación, por ejemplo pasar de pantallas con el fondo blanco o muy claras, a pantallas con el fondo negro o muy oscuras, o pasar de pantallas muy espaciadas con pocos elementos, a pantallas muy cargadas.

Se aplica también a nivel de pantalla, pues estas deben ser vistas como una unidad, donde se integran elementos de distinto tipo, que han de tener una coherencia visual. Si por ejemplo el estilo de la pantalla es moderno, sería una aberración incluir un reproductor de estilo gráfico antiguo o “vintage” o letras de estilo gótico.

Definición

Vintage

Estilo de objetos antiguos, retros y de cierta calidad, aplicable también al mundo del diseño gráfico.

El concepto de plantilla ayuda a crear un tipo de documento común sobre el cual se modifican principalmente los contenidos informativos, pero no los elementos funcionales como marcos, imágenes de fondo, controles de navegación, etc. Hoy día, casi todo el software de autor de creación multimedia soporta el uso de plantillas.

Equilibrio

Esta propiedad busca el óptimo aprovechamiento del espacio a través de una correcta composición y distribución de los elementos, de manera simétrica o asimétrica, sin que existan grandes espacios vacíos, ni zonas de poco interés, validez didáctica o informativa, que afecten a la funcionalidad del conjunto. Hay que tener en cuenta que normalmente el “espectador” o usuario, visualiza instintivamente los contenidos de izquierda a derecha y de arriba abajo.

Existen múltiples teorías sobre la distribución y equilibrio de las formas aplicables al diseño de interfaces multimedia, como por ejemplo la proporción aurea.

Acotamiento de las áreas de contenido de una página web multimedia, donde se ha usado en el diseño previo el concepto de proporción aurea para limitarlas.

Sabía que...

La proporción aurea, también es conocida como la divina proporción o la proporción armoniosa que existe en muchas figuras geométricas, en la anatomía y en naturaleza. Se conoce desde hace más de 2.000 años y fue considerada por los griegos como la perfecta relación matemática.

Retroalimentación

Es un concepto que se usa habitualmente en múltiples condiciones y que normalmente tiene la característica de no ser directamente detectado e influir en el aprendizaje y/o la experiencia. Podemos poner de ejemplo, la afinación de un instrumento musical o el manejo del volante de un coche.

Entre la aplicación multimedia y el usuario se produce una retroalimentación, ya que es una comunicación bidireccional que ofrece unos estímulos informativos de cómo debe usarse, dependiendo de las acciones del usuario (interactividad) –en la mayoría de las ocasiones sin una formación previa sobre la misma–.

Temporización

El tiempo debe ser considerado como un recurso funcional más, pues las acciones que el usuario efectúa de manera interactiva consumen siempre un determinado tiempo. Por ejemplo, el paso de una pantalla a otra, la aparición de una ventana de ayuda, la apertura y el cierre del programa, la reproducción de un vídeo, la visualización de una determinada imagen, etc.

Hay que calcular y programar el tiempo justo de cada cosa, evitando que el usuario pierda la atención. Nunca alargar algo más de la cuenta, por motivos estéticos. Si algo va a tardar un tiempo, mostrar en lo posible un contador o reloj de arena, que vaya indicando el tiempo transcurrido durante el proceso y el tiempo que queda para terminar.

Nota

Es relativamente fácil alargar el tiempo cuando se diseña una aplicación multimedia, pero a veces es muy complicado acortar el tiempo que tarda un determinado proceso en ocurrir.

Temas

Hay aplicaciones multimedia donde la funcionalidad de la interfaz se basa en características propias de un determinado tema. Por ejemplo, en una aplicación de cuentos animados para niños, el estilo de la interface es infantil, con colores suaves, personajes de dibujos, tipografía divertida y colorista, etc. Hay que intentar evitar que la implementación del tema no perjudiquen el uso racional de la interfaz y esta conserve las características que se están explicando en este capítulo.

Actividades

9. ¿Puede dar un ejemplo de retroalimentación en una aplicación multimedia?

10. Si hay que repartir la visualización de 10 imágenes durante un minuto, ¿qué característica de diseño hay que tener en cuenta? Si las imágenes no pueden aparecer durante más de 5 segundos, ¿qué solución se le ocurre para mantener el minuto?

Consejos relacionados con el diseño de interfaces

Puesto que un mal diseño de los bocetos previos pueden influir en la dificultad posterior para integrar los aspectos funcionales de los mismos, es necesario tener en cuenta algunos consejos. Cuando se desea captar la atención del usuario de una aplicación multimedia que no olvidemos es también espectador de la misma, hay que tener en cuenta que este sigue unos hábitos de percepción normalmente comunes.

Ve primero aquellos elementos situados en primer plano que los situados detrás en el fondo; mira primero las imágenes y sobre todo las animaciones, que el texto; los objetos que están en la parte superior que los que están abajo, aunque principalmente aquellos que están en la parte central de la pantalla. Hay un alto contenido psicológico en estos detalles.

La elección de los colores y de su contraste debe permitir una correcta visualización de los elementos. Nunca usar combinaciones de colores imposibles, como el texto de color morado sobre un fondo negro, o texto de color amarillo sobre un fondo blanco.

No abusar de los tipos de letras complejos o pasados de moda (letras góticas) ni de los efectos de texto como bisel, relieve, excesivos sombreados, deformación del texto, etc. Usar todas las características y propiedades tipográficas del texto, para construir los distintos esquemas del mismo a la hora de mostrar la información textual.

La tipografía debe ser estudiada con cuidado, y lo primero que hay que hacer es elegir un tipo de letra o fuente que se encuentre comúnmente en los sistemas informáticos, como ocurre con las familias Arial, Verdana, Tahoma, Times New Roman, etc. En caso contrario es posible que el usuario no visualice la fuente correctamente al ser esta sustituida por otra, si no está en su sistema.

A la izquierda ejemplo de textos con una incorrecta selección de colores, lo que dificulta su lectura. A la derecha ejemplo de textos sobrecargados de efectos.

Definición

Fuente

También se denomina fuente tipográfica y corresponde a cada uno de los archivos informáticos que definen el tipo de letra como un conjunto de caracteres, letras, números y caracteres especiales, de un determinado diseño, que pueden usarse en el sistema.

Usar tipos de letra y tamaños claros. Estilos como la negrita y la cursiva dan expresividad al texto y sirven para romper la monotonía del mismo. Las mayúsculas han de ser correctamente usadas, pues en el texto normal añaden monotonía y restan claridad.

Conviene definir con exactitud un estilo coherente entre los títulos, subtítulos, texto, apartados, notas, etc., de manera que el usuario no perciba un cúmulo desordenado y aleatorio de estilos. Evitar los “pegotes” de texto. Podemos usar áreas rectangulares o marcos para resaltar un determinado texto, de manera elegante.

Comparación del mismo texto formateado elegantemente en la imagen de la izquierda y sin formato y en mayúsculas en la imagen de la derecha.

Características de Accesibilidad

Una de las principales reglas de la accesibilidad es permitir que una determinada información pueda ser utilizada por el mayor número de personas, independientemente de sus capacidades y esto es aplicable también al diseño multimedia.

Sabía que...

El Real Decreto 1494/2007, de 12 de noviembre, aprueba el Reglamento sobre las condiciones básicas para el acceso de las personas con discapacidad a las tecnologías, productos y servicios relacionados con la sociedad de la información y medios de comunicación social.

La integración de la funcionalidad e interactividad de los elementos que forman parte de la interfaz, presenta una dificultad añadida en los medios animados y sonoros, principalmente para aquellas personas con algún tipo de discapacidad.

En cuanto a los vídeos o animaciones, se recomienda tener la posibilidad de mostrarlos con un formato de reproducción alternativo al que se use, el cual debería ser el más genérico o común, y de acompañarlos de una transcripción opcional de los diálogos, tanto a nivel de texto (subtítulos) como de sonido.

Lo mismo cabe decir de las secuencias de sonido, que se muestren con la opción de ser subtituladas o traducidas a lengua de signos, para aquellas personas con discapacidad auditiva.

Hay que ofrecer la posibilidad de que un usuario con discapacidad visual pueda tener una descripción auditiva de las imágenes que aparezcan en la aplicación. Los textos deben ser claros y prescindir de cualquier artificio de estilo en los mismos que reste legibilidad.

Deben proporcionarse métodos alternativos de manejo de la aplicación desde el teclado, estableciendo un orden lógico de tabulación de los elementos principales, controles de reproducción, botones de navegación, etc.

Se recomienda usar en lo posible elementos y medios que puedan descargarse lo antes posible.

Características de usabilidad

En el desarrollo de interfaces multimedia, el término usabilidad se refiere a poder alcanzar un equilibrio entre la claridad, la eficiencia y un buen diseño: correcto y estéticamente elegante. Para ello, hay que emplear técnicas y conocimientos, algunos de los cuales se basan en la percepción humana.

Definición

Usabilidad

La Organización Internacional para la Estandarización (ISO) ofrece dos definiciones de usabilidad:

1 ISO/IEC 9126: “La usabilidad se refiere a la capacidad de un software de ser comprendido, aprendido, usado y ser atractivo para el usuario, en condiciones específicas de uso”.

2 ISO/IEC 9241: “Usabilidad es la eficacia, eficiencia y satisfacción con la que un producto permite alcanzar objetivos específicos a usuarios específicos en un contexto de uso específico”.

La usabilidad, o facilidad para utilizar y aprender a manejar una aplicación, se consigue diseñando interfaces sencillos, que requieran poco esfuerzo de uso por parte de los usuarios y estos obtengan resultados eficaces.

De una manera genérica, la usabilidad se consigue diseñando interfaces que cumplan, entre otras, algunas de estas propiedades:

1 Los contenidos se cargan y reproducen rápidamente.

2 Los contenidos y el sistema de navegación están organizados correcta y eficientemente.

3 Los elementos más importantes captan la atención de los usuarios.

4 La aplicación no tiene errores y es fácil de aprender.

5 Los elementos se distribuyan de manera inteligente.

6 Los textos sean claros y concisos.

7 Los medios –imágenes, vídeos, sonidos– tienen un mínimo de calidad.

Esquema que representa el concepto de usabilidad

Recuerde

Una interfaz debe ser atractiva y llamar la atención por su elegancia, sencillez y coherencia. Su utilización ha de pasar desapercibida para el usuario que tendrá el control de la misma, siendo ésta accesible y usable.

Actividades

11. ¿Qué se puede hacer al diseñar una aplicación multimedia para que no aparezcan barras de desplazamiento en la misma?

12. Escriba al menos tres características que debe cumplir un sistema multimedia “usable”.

Aplicación práctica sobre el análisis de errores funcionales y de diseño

Del departamento de diseño nos llegan los bocetos previos de cuatro pantallas, denominadas A, B, C y D, que muestran una interfaz multimedia. Siendo A, la pantalla inicial y B, C y D, pantallas de contenido que son accesibles desde A, comenté lo más detalladamente posible qué características de las enunciadas anteriormente fallan y cuál sería la solución, si:

1 La pantalla A, muestra en la zona central cuatro reproductores de vídeo idénticos en los que se muestran fotogramas de distintas películas. A la derecha de cada reproductor hay al menos cuatro imágenes cuadrada que también representan fotogramas de dichas películas –sirven de enlaces-.

2 La pantalla A, muestra los botones de navegación a la izquierda, pero al acceder a la pantalla B, estos botones aparecen distribuidos con un espacio diferente, notándose un pequeño salto. Además los botones tienen el fondo azul oscuro, y el fondo de la aplicación es gris oscuro.

3 Las pantallas B, C y D, muestran un contenido continuo, pero no podemos navegar entre ellas, hay que volver a la pantalla inicial A, y además se produce un fundido a blanco entre las pantallas muy lento.

4 La pantalla D, tiene un botón para volver a la pantalla inicial A y otro para volver al inicio, cuya acción es también volver a la pantalla A, pero con la diferencia de mostrar una pequeña ventana donde se pregunta al usuario si está realmente seguro de volver a A.

SOLUCIÓN

1 Problema de sencillez y equilibrio, que deriva en una saturación de datos y en una mayor complejidad a la hora de implementar las funciones de reproducción. ¿Qué ocurre cuando mientras se está reproduciendo uno de los vídeos, se desea reproducir otro, sin detener el anterior? El diseño no es nada elegante, y las imágenes a la derecha de cada reproductor añaden confusión y complejidad. La solución es situar en el centro de la interfaz un solo reproductor, y a su derecha un selector de vídeos o imágenes representativas de los mismos.

2 El “salto” que se produce al ver una distinta distribución de los botones cuando se pasa de una pantalla a otra, por pequeño que sea, es un problema de coherencia y resta profesionalidad al trabajo. La solución es crear las pantallas a partir de una plantilla, con lo cual conservaran unos elementos fijos, como los botones en este caso. Otro problema de coherencia en el estilo es el color de los botones al no contrastar lo suficiente con el fondo.

3 Es un problema de temporización pues se tarda menos en poder pasar a la pantalla B desde la A, o a la A desde la B, sin tener que acceder previamente a la pantalla inicial. Se soluciona integrando botones de navegación para ir de la pantalla A a la B, de la B a la C y así sucesivamente y en el sentido contrario. El fundido a blanco entre las pantallas es otro problema de temporización, pues hace perder al usuario un tiempo innecesario, ha de ser más rápido. Que sea fundido a blanco, cuando el fondo de la aplicación es oscuro es un problema de coherencia en el diseño.

4 Es un problema de retroalimentación y temporización. Es una pérdida de tiempo para el usuario y le causará dudas. Lo normal es pasar de la pantalla D a la principal cuando se pulse el botón de navegación correspondiente, sin que deba aparecer una ventana de confirmación. En este caso no tiene sentido.

Aplicación práctica sobre el análisis de un mal diseño

Recibimos del departamento de diseño el diseño final de la interface, para la realización de un proyecto multimedia encargado por una empresa que comercializa piensos y alimentos concentrados para animales.

Muestra del diseño sobre el que se realiza esta actividad.

Comente los aspectos generales que hacen de este un mal diseño.

Delimite con rectángulos los principales elementos que aparecen en el boceto, su funcionalidad y los errores más importantes por los que se descarta este trabajo.

SOLUCIÓN

Lo primero que llama la atención es la falta de profesionalidad en el diseño. La distribución no es adecuada, pues hay muchos espacios vacíos y algunos elementos como el logotipo ocupan mucho espacio, mientras que otros, como el reproductor de imágenes o vídeos, ocupan muy poco y no se colocan en la mejor posición.

Los distintos elementos no aparecen conectados “visualmente” y la estética usada es muy pobre. Se emplea un tema, o metáfora de interfaz basada en la idea de lo agrícola y rural, pero está muy poco trabajada y no atrae, por lo que el usuario no se verá motivado para usar la aplicación.

El fondo celeste y sin ninguna textura elimina cualquier integración con el resto de elementos (los objetos de madera, que usados como contenedores, tienen una textura artificial muy poco acertada). Los pocos iconos que aparecen, en la parte inferior, no tienen ninguna funcionalidad o al menos, en el diseño no se observa. Están mal distribuidos y mal colocados.

Por último, la tipografía empleada es uno de los peores aciertos del diseño, pues su funcionalidad queda limitada por la elección de los colores. Combinaciones nada adecuadas como letras rojas o negras sobre fondo marrón restan claridad y por tanto legibilidad, y provocará el rechazo por parte de los usuarios.

Delimitación de las áreas funcionales principales

La funcionalidad de los principales elementos que se usan en la interfaz –enmarcados con un rectángulo rojo en la imagen anterior- junto con sus errores de diseño es la siguiente:

1 Menú de navegación principal. Será fijo en todas las pantallas, por lo que no debe modificarse su tamaño ni su estilo. El cambio de color cuando el puntero se sitúa encima no es suficiente, y el color amarillo es poco gratificante visualmente, al igual que el tipo de letra anticuada.

2 Selector. Es un control de tipo lista cuya función es seleccionar el animal del cual se muestra información. El color de fondo del selector se confunde con el objeto imitación de madera.

3 Marco. Sirve para agrupar el texto “Programas de alimentación”. Aparte del mal diseño comentado anteriormente, no queda claro si el tamaño del marco es mayor o menor que el texto que debe mostrar, o si ofrece barras de desplazamiento.

4 Marco de fotos o vídeos. Es el contenedor del reproductor de fotos o vídeos. Su tamaño es pequeño en relación a todo el espacio desaprovechado en la interfaz, y su posición, lejos del foco de atención principal del usuario, no es adecuada.

5 Menú de navegación secundario. Es el menú interactivo de la zona 6 y cabe decir lo mismo que lo comentado en el punto 1.

6 Marco. Zona que tiene como función informar sobre determinadas características de los productos. La combinación de fondo verde y texto negro es muy negativa. Su tamaño hace pensar que sobrará espacio horizontal y probablemente faltará espacio vertical, por lo que será necesario el uso de barras de desplazamiento.

7 Imagen. Representa el logotipo de la empresa, de exagerado tamaño, lo cual rompe desde el principio la distribución.

8 Texto. Muy desacertada la posición y el tamaño del texto.