LC1 2015

De Casiopea
Revisión del 22:48 25 ago 2015 de Catalina.Mar (discusión | contribuciones) (Licuar Mapa de Navegación a móvil)



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, ÁlvaroReyes, Darío Tapia
Palabras Clavelenguaje computacional, arquitectura de la información, UX
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. 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.


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.

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: [3] 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