Criterios generales

Además de algunos criterios específicos organizados en este caso según cada una de las tareas críticas de la fase de diseño de la interacción, deberemos tener en cuenta algunos criterios generales que afectan principalmente a la interacción, pero también a la presentación y a la información de un producto.

Entre la convención y la innovación

Ante todo, el diseño del producto debe ser simple, coherente e intuitivo. Se trata de una de las máximas del diseño multimedia. Para crear un entorno fácil y claro que haga sentir cómodo al usuario, deberemos sumergirnos en lo que el usuario conoce y le es cotidiano. Es por ello importante conocer y aplicar las convenciones de diseño utilizadas en la mayoría de programas.

Por ejemplo, hemos aprendido que cuando en una pantalla aparece un cuadro de texto con un icono a la derecha que contiene una flecha negra señalando hacia abajo, al hacer clic sobre ésta se despliega una lista con distintas opciones. Utilizar este mismo proceso para otro fin sería repensar y reutilizar una convención de diseño muy extendida.

Ahora bien, la sorpresa y la novedad atraen el interés del usuario. Un gusano que sale de la manzana para felicitarnos al resolver correctamente una actividad es simplemente un ejemplo, en este caso un refuerzo positivo ante un trabajo bien hecho.

Además, en el proceso de diseño, el diseñador quiere reflejar su sello distintivo. La creatividad y la originalidad deben estar también presentes en el diseño, siempre que sean tratadas con mesura y estén supeditadas a la comprensión del diseño propuesto: si preparamos una pantalla artística que nuestros usuarios no puedan entender, no conseguiremos transmitir el mensaje.

A continuación se muestran cuatro capturas de pantalla que reflejan la innovación en la interacción. Como podemos comprobar, la innovación en la interacción tiene mucho que ver con el diseño gráfico y el concepto desarrollado.

Usabilidad

Diseñar teniendo en cuenta la usabilidad de un producto es diseñar siendo consciente de la simplicidad y facilidad de comprensión en el uso del mismo. Es un concepto que parte de la idea de «utilizable», porque la base en el diseño de un producto es siempre atender al usuario, pensar en el destinatario final, crear a partir de las necesidades del público potencial de nuestro programa multimedia.

La usabilidad como concepto no tiene un significado común en el ámbito de los expertos en diseño multimedia; se trata en realidad de una idea totalmente subjetiva y que depende de cada material multimedia, pero especialmente de cada usuario. Poco a poco deja de hablarse de «usabilidad» para empezar a hablar de «experiencia del usuario» ante un programa multimedia o una web.

La usabilidad es un concepto que se aplica a todo el proceso de diseño y que repercute tanto en el diseño de la información como en el de la interacción y el de la presentación.

En cuanto al diseño de pantalla, existen tres ideas claves que deben tenerse en cuenta para poder acercar nuestro diseño al usuario:

• El diseño de la interfaz (UI, User Interface), es decir, la forma como se diseña una pantalla, dónde, cómo y cuándo se colocan todos los elementos y qué elementos son.

• La interacción entre el usuario y el ordenador (HCI, Human Computer Interaction), eso es, la forma en que el usuario se mueve e interactúa con nuestro programa multimedia, las posibilidades que se le brindan, el nivel de interactividad, cómo va a desplazarse por el programa, a qué tiene acceso, etc.

• El diseño grafico de la interfaz, (GUI, Graphical User Interface), como la creación de estilos gráficos para todo el entorno y cada pantalla, uso del color, del espacio, forma, tipos de letras, etc.

La usabilidad hace referencia a las experiencias de los usuarios con las pantallas. En los últimos años se están considerando las necesidades de todos los usuarios como base para valorar la usabilidad de una pantalla. Surge lo que se denomina accesibilidad.

Las medidas a considerar a la hora de producir una web para hacer que ésta sea más accesible se centran fundamentalmente en:

• proporcionar contenidos alternativos que puedan suplir los contenidos audiovisuales que se presenten en el producto (etiquetas alternativas, versiones de las páginas en textos, locuciones que lean los textos de la pantalla, etc.);

• asegurarse de que la información puede ser igualmente comprendida sin necesidad del color;

• proporcionar información que oriente a los usuarios, como nombrar los marcos utilizando una nomenclatura comprensible.

Coherencia conceptual y mecánica

El diseño debe facilitar el proceso de percepción de la mente humana. La mente humana busca patrones en la percepción de la realidad: analiza, categoriza y combina los elementos buscando una unidad en la que pueda integrar las partes que percibe.

La coherencia asegura una unidad entre los diferentes elementos de una pantalla, hasta tal punto que la combinación de los elementos permite crear un todo con sentido, con la finalidad de que un producto siga una misma línea.

El mantenimiento de la coherencia tiene también implicaciones directas en la usabilidad: permite orientar al usuario, le ayuda a moverse en un entorno seguro y coherente donde cada elemento es lo que parece ser y, a la vez, asegura un espacio agradable estéticamente.

Vamos a analizar la coherencia visual y conceptual de las pantallas siguientes:

	En este ejemplo se muestra una pantalla donde la coherencia entre los elementos crea la sensación de un solo espacio que tiene sentido. El fondo, los espacios, las imágenes, los textos, se han diseñado a partir de una gama de un solo color, lo que da coherencia a toda la pantalla. El estilo de letra se ha escogido a partir del tema de la música, la imagen del grupo y la disposición de cada elemento.
	En esta web, la coherencia de la pantalla se consigue combinando los colores, y, especialmente en este caso, el estilo gráfico de los elementos. Además, crea la sensación de unidad, de que tenemos delante un solo objeto, una pestaña o un folleto que nos muestra las opciones que podemos escoger. El efecto se consigue gracias a la línea naranja desigual que rodea los contenidos.
	La coherencia en este ejemplo tiene mucho que ver con el estilo y el diseño. Aunque no supiéramos leer el texto, ninguno de nosotros dudaría que se trata de una pantalla de un programa sobre cuentos de hadas. El dibujo, el estilo de texto, el color suave nos dice mucho de lo que vamos a encontrar en su interior.
	Página web de un colectivo de coordinadoras de entidades en el que la organización de los contenidos no está muy clara; hay divergencias notables entre los colores y las distintas páginas.

Actividad

Analizad el diseño de los siguientes sitios web:
http://www.u2.com
http://www.lucianopavarotti.com

Pensad en las principales ventajas e inconvenientes de cada uno, fijaros especialmente en los siguientes aspectos:

• Secciones y contenidos
• Navegación
• Interactividad
• Coherencia
• ¿Satisfacen las necesidades de sus respectivos públicos?
• ¿Qué mejoraríais?

Discutid vuestras conclusiones en el espacio de debate.

Metáforas

Una metáfora es un entorno significativo o un objeto relevante que se utiliza para organizar la información de la pantalla con el fin de sugerir una comparación y facilitar la comprensión del entorno y la navegación.

Las metáforas ayudan a dar coherencia al entorno multimedia y a los contenidos que se presentan, porque implica organizarlos todos a partir de un mismo escenario que, además, obliga a unificar los estilos e integrar las imágenes.

Suelen utilizarse metáforas en las pantallas principales de muchos productos multimedia, porque son el espacio de entrada a partir del cual se orienta el usuario. No obstante, la metáfora visual puede mantenerse a lo largo de todo el entorno multimedia, asegurando así un conjunto coherente.

Por ejemplo, una metáfora muy utilizada en la creación de pantallas es la idea de un libro: pasar página para pasar de pantalla, ir a un índice donde visualizar todos los contenidos del producto, organizar el contenido por temas o capítulos, marcar un texto, subrayarlo, establecer espacios diferenciados para textos e imágenes, numerar pantallas, etc.

Asimismo, una metáfora muy utilizada en los sistemas operativos es la del escritorio, donde todo se organiza en documentos, carpetas y clasificadores (carpetas dentro de carpetas) y donde hay una papelera para tirar los documentos.

Pueden usarse otras muchas metáforas diferentes: un mapa, una ciudad, una habitación, un aula, etc.

Las metáforas deben ser claras y significativas. Para no ser recurrentes, los diseñadores buscan metáforas originales, pero es preferible no utilizarlas si su uso no consigue orientar inequívocamente al usuario.

	Las metáforas ayudan a centrar el tema a tratar y, de forma muy especial, simplifican la navegación y facilitan la organización mental del usuario, que sabe cómo y por dónde moverse a partir de la imagen visual presentada.

En las pantallas siguientes veremos algunos ejemplos de metáforas de elementos reales y cotidianos que facilitan la organización de productos multimedia.

En este ejemplo, un grupo de maestros ha diseñado, a partir de una metáfora basada en la realidad escolar, un entorno para mostrar los vídeos que han grabado con sus alumnos. Todo el entorno se conforma en diferentes metáforas. En este ejemplo, la idea de una proyección de diapositivas en el aula acaba convirtiendo cada diapositiva en una colección de imágenes reales montadas como vídeos para enseñar a los usuarios experiencias de innovación en la escuela. Cada pantalla mantiene la idea de la metáfora ideada en su inicio.

En esta página web se utiliza la metáfora de una ciudad para facilitar la navegación entre los distintos apartados.

Para la navegación

Para conseguir un buen diseño de la navegación deberemos minimizar:

• el viaje: se debe crear el camino más corto entre dos puntos del producto;

• la profundidad: se debe establecer una jerarquía con el menor número posible de niveles (cuantos más niveles, más pasos intermedios);

• la redundancia: evitemos crear formas paralelas de acceder al mismo lugar desde una misma pantalla, puesto que crea confusión en cuanto al camino a elegir.

Un buen sistema de navegación:

• Es intuitivo, es decir, no necesita ser explicado y se comporta como la gente espera.

• Es claro en los apartados, es decir, mantiene:

  • una estructura sencilla que permite una movilidad cómoda entre las pantallas;

  • la lógica en la organización de los contenidos.

• Facilita la búsqueda, destacando lo novedoso y lo que resulta más atractivo e interesante al perfil destinatario.

• No es aleatorio, es decir, da libertad al usuario (interactividad) sin crear confusión (aleatoriedad).

• Orienta a los usuarios:

  • Porque dispone de elementos que permiten saber en cada momento:

    • dónde está (en qué nivel de profundidad de la información se encuentra);

    • qué ha visitado;

    • qué le queda por visitar, es decir, qué contenidos o pantallas están relacionados.

  • Mediante mapas de imágenes o metáforas conocidas que expresen elocuentemente lo que quieren significar.

• No requiere que el usuario consulte el mapa de la web.

Uno de los mitos del diseño multimedia es que si un producto necesita presentar un mapa de los contenidos para que el usuario pueda encontrar una pantalla es que la navegación está mal presentada o mal diseñada. Esta idea es algo exagerada, pero sí refleja la importancia que adquiere para el usuario el hecho de moverse con facilidad por un entorno, ya sea una web, un CD-ROM o un DVD interactivo.

Para la disposición de los elementos en las pantallas

La distribución de los diferentes elementos en una pantalla depende especialmente de la intención de la propia pantalla. No es lo mismo diseñar un portal que contenga toda la información posible, un producto con una pantalla principal que dé paso a cinco apartados diferentes, un programa multimedia que deba transmitir información para ser aprendida, o la pantalla de un glosario que es funcional y directa.

En general, debemos considerar que:

• Para el uso exclusivo en ordenadores, la zona de visualización de un documento es de hasta 595 píxeles de ancho por 295 de alto. Para las versiones impresas no debe superar los 535 píxeles por 295 de alto.

• La funcionalidad, la facilidad y la velocidad de navegación mejoran si se aplica el mismo sistema reticular a todo el producto o web.

• La ubicación de los elementos debe de mantener la coherencia en todas las pantallas.

• La utilización de marcos es una buena idea para mostrar toda la información de golpe y dar unidad a la navegación. Sin embargo, ofrecen algunos inconvenientes como la dificultad de impresión, la dificultad para dar a un tercero la URL específica (los enlaces siempre conducen al estado por defecto de la página de composición de los marcos) y la dificultad que tienen los motores de búsqueda para incluir uno u otro documento en los índices de la base de datos.

En cuanto a la ubicación de las barras de navegación, debemos considerar que si diseñamos para la población occidental:

• Lo habitual es colocarlas a la izquierda de la pantalla porque:

  • en Occidente leemos de izquierda a derecha;

  • se garantiza que esta barra de navegación no quedará cortada cuando se redimensione la pantalla.

  

• Su disposición en la parte inferior de la pantalla sorprende y deja mucho espacio disponible para el resto de elementos, que deben preverse pequeños para no recargar la página.

  

• Su disposición en el centro es interesante cuando el contenido a mostrar está constituido principalmente por imágenes o textos breves. Presenta un inconveniente: afecta a la estructura general del sitio web para las páginas de segundo nivel. Las barras de navegación situadas en el centro y ocupando el ancho de toda la pantalla sólo son recomendables para pantallas iniciales.

• Cuando se requieren dos barras de navegación (más de dos no es recomendable porque desconcierta al usuario), se aconseja disponerlas una verticalmente y la otra horizontalmente en la parte superior:

  • Una debe ofrecer información estructural y destacar más que la otra.

  • La segunda debe ofrecer información detallada y destacar menos que la primera.

  
  
  

• El espacio de pantalla destinado a las barras de navegación no debería superar el 20% del total.

• Se recomienda mantener en los márgenes los botones de navegación, los apartados secundarios, los menús, los enlaces, etc.

• Se desaconseja totalmente modificar la ubicación de las barras de navegación en distintas pantallas según el nivel de la jerarquía en que se sitúen.

El espacio destinado a los contenidos también debe diseñarse teniendo en cuenta algunos criterios:

• Debemos pensar en el conjunto del producto cuando diseñemos la disposición de los elementos en las pantallas. Todos los elementos (textos, imágenes, vídeos, sonido, botones, menús, etc.) deben funcionar como un sistema unificado.

  • Cada elemento desempeña un papel en la pantalla que debe establecerse en el momento de decidir su ubicación final. Así, una imagen con una función ilustrativa no debería presidir una pantalla; lo contrario ocurre con una imagen explicativa.

  • Cada elemento mantiene una relación mecánica o conceptual con los demás elementos, que también debe preverse en la ubicación. Por ejemplo, una imagen que aparece al hacer clic en un titular no debe estar lejos de la palabra activa.

• Disponer en el centro superior de la pantalla el contenido que queremos que destaque.

  • Eliminar la información que no sea relevante.

  • No recargar las pantallas con información irrelevante ayuda a orientar la atención del usuario.

  • Considerad la importancia del espacio en blanco: separa conceptos y clarifica espacios.

  • Cuanto más grande es un elemento, más importante lo consideramos.

  • Los elementos de encima priman jerárquicamente sobre los de debajo.

En las pantallas siguientes veremos algunos ejemplos de metáforas de elementos reales y cotidianos que facilitan la organización de productos multimedia.



A pesar de que una de las características más relevantes de los portales es la cantidad de información presentada en una sola pantalla, se trata de espacios diseñados de tal modo que todas las secciones sean visibles y accesibles. En los laterales se mantienen las áreas, temas, herramientas de búsqueda y de comunicación, etc.; en el espacio central se encuentra la información más relevante del día.

Si un usuario navega sin una finalidad concreta, es poco probable que lea más de tres o cuatro ideas; si está buscando información se fijará en los menús de temas; si se trata de un visitante habitual, se dirigirá directamente a su espacio de interés.



Este ejemplo muestra una pantalla inicial que no presenta mucha información, sino simplemente un índice del programa para que el usuario escoja la información que desea ver.

Esta pantalla centra el tema mediante la imagen y el estilo, y orienta al usuario sobre el contenido del programa.

La información relevante (en este caso el menú) se presenta en el espacio central. La imagen referente y los títulos quedan en los márgenes laterales y superiores.



Este es el ejemplo de una pantalla secundaria, cuyo esquema posiblemente se repetirá idénticamente en todas las pantallas que conforme el producto.

El usuario se podrá mover entre los apartados mediante el menú superior, y entre los diferentes subtemas en el menú lateral.

Los títulos siempre están en el mismo espacio lateral; los botones de desplazamiento se sitúan en el mismo lugar inferior en cada pantalla; por último, en el centro se dispone de un espacio para mostrar la información que interesa destacar.

Para el diseño de los controles

Una de las ideas que debemos tener clara al diseñar nuestra pantalla es el concepto del «control».

Es tarea del diseñador decidir cómo se moverá el usuario entre el programa, qué controlará y de qué manera lo hará. Por ello, cuando diseñamos nuestras pantallas debemos pensar si dejaremos que el usuario se mueva libremente entre los elementos o si el programa es quien tendrá el control del usuario limitando las opciones que éste puede tomar.

Por ejemplo, permitir que el usuario acceda a cualquier tema o permitirle que acceda sólo al primer tema y, cuando termine, pueda acceder al segundo (y así sucesivamente) es una de las ideas que deberemos decidir.

• Pensad cuánta interacción es necesaria:

  • Control de velocidad de visualización.

  • Control de la secuencia.

  • Control de los medios insertados.

  • Control de variables.

  • Control de transacciones.

  • Control de objetos.

  • Control de la simulación.

• Los controles deben ser visualmente activos: antes de hacer clic, los usuarios deben saber que una palabra es activa (o un botón o una zona). Existen numerosas formas de marcar zonas activas: con colores, con la función roll over (al pasar por encima de una zona activa, ésta cambia o se mueve), etc.

En esta página, además de encontrar un menú en el centro del espacio, todas las opciones tienen un efecto roll over peculiar.

• Los controles no deben ser contradictorios, deben dar respuestas inequívocas a las expectativas de los usuarios:

  

  ---

  Por ejemplo, si el botón tiene forma de impresora, el usuario espera que al hacer clic aparezca el menú de impresión o la impresora funcione. Si, por el contrario, el botón remite a un documento de texto, nos encontramos ante un problema de diseño.

  ---

  • Deben responder a los referentes culturales del usuario, para lo cual es recurrente utilizar iconografía internacional.

• Los controles no deben ser excesivos ni redundantes:

  • No es recomendable utilizar un control para hacer controlar al usuario elementos que el sistema puede hacer autónomamente, como poner en marcha el único vídeo de la página.

• Los controles deben reaccionar rápidamente. Si no es así, un usuario puede pensar que se ha equivocado, que la zona no es activa o que existe algún error.

• Los menús desplegables muestran los subapartados de un nivel, ahorran mucho espacio en la pantalla y ofrecen una visión rápida de los apartados del producto.

Estas dos pantallas tienen dos objetivos muy diferentes, son estilos diferentes también. ¿Imagináis qué habrá detrás de cada botón de estas pantallas? ¿En qué casos hay unanimidad? ¿En qué casos hay disparidades?

Para la asignación de contenido

• Evitad la acumulación de información.

• Es importante decidir cuidadosamente los niveles de acceso a la información:

  • Un tema nuevo puede requerir un lugar nuevo.

  • Más información sobre un mismo tema ha de implicar un sutil cambio de lugar.

• Enlaces cortos: nunca más de 4 palabras:

  • Enlazamos para saber más sobre un concepto, no sobre varios a la vez.

  • No usar expresiones como «clic aquí» en el texto de una web. En su lugar, redactad el texto para el que propio significado haga que el usuario intuya que se le está invitando a seleccionar un enlace o una función determinados.

• Siempre que sea posible, es recomendable evitar el scroll vertical en las páginas:

  • Para ello se deben diseñar nodos de información cortos...

  • utilizando cuando sea posible las listas de contenido, más que los párrafos;

  • utilizando esquemas visuales antes que párrafos;

  • añadiendo vínculos directos entre temas;

  • utilizando los vínculos externos si es necesario.

• Si escribes textos:

  • estructúralos en 2 o 3 niveles (título, subtítulo, párrafos);

  • expresa una idea por párrafo;

  • no escribas de más... ni de menos;

  • presenta primero las conclusiones del párrafo;

  • si se trata de textos largos, añade al principio un resumen o un sumario.