Proyecto: Parques de Chile

De Casiopea



TítuloMeta-sitio para Parques de Chile
Tipo de ProyectoProyecto de Taller, Proyecto de Curso
Palabras Claveparques, metasitio, sitio web, chile, construcción, 4dg, diseño gráfico
Período2013-2013
Del CursoConstrucción 4º DG 2013
CarrerasDiseño Gráfico
Alumno(s)Juan Antonio Godoy, Idar González, Bernardo Silva
ProfesorKatherine Exss

Tabla de Contenidos

Investigación | Benchmark

Estudio de Meta-Sitios

Se decide que para poder comprender cómo se agrupan los parques, cada alumno del grupo debería hacer un estudio de al menos un meta-sitio orientado en Parques. Para eso, se escoge los siguientes sitios:

  • The Royal Parks (UK)
  • National Parks (UK)
  • National Park Foundation (EEUU)

Para introducirse en el estudio, en conjunto se ve National Park Service, de Estados unidos y a raíz de eso se construye una ficha que será llenada por cada caso estudiado.

La Ficha se constituye en la siguiente manera:

  1. Anotación del nombre y URL
  2. Elementos del menú de navegación + Color que define orientación del rótulo (El color verde está orientado a Servicio para el usuario, mientras que el color anaranjado está orientado a la Información del Parque).
  3. Breve descripción del rótulo (Para dar una idea de qué involucra cada categoría)
  4. Contenido Home, hace referencia a los elementos que uno puede encontrar en el home, como noticias, eventos, horarios, etc.
  5. Elemento de interacción: Ya sea una lista despegable o un slider, un mapa o alguna interacción que ayude al usuario en función del objetivo del sitio.
  6. Vínculos a otros sitios, campañas, auspicadores, etc.


The Royal Parks (Parque Urbano)

Ficha y mapa de navegación


Observación del Sitio

Visualización de Mapa
Los parques se visualizan a modo de mapa, simplificando el entorno, usando el río Thames como Landsmark y ahí se ubican los parques que pertenecen a los Royal Parks. Esto permite al usuario entender el espacio de una manera conceptual que puede facilitar el recorrido físico.

Estructura de Ficha
Los parques se muestran a modo de ficha, donde cambian las imágenes y el contenido pero la grilla es la misma, tanto en términos de diagramación como los rótulos del menú lateral. Existe un ajuste según la relevancia de cada rótulo en cada parque.

Se piensa que esto ayuda a entender la lógica de navegación por el MetaSitio, además de construir una identidad gráfica entre cada Parque.

La idea central de acá es que se mantiene una diagramación común y además una grilla de contenidos, que son transversales a todos los parques, pudiendo encontrar la misma calidad de información sin importar el Parque.

Filtro de Eventos
Existe un filtro en eventos que permite descartar elementos indeseados por el usuario. Al entrar al rótulo uno se encuentra con todo el contenido sin existir un "siguiente página" o enumeración facilitando la navegación, por lo tanto, es muy útil pensar en un menú que filtre según lo que busca el usuario.

Por supuesto hay algunas combinaciones que no arrojan algún resultado.


National Park Foundations (Reserva Nacional)

Ficha y mapa de navegación


Observación del Sitio

Búsqueda de Parques
El sitio cuenta con dos maneras encontrar y mostrar un parque.

A la primera manera se llega por el medio del home(igualmente por la barra de navegación), contiene una mayor cantidad de información respecto al que hacer en el parque. Hay una mayor dificultad para acceder a la totalidad de los parques, no cuenta con una especie de filtro o categorías, solo muestra una lista de todos los parques al final del sitio.

Cada sitio de parque cuenta con Quicks Links
Fotos y Videos
Cosas que hacer
Links Relacionados
Historias de Visitantes
Videos compartidos

Siendo estos aportados tanto por el sitio como por los usuarios, cabe mencionar que estos archivos no están relacionados con el contenido de otros parques, si uno entra a la galería del sitio en que esta, no puede ver la galería de otro parque, sería necesario ir al sitio del parque.

La diagramación de mantiene igual para cada sitio, logrando una uniformidad en la página.

Filtros de Búsqueda
La segunda forma se encuentra por medio del menú de navegación. Permite elegir al usuario por medio de un filtro, elegir que contenido desea encontrar. El filtro se basa en regiones, interés, alfabético, mas vistos y mas populares.

Ya en el sitio del parque, este contiene una reducida información en comparación a la primera manera utilizando de mayor manera la potencia que tienen las imágenes. Le favorece poder navegar por el resto de los parques así como obtener la ubicación de estos por medio de google maps,

En resumen: El sitio esta pensado de manera servicial pero la forma en que lo hace esta separada, debería aprovechar el potencial que tiene para encontrar los sitios por medio de los filtros, a su vez mostrar todo el contenido que estos puedan ofrecer. Por esto es necesario pensar que si se quiere hacer algo en post de un buen servicio, no deberían pasar estos inconvenientes, tendría que ser rápido pero no por eso menos informativo.


National Parks UK (Parque urbano)

Ficha y mapa de navegación

Observación del Sitio

Contenido en la Home:
  • Lista de parques
  • Photo competition
  • Learning about the national parks
  • News
  • Visiting the national park
  • Events
  • Looking after the national parks
  • Jobs
  • About us
  • National associations
  • Get involved
  • Join us on Facebook

Head y foot.jpg


Menú de Navegación
  1. Home: Se muestra en el lado superior-izquierdo, justo bajo la barra de menú, la lista de todos los enlaces sobre parques de UK.
  2. About us: Se habla sobre los miembros de la compañía. El área teritorial que abarcan los parques y su cantidad: 10 en Inglaterra, 3 en Wles y 2 en Escocia
  3. Visiting: Actividades al aire libre, eventos, mapas, camping, etc.
  4. living in: Se explica sobre la vivienda de personas en ciertos parques y los detalles económicos de su construcción.
  5. learning about: Enseñanza sobre los parques nacionales en general.
  6. Looking after: Habitantes y vida salvaje, trabajos voluntarios.
  7. Contact us: Oficinas de contacto.


Diferentes URL, estados de diagramación y columnas

Estructura barra lateral y contenido.jpg


Elementos de interacción
  • Mapa con el sector de cada parque
  • Slider de imágenes
  • buscador
  • Barra de navegación secundaria

Mapasnationaparks.jpg


Estudio de Sitios Parque

Central Park (Parque urbano)

Ficha y mapa de navegación

Observación del Sitio

Contenido en la Home:
  • Noticias y artículos
  • Central park circuit
  • Gilder run
  • Central Park app

Head y footcentralpark.jpg

Menú de Navegación
  1. Home
  2. About: Se narra desde la fundación del Parque hasta los detalles económicos de construcción y uso
  3. Visit: Se presentan las visitas guiadas, los programas de deporte y el carrusel como elemento atractivo
  4. Maps: Se muestra un mapa del parque con la tecnología Google y elementos de interacción personalizados por el sitio para filtrar la búsqueda de lugares requeridos
  5. Calendar: Se muestra un calendario diseñado con cada evento específico, fecha y hora
  6. Volunteer: Se describen las condiciones para ser voluntario y se ofrecen ejemplos de programas para formar parte como tal
  7. Shop: Se presenta la tienda del parque con ciertos elementos de compra
  8. Donate: Diversas formas de donación y membresía del parque


Diferentes URL, estados de diagramación y columnas

Estructura barra lateral y contenidocentral.jpg

Elementos de interacción
  • Slider de imágenes
  • Mapa de google interactivo
  • buscador
  • Calendario interactivo
  • Barra de navegación secundaria

Mapacentralpark.jpg

Calendariocentralpark.jpg


Alaska Wild Consevation Center (Zoo)

Observación del Sitio

Contenido en la Home:
  • Información general sobre el centro
  • Adress & Phone
  • Mission
  • Become a memeber

Head y footeralaska.jpg

Menú de Navegación
  1. Home
  2. Animals: Habla sobre la conservación de los animales y la membresía. Además contiene rótulos internos con nombres específicos de animales
  3. Education: Se expaya sobre la misión educativa. Además contiene rótulos internos con programas y escuelas en el Centro.
  4. Visit: No contiene información como rótulo general, pero los rótulos internos hacen referenica a la admisión, los programas de visita, la tienda de regalos, el centro de bienvenida y la seguridad, entre otros...
  5. Conservation: Explica el concepto de conservación en el Centro. Los rótulos internos dicen del "trabajo" y un "proyecto de restauración"
  6. Support: No contiene información de rótulo general. Los rótulos internos dicen de la Membresía, los regaos online, las adopciones y donaciones
  7. About: Hace referencia a la organización, Los rótulos internos dan cuenta del Staff, los recursos, los videos y trabajos, etc.
  8. Resources: No contiene info general. Filmación, Noticias, Materiales media
  9. Events: No contiene info general. Eventos del día.
  10. Proyects: Hace referencia a un proyecto sobre "Osos" y un "Refugio"


Diferentes URL, estados de diagramación y columnas

Estructura barra lateral y contenidoalaska.jpg

Elementos de interacción
  • Slider de imágenes
  • Barra de navegación secundaria
  • Buscador

Mapaalaska.jpg


Wildfowl & Wetlands Trust (Reserva Nacional)

Observación del Sitio

Contenido en la Home:
  • Summer at WWT
  • Adopt a Wetland
  • Wetland centres
  • Get involved
  • Visit us
  • Latest news
  • upcoming events
  • Wildfowl & Wetlands Trust
  • Win two tickets to Madrid
  • Watch live webcams
  • Shop with WWT
  • Leave a legacy

Head y footwwt.jpg

Menú de Navegación
  1. Visit: Muestra un mapa con la variedad de parques de la misma compañía, distibuidos a lo largo de Inglaterra
  2. Join: Otorga información sobre las condiciones para membresía
  3. Support: Diferentes formas de donación o aporte a la integridad de la Reserva
  4. Conservation: Entrega información sobre el ecosistema de la reserva y su influencia en E.E.U.U
  5. Learn: Muestra el mismo mapa del Rótulo Visit
  6. News: Lista de noticias referentes al Satus-Quo de la reserva
  7. Shop: Presenta ciertos elementos de venta comercial


Diferentes URL, estados de diagramación y columnas

Estructura barra lateral y contenidowwt.jpg

Elementos de interacción
  • Slider de imágenes
  • Mapa interactivo
  • Barra de navegación secundaria
  • Buscador


Australia Zoo (Zoo)

http://www.australiazoo.com.au/

Ficha y mapa de navegación


Observación del Sitio

Australia Zoo ofrece una sección de "Planea tu día", donde permiten que el usuario escoja a su elección un itinerario y por lo tanto el mismo usuario arma su panorama. Sin embargo esto es algo aplicable a los parques como zoológicos, donde existe una estructura diaria con horarios y shows determinados. Por lo mismo, esto no se puede aplicar a modo general.

Atracciones / Highlights
Escogen 10 cosas que ellos buscan resaltar, cosas relevantes que el usuario pueda tener en cuenta al momento de visitar el parque. Luego, 8 cosas que recomiendan llevar y 2 cosas que recomiendan no llevar. Esto se torna muy relevante en los parques ajenos a la ciudad, que son de acceso más complejo.

Servicios
Se exponen los servicios disponibles en el sitio, esta idea es aplicable a todos los parques excepto algunos monumentos naturales, donde es posible que no exista algún servicio al usuario.

Calendario
Los eventos se ordenan según mes, ahí se inscribe cada evento dentro de cada mes, el usuario puede filtrarlos por el menú desplegable.

Campañas
En el home, a modo de Slider se muestran campañas o eventos cercanos, que a pesar de estar bajo un rótulo de Calendario, se usa una ventana para resaltar algún evento específico o actual.

Noticias y eventos
En el home, a modo de texto, los eventos y noticias forman parte del contenido. El usuario puede acceder al contenido completo del artículo/evento y también a la categoría donde se encuentran ordenadas de manera temporal.


Assiniboine Park (Parque Urbano)

http://www.assiniboinepark.ca/index.php

Ficha y mapa de navegación


Observación del Sitio

Noticias, Eventos y campaña
El parque Assiniboine de Canadá también utiliza en el home un slider, similar a Banner, con campañas, exposiciones y eventos. A modo de contenido vuelve a aparecer una columma de Noticias y eventos, que a la vez re-dirigen a la sección correspondiente dentro del sitio.

Noticias
El sitio no utiliza algún método de filtro, ni siquiera se busca un máximo de noticias, que permita tener un índice de "siguiente" o "previo", junto con la cantidad de páginas existentes bajo Noticias.

Eventos
En esta sección sí existe un filtro, por lo tanto es posible controlar el scroll vertical del sitio. Esto también podría ser una solución en Noticias, incluso una vez que aparezcan todas a modo "sin filtrar".

Atracciones
Se entienden como recomendaciones o los paraderos interesantes del parques al estar inscritos bajo el rótulo "Attractions". Acá no se propone algún recorrido o panorama, sino está cada atracción con su horario, dejando abierto a la exploración del visitante.

Galería
Existe un espacio dedicado a mostrar imágenes, donde aparece un menú que identifica las imágenes tras categorías y no tener una lista demasiada extensa. Aún así, quizás no es la mejor forma de mostrarlo, ya que la navegación se torna un poco compleja.

Parque Tantauco

http://www.parquetantauco.cl/

Ficha y mapa de navegación


Observación del Sitio

Planifique su viaje
Es muy útil crear una planificación de visita respondiendo preguntas frecuentes de los visitantes o posibles visitantes. Aún así, no se considera que la mejor opción sea la que se utiliza en el sitio, que es mediante un Lightbox, si es verdad que facilita el tema con la cantidad de subpágina dentro de la categoría, el modo en que está hecho, no queda de manera óptima.

Actividades
Lo que los otros sitios tienen como Attractions, acá se denomina como actividades y se muestra a través de una miniatura y la navegación dentro de cada actividad es nuevamente tras un Lightbox y posteriormente se enlaza a una galería de fotos, que está dentro del mismo Lightbox.


Dartmoor National Park Authority (Reserva Nacional)

Ficha y mapa de navegación

Observación del Sitio

Lejos de ser útil, el sitio dificulta demasiado la manera en que entrega la información, por eso es bueno pensar cual es el objetivo del sitio, qué es lo que quiere potenciar. En este caso el sitio trata de la misma manera la información institucional que la del parque siendo que debería enfocarse en el conocimiento del parque.

El sitio cuenta con muchos sub menús los cuales podrían ser evitados usando una jerarquía mas general, importante es tratar de abarcar términos que resuman una gran cantidad de variables.

Actividades
A pesar de que el sitio cuenta con una lista de actividades que se pueden realizar, no utiliza elementos multimedia para exponerlos, esto es un error constante en el sitio ya que predomina el texto por sobre lo visual. Si lo pensamos desde el usuario, uno quiere ver como es el parque.

Calendario
Un punto a favor es que cuenta con las actividades a realizarse en el mes, lo malo es que no cuenta con ningún filtro de interés o alguna especie de Tag, este problema es constante en el sitio, haciendo de este poco amigable.

Guia de Visita
Se expone mediante una especie de SlideShare, no cuenta con una tabla de contenidos lo cual dificulta llegar a un contenido específico. Al ser un libro digital, este se demora en cargar página por página haciendo aún mas deficiente la lectura.

En general no se expone de manera clara las opciones que ofrece el parque.

National Zoological Park (Parque Zoo)

Ficha y mapa de navegación

Observación del Sitio

Ofrece numerosa información para planear una visita al parque, lo hace de manera detallada y precisa, el sitio esta pensado absolutamente en el usuario.

la lógica del sitio es bastante cuerda ya que entrega mucha información de una vez, no siendo necesario pasar por muchos rótulos.

Horarios
Da información sobre el inicio y cierre del parque, agrega información sobre el cambio de estos según la temporada.

Calendario
Información sobre eventos próximos en el mes, otorga una breve reseña del evento,la hora y termino de este. Para los usuarios registrados, cuenta con la opción de recordar el evento vía mail o RSS.

Llegar al Zoo
Informa sobre la dirección del parque y como llegar a este. Da consejos sobre que bus o metro tomar, piensa en las distintas opciones de como llegar, sea caminando, condiciendo en bicicleta o auto.

Estacionamiento
Entrega información de como funciona el estacionamiento, horarios y precios ademas de reservar un puesto.

Tur de buses
Reserva para planear un recorrido al parque, entrega informacion de contacto y dia en los que se realizan

Mapa
Disponible de un mapa el cual muestra donde se encuentra que especie en el parque.

Accesibilidad
Entrega información para gente que tenga problemas de discapacidad física, facilitando una mayor integración.

Tours
Llamado para reservar con anticipación tours guiados.

Servicio Animal
Fono para denunciar cualquier clase de maltrato animal.

Galleria de animales
Espacio donde se catalogan y se exponen por especies y regiones.

Propuesta Arquitectura de la información

Propuesta 1

La propuesta busca recoger todos los parques de Chile, donde el usuario pueda verlos en su totalidad y al navegar, con metodología de filtro, ir ajustando su búsqueda.

En el Home se piensa en una portada donde se muestren noticias recientes, de igual manera los eventos. Estos datos son recogidos a través los tags existentes en cada ficha de Parque. También se incluye un segmento de "Campaña", siendo una ventana que muestra algún hecho relevante a nivel nacional.

Al entrar a Encuentra tu parque, se muestra recién una columna con miniaturas de todos los parques de Chile. En este momento aparece una barra que contiene módulos de filtros que permiten una navegación personalizada según el usuario. Esta manera de navegación es similar en Noticias, donde se filtran según regiones y luego en Eventos, donde se filtran por región, luego valor de entrada y finalmente por temática de evento, pensando en un usuario que busque un panorama.

Al ingresar a un parque, (tras llegar por búsqueda directa o filtro de contenido), el usuario se encuentra con una portada del parque, que recoge noticias y eventos recientes, una breve descripción, imágenes y sus redes sociales.

Dentro del menú de navegación en la ficha, existen las siguientes categorías, que buscan dar toda la información necesaria como para visitar el parque:

  1. Acerca del Parque, se proporciona información de contacto (números telefónicos, mail de personal a cargo, etc), historia, reglamento, equipo de trabajo y flora y fauna.
  2. Planea tu visita, ¿Cómo llegar?, junto con un mapa de los alrededores y las rutas posibles de acceso al parque, luego un mapa del parque, horarios, reglamentos (nuevamente), tarifa, recomendaciones generales (como qué llevar, dónde comer, etc) y finalmente los servicios del parque (como baños, lockers, estacionamiento, etc)
  3. Multimedia contendrá todo el material audiovisual que corresponda al Parque.
  4. Noticias Todas las noticias que sean del parque, éstas serán luego cargadas en la sección "Noticias", en la portada del parque (ficha) o en el Home, según sean las más recientes.
  5. Eventos Tiene la misma modalidad que Noticias.

De esta manera, el sitio tiene como primera aproximación un perfil de catastro, donde se recogen todos los parques y luego a través de filtros uno puede llegar a información de cada parque, evento y noticia.


Propuesta CDP version3.jpg

Propuesta 2

Se realiza un estudio de contenido y arquitectura de la información con respecto a 15 sitios web (de Chile) relacionados con el concepto de “Parque Nacional”. Dicho concepto engloba una subdivisión de 5 “tipos de parque”; a saber: parques urbanos, parques rurales, reservas, monumentos y zoológicos. El objetivo se plantea extraer la información necesaria para una posterior evaluación de cifras y cuestionamiento (a modo de prueba) del criterio de “filtro” planteado en el mapa de Arquitectura-conceptual anterior (propuesta 1). En pocas palabras, se hace evidente si el mapa propuesto soporta las bases que se plantea a sí mismo para la búsqueda eficiente de un parque determinado.

Casos de estudio

A continuación se muestran cinco ejemplos de casos de estudio con las bases de datos extraídas (cada uno representa un tipo de parque). Este es un paso más de estudio para realizar el benchmarck de Arquitectura de información.

Parque Nacional Conguillio

  • Tipo de parque: Parque Nacional
  • Región: Araucanía IX
  • Temática: Trekking, camping, pesca, cabalgata, esquí, natación, picnic.

Acerca del Parque

  • Historia: Se describen los atractivos; la flora y fauna, clima y senderos de excursión.
  • Contacto: Mail y fono
  • Reglamento: No se especifica
  • Equipo de trabajo: Administrador y guardaparques
  • Flora y fauna: Fauna: monito del monte, viscacha, carpintero negro, cóndor, aguilucho de cola rojiza y aves acuáticas. Flora: Araucarias, ciprés de la cordillera, lleuque, canelo andino, raulí y lenga. (Se agrega : Clima)

Planea tu visita

  • Cómo llegar: Se describe el acceso
  • Mapa (ruta): Mapa satelital de GOOGLE
  • Mapa del parque: No tiene
  • Horario: Horario de Atención temporada alta y baja, 8:30 – 18:00 hrs (lunes a domingo)
  • Tarifa: Tarifas de temporada baja y alta (adultos - niños - discapacitados (nacional - internacional))
  • Recomendaciones generales: Recomendaciones de hoteles, cabañas, hostales y camping.
  • Servicios: Servicios de camping

Multimedia

  • Fotos:
  • Videos: No tiene
  • Noticias: No cumple
  • Eventos: No cumple
  • Redes Sociales: Facebook


Reserva Nacional Lago Peñuelas
  • Tipo de parque: Reserva Nacional
  • Región: Valparaíso
  • Temática: Principalmente la Pesca. También Camping, ciclismo y picnic.

Acerca del Parque

  • Historia: Se desribe la ubicación, las actividades y el desarrollo del parque.
  • Contacto: Mail y fono
  • Reglamento: No se especifica
  • Equipo de trabajo: "Señorita Francisca", concecionaria de la reserva
  • Flora y fauna: Fauna: Ave Carpintero Negro, El zorro colorado y el Armadillo. Flora: Ñirre, Calafate y Frutilla

Planea tu visita

  • Cómo llegar: Se describe brevemente la ubicación en "inicio"
  • Mapa (ruta): Mapa satelital de GOOGLE
  • Mapa del parque: No tiene
  • Horario: "Verano: 9:00 a.m hasta las 18:30 p.m

Invierno: 9:00 a.m hasta las 17.30 p.m Sábados, domingos y festivos : Apertura a las 8:30 a.m"

  • Tarifa: Tarifas adultos mayores, adultos y niños (temporada alta y baja)
  • Recomendaciones generales: Recomendación de "cafetería" concecionada.
  • Servicios: Servicios de camping, cabañas, cafetería, arriendo de bicicletas y ciertos ofrecimientos para la práctica de pesca.

Multimedia

  • Fotos:
  • Videos: No tiene
  • Noticias: No cumple
  • Eventos: No cumple
  • Redes Sociales: Facebook


Monumento Natural Cueva del Milodón
  • Tipo de parque: Monumento natural
  • Región: Magallanes
  • Temática: Arqueología, paleontología, arqueología

Acerca del Parque

  • Historia: Se relatan los antecedentes históricos del Monumento.
  • Contacto: Mail y fono
  • Reglamento: Lista de prohibiciones y deberes (normas de legislación chilena)
  • Equipo de trabajo: No se especifica
  • Flora y fauna: Se apunta con exsactitud gráfica y descriptiva la fauna que reside en el Monumento. La flora se presenta en fotos y breves descripciones al pie de página.

Planea tu visita

  • Cómo llegar: Se describe la ruta en vehículo, taxi y bicicleta.
  • Mapa (ruta):
  • Mapa del parque:
  • Horario: Temporada alta (8:00 a 19:00 horas) y baja (8:30 a 18:00 horas)
  • Tarifa: Tarifas adultos mayores, adultos y niños (temporada alta y baja)
  • Recomendaciones generales: Consejos "en caso de enfrentarte a un puma"
  • Servicios: Servicios de higiene, punto de venta de souvenir, picnic, señal de celular y comunicación radiofónica.

Multimedia

  • Fotos:
  • Videos: No tiene
  • Noticias: No cumple
  • Eventos: No cumple
  • Redes Sociales: Facebook


Zoológico Nacional de Quilpué
  • Tipo de parque: Zoológico nacional
  • Región: Valpraíso
  • Temática: Animales de interés

Acerca del Parque

  • Historia: Se relatan con extensión los antecedentes históricos del Zoológico en el rótulo: "Quiénes somos".
  • Contacto: "Formulario de contacto" y fono
  • Reglamento: Lista de prohibiciones y deberes (normas de legislación chilena)
  • Equipo de trabajo: Organizmos de fiscalización: Servicio Agrícola Ganadero (SAG), Servicio Nacional de Pesca (SERNAPESCA), Corporación Nacional Forestal (CONAF).
  • Flora y fauna: Fauna: aproximadamente 735 animales: Leones Africanos, Tigres de Bengala, Jimmy el Lobo Marino, Monos Tití Orejas de Algodón, Osos Pardos, Aves exóticas, etc

Planea tu visita

  • Cómo llegar: Se describe brévemente la ubicación del Zoológico.
  • Mapa (ruta): No tiene
  • Mapa del parque: No tiene
  • Horario: Martes a Domingo de 10:00 hrs a 17:30 hrs.
  • Tarifa: Tarifas adultos mayores, adultos, niños y escolares.
  • Recomendaciones generales: No especifica
  • Servicios: Estacionamiento, servicios higiénicos, escaños de descanzo, picnic.

Multimedia

  • Fotos:
  • Videos: Sí
  • Noticias: Sí
  • Eventos: No cumple
  • Redes Sociales: No cumple


Parque Urbano: La Quebrada
  • Tipo de parque: Zoológico nacional
  • Región: Valpraíso
  • Temática: Animales de interés

Acerca del Parque

  • Historia: Existe una breve reseña del Parque y cómo surge el proyecto, sus orígenes, su importancia en términos de la ciudad y el grupo ecológico que está detrás del parque.
  • Contacto: No, sólo formulario.
  • Reglamento: No se especifica
  • Equipo de trabajo: Sí, se detalla con texto, nombres e imágenes de las personas. Existe bajo un rótulo "Equipo"
  • Flora y fauna: A modo de galerías con información existe un catastro tanto de flora como fauna.

Planea tu visita

  • Cómo llegar: Sólo mapa google
  • Mapa (ruta): Sólo mapa google
  • Mapa del parque: No tiene
  • Horario: No se especifica
  • Tarifa: No especifica
  • Recomendaciones generales: No especifica
  • Servicios: No especifica

Multimedia

  • Fotos: Sí, propias.
  • Videos: Sí tiene
  • Noticias: Sí, posee en Home
  • Eventos: No cumple
  • Redes Sociales: Sitio web, facebook, flickr, vimeo, feeds, blog


Propuesta CDP version3a.jpg


Observaciones sobre Arquitectura de información “Parques de Chile”

  • 1. Se pone en duda el rótulo de “eventos”. De 15 parques estudiados sólo 1 cuenta con eventos realizados en el parque. El mismo caso ocurre con el rótulo de “noticias”, pero en menor grado; de 15 parques estudiados sólo 5 cuentan con actualización de noticias. Sin embargo, los parques fueron electos en su totalidad bajo la premisa de hallar sitios web no reconocibles por el público masivo. De esta manera, sitos no estudiados pero más populares como Jardín Botánico o Quinta Vergara, generalmente poseen una sección de eventos (calendario) y la actualización de noticias correspondiente. En base a este argumento, el portal del “meta-sitio” se alimentará con información de sitios particulares que satisfagan el cometido propuesto de la Home.
  • Otro fenómeno presente con el tópico de eventos se corrobora en la publicación de éstos a través medios externos o redes sociales como Facebook o sitios de divulgación (municipales). Esto ocurre con mayor frecuencia en los sitios web de parques urbanos, como puede verse en esta serie de ejemplos:
  • Por lo que se decide incluir la sección de “eventos” en la ficha, pero no todos los parques podrán complementarla, por razones obvias.
  • 2. En el filtro “tipo de parque” se utilizan los nombres asociados conceptual y etimológicamente a lo que representan:
  • Parque Urbano
  • Parque Rural
  • Reserva Nacional
  • Monumento Natural
  • Zoológico Nacional

Cabe destacar que en esta sección es definida la etimología de cada concepto, con el objetivo concreto de otorgar conocimiento previo sobre la búsqueda y el uso de filtros de manera eficiente.

  • 3. En el filtro “Temática de parque”, luego de realizar el estudio de 15 parques (3 de cada tipo), se observan ciertos patrones de “actividades” en cada uno:
  • Canopy
  • Trekking
  • Camping
  • Picnic
  • cabalgata
  • natación
  • esquí
  • ciclismo
  • escalada
  • arqueología
  • tours
  • Pesca
  • navegación

Por lo tanto, la actualización del mapa de contenido asimila esta lista en su totalidad.

  • 4. En la ficha de cada parque se adhiere el rótulo de enlace “actividad”.

Benchmark Wireframes

Caso de estudio 1: Assiniboine Park

http://www.assiniboinepark.ca/index.php


Elementos gráficos

  • Header y Footer

Se ajusta el ancho del footer al ancho del header pero queda muy compacto, de hecho se usa una doble fila en los dos últimos elementos del footer, al no tener el espacio suficiente.

Elementos 1 Assiniboine.jpg
  • Menú de Navegación

El menú tiene una interacción de hover, donde se despliegan los rótulos interiores. El despliegue tiene una demora, una transición hasta que se despliega el menú completamente, construyendo un ritmo de navegación.

Assiniboine-MenuSuperior.gif
  • Menú Lateral

La cantidad de rótulos por menú varía entre 2 a 10, por lo tanto no son tan difíciles de navegar. Aún así existen ciertos rótulos donde se despliegan más opciones. Existe un espacio entre el menú de navegación y el contenido, que se usa a modo de Banner, que no se ve alterado en ningún momento.

Assiniboine MenuLateral.jpg

Diagramación y grilla

Todo el sitio está construido bajo una doble columna de contenido. Sólo se ven levemente alterados por el espaciado entre las columnas.

Grilla Assiniboine.jpg

Elementos de interacción

  • Campañas

El contenido de las campañas pasa desde aplicaciones, exhibiciones artísticas, publicidad de membresía, promociones de temporadas y concursos.

Caso de estudio 2: Royal Parks

http://www.royalparks.org.uk/


Elementos gráficos

  • Header y Footer

El header sólo se usa para promocionar temporadas.

Elementos 1 RoyalParks.jpg
  • Menú de Navegación

No existe interacción notoria, sino más bien de manera sutil, es que el rótulo cambia a un color verde, tras un hover.

RoyalParks MenuSuperior.jpg
  • Menú Lateral

Tras navegar en el sitio, aparece el menú lateral, que a veces es a modo filtro y otras es a modo de despliegue, sin embargo, este despliegue es una forma descontrolada, llegando a ser totalmente desmesurado y complicado de navegar, teniendo que subir y bajar para escoger rótulo y continuar leyendo.

RoyalParks MenuLateral.jpg

Diagramación y grilla

El home se construye por una gran columna central que se ve fragmentada por elementos menores como blog, clima, redes sociales, suscripciones, etc.

Luego en el interior, aparece una doble columna, siendo una relación de proporción aproximada de 1 / 3. Esto se mantiene para todos los sitios internos excepto bajo Shop, que es un enlace a un sitio externo.

Grilla RoyalParks.jpg

Elementos de interacción

  • Campañas

El enfoque de las campañas en este sitio es más bien informativo, como destacando eventos y noticias.

  • Mapa

El mapa es interactivo, donde se disponen los parques a través de un mapa simplifcado. Uno puede hacer click directamente encima del parque o a través de la lista enumerada. Una vez apretado un parque, se abre una ventana a modo Lightbox, dando información adicional y permitiendo ir directamente a la ficha del parque.

500


Caso de estudio 3: Conaf

http://www.conaf.cl/

Elementos gráficos

  • Header y Footer
Header y fooooots.jpg
  • Menús de Navegación

Las tres barras de navegación no presentan menú desplegable. El contenido se muestra de forma directa.


Diagramación y grilla

Las grillas del sitio son cuatro. Las diagramación consta de una a tres columnas. La home presenta de la mayor cantidad de columnas, luego le siguen cinco rótulos de navegación de dos columnas y un rótulo de una columna.

Grilla Conaf.jpg

Elementos de interacción

  • Campañas

Las campañas del sitio son de variadas propagandas; a saber: Gobierno de Chile, Banco Santander, Greenpeace, etc.

  • Mapa

El sitio sólo presente un mapa y es el básico de Google Earth.

Mapa conaf.jpg

Caso de estudio 4: Ibirapuera Park

http://www.parqueibirapuera.org/#

Elementos gráficos

  • Header y Footer
Header y footeribirapuera.jpg
  • Menús de Navegación

Las barras de menú presentan menús desplegables. El sitio adquiere más profundidad y especificación de contenido.

Barras de menuibira.jpg


Diagramación y grilla

Las grillas del sitio son dos; constan de la que rige en la Home y otra con los demás rótulos de navegación. Ambas presentan 3 columnas de diagramación, las cuales difieren en pequeñas medidas.

Grilla ibirapuera2.jpg

Elementos de interacción

  • Campañas

El parque no presenta campañas

  • Mapa

Los mapas del parque Ibirapuera han ido sucediéndose con el tiempo. En un comienzo se mostraba una ilustración más bien recatada del parque y su demografía. Ahora cuenta con una mayor cantidad de mapas y mayor información para el usuario.

Mapasibirapuer.jpg

Caso de estudio 5: National Park Foundation

http://www.nationalparks.org/

Elementos gráficos

  • Header y Footer

El header en el home, esta por encima de un slider (mostrador de fotos) que contiene ademas unos rótulos de acceso rápido. Luego de entrar a las secciones el slider desaparece al igual que aquellos rótulos, la barra de navegación queda siempre de la misma manera.

El Footer contiene lo mismo que tiene el menu de navegación agregando la dirección y contacto de la fundación

Head y footer National Park.jpg
  • Menú de Navegación

El menú cuenta con interacción hover (despliegue), se muestran los rótulos interiores de cada sección. La gracia que estos poseen radica en que incluyen información breve acompañada de imágenes y botones de acceso rápido como "comparte tu foto", "suscribirse ahora", "parque de muestra"

National Park-Menu Superior.gif
Menu Superior National Park.jpg
  • Filtros

Es posible llegar a otro sitio del parque el cual esta enfocado en mostrar solo los parques. La manera para hacerlo es mediante el uso de filtros, estos permiten al usuario poder discriminar la cantidad del contenido en base a un interés específico.

Barras de filtros National Park.jpg

Diagramación y grilla

Basado en una diagramación a 2 columnas se construye el sitio, son 3 las variables que presenta para organizar el contenido. La primera que contiene la home, su función esta basada en entregar mas información mientras que la segunda como la tercera están mas enfocado en lo visual.

https://dl.dropboxusercontent.com/u/51056983/Grilla%20National%20Park%20Foundation.jpg

Propuesta Wireframes

Grilla estructural

Grilla Sitio.jpg

MetaSitio

Home

En la Home del Meta-sitio de adopta una primera idea de contenido de previsión: El recuadro de interacción de las imágenes, ubicado en la sección superior-izquierda, da cuenta de las 4 subdivisiones de parque (Parque nacional, Reserva nacional, Monumento natural y zoológico), con un rótulo que invita a revisar esta información antes de filtrar un determinado parque. Las imágenes, como sería lógico, ilustrarían estos 4 "tipos de parque". Más abajo se encuentra la sección de "Últimas noticias" y "Eventos", los cuales se alimentan directamente de las noticias y eventos más destacadas de la vasta cantidad de parques de Chile; se ofrece una breve descripción, el nombre del parque (botón interactivo que re-direcciona automáticamente al sub-sitio del parque) y la opción de "ver todas" las noticias o eventos. Por último, en la sección derecha se muestran las campañas de propaganda del propio sitio, o de algún sub-sitio de Chile vinculado.

Wireframe metasitio Home2 .jpg

https://dl.dropboxusercontent.com/u/9815315/Wireframe%20Metasitio%20-%20Home.jpg

Encuentra tu Parque

Se introduce el sistema de filtro. El usuario tiene la facultad de navegar (en un primer estado) toda la extensión cuantitativa de Parques de Chile. Luego, al lado izquierdo de la ventana, la barra de filtro permite un sistema de interacción que va decantando la información, haciéndola cada vez más específica. El usuario tiene la facultad de filtrar un parque a través de su Tipo (Parque rural, Parque urbano, Reserva nacional, Monumento natural, Zoológico), interés (Ciencia y cultura, recreación, deportivo, etc) y región (todas las regiones de Chile).

Wireframe Metasitio - Encuentra tu Parque.jpg

https://dl.dropboxusercontent.com/u/9815315/Wireframe%20Metasitio%20-%20Encuentra%20tu%20Parque.jpg

Noticias

En el caso de las noticias, el sistema de filtro se remite a las regiones de Chile. Cada noticia ocupa todo el ancho de la sección "contenido", describe una sinopsis de la misma e incluye una sección de "Tags" y "redes sociales".

Wireframe Metasitio Noticiass.jpg

https://dl.dropboxusercontent.com/u/9815315/Wireframe%20Metasitio%20-%20Noticias.jpg

Actividades en Parques de Chile

En el caso de las actividades el sistema de filtro especifica la "Región" (todas las regiones), el "valor de entrada" (liberada, pagada) y "temática de actividad" (cultural, educativa, científica, deportiva, ecológica y laboral). Los recuadros se muestran al igual que los del rótulo: "Encuentra tu parque", sin embargo, el usuario tiene la facultad de revisar los eventos próximos y los pasados en la interacción de esta URL.

Próximos

Wireframe Metasitio Actividades Parques de Chile Proximos.jpg

https://dl.dropboxusercontent.com/u/9815315/Wireframe%20Metasitio%20-%20Actividades%20Parques%20de%20Chile%20Proximos.jpg

Pasados

Wireframe Metasitio Actividades Parques de Chile Pasados.jpg

https://dl.dropboxusercontent.com/u/9815315/Wireframe%20Metasitio%20-%20Actividades%20Parques%20de%20Chile%20Pasados.jpg

Sobre nosotros

Ficha Parque

Home Ficha

En cada ficha de Subsitio-parque se adopta una "barra lateral de navegación", ubicada a la derecha de la página, con los rótulos correspondientes para la navegación apropiada en cada parque de Chile; a saber: "Acerca del parque", "Planea tu visita", "Actividades", "Multimedia", "Noticias" y "Eventos". La home ofrece -en todo ficha- una breve reseña (histórica o descriptiva) del parque, monumento, zoológico o reserva, además de un Slider con imágenes. En la sección inferior del sitio, se muestran (2 de) las Noticias y/o eventos más recientes.

Wireframe ficha Home.jpg

https://dl.dropboxusercontent.com/u/9815315/Wireframe%20ficha%20-%20Home.jpg

Acerca del Parque

La "barra lateral de navegación" tiene la posibilidad de ser desplegada cuando el usuario interactúa con ella. Además, esta asimila el rol de "índice" en la medida que el usuario hace Click y el "Scroll" funciona de manera automatizada para mostrar la información requerida. Cada uno de los 6 rótulos se despliega en una serie de URLS que especifican la información. En el ejemplo de "Acerca del parque" se muestran 5 de ellos; a saber: "Historia", "Contacto", "Reglamento", "Equipo de trabajo" y "Flora y fauna". En la ficha, también, han sido incluidas las Breadcrumbs para rastrear la interacción reciente.

Wireframe ficha Acerca del parque.jpg

https://dl.dropboxusercontent.com/u/9815315/Wireframe%20ficha%20-%20Acerca%20del%20parque.jpg

Planea tu visita

Este Wireframe utiliza la misma estructura de diagramación que los otros dos de la ficha: "Actividades" y "Acerca del parque". Lo único que difiere es el despliegue de los rótulos, el contenido de información y las imágenes.

Wireframe ficha Planea tu visita.jpg

https://dl.dropboxusercontent.com/u/9815315/Wireframe%20ficha%20-%20Planea%20tu%20visita.jpg

Actividades

Este Wireframe utiliza la misma estructura de diagramación que los otros dos de la ficha: "Planea tu visita" y "Acerca del parque". Lo único que difiere es el despliegue de los rótulos, el contenido de información y las imágenes.

Wireframe ficha Actividades.jpg

https://dl.dropboxusercontent.com/u/9815315/Wireframe%20ficha%20-%20Actividades.jpg

Multimedia

En la sección de imágenes y videos que sostiene la reproducción del material multimedia, se muestra un recuadro de interacción con las miniaturas (en el caso de las imágenes) y uno con Scroll, uno debajo de otro (en el caso de los videos).

720px

https://dl.dropboxusercontent.com/u/9815315/Wireframe%20ficha%20-%20Multimedia%20Im%C3%A1genes.jpg

Wireframe ficha Multimedia Videos.jpg

https://dl.dropboxusercontent.com/u/9815315/Wireframe%20ficha%20-%20Multimedia%20Videos.jpg

Noticias

El menú ofrece dos rótulos que son: Noticias recientes e Historia. El usuario parte desde las noticias mas recientes ya que es lo que mayor interés. Para aquellos que busquen una noticia específica (en caso de estudio) esta el historial que muestra todas las noticias del sitio

Noticias Recientes
Wireframe noticias - Parques de Chile.jpg
Historial de Noticias
Wireframe noticias historial - Parques de Chile.jpg

Eventos

Se plantea la misma lógica sobre lo reciente y lo pasado que en las noticias Eventos
Wireframe eventos - Parques de Chile .jpg
Historial de Eventos
Wireframe eventos historial - Parques de Chile.jpg


Interface

Propuesta 1

Primeras constataciones sobre el concepto de interface.

En un primer momento se tantea la visualización requerida. En este caso los colores son definidos a nivel de contraste y en relación al tópico de "parque". Se pensó en una plantilla fundamentada por el color verde. El tono dista de otorgar firmeza, ya que no se trabajó en base a la teoría de los complementarios. A la manera de concretar una estética no se fundamenta con toda palabra el concepto de identidad ni de psicología cromática. Los elementos son todos bastante homogéneos; no se reconoce una paleta definitiva. Esta primera fase da cuenta de una prueba y una primera inmersión en el trabajo de la gráfica.

Propuesta 2

Se propone construír una gráfica que logre diferenciar fácilmente el contenido con los elementos de navegación. El header busca una identidad cromática neutral, tratando de desprenderse un poco del concepto universal del verde en relación a los parques. Esto también es una problemática que se plantea dentro del grupo: ¿Cómo es la relación concepto-color? ¿Se puede realmente trabajar un sitio de parques sin utilizar un color de verde como color central?

El blanco viene como un contrapunto con la tonalidad oscura del header, y en el contenido aparecen los elementos anaranjados, que son complementarios del azul dominante.

Finalmente en la sección de multimedia se busca dar otro ritmo de lectura, variando con el brillo de la pantalla a un tono mucho más oscuro.

Propuesta 3

Propuesta 4

¿Cómo se construye una propuesta de interfaz en grupo, donde la subjetividad es tan latente?

Se trata de unificar cada uno de los conceptos de las propuestas anteriores, esto lleva a un estilo muy neutral y sobrio, tratando además de ser coherentes con la navegación deseada: simple y rápida, sin mucha complicación y de un ritmo rápido.

El header y fondos de contenidos son muy similares entre Metasitio y subsitio, tratando de ser cuidadosos en que la identidad del metasitio sea vista en todas sus navegaciones.

Aún así, esto lleva a un ritmo monótono, carente de identidad entre el metasitio y el subsitio. Esto conlleva a una complicación para el usuario al navegar, ya que no tiene colores de referencia y pierde el sentido de profundidad.

Corrección de Propuesta 4

La necesidad de tener variables gráficas en distintos momentos de la navegación. La experiencia del usuario y la conciencia al navegar por el sitio.

Luego de concretar la corrección de la propuesta 4, se intenta recuperar o generar una identidad distinta tanto para el home del metasitio como para todos los sitios interiores de los subsitios. Es así como se construyen franjas horizontales para el Home del metasitio, abarcando la totalidad del navegador, junto con elementos circulares. Luego el mapa también se dispone horizontalmente. Mientras el subsitio muestra una franja a modo fixed, que incluye el menú de navegación. De esta manera se quita el header permanente, dejando un scroll libre para el contenido. La navegación acá sería en base a anclas y desde puntos determinados, como los ejemplos de Multimedia, Noticias y Eventos; acceder a una URL interna del parque y ver un contenido en su despliegue.

Propuesta 5: Final

Ajuste de interfaz

* Metasitio

Desde la propuesta 4 se proponen elevar dos parámetros: El primero es la homogenización de una paleta gráfica que de cuenta de sus elementos en común y de sus distanciamientos con respecto a la identidad en Metasitio y Subsitio. El segundo constaba de emparejar los detalles, puntualizar en la fidelidad para con los conceptos de navegación establecidos, y finalmente fomentar una simplicidad en la visualización de la propuesta. Los elementos de interacción y la paleta gráfica se fueron simplificando para llegar a un todo con mayor distingo.

* Subsitio

La Home de Subsitio -en las visualizaciones de más abajo- sólo presenta los rótulos con los diferentes estados de diagramación. Los otros tres: "Acerca del parque", "Planea tu visita" y "Actividades" se sostienen bajo parámetros de diagramación en común, siguiendo la misma grilla de columnas, con un texto continuo y sub-títulos correspondientes.

Paleta de colores

Se opta por diseñar una breve gama de grises para sostener el fundamento visual en ambos casos: Metasitio y Subsitio. Esta gama es un primer criterio de identidad en el concepto gráfico general de la navegación.
De manera ulterior se adoptaron los colores verde y azul para contrastar con la plantilla. En términos de psicología del color el verde representa el balance, la calma y el rejuvenecer. También transmite estabilidad en sus tonos más oscuros. Se incorpora bajo una representación de la naturaleza y el tópico de "parques". El azul es símbolo de seguridad y confianza. Bajo estos parámetros gráficos y a su vez perceptivos se llegó a una paleta de colores como propuesta definitiva.

Cada tipo de parque da cuenta de una interface representativa. Los gama cromática asociada a ellos se fundamenta bajo un criterio de tonos complementarios. El usuario reconoce esta gama cromática desde el momento en que accede a "Encuentra tu parque" del Metasitio; se observa representada en forma de círculos pequeños (forma que consta la ley gráfica del sitio), a un costado del nombre de cada parque.

La utilización de una "gradiente" en el Header o cabecera del Metasitio le otorga una identidad gráfica al mismo. El usuario reconoce visualmente que se encuentra navegando en un "portal". Así también se utilizó una foto representativa de cada parque en la cabecera del Subsitio. De esta manera se da cuenta de un equilibrio entre los elementos gráficos que difieren y los que otorgan identidad.

Iconografía

Los íconos, junto con el color del círculo, son la identidad de la categoría del parque en la que uno se puede encontrar navegando. Junto a ellas está el nombre del parque, esto permite que el usuario identifique rápidamente el tipo de parque que está viendo, sin necesidad de hacer scroll o de buscar algún etiquetado.

La elección de los íconos está netamente ligada a su clasificación y las actividades más notorias.

Parque Urbano: Abriendo la posibilidad de localidad y la banca busca proyectar la constante visita de personas y uso del espacio.

Parque Rural: Más bien se escoge un ícono así por la diversidad que implica un parque rural, pero en su gran categoría, todos apuntan a la riqueza de flora y fauna, el cuidado del medio ambiente.

Zoológico: Una huella es más universal que mostrar una especie de un animal.

Monumento Natural: Previamente se había escogido otra forma de mostrar una roca/montaña, sin embargo, la forma era algo críptica y al tener un signo así, se piensa en algo cercano a un landsmark, aquello que puede ser un punto de referencia de una zona, un espacio con un valor distinto y que sobresale en su alrededor.

Tipografía

Las 4 variables de familias tipográficas son necesarias para conformar una lectura cómoda y entender las jerarquías de información de manera rápida y de forma natural.

La tipografía Archivo Narrow se utiliza en el Subsitio, determinando los distintos momentos en la navegación vertical, su definición de trazos es de gran ayuda para lograr dictar los conceptos más amplios del parque. Aún así, por lo mismo se utiliza en un tono gris y sin fondo, sino aparecería de manera muy cruda. Mientras que la Yanone Kaffeesatz es más radical en su cualidad Condensed, por lo que no tiene una naturaleza de lectura contínua ni de gran tamaño, pasando a ser un subtítulo dentro de cada categoría.

La tipografía Raleway es la que es utilizada en tamaños mayores, justamente por sus grandes blancos, construcción geométrica y trazos finos similar a la Futura, mientras que Open Sans aparece como la tipografía neutral y versátil, en algunos Menús, textos contínuos y las tipografías de tamaños menores (hasta 9px), como datos y enlaces.

Diseño en HTML+CSS

Se construyen 5 html que son considerados claves dentro del diseño. Todos ellos fueron codificados con HMTL, CSS y algunas interacciones de Javascript. La iniciativa del encargo fue construirlas sin necesidad de que haya una mayor interacción, sin embargo, se trata de abarcar enlaces, anclas, interacciones de scroll y hover, para así darle un valor más cercano a lo que podría ser un producto final.

Bajo el proceso de código y ajustes con cascadas de estilo, surgen mesuras de lo que realmente se puede hacer y lo que no, es por eso que algunas ideas se ven levemente alteradas y luego son re-pensadas en función del diseño y la navegación.


(Enlaces a carpeta pública de Dropbox)

Metasitio - Home

Metasitio - Encuentra tu parque

Metasitio - Noticias

Subsitio - Parque Jardín Botánico - Home

Subsitio - Parque Jardín Botánico - Noticias