Caso de estudio: Greenpeace
| Título | Caso de estudio: Greenpeace |
|---|---|
| Tipo de Proyecto | Proyecto de Taller |
| Período | 2013-2013 |
| Asignatura | Construcción de Diseño Gráfico 4, |
| Del Curso | Construcción 4º DG 2013, |
| Carreras | Diseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property. |
| Alumno(s) | Idar González |
| Profesor | Katherine Exss |
Este caso de estudio se centra en el sitio web de Greenpeace (http://www.greenpeace.org/international/en/), bajo el concepto de "Meta-Sitio", un sitio que funciona como portal (Central) que incluye vínculos a otros sitios con características específicas (Por países o servicios). El estudio involucra observaciones desde su estructura como sitio y la usabilidad, pasando por elementos gráficos como diagramación, tipografía, colores, identidad gráfica, etc. Y cómo todos estos elementos son adoptados (o no) por sus sitios vinculados.
Introducción
Greenpeace es una organización no gubernamental ambientalista, que se funda en 1971 en Vancouver, Canadá. El objetivo de la ONG es proteger y defender el medio ambiente. Este objetivo es transversal a cada sitio, donde se encuentra información dirigida al país seleccionado, además de dar la posibilidad de ser partícipe de la organización, con documentos, seguir en redes sociales y donar dinero. Todo esto es común entre todos los sitios.
MetaSitio
¿Qué es un meta sitio? Un portal donde existen varios vínculos a sitios externos e internos en términos de concepto. Se puede pensar en él como un sitio que se separa por categoría y cada categoría es un sitio separado.
Conceptualmente y estructuralmente el sitio se divide en 3 partes, el menú superior, el contenido home y la columna lateral.
El menú superior incluye diversos enlaces como, sitios de Greenpeace por país, Búsqueda, Prensa y acceso de usuario. Además de estos enlaces, permite la navegación interna del sitio Internacional.
El contenido está orientado en función de la organización, publicando noticias, publicaciones y contenido multimedia como imágenes y videos.
La columna lateral es una versión simplificada del menú de navegación y además ahí se incluyen los vínculos a redes sociales.
Archivo:Mapa navegación GP internacional.png
Estructura interna
La grilla del Home se divide en 3 grandes porciones:
- El menú superior
- El contenido
- a.caja de contenidos
- b.columna lateral
- Footer
Esta simplificación nos ayuda a entender cuáles son las estructuras básicas del sitio. Sin duda que en el Home el Slider de campañas es un elemento importante, pero se pierde al navegar por el sitio. Estas grillas son muy rígidas y se ven en la mayoría del sitio.
Pantallas de cada categoría
Se capturan las pantallas de cada categoría, mostrando las variables de disposición de elementos.
Home International
About us International
What we do International
News International
Multimedia International
Get involved International
Donate International
Grilla básica de cada categoría y grupos de grillas
Se decide mostrar de una manera más simple, a modo de grilla para poder identificar los grupos de composición en cada página del sitio International.
Al hacer las grillas de las 7 categorías internas del home podemos observar que existe una variable de 3 grillas. El largo del sitio se verá afectado por el contenido que se esté mostrando.
- Donde existe un slideshow, mostrando campañas, videos y mensajes que busquen involucrar al usuario.
- Sin el espacio de slideshow, pero las columnas se mantienen intactas.
- El sitio de Donación, que además es un enlace externo. Acá ni siquiera existe el menú de navegación ni footer. Por lo tanto es el más alejado en términos de navegación pero se mantiene la doble columna, donde la más ancha contiene el formulario.
Home International
About us International
What we do International
News International
Multimedia International
Get involved International
Donate International
(Estas grillas también son replicadas a cada uno de los sitios por países)
Éstos son los componentes que construyen la constante grilla en el metasitio y cada uno de los sitios vinculados. Esto es fundamental si se busca crear un sitio de una organización donde todo está unificado y existe una cohesión en todos sus contenidos, sin siquiera importar diferencias de países. Aún así, existen ciertos espacios donde los sitios estudiados sí se ven diferenciados, pero dentro de márgenes muy limitados.
El pilar fundamental del sitio, está presente en todos los vínculos de países, incluso en las secciones de donación, si bien no es un menú de navegación, el mismo espacio es respetado y se llena con un color verde similar.
Algunos de las categorías muestran sub-categorías y algunas de ellas contienen vínculos a artículos.
Los contenidos del menú de navegación en el meta-sitio son:
- About us
Exponen brevemente sus objetivos mediante acciones, historia e imágenes.
- Greenpeace victories
- History and Successes
- Core Values
- Greenpeace and You
- Our ships
- Organisation
- Greenpeace worldwide
- FAQs
- Work for Greenpeace
- What we do
Acá se abordan los temas en los que se trabaja y se da paso a las sub-categorías existentes en el menú despegable.
- Climate change
- Forests
- Oceans
- Ecological Farming
- Toxic pollution
- Nuclear
- Peace and disarmament
- News
Se redirecciona a la pestaña "News" del contenido en la "Caja de contenidos", en el home del sitio.
- Blogs
- Feature Stories
- Multimedia
El centro de todo el material audiovisual. Se organizan por categorías y aparecen los 4 elementos más recientes de cada categoría (Las mismas sub-categorías que aparecen en el menú despegable), además de mostrar más contenido como Webcams, juegos, E-cards, fondos de escritorio y salvapantallas.
- Photos
- Videos
- Slideshows
- Photo Essays
- Goodies
- Ship Webcams
- Get involved
Portal donde exponen material para motivar a los usuarios a ser parte del proyecto, con video, enlaces a las redes sociales, acciones a las cuales el usuario se puede sumar, soporte financiero, voluntariados, trabajos, navegar en sus barcos, hacer su propia campaña, ayudar a recrutar, enviar a conocidos (formulario)
- Protect the wild south
- Save the Bees!
- World Oceans Day
- Protect the Arctic from...
- Stop Herakles Farm's...
- Polluting Paradise
- Tell Obama: Arctic is...
- Don't let nuclear comp...
- Say NO to GE corn in...
- Donate
(Se envía a otro enlace) A modo de formulario se pueden hacer donaciones.
Menú lateral
Esta interacción está en todos los sitios vinculados, no se limita a ser un menú específico del Meta-sitio. Aún así, como se muestra en el Gif anterior, cambian los contenidos y el orden de los contenidos.
Acá es donde más se observa una diferencia gráfica, pero todo dentro de la columna. Este menú lateral en algunos casos actúa como una versión simplificada del menú de navegación en la parte superior, que también se despliega a medida que uno navega por el sitio. Sin embargo, en algunos casos no está aquél menú lateral y hay avisos, documentos, íconos, etc. En el caso de Canadá y España se usan botones verdes que simplifican la lectura, dando un rasgo más condensado y más cómodo de navegación.
Greenpeace International
Greenpeace Canadá
Greenpeace Argentina
Greenpeace Chile
Greenpeace Colombia
Greenpeace España
Caja de contenidos
La forma de mostrar cada elemento, a modo de "últimas actualizaciones", responden a un diseño bastante constituido, donde sólo cambian las imágenes y el contenido.
En ciertos sitios, cambia la cantidad de resultados a mostrar, produciéndose una extensión a veces un poco densa, ya que también se extiende el menú lateral, entonces es una densidad continua.
En ciertos casos, como "News", se escoge desde el menú de navegación y no se envía a otro sitio dedicado específicamente a noticias, sino, utilizan las pestañas que están en la caja de contenidos y se muestran las noticias que ahí aparecerán de manera automática, por las más recientes primero.
Permite una navegación más rápida, sin necesidad de ir accediendo a categorías, mostrando la mayor parte de los contenidos del sitio. Como es de esperarse, el footer tiene una línea gráfica construída y sólo varía en sus variantes. Las variaciones se ve en la densidad del footer, que también refleja la densidad del sitio.
Existe una franja gris que en algunos sitios es utilizado poniendo publicaciones, campañas y enlaces rápidos a servicios.
El GIF a continuación muestra los footers de los sitios estudiados, pudiendo ver las diferencias entre ellos.
Breadcumbs
Gran utilidad para entender dónde se está navegando, que también sirve para volver a alguna categoría pasada. Esto ayuda al usuario a familiarizarse con el sitio y entender la construcción de su estructura al momento de navegar.
SubSitios
La cantidad de sitios vinculados por países son 56, pero para el estudio se eligen 5 sitios (además del Meta-Sitio: International): Canadá, España, Chile, Argentina y Colombia.
A primera aproximación, pareciera que escoger un país específico, simplemente cambia el idioma, pues su diagramación e identidad gráfica es tan firme que a simple vista, pareciera no alterarse los contenidos. Sin embargo son cambiados a cada país, con noticias, servicios, redes sociales, etc, adecuándose a los temas del país seleccionado.
El hecho de construir diversos mapas de navegación de los sitios, ayuda aún más a entender las diferencias en términos de jerarquía, contenido y densidad de los sitios. Por ejemplo, en el mapa de navegación entre el sitio de Canadá (Que este caso se piensa que es el original), en comparación con el Internacional (Meta-sitio), se observa una mayor densidad en el meta-sitio, donde existen más enlaces a las redes sociales, el contenido contiene más áreas, más información y más cobertura de noticias.
Los casos de Chile y Argentina son variables, la disposición de los contenidos es diferente y el orden de los elementos en el menú de navegación se ve alterado, quizás, según un criterio específico de la organización en el país.
Las variables de contenido en función de la navegación es leve, a modo general cambia el orden de las categorías en el menú de navegación. En términos de contenido es variable, donde Canadá resalta en tener poco contenido en la Home evitando una mayor densidad.
- Mapa navegación GP canadá.png
Caso Canadá
- Mapa navegación GP chile.png
Caso Chile
- Mapa navegación GP argentina.png
Caso Argentina
- Mapa navegación GP colombia.png
Caso Colombia
Estructuras
En la vista de cada Home de los sitios vinculados, se entiende la importancia de las grillas antes mencionadas y se puede apreciar que es acá donde se editan los contenidos según el país.
Greenpeace Canadá
Greenpeace Argentina
Greenpeace Chile
Greenpeace Colombia
- GP españa.png
Greenpeace España
Zonas editable
(Imagen gif)
Se le denomina así a las columnas donde ocurre el mayor cambio entre el MetaSitio y los SubSitios.
El gif muestra las zonas donde se ejecutan los cambios entre los sitios. La columna celeste es la caja de contenido que se alterada en contenidos y largo pero no en ancho ni posición. Lo mismo sucede con la columna verde, la columna lateral, donde el contenido va cambiando según país.
Estos cambios condicionan el largo del home, variando el scroll según el tamaño de pantalla donde el usuario ingrese.
Así, se entiende que hay elementos gráficos que son inalterables y están presentes de manera intacta sin importar idioma ni país.
Puntos de diferencia
- Menú de Navegación
Como se menciona anteriormente, la mayor diferencia entre los sitios son el orden de las categorías de Menú de navegación superior, porque en conceptos las categorías son muy similares.
- La extensión del sitio, el largo, se ve modificado según la cantidad de resultados que salen en el espacio, que en este estudio se le da por nombre como "Caja de contenidos". La cantidad de elementos varía entre 3 a 10 elementos por página. En el meta-sitio se van mostrando cada 5 elementos.
Uno de 3 blogs Chile
Blog Canadá
Multimedia Chile
Multimedia Internacional
Login Usuario CHile
Donación Internacional
Identidad gráfica
Greenpeace como organización, realmente logra el objetivo de unificar todos los sitios vinculados, sus secciones y servicios con una línea gráfica simple y evidente. En ningún momento de la navegación se siente que el usuario se aleja de la organización, los colores y la diagramación son parte, básicamente, todo el momento.
Tipografía
Las tipografías más utilizadas en el sitio son Verdana, Arial y Helvética, donde se deja como opción a Trebuchet MS, Geneva y finalmente "Sans-Serif" en caso de que el sistema del usuario no tenga aquellas tipografías.
Los tamaños varían entre 11 y 18 pixeles, siendo el tamaño 12 el más común. Se construye jerarquía a través de estilos Bold en la misma tipografía y cambiándole el tono RGB a un verde, blanco o gris.
La interacción se ve en el menú de navegación donde pasan del blanco a un verde con un Hover y la categoría actual utiliza el mismo valor verde: rgb(5, 89, 5).
Paleta cromática
Se identifican los colores más usados en el sitio. La paleta se usa en botones, títulos de elementos, barras, menús, párrafos e incluso franjas como el menú superior, footer y slideshow.
Logo
El logo no tiene ningún cambio ni adaptación a sus sitios vinculados. Se mantiene en tamaños y colores, no cambia en tamaños.
Donde sí se ve algún cambio son en las campañas, donde ajusta cromáticamente a la construcción del sitio, eso sí, son enlaces a sitios externos, que tienen otra naturalidad, donde uno recorre la campaña en sentido vertical. Archivo:LogosGPcampañas.png
Elementos de interacción
- Slideshow
Todos los Slideshow se usan para mostrar campañas y dar información al usuario.
Greenpeace España
Greenpeace Colombia
Greenpeace International
Greenpeace Argentina
Greenpeace Canadá
Greenpeace Chile
- Compartir elemento por red social
Las noticias, artículos y demases, pueden ser compartidos a través de una barra lateral que flota según la navegación del usuario. Esto es una variante, donde según cada sitio aparecerán diversas redes sociales para compartir el artículo y dónde encontrar a Greenpeace en las mismas redes.
Campañas
Son sin duda los sitios que más se alejan de la estructura de Greenpeace, en las siguientes campañas se pueden encontrar diversidad de colores y además una navegación basada en entregar información al usuario mediante la navegación.
[[1]]Save the Arctic
[[2]]Save the Bees
Si bien son campañas de Greenpeace, son sitios de otra naturaleza, su navegación es simplemente un recorrido vertical. Por esta razón no son estudiados en términos de vínculo como los casos anteriores.
Opinión crítica
Positivo
Gran identidad gráfica y unificación de cada uno de los momentos en el sitio. La sensación general es que uno está siempre donde mismo y al comienzo pensé que sólo se traducían los contenidos por idiomas, es decir, si estaba en Internacional, por defecto sería inglés y al poner Chile, sería español con los mismos contenidos, pero no. Cada país muestra los intereses del usuario, poniendo temas nacionales. Por más que uno decida navegar por los blogs asociados, no existe la sensación de irse del sitio. La organización es amplia y cubre la mayoría de los intereses de los usuarios.
Negativo
Algunas de las características positivas pueden transformarse en cosas negativas al momento de navegar, si bien el sitio se basa en generar aportes y de expresarle al mundo lo que realmente es Greenpeace, también busca mantener un usuario constante, que esté permanentemente volviendo al sitio por noticias, fotografías y videos y es ahí donde la rigidez gráfica del sitio puede volverse un poco monótona. A veces es necesario un cambio (color en algún momento, diagramación, etc) para tener una variedad de ritmo al navegar. Esto se ve sobre todo en la sección de Multimedia, esto es algo que está presente en el Meta-sitio y los sitios vinculados. El fondo deja de ser blanco y aparece un gris azulado que sin duda es saludable, no sólo para la navegación, sino que también para ayudar al usuario a memorizar las áreas del sitio.
En esta captura se logra ver que se quiere construír un contínuo, quizás una imagen más extensa de lo que permite la grilla y de alguna manera se intenta hacer, eso sí, se notan fallas y detalles que si la grilla fuese un poco más flexible, permitiría solucionarlo de una mejor manera.
Lo que sucede al ingresar a los sitios de las campañas, tras navegar en el sitio principal, es un respiro y es bastante interesante entrar a otra dinámica, pues se contrasta con el monótono ritmo y tonalidad del meta-sitio.
