Diferencia entre revisiones de «Caso de estudio: MIT»

De Casiopea
 
(No se muestran 32 ediciones intermedias de 3 usuarios)
Línea 15: Línea 15:
=Presentación=
=Presentación=


==Massachusetts Institute of Technology==
En base al estudio del diseño centrado en las personas, se toma el caso de  '''Massachusetts Institute of Technology (MIT)''', universidad privada ubicada en Cambridge, Massachusetts en Estados Unidos.
El MIT se destaca por su gran aporte en temas de investigación, ciencia, ingeniería y educación tecnológica, teniendo como misión principal la de crear progreso y avances en dichas temáticas, mejorando el mundo del siglo XXI.


De esta manera, el estudio se divide en dos momentos: análisis del caso y prototipado.


=Análisis=
=Análisis=
Línea 37: Línea 39:
[[Archivo:Heurística - Usabilidad.pdf]] (199kb)
[[Archivo:Heurística - Usabilidad.pdf]] (199kb)


[[Archivo:VisualizaciónGeneralMIT Heurística.jpg|500px|center]]
[[Archivo:VisualizaciónGeneralMIT Heurística.jpg|800px|center]]


Se construye un documento a modo de ficha donde cada alumno analiza el sitio del MIT según el criterio heurístico. En él, se abarcan distintas áreas de estudio, desde su estructura, navegación, consistencia en conceptos y su identidad gráfica.
Se construye un documento a modo de ficha donde cada alumno analiza el sitio del MIT según el criterio heurístico. En él, se abarcan distintas áreas de estudio, desde su estructura, navegación, consistencia en conceptos y su identidad gráfica.
Línea 220: Línea 222:


'''1'''. Se hace click en la sección mapas. '''2'''. Existen dos evidencias de "información de aviso" para esperar a que la sección cargue. Uno es el mensaje "loading" en la parte superior de la interfaz. El otro es el mensaje "please wait, the bits are flowing slowly today", lo que ocupa el centro más visible de la pantalla. '''3'''. Finalmente el mapa carga sin problemas.
'''1'''. Se hace click en la sección mapas. '''2'''. Existen dos evidencias de "información de aviso" para esperar a que la sección cargue. Uno es el mensaje "loading" en la parte superior de la interfaz. El otro es el mensaje "please wait, the bits are flowing slowly today", lo que ocupa el centro más visible de la pantalla. '''3'''. Finalmente el mapa carga sin problemas.


==Personas y Escenarios==
==Personas y Escenarios==
Línea 334: Línea 335:
[[Archivo:Propuesta 2mapa.jpg|thumb|center|390px]]
[[Archivo:Propuesta 2mapa.jpg|thumb|center|390px]]


==Wireframe==
==Wireframes==


===Wireframe Colaborativo===
===Wireframe Colaborativo===
Línea 526: Línea 527:
Se decide realizar una serie de pruebas de usabilidad con 3 diferentes Arquetipos. El objetivo es poder testear la navegabilidad de los wireframes según el rotulado, los vínculos y las diagramaciones visuales construidas.
Se decide realizar una serie de pruebas de usabilidad con 3 diferentes Arquetipos. El objetivo es poder testear la navegabilidad de los wireframes según el rotulado, los vínculos y las diagramaciones visuales construidas.


<gallery>
Se utilizarán las mismas personas que formaron parte de "Wireframes Colaborativos", a excepción de la persona para el arquetipo II, quien es reemplazado por un nuevo usuario.
Archivo:Usuario1 mit.JPG|Prueba de Usabilidad: Arquetipo 1
 
Archivo:Usuario2.JPG|Prueba de Usabilidad: Arquetipo 2
[[Archivo:Camila Aranguiz.jpg|thumb|left|150px]]
</gallery>
'''Arquetipo II (Persona II)'''
* Nombre: Camila Aranguiz
* Edad: 21 años
* Ciudad de origen: Viña del mar, Chile
* Grado académico: Estudiante de IIº año, Ingenería informática en UTFSM
 
 
 
 
 




Para ésto se siguen los siguientes pasos:
Para ésto se siguen los siguientes pasos:
- Se construye una maqueta navegable en el sitio web en base a los wireframes propuestos (http://www.invisionapp.com)
- Se construye una maqueta navegable en el sitio web en base a los wireframes propuestos (http://www.invisionapp.com)


Línea 545: Línea 554:


- A modo de prueba, se decide realizar una prueba de navegabilidad con uno de los usuarios, donde se le pide realizar las mismas acciones anteriormente mencionadas en el sitio oficial del MIT.
- A modo de prueba, se decide realizar una prueba de navegabilidad con uno de los usuarios, donde se le pide realizar las mismas acciones anteriormente mencionadas en el sitio oficial del MIT.
<gallery>
Archivo:Usuario1 mit.JPG|Prueba de Usabilidad: Arquetipo 1
Archivo:Usuario2.JPG|Prueba de Usabilidad: Arquetipo 2
Archivo:Usuario3.png|Prueba de Usabilidad: Arquetipo 3
</gallery>
====Visualizaciones de datos obtenidos en la prueba de usabilidad====
=====Visualización tiempo=====
La siguiente visualización muestra el tiempo que le tomó a casa persona encontrar los elementos en la maqueta navegable de wireframes.
[[Archivo:visualizaciontiempomit3-03.png|800px]]
=====Visualización Comparación MIT y Propuesta Grupal=====
Camila no conocía el sitio del MIT, por lo que se le muestra y se le pide hacer las mismas tareas que en los wireframes navegables, esta información nos sirve para comparar los tiempos de encontrabilidad.
[[Archivo:Visualizacionmitvs-04.png|800px]]
=====Visualización Clicks antes de llegar al resultado=====
[[Archivo:Visualización Número de Clicks.png|800px]]


====Lectura de Resultados====
====Lectura de Resultados====
Línea 553: Línea 580:
#El número de clicks realizados
#El número de clicks realizados
#Comparación de tiempos según usuarios
#Comparación de tiempos según usuarios
De esta manera, en base al mapa de contenidos utilizado para la construcción de los wireframes, se muestran los distintos recorridos que usaron los tres usuarios para cada tarea. Utilizando recuadros en distintos grados de transparencia, a mayor intensidad refleja una sección más visitada. Así, se podrán observar los diferentes caminos para cada búsqueda, y de esta forma identificar los problemas en la navegación.


<gallery>
<gallery>
Línea 563: Línea 593:


===Propuesta Final===
===Propuesta Final===
Luego de realizar las pruebas de navegación junto con su análisis respectivo, se trabaja en base a la construcción de nuevos wireframes para el sitio. Para ello, se inicia por corregir el mapa de contenidos, solucionando los problemas de navegación.
====Mapa de Contenidos====
[[Archivo:Mapa contenidos PROPUESTA 2 (B)-01.jpg|center|500px]]
====Wireframes====
<gallery>
Archivo:HomeNouveau.fw.png| Wireframe Home
Archivo:Admission Graduate.png|Wireframe Admission Graduate
Archivo:LibrariesNouveau.png|Wireframe Sección Library
Archivo:Undergraduate AcademicsNouveau.png|Undergraduate Academics
</gallery>

Revisión actual - 21:01 14 ago 2013

TítuloCaso de estudio: MIT
Tipo de ProyectoProyecto de Curso
Palabras Claveusabilidad, wireframes, heurística
Período2013-2013
AsignaturaLC3 2013,
Del CursoLC3 2013,
CarrerasDiseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property.
Alumno(s)Nicole Arce, Paulina Buvinic, Carlos Chávez, Juan Antonio Godoy, Idar González
ProfesorJorge Barahona
URLhttp://www.mit.edu/


Presentación

En base al estudio del diseño centrado en las personas, se toma el caso de Massachusetts Institute of Technology (MIT), universidad privada ubicada en Cambridge, Massachusetts en Estados Unidos. El MIT se destaca por su gran aporte en temas de investigación, ciencia, ingeniería y educación tecnológica, teniendo como misión principal la de crear progreso y avances en dichas temáticas, mejorando el mundo del siglo XXI.

De esta manera, el estudio se divide en dos momentos: análisis del caso y prototipado.

Análisis

Estudio Heurístico

El sitio web se somete a un análisis heurístico, donde se comprueba el nivel de usabilidad y la consecuencia en su estructura e interfaz, todo en función del usuario y su navegación. De esta manera, se pueden obtener conclusiones que deberán ser tomadas en cuenta a la hora de proponer nuevas.

Desde el análisis, se desprenden rasgos y resultados que deberán ser tomados a la hora de proponer nuevas formas de diseño, pasando por la Arquitectura de información (Re-organización de contenidos y etiquetas), Layout (Disposición de elementos en el sitio web y sus pantallas) e Interfaz (consistencia gráfica, identidad y facilitación de lectura)


Archivo:Presentación Heurística Sitio MIT.pdf (14,38mb)

  • Pauta de estudio Heurístico

Archivo:Heurística - Usabilidad.pdf (199kb)

Se construye un documento a modo de ficha donde cada alumno analiza el sitio del MIT según el criterio heurístico. En él, se abarcan distintas áreas de estudio, desde su estructura, navegación, consistencia en conceptos y su identidad gráfica.

Durante cada tópico de estudio, se escogen puntos claves y se muestran los ejemplos fundamentando los resultados.

Generales


  • ¿Cuáles son los objetivos del sitio web?
  • ¿Es coherente el diseño general del sitio web?
  • ¿El sitio web se actualiza periódicamente?


Pregunta14.jpg

Observación pregunta 14: Los sitios carecen de unicidad gráfica variando éstos en su grilla y diagramación. Se conserva el logotipo de MIT, sin embargo éste se encuentra la mayoría de las veces en la parte inferior de la página.


Pregunta18.jpg

Observación pregunta 18: La sección de Noticias se actualiza diariamente. En algunas ocasiones, se actualiza más de un artículo diario.


Identidad de Información

  • ¿Se muestra claramente la identidad de la empresa-sitio a través de todas las páginas?
  • El logotipo, ¿Es significativo, identificable y suficientemente visible?


Pregunta23.jpg

Observación pregunta 23: La mínima construcción de indentidad se evidencia por la multiplicidad de normas gráficas para el header, donde las tipografías, los colores y la distribución de los elementos en el espacio gráfico varían independientemente unos de otros.


Pregunta25.jpg

Observación pregunta 25: Variaciones gráficas del logotipo de MIT presente en las diferentes secciones del sitio. Se observan cambios en las paletas de colores, tamaños y orientaciones de éste (MIT Music & Theather Arts).

Lenguaje y Redacción

  • ¿1 párrafo = 1 idea?


Pregunta46.jpg

Observación pregunta 46: Las noticias presentan el contenido por párrafos bien definidos. El blanco entre párrafos permite una correcta lectura de éstos. Por otro lado, hay una claridad en la redacción y la estructura de la misma.

Rotulado

  • ¿Utiliza un sistema de rotulado controlado y preciso?


Pregunta57.jpg

Observación pregunta 57: 1. Para comprobar la precisión de los rótulos con el contenido del sector al que dirigen, se rescata el enlace "contact" del Footer y se hace click para revisar el contenido. 2. Puede observarse que el título "Coment/Questions" en el encabezado de la página, no se condice con el rótulo del enlace "contact". Es por esto que el sistema se denota disfuncional. 3. Se procede a hacer click en el enlace "about our site", en el footer del sitio. 4. Se observa que el rótulo del enlace "about our site" nada tiene que ver con el título del encabezado.

Estructura y navegación

  • ¿Los enlaces son facilmente reconocibles como tales? ¿Su caracterización indica sus estados?
  • En menús de navegación, ¿Se ha controlado el número de elementos y de términos por elemento para no producir sobrecarga memorística?
  • ¿Existen elementos de navegación que orienten al usuario acerca de dónde está y cómo deshacer su navegación?
  • Las imágenes enlace, ¿Se reconocen como clicables? ¿Incluyen un atributo "title" describiendo la página de destino?


Pregunta70.jpg

Observación pregunta 70: Los enlaces se distinguen por medio de Hover, donde cambian de color. El otro modo encontrado es que entre un párrafo, difieren en color sin necesidad de interactuar con los vínculos sin pasar el cursor por encima. Aún así, al interactuar, vuelven a cambiar de color, además de agregarse el valor de underline.

Pregunta72.jpg

Observación pregunta 72: Existe una simplicidad de categorías en el menú de navegación, que a primera instancia, en el home, está de manera vertical, permitiendo mostrar sub-categorías. Mientras al acceder, el usuario se encuentra con las mismas categorías dispuestas de una manera horizontal, sin mostrar las subcategorías, ya que ellas se encuentran a modo de contenido.


Pregunta78.jpg

Observación pregunta 78: A pesar de que no existen Breadcumbs, donde se pueda tener claro la profundidad de navegación, sí existeun cambio en el menú de navegación, que marca en la categoría donde el usuario se encuentra actualmente.

Pregunta80.jpg

Observación pregunta 80: Las imágenes que redireccionan a otro lugar del sitio, no tienen el atributo de “Title”, por lo que no ofrece una descripción al posar el cursor por encima. El usuario reconoce que son imágenes cliqueables porque el cursor pasa de ser “flecha” a “mano”.

Layout de la página

  • ¿Se ha evitado la sobrecarga informativa?
  • ¿Se ha controlado la longitud de la página?


Pregunta91.jpg

Observación pregunta 91: En ambos ejemplos se muestra una densidad de contenido, donde existen múltiples vínculos. La solución podría darse a través de una mayor extensión vertical del sitio, entregando más blanco y por ende, reducir densidad en el espacio.

Pregunta101.jpg

Observación pregunta 101: La extensión vertical del sitio se ve con demasiadas variablas, a pesar de que cada contenido del sitio varía la extensión, sí podría tenerse en cuenta la variable menor, quizás dando más blanco y ajustando el footer al 100% del navegador.

Búsqueda

  • ¿Se encuentra fácilmente accesible?


Pregunta106.jpg

Observación pregunta 106: La herramienta de búsqueda se encuentra visible y de acceso directo. Se ubica transversalmente en la parte superior de la página.

Elementos y multimedia

  • ¿Las fotografías están bien recortadas?¿Son comprensibles?¿Se ha cuidado su resolución?


Pregunta121.jpg

Observación pregunta 121: Selección de imágenes extraídas del sitio web. Se caracterizan por la correcta utilización de éstas formando partes de menús o acompañando el texto principal. En el Home se observa la utilización de una imagen de fondo, la cual se actualiza periódicamente en relación a las noticias actualizadas.

Ayuda

  • En enlace a la sección ayuda, ¿Está colocado en una zona visible y "estándar"?
  • ¿Se ofrece ayuda contextual en tareas complejas?


Pregunta134.jpg

Observación pregunta 134: 1. Se procede a buscar la sección de ayuda en el "Buscador - MIT google". 2. Se hace click en el primer enlace de los resultados. 3. Finalmente se observa que la "sección de ayuda" pertenece a la dirección de un sitio ajeno al sitio oficial del MIT

Pregunta136.jpg

Observación pregunta 136: 1. Se introduce una palabra al azar en el "buscador" y se filtra en el modo "people". 2. El sitio de inmediato reconoce "información contextual" para dicha palabra y arroja resultados posibles. 3. Luego se introduce la misma palabra con el filtro en el modo "office" y se hace click en "Buscar". 4. Aparece un mensaje con una negativa en hallar resultados. Sin embargo, el sitio ofrece sugerencias para reanudar la búsqueda.

Accesibilidad

  • ¿Incluyen las imágenes atributos "alt" que describan su contenido?
  • ¿Se puede imprimir la página sin problemas?


Pregunta149.jpg

Observación pregunta 149: El atributo “Alt” sí está inscrito en cada imagen, asegurando el posible fallo de imagen y además asegurando aparecer como medidas a través de las palabras claves.

Pregunta157.jpg

Observación pregunta 157: 1. Se escoge una sección del sitio con información multimedia y variada. 2. Se procede a visualizar la plantilla para imprimir. 3. Inesperadamente, la plantilla del sitio no se visualiza correctamente. Este hecho no asegura que se pueda imprimir la página y que sea legible.

Control y Retroalimentación

  • ¿Se informa constantemente al usuario acerca de lo que está pasando?


Pregunta164.jpg

Observación pregunta 157: 1. Se hace click en la imagen de la noticia para aumentar su tamaño. 2. Mientras carga el tamaño, aparece un mensaje de espera simbolizado por barritas que dibujan un círculo y se alumbran en el sentido de las manecillas del reloj. El fondo se vuelve opaco por una capa de transparencia. 3. La etapa final es el aumento de tamaño en el marco de la imagen. 4. La imagen aparece con nitidez y con una descripción en la parte inferior del marco.

1. Se hace click en la sección mapas. 2. Existen dos evidencias de "información de aviso" para esperar a que la sección cargue. Uno es el mensaje "loading" en la parte superior de la interfaz. El otro es el mensaje "please wait, the bits are flowing slowly today", lo que ocupa el centro más visible de la pantalla. 3. Finalmente el mapa carga sin problemas.

Personas y Escenarios

Se procede a formular un proceso de "arquetipos" basado en la construcción de experiencias hipotéticas para cada uno y con respecto a la usabilidad de un sitio web. La descripción psicológica utilizada es un método cualitativo de estudio (complementario a la descripción demográfica: Cuantitativo) que radica en esbozar una realidad predecible y una circunstancia determinada, a través de una descripción y un escenario de uso. De esta manera, el diseño fundamenta su estructura interna (mapa de navegación) sobre las bases de dicho estudio, a caso, en este sentido, personalizando el diseño para cada arquetipo. Se entiende que el medio es el mensaje y por lo tanto el diseño debe estar centrado en el usuario, así como también el diseñador ha de facilitarlo luego de hacer evidente las conclusiones del proceso.

Arquetipo I

Susan Fredholm.png
  • Nombre: Susan Fredholm
  • Edad: 23 años
  • Ciudad de origen: Minnesota, EEUU
  • Grado académico: Pregrado

Descripción: Susan es una estudiante de Media Art and Science del MIT. Hace sus estudios e investigaciones en el laboratorio MediaLab, en el cual se encuentra trabajando en su proyecto de título, el que se basa en la fabricación de un robot que sea capaz de moverse en cualquier superficie. Para esto, a debido realizar estudios del comportamiento de insectos y de sus articulaciones en conjunto con alumnos de la carrera Computational System Biology de la misma univesidad.



Escenario de uso: Susan acuerda una reunión con sus colaboradores para el día lunes en la tarde. Para ello, debe buscar los horarios disponibles en MediaLab, para poder utilizar la maquinaria. Para ello, ingresa al sitio del MIT y se dirige inmediatamente al enlace labs+center ubicado en la barra lateral del Home. Una vez ahí, busca el laboratorio correspondiente a su carrera, lo cual se tarda algunos segundos debido al gran listado de laboratorios, pero lo encuentra ya que están ordenados alfabéticamente. Una vez en el sitio del laboratorio se dirige a la barra de navegación lateral, en la sección Students, para ingresar a su cuenta y así reservar una hora.

Recorrido del usuario

Arquetipo II

Catalina Claro.png
  • Nombre: Catalina Claro
  • Edad: 27 años
  • Ciudad de origen: Santiago, Chile
  • Grado académico: Titulada

Descripción: Catalina egresó de la Pontificie Universidad Católica de Chile, de la carrera de Ingeniería Civil Eléctrica. Actualmente trabaja como encargada de maquinaria en Chilectra y este año se decidió a postular al Magister de Electrical Engineering & Computer Science del MIT con el fin de ampliar sus conocimientos.





Escenario de uso: Catalina ingresa al sitio del MIT, y se redirige inmediatamente al enlace Admissions, para luego ingresar al sitio de Graduate, el que la lleva a una página externa. Una vez ahí busca las posibilidades de Master existentes, navegando a través de la barra de menú, en donde se encuentra con los programas y una sección para estudiantes extranjeros. Decide ingresar al vínculo Internacional Students Office, el cual se abre en una nueva ventana. Navega todos los menús de avegación, sin encontrar ninguna información relevante acerca de los programas. Debido a esto, opta por cerrar la nueva ventana y regresar al sitio Graduate Admissions. Ahí encuentra un link en la sección Programs, el cual la lleva al catálogo de cursos de Magister en una nueva ventana. Finalmente logra encontrar la información necesaria acerca del Magister.

Recorrido del usuario

Arquetipo III

Justin Graff.jpg
  • Nombre: Justin Graph
  • Edad: 17 años
  • Ciudad de origen: Massachusetts, EEUU
  • Grado académico: Estudiante


Descripción: Justin es un joven destacado en la escuela secundaria The Advent School, ubicada en Boston, Massachusetts. Su habilidad con los números lo ha situado entre los mejores de la clase para ciertas materias, como la física y las matemáticas. Sin embargo, los cursos humanistas nunca fueron su fuerte. Cuando realizaban exámenes en el salón, Justin era de los primeros en salir, ya fuera porque no tenía mucho qué decir sobre Las causas mediáticas de la Primera guerra mundial, o porque había devanado las ecuaciones de Trigonometría en pocos minutos. Desde pequeño tuvo afición por los juegos de armamento; a saber: piezas de Lego, figuritas de acción desarmables y estructuras de bloques. 



Escenario de uso: El padre de Justin es arquitecto y le ha sugerido ingresar al MIT para cursar dicha carrera, puesto que un colega suyo da clases en el instituto y asegura que el desarrollo académico es de preferencia. Sin embargo, Justin opta por leer las mallas curriculares de cada curso en el sitio web del instituto. Ambos se sientan al pie de la cama con el Notebook sobre las rodillas. Justin navega por la Home del MIT y hace click sobre el enlace “school+courses”, bajo el rótulo “education”. 




El sitio lo redirige a una lista de seis escuelas, varios programas y departamentos. Justin hace click sobre “escuela de ingeniería”. 




El sitio lo vincula con una dirección de ruta diferente. Justin se encuentra ahora en la Home de la Escuela de ingeniería, desde donde observa cuatro rótulos en la parte inferior del sitio. 



Por instinto inmediato, Justin hace click sobre “Education”. Este rótulo despliega la sección “Undergraduate”, con enlaces de cada Carrera del área de ingeniería. Había oído hablar sobre la Ingenería Mecánica, pero no estaba seguro sobre los cursos y materias de aplicación en la carrera, por lo que, algo curioso, hace click sobre el enlace para verificar la descripción.

Justin lee rápidamente, junto a su padre, y se lleva la sorpresa de lo ecléctico de las materias. Desde trabajar con “nanotecnología”, o proyectar diseños de robots en miniatura para fines de exploración extraterrestre, a la simulación numérica de tecnología 3D, entre muchas otras. Justin opta por buscar más información de la carrera. La idea lo ha entusiasma bastante. Cree que la escuela de ingeniería es, sin duda, su escuela. Y prestando atención a las sugerencias de su padre, cree que el MIT será también su instituto.

Recorrido del usuario

Prototipado

Arquitectura de Información

En una primera instancia se procede a realizar el mapa de Arquitectura de la información sobre el sitio oficial del MIT.

Arq de InfoMIT.jpg

Una vez realizado el ejercicio de estudio sobre "Personas y escenarios", se procede a re-formular el mapa de navegación para elaborar una segunda propuesta.

Propuesta 1mapa.jpg

Luego de realizar el estudio de "Wireframe colaborativo" con tres arquetipos de usuario diferentes en grado académico y edad, se procede a re-formular una vez más el mapa de navegación y se elabora una tercera propuesta.

Propuesta 2mapa.jpg

Wireframes

Wireframe Colaborativo

El proceso de Wireframe colaborativo consta de un estudio centrado específicamente en el usuario que utiliza los medios digitales para visitar un sitio web. Los ejercicios se realizan en conjunto; el diseñador es quien observa y el usuario es quien diseña según los parámetros de su experiencia particular. Los usuarios escogidos para trabajar en este proceso deben diferir en ciertas ambiciones personales, intereses, grado académico y edades. El objetivo es un estudio que arroje resultados para así, con posterioridad, formular el diseño teniendo en cuenta las estadísticas de una experiencia real. El trabajo está erigido sobre dos ejercicios fundamentales; a saber: Diseño de Wireframes y Card sorting (diseño en Arquitectura de información).

Arquetipo I

Oliver.jpg
  • Nombre: Oliver Aranguiz
  • Edad: 27 años
  • Ciudad de origen: Viña del mar, Chile
  • Grado académico: Estudiante de Ingenería Civil en UV.


Descripción: Oliver está cursando su último año de Universidad en Ingenería Civil. Una vez titulado se plantea seriamente erigir una empresa. Conocía de nombre el MIT, pero jamás ingresó al sitio web del mismo. 


Observaciones: Consideró importante la ubicación de los elementos. Su prioridad en el proceso de diseño radicó en el “cómo se accede”, la “búsqueda” y en lo que debiese contener el menú de navegación. Luego vinculó las noticias directamente con las redes sociales.



Wireframes


Arquetipo II

Cristian.JPG
  • Nombre: Cristian Morales
  • Edad: 27 años
  • Ciudad de origen: Viña del mar, Chile
  • Grado académico: Titulado de Ingenería informática en UTFSM


Descripción: Cristián Morales es titulado de la UTFSM en Ingenería informática del año 2012. Trabaja en una empresa de informática en Viña del mar. Conocía el MIT a través de modelos de examen implantados por el instituto en su propia universidad. Había oído hablar de que si querías buscar un curso o informarte sobre innovación, era imperativo entrar en el sitio y consultar el material. Sin embargo, él nunca se ha animó a hacerlo.

Observaciones: Considera importante una dividisión de momentos o instancias durante la navegación; a saber: Primero, los datos de contacto y un texto introductorio. Segundo, una sección de mero contenido de la página, el menú de navegación y las imágenes. Luego precisaba datos adicionales, datos económicos, noticias, eventos (calendario), etc.

Wireframes


Arquetipo III

Pedro.jpg
  • Nombre: Pedro Garretón
  • Edad: 26 años
  • Ciudad de origen: Viña del mar, Chile
  • Grado académico: Graduado en Diseño Industrial PUCV


Descripción: Pedro es titulado de la PUCV en Diseño de objetos hace cuatro años. Trabaja en el MadLab de la escuela de arquitectura y diseño de la misma universidad. En un futuro próximo ambiciona postular a un magister de Media arts & Science, mediante BecasChile. Su interés radica en el diseño desde la fabricación digital. Usualmente ingresa al sitio web del MIT para consultar información de los cursos impartidos y variedad de noticias.

Observaciones: No tuvo dificultad alguna en el proceso de diseño de Wireframes. Consideró el orden de los elementos de manera intuitiva. Le otorga importancia a la jerarquía en la barra de menú y a las noticias.

Wireframes


Análisis comparativo de Wireframes

Se estableció un criterio de comparación a nivel cromático para dar cuenta de los elementos de navegación en los diferentes formatos digitales; a saber: Elementos que se repiten, elementos que son desechados u otros que se integran según la personalización del usuario. Los colores en cada elemento otorgan una ayuda en cuanto a la evidencia visual de estas acciones.

Pantallas Móviles

Analisis Pantallas moviles.jpg

Pantallas Tabletas

Analisis Pantallas Tablet.jpg

Pantallas Desktop

Analisis Pantallas desktop.jpg

Observaciones concluyentes

Se puede evidenciar que existen elementos imperativos para los tres casos de usuario colaborativo. Los elementos de navegación transversales en todo caso, según formato, son los siguientes:

Pantallas Móviles

  • Logo
  • Buscador
  • Menú Navegación
  • Noticias
  • Redes sociales
  • Mapa de Ubicación
  • Footer

Pantallas tabletas

  • Logo
  • Buscador
  • Menú Navegación
  • Noticias
  • Redes sociales
  • Mapa de Ubicación
  • Calendario
  • Slideshow
  • Sidebar
  • Footer

Pantallas Desktop

  • Logo
  • Buscador
  • Menú Navegación
  • Noticias
  • Redes sociales
  • Mapa de Ubicación
  • Calendario
  • Slideshow
  • Sidebar
  • Datos económicos
  • Footer

Card Sorting

Se realiza un ejercicio Card sorting, en donde cada usuario establece un mapa sobre la Arquitectura de información más idónea para ellos. Los parámetros del resultado son tenidos en cuenta para re-formular el mapa de navegación sobre la propuesta del sitio. Dichos parámetros se incorporan con el mismo método de comparación cromática anterior.

Card Sorting comparativo.jpeg

Luego se extraen los conceptos y se ordenan según grado de importancia en la jerarquía del resultado:

Mayor importancia

  • SEARCH
  • EDUCATION
  • APPLY NOW
  • SITE MAP
  • HOME
  • ACADEMICS
  • ADMISSIONS
  • APPLY NOW

Mediana importancia

  • STUDENT
  • NEWS
  • STUDENT
  • FACULTY
  • RESEARCH
  • COMMUNITY

Menor importancia

  • EVENTS
  • LIFE AT MIT
  • NEWS

Propuesta Wireframes


Prueba de Navegación

Definición de Estructura de Prueba

Se decide realizar una serie de pruebas de usabilidad con 3 diferentes Arquetipos. El objetivo es poder testear la navegabilidad de los wireframes según el rotulado, los vínculos y las diagramaciones visuales construidas.

Se utilizarán las mismas personas que formaron parte de "Wireframes Colaborativos", a excepción de la persona para el arquetipo II, quien es reemplazado por un nuevo usuario.

Camila Aranguiz.jpg

Arquetipo II (Persona II)

  • Nombre: Camila Aranguiz
  • Edad: 21 años
  • Ciudad de origen: Viña del mar, Chile
  • Grado académico: Estudiante de IIº año, Ingenería informática en UTFSM




Para ésto se siguen los siguientes pasos: - Se construye una maqueta navegable en el sitio web en base a los wireframes propuestos (http://www.invisionapp.com)

- Tres usuarios se someten a 5 "Pruebas de Usabilidad", las cuales consisten de 5 acciones a realizar en la maqueta navegable. Los "tasks" definidos son los siguientes:

  • Encuentra las posibles residencias (Housing) para un undergraduate
  • Encontrar malla de la carrera Aeronautics y Astronautics
  • Encontrar Hayden Library (Ciencia y humanidades)
  • Encontrar información del postgrado Electrical Engineering
  • Buscar posibilidades de préstamos (Loans) para alumnos undergrad

- A modo de prueba, se decide realizar una prueba de navegabilidad con uno de los usuarios, donde se le pide realizar las mismas acciones anteriormente mencionadas en el sitio oficial del MIT.


Visualizaciones de datos obtenidos en la prueba de usabilidad

Visualización tiempo

La siguiente visualización muestra el tiempo que le tomó a casa persona encontrar los elementos en la maqueta navegable de wireframes. Visualizaciontiempomit3-03.png

Visualización Comparación MIT y Propuesta Grupal

Camila no conocía el sitio del MIT, por lo que se le muestra y se le pide hacer las mismas tareas que en los wireframes navegables, esta información nos sirve para comparar los tiempos de encontrabilidad. Visualizacionmitvs-04.png

Visualización Clicks antes de llegar al resultado

Archivo:Visualización Número de Clicks.png

Lectura de Resultados

Las pruebas de usabilidad son registrados en función de tres ejes:

  1. El rotulado y los contenidos elegidos por cada usuario al momento de navegar el sitio.
  2. El número de clicks realizados
  3. Comparación de tiempos según usuarios


De esta manera, en base al mapa de contenidos utilizado para la construcción de los wireframes, se muestran los distintos recorridos que usaron los tres usuarios para cada tarea. Utilizando recuadros en distintos grados de transparencia, a mayor intensidad refleja una sección más visitada. Así, se podrán observar los diferentes caminos para cada búsqueda, y de esta forma identificar los problemas en la navegación.

Propuesta Final

Luego de realizar las pruebas de navegación junto con su análisis respectivo, se trabaja en base a la construcción de nuevos wireframes para el sitio. Para ello, se inicia por corregir el mapa de contenidos, solucionando los problemas de navegación.

Mapa de Contenidos

Mapa contenidos PROPUESTA 2 (B)-01.jpg

Wireframes