Sitio MADLAB: Documentación Título II

De Casiopea


MADLAB-logofinal.png
TítuloSitio MADLAB: Documentación Título II
Tipo de ProyectoProyecto de Titulación
Palabras Clavemadlab, sitio web, documentación, diseño web
Período2013-2013
Del CursoTaller de Diseño Gráfico Titulación 2
CarrerasDiseño Gráfico
Alumno(s)Caterina Da Silva
ProfesorSylvia Arriagada
URLhttp://wiki.ead.pucv.cl/index.php/MADLAB

Gestión

"Gantter es un servicio web gratuito con el que podremos realizar la planificación de nuestros proyectos y generar un diagrama de Gantt."

Utilizando esta aplicación, realizo un diagrama de Gantt para organizar las correspondientes tareas a cumplir este trimestre.

740px

Contexto

Objetivos del Proyecto

Objetivo principal

  • Diseño del sitio web del MADLAB.

Objetivos secundarios

  • Sitio responsivo para iMac
  • Refinación del logo

Arquitectura de la Información

Mapa de navegación

Basándome en el vocabulario visual de Jesse James Garret [1], actualizo el mapa de navegación según lo estudiado este trimestre.

El mapa actual muestra una mejora en la jerarquía y limpieza sobre la información, se establece una mejor interrelación entre las páginas dentro del sitio.

740px

NOTAS

  • A. Si está el usuario en sesión, la función “Cerrar sesión” está disponible.
  • B. Si el usuario no está en sesión, no mostrar.
  • C. Si el usuario está en sesión, poner “Preferencias”. Si no, poner “Iniciar sesión” y “Registrarse”.
  • D. Si el usuario está en sesión, dirigir a página “Publicar proyecto”/ “Reservar máquina”. Si no, redirigir a “Iniciar sesión”.
  • E. Sólo si el usuario está en sesión.
  • F. Sólo si el usuario está en sesión y es “Admin”.
  • G. Mostrar links a Proyectos según los criterios de búsqueda.
  • H. Mostrar links a Proyectos, Perfiles de usuario y Eventos que contengan el criterio de búsqueda.
  • I. Mostrar links a Eventos según antigüedad ascendente.
  • J. Al hacer click en una sección del Calendario.

Mapa de clases

Actualización del mapa de clases a los estudios actuales, basándome en el nuevo mapa de la arquitectura de la información.

MADLAB-ArqdelaInfo-MapaClases-02.png

Diseño de interacción

Se cruzan la siguientes referencias:

A partir de ellas se da la pauta poética para encontrar el vacío y el puente para el logo: cómo, dentro de un marco de referencia, se da un espacio a la interrupción. De esta manera, se sugieren dos variantes: una versión armada ilógicamente, y otra, de manera sincopada.

Con la ayuda de una herramienta de dibujo isométrico, me doy cuenta que puedo agregarle la tercera dimensión al logo, dándole un lenguaje más conciso para el juego que se quiere crear para la sigla MAD. Luego de varias pruebas y cambios, se resuelve el siguiente logo.

MADLAB-logofinal.png

Para MAD, decidí tomar los conceptos de vóxel y el trabajo de la máquina REPRAP, la cual es aditiva de material. Por esta razón, la tipografía en píxel creada a partir de la DinPRO, y la extrusión en 3D simulada en un hexágono. Creando así las tres letras, considerando el espacio tridimensional de las letras, uniendo los hexágonos por cualquiera de sus 6 caras simuladas.

Para LAB, se modifica la DinPRO para que tome el concepto de la Láser CNC calando una superficie.

740px En la imagen: Superposición de los tipos modificados sobre DINPro Medium.

Galería de pruebas

Todas las variables creadas antes de llegar al logo finalizado.

Landing Page

A raíz de la Inauguración del MADLAB, es necesaria la creación de una Landing page para el dominio madlab.cl.

Propuesta

Básicamente, se requería de una página que tuviera links a:

  • Proyecto en la WikiCasiopea
  • Correo de contacto
  • Sitio de la Escuela

Y me dí la libertad de agregar un link a la página de Desarrollo del sitio en la WikiCasiopea.

Diseño de Interfaz

Buscando crear contraste e intriga con respecto al sitio, me inclino por un fondo negro con letras blancas. El fondo tiene una grilla isométrica que trae tridimensionalidad a la pantalla.

Screenshots de la Landing Page

A medida que voy construyendo el sitio, creo que el contraste del fondo negro es demasiado fuerte y no genera nada nuevo al usuario, por lo que me guío por los colores tradicionales de la escuela (blanco, negro, gris y rojo ciruela). De esta manera, se genera un enlace visual con la Escuela. A su vez, cambio el fondo por una grilla que tiende al rojo, que hace más sutil el contraste con el blanco del logo, dando una impresión de estar apareciendo.

Diseño emocional

Para hacer la página, utilizo los siguientes recursos:

graphy
  • Tipografía: utilizo la fuente Roboto desde FontSquirrel.
MADLAB-Propuesta-Landing page-Roboto1.png
MADLAB-Propuesta-Landing page-Roboto2.png

Sitio MADLAB

Prototipado

Habiendo sentado las bases conceptuales del sitio, comienzo a darle estructura visual. De esta manera, se va generando necesidad de contenido y diferentes maneras de orden a la información. Asimismo, surge la necesidad de darle movilidad, comodidad y simpleza al sitio. Para ello, recurro al Flat Design, el cual trabaja con formas simples y geométricas para dar realce al contenido y la interacción del usuario con el sitio.

Wireframes de Baja intensidad, Segunda versión

Wireframes de Alta intensidad

Los wireframes de alta intensidad completan los detalles que faltan en sus predecesores más simples. Definen la ponderación y la jerarquía visual de la página, su forma y sus elementos de interacción, incluyen etiquetas y texto informativo. Se pueden utilizar en secuencia para mostrar cómo una tarea específica puede llevarse a cabo en una secuencia de pantallas. Siempre deben aspirar a definir los detalles del producto y de interacción, deben proporcionar una visualización bastante clara de una aplicación o sitio para permitir a los desarrolladores comenzar su trabajo.


Diseño de Interfaz

Teniendo ya una visión general del sitio con los wireframes anteriores, doy paso a crear maquetas de cada página del sitio en Illustrator, para luego realizar la maqueta navegable en Fireworks.

Primera versión

Siguiendo lo realizado en los wireframes de alta intensidad, les agrego color y corrijo errores de medidas y espacios blancos, enfocándome en las páginas que requieren de más trabajo y pensamiento jerárquico.

Sidebar: Asimismo, diseño la interacción con la sidebar en su máxima expresión, donde se puede realizar la búsqueda avanzada de proyectos dentro del sitio. Cada opción es un conjunto de categorías que permiten la diferenciación de los proyectos. De esta manera, buscar un tipo de proyecto en específico se vuelve más fácil para el usuario.

Segunda versión

Con una idea visual más clara del sitio, surgen nuevas maneras de presentar los contenidos de manera más interactiva y visual al usuario. Buscando apelar a su lado emocional, la página debe resultar lo suficientemente atractiva para que los usuarios quieran volver a ella, potenciando al contenido del sitio. [2]

Maqueta navegable sitio MADLAB.cl versión 2

Sidebar:

Diseño emocional del sitio

"Las cosas atractivas funcionan mejor" nos dice Donald Norman[3]. Es por esta razón que la página debe ser interactiva e innovadora para el usuario. Que el juego, sin interrumpir u opacar el mensaje, llame al usuario a ser partícipe de él.

Tipografía

Una manera de agilizar el uso del sitio, es usar web fonts. Éstas permiten a los diseñadores web utilizar fuentes que no están instaladas en el computador del usuario, siendo Google Fonts uno de los servicios más usados.

Para el sitio MADLAB utilizo la siguiente colección.



Textura

Para la textura del sitio, vuelvo a utilizar graphy de Subtle Patterns.

graphy

Color

Los grises son indispensables para contruir los contrastes dentro del sitio, principalmente en la tipografía, ya que el realce se le da con los colores. Éstos fueron elegidos de Flat UI Colors, una aplicación que disponibiliza la paleta de colores del framework Flat UI.

Los grises consisten en:

  • Clouds (#ecf0f1)
  • Silver (#bdc3c7)
  • Concrete (#95a5a6)
  • Grr-ey (#333333)

Cada color representa un tipo de proyecto:

  • Sunflower (#f1c40f): Proyectos de post-grado
  • Turquoise (#1abc9c): Proyectos de pre-grado
  • Belize Hole (#2980b9): Investigación académica
  • Amethist (#9b59b6): Proyectos externos
  • Pumpkin (#D35400): Proyectos de título

Íconos

Dripicons es una tipografía de íconos vectorizados gratuita, creada en Fontastic. Ésta permite el uso de íconos sin depender de muchas imágenes o el uso de sprites.

Usabilidad

"Las pruebas de usabilidad consisten en seleccionar a un grupo de usuarios de una aplicación y solicitarles que lleven a cabo las tareas para las cuales fue diseñada, en tanto el equipo de diseño, desarrollo y otros involucrados toman nota de la interacción, particularmente de los errores y dificultades con las que se encuentren los usuarios.'

La meta de estas pruebas y análisis es identificar y rectificar las deficiencias de usabilidad y errores existentes. Se intenta asegurar que el sitio sea fácil de aprender y de usar, su uso sea satisfactorio, que provea utilidad y funcionalidad y cumpla las tareas para las cuales fue diseñado.

Pruebas de Usuario

"Las pruebas de usuario son un test que entrega una medida empírica de la usabilidad de una herramienta, sitio o aplicación, tomada a partir de la observación sistemática de usuarios llevando a cabo tareas reales, las cuales se enfocan en medir la manera en que el usuario se relaciona con las interfaces ofrecidas por el sitio web en estudio y en su capacidad para cumplir con las metas que haya tenido al momento de visitarlo."

  • Tarea uno: Encontrar el proyecto "Prototipos título 2: Observatorio buscador de constelaciones".
  • Tarea dos: A través de la página "Personas", ir al perfil de Pedro Garretón.
  • Tarea tres: Hacer una reserva de una de las máquinas.
  • Tarea cuatro: Publicar un nuevo proyecto.
  • Tarea cinco: Enviar un correo de contacto al equipo del MADLAB.

Estos test se realizan según tareas, que por lo general son completamente guiadas, paso a paso. Pero preferí pedirle a los usuarios, tareas que podían realizarse a través de distintas acciones para llegar todas a un mismo fin. De esta manera, no sólo obtenía datos empíricos sino que además datos conductuales de las persona.

El fin de la primera prueba es averiguar de qué manera las personas encuentran un determinado objeto dentro del sitio, además de saber cuánto se demoran en realizar aquella acción. En la segunda tarea, tuve que decirles en dónde debían iniciar su búsqueda, ya que al ser una maqueta navegable realizada en Fireworks, ésta consistía en pantallazos hipervinculados, por lo que no había manera de escribir en el buscador para poder utilizar esa vía. Asimismo, podría ver como los usuarios interactuaban con la "infografía interactiva" que se encuentra en esa página. Para las tres pruebas siguientes, sólo les di la indicación para saber el tiempo que se tomaban para encontrar los elementos de hipervínculo.

Creo también que es importante considerar en la interpretación de los resultados el lugar donde se encuentra el usuario, para poder hacer una comparación de los lugares en los que se ocupa el sitio.

Resultados

Tarea Staff ExAlumno Alumna Profesional cercano Profesional externo
Lugar
  • MADLAB
  • MADLAB
  • Cafetería
  • MADLAB
  • Casa
Tarea uno
  • 8 segs
  • 6 segs
  • 9 segs
  • 58 segs
  • 18 segs
Tarea dos
  • 3 segs
  • 7 segs
  • 3 segs
  • 12 segs
  • 17 segs
Tarea tres
  • 26 segs
  • 19 segs
  • 35 segs
  • 8 segs
  • 10 segs
Tarea cuatro
  • 10 segs
  • 4 segs
  • 5 segs
  • 7 segs
  • 15 segs
Tarea cinco
  • 9 segs
  • 7 segs
  • 15 segs
  • 35 segs
  • 21 segs

Comparación de tiempos

MADLAB-usabilidad-pruebausuarios.png

Observaciones:

  • Tarea uno: Tres de los usuarios encuentran el proyecto en la home, mientras uno lo encuentra en la página "Proyectos", y el otro, a través del buscador.
  • Tarea dos: Sin observaciones.
  • Tarea tres: Todos los usuarios tienen dificultad para encontrar el botón para reservar máquinas. Se dirigen primero a "Máquinas" antes de hallar el botón correcto.
  • Tarea cuatro: Al igual que en la tarea anterior, se dirigen a "Proyectos" antes que ha "Publicar Proyecto".
  • Tarea cinco: Para contactarse con el Staff del MADLAB, dos personas se dirigieron a "Personas" para enviar un correo; el resto, encontró el botón en el footer.

Interpretación de datos

La primera tarea consiste en buscar un proyecto realizado en el MADLAB, éste puede ser encontrado de tres maneras:

  1. En el Home, como Proyecto Reciente
  2. En el Buscador, como Resultado de búsqueda
  3. En la página de Proyectos

Todas estas posibilidades fueron realizadas por los usuarios, siendo el usuario profesional cercano al MADLAB el que más tiempo demoró en encontrarlo, ya que tuvo problemas para manejar el computador usado en la prueba. El tiempo promedio fue de 19.8 segundos.

La segunda tarea era más simple, ya que consiste en ver cómo los usuarios se relacionan con una manera distinta de visualización de las personas en el MADLAB. El promedio fue de 8.6 segundos, y el usuario que más demoró fue el profesional externo con 17 segundos en la prueba.

En la tercera y cuarta tarea, existen dificultades para acceder a la página solicitada, pero se nota un aprendizaje de la interfaz propuesta. La tercera prueba consiste en "Reservar una máquina" y tiene un promedio de 19.6 segundos; la cuarta consiste en "Publicar un proyecto", botón que se encuentra al lado de la reserva de máquinas, baja el promedio a 8.2 segundos.

Para la quinta prueba, además de medir el tiempo, que fue de 17.4 segundos en promedio, quería nuevamente ver qué camino tomaba la gente para llegar al mismo contenido, que era la página de contacto con el Staff. Los dos caminos viables eran a través del footer y de la página de "Personas", siendo ambos ocupados.

A raíz de estas observaciones, creo que es necesario buscar una manera que las acciones de "Reservar máquina" y "Publicar proyecto" queden igual de llamativas en jerarquía visual que los links a "Máquinas" y "Proyectos", así mismo con los links en el footer.

Evaluación Heurística

La evaluación heurística es un análisis de experto en el cual se hace una inspección minuciosa a interfaces o sistemas con el fin de determinar si cada uno de sus elementos se adhieren o no a los principios de usabilidad, diseño o arquitectura de información comúnmente aceptados en sus respectivas disciplinas.[4]

Para validar el diseño de la interfaz de usuario del sitio, realizo el siguiente Análisis Heurístico, el cual tiene por finalidad el que pares expertos evalúen el sitio en desarrollo respondiendo preguntas en distintos ámbitos para detectar fallas que para los usuarios no son evidentes, pero los ayuda a navegar mejor el sitio.

Resultados

Según pregunta

Según categoría de preguntas

MADLAB-usabilidad-Heuristica-11.png

Aprobación general del sitio

MADLAB-usabilidad-Heuristica-12.png

Análisis de Datos

Preguntas generales Hay cierta dubitación de parte de los expertos para encontrar concordancia de la interfaz con los servicios del sitio web y los usuarios.

Identidad e información Encuentran que el logo es poco visible, que el link a "Desarrollo del sitio" tampoco lo es, y no se entrega información sobre la protección de los datos personales.

Lenguaje y redacción No hayan problemas.

Rotulado Ha pesar de que es aprobado por la mayoría, hay quienes dicen que los títulos y nombres usados para marcar los elementos no son los mejores.

Estructura y navegación Algo que destaca de esta sección es el hecho que no existe una guía visual para que el usuario sepa dónde está dentro del sitio.

Lay-out de la página Para los expertos no existe bastante blanco para la harmonía de la página, y que no siempre se respeta la disposición del espacio visual.

Búsqueda Los expertos coinciden en que la caja de búsqueda no es lo suficientemente ancha, y que la página de "Resultados de búsqueda" no es clara ni ayuda al usuario a intentarlo nuevamente.

Elementos multimedia No hay problemas según los expertos.

Accesibilidad Hay algunos pequeños problemas para los expertos en cuanto a la lecturabilidad de la letra dentro del sitio. Al parecer, es un poco pequeña, por lo que el contraste no es lo suficientemente fuerte para ser cómodo.

Control y retroalimentación Según los expertos, el sitio no está constantemente informando a los usuarios sobre lo que está ocurriendo, ni entrega maneras de solucionar algún problema que pueda surgir.

Cambios según resultados

Gracias a la ejecución de ambas pruebas al diseño de interfaz del sitio MADLAB, sobresalen las siguientes correcciones:

  • Mantener la jerarquía visual según la grilla propuesta
  • Dar más blanco a las páginas
  • Contrastar la tipografía y los fondos
  • Guiar de manera visual al usuario para ubicarlo dentro del sitio
  • Mejorar la página de "Resultados de búsqueda"
  • Cambiar la manera de mostrar el menú interactivo para que quede más reconocible
  • Aumentar el contraste tipográfico con el fondo de los menúes en el footer
  • Integrar más diálogo entre el usuario y el sitio

Otros aspectos que se deben mejorar:

  • Integración de redes sociales (Facebook, Twitter, Instagram y Foursquare)
  • Mejorar la interfaz de los formularios
  • Cuidar el uso de íconos para que concuerden con la fineza de la tipografía
  • Suavizar la grilla de fondo para que no genere ruido visual
  • Crear el contraste tipográfico con diferencia de tamaño y no con grosor de la letra (mantenerlas en Light y Ultra Light)
  • Jugar un poco más con las transparencias de los bloques de color

Adláteres

Referencias

  1. El año 2002, Jesse James Garret creó una manera estandarizada para describir arquitectura de información y diseño de interacción de cualquier sitio web y aplicación. Éste se encuentra disponible en su sitio web.
  2. http://www.usability.gov/what-and-why/user-interface-design.html
  3. Podemos leer más sobre diseño emocional en el siguiente ensayo:"Diseño_Emocional:_Metodologías_y_herramientas_para_cuantificar_emociones" y algunos ejemplos en el siguiente artículo
  4. Las preguntas para el análisis heurístico fueron tomadas de la siguiente Guía de Evaluación Heurística de Sitios Web de Yusef Hassan Montero y Francisco Martín Fernández, basándose en el trabajo de Jakob Nielsen.

Colofón

La construcción del sitio web para MADLAB es el proyecto de titulación de la alumna Caterina Da Silva Arriagada, bajo la guía de la profesora Sylvia Arriagada Cordero. En el desarrollo de esta plataforma cooperaron los profesores de Diseño Gráfico Herbert Spencer y Katherine Exss; Jaime Pérez Moena, ayudante del taller de Tercer Año de Diseño Gráfico; Joaquín Martel, egresado de Diseño Gráfico el año 2012; y el encargado del MADLAB, Pedro Garretón.

La presente edición fue realizada en diciembre del 2013 en Adobe InDesign CS6 y Adobe Illustrator CS6 para Mac OS X. Consta de un ejemplar correspondiente al registro entre las fechas comprendidas entre Marzo y Mayo del 2013 para el período de Titulación 1, y Septiembre y Diciembre del 2013 para el período de Titulación 2.

Su formato es de 15 x 21,6 cms. El papel para la portada es Hilado 180 con una cobertura plástica, y fue impreso en una HP Designjet 110plus, y el interior, compuesto por Prestige blanco terrazo de 90 grs y papel Kraft opaco de 170 grs, fue impreso en una Epson XP-201.

Las familias tipográficas utilizadas fueron Source Sans Pro, Source Code Pro y Varela Round, todas disponibles en Google Fonts.

Los colores usados fueron:

  • color verde: C:73, M:0, Y:52, K:0
  • color morado: C:46, M:76, Y:0, K:0
  • color azul: C:81, M:42, Y:6, K:0
  • color amarillo: C:6, M:21, Y:100, K:0
  • color rojo: C:16, M:92, Y90, K:5
  • gris claro: C:26 M:17, Y:17, K:0
  • gris oscuro: C:53 M:37, Y:40, K:4
  • negro: C:69 M:63, Y:62, K:58

El ejemplar fue impreso el 13 de Diciembre del 2013 en la Escuela de Arquitectura y Diseño de la Pontificia Universidad Católica de Valparaíso.