Encargos LC3 2012 - Caterina Da Silva

De Casiopea



TítuloEncargos LC3 2012 - Caterina Da Silva
Tipo de ProyectoProyecto de Curso
Palabras Clavelc3, 2012, encargos, tareas
Período2012-2012
AsignaturaLC3 2012
Del CursoLC3 2012
CarrerasDiseño Gráfico
Alumno(s)Caterina Da Silva
ProfesorJorge Barahona


Durante este trimestre se busca proponer, de manera personal, mejoras al sitio Ecoviandantes realizado el trimestre anterior en Taller.

Encargo 1 | Brief general y propuesta personal para Proyecto Ecoviandantes 2.0

Se resuelve crear un Brief general para el Proyecto Ecoviandantes del cual el taller buscará la mejor manera de responder. De acuerdo a ello, yo resuelvo de la siguiente manera: Presentación del proyecto a realizar individualmente.

Encargo 2 | Mapa de contenidos y mapa de navegación

Para comenzar a darle forma a la propuesta se hace primero un mapa de contenidos del sitio: CDS Ecoviandantes-org 2.0.png

Éste tendría cuatro barras: Header (en la parte superior), Main (que contiene las páginas principales para navegar), Side (que tendría botones de acceso y no estaría presente en todas las páginas) y Footer (contiene páginas menos relevantes, pero que deben ser expuestas). Además de la Portada, que contendría los últimos acontecimientos del movimiento de manera que se vea vivo y presente. Los cuadros gris oscuro muestran los nombres de botones/secciones que redirigen a páginas/contenidos, los cuadros con bordes seccionados gris claro son especificaciones de contenido de las páginas.

Pero, mientras hacía este mapa, decidí que lo mejor era hacer aparte una aplicación que tuviera una lista de tareas por etapas para los ecoviandantes, así sabrían qué deben hacer y cómo se va desarrollando el proyecto en su comuna. Éste sería el mapa de contenidos de la aplicación:

CDS Mapa contenidos app ecoviandante 1.0.png

Por lo que el mapa de navegación/interacción entre ambos queda de la siguiente manera:

800px

Se intenta mantener lo más simple que se puede ambos sitios, mostrando sólo lo que es estrictamente necesario para el útil funcionamiento del sitio y aplicación, y linkeándolos cada vez que se pueda, para que ya seas ecoviandante o lector casual del sitio, puedas acceder a la misma información. A la larga, el sitio busca que se vaya actualizando por la acción de los ecoviandantes más que por los encargados del movimiento, ya que ellos son los que:

  1. Crean los mapeos de basurales
  2. Dan ideas y sugerencias para el movimiento
  3. Suben material (testimonios, fotografías y videos) de las limpiezas, reforestaciones y recuperaciones de espacios.

Mientras que ellos lo van juntando, el resto de la gente ajena al movimiento puede verlo en tiempo real, demostrando la vivacidad del proyecto.

La aplicación puede ser usada en cualquier dispositivo con internet, ya que será un sitio "pequeño", como un pop-up pero navegable.

Más explicaciones del sitio y la aplicación irán ajustándose de a poco y con más claridad más adelante.

Encargo 3 | Personas y escenario y sus viajes en el sitio

Personas y Escenarios

Basándome en el libro About Face de Alan Cooper, definí tres tipos de personas para todo el reajuste: todos para el sitio y sólo dos de ellos para la aplicación. ¿Por qué sólo dos? Porque la aplicación es opcional: las personas escogen entrar a la aplicación. (He reciclado algunos perfiles de personas que creamos para el proyecto anterior de Ecoviandantes).

1. Persona primaria | Primary persona: Camila

  • Tiene 17 años, asiste a un reconocido liceo en la ciudad de Santiago, cursa 4to medio.
  • Quiere estudiar Derecho en la Universidad de Chile y dedicarse a la legislación medioambiental.
  • Es políticamente activa dentro de su institución y es presidenta del centro de alumnas.
  • Le interesa la proposición de nuevas propuestas para movimientos ecológicos y vincularse a una red de apoyo que le permita vincularse desde ya con una propuesta y causa concreta medioambiental.

Escenario: Camila se encuentra navegando en internet cuando ve que un grupo en facebook publica un enlace a la página "Ecoviandantes" que le llama la atención, por lo que ingresa, mira los contenidos y decide hacerse cargo, aceptando el desafío del "Checklist del Ecoviandante", registrándose y accediendo a la aplicación.

2. Persona secundaria | Secondary persona: Ruth

  • Tiene 53 años, es enfermera y trabaja en el hospital naval, Almirante Neft de Viña del Mar y vive en Gómez Carreño.
  • Es madre de dos jóvenes que asisten a la universidad y tiene muchas vecinas, con las cuales comparte.
  • Es muy proactiva y vivaz, y le preocupa la cantidad de basura que se acumula en su barrio, ya que sabe que no es saludable para la comunidad.

Escenario: Ruth se encuentra en el Hospital durante su turno y se da cuenta que hay un nuevo afiche en el panel de informaciones, el cual llama a toda la gente de la comuna a unirse al movimiento "Ecoviandantes", por lo que toma uno de los papelitos y cuando llega a casa, se conecta desde su computador al sitio, informándose de lo que busca este proyecto. Ella, preocupada por el bienestar de su comuna, decide hacerse parte del movimiento y registrarse a la aplicación para que la mantengan informada de cómo va avanzando en su comuna y estar al tanto de las capacitaciones y limpiezas para participar junto a sus vecinas.

3. Persona atendida | Served persona: Rubén

  • Tiene 46 años, vive en la ciudad de Santiago.
  • Trabaja en el sector de gestión para una empresa de construcción.
  • Muchas veces debe recurrir a vertederos ilegales al momento de solucionar problemas de gestión administrativa cuando los escombros no encuentran lugar.
  • Tiene tres hijos que asisten al colegio: 2o medio, 8o básico y 7o básico.
  • Le preocupa el futuro en cuanto al tema medioambiental y le gustaría conocer iniciativas positivas al momento de reciclar, para así poder alinear su empresa a ellas.

Escenario: Rubén llega del trabajo a las 8 de la noche y su familia está preparando la cena, cuando su hijo mayor les comienza a comentar sobre una charla medioambiental de los Ecoviandantes que hubo en su colegio. Rubén, luego de escuchar atentamente lo que decía su hijo, juntos revisan el sitio web, e insta a su hijo a formar parte del movimiento. Así mismo, él comenta en su empresa la posibilidad de auspiciar el proyecto.


Viajes

Los viajes son una posibilidad de cómo una persona navegará el sitio que se ha diseñado, dejándose llevar por sus intereses y lo que la página ofrece. Ésto ayuda al diseñador del sitio para saber si la estructuración de la información es accesible para todos.

1. Camila

  1. Portada
    1. Video
    2. Botón:¿Por qué ser Ecoviandante?
  2. Participa: ¿Qué es ser Ecoviandante?
  3. Lo que hacemos: El proyecto
  4. Participa: Testimonios
  5. Red Ecoviandante: Mapeo colectivo
  6. Red Ecoviandante: Biblioteca multimedia
  7. Footer: Colegios asociados
    1. Botón: Ser ecoviandante
  8. FORMULARIO DE REGISTRO
  9. INGRESO A APLICACIÓN

2. Ruth

  1. Portada
    1. Video
  2. Lo que hacemos: El proyecto
  3. Lo que hacemos: Programas
  4. Red Ecoviandante: Mapeo colectivo
  5. Participa: ¿Qué es ser Ecoviandante?
    1. Botón: Ser ecoviandante
  6. FORMULARIO DE REGISTRO
  7. INGRESO A APLICACIÓN

3. Rubén

  1. Portada
    1. Video
    2. Botón:¿Por qué ser Ecoviandante?
  2. Participa: ¿Qué es ser Ecoviandante?
  3. Lo que hacemos: El proyecto
  4. Lo que hacemos: Programas
  5. Footer: UNIDG
  6. Red Ecoviandante: Biblioteca multimedia
  7. Footer: Nos apoyan
  8. Header: Contacto
  9. FORMULARIO DE CONTACTO

Encargo 4 | Aplicación Checklist Ecoviandante: Mapas de contenidos, de navegación y primeros wireframes

Para optimizar los tiempos, decido continuar sólo con la aplicación. Así que arreglo el mapa de contenidos y de navegación, y a partir de ellos creo los primeros acercamientos a la visualización de la aplicación:

Mapa de contenidos de la aplicación:

CDS Mapa contenidos app ecoviandante 1.2.png

Mapa de navegación de la aplicación

800px

[Primeros Wireframes]

Encargo 5 | Benchmark, Wireframes avanzados y Primer diseño de interfaz

Benchmark

Como la aplicación consta de pasos los cuales se van superando en orden, pudiéndose volver atrás, hago un benchmark de sitios web que utilizan ese recurso para procedimientos de transacción.

  • Caso uno: Como primer caso, está el sitio de PandaWill, en donde el sistema de transacción se ve representado como un acordeón vertical, como en mis wireframes anteriores, pero le agregan numeración a cada sección, dejando en claro los pasos a seguir, a pesar de ello, no queda lo suficientemente claro que se debe terminar el paso actual para comenzar con el siguiente.
  • Caso dos: En el caso de Aeria games se utiliza un acordeón horizontal, mostrando los pasos siguientes con baja opacidad, dando a entender que no se puede acceder a ellos sin que se complete el paso actual.
  • Caso tres: En el sitio de Óptica Honda usan una línea de tiempo, marcando los pasos como hitos de la línea, pero según mi parecer, puede que no se entienda que se puede volver atrás a pasos ya superados.
  • Caso cuatro: Para el sitio de Grupo Compramérica (el sitio estaba abajo | última revisión el 15/07/2012) se utiliza también la línea de tiempo, pero además dos recursos nuevos: cambiar el color del "camino recorrido", dando a entender que que ya se completaron los pasos para llegar a la segunda etapa, como una sensación de avanzar; y el uso de íconos para marcar cada etapa, para darles más individualidad y expresividad a la línea, mostrando que cada etapa es distinta a la otra.
  • Caso cinco: En Amazon también se valen del recurso línea de tiempo, sólo que en este caso lo dirigen más a la idea del "camino recorrido", ya que destacan el rastro que ha dejado un ícono de un carrito de compras que se detiene una a una en las etapas que hay que completar.
  • Caso seis: Para Decktrade se ocupa como un estilo de menú, en donde los botones tienen forma de flecha, indicando así que hay una continuidad, pero no hacen notar que los pasos siguientes no pueden accederse si no se completa el anterior, por lo que puede ser confuso.
  • Caso siete: Por último, está el sitio de LAN, y en su caso hacen uso de un menú similar al anterior, pero solucionan el problema de los pasos, deshabilitando los botones siguientes y dejando habilitados los pasos anteriores.


Encargo 6 | Segundo diseño de interfaz

Segunda versión Aplicación Checklist Ecoviandante

Encargo 7 | Tercer diseño de interfaz

Referencias

NeoLab: De esta página me gusta la forma en que se muestra la portada, por medio de rombos que al pasar el mouse por encima cambian.

Multiview En Multiview usan el mismo estilo que en NeoLab, pero mantienen la marca de los hexágonos durante la página.

Harry Vorsteher Photography Este es el portafolio digital de un fotógrafo, en el cual me basé para hacer la biblioteca multimedia.

Tercera versión Aplicación Checklist Ecoviandante

Encargo 8 | Cuarto diseño de interfaz

Cuarta versión Aplicación Checklist Ecoviandante