T4. ESTRUCTURA DE LOS CONTENIDOS MULTIMEDIA

Table of Contents

t4-mapa.jpg
MAPA CONCEPTUAL T4. Estructura de los contenidos multimedia


1. Arquitectura de la Información

1.1. Concepto y definición

El concepto de Arquitectura de la Información posee numerosas definiciones que se orientan en uno u otro sentido en función de dos aspectos:
  • cuál sea la aproximación disciplinar desde la que se hace (diseño gráfico, biblioteconomía y documentación, ingenieros informáticos, comunicadores…)
  • cuál sea la dimensión (soporte, medio…) a partir del cual interesa su conocimiento (para nosotros tiene valor la AI desde la dimensión de los productos de comunicación multimedia, pero es evidente que conceptual y disciplinarmente está presente en cualquier sistema que organiza información, independientemente del medio, canal y sustancias expresivas que utilice para ello)

t3-ai-gertrudix.png
ESQUEMA GENERAL DE LA ARQUITECTURA DE LA INFORMACIÓN. Fuente: Manuel Gértrudix

Para Sotillos Sáenz (2002: 32) una de las causas de esta indefinición tiene que ver, entre otras cuestiones, con el hecho de que se trata “de definir a un mismo tiempo la disciplina (arquitectura de la información) con las tareas que pueden llegar a realizar sus practicantes (los arquitectos de información), y realizar una primera aproximación señalando que
La arquitectura de la información se interesa por estructurar grandes y pequeñas cantidades de información de forma que su destinatario pueda trabajar con ellas adecuada y satisfactoriamente (op.cit: 32)

La arquitectura de la Información (AI) es la disciplina y arte encargada del estudio, análisis, organización, disposición y estructuración de la información en espacios de información, y de la selección y presentación de los datos en los sistemas de información interactivos y no interactivos.
En relación con la World Wide Web, elInformation Architecture Institute define la Arquitectura de la Información como:
  • 1. El diseño estructural en entornos de información compartida.
  • 2. El arte y la ciencia de organizar y rotular sitios web, intranets, comunidades en línea y software para promover la usabilidad y la ubicabilidad (la característica de ser encontrado a través de las búsquedas en Internet).
  • 3. Una comunidad emergente orientada a aplicar al entorno digital los principios del diseño y la arquitectura.

Uno de los libros más importantes editados en España sobre esta materia, la Arquitectura de la Información, es el llamado "Arquitectura de la Información en Entornos Web" del autor Mario Pérez-Montoro Gutiérrez que editó la editorial Trea en 2010. En dicho libro, el autor nos introduce en el complejo mundo del entorno web y la AI y define el término así: "L
a arquitectura de la información, partiendo de los sólidos principios clásicos de la ciencia de la información tradicional (principalmente, de la disciplina de la organización y la representación del conocimiento), nace hacia finales de los años noventa. En un sentido técnico, se trata de una disciplina (y, a la vez, una comunidad de práctica) centrada en los principios del diseño y la arquitectura de espacios digitales de forma que cumplan criterios de usabilidad y recuperación. O, dicho en otros términos, se trata de una disciplina que se encarga de estructurar, organizar y etiquetar los elementos que conforman los entornos informacionales para facilitar la localización y recuperación de la información que contienen y mejorar, así, su utilidad y aprovechamiento por parte de sus usuarios." (Mario Pérez-Montoro, 2010)




El Arquitecto de Información

Es la persona encargada de llevar a cabo y verificar el proceso de diseño del sitio; además, trabaja estrechamente con los diseñadores gráficos y los responsables del la parte de procesamiento y lógica (back-end) para definirla. Está integrado en un equipo y sus tareas abarcan desde la fundamentación del proyecto hasta el rediseño, verificación y testado del producto durante todas las fases de desarrollo hasta la obtención del resultado final.Estos avances en telecomunicaciones, ciencia, y tecnología en general han producido una cantidad ingente de conocimiento, de nuevos conceptos, ideas, métodos, procesos, visiones, problemas y soluciones sobre los que interviene la Arquitectura de la Información que, en concreto, busca:
  • Procesar y dosificar la enorme cantidad de información que se ha producido a causa de los descubrimientos y nuevas investigaciones en todos los nuevos campos surgidos a causa de la revolución de Internet, así como ponerla a disposición de una manera clara, relevante y significativa a disposición del usuario común. Se trata, entre otras cosas, de hacer comprensible lo abstracto de alguna forma.
  • Desarrollar y verificar procesos de producción o diseño de información con el fin de que el usuario pueda recuperar la información de un determinado espacio de manera clara, precisa y sin ambigüedades, en cualquier plataforma o soporte; en concreto, se refiere a soportes multimedia e interactivos, aunque, retomando a Shedroff, en la práctica no debemos omitir ningún soporte por plano que este sea y hablar de experiencias de usuario.
  • Organizar, estructurar, sistematizar(Tufte), rotular, distribuir, diseñar estructuralmente sistemas de información (Baeza, Rivera, Velasco, 2003) con el fin de que el usuario pueda hacer de su experiencia de recuperación algo simple, agradable, eficaz y productivo



El padre del término Arquitectura de la Información (Information Architecture) es Richard Saul Wurman. Para él un arquitecto de la información es "una persona que crea el mapa o la estructura de información que permite a otros encontrar su camino personal al conocimiento" (Wurman 1997:62). Wurman había abordado el problema de la representación de esquemas complejos de información en sistema pre-web detectando la necesidad y la existencia de agentes humanos que debían especializarse en el acceso del usuario final y en la organización del contenido. En 1975 publicó un artículo en el que acuñaba esta nueva disciplina cuya finalidad era “hacer fácil lo complejo”, pero cuyo contenido esencial ha estado presente en la actividad humana desde muy antiguo. Ello es así, porque responde a un esquema de gestión y organización de la información básico para la comunicación:
Entre las diferentes aproximaciones que se han realizado al concepto, podemos extraer algunas definiciones que nos ayudarán a hacernos una idea más exacta del concepto que trata de abordar:
  • Richard Saul Wurman: Organización de los patrones inherentes a la información à“Hacer fácil lo complejo”
  • Louis Rosenfeld:Usa herramientas, técnicas y experiencias de disciplinas que ven la información como algo importante y valioso por sí mismo
  • Peter Morville:El arte y la ciencia de organizar y etiquetar para apoyar las capacidades de uso y búsqueda
  • Nathan Shedroff:Sistema para organizar datos, para transformarlos en información
  • Jesse James Garret:Define cómo las personas procesan la información y construye relaciones entre sus diferentes elementos
  • Luis Sotillos Sanz: Disciplina de conocimiento que persigue definir estructuras de información que sean fácilmente comprensibles por parte de sus destinatarios, así como procesos usables de interacción entre estos y dichas estructuras y, construir, en torno a ellos, herramientas de navegación, búsqueda y orientación que permitan una gestión satisfactoria de la información.
A partir de esta última definición, podemos concluir que la Arquitectura de la Información se encarga del estudio de:
  • La organización de la información
    • Análisis de la información
    • Clasificación de la información
    • Etiquetado de la información
  • El diseño de los sistemas de recuperación de información
    • Sistemas de navegación
    • Sistemas de búsqueda
    • Sistemas de orientación
  • El diseño de la estructura de la información y la interacción
    • Estructuras de información
    • Procesos de interacción del usuario
    • Construcción de escenarios y agentes
Establecer la arquitectura de la información significa diseñar el esquema abstracto de los contenidos de un cibermedio y plasmarlos en una estructura de base de datos, estableciendo simbiosis entre los sistemas del medio tradicional con los contenidos generados en exclusiva para el cibermedio.

t4-ai2.jpg.png
FASES DE AI. Fuente: Manuel Gértrudix

Hassan, Martín e Iazza (2004) proponen el siguiente proceso de diseño web. En su propuesta, este diseño está centrado en el usuario (más info):

Fuente: Hassan, Martín e Iazza (2004)
Fuente: Hassan, Martín e Iazza (2004)

Como se puede ver en el esquema, las fases de diseño, prototipado y evaluación son cíclicas. La evaluación de lo diseñado debe ser constante, para poder identificar y reparar a tiempo posibles errores de usabilidad. Como ellos mismos afirman, es más económico reconducir una estructura durante su elaboración que tener que rediseñar completamente el sitio cuando ya creíamos haber terminado el proceso.
Estos autores también mencionan algunos principios de evaluación de la usabilidad que pueden seguir los evaluadores del diseño. Citan las propuestas de Nielsen (punto 5.3.1 del enlace):

  • Visibilidad del estado del sistema:El sistema (o sitio web) siempre debe informar al usuario acerca de lo que está sucediendo. Por ejemplo, cuando en una interfaz tipo webmail se adjuntan ficheros a un mensaje, el sistema debe informar del hecho mostrando un mensaje de espera
  • Lenguaje común entre sistema y usuario:El sistema debe hablar el lenguaje del usuario, huyendo de tecnicismos incomprensibles o mensajes crípticos.
  • Libertad y control por parte del usuario:El usuario debe tener el control del sistema, no se puede limitar su actuación. Se debe ofrecer siempre al usuario una forma de "salida de emergencia", como por ejemplo la representada por la opción para "saltar" animaciones de introducción (normalmente Flash).
  • Consistencia y estándares:La consistencia se refiere a, por ejemplo, no utilizar dos rótulos distintos para referirse a un mismo contenido, o no usar estilos diferentes dentro de un mismo sitio. Además el sitio web debe seguir estándares o convenciones de diseño ampliamente aceptados. Cuanto más se parezca un diseño y su funcionamiento al resto de sitios web, más familiar y fácil de usar resultará para el usuario.
  • Prevención de errores:Mejor que un buen mensaje de error es un diseño que prevenga que ocurra el error.
  • Es mejor reconocer que recordar:Este principio hace mención a la visibilidad de las diferentes opciones, enlaces y objetos. El usuario no tiene por qué recordar dónde se encontraba cierta información, o cómo se llegaba a determinada página.
  • Flexibilidad y eficiencia de uso:El sitio debe ser fácil de usar para usuarios novatos, pero también proporcionar atajos o aceleradores para usuarios avanzados.
  • Diseño minimalista:Cualquier tipo de información que no sea relevante para el usuario y que sobrecargue la interfaz debe ser eliminada.
  • Permitir al usuario solucionar el error:Por ejemplo, cuando un usuario introduce una consulta en un buscador y no obtiene ningún resultado, se debe informar al usuario sobre cómo solucionar el problema, por ejemplo con mensajes del tipo "introduzca algún sinónimo" o "quiso Ud. decir...". Además no se debe borrar el contenido de la caja de búsqueda para que el usuario pueda rehacer la consulta.
  • Ayuda y Documentación: Siempre es mejor que un sitio web se pueda utilizar sin necesidad de ayuda o documentación, aunque en sitios web extensos o en procesos de interacción complejos (como el rellenado de un formulario), se debe proporcionar información de ayuda al usuario.
(Nielsen, 1994, citado en Hassan, Martín e Iazza, 2004)

1.2. Funciones de la Arquitectura de la Información

Como nos advierte José Luis Orihuela, la Arquitectura de la Información es la competencia fundamental del narrador en los nuevos entornos interactivos:
El diseño de las opciones de navegación que se ofrecen al navegante, proyecta la inteligencia del narrador sobre los temas y su previsión sobre las necesidades informativas de los usuarios. El narrador se convierte así, en el arquitecto del laberinto hipertextual (Orihuela, 2003:4)
De lo que hemos visto, se entiende que la Arquitectura de la Información de una producción multimedia cumplirá eficazmente su función cuando, como señala Juan C. Camus (2006), logre que un usuario que acceda por primera vez a esta:
  • Los usuarios (narratarios) puedan entender el sitio en forma rápida y sin esfuerzo. Para ello, se hace necesaria una fase de "modelado del usuario" donde se definan el perfil o los perfiles de los usuarios que utilizarán nuestra web, determinando cuáles serán sus necesidades de información, condiciones de acceso, experiencia, conocimientos... Así, la estructura y organización de nuestra web estarán orientados a nuestro público objetivo.
  • Los usuarios puedan encontrar la información fácilmente. Es imprescindible diseñar índices, clasificaciones, taxonomías y sistemas de búsqueda en nuestro sitio; además, deberemos potenciar el grado de "findability" o "encontrabilidad" de nuestros elementos, a través de su descripción con metadatos y la potenciación del SEO (Search Engine Optimization).
  • Los administradores (narradores) pueden ubicar la nueva información sin tener que crear nuevas estructuras. Se impone un estudio previo y meditado de la clasificación de nuestros contenidos, previendo en lo posible las necesidades que se puedan presentar en el futuro y teniéndolas en cuenta a la hora de diseñar nuestro sitio.
  • Los administradores pueden incorporar sus nuevas iniciativas sin tener que inventar fórmulas de contenido partiendo de cero.

Tomando como referencia el estudio realizado por Yeter Caraballo Pérez, Zulia Ramírez Céspedes y Dayamí Roque Chao, “El profesional de la información como arquitecto de los contenidos en la web”, vamos a profundizar un poco más en la figura del arquitecto de los contenidos web. Se trata de un estudio cuyo objetivo es identificar la literatura disponible sobre el tema de las funciones que debe desempeñar un arquitecto de información. Para ello, los autores realizaron búsquedas en un grupo de bases de datos reconocidas internacionalmente, con el propósito de determinar su relevancia en este tema.
Algunas aproximaciones teóricas al profesional de la información como arquitecto en el Web a las que llegaron, fueron las siguientes:

Según Aramayo: “por medio de Internet y otros avances tecnológicos, los profesionales de la información evalúan, analizan, organizan, reelaboran y presentan la información de manera que tenga la máxima utilidad para sus destinatarios”.
Ellos, según Soto, adoptan para realizar sus funciones, diversas denominaciones: organizador y administrador de la información, arquitecto de la información, consultor de información, administrador del conocimiento, bibliotecario de sistemas, bibliotecario consultor para la formación, administrador de productos, ingeniero de software y analista de contenidos, entre otras.

Como arquitectos de información, según Rosenfeld y Morville, deben lograr cuatro aspectos fundamentales en su Web:
  • Aclarar la misión y visión para el sitio y balancear la información con las necesidades de su audiencia.
  • Determinar qué contenidos dispondrá el sitio y cuál será su funcionalidad.
  • Especificar cómo el usuario puede encontrar la información en el sitio, definir su organización, la navegación, el etiquetado y los sistemas de búsqueda.
  • Desarrollar mapas de salida sobre cómo el sitio se acomodará al cambio y al crecimiento en el tiempo.

Las funciones de un arquitecto de la información deben ir encaminadas a organizar la información, con el fin de tomar decisiones y lograr la satisfacción de sus usuarios y de combinar sus conocimientos a partir de la interdisciplinariedad. Por lo tanto, el profesional de la información debe poseer conocimientos y habilidades en materia de organización de la información, que le permitan desempeñarse como arquitecto de esa información; llevando a cabo sus funciones en los procesos de selección, organización de la información, posicionamiento, búsqueda, recuperación y diseminación, vinculados al diseño de sitios Web.

Los arquitectos de la información son, en definitiva, organizadores, conocidos por el término anglosajón matchmakers, y su trabajo consiste en entender el contenido del sitio, pero también la audiencia a la que va dirigido. Por lo tanto, deberá encontrar la conexión entre ambos para la puesta en marcha del sitio.

Una estructura deficiente de la información conllevará a una deficiente usabilidad. Existen reglas básicas para una estructura eficiente. Por un lado, hay que tener en cuenta que la estructura debe reflejar el punto de vista del usuario. Y por otro, evitar caer en el error de que la estructura refleje la organización de la empresa, ya que al usuario no le interesa.

Si hablamos de arquitectura de la información es necesario hacer referencia a dos términos que resultan un poco abstractos si hay que compararlos: la jerarquía y la taxonomía.

El primero de ellos hace referencia a una estructura que se ejecuta de arriba-abajo, por ejemplo, el mapa conceptual con los cargos profesionales dentro de una empresa: el puesto más alto, por consiguiente el primero, estará ocupado por el director, siguiendo el subdirector y así sucesivamente hasta el último eslabón de la cadena.

La taxonomía, por otro lado, se refiere a distintos sistemas de clasificación que se hacen para designar nombres a diversas cosas. Por ejemplo, los meses del año: enero, febrero, marzo… pertenecen a una misma clase, pero no están ordenados jerárquicamente.

En conclusión, no todas las taxonomías son jerárquicas, ya que existen taxonomías de diversos tipos: secuencias, cronológicas, etc.

1.3. Objetivos de la Arquitectura de la Información

Como ya se ha referido el término de “arquitectura de la información” fue acuñado por primera vez por Richard Saul en 1976, con la intención de describir lo que por aquel entonces entendía como una profesión que estaba emergiendo y que se ocuparía de aclarar y organizar lo que denominaba “el tsunami de datos que rompe en las playas del mundo civilizado”.
Todos aquellos individuos responsables de la arquitectura de la información que se han venido a llamar “arquitectos de la información” deben responder a una necesidad básica funcional en el entorno actual del uso de la información y la gestión a través de redes distribuidas, ya hablemos de Internet o de una intranet privada. Así, las empresas crean estrategias que simplifican la forma de navegación y uso de la información que las redes albergan a través de las mismas para obtener un mayor valor y sostenibilidad en la relevancia de la información como un activo.
Para asegurarnos que un sitio web tiene presente los niveles precisos de usabilidad, el diseñador ha de tener presente un método que comprenda técnicas y procedimientos a tal fin. De forma tal que un diseño web que se centra en el usuario tiene como característica principal que el usuario es quien debe conducir el mismo desarrollo del sitio conforme a sus necesidades, características y objetivos.
Si en el proceso de desarrollo del sitio web, en vez de centrar el diseño en el propio diseñador lo centramos en los usuarios, debemos involucrar a éstos desde el principio, conocer sus perfiles, qué necesitan y para qué visitan el sitio, cómo reaccionan y cómo se manejan ante él con el fin de innovar y mejorar la experiencia del usuario.
El arquitecto de la información tiene cuatro funciones principales:
  • Definir el objetivo del sistema; o sea, para que servirá, qué objetivos de la organización ayudará a satisfacer, como se responde a las demandas del "propietario" del sistema y como se compaginan esas demandas con las de la audiencia que usará el sistema. Tener claro los temas y cómo vamos a desarrollarlos.
  • Determinar que contenidos deben incluirse en el sistema. Si se ha realizado antes una auditoría de la información, será claro que los contenidos mínimos deberán ser los que en su momento denominamos información crítica, aquella que es vital para el cumplimiento de los objetivos de los usuarios. Jerarquía de contenidos.
  • Idear y especificar los mecanismos de organización y búsqueda del sistema, definir como los contenidos serán encontrables por los usuarios, a través de la selección de una forma de organización, de un sistema de navegación y uno de búsqueda.Organizar contenidos en bloques temáticos o menús para facilitar su localización.
  • Definir una política clara y el correspondiente plan sobre el mantenimiento, actualización y crecimiento del sistema.
Hay que reconocer que el arquitecto de la información requiere una formación multidisciplinar. Debe tener conocimientos de organización de información, de informática, de gestión de organizaciones, de diseño gráfico, de marketing, de psicología de la información, etc.
A continuación se detallan unos conceptos claves representados a continuación a fin de comprender mejor los objetivos de la Arquitectura de la Información:
CONCEPTO
OBJETIVO DE LA ARQUITECTURA DE LA INFORMACION (AI)
PERSPECTIVA
Simplificar
Presionar por una solución intuitiva
Se trata de un objetivo común que es conocido por todos los profesionales del diseño de experiencia de usuario. Este diseño se basa en el estudio interdisciplinario de la interacción persona-ordenador (HCI) y de la filosofía práctica generalizada de diseño centrado en el propio usuario de diseño.
cómo
Explorar formas de organizar y crear relaciones que generen una información útil
La creación de esquemas lógicos de clasificación y útiles de la información semántica y contextual que se adaptan a los objetivos del usuario y el comportamiento son la vía para mejorar el valor de la tecnología de la información en la AI.
las personas
Las personas son entes multidimensionales de forma tal que su experiencia se extiende más allá de una interfaz de usuario de destino
Los usuarios son las personas, motivo por el cual la función de la arquitectura de la información incluye la exploración del contexto más amplio posible de perspectivas y comportamientos humanos que pueden afectar de una estrategia de AI. Así por ejemplo, pasamos a considerar el lenguaje y la perspectiva de una persona como factores comunes.
Esto no quiere decir que la arquitectura de la información incluya la realización de análisis lingüísticos, la investigación etnográfica y de pruebas de usabilidad. Sin embargo, sí significa que una solución de AI debe hacer preguntas que son contestadas por los responsables de estas áreas de interés.
navegan
Proporcionar las principales vías dentro de una interfaz de usuario que permiten a una persona para alcanzar sus objetivos
Como la información en un determinado dominio crece, los elementos específicos serán más difícil de descubrir. Por ello, las vías que se ofrecen a un usuario deben parecer naturales, ser eficientes y mantener su atractivo.
y usan
Adaptar las necesidades de flexibilidad de información
La información debe ser formateada para ser lo más flexible posible. Como resultado, la responsabilidad funcional de la arquitectura de la información incluye la exploración de una amplia gama de preguntas que pueden requerir los conocimientos propios de las personas.
la información
Marco de una perspectiva de sonido sobre la naturaleza de la información y sus atributos
La función de arquitectura de la información debe investigar continuamente para entender la naturaleza de la información que se aplica a los negocios o personas a quienes sirve. Esto sugiere que la investigación es una parte vital de las actividades funcionales de la arquitectura de la información.
Observar los patrones y tendencias de uso en línea para verificar la eficacia de una solución de AI son ejemplos que ayudan a construir las perspectivas de sonido de la información en un entorno particular.
y se conectan
La información que consumimos no es estática como lo pueda ser una página de un libro. Podemos decir que le información permanece estática en un principio, como estados emergentes en los servidores y hosts de los clientes, y se entrega a petición de las interfaces de computación de una gama ilimitada de dispositivos. Este entorno distribuido, en el dominio de la tecnología de la información, plantea nuevos retos en la comunicación.
a la red
La Web es lo que distingue los intereses de la arquitectura de la información de las prácticas tradicionales de organización y gestión física de los artefactos de la información.
Podemos reflejar una modelo de arquitectura de la información en el siguiente ejemplo:

ejemplo_gráfico_AI.png

1.4 Anatomía de la AI


En cuanto a los sistemas utilizados para estructurar una web, estos son los siguientes:

  • Sistemas de organización
  • Sistemas de etiquetado
  • Sistemas de navegación
  • Sistemas de búsqueda
  • Vocabularios o lenguajes documentales

Todo este conjunto son los responsables de la findability de la página y de los contenidos que hay en ella.

Sistemas de organización

Según la organización de la información en una web se logrará que los contenidos sean más fácilmente encontrados por los usuarios. Para lograr este objetivo es necesario un diseño adecuado del sistema de organización.
  • Esquemas de organización: Son aquellos que se encargan de organizar los grupos de ítems de información que contiene una página web en grupos, a partir de un críterio base. Estos pueden ser de dos tipos:
    • Exactos:Son aquellos bien definidos y que son mutuamente excluyentes y sirven para conocer cosas previamente conocidas:
      • Alfabéticos
      • Cronológicos
      • Geográficos
    • Ambiguos:Sirven para localizar contenidos que desconocemos.
      • Tema
      • Tarea
      • Audiencia
      • Metáfora (no hay que abusar de este sistema, pues si no está bien desarrollada su alta ambigüedad desorienta al usuario).
      • Híbrido (utilización de varios de los esquemas anteriores)

  • Estructuras de organización:Su objetivo es organizar los grupos de ítems de información resultantes de los esquemas anteriores, mostrando las dependencias lógicas que existen entre ellos.
    • Estructura jerárquica:Una buena arquitectura de información incluye una jerarquía o taxonomía entre sus componentes. Estos permiten al usuario ubicarse y obtener un modelo mental de la estructura del sitio que está visitando.
      • Consejos:
        • Diseñarla teniendo en cuenta a los usuarios.
        • Las opciones principales deben estar siempre visibles.
        • Combinarla con los otros tipos de estructuras para ofrecer al usuario flexibilidad a la hora de localizar la información.
        • Las categorías que la conforman deben ser mutuamente excluyentes. Si muchos contenidos pertenecen a varias categorías la taxonomía termina perdiendo su valor para localizar la información.
        • Sobre la anchura (nº de ítems al mismo nivel) y profundidad de la estructura (niveles de división verticales) recomendada.
        • Definir la estructura pensando en la escalabilidad del portal, que sea posible incluir nuevas categorías sin modificarla sustancialmente, sin provocar cambios en la imagen mental que tiene el usuario que ya la ha visitado y sin tener que introducir modificaciones visuales en la home.

    • Basada en registros (o en el modelo de base de datos): Este tipo de estructura es idónea para los contenidos bien estructurados y homogéneos.
    • Estructura hipertextual (o en red): Debe ser complemento de otros tipos de estructuras y no la única opción de organización de la información. Permite reflejar relaciones menos estructuradas y más creativas existentes entre los contenidos.
    • Estructura secuencial: Con un principio y un final claro y un único itinerario de consulta o exploración
    • Estructura en tabla (o matriz): Únicamente para aquellos contenidos que admitan su representación en una tabla, y debe ser utilizado en combinación con otras estructuras.

Sistemas de etiquetado

Se debe utilizar un lenguaje claro y preciso que no lleve a confusión y que ayude a encontrar lo que nos interesa sin revelar ningún dato más.
Llegado el momento de definir el sistema de etiquetado, debemos tener precaución con:

  • La ambigüedad intrínseca al lenguaje, tanto sintáctica, léxicas (sinonimia y polisemia) como semántica (uso de metáforas, ironía, etc.)
  • La arbitrariedad, evitando utilizar términos con un significado diferente con el que normalmente se asocian.
  • La desorientación que producen las etiquetas que no anticipan ni dan pista sobre lo que esconden.
  • Las etiquetas que utilizamos se asociación al branding de la empresa, y unas etiquetas mal elegidas pueden dar una mala impresión de la misma.

Estas precauciones son debidas a que todo ello puede suponer que el usuario abandone la página porque no encuentre lo que necesite.

Las etiquetas pueden ser textuales o icónicas, estas deben utilizarse siempre junto a las primeras porque son intrínsecamente ambiguas.
  • Los sistemas de etiquetado con formato textualque deben planificarse son:
    • Enlaces contextuales. Deben identificarse visualmente como tales, diferenciar los que sean externos y utilizarse de forma consistente. No deben ser ambiguos y se debe tener en cuenta el contexto en el que se insertan, siendo además independientes del mismo.
    • Títulos: Deben estructurar de manera coherente el contenido y su diseño ha de reflejar su jerarquía. Tienen que ser descriptivos y coherentes con los literales utilizados en los otros sistemas de etiquetado. Deben ser consistentes a lo largo del sitio tanto en su ubicación como en su aspecto.
    • Opciones del sistema de navegación: Deben ser consistentes y coherente siguiendo un mismo patrón visual y de ubicación a lo largo de todo el sitio. Deben describir adecuadamente los contenidos que incluyen y ser entre ellos lo más excluyentes posibles.
    • Términos de indización: Son el conjunto de etiquetas utilizadas para describir cualquier tipo de contenido en un entorno web y facilitar su localización, búsqueda y recuperación. Su enlace permite acceder al listado de todos los contenidos indizados con ese término y además alimentan el índice inverso del sistema de búsqueda. Cuando los propios usuarios o los autores de los contenidos proponen las etiquetas (tag) hablamos de marcadores sociales. Una folksonomía es el resultado de la agregación de las etiquetas o tags propuestos por uno más usuarios. Se pueden visualizar en forma de listado, nubes de etiquetas, los más populares, etc.


Sistemas de navegación

Son estructuras que ordenan y agrupan los contenidos de una página web bajo unas categorías que forman una clasificación. Nos permiten:
  • Identificar las relaciones entre los contenidos de la web y entre esos contenidos y la página que se está visitando en ese momento.
  • Habilitar y facilitar la navegación entre esos contenidos.
  • Orientarnos, saber dónde estamos, que hay aquí, de dónde venimos y cómo podemos ir hacia donde deseamos ir.
  • Formar una imagen mental del tamaño y estructura del sitio.


Un ejemplo de ello serían los mapa web
Un mapa de sitio web es una lista de las páginas de un sitio web accesibles por parte de los buscadores y los usuarios. Puede ser tanto un documento en cualquier formato usado como herramienta de planificación para el diseño de una web como una página que lista las páginas de una web (ya realizada), organizadas comúnmente de forma jerárquica. Esto ayuda a los visitantes y a los bots de los motores de búsqueda a hallar las páginas de un sitio web.
Los mapas de sitio pueden mejorar el posicionamiento en buscadores de un sitio, asegurándose que todas sus páginas puedan ser encontradas. Esto es especialmente importante si el sitio usa menús Adobe Flash o JavaScript que incluyan enlaces HTML.También son una ayuda a la navegación por ofrecer una vista general del contenido de un sitio de un simple vistazo.

Sitemaps


Google creó Google Sitemaps para que los desarrolladores web pueden publicar listas de enlaces de sus sitios, debido a que algunas webs tienen un número grande de páginas dinámicas que sólo están disponibles cuando los usuarios emplean los formularios correspondientes. En estos casos los archivos de Sitemaps pueden usarse para indicar a una araña web cómo deben ser encontradas las páginas.Actualmente Google, MSN, Yahoo y Ask.com soportan este protocolo conjuntamente, ahora llamado simplementeSitemaps.Sitemaps suele usar XML, aunque también se admiten fuentes web RSS y archivos de texto.

Los usuarios pueden navegar de formas muy distintas: con dirección, cuando buscan una información determinada, sin dirección, cuando ojean la web sin un objetivo claramente preestablecido, además puede navegar en amplitud o en profundidad.

  • Tipos de sistemas de navegación
    • Sistemas básicos
      • Sistemas integrados
        • Sistemas constantes (o globales)
        • Sistemas locales, deben estar correctamente articulados con el sistema constante.
        • Sistemas contextuales, que permiten identificar contenidos relacionados y enlazar con ellos. Es importante que los contenidos o páginas críticas se enlaces desde otros contenidos.

Se deben articular estos tres sistemas sin saturar de enlaces y sin que ocupen todo el espacio de la página. Deben situarse de forma consistente, fija y diferenciada entre ellos.

      • Sistemas complementarios, son recursos para localizar información y para orientarse que suelen ser páginas propias e independientes.
        • Mapa del sitio
        • Índices, listado de términos que representan el contenido del sitio, normalmente ordenados alfabéticamente
        • Guías, para introducir a los nuevos usuarios en los contenidos y la funcionalidad de una parte concreta del sitio: wizards, configuradores, visitas guiadas, tutoriales, etc.

    • Sistemas no básicos
      • Sistemas de personalización, estructuras de navegación proactivas que se autodiseñan en función de lo que espera el usuario, ofreciéndole enlaces a partir de su perfil. El principal problema es que los comportamientos pasados no son garantía de inferir sus comportamientos futuros.
      • Sistemas de customización: estructuras reactivas que permiten que el usuario pueda diseñar su propio sistema de navegación. El principal problema es que a los usuarios les pasen desapercibidas estas opciones, que si sus necesidades cambian deben redefinirlas o que simplemente no tengan tiempo de hacerlo.
      • Sistemas de navegación visual, permiten explorar usando recursos icónicos o visuales.
      • Sistemas de navegación social, inferidos a partir del comportamiento de la mayoría de usuarios que visitan la página (lo más popular, lo más comprado, etc.)

Recomendaciones

- Utilizar recursos de contextualización que permitan al usuario saber dónde se encuentra, adónde puede ir y la relación del contenido con el resto del sitio: incluir siempre el logo de la organización, marcar visualmente las opciones de menú donde nos encontramos, incluir migas de pan, etc.
- No anular funcionalidades del navegador. Al posicionar el cursor sobre un enlace la URL debe verse en el pie del navegador; no eliminar las barra de menú del navegador al abrir una ventana nueva; no impedir al usuario que utilice el menú contextual del botón derecho; no impedir que la página muestre el scoll cuando sea necesario; permitir que los enlaces visitados cambien de color, etc.
- Diseño de navegación: incluir siempre un mapa web. Si se usan menús desplegables es mejor que se desplieguen al activarlos y se mantengan desplegados (Chaparro, Minnaert y Phipps, 2000).

Sistemas de búsqueda

Utilizados normalmente para localizar información a partir de una necesidad concreta. Ofrecen los resultados que coinciden con los definidos por el usuario en la ecuación de búsqueda. Los problemas a superar son:

  • Ruido: contenidos recuperados no pertinentes, se mide con el índice de precisión.
  • Silencio: documentos pertinentes no recuperados, se mide con el índice de exhaustividad.

Los sistemas de búsqueda pueden ser:

  • Reactivos: reaccionan frente a la conducta informativa del usuario.
  • Proactivos: ofrecen proactivamente la información al usuario sin que tenga que reclamarla continuamente:
    • Sistemas de difusión selectiva de información (DSI), ofrecen una actualización informativa automatizada sobre un tema concreto a partir de la sindicalización de contenidos.
    • Sistemas de workshop, suministran automáticamente la información dentro de un proceso a partir del perfil del usuario.
    • Agentes inteligentes: infieren el perfil de interés informacional de un usuario a partir de criterios como su histórico de comportamiento o su similitud con el de otros usuarios.

  • RSS, es reactivo porque has de suscribirte y proactivo porque desde ese momento los recibes automáticamente.

Recomendaciones

- Evaluar la necesidad de un vocabulario controlado y definir los metadatos implicados en su descripción.
- Seleccionar como términos de indización ciertos componentes de los contenidos (título, url, etiquetas de los enlaces o títulos de las imágenes)
- Si se indiza el texto completo de todos los contenidos, introducir recursos como la búsqueda por campos para refinar el resultado y evitar una tasa de ruido elevada.
- Evaluar si se indiza sólo algunos contenidos, algunas zonas de esos contenidos o algunos componentes determinados de ellos.
- Indizar los contenidos según el tipo de usuario o audiencia al que va dirigido.
- Inferir patrones en el comportamiento de los usuarios.
- Tratar de indizar las páginas según el tipo de contenido.

- Incluir siempre que se pueda:
    • Corrector ortográfico: corrigen automáticamente la ortografía dando alternativas.
    • Herramientas fonéticas: para identificar términos con grafías diferentes pero fonéticamente idénticas
    • Herramientas de procesamiento del lenguaje natural: obvian las palabras vacías e introducen AND entre los términos propuestos.
    • En función del proyecto, evaluar la inclusión de sugerencias de términos en la caja de búsqueda, que se va adaptando a lo que se escribe y que permiten identificar las búsquedas con más resultados.

- Poder refinar y mejorar manualmente los resultados de las búsquedas más habituales.
- Formar a los autores del contenido sobre cómo deben redactar los títulos o etiquetar el contenido.
- La caja de búsqueda debe estar identificada como tal y cerca del sistema de navegación.
- Diseñar la interfaz de búsqueda teniendo en cuenta a los usuarios, el tipo de necesidad informativa, la cantidad de información recuperada y el tipo de contenidos a recuperar.
- En la página de resultado:
  • indicar los términos por los que se ha buscado
  • indicar el número de resultados mostrados y encontrados
  • poner en negrita las coincidencias
  • permitir refinar la búsqueda (no solo semánticamente sino por fecha, lengua, tipo de documento, etc.)
  • permitir realizar búsquedas sólo en los resultados
  • permitir personalizar el número de resultados a mostrar.
  • poder imprimir o enviar por email los resultados
  • poder guardar la búsqueda, para ello es necesario que sea mediante GET para que tenga una URL propia.
  • ofrecer opciones de ordenación (por precio, por relevancia, por cronología, etc.)

Vocabularios o lenguajes documentales

La indización es la operación en la que se asigna a cada contenido una serie de términos (palabras clave) que representan el tema o temas sobre los que versa. Es una operación de análisis. La clasificación es la operación por la cual se asigna a cada contenido un único término que representa el tema principal sobre el que versa ese documento. Es una operación de síntesis.

La información resultante de la indización y la clasificación suele incorporarse al contenido mediante metadatos asociados para que funcione con los sistemas de organización, etiquetado, navegación y búsqueda.

Un lenguaje documental se constituye a partir de un subconjunto de términos del lenguaje natural (acompañados a veces de números como en el caso de las clasificaciones) para facilitar la búsqueda y recuperación de la información contenida en los documentos.

Aunque el uso de un lenguaje documental reduce el ruido y el silencio en las búsquedas, su construcción y mantenimiento lleva asociado un coste de personal y de tiempo importante, además de que hay que asegurar que se hace correctamente. Por ello hay que evaluar con criterio la necesidad de ese esfuerzo y su viabilidad.

Un lenguaje documental está formado por:
  • El vocabulario del lenguaje documental: subconjunto del lenguaje natural. Se distingue:
    • el término de indización principal (descriptor): es unívoco. Identifica la representación estándar de ese concepto. Por ejemplo, “sacerdote”.
    • término de indización secundario: es sinónimo del principal y una buena representación del concepto que el primero también representa, pero se decide no identificarlo como la representación estándar. Por ejemplo: “cura”, “clérigo”
  • Relaciones semánticas entre los términos de indización, que pueden ser de:
    • Equivalencia: sinónimos, acrónimos, abreviaciones, variantes léxicas, posibles errores ortográficos, cuasisinónimos.
    • Jerarquía, que puede ser:
      • Genérica: soltero-hombre
      • Relación parte-todo: rueda-coche
      • Relaciones de instanciación: Mediterráneo-mar
    • Asociativa: por afinidad semántica o evocación. Por ejemplo, veneno-toxicidad.

Tipos de lenguajes documentales
  • Libres, por ejemplo extraer automáticamente de un texto las palabras que no pertenecen al fichero de palabras vacías.
  • Controlados:
    • Anillos de sinónimos, entre los términos se establecen relaciones de equivalencia pero no de jerarquía ni de asociación. Al hacer una búsqueda se recuperan también los indexados por sus sinónimos. Reduce el silencio en las búsquedas pero aumenta el ruido.
    • Fichero de autoridades, listado de términos principales (con sus respectivos sinónimos) para describir y normalizar un conjunto de entidades (personas, organizaciones, lugares geográficos) ante la variedad de homónimos, sinónimos o nombres con los que puede ser denominada una persona, entidad, obra, tema o concepto. Se utiliza especialmente en la catalogación de los fondos de las bibliotecas.
    • Lista de encabezamientos de materia (LEM), en el cual el encabezado condensa el tema del documento con uno o varios términos. Presentan relaciones asociativas, jerárquicas y de equivalencia. Se usan preferentemente en las bibliotecas y en los centros de documentación cuyos fondos son esencialmente enciclopédicos.
    • Taxonomías, sus términos presentan relaciones de equivalencia y jerarquía pero no asociativas.
    • Clasificación, representa entre sus términos relaciones asociativas, jerárquicas y de equivalencia y algunas veces asocia un código identificativo a cada uno de sus términos.La más utilizada en web es la clasificación facetada para poder clasificar simultáneamente desde distintos puntos de vista, o a partir de diferentes criterios, un mismo conjunto de objetos.Cada una de las clasificaciones o facetas es paralela a las demás en un mismo nivel semántico. Cada faceta sería una etiqueta del sistema de navegación global, o un campo de la base de datos; y las categorías de esa faceta serían las de uno de los sistemas de navegación local, o las de los posibles valores de un campo de la base de datos. Por ejemplo, cada faceta seria (corriente literaria, género literario, etc.) y las categoría (realismo, modernismo,…; novela, poesía,…).
    • Tesauro, se encuentran integrados en los sistemas de navegación y búsqueda. Sus términos presentan relaciones asociativas (términos relacionados, TR), jerárquicas (términos genéricos, TG y términos específicos, TE) y de equivalencia.

Tesauro es una lista que contiene los «términos» empleados para representar los conceptos, temas o contenidos de los documentos, con miras a efectuar una normalización terminológica que permita mejorar el canal de acceso y comunicación entre los usuarios y las Unidades de Información (entiéndase unidad de información como: biblioteca, archivo ). Aunque en la práctica tradicional se habla deunitérminos, en la actualidad se ha efectuado grandes variaciones dando incorporación a términos o descriptores compuestos, es decir, descriptores que se componen de dos o más palabras.
Los términos que conforman el tesauro se interrelacionan entre ellos bajo tres modalidades de relación:
  1. Relaciones jerárquicas: Establecen subdivisiones que generalmente reflejan estructuras de TODO/Parte.
  2. Relaciones de equivalencia: Controlan lasinonimia, homonimia, antonimia ypolisemia entre los términos.
  3. Relaciones asociativas: Mejoran las estrategias de recuperación y ayudan a reducir la polijerarquía entre los términos.
Es un intermediario entre el lenguaje que encontramos en los documentos y el que emplean los especialistas de un determinado campo del saber (lenguaje controlado). Aunque los incluye, las entradas de un tesauro no deben ser consideradas sólo como una lista de sinónimos.



MapaconmindomoAI.png
Mapa Conceptual elaborado por Mindomo


2. Experiencia de Usuario

t4-ai-jarret.png
ELEMENTOS DE LA EXPERIENCIA DE USUARIO. Fuente: Jesse James Jarret







Garrett define la experiencia del usuario como “el comportamiento y uso de un producto en el mundo real”, o sea, cuando es manipulado por sus usuarios. Garrett sugiere que normalmente los diseñadores prestan mucha atención a lo que hace el producto, y no suficiente a cómo funciona. Esta distinción es clave, y puede representar la diferencia entre el fracaso o éxito del producto.
El objetivo propuesto es que todos aspectos de la experiencia del usuario del sitio web sean el resultado de decisiones explícitas por parte de sus diseñadores.
En los sitios grandes, los roles y decisiones a tomar son varios y complejos. Para ayudar a delinear las responsabilidades, Garrett divide las decisiones a tomar en cinco planos:
Estrategia - Consiste en aclarar qué esperan obtener del sitio 1) sus dueños y gestores, y 2) sus usuarios. Ambas audiencias deben ser satisfechas para que el sitio sea exitoso. Es el “porqué” del proyecto.
Alcance - Comprende las funciones y características del sitio. Es el “qué” del proyecto.
Estructura - Comprende la relación entre las diversas páginas del sitio, los flujos entre las mismas, estructuras de navegación, etc.
Esqueleto - Comprende la ubicación de los diversos elementos que comprenden las páginas, y la relación entre los mismos: botones, tabs, bloques de texto, etc.
Superficie - Comprende el diseño visual de los elementos que comprenden las páginas del sitio.
En conjunto, los planos conforman una estructura conceptual que ayuda a dar coherencia al proceso de diseño. Por ejemplo, hace poco sentido comenzar a diseñar los elementos visuales del sitio (“Superficie”) antes de tener una idea clara de sus objetivos de negocio (“Estrategia”). La estructura también ayuda a definir las relaciones entre los diversos miembros del equipo de diseño: arquitectos de información y diseñadores de interacción (“Estructura”), diseñadores visuales (“Superficie”), etc.


Además de articular el concepto de “Experiencia del Usuario”, J.J. Garret es también el creador de AJAX (acrónimo de Asynchronous JavaScript And XML): Una técnica de desarrollo web para crear aplicaciones interactivas. Estas aplicaciones se ejecutan en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma, es posible realizar cambios sobre las páginas sin necesidad de recargarlas, lo que significa aumentar la interactividad, velocidad y usabilidad en las aplicaciones.Ajax es una técnica válida para múltiples plataformas y utilizable en muchos sistemas operativos y navegadores, al estar basado en estándares abiertos como JavaScript y Document Object Model (DOM).

La característica principal de AJAX, según su propio creador, es que:
“utiliza tecnologías que ya están construidas y nos permiten crear aplicaciones que nos permiten evitar, por ejemplo, esperar que las páginas tengan que recargarse completamente para finalizar una búsqueda (...) (AJAX tiene ventajas) en cualquier tipo de aplicación en la que el papel de los usuarios sea importante (en la que los usuarios tengan un alto grado de implicación). Intentamos reducir el tiempo que la gente debe invertir en realizar una tarea, por ejemplo, cuando queremos proporcionarles un 'feed-back' o una respuesta más rápida, con gran facilidad visual, además. Todas estas aplicaciones que reúne AJAX son buenas para estos fines” (el mundo.es)




Muy en relación con AJAX y con la experiencia de usuario se encuentra el concepto RIA (Rich Internet Applications).
RIA hace referencia a un nuevo tipo de aplicaciones que combinan las aplicaciones tradicionales Web con las de escritorio. Su ventaja es que para ejecutarse usan un navegador Web estandarizado, y añaden las características adicionales mediante complementos o una máquina virtual. Es decir, cargan toda la aplicación desde el principio, y sólo se recurre al servidor cuando hay una necesidad de datos externos, lo que reduce el tráfico cliente-servidor, y mejora, por tanto, la experiencia de usuario.
El propósito de la fusión de aplicaciones ricas (las de escritorio) y aplicaciones web tradicionales es aprovechar las ventajas de cada una minimizando sus inconvenientes.
aplicaciones_RIA.jpg
Las aplicaciones RIA se definen por las siguientes características:
- Experiencia rica del usuario. Se traduce en el uso de características tales como controles ricos de ingreso (selectores de fecha, deslizadores, etc.), servicios de drag and drop y evitar demoras al usuario en el uso del sitio web.
- Capacidad offline. Permite que una aplicación sigua funcionado aunque se haya perdido la conexión con el servidor.
- Productividad alta del desarrollador. Los nuevos entornos de trabajo y las herramientas de desarrollo permiten la creación de sitios web de manera más eficiente.
- Respuesta. Las aplicaciones web responden con rapidez. Y es posible seguir interactuando aunque no haya conexión, lo que evita esperas al usuario.
- Flexibilidad. Es posible modificar la apariencia, los contenidos y los servicios disponibles de un sitio web de manera rápida y sencilla.
- Fácil de distribuir y actualizar. Actualizar una aplicación RIA es tan simple como publicar los nuevos archivos en el servidor, y es posible hacerlo incluso con los usuarios conectados.
- Fácil de administrar. No hay metodologías de instalación complejas.

wiki4.jpg

Usabilidad y accesibilidad


La usabilidad (anglicismo que significa "facilidad de uso") como indican Bevan, Kirakowski, y Maissel (1991) parece tener su origen en la expresión "user friendly", que es reemplazada por sus connotaciones vagas y subjetivas.
Numerosos autores han propuesto diversas definiciones de usabilidad, normalmente a través de la enumeración de los diferentes atributos o factores mediante los que puede ser evaluada, dependiendo finalmente cada definición del enfoque con el que pretende ser medida (Folmer, Bosch; 2003).
Tomaremos para este trabajo la definición más extendida, que es la ofrecida por la ISO , y que define usabilidad como el " grado de eficacia, eficiencia y satisfacción con la que usuarios específicos pueden lograr objetivos específicos, en contextos de uso específicos ".
En la definición podemos observar que la usabilidad se compone de dos tipos de atributos:
  • Atributos cuantificables de forma objetiva: como son la eficacia o número de errores cometidos por el usuario durante la realización de una tarea, y eficiencia o tiempo empleado por el usuario para la consecución de una tarea.
  • Atributos cuantificables de forma subjetiva: como es la satisfacción de uso, medible a través de la interrogación al usuario, y que tiene una estrecha relación con el concepto de Usabilidad Percibida.

Como se indica en la definición, la usabilidad de una aplicación debe ser entendida siempre en relación con la forma y condiciones de uso por parte de sus usuarios, así como con las características y necesidades propias de estos usuarios. Un diseño no es en sí mismo usable: " lo es para usuarios específicos en contextos de uso específicos ".
Pretender que una aplicación web sea usable independientemente de quién y cómo la use se corresponde más con una visión o enfoque universalista de la usabilidad (en ocasiones necesaria), que con una visión realista y práctica. Esto es debido a que normalmente toda aplicación se diseña con la intención de satisfacer las necesidades de una audiencia concreta y determinada, por lo que será más usable cuanto más adaptado esté su diseño a esta audiencia específica, y por tanto menos lo esté para el resto de personas.
El concepto de usabilidad puede ser definido, además de como atributo de calidad de una aplicación, consecuentemente, como disciplina o enfoque de diseño y evaluación. Se suele hablar entonces de Ingeniería de la Usabilidad - conjunto de fundamentos teóricos y metodológicos que aseguren el cumplimiento de los niveles de usabilidad requeridos para la aplicación-.

A menudo oímos o leemos sobre la usabilidad y accesibilidad web, generalmente se atiende a pensar que son una misma cosa pero la verdad es que son cosas totalmente disferentes. Si analizamos los comportamientos del usuario, la usabilidad nos brinda difrentes técnicas para realizar una tarea concreta, de forma sencilla y eficaz en un entorno gráfico relacionado con la web.

Existen diferentes técnicas de usabilidad, aquí comparto las principales:

- Autonomía, los usuarios deben tener el control sobre el sitio web.
- El usuario manda, sería algo semejante a la regla de "el cliente siempre tiene la razón".
- En la web, calidad es igual a rapidez (más de 20 segundos el 80% de los visitantes se irá sin ver la página).
- Si el sitio no carga enseguida, debe ponerse una precarga, así el usuario permanece en el sitio.
- Deben funcionar todos los enlaces.
- El sitio debe ser sencillo, para que los usuarios se sientan cómodos y no se pierdan cada vez que necesiten encontrar algo en la página web.
- Poner alunas breves conclusiones al principio ayuda al usuario a encontrar lo que busca en poco tiempo.
- Escribir los contenidos resumidos un 25% de lo que pondrías en un papel (leer en pantalla cuesta mucho).
- No sobrecargar de información a los usuarios, deben realizarse recorridos de lectura, quedando a la vista cual es la información principal y cual la secundaria.
- Los colores han de utilizarse con precaución para no dificultar el acceso a los usuarios daltónicos (aproximadamente un 15% del total).
- Utilizar también interfaces conocidas, los sitios web deben requerir un mínimo proceso de aprendizaje.
- Legibilidad, el color de los textos debe contrastar con el de fondo, y el tamaño de fuente debe ser suficientemente grande.

Podríamos decir, en conclusión, que los usuarios deben ser capaces de alcanzar sus objetivos con un mínimo esfuerzo y unos resultados máximos. Hablar de Accesibilidad Web es hablar de una acceso universal a la web, independientemente del tipo de hardware, software, infraestructura de red, idioma, cultura, localización geográfica y capacidades de los usuarios. Por ejemplo una web deja de ser accesible cuando para poder visualizarla correctamente necesitamos un plugin espcial o navegador.

La idea, por consiguiente, es hacer la web accesible para todos los usuarios independientemente de las circunstancias y los dispositivos utilizados a la hora de acceder a la información. Una página accesible lo debe ser tanto para una persona con discapacidad, como para cualquier otra persona que se encuentre bajo circunstancias externas que dificulten su acceso a la información. Estas son algunas de las diferencias entre usabilidad y accesibilidad. (Fuente principal de información: desarrolloweb.com, semac.org y clubdesarrolladores.com)

Respecto a la usabilidad, existen importantes técnicas.

Entre ellas, destacan la autonomía, ya que los usuarios deben tener el control sobre el sitio Web, el hecho de que el usuario manda o la circunstancia de que en la Web la calidad es igual a la rapidez, ya que el 80% de los visitantes no verán la página si tiene un periodo de carga superior a los 20 segundos. De esta manera, si el sitio Web no carga rápido, debe ponerse una precarga para que el usuario permanezca en el sitio.

También es importante que funcionen todos los enlaces y el sitio debe ser sencillo, para que los internautas se sientan cómodos y no se desorienten cuando navegan por la Web, a lo cual ayuda añadir breves conclusiones, para que de esta manera el usuario no encuentre dificultad a la hora de encontrar lo que busca en poco tiempo.

Es clave exponer los contenidos más resumidos respecto a los escritos, ya que es más complicado leer en pantalla y no sobrecargar de información a los usuarios, a los que se debe dejar claro cual es la información principal y cual la secundaria.

Los colores han de utilizarse con precaución para no dificultar el acceso a los usuarios daltónicos, así como emplear interfaces conocidas y textos legibles (el color de los textos debe contrastar con el del fondo, y el tamaño de fuente debe ser suficientemente grande).

Un concepto íntimamente ligado al de usabilidad es el de accesibilidad. Éste ya no se refiere a la facilidad de uso, sino a la posibilidad de acceso. En concreto a que el diseño, como prerrequisito imprescindible para ser usable, posibilite el acceso a todos sus potenciales usuarios, sin excluir a aquellos con limitaciones individuales - discapacidades, dominio del idioma,... - o limitaciones derivadas del contexto de acceso - software y hardware empleado para acceder, ancho de banda de la conexión empleada, etc.- (Hassan Montero, Martín Fernández; 2003b)
Se da la paradoja de que mientras que un diseño usable requiere delimitar a su audiencia potencial con el fin de diseñar para lo concreto, un diseño accesible implica la necesidad de diseñar para la diversidad y heterogeneidad de necesidades de acceso presentadas por esta audiencia específica.
Cuando la audiencia para la que se diseña es muy amplia y presenta necesidades de acceso muy diferentes, normalmente se hace necesaria la puesta a disposición de varias versiones del diseño o un diseño adaptable, como son las conocidas "versiones solo texto" o versiones en varios idiomas.





Al hilo de esta cuestión adjunto un documento, elaborado por Antonio M. Gutiérrez Fernández y Manuel J. Recena Soto, de la Escuela Técnica Superior de Ingeniería Informática, de la Universida de Sevilla, en el que se realiza una Introducción a la Accesibilidad y Usabilidad de forma muy gráfica y sencilla.
El documento responde a interrogantes como por qué invertir en usabilidad. Explica, asimismo, por qué la accesibilidad no está dirigida únicamente a los discapacitados y añade, por último, aspectos legales y normativas al respecto.

A continuación expongo una entrevista a Juan Carlos Camus, autor del libro "Tienes 5 segundos" sobre usabilidad y arquitectura de la información.







Para que un sitio web sea accesible, su contenido ha de estar disponible y al alcance de todo el mundo, es decir, ha de presentar un contenido integrador incluso para aquellas personas que padecen o sufren algún tipo de discapacidad ya sea física, mental, sensorial, etc.

Condiciones de accesibilidad webUn sitio web debe asegurar:

  • Una transformación sin problemas: la información y servicios en él expuesto han de ser accesibles a pesar de las limitaciones físicas, sensoriales o cognitivas que presenten los usuarios y de las restricciones o barreras tecnológicas.
  • Un contenido comprensible y navegable: el contenido debe ser presentado de forma clara y simple y debe proporcionar mecanismos comprensibles para navegar en y entre las páginas.
Un sitio web accesible:
  • Puede ser percibido por todos
  • Puede navegarse en él cumpliendo los criterios máximos de usabilidad
  • Puede ser utilizado con el teclado así como con otros tipos de dispositivos además del ratón
  • Puede ser comprendido fácilmente, incluso en situaciones de atención dificultosa

Accesibilidad y usabilidad son dos conceptos que comparten una relación íntima y dual, puesto que ambos contribuyen a la mejora del grado de satisfacción, efectividad y eficiencia. Pero mientras la accesibilidad está dirigida a hacer un sitio web abierto al mayor amplio número de usuarios, la usabilidad se dirige a conseguir el objetivo de satisfacer más a los usuarios, mostrándoles un sitio web mucho más eficaz y eficiente.

Vertientes de la accesibilidad en la Web

Para lograr que un sitio web sea accesible para todos, según detalla Carlos Egea García –en su libro Diseño Web para tod@s I. Accesibilidad al contenido en la Web-, deberemos seguir determinadas reglas o procedimientos para conseguirlo. En la imagen inferior, se puede visualizar de forma gráfica y esquematizada, el proceso que implica la creación de contenido web desde el momento en que un autor tiene la idea de realizar una página web hasta que ésta llega a los distintos usuarios, teniendo siempre en cuenta los aspectos esenciales que han de barajarse para que sea un “diseño para tod@s”
proceso.jpg
Esquema elementos de accesibilidad Web

En el esquema de elementos de accesibilidad web, que interviene en el proceso de elaboración de contenidos webs accesibles, se puede distinguir diferentes fases o etapas que determinan la existencia de unas reglas para conseguir tal propósito. Entre las mismas se encuentran:

  • Las herramientas con las que cuenta un autor para crear y dar forma al contenido de la web
  • Las aplicaciones con las que un usuario accede a los contenidos y mediante las cuales puede navegarlos
  • Los contenidos, propiamente dichos, de las páginas web en cuanto a su estructura y maquetación se refieren.
Para cada una de estas vertientes de accesbilidad web se han redactado un conjunto de pautas que, a modo de guía y referencia, sirven para desarrollar de forma accesible los contenidos de un entorno web y así poder hacer uso de ellos por parte de todos los usuarios. De la redacción de las mismas, se ha encargado el Consorcio Mundial de la Web (Worl Wide Web Consortium), conocido mundialmente, por las siglas W3C, a través del grupo de trabajo Iniciativa de Accesibilidad en la Web (Web Accessibility Initiative) y bajo las siglas WAI.

Concepciones y definiciones de la Experiencia de Usuario

Se entiende por experiencia de usuario el conjunto de factores y elementos que determinan la interacción satisfactoria del usuario con un entorno o dispositivo concretos, siendo capaces de generar en él un conjunto de emociones positivas sobre el medio y su uso.
En la experiencia de usuario intervienen la arquitectura de la información, el diseño de interacción, la usabilidad, la accesibilidad, el diseño gráfico, la estética, la psicología cognitiva, y la extrapolación de principios del mundo del marketing, entre otras disciplinas. Nathan Shedroff extiende el concepto de experiencia del usuario más allá de la Web planteando su Teoría unificada del diseño que articula en torno a los conceptos clave de diseño de información, percepción e interactividad. La arquitectura de la información es una parte específica del marco global más amplio que es la experiencia de usuario.



Los diferentes perspectivas, modelos u orientaciones al respecto desde las corrientes más tradicionales, en lo que respecta al diseño de productos interactivos o de comunicación multimedia, obedecen a la existencia de diferentes planteamientos o puntos de vista en los que se enmarca el fenómeno de la interactividad asociada a tales productos, llegando a obviar, en algunos casos, cierta importancia a una serie de elementos condicionantes e influyentes en ellos como es el registro y observación del comportamiento emocional del usuario.

En esa acción o labor se ven implicadas una serie de búsquedas de soluciones desarrolladas desde el diseño que poseen implícitamente unas características mucho más integradores e inclusivas que, en los últimos años, se ha popularizado –principalmente en el entorno profesional del desarrollo web- como son las referencias a la “Experiencia del Usuario” –UX, User eXperience- resultando así la existencia de un nuevo enfoque aplicativo en el campo de desarrollo de los productos interactivos o de comunicación multimedia.

El concepto de Experiencia del Usuario hunde sus raíces en el campo del Marketing, estando asociado al concepto de Experiencia de Marca. En este mismo ámbito disciplinario, un enfoque basado en la Experiencia del Usuario conllevaría no sólo pensar en los factores que llevan a la adquisición y por tanto elección de un determinado producto, sino más bien analizar cómo los consumidores usan un producto comportamiento y observar el comportamiento o experiencia resultante de su uso (Kankainen; 2002).




Encontrar una definición unívoca y consensuada al respecto, sobre un concepto relativamente reciente en el campo del diseño resulta una tarea complicada. A continuación, se exponen diferentes definiciones y modelos que tratan de acercarnos, desde distintas visiones teóricas o modelos, al concepto mismo de Experiencia de Usuario.

Diferentes definiciones y modelos
  • Podría definirse la Experiencia del Usuario como la relación intrínseca que mantiene un usuario con respecto a su producto comunicativo, medido en variables de interacción –propias de la realidad o entorno multimedia-, en el que se produce y obtiene, fruto de ese resultado interactivo, una respuesta con carga emocional, valorativa y satisfactoria del propio usuario.
  • Factores que integran la Experiencia del Usuario desde distintos modelos teóricos

  1. Modelo de Arhippainen y Táhti (2003) Es uno de los modelos que analiza con mayor grado de profundidad los distintos elementos que conforman la Experiencia del Usuario. En él, las autoras clasifican los diferentes factores que intervienen o participan en el proceso en cinco categorías diferenciales:
  • Factores propios del usuario
  • Factores sociales
  • Factores culturales
  • Factores del contexto de uso
  • Factores propios del producto
user-experience.gif
Modelo Experiencia de Usuario de Arhippainen y Táhti (2003)





2. Modelo de Kankainen (2002) Según esta aportación teórica la Experiencia del usuario es el resultado mismo de una acción motivada en un contexto específico y determinado, poniendo especial relevancia y significación en la importancia condicionante de las expectativas del usuario y las experiencias generadas previamente, y por tanto en la capacidad de influencia de la actual experiencia en sus expectativas y experiencias futuras. En este modelo se expone como pilares determinantes para la experiencia: la acción, motivación y el propio contexto que coadyuva a la interacción de experiencias actuales que presente el propio usuario con las más inmediatas o futuras.

Kankainen.gif



3. Modelo de Morville (2004) Circunscrito al entorno Web, propone el análisis de la Experiencia de Usuario centrado en siete facetas o elementos que debe cumplir cualquier site o página web:
  • Utilidad
  • Usabilidad
  • Deseable
  • Ecnontrable
  • Accesibilidad
  • Credibilidad
  • Valioso
user_experience.png
Modelo Experiencia de Usuario de Morville




4. Modelo de Mahlke (2002) En cambio, en el mismo contexto de Web(2002) propone e identifica cuatro propiedades del producto web – utilidad, facilidad de uso, cualidad de hedónico y atractivo visual- como factores que han de ser percibidos por el usuario –donde intervienen cuestiones vinculadas a la percepción visual-sensorial- y que influyen con distinto peso en la intención de uso del propio producto

Características generales definitorias de la Experiencia de Usuario
  • Proceso relacional producto de un fenómeno interactivo en el que participan multitud de factores desencadenantes o influyentes en el mismo: individuales, competenciales, sociales, contextuales y propios del producto
  • Proceso integrador que mide la relación constante entre usuario y producto y que se muestran o se predisponen de manera consustancial a intervenir en esa relación dual.
  • Proceso que trata de observar y analizar la influencia de expectativas y experiencias previas y por tanto las variables de condicionalidad de las mismas de cara a una aplicación y desarrollo futuro o inmediato.
  • Ofrece un enfoque o perspectiva amplia, integradora e inclusiva acerca de la relación uso-consumo de productos comunicativos interactivos.
  • Incluye y tiene presente las percepciones y grados de utilidad, facilidad de uso y eficiencia.
  • Campo de estudio multidisciplinar y transitorio en el que se desarrolla distintos enfoques y teorías también multidisciplinares, y en las cuales, en muchos casos, se pone especial interés o relevancia en la observación del componente emocional vinculado a la experiencia del usuario.

3. Aplicación de la AI para la estructuración de contenidos multimedia

Pero para convertir estos conceptos teóricos que definen la Arquitectura de la Información en elementos prácticos de acción que nos permitan llevar a cabo el proceso de diseño y desarrollo de un producto de comunicación multimedia, es preciso operativizar los mismos a través del desempeño de un conjunto de fases de trabajo que deben servir para definir los elementos esenciales de producción del mismo, tal como establece Garret:
t4-ai-jarret2.png
A tal fin, es necesario seguir un proceso que ponga en marcha la realización del producto multimedia[1] :
t4-proceso.png

Es importante destacar que cada una de las fases de este proceso se construye sobre los cimientos de la anterior. Las decisiones que se toman en una fase abren y descartan opciones en las siguientes. Esta dependencia funciona en doble dirección, así una decisión en la última fase puede hacernos reevaluar las tomadas en los planos previos.
ImagenesGarret.jpg
Diagramas de J.J Garret. Elements of user experience.
Jesse James Garret recomienda un enfoque de trabajo concatenado pero que no permite que "el trabajo en cualquier plano acabe antes de que el trabajo en los planes inferiores haya terminado". De esta manera se consigue cierta flexibilidad y un avance del proceso que reacciona a los posibles cambios de decisiones.

3.1. Objetivos

Los cimientos para una buena experiencia de usuario y una arquitectura de la información eficaz, se colocan con una estrategia clara. Esta estrategia se define a partir de objetivos. En este caso, los objetivos centrales del sitio web. Es importante que se hagan explícitos para que todo el equipo sepa cual es el horizonte del proyecto.

El método de Garret se inicia con el planteamiento de dos preguntas:
1. ¿Qué queremos que nuestro producto consiga para nuestra organización? Explicitar que queremos de él, las necesidades desde dentro.
2. ¿Qué queremos para nuestros usuarios? Explicitar las necesidades de los usuarios, los objetivos que se imponen desde fuera.

A partir de las respuestas a estas preguntas se perfilan los objetivos y se articula la estrategia. Se recomienda escribir los objetivos con frases que expresen acción (uso de verbos) Es importante encontrar un equilibrio entre objetivos demasiado concretos y demasiado generales. Hay que ser conscientes de las consecuencias de cada decisión, incluido definir los objetivos. Así evitaremos saltar a soluciones sin entender completamente el problema.

Un elemento importante en la fase de objetivos, y que nos hará entenderlos mejor, es conocer como sabremos si los hemos alcanzado. Aquí entran en juego las métricas de éxito. De nuevo, nos encontramos ante un proceso de definición, está vez de esta métricas, y que afectará al resto de decisiones. Garret señala que este tipo de métricas pueden ir ligadas al producto (tiempo en la web, número de clicks, etc.) o referirse a efectos indirectos de él (llamadas a un teléfono, visitas a una tienda, etc.).


La métrica más simple para medir la usabilidad de un sitio es la tarifa del éxito al realizar una tarea representativa: registra el porcentaje de usuarios de la prueba capaces de lograr lo que se pidió.

Es una métrica burda pero es fácil de recolectar y constituye una estadística reveladora. Tarea terminada tiene peso 1, tarea a medio terminar tiene un peso 0,5 y no realizada 0.

- Éxito = (nº tareas terminadas + (nº medias 0.5)) 100/nº total de tareas.

Además de la tarifa del éxito, las medidas principales de usabilidad son:
- Funcionamiento de la tarea: medido generalmente por la cantidad de tiempo que toma a un usuario realizar una tarea media del sitio.
- Índice de errores.
- Satisfacción subjetiva: medido generalmente por las respuestas del usuario a un cuestionario con declaraciones.

Es posible también medir la calidad del resultado de la tarea del usuario: si el usuario acabó con éxito la tarea, cuánto tiempo le llevó, cuánto disfrutó ejecutando la tarea, si lo hizo de la manera más eficiente...

Para conocer más acerca de las Métricas de Usabilida en la Web, adjunto documento de J.M. Cueva Lovelle, de la Universida de Oviedo.





Definición de los objetivos del sitio

3.2. Audiencia


Un paso fundamental es determinar las audiencias hacía las que dirigimos nuestro producto. Es preciso entender quienes son y que necesidades tienen de lo que les ofrecemos. Los beneficios de investigar esas necesidades se plasman en que ampliamos nuestra perspectiva y nos sacan de la trampa de pensar que todos los usuarios son como nosotros.

Las audiencias se pueden definir desde diversas perspectivas, ya sea por capacidad física, técnica, conocimientos previos, etc. Sin duda es un proceso complicado por la gran variedad que pueden presentar. Por eso, y en este proceso de cimentación de las bases de nuestro proyecto, es vital definir correctamente quienes son nuestro usuarios.

Una herramienta para conseguirlo es la segmentación de usuarios, dividir la audiencia en grupos que comparten necesidades y que nos resultará más fácil gestionar. Este paso nos revelará que no solo existen necesidades diferentes entre nuestro usuarios, sino que incluso pueden ir en direcciones opuestas.

La segmentación de usuarios se puede realizar con criterios demográficos (edad, género, estudios, etc.) o psicográficos (actitud y percepciones sobre el tema de nuestro proyecto.)
SegmentacionUser.jpg
Garret, J. The elements of User Experience


La investigación de usuarios trata de dar respuesta a las preguntas que nos formulemos sobre estos grupos. La investigaciones de mercado tradicionales como las encuestas o grupos de discusión exigen saber con mucha claridad que es lo que se quiere averiguar. Existen otros métodos como las entrevistas contextuales o el análisis de tareas. Cada método tienes sus pros y sus contras, principalmente relacionados con el coste y el tiempo de desarrollo.

Debido al alejamiento de las empresas de los usuarios, los investigadores deben conocer los algunos datos fundamentales sobre el público objetivo al que dirigen, con el fin de adaptar sus propuestas a ellos. Estos datos se denominan las “7 O de mercado” (Kotler, 1995).:

Occupants: Quién consume.
Objects: Qué consume.
Objectives: Por qué consume.
Organizations: Quién participa.
Operations: Cómo se consume.
Occasions: Cuándo se consume.
Outlets: Dónde se consume.

Las principales influencias del comportamiento de los usuarios y consumidores son (Kotler, 1995):
  • Factores culturales: Ejercen la influencia más amplia y profunda en el comportamiento. En ellos se incluye la cultura, que actúa como determinante fundamental de los deseos y del comportamiento de las personas, la subcultura, que proporciona a sus miembros factores de identificación y socialización específicos (como por ejemplo las nacionalidad o grupos raciales) y la clase social, divisiones de la sociedad, relativamente homogéneas y permanentes, jerárquicamente ordenadas y cuyos miembros comparten valores , intereses y comportamientos similares.
  • Factores sociales: Se incluye a los grupos de referencia, que son todos los grupos que tienen influencia directa o indirecta sobre las actitudes o comportamientos de una persona (como son la familia, los amigos, los compañeros o de manera más indirecta, los grupos profesionales), grupos de aspiración, que son aquéllos a los cuales una persona no pertenece, pero le gustaría pertenecer, y los grupos disociativos que son aquéllos cuyos valores o comportamientos rechaza la persona.
  • Factores personales: El comportamiento del usuario se ve influido por las características personales, como la edad y la fase del ciclo de vida, ya que los hábitos y el consumo no son iguales en todas las etapas de la vida, la ocupación, las circunstancias económicas, incluyendo los ingresos disponibles, los ahorros y recursos y la actitud frente al gasto y frente al ahorro, el estilo de vida, que se define como el el patrón de forma de vivir en el mundo como expresión de las actividades , intereses y opiniones de la persona; y la personalidad (características psicológicas distintivas que hacen que una persona responda a su entorno de forma relativamente consistente y perdurable).
  • Factores psicológicos: Los principales son la motivación, la percepción, el aprendizaje y las creencias y actitudes.

3.2.1 MEDICIÓN DE LA AUDIENCIA WEB

Las herramientas de medición de audiencias en la red son muy importantes para saber si nuestra web está teniendo el éxito que esperábamos. Las mediciones ayudan a enfocar mejor las estructuras y dinámicas de las páginas web para, de esta forma, poder implementarlas o mejorarlas.

Sistemas de medición de audiencias en Internet

Miguel A. Díez Ferreira, periodista especializado en Internet y consultor de medios online hace un repaso por los sistemas de medición de audiencias en internet:

Sistemas de medición mediante análisis de logs

Fue el primer sistema que se utilizó en la Red para medir el número de visitas y de páginas vistas que se generaban en un sitio web. Es lógico que fuera el primer sistema, porque un log no es otra cosa que el “rastro” que queda en los servidores del paso de los usuarios por la página: es el fichero en el que se registran todas las peticiones al servidor, las idas y venidas de los usuarios por un sitio web.

La lógica dice que debería ser el sistema más fiel, ya que un log recoge absolutamente toda la actividad generada en un site. El problema es que esas mediciones podrían servir a nivel interno, pero también son fácilmente manipulables, e incontrolables para una entidad de medición externa.

Un problema adicional es que esos ficheros log son enormemente pesados y para sitios con mucha audiencia se vuelven prácticamente inmanejables: hacen falta enormes discos para almacenarlos y mucho tiempo de procesado para obtener los datos. Por esta razón están en desuso.

Sistemas de medición mediante tags

Este sistema es uno de los más extendidos desde prácticamente los inicios de Internet, y consiste en la integración en todas las páginas de un sitio web de un pequeño código (es decir, un tag) generado por la empresa de medición. Este código realiza una llamada a un servidor externo cada vez que alguien visualiza una página del sitio web en su PC, dejando así una marca en el servidor de mediciones.

Si el código o tag está bien puesto en todas las páginas de un sitio (al final de la página, con un solo tag por página, etc.), y el software que lo gestiona en el servidor es bueno, es uno de los sistemas de medición más fiables. Es el sistema utilizado entre otros por OJDinteractiva, Nielsen Site Census y Market Intelligence o Google Analytics. En algunos casos estos sistemas mediante tags se utilizan únicamente para medición interna (Analytics, por ejemplo) y en otros se utilizan para realizar mediciones públicas de audiencia (caso de OJD o Market Intelligence) y comparar con otros medios online que utilicen el mismo sistema.

A pesar de que el sistema es el mismo, los resultados que aportan las mediciones mediante tags pueden ser muy distintos para el mismo sitio web, dependiendo del sofware analizado para medir y de las normas de cada medidor.

Sistemas de medición mediante paneles

Esta forma de medir se ha heredado de la medición de audiencias en televisión. La idea es llevar a la Red la forma de medir que utiliza por ejemplo Sofres. Consiste en realizar una selección exhaustiva de varios miles de panelistas que, si están bien seleccionados, se supone que representan a todos los internautas de un país.

A estos panelistas se les instala un software especial en su PC que recoge toda su actividad en la Red, y luego estos datos se extractan y analizan para obtener las estadísticas finales de audiencia online.

Su gran ventaja es que mide a todo el mercado, se puede obtener una foto completa de la audiencia online de un país, y así comparar un sitio web con todos sus competidores aunque estos no sean clientes del panel. Otra ventaja es que resulta muy complicado manipularlo porque toda la medición depende única y exclusivamente de la empresa dueña del panel, que es quien controla a los panelistas y el software.

Este sistema es utilizado por las grandes multinacionales de la audiencia, Nielsen Netratings (en su panel llamado Netview) y comsCore. Nielsen Netview es a día de hoy la referencia principal en la medición de audiencia online en España, y cuenta con 16.000 panelistas de hogar y 1.000 panelistas de trabajo.

Sistemas de medición mediante encuestas

Es otro de los tradicionales sistemas de medición de audiencias en los medios de comunicación, siendo el más conocido el Estudio General de Medios (EGM) realizado por la AIMC (Asociación para la Investigación de Medios de Comunicación). Consiste en realizar un alto número de llamadas telefónicas aleatorias realizando una encuesta para preguntar por los medios de comunicación (en este caso online) de consulta habitual por parte del entrevistado.

En este caso los resultados dependen en gran medida de la fuerza de la marca y del grado de afinidad del entrevistado con el sitio web, y no tanto de la actividad real del usuario en la Red. Este sistema beneficia a las grandes marcas y a las empresas con una importante presencia offline o con gran capacidad de marketing.

Sistemas de medición mediante usos de navegación

Con el objetivo de tratar de medir la audiencia global de Internet en el mundo han surgido distintas iniciativas tendentes a realizar mediciones en base a los usos de navegación de los usuarios. Para ello se utiliza un software que almacena información de por dónde pasa el usuario, y así obtener datos estadísticos globales. Es el caso de Alexa, un software con pequeñas utilidades de búsqueda que adicionalmente mide la actividad del usuario en su navegador.

El problema de este tipo de sistemas es que, al menos de momento, no son demasiado fiables porque el software en cuestión está instalado en muy pocos PCs como para ser representativo. Pueden servir para medir grandes tendencias, pero no para obtener datos demasiado concretos.

Google Ana.png
Screen Shoot from Google Analytics


IDENTIFICACIÓN DE LOS PÚBLICOS OBJETIVO
Una vez definidos los objetivos del sitio web llega el momento de determinar cuál será el tipo de audiencia al que se va a dirigir. Ahí puede residir una de las claves del éxito del sitio y, como ya hemos visto en epígrafes anteriores, condicionará el posterior desarrollo del producto, con la intención de lograr la atención de ese público objetivo y tratar de que su experiencia de uso sea lo más completa y satisfactoria posible.

Basándonos en la guía para el desarrollo de sitios web diseñada por el Gobierno de Chile, destacamos algunos planteamientos previos sobre la posible clasificación del tipo de audiencia que es necesario conocer antes de definir al público objetivo. Esta clasificación se puede realizar, entre otros factores, atendiendo a:

  • Su capacidad física: Cuanto más accesible sea el sitio web mejor ya que será susceptible de alcanzar un abanico más amplio de audiencia potencialmente interesada. Dicho de otro modo, es conveniente pensar que dentro de nuestro público objetivo puede haber personas con diversidad funcional, por lo que habrá que evitar que un diseño poco accesible le disuada de visitar nuestra web. Para ello hay que tener en cuenta lo ya expuesto en el apartado 3 del tema 3.
  • Su capacidad técnica: No todo el público dispone del mismo nivel de conocimientos técnicos, por eso los contenidos del sitio web que requieran un nivel de experiencia o conocimientos técnicos más profundos, probablemente no contarán con el acceso del público en general.
  • Sus necesidades de información. Un sector de la audiencia llegará al sitio buscando unos contenidos muy concretos, mientras que otro sector puede desembocar en esa web ‘curioseando’ por si encuentra algún contenido útil para sus intereses.
  • Su ubicación geográfica: Al ser internet de ámbito global, lógicamente pueden llegar usuarios de la web desde cualquier rincón del mundo. Este factor es muy importante a la hora de, por ejemplo, planificar la disponibilidad de nuestros contenidos en diversos idiomas.


Teniendo esto en cuenta, ahora queda determinar cuál es nuestro público objetivo. Según Carla Greta:
“Dependiendo del tipo de sitio web, la audiencia objetivo suele obedecer a clientes potenciales, periodistas, bloggers reconocidos, posibles inversores, etc.
Es importante definir un perfil de la audiencia lo más detallado posible: profesión, edad, trabajo, ubicación geográfica, etc. Conocer la audiencia objetivo hará posible tomar importantes decisiones con mayor conocimientos, como la elección de palabras claves, inclusión en directorios web e incluso el presupuesto para la publicidad cuando se inicia una campaña de posicionamiento”.

Por su parte, Miguel Ángel Álvarez apela al sentido común para identificar de partida a ese público objetivo, aunque también apunta algunas estrategias que son especialmente útiles en el ámbito empresarial:
“Una de las maneras más fáciles, asequibles y directas de conocer quién nos visita es analizar el perfil de las personas que se ponen en contacto con nosotros, sea cual sea la vía de comunicación que utilicen. Por ejemplo, podemos analizar todo el correo electrónico que recibimos, los formularios de contacto que nos envían, o incluso las llamadas de teléfono a nuestras oficinas. Todos estos datos nos darán un perfil de usuario/s que entran en nuestro sitio".

Más información en: Identificación de los públicos objetivo


3.2.1.1. Google Analytics

Cuando hacemos referencia a las herramientas de medición de audiencias de una web, no podemos olvidarnos de Google Analytics, la opción más razonable y fiable, ya que los datos lo aportan los propios usuarios que navegan por el sitio web, y son “la realidad” del sitio (ni mediciones genéricas de barras, ni del propio Google).
Google Analytics nos ofrece muchos datos, entre ellos:
  • Tiempo medio de carga de página: Este es el tiempo desde que se lleva la petición hasta que la página queda cargada completamente (con imágenes, publicidad y todo).
  • Tiempo medio de redireccionamiento: Este es el tiempo que se lleva desde que se pide la página hasta que se empieza a descargar la información de la página final. Si hay páginas intermedias que redireccionan, se cuenta aquí.
  • Tiempo medio de búsqueda de dominio: Es el tiempo que se lleva la búsqueda de las DNS para una petición. Si hay muchas peticiones DNS distintas, el tiempo se eleva.
  • Tiempo medio de conexión de servidor: Es el “famoso” connect. Va relacionado con la configuración del servidor y la conectividad.
  • Tiempo medio de respuesta de servidor: Es el “famoso” waiting. Suele ir relacionado con el tiempo de proceso de la página, de caché y de comienzo de envío.
  • Tiempo medio de descarga de la página: Es el “famoso” send. El tiempo que va desde que se manda el primer byte hasta que se manda el último byte del contenido.

3.3. Contenidos

Selección de contenidos

3.4. Estructura

Planteamiento de la estructura

Durante el proceso de Arquitectura de Información se usan diferentes formas de representación, con diferentes objetivos. Por ejemplo, en la aplicación de la técnica de Card Sorting se pueden generar dendogramas y gráficos de escalamiento multidimensional; otro ejemplo serían las representaciones de las estructuras mentales de los usuarios tras una tormenta de ideas (brainstorming); o los organigramas de la empresa por la cual se crea el producto digital. Los diagramas proponen cómo será el producto final: la organización de los contenidos del producto, el funcionamiento básico del mismo y la ubicación que tendrán estos contenidos en la interfaz; representan los contenidos que tendrá un producto digital, y las relaciones entre dichos contenidos.
Los diagramas se deben realizar a partir de la información recogida durante las etapas de investigación de la audiencia, en las que se estudia a los usuarios con el objetivo de crear un producto que satisfaga sus necesidades.

Los autores anglosajones, pioneros en los temas del diseño y representación del software, dividen estos diagramas en 2 tipos:
  • Blueprints o Architecture Map: tienen como objetivo representar "las principales áreas de organización y rotulado” (Rosenfeld & Morville), y están enfocados a los aspectos estructurales y de funcionamiento del producto. Generalmente se representan con textos, cajas y flechas. Parten de lo general a lo particular, de lo abstracto a lo concreto. Wireframes, Mockup o Prototype: tienen el objetivo de "mostrar el contenido de las páginas" (Rosenfeld & Morville), concretando los elementos que se plantearon en los primeros planos (blueprints) y ubicándolos en las páginas o pantallas del producto final. Están comprendidos como prototipos de baja fidelidad, ya que se realizan en "blanco y negro" y no muestran el diseño gráfico del producto ni la funcionalidad de sus códigos de programación.

Los niveles de prototipos son:
  • Prototipos de baja fidelidad o estáticos (wireframes, mockup)
  • Prototipos de fidelidad intermedia (diseño gráfico)
  • Prototipos de alta fidelidad o dinámicos (Web, HTML)
    Ronda León, Rodrigo; (2007). La diagramación en la arquitectura de información
    Ronda León, Rodrigo; (2007). La diagramación en la arquitectura de información
En la página web no solo usabilidad podemos encontrar diferentes aplicaciones software que se utilizan para la confección de diagramas: los que originalmente fueron ideados para hacer diagramas, y los que originalmente no fueron pensados para diagramación, pero que también pueden usarse con este objetivo ya que son poderosas herramientas de diseño gráfico.
Algunas aplicaciones software que fueron ideadas para hacer diagramas:


Aplicaciones software que no fueron ideadas específicamente para hacer diagramas:


Se trata de una aplicación que tiene como función realizar dibujos de alto nivel utilizando el manejo de vectores fundamentalmente, pero también permite ser utilizada para la publicación de páginas Web, y además se puede emplear para elaborar maquetas para impresión.
El paso de los años le proporcionó nuevas y distintas funcionalidades que iban mejorándose a sí mismas con la llegada de nuevas versiones.
Además de poder realizar diseños digitales, también se puede emplear para la elaboración de planos de alta calidad, por lo que es útil para estudiantes y profesionales de Arquitectura o Ingeniería, que son disciplinas dependientes del Dibujo Técnico, además de complementarse con diversas aplicaciones que permiten la elaboración, entre otras cosas, de diseños tridimensionales.
Es muy destacable la facilidad de uso de Corel Draw, con una interfaz gráfica sencilla que cuenta con una gran cantidad de herramientas.


Permite idear y diseñar proyectos para la impresión. Proporciona un entorno gráfico fácil de aprender para realizar ilustraciones, organizar información o componer guiones mediante un simple clic.
La organización de las herramientas permite facilidad de uso, pudiendo organizarse rápidamente contenido y componentes, así como crear relaciones persistentes entre objetos, sin sacrificar la capacidad de edición.
Permite la creación de presentaciones atractivas y la colocación de interactividad entre objetos y páginas, y también de diseños complejos de gran impacto.
También se pueden crear componentes gráficos dinámicos para anuncios, objetos de la interfaz y titulares que llamen la atención, así como aspectos realistas de alta resolución, tales como la sombra.


Es una aplicación que se emplea para realizar gráficos vectoriales y que está desarrollada por la empresa Adobe Systems.
Disponible en versiones para Mac OS X y Microsoft Windows, Adobe Illustrator posee opciones creativas, con un acceso simple a las herramientas y una gran versatilidad para realizar con rapidez gráficos flexibles. Es una aplicación en forma de taller de pintura y fotografía que trabaja sobre un lienzo y que esta destinado para la edición, retoque fotográfico y pintura a base de imágenes de mapa de bits.

Curso Adobe Illustrator CS3.jpg

Planos/Blueprints
Blueprint es un complemento para desarrolladores de webs que aumentará la productividad en las tareas de diseño y maquetación de páginas. Se trata de una serie de librerías de Hojas de Estilo en Cascada que contienen código útil para maquetar una página web y aplicar otros tipos de estilos tipográficos o de impresión, algo que comúnmente conocemos como Framework CSS.
Este sistema nos ofrece una serie de archivos con código CSS que podremos incluir en las páginas web para aplicar estilos de una manera rápida, y solucionar también muchos de los problemas de compatibilidad entre navegadores que pueden surgir durante la etapa de maquetación.
Existen diversos Framework CSS disponibles de manera gratuita en Internet, creados por varios desarrolladores distintos. Blueprint es quizás el más conocido, o por lo menos uno de los más populares y prueba de ello es que se han creado incluso algunas variantes o productos derivados para ajustar Blueprint a las distintas necesidades de los desarrolladores.

Qué es un Framework CSS

Quizás convendría definir qué se conoce como framework CSS. Pues simplemente se trata de una serie de declaraciones de estilos definidos de forma estándar para que sirvan como base para el diseño de todo tipo de webs. Por decirlo de otra manera, es un poco de código CSS que se podría considerar útil para desarrollar cualquier tipo de web y que se pone a disposición para solucionar diversos problemas o situaciones, comunes en el desarrollo de webs.
Cada framework CSS, aunque quizás deberíamos llamarles simplemente "Librerías CSS", tiene su propia filosofía a la hora de crear el código para solucionar esos problemas. Algunas veces las formas de actuar son similares y otras veces distintas, por ello el uso o no de los frameworks CSS, así como la elección del mismo es una decisión muy particular de cada programador o desarrollador web.

Características de Blueprint

El framework CSS Blueprint está creado sobre una sólida base de código CSS que ayudará a desarrollar el diseño y maquetación de sitios web. Entre las cosas que nos aporta podemos destacar:
  • Una rejilla, que nos permitirá crear cualquier estructura de página web. Básicamente se trata de un conjunto de clases CSS para posicionar cualquier elemento en un espacio de 950 píxeles de anchura, dividido en 24 columnas.
  • Una definición de tipografía predeterminada, de manera precisa para todos los elementos de la página que pueden tener texto.
  • Estilos para formularios, con los que mejorar las interfaces de usuario.
  • Estilos para impresión, con las definiciones CSS más útiles para que las páginas se lean bien cuando se imprimen en papel.
  • Estilos específicos para IE, con los que resolver algunos de los problemas más comunes de Internet Explorer.
Con todo esto conseguimos una base con la que comenzar fácilmente a hacer páginas web complejas y que serán más compatibles en distintos navegadores. Además, Blueprint se completa con algunos plugins creados por terceras personas que sirven para hacer cosas más avanzadas o diferentes. Por ejemplo hay plugins para conseguir iconos, para hacer páginas fluidas (que se adaptan a la anchura de la ventana del navegador), etc
Para comenzar a usar Blueprint tenemos que acceder a su página web y descargarlo, a través de su página web:http://www.blueprintcss.org/

Maquetas/Wireframe
La primera etapa en el diseño de una web debe comenzar por la representación esquemática de nuestro proyecto.
El wireframing o prototipado en el diseño web es el conjunto de dibujos que representan cómo estarán organizados los elementos web de nuestro proyecto.
Pese a incluir únicamente los aspectos más relevantes de nuestra página o aplicación es importante llevar este tipo de prácticas siempre antes de empezar a programar, para crear una referencia que permita definir su estructura y distribución visual.
Entre las ventajas de usar wireframes encontramos fundamentalmente que estos prototipos se convierten en una referencia para nuestro equipo y para nuestro cliente, sobre el que fácilmente podremos llevar a cabo todo tipo de cambios que una vez en la etapa de programación resultarán mucho más costosos y complicados de implementar.
Pese a que existen herramientas como Balsamiq o iplotz para llevar a cabo estos prototipos en muchas ocasiones lo más recomendable es simplemente tomar nuestra libreta y dejar rienda suelta a nuestra imaginación y conocimientos para esbozar y situar los elementos de nuestro nuevo diseño.

Para ejemplificar las posibilidades a la hora de llevar a cabo un wireframe www.wireframeshowcase.com.


Maquetas/Mockups

Mockups To Go ofrece maquetas de elementos de distintas interfaces, elaboradas de forma altruista por usuarios que deciden compartir su trabajo con cualquiera que este interesado.Este website resulta útil para aquellos diseñadores y/o desarrolladores que estén en una fase inicial de sus proyectos


Interesados en consultar los componentes ofrecidos pueden acceder a esta colección desde mockupstogo.net

.

Maqueta en wordpress
The Free WordPress Themes es el nombre que recibe este conjunto de plantillas que reúne la web especializada en themes gratuitos para WordPresss, Freewptheme, para ofrecer su descarga en formato .ZIP a cualquier usurario interesado.

Cada plantilla de las ofrecidas dispone de un link con el que acceder a su previsualización o descarga de forma gratuita. Las plantillas reunidas en esta colección están disponibles bajo licencia Creative Commons Attribution 2.5 que permite su uso personal y comercial.Muchas de los themes ofrecidos solo están disponibles como CSS templates.

Interesados pueden acceder a The Free WordPress Themes.

Smashingmagazine nos trae esta interesante colección gratuita de texturas paradiseñadores web.
Esta colección, está compuesta por 100 diferentes texturas en una amplia variedad de categorías (tejidos, cartones, papel, madera, paredes, superficies, texturas arenosas, agua) .
Cada imagen está vinculada a la página web de su autor desde donde se podrá realizar la descarga.La mayoría de estas texturas dispone de una resolución 500×450 píxeles a 72ppp.Pese a tratarse de un repositorio de fuentes gratuitas es importante leer los términos y condiciones de uso estipulados por el propietario.

Interesados en esta colección de 100 texturas gratuitas pueden acudir a www.smashingmagazine.com

FORMATOS. Algunos formatos de archivo están diseñados para almacenar tipos de datos muy particulares: el formato JPEG, por ejemplo, está diseñado para almacenar solamente imágenes estáticas. Otros formatos de archivo, sin embargo, están diseñados para almacenar varios tipos diferentes de datos: el formato GIF admite almacenar imágenes estáticas y animaciones simples, y el formato QuickTime puede actuar como un contenedor para muchos tipos diferentes de multimedia. Un archivo de texto es simplemente uno que almacena cualquier texto, en un formato como ASCII o Unicode, con pocos o ninguno caracteres de control. Algunos formatos de archivo, como HTML, o el código fuente de algún lenguaje de programación particular, también son de hecho archivos de texto, pero se adhieren a reglas más específicas que les permiten ser usados para propósitos específicos.

LENGUAJE HTML. HTML es un lenguaje de marcas orientado a la publicación de documentos en Internet. La mayoría de las marcas son semánticas. HTML es un lenguaje extensible , al que se le pueden añadir nuevas características, marcas y funciones. Los documentos HTML están formados por una serie de bloques de texto con una entidad lógica (titulares, párrafos, listas, ...). La interpretación de estas entidades se deja al navegador, lo cual da una gran flexibilidad a la presentación del documento, que puede ser mostrado, por ejemplo, en terminales gráficos o de texto. El HTML, es el lenguaje que permite diseñar los hipertextos. Hoy en día, la mayoría de los procesadores de textos disponen de opciones para guardar los documentos en este formato, por lo que no presenta dificultad.

LENGUAJE HTML5
HTML 5 ya que no es simplemente una nueva versión del lenguaje de marcación HTML, sino una agrupación de diversas especificaciones concernientes a el desarrollo web. Es decir, HTML 5 no se limita sólo a crear nuevas etiquetas, atributos y eliminar aquellas marcas que están en desuso o se utilizan inadecuadamente, sino que va mucho más allá.
Así pues, HTML 5 es una nueva versión de diversas especificaciones, entre las que se encuentran:
  • HTML 4
  • XHTML 1
  • CSS Nivel 2
  • DOM Nivel 2 (DOM = Document Objetc Model)

A la par, HTML 5 pretende proporcionar una plataforma con la que desarrollar aplicaciones web más parecidas a las aplicaciones de escritorio, donde su ejecución dentro de un navegador no implique falta de recursos o facilidades para resolver las necesidades reales de los desarrolladores. Para ello se están creando unas APIs que permitan trabajar con cualquiera de los elementos de la página y realizar acciones que hasta hoy era necesario realizar por medio de tecnologías accesorias.
Estas API, que tendrán que ser implementadas por los distintos navegadores del mercado, se están documentando con minuciosidad, para que todos los Browsers, creados por cualquier compañía las soporten tal cual se han diseñado. Esto se hace con la intención que no ocurra lo que viene sucediendo en el pasado, que cada navegador hace la guerra por su parte y los que acaban pagándolo son los desarrolladores y a la postre los usuarios, que tienen muchas posibilidades de acceder a webs que no son compatibles con su navegador preferido.
Cuándo estará listo HTML 5Según informan en la página de la organización WHATWG, HTML 5 se prevé esté listo como especificación de implementación recomendada en el 2012. ¿Quiere esto decir que vamos a tener que esperar hasta 2012 para aprovechar las ventajas de HTML 5? realmente no es justamente así, puesto que algunos navegadores ya implementan muchas de las características del moderno lenguaje.
Resulta que HTML 5 está formado por muchos módulos distintos, cuyo grado de especificación está en niveles dispares. Por tanto, muchas de las características de HTML 5 están ya listas para ser implementadas, en un punto de desarrollo que se encuentra cercano al que finalmente será presentado. Otras muchas características están todavía simplemente en el tintero, a modo de ideas o borradores iniciales.
De hecho, las versiones más nuevas de casi todos los navegadores, incluido el polémico Internet Explorer 8, implementan algunas de las características de HTML 5. Claro que, para que una web se vea bien en todos los sistemas, hay que utilizar sólo aquellas partes que funcionan en todos los navegadores, por lo que a día de hoy, pocas son las utilidades realmente disponibles del lenguaje, si queremos hacer un sitio web compatible. No obstante, en el peor de los casos, podemos empezar a usar a nivel experimental estas características, aunque sólo sea para frotarnos las manos en espera de incorporarlas realmente en nuestras prácticas de desarrollo habituales.
Cuáles son las novedades de HTML 5HTML 5 incluye novedades significativas en diversos ámbitos.No sólo se trata de incorporar nuevas etiquetas o eliminar otras, sino que supone mejoras en áreas que hasta ahora quedaban fuera del lenguaje y para las que se necesitaba utilizar otras tecnologías.
  • Estructura del cuerpo: La mayoría de las webs tienen un formato común, formado por elementos como cabecera, pie, navegadores, etc. HTML 5 permite agrupar todas estas partes de una web en nuevas etiquetas que representarán cada uno de las partes típicas de una página.
  • Etiquetas para contenido específico: Hasta ahora se utilizaba una única etiqueta para incorporar diversos tipos de contenido enriquecido, como animaciones Flash o vídeo. Ahora se utilizarán etiquetas específicas para cada tipo de contenido en particular, como audio, vídeo, etc.
  • Canvas: es un nuevo componente que permitirá dibujar, por medio de las funciones de un API, en la página todo tipo de formas, que podrán estar animadas y responder a interacción del usuario. Es algo así como las posibilidades que nos ofrece Flash, pero dentro de la especificación del HTML y sin la necesidad de tener instalado ningún plugin.
  • Bases de datos locales: el navegador permitirá el uso de una base de datos local, con la que se podrá trabajar en una página web por medio del cliente y a través de un API. Es algo así como las Cookies, pero pensadas para almacenar grandes cantidades de información, lo que permitirá la creación de aplicaciones web que funcionen sin necesidad de estar conectados a Internet.
  • Web Workers: son procesos que requieren bastante tiempo de procesamiento por parte del navegador, pero que se podrán realizar en un segundo plano, para que el usuario no tenga que esperar que se terminen para empezar a usar la página. Para ello se dispondrá también de un API para el trabajo con los Web Workers.
  • Aplicaciones web Offline: Existirá otro API para el trabajo con aplicaciones web, que se podrán desarrollar de modo que funcionen también en local y sin estar conectados a Internet.
  • Geolocalización: Las páginas web se podrán localizar geográficamente por medio de un API que permita la Geolocalización.
  • Nuevas APIs para interfaz de usuario: temas tan utilizados como el "drag & drop" (arrastrar y soltar) en las interfaces de usuario de los programas convencionales, serán incorporadas al HTML 5 por medio de un API.
  • Fin de las etiquetas de presentación: todas las etiquetas que tienen que ver con la presentación del documento, es decir, que modifican estilos de la página, serán eliminadas. La responsabilidad de definir el aspecto de una web correrá a cargo únicamente de CSS.

Como se puede ver, existirán varios API con los que podremos trabajar para el desarrollo de todo tipo de aplicaciones complejas, que funcionarán online y offline. Quizás se entienda mejor por qué HTML 5 es un proyecto tan ambicioso y que está llevando tanto tiempo para ser elaborado.


3.4.1 ¿Seguimos con Flash o cambiamos a HTML 5?

Cualquier empresa o departamento dedicado a la creación de contenidos está ahora mismo inmersa en esta disyuntiva, seguir produciendo en Adobe Flash o empezar a producir desde ya mismo en HTML5.
¿Qué ventajas e inconvenientes presenta cada alternativa?
Veamos las ventajas e inconvenientes.
  • Accesibilidad
Si optamos por HTML 5, el usuario no se verá obligado a instalar ningún plug-in adicional. Además el contenido será accesible para la mayoría de dispositivos móviles pero hay que tener en cuenta que, pese a ser un estándar, hay ciertas salvedades como la compatibilidad de video. Dependiendo de la combinaciónnavegador-codec-contenedor es necesario codificar el video en diferentes formatos.
Por otro lado la implementación será lenta y progresiva, llevará años. Uno de los test más conocidos es The HTML5 Test. Sobre un total de 400 puntos, califica el nivel de implementación de cada navegador. Los resultados actuales son los siguientes:

=

external image html5test.jpg

=

  • El esfuerzo necesario y el resultado final
Se ha hablado de cómo Canvas va a sustituir las animaciones Flash pero yo no veo muchas posibilidades de que esto vaya a suceder. Hay dos hechos que me hacen ser poco optimista al respecto:
  1. Construir una animación sencilla en HTML5 con Canvas supone unas 10 veces el tiempo que supone hacerlo en Flash
  2. El resultado final no es, ni de lejos, tan bueno.
Por otro lado es cierto que HTML5 es libre y abierto, a diferencia de lo que sucede en Flash, no es necesario pagar licencias para desarrollar en HTML5 pero el coste de una licencia de Adobe Flash no supera los 1.000 € por lo que no creo que este coste tenga mucho peso en la decisión.
  • Los dispositivos móviles


    HTML5 huele a dispositivo móvil , en este sentido, añade algunas cuestiones muy interesantes y que cobrarán importancia como lageolocalización del usuario. Las pruebas técnicas realizadas muestran queHTML5 consume menos recursos que Flash y éste es un hecho muy a tener en cuenta cuando hablamos de móviles.
Hoy en día, llamamos dispositivos móviles a una gran variedad de dispositivos. Existen diferencias entre un ultraportátil, un tablet y un Smartphone, las prestaciones son inversamente proporcionales a la movilidad y yo no estoy muy convencido, por ejemplo, de que un iPad sea un dispositivo muy móvil.
Todo tiene sus ventajas y sus inconvenientes, entonces…¿Qué hacemos?
Marcello Rinaldi, comentaba en su libro sobre mlearning que la formación sobre dispositivos móviles debemos entenderla como un complemento, como una parte de un proyecto global.
A la hora de construir contenidos, debemos tener en cuenta este concepto y hacer algo parecido.
Más que pensar en migrar a HTML5 todo el catálogo de cursos de mi empresa, para que sea compatible con dispositivos móviles, debemos pensar si tiene sentido que un usuario acceda a esos cursos desde un Smartphone o debería complementar mi curso de catálogo con pequeñas acciones formativas(Podcasts, Tips, vídeos, acceso a redes sociales) accesibles desde dispositivos móviles.
Si un cliente me contrata para desarrollar un curso a medida, analizaré desde qué dispositivos van a acceder los usuarios y, si son varios dispositivos, evaluaré la mejor opción que, probablemente, pase por utilizar una herramienta que me permita desarrollar el contenido abstrayéndome del dispositivo y después publicar en diferentes formatos. Un ejemplo de esto sería Lectora de Trivantis.

=

external image PC_iPad_smartp.jpg

=

En definitiva, vivimos en una realidad cambiante, en una eterna fase beta y debemos adaptarnos, como siempre. Esto va a suponer dotar a nuestras empresas de métodos de producción que permitan la publicación sobre diferentes dispositivos, sin alterar de forma significativa, el proceso de producción.
En cualquier caso debemos tener en cuenta que, por un lado, una parte importante de la formación es de origen “marketiniano”, no sirve para formar sino para “seducir” y, por otro lado, que será necesario experimentar con todas las nuevas opciones relacionadas con la formación en un contexto de movilidad (Realidad aumentada, geolocalización, etc).


3.5. Sistema de navegación

Creación del sistema de navegación
Sumamos otro ejemplo, además de éste del Gobierno de Chile:

La Agencia de Calidad Sanitaria de Andalucía dependiente de la Junta de esta comunidad autónoma, ha editado un manual de acreditación de páginas web sanitarias. Se trata de un trabajo que sugiere una serie de normas en cuanto a las características que una web de contenido sanitario debe tener para que el organismo del que depende pueda optar a un grado de calificación de su calidad. El material está estructurado en cuatro bloques: los derechos de los usuarios, la gestión de la información, los contenidos sanitarios y la prestación de servicios y la evaluación de criterios que debe tener una web asistencial de carácter público. Aunque esta herramienta nació en Andalucía, posee un espíritu de universalidad para que sea adaptado a cualquier comunidad o gobierno. Fue redactado por un comité de asesor formado por expertos en materia procedentes del ámbito de la universidad, la sanidad y las nuevas tecnologías.

Es un claro testimonio de cómo las formas, los códigos, de constituir la arquitectura de una página web, supone un reconocimiento de la institución que la impulsa.

Este es el esquema de los bloques que recoge esta iniciativa andaluza:


Bloques
Criterios
Aspectos

I. Derechos de los usuarios
1. Audiencia prevista
Audiencia prevista
2. Usabilidad
Navegación
Legibilidad y diseño visual
Redacción
Rotulado
Organización de contenidos
3. Accesibilidad
Nivel de conformidad
Perceptible
Operable
Comprensible
Robusto
Acceso
4.Confidencialidad-privacidad
Confidencialidad-Privacidad

II. Gestión de la información
5. Transparencia y honestidad
Propiedad del sitio web
Financiación y patrocinio
Finalidad y objetivo
6. Credibilidad
Garantía
Interactividad
7. Política Editorial
Responsabilidad
Enlaces
Términos de uso
8. Elementos de relación con usuarios del sitio web
Relación con los usuarios
Herramientas colaborativas: Comunidades virtuales de salud, redes sociales, blogs y wikis
Otras herramientas de la web social

III. Contenidos Sanitarios y prestación de servicios
9. Atribución de contenidos
Fuentes de información facilitada
Autoría y referencias
10.Actualización de la información
Fecha de actualización de la información
11. Prestación de servicios y publicidad
Prestación de servicios electrónicos y publicidad

IV. El centro como parte del SSPA
12. Identidad y responsabilidad
Identidad
Responsabilidad
13. Estructura y organización de la actividad del centro
Organización del centro
Servicios y prestaciones
Sistemas de Calidad y resultados
14. La ciudadanía, centro del sistema sanitario
Atención a la ciudadanía
Información y documentación de interés para el paciente
15. Los profesiones
Atención al profesional
Formación al profesional


Y este es el manual:

http://www.juntadeandalucia.es/agenciadecalidadsanitaria/programas_de_acreditacion/paginas_web_sanitarias/el_manual_de_acreditacion.html

Elementos de los Sistemas de Navegación

Barras de Menús

Los menús son la parte más importante de los Sistemas de Navegación. Gracias a ellos, es que el usuario puede navegar libremente por la página, ir a cualquier otra página interna, y recorrer el site sin temor a que su ruta desaparezca. Un menú siempre debe permanecer constante, y lo más recomendable es que no cambie su ubicación ni su diseño en la página (color, tamaño, tipo de letra, etc..)
Hay dos tipos de barras de menús, los menús horizontales y los verticales. Ambos, en mi perspectiva, son igualmente usados en los diseños web. Los dos permiten desarrollarse en menus desplegables (aunque es más recomendable utilizar los menús horizontales para ello), y los dos también, permiten desarrollarse en botones de rollover.
Si se desea lograr un buen diseño, es recomendable que la fuente que se utilice sea clara y grande, con un color que contraste con el fondo, para permitir una buena lectura. También es recomendable utilizar Sistemas de Etiquetado en el menú, es decir, utilizar iconos en vez de palabras, para que la página adquiera identidad, y sea más fácil para el usuario reconocer puntos estratégicos del site.
Otro punto importante es indicarle al usuario en qué parte del menú está. Eso se logra con un cambio en el color del texto, o con una señal (si es una imagen) que indique que el usuario se encuentre en esa página (un blur distinto a la imagen, una flecha, un cambio en el icono, etc...)

Site Maps

Un site map es una página interna que lista las páginas que contiene un sitio web, organizadas jerarquicamente. Es decir, hace un desglose completo del site y los organiza en una especie de "árbol sinóptico", que algunas veces es presentado en forma de gráfico, y otras, en forma de lista. Esto ayuda a los visitantes a conocer más a profundidad la página.
Los site maps pueden mejorar la optimización para los motores de búsqueda de un sitio asegurándose que todas ellas puedan ser encontradas. Esto es especialmente importante si el sitio usa menús Macromedia Flash o JavaScript que incluyan enlaces HTML.
La mayoría de los motores de búsquedas sólo seguirán un finito número de enlaces desde una página, así si el sitio es muy grande, se deberán usar estrategias adicionales además del site map requerido por los motores de búsqueda y para que los visitantes puedan acceder al contenido.
Muchos usuarios comunes de la web no conocen, ni saben cual es la utilidad de los site maps. Éste es un recurso que puede ayudar mucho en la navegación del site, brindando rutas de links rápidas y dando a conocer páginas internas que tal vez el usuario podría pasar por alto. Por ésta razón es que Google implementó Google Sitemaps, que es un sistema que recomienda para que informemos a su robot de búsqueda sobre las páginas que tenemos en nuestro sitio web. De esta manera, Google podrá rastrear más fácilmente nuestros contenidos y podremos aparecer así en los resultados del buscador. Además, también proporciona estadísticas del acceso del robot, y resúmenes de posibles errores de rastreo.

¿Por qué es necesario un Sistema de Navegación?


Para evitar que los usuarios puedan "perderse" dentro de la web y se muestren confundidos y frustrados antes ella provocando así un rechazo de la misma. El sistema de navegación es necesario para dotar de sentido al entorno y dar flexibilidad al movimiento dentro del sitio. Debe tenerse especial cuidado con el equilibrio que debe existir entre la flexibilidad en la navegación y la inclusión de excesivas opciones que podrían confundir y desorientar al usuario. Los sistemas de navegación son una pieza de vital importancia para la experiencia del usuario de nuestro sitio web.

Características de un Sistema de Navegación

  • - Constituir una manera de ir de un sitio a otro dentro de la web. La navegación debe ser clara, concisa, consistente y fácilmente identificable dentro de la página. Debe ser “transparente”: nadie debe darse cuenta de que hay un sistema de navegación o de que está usándolo.
  • - Informar al interesado de la relación existente entre el contenido que está visualizando y la navegación del sitio. El usuario tiene que saber siempre dónde se encuentra, hacia donde puede ir desde este punto y que partes del sitio ha visitado ya.
  • - Hay que diferenciar la navegación global, la navegación local o subsecciones y la navegación contextual.
  • - Permitir volver a la página de inicio ágilmente. La página de inicio sirve como punto de partida y como lugar al que volver cuando nos encontramos perdidos, por eso debe ser sencillo ir a este punto desde cualquier parte del sitio.
  • - Hay que establecer desde el principio las posibilidades de agrandamiento de ese site y crear un sistema de navegación que permita cubrir esas posibilidades sin desvirtuars

Como señala una de sus principales características, es importante que los interfaces de navegación muestren las respuestas básicas al usuario acerca de dónde ha estado, dónde está y dónde puede ir.

Siempre es bueno incluir un apartado indicando las dudas más frecuentes de los usuarios, de ese modo facilitaremos información a muchas personas. también es útil incluir un apartado de contacto para poder facilitar al usuario la solución de dudas y cuestiones directamente y puedan ser respondidas de mnera directa e individual.
Mostrar la ubicación actual es importante para el usuario y debe hacerse con relación a dos aspectos: en relación con la web y en relación con la estructura del sitio.

En cuanto a la primera relación, para indicar al usuario donde está en cada momento en relación a la Web, existen reglas básicas, siendo la primera de ellas incluir un elemento identificador del sitio en cada página, por ejemplo, el logotipo de una empresa. En la mayoría de las páginas se coloca en la esquina superior izquierda. Además debe convertirse en vínculo hacia la página inicial, de esta forma para los usuarios será fácil volver a la página de inicio desde cualquier punto en el que se encuentren.

nav 1.jpg

En relación a la estructura del sitio es importante resaltar el área donde se encuentra la página y tener un titular claro que indique en contenido principal de la página. Además, el título de la página del encabezado HTML debe tener un nombre significativo que permita a los usuarios localizarla fácilmente si quien añadir la página a sus marcadores.

nav 2.jpg

Para responder al usuario acerca de los sitios en los que ya a estado, existen varias fórmulas. Por un lado, el botón atrás lleva directamente a la página anteriormente vista; el historial recoge las páginas que se han visitado; y los vínculos de hipertexto aparecen en un color diferente cuando se ha visitado una página. Estas opciones son válidas para el usuario por dos motivos: para no perder el tiempo yendo a la misma página que ya había visitado, y para que se haga una idea de la estructura del sitio.

Acerca de la pregunta de a dónde se puede ir responden todas las opciones de navegación y los hipervínculos que pueda haber en la página. De estos existen varios tipos:

- Vínculos incrustados: aquel texto que aparece subrayado qué indica que hay más contenido sobre él de lo que se menciona en el primero.
- Vínculos estructurales: son vínculos que señalan directamente a otro nivel de la estructura del sitio. Por ejemplo una cita conectado con su autor.
- Vínculos asociativos: son vínculos que crean asociaciones indefinidas. Suelen utilizarse para mostrarle al usuario contenido parecido o relacionado con el que él está visitando.

Los vínculos se manifiestan con texto subrayado y con color azul para aquellos que no han sido visitados, cambiando a morado cuando el usuario ya lo ha visto.

Navegabilidad


La navegabilidad de una página web se refiere a la facilidad con que un usuario puede desplazarse por ella. Si una página web es clara, sencilla, comprensible,
ofrece al usuario una experiencia satisfactoria.
Cuando diseñamos una página web debemos proporcionarle al usuario una serie de recursos y estrategias para que logre conseguir con autonomía y rapidez
la información que está buscando. Una página web tiene un nivel óptimo de navegabilidad cuando su interfaz le responde al usuario las siguientes preguntas:
¿Dónde estoy?, ¿dónde he estado?, ¿dónde puedo ir?

Para resumir: La estructura de navegación debe dar pistas claras para que el usuario aprenda a acceder a la información.

La navegabilidad web puede determinarse a partir de tres principios:
1- La estructura del sitio: es la organización interna de una página web: se refiere a cómo se categorizan los contenidos en niveles de importancia, en secciones
y subsecciones, etc. Una organización y categorización simple, clara y estable facilita la búsqueda de información de los usuarios de un sitio.
2- La localización: cuando se trata de páginas complejas, es necesario que el usuario pueda identificar con facilidad en qué lugar de la página se encuentra.
3- El contexto: guiará en todo momento al visitante de una página web. El diseño de una página debe proveer a los usuarios referencias explícitas que ayuden
a diferenciar una sección de otra. Para ello es necesario que cada sección de un sitio ofrezca un contexto específico, por ejemplo modificando la paleta
de colores.

Algunas recomendaciones:
- Incorporar el menú de navegación. Permite que los usuarios accedan directamente a la sección de la página que les interesa, y desplazarse libremente por las diferentes secciones de una página.
- Poder volver en un clic a la página principal. Usualmente esto se logra con el botón o enlace “inicio”, que remitirá directamente a la página principal del sitio.
- Regla de los tres clics. Siempre es recomendable que un usuario pueda acceder a cualquier parte del sitio con solo hacer tres clics; si son muchos más es señal de que la organización es engorrosa.
- Crear un mapa del sitio. Es un recurso sencillo pero de mucha utilidad, ya que permite a los usuarios conocer de qué modo está organizada la información en la página web.



Según explica A. Herrera Bustamante en Master - Net, la navegabilidad deber ser entendida como: aquellas premisas que nos permiten construir nuestro web de manera lógica, en el que la información se encuentra de manera muy intuitiva, de carga rápida en el navegador, lo que supone un ahorro de tiempo y genera valor añadido en nuestro site.

Según Herrera Bustamante, las claves para lograr una buena navegabilidad son:

La navegación recursiva:
  • [...] menú que tiene que estar siempre presente en todas nuestras páginas web, es decir, el link que va a la página principal

Mapa del web:
  • [...] Esto va a proporcionar a los surferos en nuestro site, encontrarse a sí mismos y la información que buscan.

Directorio Dinámico:
  • [...] Se trata de una pequeña línea en la parte superior de la página que nos va indicando el lugar en el que nos encontramos y por el que vamos navegando. Nos enseña los directorios y subdirectorios por los que hemos pasado, hasta llegar a la página actual. Además, no hay que olvidar añadirles un link que nos permita volver hacia atrás en nuestra navegación con solo un click en cualquier momento.

Distribución de la información de manera lógica:
  • La finalidad de esto es conseguir un mejor acceso a la información de forma rápida y clara, con los menores toques de ratón posibles. Tengamos en cuenta que cada toque de ratón significa el volver a cargar una página en el navegador [...]

Inclusión de imágenes de bajo peso:
  • Siempre que sea posible hay que añadir imágenes relacionadas con el tema en cuestión, ya que Internet es mayoritariamente visual. Pero por lo comentado anteriormente, debemos tener en cuenta que las imágenes tardan en cargar bastante en los browsers y por ello deben ser lo menos pesadas posibles.

Depurar el código fuente siempre que sea posible:
  • [De no ser así] [...] los navegadores tardan más en mostrar la información haciendo que la navegación por la web sea más lenta y pesada



Tipos de navegación

Tomando como referencia el trabajo de investigación realizado por Valentín Linares Sánchez (gestor de proyectos en eDreams) “Análsis de sistemas de navegación de sitios web (2004)”, nos encontramos con aportaciones importantes de autores relevantes en este campo: Jakob Nielsen en el libro “Usabilidad. Diseño de sitios Web” habla sobre la sensación de pérdida que siente el usuario ante la web cuando desconoce su situación actual en relación a la estructura global de la información del sitio Web y no percibe la relación que hay entre la página actual y el resto de páginas; cuando desconoce la ruta de navegación que ha seguido hasta la posición actual y por consiguiente no es capaz de identificar las páginas ya visitadas; y por último, cuando no puede identificar los enlaces que contienen información relacionada con la página actual.
Según los autores Louis Rosenfeld y Peter Morville en el libro "Arquitectura de la información para la World Wide Web", existen cuatro tipos diferentes de sistemas de navegación, que permiten al usuario ubicarse y desplazarse a través de las estructuras de la información, facilitándoles saber en cada momento dónde están, dónde pueden ir y cómo está organizada la información. Estos sistemas son:


Sistemas de navegación jerárquicos

Permiten conocer tanto las subsecciones que están subordinadas a la sección en la que nos encontramos como la sección a la que pertenece la subsección actual. Son uno de los sistemas más utilizados, ya que a través de la organización jerárquica de los contenidos de los sitios Web, se organiza la navegación en los mismos. Un ejemplo lo encontramos en la página Web del "DOGC - Diari Oficial de la Generalitat de Catalunya, donde los contenidos se organizan en un árbol jerárquico de diferentes niveles.

Estos sistemas son de gran utilidad cuando se dispone de grandes volúmenes de información agrupados por temas o unidades conceptuales. Permite a los diseñadores y arquitectos de la

información guiar fácilmente la navegación de los usuarios hacia el objetivo deseado. Sin embargo, no permite la libre navegación de los usuarios a través de sitio Web. Debido a la rigidez de navegación que presenta este sistema, se suele utilizar combinado con otros sistemas de navegación que lo dotan de mayor flexibilidad y permite a los usuarios escapar de la rigidez que imprimen las estructuras de la información jerarquizadas.


Sistemas de navegación globales

Sirven de complemento a los sistemas de navegación jerárquicos, ya que permiten a los usuarios moverse libremente por las estructuras de la información mediante saltos verticales y laterales.

Permiten acceder directamente a la información que se desea consultar sin la necesidad de retroceder por las páginas visitadas para alcanzar otra rama del árbol de contenidos.

Un sistema global de navegación puede estar formado por un menú situado en los diferentes niveles de un sistema jerárquico, que permite a los usuarios interrumpir la navegación jerárquica para

acceder a otra información en otra parte de la estructura.

Un ejemplo de este tipo de sistemas de navegación lo encontramos en Terra.esTerra.es. En la home de este portal, podemos acceder a cualquiera de los ejes temáticos que proponen los autores de este sitio mediante un menú de navegación jerárquico ubicado en la parte izquierda del navegador.

Una vez dentro de un canal temático podemos acceder a todos los contenidos relacionados con esta área mediante el menú de navegación izquierdo, pero también disponemos en la parte superior de la pantalla de una sistema de navegación global denominado Canales y Servicios que nos permite abandonar esta sección y acceder a cualquier otro canal temático.


Sistemas de navegación locales

Complementan a los sistemas de navegación globales cuando existe diversidad en los contenidos, adaptándose a las características y necesidades propias del sub-sitio. Sin embargo, el sistema de navegación local no sustituye al sistema de navegación global, simplemente lo complementa.

Un ejemplo claro de sistemas de navegación local lo encontramos en los diferentes menús de navegación de los canales del portal de Terra.


Sistemas de navegación ad hoc

Los sistemas de navegación no siempre encajan en los sistemas descritos anteriormente.

La principal ventaja de este tipo de navegación estriba en el hecho de que permite enriquecer los contenidos con información complementaria y permite la navegación entre contenidos relacionados entre sí. Sin embargo, si se utiliza indiscriminadamente, suele producir sobre el usuario una sensación de pérdida y desorientación al no entender cuál es la estructura del documento ni cuál es el orden de la información.


Según el autor de esta tesis, A estos cuatro tipos de sistemas de navegación podemos añadir también: Sistemas de navegación directos o buscadores y Sistemas de navegación lineales.
Sistemas de navegación directos
Permiten acceder directamente a una información específica lo más rápidamente posible. Son alternativas o complementos de los sistemas de navegación citados anteriormente y facilitan a los usuarios la posibilidad de buscar directamente una determinada información, sin necesidad de navegar por las distintas secciones que componen el sitio Web.


Sistemas de navegación lineales

Nos permiten recorrer el contenido de las páginas de una manera secuencial y preestablecida por el diseñador. Las únicas opciones de navegación que se le permiten al usuario son avanzar, retroceder o regresar al índice. Suele ser de gran ayuda cuando se quiere presentar la información en una secuencia preestablecida, como por ejemplo en el uso de un manual o algún tipo de material docente donde se pretende que la información pueda ser recorrida de una sola manera.

La navegación lineal provoca una necesaria transición por todas y cada una de las páginas lo que puede también inducir al abandono o desinterés por parte del usuario.





Referencias de interés

  • GARRET, JESSE JAMES (2010) The Elements of User Experience: User-Centered Design for the Web and Beyond. (2 edición) New Riders Publishing
  • HASSAN, Y., MARTÍN, FJ. e IAZZA, G. (2004). Diseño Web Centrado en el Usuario: Usabilidad y Arquitectura de la Información [en línea]. Hipertext.net, núm. 2. Consultado el 16 de octubre de 2011. Disponible en http://www.hipertext.net
  • NIELSEN, J. (1994). Ten Usability Heuristics. Disponible en: http://www.useit.com/papers/heuristic/heuristic_list.html
  • ORIHUELA, JL (2003). "El periodista: entre la autoridad y la interactividad". En Chasqui, Revista Latinoamericana de Comunicación, septiembre, número 083, pp. 12-16. Centro Internacional de Estudios Superiores de Comunicación para América Latina. Quito, Ecuador. Consultado el 16 de octubre de 2011. Disponible en http://redalyc.uaemex.mx/pdf/160/16008302.pdf
  • Ronda León, Rodrigo; (2007). La diagramación en la arquitectura de información. En: No Solo Usabilidad, nº 6, 2007. <nosolousabilidad.com>. ISSN 1886-8592
  • Caraballo Pérez Y, Ramírez Céspedes Z, Roque Chao D. El profesional de la información como arquitecto de los contenidos en el Web. Acimed 2006;14(3). Disponible en: http://bvs.sld.cu/revistas/aci/vol14_3_06/aci08306.htm Consultado: 20/11/2011
  • En qué consiste la diagramación. [En línea] http://www.nosolousabilidad.com/articulos/diagramacion.htm
  • Linares Sánchez, Valentín (2004). “Análisis de sistemas de navegación de sitios Web”. <vlinares.net> Disponible en: http://www.vlinares.net/portafolio/html/uoc/iho/vlinares_memoria.pdf

3.6. Diseño visual

Definición del diseño visual

Se desarrollan cuatro etapas en esta fase:

  • Diseño de las Estructuras de Páginas.
  • Bocetos de Diseño.
  • Borradores de página.
  • Maqueta web.
  1. Breve historia del Diseño visual de las webs

Podemos dividir la historia del diseño visual de las webs en cinco fases que conforman cinco generaciones:
- Primera generación
El primer diseño web de una página se realizó en 1993 en la web llamada Mosaic. El navegador web era capaz de mostrar tanto imágenes como textos aunque con grandes limitaciones a la hora de diagramar la información. El diseño visual de la estructura de estas páginas era lineal y estaba orientado a científicos que eran los principales usuarios de las webs por aquel entonces. El diseño estaba condicionado por la velocidad de conexión (que limitaba el peso de las páginas web) y el uso de monitores monocromos. La estructuración era bastante desordenada con imágenes dispuestas horizontalmente y líneas de texto separadoras.
Este caos en el diseño web llevó a establecer un año más tarde un consorcio para establecer unas normas y pautas para el futuro desarrollo de las webs: el W3C. Se comenzaron entonces a desarrollar unos estándares de lenguaje HTML para una unificación del diseño que trajeron consigo la aparición de una serie de navegadores web en constante desarrollo de nuevas funcionalidades y progresos en este campo.

- Segunda generación
Se basó en conceptos de la primera generación. Destaca el comienzo del uso de iconos, la utilización de imágenes de fondo, la aparición del diseño y uso de botones con relieve para la navegabilidad, empleo de banners en lugar de cabeceras y la estructuración de texto de forma jerárquica mediante menús o listados. También se comenzaron a usar tablas para la organización de los contenidos. El diseño visual de las webs se parece a la maquetación de libros o revistas.
En esta generación hay que destacar la aparición de monitores y tarjetas gráficas con mayores resoluciones y definición de color y el surgimiento de problemas ocasionados por la diferencia en la adaptación de estándares de los dos principales navegadores: Internet Explorer y Netscape Navigator.
Todos estos cambios provocaron el deseo de todos los diseñadores de añadir estos archivos en sus páginas web, pero se hizo sin control lo que generó saturación en las webs y falta de atención a la accesibilidad ni la usabilidad.

- Tercera generación
En esta generación se enfocan las páginas web según el objetivo de las mismas: vender productos o servicios, proporcionar información o noticias... Para esta especialización del diseño se necesita ayudar al usuario a encontrar la información, generando una navegabilidad estructurada e intuitiva. Se siguen teniendo restricciones en el uso del lenguaje para los dos navegadores web.
Aparece el plugin de Macromedia Flash lo que revolucionará la concepción del diseño web.
La mayoría de las páginas que se crean en esta generación son las dedicadas a la publicidad y venta de productos y servicios.

- Cuarta generación
El diseño visual de las web se enfoca totalmente a los aspectos multimedia. Todo usuario de Internet puede tener una página web y la variedad de diseño es enorme debido a todas las posibilidades que ofrecen las últimas tecnologías para los programadores. Hay que destacar la existencia de más navegadores webs que soportan muchas más prestaciones y elementos en las páginas web.

- Quinta generación
Una última fase del diseño visual de las webs está marcada por la mayor participación de la población en la red mediante las redes sociales, probablemente la mayor revolución de esta quinta generación. El diseño visual de estas webs ha de adaptarse a los usuarios y hacerles más fácil y amena la navegación.
También podríamos mencionar los diseños que caracterizan a las páginas de televisión IP o televisión online. La integración de televisión en las webs de empresas, organismos oficiales o asociaciones representa uno de los movimientos en diseño visual web más novedosos en la actualidad.
En cuanto a las novedades técnicas cabe destacar la aparición de los dispositivos móviles (teléfonos con tecnología Android, iPad, etc.) que hacen que la actividad de los usuarios en Internet aumente y que el diseño visual se adapte a nuevos formatos.
Esta fase aún está en proceso, se esta completando en la actualidad, y en los próximos años se podrán añadir más características.

Elementos del Diseño Visual Web
Existe una serie de factores o criterios que determinan, condicionan e influyen sobre el aspecto mismo y presentación de cualquier página Web o site. Entre ellos, son de destacar los siguientes:

1. Contenido: debe presentar un contenido altamente interesante capaz de captar y atraer la atención de visitantes y de sus potenciales públicos objetivo o destinatarios. No sólo ha de prestarse especial atención e interés al atractivo que habría de conferir a la parte visual (forma), sino que también ha de generarse un entorno interesante, vivo y dinámico en cuanto al contenido mismo que requiere cualquier sitio web. Además, ha de mantener un contenido adecuado, coherente y adaptado a las necesidades y potencialidades que ofrece así como constantemente actualizado. Por otro lado, el contenido aportará la posibilidad real de aumentar el número de visitas y fidelizar aquellos que vienen siendo asiduos porque siempre encuentran un contenido nuevo al que echar el ojo o tomarlo como referencia a una pretensión o finalidad planteada al usuario.
desclas1.gif
Esquema del proceso de organización de contenidos







2. Imágenes: de cara a un adecuado diseño Web las imágenes son un factor determinante a la hora de captar la atención de los públicos. Icónicas fijas o en movimiento, resultan uno de los recursos más eficientes para dotar de significado complementario y atractivo para conferir ciertas rentabilidades de diseño. Para ello, deben emplearse fotografías e imágenes de alta calidad, que respeten los derechos privados de autor, con un aspecto limpio y cuidado, es decir que no presenten una inadecuada o mala resolución (pixeladas) o desenfocadas, etc. Además, se pueden utilizar ilustraciones sencillas, como imágenes vectoriales, u otras más complejas como imágenes en movimiento que aportan un mayor color o dinamismo al propio entorno web.
Banco de imágenes

La web es sin duda un medio visual. Es por ello que aquellas páginas que poseen una imagen atractiva, suelen destacarse más sobre aquellas que tienen solo texto. No obstante la tarea de buscar imágenes para cada tipo de contenido, puede resultar difícil, sobre todo si tenemos en cuenta que la gran mayoría de fotos que habitan en Internet, están protegidas con copyright y su uso no autorizado puede traer serios problemas.


Los bancos de imágenes (como Magnum) son básicamente colecciones de fotografías, grabados, dibujos... imágenes, en general. Sirven como archivo y como referencia, y como punto de partida para muchas actividades.

En la actualidad, los bancos de imágenes por internet (magnum.com, photostock.com, flickr.com), ofrecen la posibilidad de publicar y consultar millones de imágenes de usuarios de todo el mundo. Las potentes opciones de indexado y búsqueda permiten acceder prácticamente a cualquier contenido buscado con unos pocos clics de ratón.

El uso principal de los bancos de imágenes es el de proporcionar imágenes de referencia como punto de partida para trabajos de edición, ya sea preparación de revistas, portadas de libros, artículos (prensa, blogs)...

Para ello, la mayoría de bancos de imagen dan la opción de comprar las imágenes a su propietario (fotógrafo, artista, agurpación). Mediante este proceso, se compran, total o parcialmente, los derechos de reproducción y uso de la imagen concreta.

La forma de trabajo es similar a la de cualquier tienda online; generalmente, para comprar fotos te requerirán un registro personal, y el pago se realizará mediante el típico "carrito". La entrega es por correo (imágenes en papel o CD), o bien como descarga por internet.


Banco de imágenes gratis

Existen muchos sitios web que usted puede consultar para encontrar imágenes que se ajusten a su contenido y que además de tener licencia (legales), se encuentran disponibles de manera gratuita.


Wikimedia Commons:


Esta es la división de medios de Wikipedia, La Enciclopedia Libre, la cual, opera como almacén de archivos de imágenes y otros formatos multimedia liberados bajo licencias libres (como la licencia GNU) y de domino público (PD). Actualmente cuenta con más de 6 millones de archivos multimedia libres, entre los cuales se encuentran miles y miles de imágenes que puedes usar para tu sitio web, sin tener que preocuparte por tener que solicitar permisos para su uso.


wiki.jpg



Flickr: Creative Common:

Flickr ofrece una herramienta de búsqueda avanzada que permite buscar dentro de contenido que se encuentre liberado bajo licencia Creative Commons. Seleccionando las casillas de verificación respectivas, usted podrá obtener resultados que consignen contenido para uso comercial o bien para modificar, adaptar o bien para usarlo como base para generar obras derivadas. Sin duda, una muy buena opción para encontrar imágenes que podamos incluir en nuestros textos.


flickr.gif


Google Image Search (Búsqueda Avanzada):

Al igual que flickr, Google image Search ofrece una herramienta de búsqueda avanzada que permite filtrar los resultados de acuerdo al tipo de licencia. En la opción “Derechos de uso” el usuario puede seleccionar fácilmente los permisos de uso de las imágenes y encontrar resultados relevantes conforme a sus intereses. A diferencia de flickr que por lo general ofrece imágenes de alta resolución, Google image Search arroja resultados en múltiples tamaños.


google.jpg


Stock.xchng


Este servicio cuenta con una gran base de datos de imágenes libres. Contiene cerca de 400 mil imágenes para su reutilización, las cuales en su mayoría, están disponibles para uso comercial. Casi todas las fotos están disponibles para ser descargadas en alta resolución, para lo que es necesario hacer un registro previo en el sitio, el cual es gratuito. Aunque la gran mayoría es material con licencia libre, no está demás cerciorarse de que el autor de la imagen no agregue restricciones adicionales, como atribuciones y demás, antes de descargar y utilizar la imagen.


scock.jpg


PicApp.


A diferencia de las demás fuentes expuestas, PicApp es un servicio que no permite descargar imágenes para su reutilización. Este servicio está dirigido a aquellos usuarios que requieren producir noticias y obtener imágenes muy recientes (en tiempo real). Es un servicio ideal para sitios web de noticias, política, farándula, entre otros. Hasta hace unos meses este servicio se podía utilizar sin tener que crear una cuenta. Actualmente es necesario registrarse, además se requiere instalar un plugin en la plataforma web del usuario, para acceder a las imágenes. Otro detalle es que las imágenes se insertan a través de un código Java script y habitualmente muestra algo de publicidad al pie de la imagen.


picapp.jpg




Dreamstime Free Photos


Si bien, Dreamstime es un servicio que en gran parte es de pago, posee una sección para buscar imágenes de licencia libre muy recomendado. Las imágenes que están disponibles de manera gratuita son de muy buena calidad y de alta resolución. A diario se presentan imágenes destacadas del día para descargar gratis y por lo general son fotos muy profesionales.


dreamstime.jpg



3. Tipografía: resulta importante también utilizar fuentes llamativas para conservar una fácil legibilidad. La tipografía debe denotar la atención de usuarios pero ha de ser fiel y conservar la línea o patrón estilístico de diseño que sigue el propio sitio web para darle una continuidad y mayor grado de coherencia que ha de existir entre diseño y contenido. La tipografía constituye una parte integral y fundamental del diseño. Aunque no lo parezca, las fuentes con su clase color, estilo, tamaño, espaciado y disposición conforman un conjunto que ha de percibirse como un todo, como diseño y composición. Entre las distintas tipologías o variantes de tipografías existentes, la más adecuada es la tipo sin serif que son plenamente legibles e indicadas para bloques de texto en Internet, siendo recomendable, de cara a una mejor composición, no emplear más de dos familias tipográficas. Respecto a las fuentes más utilizadas en diseño web destacan: Arial, Times New Roman, Verdana, Georgia, Courier. Además, de emplear cierto mantenimiento de coherencia tipográfica a lo largo del sitio, para ello es conveniente la utilización de hojas de estilo en cascada (CSS) y en particular utilizar hoja de estilo externa; asignar fuentes, tamaños, estilos, etc. a etiquetas HTML como <p>, <h1> – <h6>
fuentes-seguras-500x199.jpg
Tipología de fuentes más utilizadas en diseño web

Con la implantación de los nuevos estándares como CSS3 y HTML5, también se ha avanzado enormemente en la presentación de tipografías en el diseño web, y lo que antes era mucho más limitado a una serie de tipografías estándares que los usuarios debían tener instaladas en su sistema operativo, hoy en día desaparece con la propiedad @font-face de CSS, compatible con la mayoría de navegadores web. Con esta propiedad, el navegador puede llamar a archivos de tipografías instalados en el servidor y servirlas en el diseño sin que sea necesario que el usuario las tenga instaladas en el equipo. Con esto se abrió hace unos años una nueva en el diseño web, con mucha más flexibilidad a la hora de diseñar.

Tipografía Web

En la tipografía web no se trata solamente de elegir un tipo de letra o distinguir unas de otras.La tipografia web posee también una jerarquía: utilizando diferentes tipos de tamaño, estilos diferentes( todo en mayúsculas, cursiva para subtítulos..). La tipografía tendrá cuatro caracteres contraste, tamaño, jerarquía y espacio.
Hay, según los fundadores de la web fotográfica www.panoramio.com , dos tipos de tipografía, la Serif y la Sans-Serif.

- Los formatos de fuentes “Serif” son en los que las letras tienes remates en los extremos como la letra Times New Roman.

Estos tipos han sido consagrados por su combinación de coherencia y adaptabilidad. Los tipos tradicionales ya vemos que ofrecen una amplia variedad de opciones visuales desde los tipos gruesos hasta los anchos, ligeros o condensados.
Pero, lo que define sobre todo al tipo tradicional es su legibilidad y aceptabilidad, ya que se usa de manera común.
Sobre el papel impreso las fuentes serif son más legibles porque los remates dan más información de los caracteres y facilitan la lectura. Normalmente se prefiere este formato.

- Las fuentes Sans Serif son las que no poseen esos remates en los extremos como la Arial.

Los tipos Sans serif o de palo seco han pasado a tener atractivo tradicional también. Ahora los tipos de palo seco se usan con normalidad, permiten usar rotulado y un cuerpo de texto compatible.
Es más legible en monitores, por que posee menos resolución, los remates aparecen borrosos y la lectura puede resultar menos fácil. Por eso para web se prefiere el formato san serif.
Los tipos de letra nos sirven para muchos propósitos y realmente son un elemento muy importante de diseño ya que la tipografía es con lo que se hará la identificación de la página

Ancho de línea:

Nos regimos como en los periódicos, menor longitud de línea mas velocidad de lectura. Más longitud de línea provoca mayor longitud de un punto ocular a otro, la fijación es más inexacta y dificulta la lectura. Se habla de 50 a 60 caracteres para la longitud máxima de línea,
Un ejemplo de dstribución de caracteres:

Jarret.C(vía Nielsen, J. 2000):
"Si tienes que usar
longitudes de línea
muy cortas,
entonces es adecuado
que cada línea
contenga una unidad
de significado".

Es más fácil de leer que:

"Si tienes que
usar longitudes de
línea muy cortas,
entonces es
adecuado que cada
línea contenga
unidad de significado".

Kerning, interletrado:
Cuando el espacio de letra en una palabra se ajusta, el texto es más legible y estético.El kerning será lo que le da el aspecto más profesional a los libros impresos. El ajuste varía según las combinaciones de letras que van juntas, por ejemplo en la silaba "To" la "o" debe entrar unos pocos píxels debajo de la "T" como se puede ver en la imagen 1. Los navegadores no tienen implementado el kerning y no todos los programas de edición de textos lo tienen en cuenta.

too.jpg

No hay que confundir este ajuste del espacio entre letras (kerning) con el ajuste del espacio que ocupa cada letra. Respecto al espacio que ocupa cada letra existen dos tipos de fuente: las proporcionales y las no proporcionales (monospaced). En las proporcionales este espacio depende del caracter, por ejemplo una "i" ocupa menos espacio que una "M". En las fuentes no proporcionales todos los caracteres ocupan el mismo espacio.
Por ejemplo:
Arial es una fuente proporcional
Courier New es una fuente no proporcional
La gran mayoría de los medios: periódicos, libros y websites usan fuentes
proporcionales.
Las fuentes no proporcionales son adecuadas para el mostrar muchos datos ya que ofrecen lecturas mas claras en listas de datos, tablas, calendarios, etc.
Tamaño de letras
Un tamaño normal, suele ser entre 1 a 12 puntos, es el estándar de la mayoria de los textos,
Es habitual pero a mayor espacio entre linea, más facilidad de lectura.Se recomienda interlineado de 1,5 puntos.


4. Botones e iconos: es otro de los elementos fundamentales de cara a tener en cuenta en el diseño visual web. Han de utilizarse etiquetas de botones prácticos y representativos, así como iconos vistosos que aumenten y faciliten la tarea de navegación en la página y permitan a los mismos cumplir su función principal de servir de guía clara y utilitaria a los usuarios. Para ello, es necesario de dotar al propio entorno Web de elementos icónicos necesarios y prescindir de aquellos otros que no cumplan cierta función con la finalidad misma de no confundir la experiencia del usuario web. Los botones son parte esencial en el diseño web y aplicaciones de cualquier tipo en general, sin ellos los usuarios simplemente no sabrían dónde tendrían que hacer click para realizar diferentes operaciones. Como consejo, ser lo más atractivos posibles para lograr captar la atención del usuario o visitante. En lo que respecta a los elementos icónicos –siempre que sean lo suficientemente claros- permiten reducir la cantidad de elementos textuales que serían requeridos para explicar al detalle ciertos contenidos, eso sí siempre y cuando estos iconos presente un significado claro y universal, fácilmente entendidos por toda la comunidad de usuarios.

botones-descarga-photoshop-570x427.jpg
Modelo botones de descarga


botones-luminosos-570x425.jpg
Modelo botones luminosos

botones-web-texturas.jpg
Modelos botones Web Texturas



iconos-iphone-ipod.jpg
Modelo Iconos iPhone/iPad

5. Animaciones y movimientos: elementos propios del diseño visual Web que aportan y generan una mayor sensación de dinamismo. Conviene utilizarlos para conseguir tal efecto, pero tampoco resulta aconsejable excederse en la utilización de los mismos. Una cuota del 20% de la totalidad de la página podría ser suficiente para evitar causar saturación, o conseguir el efecto contario a la atracción o captación del potencial usuario o visitante, el de distraer su atención de las cosas verdaderamente importantes que se quieren exhibir en el escaparate web y acabar por sacar al propio usuario del sitio. Entre las diversas tecnologías existentes utilizadas por los diseñadores Web para crear animaciones destacan: Gifs animados, HTML dinámico, Java Shockwave y Flash.

  • Gifs animados: una de las innovaciones más grandes en la historia de Internet fue la habilidad de integrar fotografías y otras ilustraciones, con texto en una página Web. Estas ilustraciones vienen en un formato llamado fichero bitmap. Un bitmap simplemente describe el color de cada píxel en una imagen. Para reducir el tamaño de estas imágenes, se utilizan diferentes técnicas para comprimir los datos de la imagen. Normalmente, nos encontraremos con ficheros JPEG y GIF. La animación es solo una serie de imágenes mostradas en secuencia, por lo que la manera más obvia para añadir una animación en un sitio Web es poner una serie de bitmaps que el navegador muestra en secuencia. Esta clase de animación llamada GIF animado o GIF89, fue la primera animación de estas características en la Web, y todavía es muy popular. La gran ventaja de los GIF animados, es que son increíblemente fáciles de hacer, y es automáticamente reconocido por el navegador. Existen multitud de programas para editarlos, crearlos y modificarlos a nuestro gusto. La desventaja es que tienes que mantener la animación bastante sencilla para que el tamaño no crezca demasiado. Después de todo, cada trama es una imagen de bitmap. Cuatro tramas se pueden enviar por Internet de forma aceptable, pero con 20 o 30 tramas, el tamaño será demasiado grande. Otro problema es que con veinte tramas, el movimiento de los GIF se pueden ver afectados. Las fluidas imágenes que vemos en las películas incluyen al menos 24 imágenes por segundo. Para crear una animación de cierto tamaño, hay que dar saltos grandes entre cada trama, lo cual significa que la animación no será muy fluida. Aparte de esto, en los GIF animados no se puede integrar sonido.
  • HTML dinámico: Originalmente, las páginas Web eran en su mayor parte ficheros estáticos – una vez que se cargaban, permanecían de esa manera. Esto está heredado de HTML (hypertext markup language), el lenguaje básico de programación para páginas Web. Al evolucionar Internet, los diseñadores se dieron cuenta de lo limitado de este comportamiento afectando a la calidad de los sitios Web. Querían añadir contenido dinámico que pudiera cambiar una vez era descargado por el navegador.HTML dinámico o dHTML es el término de la tecnología que hace esto posible. Esto se consigue utilizando un número de lenguajes de scripting, como puede ser Javascript. HTML dinámico no fue creado con la idea de animaciones, pero puede alterar elementos y añadir movimiento en una página Web. Por ejemplo, un script dHTML le puede decir a un navegador, que cambie el sitio de una imagen de particular en la pantalla. Como los GIF, los navegadores reconocen de forma automática las animaciones dHTML, sin tener que descargar componentes adicionales. Sin embargo, crear este tipo de animaciones no es tan fácil como en GIF, y puede ser bastante complicado. Existen editores HTML que pueden simplificar esta tarea como es el caso de Macromedia Dreamweaver, que puede producir scripts para incluirlos en tu Web.
  • Java: otra forma de crear animaciones Web es con el lenguaje de programación universal orientado a Internet, llamado Java. Con Java, los programadores pueden crear aplicaciones que los usuarios pueden descargar de Internet. Los navegadores con Java habilitado, usan una máquina virtual, que es un software que reconoce el lenguaje Java y los traduce para el sistema operativo del usuario. El contenido de Java, es generalmente creado con programas llamados applets. Estos applets no son del todo aplicaciones software – solo trabajan en conjunción con los navegadores. Se pueden hacer muchas cosas con ellos, y uno de los usos más extendidos, es la creación de aplicaciones. La principal ventaja de Java, es que funciona en todos los sistemas operativos y es muy flexible. La desventaja más notable es que puede suponer un problema de seguridad en nuestro ordenador. Por ello, hay muchas personas que prefieren tener Java deshabilitado.
  • Flash y Shockwave: en nuestros días, podemos decir que las animaciones más usadas son Flash y Shockwave, ambas de Macromedia. Flash es ahora el formato estándar para animaciones de calidad en la Web, y Shockwave es un formato muy popular para presentar contenido animado más complejo. Al contrario de otros ficheros para mostrar películas, estas dos tecnologías aparecen como parte de la Web e incluyen un alto nivel de interactividad. El reproductor de Shockwave no solo muestra animaciones, ya que permite cierto control del usuario para responder con el navegador. Flash y Shockwave no son los únicos de este tipo de animaciones, pero se ha integrado más que cualquier otro. Flash en particular, ha tenido mucho éxito porque viene integrado en muchos navegadores, y puede trasmitir animaciones atractivas y fluidas rápidamente.

6. Fondos Web: han de ser claros o prácticamente blancos con la finalidad de facilitar la visualización. Además, aportan un aspecto limpio y despejado de la página por lo que permiten resaltar el contenido así como las imágenes. Se ha impuesto, en este sentido, la tendencia en algunas páginas Web a utilizar fondos negros para aquellos entornos que requieren de lecturas largas y así no saturar o cansar al lector. Los fondos Web cada vez tienen más protagonismo en los diseños, incluso, llegan a emplearse como elementos decorativos en muchos casos y en otros pasan a ser un objeto mismo del propio diseño – por ejemplo, caso de fondos con paisajes que ayudan a conferir mayor personalidad al propio diseño- Un buen fondo puede aportar un mayor carácter y revestir al sitio web de mayor atractivo con un diseño minimalista –tendencia más proclive actualmente-. Los fondos Web resultan ser una herramienta útil para la comunicación del propio entorno web ya que una textura de fondo llega a determinar el grado de formalidad o informalidad, incluso, las líneas de su temática. Existe, al respecto múltiples formas de colores y texturas, sin embargo, el diseño del fondo Web deber ser elegido con sumo cuidado ya que no debe crear demasiada distracción, más bien ha de quedar también integrado y compactado con el diseño general y el predomino de colores y estilo del sitio web. Finalmente, la presencia de degradados en los fondos es una de las principales características que se pueden visualizar en la mayoría de los “nuevos” proyectos Web 2.0.
diseño_web.jpg
Modelos fondos Web


  • En cuanto a la estructuración y disposición del fondo web, se tiende a diseños centrados, la gran mayoría de las páginas web están utilizando un diseño centrado en la ventana del navegador ya que así se ofrece una sensación de simplicidad –nota más característica en lo que a diseño se refiere del entorno 2.0-. Además, se ha de evitar el uso excesivo de columnas, cuantas menos aparezcan en la página mucho mejor, ya que el diseño web será mucho más sencillo y contribuirá a mostrar con mayor claridad los propios contenidos –dos columnas es el ideal aunque se debería evitar más de tres columnas- También, en lo que respecta a ordenación y disposición de los elementos insertos en el fondo web, la sección superior o cabecera debería estar separada, generalmente en esta aparece el logotipo y área de navegación; es importante diferenciar la cabecera del resto o cuerpo de la página para así poder centrar la atención en lo verdaderamente importante –los contenidos que estarán albergados en la página web-. Y finalmente, en relación con la gama o escala cromática –colores- la utilización defuertes son adecuados para la división y jerarquización de la página en secciones claras y definidas así como para destacar los elementos principales que permitirá al usuario conceptualizar y entender mejor la distribución del propio contenido web.

7.Sobriedad: ha de ser una de las máximas y notas constantes que ha de predominar en el propio diseño del entorno Web. Una página debe permitir una fácil visualización de los contenidos expuestos en la misma –vídeo, imágenes, textos-, ya que no se debe olvidar, en todo momento, que el diseño ha de contribuir al buen escaparate de la misma. Se ha de evitar el colapso o saturar al usuario ya que resultaría contraproducente si la información o contenido no se muestra accesible o presenta problemáticas del tipo demoras a la hora de cargarse, etc. por lo que, resulta aconsejable enfrentarse un diseño sencillo pero altamente facilitador de cara a favorecer la experiencia del usuario con el propio entorno web, es decir, sencillos diseños con botones o enlaces en el lugar y disposición adecuada para generar un fácil reconocimiento y navegación que en posteriores visitas se traduzca en una clara identificación con el potencial usuario o visitante.



4. La Teoría Unificada del Diseño, propuesta por Nathan Shedroff

4.1. Introducción


El artículo “Information Interaction Design: A Unified Field Theory of Design” de Nathan Shedroff propone una metodología para el diseñador, que parte de una profunda reflexión sobre la labor del diseño. A continuación se sintetizan las líneas más importantes de esta teoría.

El autor destaca como idea básica que el diseñador debe considerar que las principales habilidades a desarrollar son las que permitan crear, reforzar y gestionar la información y las experiencias “perceptivas” que resulten valiosas a las audiencias. Se requiere entonces un conocimiento detallado de las posibilidades de organización y presentación de los datos y la información, además de desarrollar formas novedosas para desarrollar contenidos. Podríamos equiparar el proceso de creación con la resolución de problemas, así como la emisión de mensajes para audiencias y la comunicación con las personas. Por lo tanto, no es suficiente con tener habilidades técnicas, sino que se deben elaborar mensajes con significado claro y objetivo para las personas receptoras de la información.

4.2. Modus operandi del diseñador


Un gran problema a superar es la sobrecarga de información y de tecnología. Para ello hacen falta soluciones adecuadas para diseñar mensajes que cumplan con su función de interfaces y que no se sometan únicamente a gustos personales de clientes o diseñadores. Debe tenerse muy en cuenta el diseño de la interacción con la información, puesto que las “tradiciones” y las tecnologías pueden ir cambiando según la disciplina, pero los procesos deben seguir siendo los mismos. Los tres grandes ejes del modus operandi de un diseñador deberían ser:

1. El Diseño de Información
2. El Diseño de Interacción
3. El Diseño Sensorial.

En el Diseño de Información debe discriminarse cuáles de los datos que nos llegan continuamente son verdaderamente “piezas de información” El valor informativo de un dato sólo queda garantizado con su correcta organización, transformación y presentación para transmitir un significado. Para transformar un dato en información se requiere una organización a través de una forma apropiada que sea significativa y entendible.

Hoy en día se recomienda que los proyectos informativos inicien un proceso inverso, es decir, que no se comience el diseño desde la información sino desde la interacción. Los mejores diseños no son los más cargados, sino lo que mejor resuelven el problema o necesidad del usuario. Existe la máxima "menos es más", y uno de los grandes ejemplos que se pueden poner en este sentido es la sencilla interfaz de Google para su buscador.

En esa página principal, el usuario no dispone de información (tampoco la necesita), sino que en su lugar tiene un gran cuadro de introducción de texto que invita a la interacción. No hay distracciones. Se apela a los sentidos, al contraste entre el blanco absoluto y las letras, con un logo multicolor que ha quedado ya como parte integral de la cultura cibernética.

Emulando a Google, cualquier proyecto debe contar con una exquisita presentación, no basado tanto en el diseño gráfico sino en la funcionalidad.

4.3. Procesar los datos para obtener información


Al igual que la transformación de datos en información es posible crear conocimiento a partir del Diseño de Interacción y mediante la creación de experiencias. Para ello es necesario comprender a la audiencia, entender sus intereses, necesidades, habilidades y expectativas, así como la manera en la que el diseñador puede satisfacerlas. El conocimiento se conforma gracias a las experiencias que las personas obtienen por las interacciones con los demás o con determinadas herramientas. Nathan Shedroff sugiere siete categorías para realizar el proceso de recolección y selección de datos de cara al del diseño de información:

1. Organización Alfabética.
2. Organización por localización o ubicación.
3. Organización por tiempo.
4. Organización por “continuum” o escala continua de valores.
5. Organización por número.
6. Organización por categoría.
7. Organización aleatoria.

4.4. Interfaces pasivas vs. interfaces interactivas


Dentro del Diseño de Interacción, para resolver adecuadamente la manera que tiene la interfaz para interactuar con el usuario es necesario pensar en el tipo de experiencia que se pretende generar, la forma en la que se establecería, las condiciones necesarias para el éxito y la satisfacción del usuario/cliente Es necesario decidir cuánto control ejerce el usuario sobre la interfaz y a qué elementos afecta, qué opciones se le ofrecen y qué habilidad se exige al usuario para lograr que el contenido presentado por el objeto de diseño resulte creativo o productivo.



Shedroff propone cuatro criterios para diferenciar una interfaz pasiva de una interactiva:

1. Control y retroalimentación: Qué parte del control tiene el usuario sobre un resultado, secuencia o tipo de acción y cuánta retroalimentación obtiene durante o después del uso de la interfaz. Habitualmente, las experiencias con un alto nivel de interactividad contribuyen a obtener grandes niveles de retroalimentación y genera experiencias positivas en los individuos.

2. Productividad y experiencias creativas: Los productos y experiencias “creativas” requieren la participación e interactuación de los usuarios mediante la creación o manipulación de la información. No se limitan a observarla o consumirla pasivamente.

3. Experiencias “adaptativas”: Son aquéllas en las que la tecnología modifica su apariencia según el comportamiento del usuario (por ejemplo, los agentes inteligentes). Los comportamientos que se modifican son los que pueden cambiar herramientas o contenidos según las acciones o técnicas de los clientes.

4. Experiencias comunicativas: Este punto se relaciona con la comprobación de las experiencias del usuario, observando cómo expresa o exterioriza sus experiencias con respecto a cierta interfaz.

Las lluvias ideas alternativas son cruciales durante el proceso de desarrollo de una interfaz de usuario, así como el contacto con los clientes. De esta manera se reúnen objetivos, mensajes, intereses y habilidades que contribuyen a encontrar soluciones alternativas para resolver problemas específicos.

4.5. Diseño sensorial


El proceso de diseño finaliza con el Diseño sensorial, que engloba todas aquellas disciplinas relacionadas con la creación y presentación de un mensaje en un determinado medio de comunicación (la escritura, la música, el diseño gráfico, la caligrafía, la iconografía, la cartografía, la tipografía, la ilustración, la teoría del color, la fotografía, la animación, la cinematografía, etc.). Esta etapa tiene como principal objetivo la determinación del uso más adecuado de un medio de comunicación para proyectar un mensaje. Para ello debe decidirse el estilo, la técnica y todos los elementos de aplicación visual y tecnológica que sirven al usuario para enriquecer su experiencia con la interfaz que se ha creado, involucrando al mayor número de sentidos humanos. En conclusión, resulta fundamental pensar en los usos que se le dan a cada uno de nuestros sentidos, cómo operan y cuáles son sus relaciones.

El diseño sensorial parte de todo lo que percibimos a través de nuestros sentidos: los colores, los olores, los sonidos, etc. El diseño sensorial es el empleo de todas las técnicas con las cuales nos comunicamos con otros a través de nuestros sentidos. Estos pueden ser el táctil, visual, cinestésico, auditivo y olfativo.

Algunas de las disciplinas que abarca el diseño sensorial son: la escritura, el diseño gráfico, iconografía, fabricación de mapas, caligrafía, tipogafía, ilustración y teoría del color (gráficos); fotografía, animación y cinematografía (imágenes); y diseño de sonido, cantar y música. En los sentidos del gusto y del olfato se encuentran la perfumería y la cocina.La mayoría de los productos cotidianos que inundan el mercado contemporáneo involucran en la interacción funcional individuo - producto únicamente uno o dos sentidos (la vista y/o el oído), e ignoran generalmente el aspecto comunicativo - emocional vivido también por el individuo a través del producto.


El “diseñador sensorial” es el que se encarga de relacionar principalmente aspectos humanos y del producto con el fin de facilitar y conducir a un diseño de objetos más adecuado para las diferentes realidades, y necesidades sensoriales humanas y sus ambientes. Lo que se busca es conducir a la concepción de productos que a través de sus cualidades tanto utilitarias como comunicativas, sean capaces de satisfacer de mejor manera las necesidades humanas derivadas directa e indirectamente de los sistemas sensoriales, fomentando la estimulación.


Finalmente, NathanShedroff explica que todos los detalles sensoriales deben coordinarse no sólo entre ellos, sino con los objetivos y mensajes del proyecto. Una interface para una experiencia, ya sea tecnológica, física o conceptual, debe tener un mensaje y una razón para comunicarlo y comenzar con la creación del significado y desarrollo de tipos apropiados de interactividad.


Ejemplo:
Un cartel que trata de hacer conciencia sobre la donación de sangre:
external image hourglass.jpg

Con la elección de este cartel surgieron muchas preguntas referente al mensaje que trata de transmitir: ¿Donación de sangre? ¿Ayuda a la Cruz Roja? ¿El tiempo se termina? Además, se prestó para debatir con un amigo y efectuar una encuesta.
Las funciones del lenguaje para este cartel serían:
  • Función emotiva. La forma en que el emisor configuró el mensaje es original aunque un tanto compleja.
  • Función poética. El uso del reloj de arena para transmitir el mensaje de la donación de sangre me parece bueno, y el color rojo en la arena atrae la atención.
  • Función conativa. En cuanto a esta función, el cartel no la cumple del todo, al menos no en todos los usuarios, ya que generan diferentes percepciones y no todos logran apropiarse del mensaje.
  • Función referencial. Los contenidos que presenta el cartel son sencillos.
  • Función fática. El cartel atrae la atención del receptor.
  • Función metalingüística. La configuración del mensaje parece un tanto clara, pero cuando se trata de leerlo genera confusión.

Bibliografía


  • DÍAZ NOCI, J., SALAVERRÍA ALIAGA,R.., (2003). Manual de redacción de ciberperiodística. Barcelona: Ariel Comunicación.
  • CORNELLA, A. (2002). Infonomía.com: la gestión inteligente de la información en las organizaciones. 2ª ed. Bilbao: Deusto.




4.6. El uso de diagramas para la organización de la información

A la hora de organizar la información en AI necesitamos recurrir a elementos que nos ayuden a comprender visualmente la organización de los contenidos, a qué nos enfrentamos en cada momento cuando visitamos un entorno web. Existe una simbología básica que nos ayuda en ese recorrido y está basado en elementos visuales básicos que comprenden una serie de recursos unificados. Los diagramas constituyen una herramienta de ayuda fundamental, puesto que todos entendemos a qué se refieren puesto que se trata de elementos visuales que simulan la acción a desarrollar.

Al recurrir al vocabulario visual, estamos refiriéndonos a un conjunto de símbolos usado para describir algo, un sistema, una estructura o un proceso. Los productores de contenido deben poner especial cuidado en diseñar un entorno visual que ayude al usuario a identificar claramente el objeto y su objetivo.

Partimos de la necesidad del hombre por comunicarse como elemento principal de la Arquitectura de la Información. Desde el principio de los tiempos, el ser humano ha necesitado de una serie de códigos para comunicarse y en muchas ocasiones ha tenido que crearlos. En AI nos referimos al entorno de la informática, con una historia muy reciente, y, por consiguiente, podemos establecer una cronología de la misma desde un punto de vista
histórico-conceptual. Esta es la línea de tiempo que propone el profesor Rodrigo Ronda León en su artículo Arquitectura de la Información: análisis histórico-conceptual
(http://www.nosolousabilidad.com/articulos/historia_arquitectura_informacion.htm).

historiaAI3.gif



Aunque el término arquitectura se empieza a usar en el contexto computacional por la empresa IBM en el año 1959 fue Xerox en 1970 la que estableció definitivamente ese término y la que empezó a trabajar con un grupo multidisciplinar en Palo Alto Research Center en una obra: crear una auténtica arquitectura de información. Este primer desarrollo fue el que realmente dio como resultado la creación de una interfaz de usuario realmente útil para el usuario, que posteriormente se fue desarrollando.
Rápidamente se vio la necesidad de crear elementos visuales que ayudaran al usuario a moverse por el entorno computacional por eso se recurre a los diagramas, y esos elementos debían tener varias características:

• Compatible con pizarra blanca: El vocabulario debería ser tan simple que los diagramas
puedan ser dibujados rápidamente a mano. Los elementos del vocabulario debieran ser
suficientemente distintos entre sí para que un dibujo medianamente malo no comprometa
la claridad del diagrama.
• Independiente de herramienta: El vocabulario debiera estar diseñado de forma que no
requiera de software especializado para construir diagramas. El vocabulario no debiera
favorecer el uso de una herramienta particular de software, sino permitir a los arquitectos
utilizar las herramientas más cómodas a ellos.
• Pequeño y auto-contenido: Porque estos diagramas son usados por una amplia gama
de audiencias con diferentes niveles de conocimiento (o incluso interés) en sistemas de
diagramas usados en otras áreas de desarrollo técnico, el vocabulario no debiera requerir
tal conocimiento o interés. El total de los elementos debe ser mantenido al mínimo posible,
manteniendo una estricta relación uno-a-uno entre conceptos y símbolos, para que el
vocabulario pueda ser aprendido y aplicado en forma rápida. Los conceptos expresados
por el diagrama pueden ser arbitrariamente complejos; el medio de su expresión no debe
serlo.

paginasapiladas.png

Si observamos estos diagramas, enseguida identificamos su contenido. El primero es una página en blanco, el segundo un documento, el terecero una pila de páginas y el cuarto una pila de documentos, Enseguida podemos identificar a qué tipo de información nos estamos enfrentando cuando los vemos y son usados en informática o en aparatos de uso tan cotidiano como fotocopiadoras. Pero estos diagramas de por si, no nos ayudan a movernos por la interfaz, si no que sólo nos indican qué tipo de elementos podemos esperar ante nosotros, si una jerarquización de páginas iguales o un conjunto de documentos similares. Para movernos por ellos necesitamos otros símbolos que nos indiquen la manera de interactuar. Necesitamos una estructura en flechas.

flechas.png

En el primero de los diagramas nos indica un desplazamiento hacia el fin de la tarea, la barra cruzada indica que el movimiento regresivo no está permitido y la tercera indican las direcciones de la información. Vamos entrando en un diseño de interacción que nos aclara más información del diseño web.
Pero la complejidad de la información web nos va poniendo más dificultades en el camino y, por lo tanto, necesitamos elementos que nos identifiquen con mayor complejidad con lo que estamos trabajando. Aquí vemos un ejemplo de cómo, partiendo de una home podemos tener acceso a todo un conjunto de nuevos elementos complejos de por si. La información inicial nos lleva a un área interactiva que, a su vez, nos descubre nuevos elementos.

area interactiva.png

Debemos tener claro que la arquitectura de la información está pensada única y exclusivamente para que la información esté organizada y, por lo tanto, su complejidad puede ir creciendo pero nunca de tal manera que dificulte la comprensión por parte del destinatario de la misma: el usuario, que siempre debe saber por dónde moverse, saber dónde está y qué es lo que debe hacer para continuar o volver atrás. En el siguiente diagrama podemos ver que se nos indican múltiples opciones a eleguir y la posibilidad de retroceder.

muchoscaminos.png

Bibliografía
CÁMARA, D.,GRANDE, I., KOTLER, P. (1995) Dirección de marketing (8ª ed.) Hemel Hempstead: Prentice Hall.
Ronda León, Rodrigo (2008). Arquitectura de Información: análisis histórico-conceptual. En: No Solo Usabilidad, nº 7, 2008. <nosolousabilidad.com>. ISSN 1886-8592
Garret, Jesse. Un vocabulario visual para describir arquitectura de información y diseño de interacción.
  1. ^ Para la elaboración de este bloque, se ha seguido y tratado la Guía para el desarrollo de sitios web, del Gobierno de Chile, Ministerio Secretaría General del Gobierno (2004) así como el libro The Elements of User Experience de Jesse James Garret