AbC INTRODUCCIÓN AL DISEÑO INTERACTIVO CARLOS JIMÉNEZ MARTÍNEZ

Facultad de Bellas Artes Universidad de La Laguna 2003

ÍNDICE

I. INTRODUCCIÓN………………………………………3 II. ESQUEMA DE ANÁLISIS……………………………….5 III. SITIOS WEB ANALIZADOS 3.1. 3.2. 3.3. 3.4. 3.5.

www.metropolismag.com………………….7 www.eyemagazine.com…………………...15 www.visual.gi……………………………...20 www.adbusters.org……………………….25 www.thinkcycle.org……………………….30

IV. CONCLUSIONES…………………………………….35 V. BIBLIOGRAFÍA………………………………………...37

2

I. INTRODUCCIÓN

3

I. INTRODUCCIÓN

I. INTRODUCCIÓN

-

L

a primera cuestión relevante que surge a la hora de abordar el análisis de cinco sitios web, es definir el criterio de selección de los mismos, es decir, los parámetros que se van a seguir para que los sitios elegidos tengan un hilo en común, bien sea este conceptual, técnico, formal o de otra clase. En el presente trabajo, se ha tratado de realizar una selección que tenga en cuenta la necesidad de acceso a la información actualizada y a los principales centros de documentación sobre la disciplina del diseño y la actividad proyectual, de un estudiante de tercer ciclo con interés en desarrollar un futuro trabajo de investigación en dicho ámbito, como es mi caso. Por tanto, los sitios web aquí analizados intentan responder a ese eje vertebrador; lo constituyen magazines, publicaciones o revistas digitales que profundizan en el campo del diseño desde diferentes perspectivas. Varias de esas revistas en línea, tienen su precedente en la respectiva publicación impresa. Todas ellas son reconocidas internacionalmente y cuentan con destacados profesionales en su equipo de redactores. Cada una de ellas tiene un matiz diferente en cuanto al tratamiento de determinados temas. A grandes rasgos, estos son los diversos ámbitos del diseño en que se especializan:

-

M e t r ó p o l i s . Diseño sostenible y medio ambiente urbano. Eye . Diseño gráfico, comunicación visual en general y teoría del diseño. V i s u a l . Diseño, comunicación visual y tipografía, profundizando sobre todo en el ámbito nacional. Adbusters . Activismo político y creativo, anticonsumismo, diseño social y participativo. Thinkcycle. Diseño colaborativo, sostenibilidad, enfocados a las zonas más desfavorecidas del mundo. Éste último no es exactamente un magazine, pero lo hemos considerado de gran importancia por su razón de ser y acceso abierto a todos los artículos publicados.

Consideramos que mediante el análisis de estos sitios web, se adquiere un alto grado de destreza a la hora de acceder a sus fuentes de información. Y aunque la muestra es una pequeña parte en el inmenso campo bibliográfico, es de esperar que se convertirán en obligados referentes de cara a la profundización en un campo concreto de estudio, en el proceso de conformación de la tesis doctoral o cualquier otro trabajo de investigación, así como para el desarrollo de la actividad profesional.

4

II. ESQUEMA DE ANÁLISIS

5

II. ESQUEMA DE ANÁLISIS

II. ESQUEMA DE ANÁLSIS

D

e entre la inmensa variedad de posibilidades y de modelos de análisis de sitios web, hemos conformado un esquema propio para el presente trabajo, a partir de las diferentes ideas y patrones desarrollado en la bibliografía consultada, que va desde los apuntes del curso, pasando por sitios web y publicaciones diversas. El análisis se estructura en tres grandes bloques, que coinciden en su base, con los expuestos en el capítulo Proceso de creación del CD del curso Introducción al Diseño Interactivo . a) Información b) Navegación c) Presentación Dentro de los cuáles, se han introducido subapartados para un análisis más pormenorizado. Así pues, el patrón de análisis que se repite a lo largo de los cinco sitios web, es a grandes líneas, el que presentamos en la siguiente página.

A. INFORMACIÓN A1. PRODUCTO Y PÚBLICO A2. OBJETIVOS A3. PLANIFICACIÓN A4. ORGANIZACIÓN A4.1. Mapa del sitio A4.2. Estructura de la Interfase A4.3. Estilo de escritura

b. NAVEGACIÓN B1. ACCESIBILIDAD B2. OPTIMIZACIÓN B3. NAVEGABILIDAD B3.1. Orientación de los usuarios B3.2. Interacción B3.3. Qué sucede en pantalla B3.4. Controles de navegación B4. PRODUCTIVIDAD

C. PRESENTACIÓN C1. GRÁFICOS C1.1. Interfaz CI.2. Imágenes CI.3. Tipografía C2. MEDIOS C2.1. Sonidos y narraciones C2.2. Animación y vídeos C3. PUESTA EN SERIE C3.1. Ritmo de acción y cambios C3.2. Estilo, efectos y transiciones

6

III. SITIOS WEB ANALIZADOS

7

3.1- www.metropolismag.com 3.2- www.eyemagazine.com 3.3- www.visual.gi 3.4- www.adbusters.org 3.5- www.thinkcycle.org

8

www.metropolismag.com

A. INFORMACIÓN A1. PRODUCTO Y PÚBLICO La revista Metrópolis Magazine fue concebida en 1981, inicialmente en versión impresa, por el editor Horace Havemeyer, con la visión de expandir el diálogo sobre el diseño y la arquitectura hacia un público más amplio que el de únicamente los profesionales. Metrópolis examina la vida contemporánea a través del diseño-arquitectura, diseño de producto, de interiores, gráfico, artesanía, planificación y preservación. En sus páginas trata toda una serie de aspectos que van desde el medio ambiente urbano, pasando por espacios íntimos hasta pequeños objetos de uso cotidiano.

A2. OBJETIVOS Buscando los motivos por los que el diseño opera de un modo determinado, Metrópolis explora el contexto económico, ambiental, social, cultural, político y tecnológico. Metrópolis muestra, en tono a menudo provocativo, cómo de bien diseñado puede estar el mundo en el que vivimos.

A3. PLANIFICACIÓN La versión impresa de Metrópolis se publica cada dos meses. La planificación y actualización de contenidos en el sitio web, sigue también la misma periodicidad en lo referido estrictamente al magazine, dedicándole una sección. Pero además de ello, cuenta con numerosas secciones complementarias a la revista, que incluyen artículos, reportajes, reseñas de libros y tópicos de actualidad, de interés social y cultural. Y estos contenidos se actualizan con independencia de la publicación del magazine, no desapareciendo, sino que siguen estando disponibles en el sitio web, pudiendo acceder a ellos a través de la sección Archivos. En conclusión, podemos decir que la estructuración, planificación y actualización de los contenidos están proyectados de manera brillante, y dotando al sitio web de una considerable independencia respecto a al publicación impresa a partir de la que surgió, y va más allá de ella. Por último, destacar que mientras se estaba realizando el análisis de dicho sitio web, éste fue reestructurado en profundidad, ofreciendo nueva interfaz y secciones con nuevos contenidos, con una mayor facilidad de navegación y agradable presentación, alejada de modas efímeras. Este hecho demuestra la voluntad de la entidad de estar al día, de una forma coherente y responsable.

9

www.metropolismag.com

A4. ORGANIZACIÓN A4.1. Mapa del sitio

www.metropolismag.com

Home

HOME

SUBSCRIBE Magazine

Newsletter

MAGAZINE Current Issue Contact Us

Adv.Info

EVENTS Up & Coming

Conferences

Competitions

Sustainable Urban Journal World Trade Designmart Metropolis Center

ARCHIVES 2003

2001

etc.

Reviews

Talk 2 us

10

www.metropolismag.com

A4.2. Estructura de la Interfase

Menú de navegación

Búsqueda Menú de secciones fijas

Identificador del sitio

Contenidos del último Nº Publicado

Promoción de contenidos

Contenidos temporales

Accesos directos

11

www.metropolismag.com

A4.3. Estilo de escritura La redacción de los textos en Metrópolis tienen un marcado carácter periodístico e informativo, como buen ejemplo de la profesionalidad de la revista impresa. El problema que suele surgir en estos casos, es que se pretende trasladar el mismo esquema de escritura del papel a la pantalla, sin tener en cuenta que las condiciones no son las mismas para una adecuada lectura. El sitio web de Metrópolis peca de exceso de explicaciones en la introducción a los contenidos. Si ya es un sitio de por sí, con un gran volumen de información, estos pequeños textos explicativos, a menudo no hacen sino acrecentar el nivel de ruido visual y documental. El siguiente cuadro, extraído del índice del último magazine, consideramos que es la extensión máxima de texto que deberían permitirse en titulares de estas características, pues el tamaño final del texto, demasiado pequeño –aunque modificable por el usuariotampoco ayuda a su lectura.

From the Magazine Metropolis Honor Roll For our education issue, Metropolis has gathered high school and college graduation photos of some of our favorite architects and designers. It's a reminder of the importance of education, as well as a pop quiz for our readers.

12

www.metropolismag.com

b. NAVEGACIÓN B1. ACCESIBILIDAD En este apartado vamos a tener en cuenta el equipo del usuario medio del sitio web de Metrópolis Magazine. No es necesario tener un plug-in específico, ya sea Flash o Acrobat Reader. Todo el contenido viene publicado en html y se puede copiar, pegar, manipular, etc. Teniendo en cuenta a otros grupos de usuarios con problemas de vista, podemos decir que las páginas se visualizan perfectamente si las visualizamos únicamente en blanco y negro. Una carencia importante, de cara a los usuarios que utilizan un navegador que no soporta imágenes, o cuando éstas no se cargan correctamente, es que no existen etiquetas que describan la imagen que veríamos en la pantalla, en lugar de encontrarnos con esas incómodas ventanas vacías y un icono rasgado.

B2. OPTIMIZACIÓN A continuación presentamos una tabla con los resultados aproximados obtenidos tras varias pruebas realizadas con diferentes equipos de usuarios:

Sistemas Operativos

Navegadores

Plug-ins necesarios

Tiempo de descarga

Windows 98

Internet Explorer

OK

4 segundos

Windows XP

Internet Explorer

OK

3 segundos

Windows XP +ADSL

Internet Explorer

OK

- 1 segundo

Mac OS X

Internet Explorer

OK

1 segundo

Tras comparar la tabla, es de destacar el escaso tiempo empleado hasta conseguir visualizar la página principal correctamente. A pesar de la gran cantidad de información escrita e imágenes disponibles ya desde el inicio, los resultados evidencian una gran optimización del sitio en conjunto, lo que redunda en su propio beneficio, pues ya de entrada, supone una invitación al usuario a iniciar la navegación.

B3. NAVEGABILIDAD La navegabilidad la definiremos de forma sencilla como la “facilidad de encontrar la información”. Para este y el resto de sitios web analizados, estableceremos unos subapartados que nos permitan

13

www.metropolismag.com

desmenuzar mejor una serie de aspectos relacionados con la navegabilidad.

B3.1.Orientación de los usuarios

B3.2. Interacción

La página inicial de Metrópolis actúa como auténtico portal de lo que el usuario se va a encontrar en el resto de pantallas. La estructura de contenidos es muy sencilla y clara, para evitar crear confusión y desorientación. El equilibrio entre bloques de texto e imágenes es bastante acertado, sin sobrecargar la pantalla, simple pero contundente. Además, las mismas imágenes son bastante significativas del contenido que se esconde tras de ellas, y sin más necesidad de utilizar texto que las explique o describa. Aunque este aspecto podría ser favorable en caso de tener problemas con el navegador a la hora de cargar la imagen.

El acceso a las distintas pantallas portadoras de los contenidos son anunciados en la página inicial o Home, estableciendo caminos de acceso inmediato, y al mismo tiempo entre información del mismo nivel jerárquico, sin tener por qué retroceder demasiado hacia atrás. No obstante, al tratarse de la versión en línea de un magazine que trata en profundidad un amplio espectro de temas de la actualidad del diseño, el volumen de contenidos es considerable, y en consecuencia, la profundidad en los niveles también es grande, pero está resuelta de forma brillante. Tal vez, podríamos señalar como excesivas el número de rutas que nos conducen a una misma pantalla, puesto que tanto imágenes como los titulares tienen hipervínculos a las mismas. Aunque este hecho no es un inconveniente en sí mismo, ocurre que a menudo nos volvemos a encontrar en una pantalla que ya hemos visitado varias veces partiendo de distintos botones, imágenes, titulares o texto con hipervínculo.

La metáfora utilizada en el sitio web es la del escritorio o también considerada como estructura de revista, la más clásica y por tanto familiar, de los medios digitales. Así mismo, guarda estrechas conexiones con la estructura de navegación de la versión impresa. Así mismo, destacar que existe un buscador presente en todas las páginas, algo que en palabras de Krug (2001. p.67) es muy útil para los usuarios, puesto que “un gran porcentaje de usuarios, en su primer acto oficial de investigación de un nuevo sitio, echarán un vistazo rápido a la página en busca de una herramienta de búsqueda del contenido”

B3.3. Qué sucede en pantalla

14

www.metropolismag.com

En todo momento sabemos en qué parte del sitio nos encontramos, pues la organización y la jerarquía de las pantallas está perfectamente definida. Los titulares van decreciendo en tamaño y vistosidad cromática a medida que disminuye su relevancia. Todas las pantallas del sitio web tienen la misma o similar estructura de contenidos. Los menús de navegación permanecen inalterables, así como los títulos de cada pantalla. Y siempre se tiene en cuenta la continuidad del equilibrio texto-imagen a lo largo de las pantallas.

B3.4. Controles de navegación Los controles de navegación del sitio web de Metrópolis están diseñados de forma clara, simple y diferenciada del resto de elementos de las pantallas, -como veremos en el apartado de la presentación-, tanto por su tipografía como por su color. Hay que destacar que todos los controles están realizados con tipografía en idioma inglés, sin inclusión de iconos, por lo que se evita la confusión en la interpretación de los mismos, pero también se obliga al usuario a entender mínimamente el idioma.

B4. PRODUCTIVIDAD En base a la bibliografía de apoyo, hemos considerado la noción de productividad en Internet como la conjunción entre la experiencia del usuario y la respuesta de la empresa ante el usuario. En este sentido, la empresa editorial Metrópolis, despliega una amplia visión de la red, ofreciendo a los usuarios, en una de las secciones principales –SUBSCRIBE-, la posibilidad de suscribirse a la revista, por lo que se establecen unos vínculos comerciales que por un lado benefician a la empresa, y por el otro, le dan una gran comodidad al usuario.

Los menús son desplegables de tipo “roll-over”, activándose simplemente al pasar el puntero por encima.

15

www.metropolismag.com

C. PRESENTACIÓN

ilustran. Son de formato cuadrado, lo que les dota de homogeneidad, además de parecer la unidad de medida de la página, puesto la parrilla o cuadrícula imaginaria está dividida en 4 columnas del mismo ancho que el de las imágenes.

C1. GRÁFICOS C1.1. Interfaz

Página inicial La página inicial de Metropolis cumple perfectamente su función principal, que es la de informar al usuario de las características del sitio en el que se encuentra –en este caso, una revista en línea, dedicada al diseño y arquitectura en la ciudad-, así como indicar qué opciones de navegación tiene a su alcance, y el contenido o secciones que van a ser accesibles. El fondo utilizado es blanco, que proporciona el máximo nivel de contraste y legibilidad con el texto en negro. También resulta acertada la combinación cromática entre el verde y el magenta para la columna de contenidos actuales y para el menú de navegación respectivamente, ya que constituyen dos colores complementarios que ayuda a diferenciar la naturaleza de los contenidos.

CI.2. Imágenes Las imágenes incluidas en las páginas, son muy descriptivas del contenido que se va a encontrar tras ellas, ya que todas ellas tienen hipervínculo al documento que

Esta imagen corresponde al último número impreso de Metropolis editado. Aparece en la página inicial en gran formato, ocupando la franja central alineada a la izquierda, de la pantalla. En el resto de páginas, sigue estando presente, con un tamaño menor, situada en la parte superior izquierda. Este uso de dicha imagen tiene dos fines básicos: - Informar al usuario, cuál es el número actual de la revista, dando pistas de que el contenido que se van a encontrar en la web, coincide en gran medida con el de la versión impresa. 16

www.metropolismag.com

- Dar una mayor unidad gráfica y coherencia al sitio web, así como información, al utilizar como identificador del sitio, no sólo el logotipo, sino la portada de todo el número, de manera que, aunque el ejemplar se actualice, en su parte superior siempre llevará la inscripción METROPOLIS.

artículos, hacen que se establezca una diferenciación visual clara, además de ayudar a jerarquizar la información

C.2 MEDIOS CI.3. Tipografía

C2.1. Sonidos y narraciones

La tipografía empleada responde a las necesidades de legibilidad exigidas al leer en pantalla, y tiene en cuenta la gran cantidad de información existente en el sitio web, por lo que se utilizan diferentes variables, que ayudan a distinguir y jerarquizar las distintas clases de contenido. Esta es una muestra de las tipografías que encontraremos:

www.metropolismag.com carece de sonidos tanto a nivel de melodía como de cualquier tipo de señal acústica al ejecutar los comandos de Java, rollovers u otro tipo de control de navegación.

C2.2. Animación y vídeos HOME Tipografía utilizada para el Menú: Helvética Neue Bold Condensed Tipografía utilizada para el texto: De remates: Georgia En negrita y verde para los titulares, mientras que negra y regular para el texto del contenido.:

Generalmente el sitio web no incluye ningún tipo de animación, ya sea en Flash, GIF u otra, pero es posible que la hayan llegado a incluir en algún número anterior, lo más probable es que con finalidad didáctica o narrativa de un evento, construcción en proceso, etc. Lo mismo ocurre con los vídeos.

News & Views · August 1, 2003

C3. PUESTA EN SERIE

The Latest WTC Casualty [Greenwich St.] is again on the radar with plans rapidl

C3.1. Ritmo de acción

Esta diferencia entre textos de palo seco para el menú de navegación, y de tipo romano o con remates para los

No se hacen uso de las herramientas web disponibles para crear un ritmo de acción específico, más allá de

17

www.metropolismag.com

Dreamweaver. Si bien podríamos considerar la rapidez de ejecución de las acciones y la limpieza de la página como características a tener en cuenta en este sentido.

C3.2. Estilos, efectos y transiciones El estilo o estética general del sitio, lo podríamos denominar como cercano a lo que se ha conocido en otras artes como el Estilo Internacional, además de ciertas cualidades del diseño suizo, como la tipografía elegida para el menú y el geometrismo y cierto minimalismo de la composición. También tiene un toque genuino de la forma de proceder en el diseño gráfico editorial estadounidense, muy dados a la combinación de tipos con y sin remates, así como de las cualidades de anuncios publicitarios de la portada de los magazines.

18

www.metropolismag.com

3.1- www.metropolismag.com 3.2- www.eyemagazine.com 3.3- www.visual.gi 3.4- www.adbusters.org 3.5- www.thinkcycle.org

19

www.eyemagazine.com

A. INFORMACIÓN A1. PRODUCTO Y PÚBLICO El sitio web www.eyemagazine.com, es la versión en línea de la revista impresa internacional Eye, una de las revistas de diseño gráfico más importantes a nivel mundial especializada en diseño gráfico y cultura visual. Obviamente, el sitio web va dirigido a profesionales y estudiantes del medio, sobre todo, aunque gracias a sus artículos de opinión, de gran calidad y profundidad en el tratamiento de los conceptos, no es de extrañar que consigan atraer la atención de otro tipo de lector o navegante.

A3. PLANIFICACIÓN La versión impresa de Eye, se publica trimestralmente con nuevos contenidos, pero manteniendo las secciones fijas. Del mismo modo, la actualización de contenidos en el sitio web se renueva aproximadamente cada tres meses al compás de la revista en papel. No obstante, antes de que ésta salga a la calle, desde la web se van publicando algunos adelantos, como pequeñas reseñas de libros, etc., así como la imagen que sirve de fondo en la página principal. Estas acciones tienen la función de dinamizar el sitio web, de manera que se evite tener exactamente la misma apariencia y contenido durante tres meses.

A2. OBJETIVOS El objetivo principal del sitio es el de constituir un lugar de referencia para el lector habitual de la versión impresa de la revista, en el que pueda encontrar el índice y algunos artículos de números anteriores publicados. Así mismo, posibilitan la suscripción de nuevos usuarios desde internet, y hacer el pedido de números atrasados o ejemplares concretos de la revista para ser enviados al cliente, bien de forma electrónica, o impresa.

20

www.eyemagazine.com

A4. ORGANIZACIÓN A4.1 Mapa del sitio

www.eyemagazine.com

Home Subscribe to mailing list

Search

Get eye

Where to buy

Issues

Advertise

Critiques

Links

48

47

current critique

Past caring

46

etc.

Playground surr

etc.

Contact

Subscribe now!

21

www.eyemagazine.com

A4.2. Estructura de la interfase

Identificador del sitio

Tópicos por orden alfabético

Número de publicación

Bienvenida Línea de etiquetas

Menú de Navegación

Accesos directos

22

www.eyemagazine.com

A4.3 Estilo de escritura Al igual que Metrópolis, Eye Magazine profundiza en el mismo tipo de contenidos, relacionados con el diseño. Pero en este caso, la cantidad de información de carácter gratuito que publican en la red, es mucho menor que en Metrópolis. Y este hecho también se ve reflejado en el estilo de redacción empleado, mucho más escueto y al grano. Sin apenas explicaciones innecesarias sobre lo que el lector va a encontrar, ni introducciones inútiles sobre cómo navegar por las páginas. No obstante, incluyen un párrafo de bienvenida, que si bien no es del gusto de algunos gurús de la usabilidad en la web (Krug, 2001), en este caso, y gracias a lo conciso y claro que es, en el plano central de la página principal, a mi juicio resulta un interesante acierto.

Welcome to the Eye website, an index of the quarterly print magazine for everyone involved in graphic design and visual culture FREE ISSUE OF EYE

23

www.eyemagazine.com

b. NAVEGACIÓN B1. ACCESIBILIDAD En este apartado vamos a tener en cuenta el equipo del usuario medio del sitio web Eye. Para empezar, es necesario un plug-in de Flash si queremos visualizar correctamente el listado de términos que aparecen en la parte superior de la página principal. A pesar de que seguramente la mayoría de los usuarios que accedan a www.eyemagazine.com, tendrán instalado Flash por ser diseñadores, también se podían haber planteado otras alternativas a la presentación de este apartado, bien en html, o creando nuevas páginas a partir de mostrar solamente las iniciales del alfabeto. Para personas con problemas de visibilidad, el sitio cumple los requisitos mínimos de contraste entre fondo y figura, etc. Al no abundar las imágenes, en el caso de que no se puedan cargar correctamente, tampoco interfiere demasiado en la nevegación del sitio. B2. OPTIMIZACIÓN Se han realizado varias pruebas desde diferentes equipos informáticos, comprobando cómo variaba sensiblemente el tiempo de descarga. A continuación presentamos una tabla con los resultados obtenidos. Creemos necesario comentar

que son resultados aproximativos, y que los mismos, más allá de los equipos utilizados, también se ven influenciados por otra serie de variables externas como la densidad del tráfico en Internet en ese momento, etc. aspectos que no son especialmente relevantes para el análisis que ahora nos ocupa: Sistemas Operativos

Navegadores

Plug-ins necesarios

Tiempo de descarga

Windows 98

Internet Explorer

Sin Plug.in para Flash

10 segundos

Windows XP

Internet Explorer

OK

6 segundos

Windows XP +ADSL

Internet Explorer

OK

3 segundos

Mac OS X

Internet Explorer

OK

4 segundos

Los puntos en común que detectamos tras estas pruebas, nos confirman que el apartado de la página principal del sitio web que más tiempo tarda en descargarse completamente, es la lista de términos por orden alfabético, dispuesta en la parte superior, que está realizada con Macromedia Flash 6. No obstante, mientras esta se descarga a una velocidad más lenta, el menú principal donde se encuentran el resto de las secciones ya está perfectamente accesible, y se puede navegar por ellas sin esperar a que se descargue por completo.

24

www.eyemagazine.com

Es de destacar que el sitio web de Eye no posee muchas imágenes ni archivos pesados que dificulten la descarga, sino que la mayoría son artículos en formato textual que aunque conforman una enorme base de datos, no interfieren significativamente en el tiempo necesitado para hacerse visibles.

B3. NAVEGABILIDAD La navegabilidad la definiremos de forma sencilla como la “facilidad de encontrar la información”. Para este y el resto de sitios web analizados, estableceremos unos subapartados que nos permitan desmenuzar mejor una serie de aspectos relacionados con la navegabilidad.

B3.1.Orientación de los usuarios La página inicial de Eye Magazine actúa como auténtico portal de lo que el usuario se va a encontrar en el resto de pantallas. La estructura de contenidos es realtivamente clara, para evitar crear confusión y desorientación. La fuerza del texto predomina sobre la de las imágenes , pero sin llegar a abarrotar la pantalla. Las imágenes son más sugerentes que descriptivas y no aportan información extra al usuario. La metáfora utilizada en el sitio web es la del escritorio o también considerada como estructura de revista. Así

mismo, guarda estrechas conexiones con la estructura de navegación de la versión impresa.

B3.2. Interacción El acceso a las distintas pantallas son anunciados en la página inicial o Home, estableciendo caminos de acceso inmediato, y al mismo tiempo entre información del mismo nivel jerárquico, sin tener por qué retroceder demasiado hacia atrás. Al igual que en Metrópolis, la cantidad de los temas de la actualidad del diseño de los que trata, hace que la profundidad en los niveles también sea grande, pero ésta está resuelta de forma eficaz y muy práctica. Como en Metrópolis, los caminos de acceso a los artículos no son únicos, sino por referencias cruzadas, ya que siempre, al elegir un tema determinado, nos encontramos con una columna a la derecha del artículo que nos sugiere artículos relacionados u otros autores que también han tratado el asunto.

B3.3. Qué sucede en pantalla La organización y la jerarquía de las pantallas está perfectamente definida, por lo que en todo momento sabemos en qué parte del sitio nos encontramos. Los titulares van decreciendo en tamaño y vistosidad cromática a medida que disminuye su relevancia.

25

www.eyemagazine.com

Todas las pantallas del sitio web tienen la misma estructura de contenidos y de disposición de los menús de navegación, centrados en la página, a la altura de nuestro golpe de vista inmediato. El gran tamaño de los títulos de página, no da lugar a que nos encontremos perdido. Y siempre se tiene en cuenta la continuidad del equilibrio texto-imagen a lo largo de las pantallas.

B3.4. Controles de navegación Los controles de navegación del sitio web de Eye, están diseñados de forma clara, simple y diferenciada del resto de elementos de las pantallas. Es de destacar su disposición en el centro de la pantalla, algo no habitual en los sitios web, y menos todavía los que tienen carácter de revista o portal. El título de las secciones está en inglés y no utilizan icono alguno que permita su identificación universal, si no se domina el idioma.

B4. PRODUCTIVIDAD Entre sus secciones principales está “Get eye“, en la que el usuario puede conseguir números atrasados del magazine, o suscribirse al mismo anualmente, pudiendo realizar la transacción bancaria directamente desde Internet. Otra de sus secciones importantes, “Advertise”, pone en conocimiento de empresas y diseñadores, las tarifas y tipos de publicidad que pueden contratar para ser publicados en su revista.

Encima del menú, existe un útil lista realizada en Flash, que nos ofrece un completo acceso a conceptos de la A la Z, tratados en alguno de los números del magazine.

26

www.eyemagazine.com

C. PRESENTACIÓN C1. GRÁFICOS C1.1. Interfaz

Página de inicio En líneas generales, podemos decir que la página de inicio de la revista Eye, está muy bien estructurada y desde el principio tenemos una noción muy clara del tipo de sitio en el que nos encontramos, a qué se dedican y qué podemos esperar de él. Teniendo en cuenta la cantidad de información que ofrecen, no resulta nada caótica la página en una primera impresión. Jerárquicamente, se distinguen las ocho secciones principales en cuanto a contenido, colocadas en el centro de la página para una mejor visualización C1.2. Imágenes

contenido, los conceptos y la calidad de los artículos por encima de la presencia de imágenes que no aportan nada significativo, como ocurre en muchas ocasiones en sitios web del mismo ámbito. A continuación hacemos un repaso general de las páginas en las que aparecen imágenes y sus propiedades:

- Home: En la página principal suelen incluir una imagen de fondo relacionada con alguno de los artículos de la revista o de actualidad cultural y social. En el número “Summer 2003”, incluyen hemos comprobado, a lo largo de sucesivas revisiones, cómo van rotando dicha imagen de fondo, y así nos encontramos con la siguiente:

Revisión: 7 Agosto 2003

Pese a tratarse de un magazine sobre la cultura del diseño y la comunicación visual, paradójicamente, el número de imágenes que aparecen son escasas. Y esto se agradece enormemente, porque reduce el peso de las páginas y evidencia cuál es la filosofía de eye, de hacer primar el

27

www.eyemagazine.com

- Get eye: En esta página, se utiliza un mapa del mundo para visualizar y clicar sobre el continente en el que nos encontremos y realizar nuestra suscripción a la revista.

Tamaño: 3065 bytes Dimensiones: 449 x 200 pixels.

- Issues: Página en la que se puede consultar el contenido de los números anteriores. Aparece una lista con la imagen y el número de todas las portadas.

Tipo: Imagen Corel PHOTO-PAINT 10.0 (JPG)

C1.3 Tipografía Se utilizan principalmente dos tipografías diferentes: Georgia para los títulos encabezando las páginas correspondientes a las secciones principales como: Issues, Critiques, etc. Verdana, cuerpo 7 para el resto: en negrita para los botones de las diferentes secciones, y regular para el cuerpo del texto de los artículos.

C2. MEDIOS El sitio web de Eye Magazine no hace uso de elementos sonoros, y apenas de animaciones, si exceptuamos la pequeña acción que efectúa el logotipo; Al cargarse la página principal, el logotipo de la revista, que consiste en el nombre Eye, escrito de manera caligráfica y rodeado por una especie de círculo, va apareciendo de forma gradual, como si una mano invisible lo estuviera escribiendo en el momento. Este gesto enfatiza la marca y consigue que el inicio de la navegación nos resulte más dinámico. La animación está realizada con Macromedia Flash 6.

Tamaño: 9206 bytes Dimensiones: 80 x 103 pixels

28

www.eyemagazine.com

C3. PUESTA EN SERIE La puesta en serie a lo largo de todo el sitio es muy correcta, manteniendo la información estructurada conforme a unas retículas básicas que con ligeras variaciones (en función de si tenemos acceso libre o no a un artículo determinado), proporcionan una navegación agradable. Del mismo modo, la franja horizontal en la parte superior, donde están contenidos los datos principales: número de la revista, título de la página y menú principal, permanece invariable a lo largo de las páginas, lo que es determinante para lograr una coherencia, un aire compacto sin grandes saltos visuales ni estructurales entre las páginas. C.3.1 Ritmo, acción y cambio Teniendo en cuenta que la función del sitio es ofrecer información en línea de su revista impresa, y no tanto captar la atención del usuario por medio de efectos innecesarios, los responsables de Eye Magazine, no obstante, nos ofrecen algunos pequeños detalles que le imprimen dinamismo a la presentación.La revista edita cuatro números al año, coincidiendo con las cuatro estaciones: primavera, verano, otoño e invierno. Cada vez que se lanza un número nuevo, la apariencia gráfica de las páginas cambia sensiblemente, incorporando elementos relacionados con alguno de los temas principales que se tratan. No obstante, su estructura informativa y disposición

de los comandos de menú, logo, etc. permanecen invariables. Este hecho dota al sitio de un valor añadido de renovación periódica, introduciendo leves cambios gráficos, que lejos de desorientar al usuario, le transmiten aires de frescura y actualidad. Uno de los elementos que más ritmo le dan al sitio es el recuadro de la parte superior de la página principal, consistente en seis columnas de diferentes términos y conceptos que en alguna ocasión se han tratado en la revista. Cuando clicamos sobre uno de ellos, nos aparece a su derecha el número o números de la revista que lo tratan en profundidad, pudiendo acceder a dichos artículos. Cada vez que actualizamos la página, nos encontramos con un bloque de conceptos diferente. La manera de navegar por ellos no es la más sencilla posible, pero da toda la impresión de que lo han concebido como una forma de jugar con la paciencia del usuario, ya que disponemos de otras formas de acceder a esos mismos contenidos. Este apartado está realizado con Macromedia Flash 6.

C3.2. Estilo, efectos y transiciones La apariencia gráfica del sitio de Eye nos remite inmediatamente a un tipo de estilo que podríamos calificar de posmoderno, en diseño. Es decir, guarda estrecha relación con el contenido que ofrecen.

29

www.eyemagazine.com

También hay aspectos, como en la tipografía utilizada que hacen adivinar su carácter anglosajón, si es que cabría la posibilidad -cada vez más impensable con la globalización y uniformización de estilos y tendencias-, de encontrar características en la web propias de la tendencia de diseñar en determinados países. Tal vez sea una visión muy subjetiva, pero si nos ponemos a compararla con revistas como Experimenta, On Diseño o Domus, las diferencias gráficas en función de la cultura saltan a la vista.

30

3.1- www.metropolismag.com 3.2- www.eyemagazine.com 3.3- www.visual.gi 3.4- www.adbusters.org 3.5- www.thinkcycle.org

31

www.visual.gi

A. INFORMACIÓN A1. PRODUCTO Y PÚBLICO La revista Visual es una publicación bimensual editada en España, -y en palabras de Fernández Coca, colaborador de la misma; una de las mejores de Europa- dedicada al diseño, la creatividad gráfica y la comunicación. En el momento en que realizamos este análisis, la revista va por su Nº 103 en la versión impresa. La principal función de la versión en línea, es complementar a la anterior y servir de plataforma difusora, aunque como veremos más adelante, el sitio web sigue anclado en el Nº95.

A2. OBJETIVOS El objetivo primordial, como hemos comentado, del sitio web, es dar fe de la existencia física de la revista, puesto que no aporta nada nuevo o interesante, que no encontremos en papel, más allá de un foro de escasísima capacidad intelectual o de un directorio de ilustradores, fotógrafos y creativos. Así mismo, el sitio web de Visual, es muy escaso de contenido.

A3. PLANIFICACIÓN La versión impresa de la revista Visual, sale a la calle cada dos meses, con contenidos de la actualidad del diseño y de la cultura visual. Pero por el contrario , el sitio web no renueva sus contenidos al ritmo de la versión en papel, sino que es un espacio mucho más pasivo e inactivo. La muestra es que a fecha de Agosto de 2003, mientras podemos comprar el ejemplar Nº103 en las librerías, en el sitio web, los últimos artículos publicados son del número 95. Este medio, que debería ser una plataforma de avance de contenidos y punto de información constante, queda relegado al abandono más absoluto. Otro aspecto a destacar en la planificación de contenidos, es el escaso número de artículos que publican en la red, de forma gratuita. Esta claro que si una revista de este tipo quiere mantener la rentabilidad, no puede permitirse el lujo de exponer todo su contenido en Internet, pero éste, a diferencia de otros casos como el de Eye, que ofrecen bastante información, es el extremo opuesto. Para más incomodidad, los artículos, con una extensión en líneas considerable, están publicados en html y dentro de marcos, con lo que el seguimiento completo de la lectura se hace engorroso, al tener que estar continuamente utilizando la barra de desplazamiento.

32

www.visual.gi

A4. ORGANIZACIÓN A4.1. Mapa del sitio

www.visual.gi Index

Opinión

Reportajes

webmaster

Debates

01

04

01

04

02

05

02

05

03

06

03

06

Consulta

Participa

Directorio Estudios Ilustradores

Contactar

Fotógrafos

Tipografías

Links

01

04

02

05

03

06

33

www.visual.gi

A4.2. Estructura de la Interfase

Identificador del sitio

Línea de etiquetas Menú de navegación Título de secció n

Promoció n de contenidos

34

www.visual.gi

A4.3. Estilo de escritura En www.visual.gi, la redacción de los textos corresponde casi exclusivamente a los artículos escritos por los colaboradores de la revista. Apenas existen párrafos explicativos o introductorios fuera de éstos. Por tanto, podríamos calificar el sitio, ateniendo a su estilo de escritura, como de conciso, claro y escueto, cualidad esta última, que guarda relación con el escasísimo contenido de la versión digital de la revista Visual.

35

www.visual.gi

Mac OS X

b. NAVEGACIÓN Para acceder correctamente al contenido del sitio web, se enumeran los siguientes requisitos, advertidos en la página inicial, para el equipo del usuario: - Plug-in de Flash 5.0 - I Explorer 5.0 ó Netscape 5.0 - 800x600 resolución de pantalla B2. OPTIMIZACIÓN En esta tabla se muestran los resultados aproximados obtenidos al medir los tiempos de descarga y correcta visualización de la página, en los casos en que ha sido posible: Navegadores

Plug-ins necesarios

OK

- 1segundo

B3. NAVEGABILIDAD

B1. ACCESIBILIDAD

Sistemas Operativos

Internet Explorer

Tiempo de descarga

Windows 98

Internet Explorer

Sin plug-in para Flash

3 segundos

Windows XP

Internet Explorer

OK

2 segundos

Windows XP +ADSL

Internet Explorer

OK

-1 segundo

El diseño de la navegación, es quizás uno de los pocos aspectos de este sitio web de Visual que están realizados de manera aceptable. En todo momento sabemos el lugar en el que nos encontramos y cómo acceder a las páginas. Esto es debido sobre todo a la existencia de un menú de navegación fijo situado en la parte superior de las páginas. Pese a algunos estudios realizados (J. Nielsen, 2000 ó E. Manchón 2002) en los que consideran que el usuario se fija directamente en el contenido, sin reparar en el menú de navegación, en este caso en particular, el mismo resulta imprescindible. Tal vez esto sea debido a la ausencia más inexplicable de contenido a lo largo de las páginas. B3.1.Orientación de los usuarios La página inicial de Visual actúa como índice de lo que el usuario se va a encontrar en el resto de pantallas. La estructura de contenidos es muy sencilla y clara, para evitar crear confusión y desorientación. El equilibrio entre bloques de texto e imágenes es un aspecto que está bastante descuidado, pues sobrecarga la pantalla, sobre todo la página inicial, de un popurri de imágenes a modo de collage que no aportan ningún valor estético que lo justifique, ni

36

www.visual.gi

tampoco informativo. Las mismas imágenes no son lo suficientemente significativas del contenido que se esconde tras ellas. Problema al que hay que añadir el exceso de tiempo al cargar una imagen de gran tamaño y totalmente irrelevante.. La metáfora utilizada en el sitio web es la del escritorio o también considerada como estructura de revista, al igual que la mayoría de magazines analizados. Pero incomprensiblemente, no guarda ningún tipo de conexión formal con la estructura de maquetación de la versión impresa. Lo que evidencia que el desarrollador del sitio web y los editores en papel no son los mismos y ni siquiera han intentado un mínimo de convergencia en las estrategias de comunicación gráfica.

a los diferentes tipos de información son únicas, es decir, que no se accede más que por una vía respectivamente.

B3.3. Qué sucede en pantalla En todo momento sabemos en qué parte del sitio nos encontramos, pues la organización y la jerarquía de las pantallas está perfectamente definida. Los titulares van decreciendo en tamaño y vistosidad cromática a medida que disminuye su relevancia. Todas las pantallas del sitio web tienen la misma o similar estructura de contenidos. Los menús de navegación permanecen inalterables, así como el lugar de los títulos de cada pantalla.

B3.2. Interacción El acceso a las distintas pantallas portadoras de los contenidos son anunciados en la página inicial, estableciendo caminos de acceso inmediato, y al mismo tiempo entre información del mismo nivel jerárquico, sin tener por qué retroceder demasiado hacia atrás. Sorprende lamentablemente, que al tratarse de la versión en línea de un magazine que trata en profundidad un amplio espectro de temas de la actualidad del diseño, el volumen de contenidos es tremendamente escueto, y en consecuencia, la profundidad en los niveles también escasa y primaria, y ni siquiera está resuelta con un resultado técnico de excesiva calidad. Las rutas de acceso

B3.4. Controles de navegación Los controles de navegación del sitio web de Visual están diseñados de forma mediocre, con algo de dificultad para visualizarlos nítidamente, a lo que se une la lamentable tipografía, que pretende transmitir unas connotaciones estéticas de de vanguardia tecnológica digital, que tuvieron su momento de moda y proliferación hace unos pocos años, pero que quedaron desfasadas. Resulta incomprensible que un magazine dedicado a la cultura del diseño y la imagen, se ponga en evidencia mostrando una ausencia de formación tipográfica por parte de su

37

www.visual.gi

diseñador web. Un breve aspecto a resaltar sobre el idioma es que ya que en el resto de controles de las secciones se ha utilizado íntegramente el castellano, la sección de “links” sería más correcta si la sustituimos por la palabra española “enlaces”. Los menús son desplegables de tipo “roll-over”, activándose simplemente al pasar el puntero por encima.

profesionales del sector y otros enlaces afines a la cultura visual, la mayoría no tienen un enlace activo, y cuando lo tienen, no funciona correctamente.

B4. PRODUCTIVIDAD Si consideramos la productividad en Internet como la conjunción entre la experiencia del usuario y la respuesta de la empresa ante el usuario, entonces podemos afirmar tajantemente, que la productividad de www.visual.gi es, sencillamente, nula. Principalmente por ser un sitio donde la mayoría de usuarios son expertos en comunicación visual y buscan contenidos más bien definidos y de calidad, al tener la versión impresa como referencia en la cabeza, mientras que el sitio responde con una sección de debates pésima y vacía. Y del mismo modo, aun contando con una considerable base de datos con direcciones de 38

www.visual.gi

C. PRESENTACIÓN C1. GRÁFICOS C1.1. Interfaz La página inicial de Visual, es el ejemplo de página inútil, que no tiene nada que ver con el resto de las páginas. Es totalmente blanca, en la que solamente aparece el nombre de la revista la bienvenida, además de los requerimientos del equipo informático para poder visualizarla correctamente. Una vez pasada esta pantalla, accedemos a la página tipo en la que se va a desarrollar la navegación, de color negro y donde están perfectamente indicadas las secciones a navegar.

C1.2. Imágenes Las imágenes que aparecen a lo largo de todo el sitio web, son en general, demasiado grandes, escasas, y muy poco representativas –o al contrario, según se mire-, de los contenidos que quieren mostrar, que ya de por sí son contados. Destacan las dos imágenes enormes de la primera página, que se suponen coinciden con la portada del ejemplar de la revista impresa, y realmente no aportan ninguna información y hacen desaprovechar un amplio espacio, muy valioso para otros menesteres:

C1.3. Tipografía Lo primero que llama la atención en cuanto a la tipografía, es la pésima elección de la misma. En un intento por dar un aire tecnológico al sitio web, se ha elegido un tipo difícilmente determinable, pues ha sido modificado con Photoshop, añadiéndole luces en su contorno. Podríamos determinarlo como una de las variantes del tipo OCR, diseñadas por Suzanne Licko a principios de los 80, para la correcta visualización en pantalla de los primeros ordenadores personales. El resto de la tipografía empleada, para los artículos, es una Arial.

39

www.visual.gi

C2. MEDIOS C2.1. Sonidos y narraciones El sitio web de la revista Visual no incluye ningún tipo de sonido, narración o melodía.

C2.2. Animación y vídeos Resulta incomprensible comprobar cómo en la página de bienvenida se nos avisa de la necesidad de poseer un Plug-in de Flash 5, para visualizar correctamente el sitio web, y luego en el interior, la única animación que nos encontramos, es un leve resplandor en la identificación del sitio, que corresponde al logotipo Visual, porque el sitio en general es pasivo y carece del dinamismo del que se podría sacar partido utilizando Flash.

dado por el negro, y la tipografía empleada. Este estilo tuvo su apogeo a principios de los años 90, cuando los avances en software y capacidad de procesamiento de imágenes, empezaban a permitir simulaciones cada vez más sofisticadas. Pero en la mayoría de los casos fue una moda efímera, y que mal empleada compositivamente como se da el caso aquí, pude dar lugar a apariencias cercanas al kitsch. Demuestra que el diseñador se ha dejado tentar por “lo que se lleva”, sin mayor rigor conceptual ni intelectual.

C3. PUESTA EN SERIE C3.1. Ritmo de acción Lo comentado en el apartado anterior, tiene cabida de nuevo aquí: el sitio carece de ritmo, pese a requerir un plug-in de Flash, haciéndonos creer en un inicio que nos vamos a encontrar con otra puesta en escena más dinámica. C3.2. Estilo, efectos y transiciones El estilo que ha pretendido conseguir el webmaster, es el de un sitio de última tecnología, con un toque espacial 40

3.1- www.metropolismag.com 3.2- www.eyemagazine.com 3.3- www.visual.gi 3.4- www.adbusters.org 3.5- www.thinkcycle.org

41

www.adbusters.org

A. INFORMACIÓN A1. PRODUCTO Y PÚBLICO Adbusters surgió como un magazine sin ánimo de lucro, realizado con la aportación de los lectores, que profundiza en aspectos concernientes a la erosión de nuestro medio ambiente físico y cultural, por fuerzas comerciales. Su sede está en Vancouver, British Columbia, Canada. Su trabajo está apoyado por organizaciones como Amigos de la Tierra y Greenpeace. La publicación en papel, tiene una tirada de 120.000 magazines. A pesar de que las dos terceras partes de los lectores son residentes en Estados Unidos, el magazine tiene suscriptores en otros 60 países. El tipo de lector – y por extensión, de navegantes o usuarios- son, según sus propias palabras: “… profesores y estudiantes; activistas y políticos; ecologistas y profesionales de la comunicación; organismos de control de corporaciones, chicos a los que les gustan nuestras hábiles parodias de anuncios, y padres y madres preocupados por sus hijos, que pasan demasiadas horas al día enganchados a los medios electrónicos.”

A2. OBJETIVOS Adbusters ofrece incisivos artículos filosóficos , así como comentarios de activistas provenientes de todo el mundo, que tratan asuntos que van de alimentos genéticamente modificados a los medios de comunicación de masa, tratando de reinventar los anquilosados paradigmas de nuestra cultura del consumo, por unos nuevos sobre un nuevo entendimiento de la vida. Últimamente, Adbusters es también un magazine sobre ecología, con el objetivo de examinar las relaciones entre los seres humanos y su ambiente físico y mental. Uno de sus objetivos principales, según sus palabras, es “…un mundo en el que la economía y la ecología encuentren el equilibrio”. Así mismo, tratan de engatusar a la gente para que pasen de espectadores a participantes en esta búsqueda. Pretenden que la gente reaccione contra la desinformación por parte de las empresas, las injusticias en la economía global y contra cualquier industria que contamine nuestros espacios físicos o mentales de uso común.

A3. PLANIFICACIÓN El magazine en versión impresa es de carácter bimensual, siguiendo como mínimo el mismo ritmo de actualización de contenidos por parte del sitio web, mientras siguen manteniendo acceso a una gran cantidad de artículos de números anteriores.

42

www.adbusters.org

Del mismo modo, lanzan anualmente varias campañas de “marketing social” como el Buy Nothing Day (Día sin compras) o TV Turnoff Week (Semana de la TV apagada), con un alto despliegue de medios vía Internet, que les han convertido en un importante grupo activista en la red.

A4. ORGANIZACIÓN A4.1. Mapa del sitio www.adbusters.org HOME What we do? Forums Join the Network

CAMPAIGNS

MAGAZINE

Subscribe

In this Issue

...

More articles

CREATIVE RESISTANCE

ORDERS

?INFO

43

www.adbusters.org

A4.2. Estructura de la Interfase

Identificador del sitio

Menú de navegación

último Nº Publicado Promoción de contenidos

Promoción de contenidos

Contenidos temporales

Contenidos temporales

Búsqueda

44

www.adbusters.org

A.4.3. Estilo de escritura Adbusters se caracteriza por ser una voz de denuncia y activismo político canalizado por medio de propuestas creativas, por tanto, la forma de redacción del sitio web va en consonancia con sus ideas. Continuamente emplean un tono de denuncia, un discurso de carácter crítco y directo frente a aspectos como la globalización económica, el abuso de las multinacionales y cuestiones referentes a los derechos humanos. Los párrafos por tanto son breves, directos y muy bien articulados para producir un impacto visual controlado y sin ruidos innecesarios. Ayudan a introducir los contenidos de las diferentes secciones y números de magazines anteriores, los cuáles desarrollan de forma perfectamente estructurada y coherente, la respectiva información. Otro aspecto interesante y de gran utilidad en la elaboración de los párrafos introductorios a los contenidos, es la inclusión de vínculos en las palabras clave del asunto, lo cuál multiplica las opciones de lectura, y permite el acceso a temas muy concretos y específicos, sin necesidad de tener que abrir todo el documento y buscar en él lo que más nos interesa. Los siguientes cuadros, extraídos de la página principal, son un buen ejemplo de ello:

At first glance, Jessica Lynch's heroic rescue from Iraqi clutches is USdocu-drama gold. But, on closer inspection, the bad guys are friends and media are dupes. Now Congressman Dennis Kucinich demands Rumsfeld surrender unedited footage and clarify the record. Send your views (by web or email).

Early Signs of Fascism Are we sliding toward fascism? As politics increasingly fail to represent the people, watch for more extreme political tactics... and a further crackdown from the state, says Richard Falk in an interview. >> More of Issue #48

45

www.adbusters.org

b. NAVEGACIÓN

B3. NAVEGABILIDAD

B1. ACCESIBILIDAD

La página inicial de Adbusters, casi siempre empieza con un anuncio comercial de una marca conocida, pero subvertido, ironizando con su significado. Pasados a unos segundos, somos reconducidos al index, que tiene estructura de portal desde el que acceder al resto del sitio web. Los contenidos están estructurados de forma clara y contundente, generalmente con poderosos eslóganes que llaman nuestra atención. Las páginas hacen gran hincapié en la fuerza de la imagen, equilibrándose con mensajes cortos, pero directos. La metáfora utilizada en el sitio web sigue siendo, como en los anteriores, la del escritorio o también considerada como estructura de revista. Del mismo modo, sigue guardando estrechas conexiones con la estructura de navegación de la versión impresa. Muy a menudo, adoptan metáforas propias de los sitios web comerciales, en un intento por llamar la atención del usuario.

B3.1.Orientación de los usuarios

Los requerimientos necesarios para acceder correctamente a las páginas, son un plug-in de Flash y uno de Quick Time para visualizar los vídeos y grabaciones existentes. Las páginas se ven perfectamente constrastadas si las traducimos a blanco y negro, para personas con problemas de visión. B2. OPTIMIZACIÓN La tabla que presentamos a continuación da una idea aproximada de la optimización del sitio web a través de los resultado obtenidos al acceder a él. Sistemas Operativos

Navegadores

Plug-ins necesarios

Tiempo de descarga

Windows 98

Internet Explorer

Sin plug-in para Flash

3 segundos

Windows XP

Internet Explorer

OK

1-2 segundos

Windows XP +ADSL

Internet Explorer

OK

- 1 segundo

B3.2. Interacción

Mac OS X

Internet Explorer

OK

1 segundo

Esta estrategia de la que hablamos de adoptar estrategias persuasivas de la publicidad, crea un diálogo fuerte con el usuario, incitándolo

46

www.adbusters.org

continuamente a responder o a tomar conciencia crítica de los temas tratados. Así mismo, en muchas de las secciones hay enlaces a páginas para firmar manifiestos por diferentes causas políticas, ecológicas. Además, invitan a participara a todo el que quiera a enviar material gráfico, artículos, etc. para ser publicados y difundidos. También existe un club de “Jammers” o activistas, al que se puede suscribir de forma gratuita, para recibir noticias periódicas de acontecimientos sociales y políticos. Tal vez, podríamos señalar como excesivas el número de rutas que nos conducen a una misma pantalla, puesto que tanto imágenes como los titulares tienen hipervínculos a las mismas. Aunque este hecho no es un inconveniente en sí mismo, ocurre que a menudo nos volvemos a encontrar en una pantalla que ya hemos visitado varias veces partiendo de distintos botones, imágenes, titulares o texto con hipervínculo. También ofrecen la posibilidad de utilizar banners de Adbusters, para insertarlos en los sitios web de usuarios que quieran tenerlo como enlace. Hay diferentes modelos a elegir, y por supuesto, son gratuitos –pues redunda en beneficio de ellos-.

decreciendo en tamaño y vistosidad cromática a medida que disminuye su relevancia. Todas las pantallas del sitio web tienen la misma o similar estructura de contenidos. Los menús de navegación permanecen inalterables, así como los títulos de cada pantalla. Y cada página, estudiándola por separado, tiene un interés visual y de contenido cuidado.

B3.4. Controles de navegación Los controles de navegación del sitio web de Adbusters están diseñados de forma clara, simple y diferenciada del resto de elementos de las pantallas, al estar incluidos en una franja rectangular negra en la parte superior. El idioma utilizado es el inglés y el único icono del menú de navegación, es el signo de interrogación “?”, que nos lleva a la página en la que explica el origen de Adbusters y su estructura. También incluyen las banderas japonesa, danesa y francesa, para navegar por el sitio en sus respectivos idiomas.

B3.3. Qué sucede en pantalla En todo momento sabemos en qué parte del sitio nos encontramos, pues la organización y la jerarquía de las pantallas está perfectamente definida. Los titulares van

B4. PRODUCTIVIDAD En la página “ Order” de Adbusters, se pueden hacer pedidos de números anteriores, suscripciones

47

www.adbusters.org

anuales, donativos, y hacerse miembros donantes o socios de honor, en función del dinero que aporten. Según sus propias afirmaciones, gran parte de su financiación para las diferentes campañas protesta, se recauda a partir de internet, y de la venta de artículos como camisetas, pósters, etc. que también se pueden adquirir en este sitio web. Por lo tanto, podemos decir que la productividad del sitio es muy alta.

48

www.adbusters.org

C. PRESENTACIÓN C1. GRÁFICOS C1.1. Interfaz

Página inicial La página inicial de Adbusters da un paso más en la función de informar al usuario; lo intenta implicar y tomar parte en las cuestiones de las que trata. Las páginas iniciales en las diferentes actualizaciones de la revista, mantienen una aplastante fuerza gráfica, con la inclusión de motivos, imágnes y símbolos contundentes, que captan la atención al instante. Así mismo, las opciones de navegación están siempre al alcance, visibles y el contenido o secciones que van a ser accesibles. El fondo utilizado es blanco, que proporciona el máximo nivel de contraste y legibilidad con el texto en negro. También resulta acertada la combinación entre elementos gráficos realizados con ordenador, con los realizados a mano alzada, como caligrafía, y algunos dibujos como las banderas de los países, la pantalla de la televisión para los vídeos y la mancha de tinta negra, de la campaña “Black spot”. Esta combinación le da un aire más alternativo, fresco y espontáneo al sitio, en consonancia con la actitud en lucha que quieren transmitir.

CI.2. Imágenes Las imágenes incluidas en las páginas, son muy descriptivas del contenido que se va a encontrar tras ellas, ya que todas ellas tienen hipervínculo al documento que ilustran. Son impactantes y atraen la atención. Utilizan un lenguaje visual propagandístico y de lucha, que no pasa desapercibido.

Estad dos imágenes corresponden al último número impreso de Adbusters. Así mismo, son dos de los motivos que más llaman la atención en el sitio web.

49

www.adbusters.org

CI.3. Tipografía La tipografía empleada responde a las necesidades de legibilidad exigidas al leer en pantalla, y tiene en cuenta la gran cantidad de información existente en el sitio web, por lo que se utilizan diferentes variables, que ayudan a distinguir y jerarquizar las distintas clases de contenido. Esta es una muestra de las tipografías que encontraremos:

Son tipos sin remates, Helvética Neue Bold Condensed, excepto el logotipo de Adbusters. El resto del texto correspondiente a los artículos, también está en tipografía de palo seco. Destaca la inclusión de texto caligráfico, trazado a lápiz o carboncillo, que le da una gran riqueza gráfica a las páginas, así como un toque más humano y cercano:

www.adbusters.org incluye a menudo archivos de sonido, correspondiente a conferencias, y melodías que suelen acompañar vídeos de protesta. Están en mp3, y aunque no siempre se incluyen, suelen estar disponibles en el apartado “Creative Resistance”

C2.2. Animación y vídeos El sitio web suele incluir grabaciones de protesta y manifestaciones en las calles de diferentes partes del mundo, visualizables en Real Player o Quick Time, disponibles ambas en alata y baja resolución.

C3. PUESTA EN SERIE C3.1. Ritmo de acción C.2 MEDIOS C2.1. Sonidos y narraciones

Podríamos considerar la rapidez de ejecución de las acciones y la limpieza de la página como características a tener en cuenta en este sentido, que

50

www.adbusters.org

imprimen un ritmo de acción dinámico y estimulante, pues cada página está tratada de forma que tenga al menos un punto fuerte de interés visual. C3.2. Estilos, efectos y transiciones El estilo general del sitio esta caracterizado por la sobriedad en la estructura y la contundencia. Tiene mucho de diseño europeo, de las escuelas de Ulm y la suiza. Pero también tiene carácter revolucionario ilustrado, intelectual, recurriendo a símbolos de luchas conocidos universalmente, pero alejándose de la estética “underground”.

51

3.1- www.metropolismag.com 3.2- www.eyemagazine.com 3.3- www.visual.gi 3.4- www.adbusters.org 3.5- www.thinkcycle.org

52

www.thinkcycle.org

A. INFORMACIÓN A1. PRODUCTO Y PÚBLICO www.thinkcycle.org es una iniciativa académica, sin ánimo de lucro, dedicada a prestar apoyo mediante la colaboración en línea para tratar de hacer frente a retos del diseño y la ingeniería como los problemas del medio ambiente y de comunidades desfavorecidas. Dicha iniciativa fue desarrollada y operada por un grupo de estudiantes de doctorado (Nittin Sawhney, Saul Griffith, Yael Maguire y Timothy Prestero) en el Media Laboratory del MIT –Massachussets Institute of Technology-, empezando a gestarse a mediados de 2001. En sus propias palabras: “ThinkCycle no es más que un espacio compartido en la red, para diseñadores, ingenieros, expertos en la materia y demás participantes para discutir, intercambiar y construir ideas hacia soluciones del diseño en campos con problemas críticos. Thinkcycle simplemente proporciona un marco de colaboración basado en la web que apoya tanto iniciativas individuales como de organizaciones en la búsqueda, documentación y reparto de la información sobre problemas específicos y diseños emergentes. Es un sistema auto organizado y descentralizado, permitiendo a los individuos crear comunidades en línea, interesadas en campos específicos,

y contribuir o aprender de la discusión en marcha y la actividad del diseño.” A2. OBJETIVOS ThinkCycle busca crear una cultura de innovacion en diseño de fuente abierta (“open source design innovation”), con colaboraciones contínuas entre individuos, comunidades y organizaciones a lo largo de todo el mundo. A3. PLANIFICACIÓN Al ser una plataforma colaborativa, todo el que quiera puede participar enviando información o ideas para solucionar las cuestiones que se plantean en el sitio web. Por tanto, la actualización de contenidos es prácticamente diaria. Además, existe una sección dedicada a noticias de interés o eventos que se van a celebrar en fechas próximas y que se renueva con frecuencia.

53

www.thinkcycle.org

A4. ORGANIZACIÓN A4.1. Mapa del sitio

www.thinkcycle.org HOME HOME

Initiatives

Design Showcase

TOPICS

WHAT´S NEW

Health

Education

Energy

Environment

MIRROR SITES

LOGIN

TEXT ONLY

Soap Box

Community

Sustainable-Livin

Global-Action

General

54

www.thinkcycle.org

A4.1. Estructura de la Interfase

Menú de navegación

Identificador del sitio

Promo características

Búsqueda

Promoción de características Tópicos Secciones Promoción de características Promoción de contenidos Instrucciones

Promoción de contenidos

55

www.thinkcycle.org

A4.3.1. Estilo de escritura Thinkcycle se caracteriza por ser una plataforma en la red de diseño colaborativo, lo cuál quiere decir que sus contenidos están elaborados por muy diversos usuarios, con sus diferentes estilos de escritura y de organización de la información. Pero precisamente este es un sitio en el que lo que interesa es compilar la mayor cantidad de información y de calidad posible acerca de los tópicos enunciados. Para que este hecho no resulte un engorro a la hora de navegar, todos los documentos específicos, así como ensayos, discusiones, etc. están publicados en formato PDF, accediendo a ellos mediante un hipervínculo, tras el que también podemos leer una breve introducción del mismo y saber si nos interesa o no realmente acceder a él. En cuanto al estilo de redacción propio del sitio web, llevado a cabo por el o los editores, cabe resaltar el carácter académico con el que se expresan, sin pretensiones de convencer ni de seducir, sino transmitir de una forma abierta, sincera y comprometida los contenidos surgidos a partir de un proyecto personal.

principal, vemos cómo se han resaltado los conceptos T h i n k c y c l e y Culture of open source design innovation, que al clicar sobre ellos, el navegante es dirigido a una página en la que se definen dichos conceptos, para aclarar mejor a los nuevos visitantes al sitio. Welcome to ThinkCycle ThinkCycle is an academic, non-profit initiative engaged in supporting distributed collaboration towards design challenges facing underserved communities and the environment. ThinkCycle seeks to create a culture of open source design innovation, with ongoing collaboration among individuals, communities and organizations around the world.

b. NAVEGACIÓN

Al igual que en Adbusters, un aspecto interesante y de gran utilidad en la elaboración de los párrafos introductorios a los contenidos, es la inclusión de vínculos en las palabras clave del asunto, lo cuál multiplica las opciones de lectura, y permite el acceso a temas muy concretos y específicos, sin necesidad de tener que abrir todo el documento y buscar en él lo que más nos interesa. En el ejemplo que presentamos a continuación, extraído de la página

56

www.thinkcycle.org

b. NAVEGACIÓN B1. ACCESIBILIDAD En el sitio web, encontramos la siguiente nota informativa: “ Aunque este sistema está diseñado para ser usado en todos los navegadores y plataformas, algunas características, actualmente funcionan mejor en Microsoft Internet Explorer. Por lo que si tienes cualquier dificultad usando Netscape 4.x, por favor, inténtalo con Explorer 5.x o una versión más reciente, como Netscape 6. “ Así mismo, se sigue informando de que ThinkCycle está siendo desarrollado y opera con herramientas de código abierto, incluyendo Linux, XEmacs, Gnome y ACS. El actual prototipo de ThinkCycle Collaborative Open-Source Design Platform , está alojado en ArsDigitia Community System. Oracle 8i está siendo usado actualmente como la base de datos (el Massachussets Institute of Technology tiene una licencia de sitio), sin embargo, una base de datos de fuente abierta como Postgre SQL, usando Open ACS, está disponible. Por otra parte, teniendo en cuenta posibles minusvalías de los usuarios, como la vista, si traducimos la información de color de las páginas a blanco y negro, comprobamos que el contraste es el adecuado para leer sin dificultad.

B2. OPTIMIZACIÓN El sitio web www.thinkcycle.org está muy bien optimizado a pesar de que los resultados que refleja la tabla nos puedan inducir a engaño. Hay que tener en cuenta que es el sitio con más volumen de información de todos los analizados en este trabajo. Sistemas Operativos

Navegadores

Plug-ins necesarios

Tiempo de descarga

Windows 98

Internet Explorer

Sin plug-in para Flash

5 segundos

Windows XP

Internet Explorer

OK

2-3 segundos

Windows XP +ADSL

Internet Explorer

OK

1-2 segundos

Mac OS X

Internet Explorer

OK

2-3 segundos

Podemos citar como ejemplo la página http://www.thinkcycle.org/tc-topics/, en la que aparecen unos 50 índices de acceso a más de 500 archivos PDF, entre artículos y ensayos, de gran calidad y muy útiles como fuente de documentación en procesos de investigación como es el doctorado. La relación: cantidad de información / tiempo de descarga es de sobresaliente aquí.

57

www.thinkcycle.org

B3. NAVEGABILIDAD La navegabilidad la definiremos de forma sencilla como la “facilidad de encontrar la información”. Para este y el resto de sitios web analizados, estableceremos unos subapartados que nos permitan desmenuzar mejor una serie de aspectos relacionados con la navegabilidad.

B3.1.Orientación de los usuarios La página inicial de Thinkcycle actúa como auténtico portal de lo que el usuario se va a encontrar en el resto de pantallas. La estructura de contenidos es muy clara y acompañada de imágenes muy descriptivas de los proyectos que contiene. La fuerza del texto predomina sobre la de las imágenes ya que la herramienta fuerte del sitio es la potente base de datos que recoge todas las aportaciones hechas por los usuarios, pero sin llegar a abarrotar la pantalla. Al igual que el resto de los sitios analizados, excepto Visual, contiene un buscador presente en todas las páginas, incluso una versión traducida al español, junto a otras en francés y portugués, lo que dice bastante de su vocación de llegar a un público internacional. B3.2. Interacción El acceso a las distintas pantallas son anunciados en la página inicial o Home, estableciendo caminos de acceso

inmediato, y al mismo tiempo entre información del mismo nivel jerárquico, sin tener por qué retroceder demasiado hacia atrás. Al igual que en Metrópolis, Adbusters y Eye, la cantidad de los temas de la actualidad del diseño de los que trata, hace que la profundidad en los niveles también sea grande, pero ésta está resuelta de forma eficaz y muy práctica. Los caminos de acceso a los artículos no son únicos, sino por referencias cruzadas, ya que siempre, al elegir un tema determinado, nos encontramos con una columna a la derecha del artículo que nos sugiere artículos relacionados u otros autores que también han tratado el asunto.

B3.3. Qué sucede en pantalla La organización y la jerarquía de las pantallas está perfectamente definida, por lo que en todo momento sabemos en qué parte del sitio nos encontramos. Los titulares van decreciendo en tamaño y vistosidad cromática a medida que disminuye su relevancia. Todas las pantallas del sitio web tienen la misma estructura de contenidos y de disposición de los menús de navegación, centrados en la página, a la altura de nuestro golpe de vista inmediato. El gran tamaño de los títulos de página, no da lugar a que nos encontremos perdido. Y siempre se tiene en cuenta una maquetación minuciosa del texto, para que no moleste visualmente, debido a su abundancia.

58

www.thinkcycle.org

B3.4. Controles de navegación Los controles de navegación del sitio web de Thinkcycle, están diseñados de forma clara, simple y diferenciada del resto de elementos de las pantallas. Están colocados en la parte superior, en texto en inglés, sin iconos de carácter universal. De todos modos, hay otras formas de acceder a los contenidos, como por medio de las imágenes, que dan una idea bastante aproximada del tema tratado.

B4. PRODUCTIVIDAD Thinkcycle ofrece la posibilidad de inscribirse como miembro de los foros de debate, y tener contraseña de acceso a los datos más detallados de los proyectos. Es gratuito. Así mismo, todos los artículos están disponibles, siguiendo la filosofía del diseño colaborativo, habiendo sido creados por los mismo participantes en los foros y especialistas en parcelas determindas del campo de la ingeniería, el diseño o la medicina. jerárquico, sin tener por qué retroceder demasiado hacia atrás.

59

www.thinkcycle.org

C. PRESENTACIÓN C1. GRÁFICOS C1.1. Interfaz La página inicial, que surgió como una mera base de datos con los tópicos colocados en un listado, ha ido mejorando considerablemente con las sucesivas actualizaciones, hasta alcanzar el aspecto que tiene hoy en día, con un volumen de información infinitamente mayor que en sus inicios en el año 2001 y con la vocación de seguir creciendo. Es un interfaz agradable, que no distrae, teniendo claro que lo principal es la legibilidad y accesibilidad del contenido.

C1.2. Imágenes No abundan en el sitio, pero las que hay son bastante descriptivas del contenido del que tratan los artículos y contribuciones, que tienen la mayor importancia:

C1.3. Tipografía La tipografía utilizada para los tópicos y los titulares de los artículos es una verdana negrita de color azul vivo, indicando así que contienen hipervínculos a los artículos en sí, disponibles en PDF y maquetados con tipografía Helvética. Health (10) Education (9) Energy (3) Environment (4) Community (6) Global-Action (3) Sustainable-Living (9) General

C2. MEDIOS C2.1. Sonidos y narraciones Por el momento, el sitio web de Thinkcycle no contiene ningún tipo de archivo sonoro, pero tienen un enlace relacionado con un congreso que organizaron en el 2002, llamado “Development by Design, en el que están disponibles todas las conferencias que se pronunciaron allí, sobre diseño colaborativo y ayuda al Tercer Mundo, de forma totalmente gratuita. Lo cuál es tremendamente útil, y les da mucha credibilidad a los responsables del proyecto.

60

www.thinkcycle.org

C2.2. Animación y videos De momento, no tienen archivos de vídeo, pero parece ser que no descartan su inclusión en un futuro próximo, si este medio puede ser de ayuda al desarrollo de los proyectos que se tienen entre manos.

C3. PUESTA EN SERIE C3.1. Ritmo de acción La acción de las páginas no es un factor que se haya tenido muy en cuenta, puesto que el usuario potencial lo que busca son contenidos concretos y sabe cómo llegar hasta ellos de forma sencilla.

C3.2. Estilo, efectos y transiciones El estilo gráfico en general utilizado, hace referencia continuamente al trabajo en grupo y al desarrollo de proyectos en común, tanto en el logotipo (tres personas abrazando un cuadrado) como en los motivos de fondo de las pantallas –los mismos rectángulos en tonos pastel, de diferentes tamaños, en una especie de collage que busca integrarse en una sola estructura. Lo mismo pasa con las imágenes, que se superponen unas con otras, reflejando la filosofía del “puzzle”, de llevar a cabo proyectos en colaboración.

61

V. BIBLIOGRAFÍA

IV. CONCLUSIONES

62

IV. CONCLUSIONES

c

on el análisis de estos cinco sitios web, hemos podido extraer algunas conclusiones realmente provechosas, tanto para nuestra profesión de diseñadores gráficos, como nuestra posición de usuarios y lo que personalmente considero prioritario en estos momentos de cara a la realización de una tesis doctoral o trabajo de investigación; el encontrar fuentes de información en internet, que sean de consulta constante, por la riqueza y variedad de su contenido. Merece la pena destacar cómo cambia la cantidad de información que ponen a disposición del usuario gratuitamente las revistas. Podemos pasar de un extremo como Visual, en la que apenas aparecen contenidos para leer libremente, hasta el extremo contrario con Thinkcycle, donde la información es distribuida sin ningún tipo de restricción. Claro está que este último sitio no tiene ánimo de lucro, pero sería deseable, y esa parece ser la tendencia por parte de los magazines estudiados, que cada vez incluyen más material tanto gráfico como escrito, de forma libre, intentando aumentar así el número de usuarios, lo que a medio plazo, seguro que también redunda en beneficios para ellos mismos.

contenidos. Hemos conocido el caso de revistas como Visual, que en su versión en papel resulta aceptable como fuente de información sobre el diseño, comprobando cómo en la versión web, no se sostiene de ninguna manera, perjudicando a la propia empresa, que parece despreocuparse por este aspecto. Mi deseo como estudiante recién iniciado en elámbito de la investigación y con inquietudes en los aspectos sociales del diseño, es que sitios web como el último estudiado: wwww.thinkcycle.org, proliferen en número y en calidad, no quedándose sus ideas simplemente en la red, sino que pasen al mundo físico y se materialicen, tratando de impulsar la validez y la lucha de estas nuevas tecnologías hacia un campo más humano y participativo, donde la información fluya libremente y no está tan controlada como en otros medios de comunicación.

Los sitios web también constituyen una parte muy importante de la identidad corporativa global de las revistas y por este motivo no deben ser descuidados, tanto técnica, gráfica como en la actualización continua de sus

63

IV. CONCLUSIONES

V. BIBLIOGRAFÍA

64

V. BIBLIOGRAFÍA

LIBROS -

GLENWRIGHT, Jerry. www.layout. Cómo diseñar y componer sitios web, Gustavo Gili, México, 2001.

-

FERNÁNDEZ-COCA, Antonio. Producción y diseño gráfico para la World Wide Web, Paidós, Barcelona, 1998.

-

KRUG, Steve. No me hagas pensar. Una aproximación a la usabilidad en la Web. Prentice Hall. Pearson Educación S.A. Madrid. 2001

SITIOS WEB -

www.metropolismag.com www.eyemagazine.com www.visual.gi www.adbusters.org. www.thinkcycle.org www.alzado.org www.ainda.info www.useit.com

OTROS: CD -

NIELSEN, Jacob. Usabilidad. Diseño de sitios Web. Pearson Educación. Madrid. 2000

-

PÉREZ JIMÉNEZ, Mauricio. Nuevos medios en la imagen, Servicio de Publicaciones de la Universidad de La Laguna, Santa Cruz de Tenerife, 1999.

-

PRING, Roger. www.tipografía. 300 diseños tipográficos para sitios web, Gustavo Gili, Barcelona, 2000.

-

PÉREZ JIMÉNEZ, Mauricio. Introducción al diseño interactivo CD del curso de doctorado. Departamento de Dibujo, Diseño y Estética. Facultad de Bellas Artes. Universidad de La Laguna. 2003

-. www.color. 300 usos del color para sitios web, Gustavo Gili, México, 2001.

REVISTAS IMPRESAS - TEMES DE DISENNY. Nº18. Ediciones Elisava. 2003

65

V. BIBLIOGRAFÍA

66