LC1 2015

De Casiopea



Asignatura(s)Lenguaje Computacional 1
Año2015
Tipo de CursoRamo Lectivo
TalleresDG 2º
ProfesoresJorge Barahona
AlumnosCatalinaortúzar, Catalina Perez, CatalinaHörr, Santiago Comandary, María Ignacia von Unger, Carlos Patricio Noriega Lecaros, EmilyZembo, Antonella Pastén, Gabriela Rojas, Rafaela Avalos Pascual, Ingrid Alvarado Paulus, Álvaro EstebanReyes Villavicencio, Martín Guerra, Darío Tapia, Martin Araneda, Marcela Bravo Pulgar
Palabras Clavelenguaje computacional, arquitectura de la información, UX, Lenguaje Computacional 1, CX
Carreras RelacionadasDiseño Gráfico, Interacción y Servicios

Resumen de Contenidos

El ramo trata de los aspectos generales del Diseño Centrado en el Usuario (UX) y en particular de la Arquitectura de la Información. La idea es estudiar y aprender los conceptos relacionados con metodologías de UX aplicados en los procesos de Diseño de interacción y la Arquitectura de la Información como disciplina central del manejo de contenidos en medios digitales.



Tareas

Levantamiento de Mapa de Navegación

Encargo

Sobre la base de una elección personal, buscar y deconstruir la navegación de un sistio web en un *Mapa de Navegación* aplicando las normas gráficas del vocabulario visual para describir arquitectura de información y diseńo de interacción desarrollado por Jesse J. Garret.

Entregas

  • Catalinaortúzar: Trabajé el sitio web del diario La Tercera. Elegí dicho sitio web porque es complejo debido al alto contenido que tiene y sus derivadas relaciones y extensas navegaciones que se pueden llevar a cabo dentro del sitio. Tiene como principal función entregar las noticias de manera digital a las personas, para que éstas puedan informarse desde un computador en la web. Su mayor problema fue el poder establecer las correctas relaciones entre y dentro de las categorías.


  • Gabriela Rojas: Mi elección para realizar un mapa de navegación fue el sitio web del museo Guggenheim de Bilbao, el cual me pareció adecuado por la gran cantidad de contenido e información en él, acompañado de la jerarquía de información en su estructura. Sin embargo su ejecución fue algo confusa debido a la diversidad de contenidos y documentos dentro de una misma página.


  • EmilyZembo: Para realizar el mapa de navegación, escogí la pagina de programas interculturales AFS Chile, que me pareció adecuada porque poseía un orden claro y preciso para realizar el primer mapa. Luego al realizarlo me pude dar cuenta de que unos de los problemas principales que presentó fue que poseía más de 3 niveles lo que lo hacía complejo en su estructura, provocando que al ser muy extenso el contenido fuera difícil de establecer conexiones entre las encabezados de manera efectiva.


  • Ingrid Alvarado Paulus: El mapa de navegación escogido en esta ocasión fue del sitio web de la revista Paula, el cual posee una estructura clara y precisa, sin muchos niveles que desordenen el orden y la confusión del usuario. Se puede ver que su etiquetado y estructura no es mayor a otros sitios, es por eso mismo que es mucho mas fácil seguir la linea de la estructura.


  • Rafaela Avalos Pascual: Como respuesta al encargo, trabajé con el sitio de la escuela de arquitectura y diseño de la PUCV, mostrando ésta en distintos ámbitos sus características, sus carreras, su extensión, etc.

Se determinaron los puntos del menú como base del mapa, luego como sucesión se fueron organizando los demás términos; donde al finalizar, apareció una estructura extensa.



  • Antonella Pastén: Para realizar el primer mapa de navegación escogí el sitio web del Museo de Arte Moderno (MoMa). En él encontré un sitio que poseía una indización acotada lo que facilitó la realización del mapa de navegación, el cual solo poseía tres niveles de navegación. En cuanto a la utilización del lenguaje de Jesse James Garret, se utilizaron principalmente conceptos como el de página y flechas que abrían otros sitios, unas que solo llevaban hacia una dirección y otras que redirigían a ventanas de niveles anteriores.


  • María Ignacia von Unger: Hice el mapa de navegación del Ministerio de Salud utilizando el lenguaje visual de Jesse James Garrett. Elegí este sitio web por tratarse de una institución seria y, por ende, con contenido suficiente para poder trabajar. Sin embargo, el sitio tenía demasiado contenido accesorio, dificultando el acceso a los contenidos importantes, y por lo tanto, dificultando también su navegación.


  • CatalinaHörr: El mapa de navegación fue realizado en base al sitio web de Nutella. La elección del sitio fue por su contenido y la forma en que se organiza, ya que es en base a la visualización de productos generalmente a través de catálogos. El mapa no fue tan complejo de realizar, sólo que contenía mucha información, lo cual se tradujo en un mapa extenso en cuanto a contenido.


  • Santiago Comandary:El mapa de navegación hecho que se realizo fue a partir del sitio web de Coca-Cola. La elección del sitio se baso por la organización, contenido y visualización de la información dentro del sitio, la cual estaba enfocada en mostrar sus productos y la ubicación de sus sucursales dentro del país. También un punto importante dentro de la pagina era la jerarquía que se le daba a sus paginas dentro de las redes sociales, las cuales tomaron un predominancia dentro de la mayoria del sitio. Lo complejo de la contruccion del mapa fue mas que nada el como se vinculaban paginas externas sobre el sitio.


  • Martin Araneda : American apparel es una Marca de indumentaria norte americana que apunta a un público joven. La tienda se encuentra establecia físicamente en varias ciudades del mundo. El sitio web de la tienda abre una plataforma de compra online en donde todos sus poroductos son expuestos para los posibles compradores.El objetivo del sitio es vender sus productos. La necesidad de los usuarios es comprar, interactuando con el sitio a través de una pantalla, de la misma forma como si estuvieran visitando la tienda y observando los productos.
    1. El mapa de navegación fue construido con el vocabulario visual de Jesse James Garret, conjunto de símbolos básicos que sirven para diagramar arquitectura de la información y diseño de interacción.


  • Carlos Patricio Noriega Lecaros : Esta Entrega es la entrega del primer mapa de navegación como encargo, el mapa de navegación escogido fue el del sitio web de mcdonalds, el cual tiene como caracteristica principal ser una cadena mundial de comida rapida. El sitio web consta de mucha información de varios temas, por lo cual fue necesario licuar su información y organizarla de manera que sea de facil lecturabilidad para el usuario. Se utilizo el lenguaje visual de jjg como herramienta principal para la realización de este encargo.


  • Darío Tapia: El encargo fue elegir un sitio web para realizar una mapa de navegación. Esta primera instancia con el proceso de la arquitectura de información tenía por objetivo encontrarse con las herramientas y el método de organización de la información y contenidos en un sitio web. El sitio del Gobierno del Reino Unido constituye una buena primera experiencia de contacto, porque a primera vista; siendo un sitio representante de una entidad pública tiene la responsabilidad de cumplir ciertos objetivos, siendo el primer requisito representar al gobierno. Y el segundo; la cantidad de contenidos que un gobierno genera, tiene, la estructura de jerarquías, departamentos, leyes , etc; un desafío real y exigente que requiere el proceso mas concienzudo de discriminar datos ,etiquetar, ordenar y colocar la información , primero para ellos, y luego para un usuario que necesita hacer algo.

Al encontrarme con el sitio, la primera impresión tiene que ver la forma de mostrase visualmente, sin entrar mucho en análisis, puedo hablar de una proporción de texto/imagen cargada al texto. Esto es un dato importante porque dice de una intención de traspasar un contenido de forma clara; el sitio de algún modo pone una estructura de información a la vista, la información por sobre una interfaz transparente. A poco navegar en el sitio, otro criterio aparece, el de la reiteración. Los contenidos son anunciados y listados más de una vez en la home; aparecen dichos de una forma, luego de otra y otra. Un mismo contenido / página es aludido consecutivamente ; se apuesta a la capacidad de encontrabilidad de ese contenido.




  • José Castro González: Trabajé el sitio web de Kickstarter, el que plantea una nueva forma de financiar proyectos creativos grandes y pequeños creados por los usuarios que buscan el apoyo directo de patrocinadores. Para esto el sitio nos presenta diversas categorías en las que se nos van mostando los proyectos que esperan ser vistos (para que en el mejor de los casos sean financiados de a cantidades minimas que finalmente logran grandes cifras).

Al momento de analizar la estructura del sitio nos damos cuenta de que la clave de él está en la identificación de la acción que vienen a realizar los usuarios al sitio, que son el descubrir , el comenzar, y el buscar, mientras en un segundo plano se ofrece el registrar y el iniciar. Teniendo estos factores en cuenta se procede a la elaboración del mapa de navegación que revela la estructura del sitio.

Licuar Mapa de Navegación a móvil

Encargo

Sobre el Mapa de Navegación del sitio trabajado en la Tarea anterior (Levantamiento de Mapa de Navegación) licuar el contenido para aplicarlo en móviles. Se debe pensar desde lo móvil y las implicancias que tiene el escenario de uso de un aparato móvil, sus restricciones en el tamaño de la pantalla y los tiempos de uso que implican los mismos. Se analiza y trabaja sobre el criterio Mobile first de Luke Wroblewski.

Entregas

  • Catalinaortúzar: Trabajé el sitio web del diario La Tercera. Como su principal función es entregar las noticias de manera digital a las personas, opté por tomar las noticias y sus clasificaciones como prioridad, pues en un escenario móvil, en que el soporte es pequeño y el escenario inestable, las personas querrán navegar en el sitio para cumplir objetivos más precisos. De tal manera, se redujo el mapa de navegación. El mayor problema fue seleccionar el contenido necesario, porque el sitio web tenía mucha información.


  • Gabriela Rojas: Debido a mi trabajo anterior con el Museo Guggenheim de Bilbao, debí trabajar los contenidos de esta página para ser vistos desde un móvil. Lo primero fue determinar aquellos aspectos principales de los secundarios y accesorios desde el punto de vista del usuario, para así eliminar aquellos conceptos que no cumplían como esenciales ya que el soporte de lectura es limitado y las intenciones del usuario son más específicas. Razón por la cual el contenido del mapa se limita a actividades y visitas concretas, junto con información práctica y una mirada a las colecciones del museo.


  • EmilyZembo: Para realizar el licuado de contenidos del mapa anterior, tuve que decidir entre los términos, los que fueran mas importantes y relevantes para mi, discriminando según las funciones por las cuales las personas deciden entrar al sitio. Siendo una página de programas interculturales lo primordial era que las personas pudieran saber como postular a estos programas, poder acceder a testimonios y experiencias y saber los requisitos y beneficios que estos programas entregaban, sacando lo superfluo para que este fuera más efectivo, reduciéndolo a solo la información más práctica.


  • Catalina Perez: En base al trabajo anterior, realizado en el sitio de Arcor, esta vez se practicara el architect responsive, que consiste en la licuación del contenido original del sitio para un soporte móvil, determinando como criterios la relevancia del objetivo primordial del sitio, bajo en la mirada de un usuario quien entra en busca de su servicio principal.


  • Rafaela Avalos Pascual: Para el segundo encargo, se realizó un mapa del mismo sitio, pero esta vez utilizando el modelo “mobile first”, donde se trabajó sobre una información licuada, tomando lo básico y crítico del sitio. Se discriminó lo importante de lo accesorio, de forma que sólo apareciera la materia necesaria (desde el punto de vista de un usuario) en el sitio.


  • Antonella Pastén: Para este mapa de navegación se realizó una nueva indización para poder organizar y distribuir los conceptos de mejor manera, todo esto con el objetivo de mostrar como sería el mapa de navegación del sitio para un formato de smartphone (Mobile first). En este licuado se optó por eliminar aquello que estaba relacionado con el área de investigación del museo y todo aquello que estaba ligado a las afiliaciones o donaciones. Lo restante (MoMa, visitas, shop, entre otros) se mantuvo, sin embargo lo que ellas contenían fue acotado, eliminando conceptos que bajo mi percepción solo entorpecían la navegación desde un smartphone.


  • María Ignacia von Unger: En esta segunda tarea se utilizó el método “Mobile First” para hacer un nuevo mapa de navegación, ahora licuado, del sitio ya trabajado. Esto consistió en separar los contenidos importantes de los accesorios, para reducir la navegación a los requerimientos esenciales del sitio.


  • Ingrid Alvarado Paulus: En este segundo mapa de navegación se tomo por utilizar una nueva indizacion que optaba por el método Mobile First, por lo que solo se trajo lo mas importante y necesario en un sitio para móviles, los cuales realmente son esenciales para navegar de una forma fácil y útil.


  • CatalinaHörr: En esta segunda tarea se realizó el mapa de navegación para el mismo sitio, pero esta vez para móvil, por lo tanto se tuvo que licuar la información, dejando el contenido más importante para ser puesto en este nuevo mapa. De esta manera, se podría ingresar al sitio y hacer su navegación fácil y expedita.
  • Santiago Comandary:Esta segunda parte de la construcción de el mapa de navegación tuvimos que tomar la misma pagina web del encargo anterior, y según la base de indización de architec responsive se licuo la información hasta sintetizarla hasta la finalidad básica de la pagina ocupada, que en este caso era mostrar los productos de la empresa coca-cola de una manera útil, fácil y expedita dentro del sitio web movil.
  • Martín Araneda: El sitio web de American apparel también se adapta a una arquitectura responsive en donde se decide que contenidos se verán y cuales no en una pantalla de smart phone. mobile first El sitio web de american apparel tiene como objetivo general vender y exponer sus productos por medio de una plataforma digital en donde los posibles compradores puedan interactuar con los diferentes contenidos del sitio. El modelo de negocio es vender, por lo que la indumentaria que vende la marca será el primer contenido que se ubica dentro de la home. American apparel es una tienda que se ubica dentro de muchos lugares en el mundo por lo que el alcance cultural del sitio debe ser accesible para los distintos idiomas que puedan hablar sus clientes. Es por eso que el idioma se ubica en un segundo lugar dentro de la home. A pesar de que la finalidad del sitio sea generar una transacción, también debe especificar la dirección de las distintas tiendas que hay dentro del mundo. es por eso que la ubicación de las tiendas se pone en un último lugar.


  • Carlos Patricio Noriega Lecaros :En este segundo encargo se realizó un mapa del mismo sitio web, pero como requisito con estructura del modelo “mobile first”, Gracias a que mcdonalds tiene mucha informacion en su sitio necesariamente tube que licuar la informacion, al igual que en el primer encargo pero esta vez, elimine mucha mas informacion. En este mapa de navegacion se puede apreciar rapidamente la estructura del sitio al tener un tamaño mucho mas acotado y de menos niveles, ya que se elimina todo lo accesorio, de forma que sólo apareciera lo necesaria para el usurario del sitio.
  • Martín Guerra: En este segundo encargo se crea un liquado de los aspectos generales de la pagina dejando solo los aspectos utiles y específicos, necesarios en la orientación del usuario al navegar por el sitio.


  • Darío Tapia: El trabajo de ajustar el mapa de navegación del sitio de escritorio al sitio móvil, abre la posibilidad de re-evaluar contenidos, con el resultado de dejar de lado algunos ya sea por su especificidad, poca relevancia en escenario de uso móvil, poca importancia en la navegación de la página, etc. El sitio del gobierno ya contaba con un trabajo de arquitectura de información con una incidencia en el resultado final, que se vuelve claro de navegar, de acceder a los contenido, de poder devolverse en el mismo y saber ubicarse dentro del sitio; eso dice de una estructura llevada a su máximo rendimiento en transparencia y precisión.

Por lo tanto , no se dejó de lado ningún contendido, sino que se avanzo en poner en primera instancia los contenidos mas relevantes, trabajando así una estructura donde lo primero fuera dispuesto de forma clara y al avanzar en los siguientes niveles, se agregaran contenidos, y finalmente ocurriera la reiteración de algunos a modo de cierre, que tiene por fin asegurar la encontrabilidad de toda la información.


  • José Castro González: En base al mapa de navegación ya realizado del sitio de Kickstarter, realizamos un licuado de información, en el que se identificó que muchas páginas llegaban a lo mismo y por tanto se optó por reducir la cantidad de canales y formas para llegar a la información, por lo que así se muestran más y es más fácil llegar a los contenidos que son los proyectos de los usuarios.

Tarea Card Sorting

Grupo Nº1 Museo del Prado

Para confeccionar el mapa de navegación final del museo se pidió a 5 personas que realizarán su propio mapa de navegación con el sistema de card sorting, a partir de la indización de este mismo entregando las tarjetas con las etiquetas del sitio. Card sorting 3/08

Mapa1museo.jpeg Mapa2museo.jpeg Mapa3museo.jpeg Mapa4museo.jpeg

Reunión 14/08 Objetivos: comparar y analizar los diferentes mapas de navegación donde se identificaron los conceptos y su orden que más se reiteraban en cada mapa.

Proceso1museo.jpeg Proceso2museo.jpeg Proceso3museo.jpeg Proceso4museo.jpeg

Al compararlos se detectaron los conceptos más relevantes, eliminando los que no lograban articularse con el mapa; reafirmando cuales se eliminarían definitivamente y cuales cambiarían su nombre. Una vez terminada la indización nueva, se convocaron otras tres personas para que realizaran un nuevo y ultimo card sorting para corroborar que estuvieran bien filtrados los conceptos.

Proceso5museo.jpeg Proceso6museo.jpeg 300px Proceso8museo.jpeg

Una vez terminada la indización nueva, se convocaron otras tres personas para que realizaran un nuevo y ultimo card sorting para corroborar que estuvieran bien filtrados los conceptos.

300px 300px

Cardsortingf3.jpeg Cardsortingf4.jpeg

Luego de esto se procedió a la construcción del mapa de navegación para finalizar el proyecto. Archivo:Mapanavegacionmuseodelprado.pdf



Grupo Nº2: Musée d'Orsay

Este trabajo grupal consta de un ejercicio de Card Sorting para la realización de un mapa de navegación de un sitio web. El sitio elegido es el Musée d’Orsay, en Paris, Francia. Su función principal es la de informar de manera actualizada sobre eventos culturales que se llevan a cabo en el museo para los visitantes.

El método de Card Sorting se genera a partir de una primera indización realizada por el cliente, hecha en base a sus requerimientos principales. Posteriormente se citan posibles usuarios y se les entrega esta indización en forma de tarjetas de forma desordenada, para ordenarlas según su criterio para hacer eficiente la navegación del sitio. El usuario puede agregar o quitar tarjetas, en caso que encuentre necesario. Todo esto con el fin de observar la interacción entre el usuario y el sitio web.

En base a este ejercicio, en donde se reúne el estudio realizado en cada ordenamiento, se puede comenzar a estructurar un mapa de navegación.

300px

300px

300px

300px

300px

300px


Grupo Nº3 Victoria and Albert museum

  • Líder del Grupo: Martín Araneda.
  • Integrantes: Marcela Bravo, José Castro, Martín Guerra, Darío Tapia.

Sitio web: [4] El museo Victoria and Albert está ubicado en Londres, y es el museo de arte y diseño más grande del mundo, por lo que su sitio cuenta con contenidos referidos a su visita, colecciones, formar parte, aprendizaje (relación con escuelas y personas), exhibiciones y tienda, por lo que debe manejar hábilmente una gran cantidad de elementos .

En un primer momento cada integrante realiza el ejercicio de organizar los elementos provenientes de la indización del sitio web, utilizando el sistema de card sorting, el que nos permite inicialmente ordenar y disminuir o aumentar en algunos casos los contenidos del sitio, según se estime necesario.

IMG 1340.JPG IMG 1343.jpg IMG 1346.jpg IMG 1347.jpg

Luego de esto se comparan los resultados para identificar los errores de orden, los elementos que sirven y los que no, siempre en pos de lo que requiere el usuario. Como paso siguiente se procede al análisis, licuado (y por tanto concreción), organización y relación entre sí de los elementos, lo que da origen al mapa de navegación final que se rige a el vocabulario visual de Jesse James Garret, y que trata de ser lo más óptimo (y por tanto simple) posible.

Archivo:MapadeNavegaciónV&A.pdf


Grupo Nº4: Museo Reina Sofia’’'

Se inicia el proceso de Card Sorting con una indización realizada al sitio web del museo Reina Sofia, ubicado en Madrid, España. Una vez realizado esto, todos los puntos que se desprenden de la indización, se traducen en tarjetas individuales las que son ocupadas para, con la ayuda de terceros que toman el supuesto papel de usuarios del sitio, crear un mapa de navegación donde está recogida la opinión del usuario, las necesidades del cliente y el oficio del diseñador.