Publicado por

PEC5 – Arquitectura de la Información: Prototipado y síntesis del proyecto.

PEC5 – Arquitectura de la Información: Prototipado y síntesis del proyecto.
Publicado por

PEC5 – Arquitectura de la Información: Prototipado y síntesis del proyecto.

A partir de las fases anteriores y basando el diseño en los bocetos presentados en las siguientes páginas, se ha desarrollado un…
A partir de las fases anteriores y basando el diseño en los bocetos presentados en las siguientes páginas, se…

A partir de las fases anteriores y basando el diseño en los bocetos presentados en las siguientes páginas, se ha desarrollado un wireframe de baja fidelidad del sitio. No obstante, a pesar de ser de baja fidelidad y no incluir ni colores, ni imágenes, ni contenido, se han decidido añadir algunos textos o iconos relevantes para clarificar mejor la función de cada una de las pantallas y se pueda llevar a cabo una mejor evaluación de la Arquitectura de la Información y la navegación de la app.

De esta manera se puede comprobar que el diseño del sistema cumple con los objetivos fijados al comienzo de este proyecto y se puede garantizar una buena experiencia por parte del usuario. Además, esto servirá de base en el futuro cuando se empiece con la parte de diseño UI como tal. También es especialmente útil para identificar caminos mejorables del usuario o navegación entre las distintas pantallas de contenido.

Pese a que el prototipo es interactivo y se puede visitar en la web de Figma como se indica en el enlace que hay justo al terminar los prototipos, se ha decidido incluir un punto colorido en cada una de las pantallas como simulación de los pasos del usuario para facilitar la evaluación.

A la hora de elegir la forma de presentar la información y de su accesibilidad o tamaño en la proporción de la pantalla, se ha tenido en cuenta su nivel en el árbol de contenido definido anteriormente así como la importancia de esa funcionalidad con respecto a los objetivos.

Uno de los escenarios modelados en este prototipo interactivo es el que se muestra a continuación sobre la consulta de programación y la compra de entradas por parte del usuario.

El prototipo diseñado para este escenario en concreto es el que se puede ver a continuación.

A continuación se puede consultar el prototipo interactivo siguiendo el siguiente enlace:

https://www.figma.com/file/70HgyRq8UWDfX5cw5Rd5On/MUTEK-prototype?node-id=0%3A1

Una vez que tenemos el prototipo, se pueden llevar a cabo muchos análisis mucho más exahustivos que con otras opciones menos tangibles. El usuario tiene algo con lo que puede “jugar” y es más sencillo observar sus pasos ante una posible interacción con la aplicación sin necesidad de haber invertido una gran cantidad de dinero en el diseño definitivo. De esta forma, una vez se haga la implementación del diseño, será con unos pilares mucho más seguros.

 

 

Debate0en PEC5 – Arquitectura de la Información: Prototipado y síntesis del proyecto.

No hay comentarios.

Publicado por

PEC 4 – Arquitectura de Información – Diseño de Navegación

Publicado por

PEC 4 – Arquitectura de Información – Diseño de Navegación

Dado que en el mercado actual está prácticamente todo inventado, se pueden comparar sistemas parecidos al que se pretende implementar para tener…
Dado que en el mercado actual está prácticamente todo inventado, se pueden comparar sistemas parecidos al que se pretende…

Dado que en el mercado actual está prácticamente todo inventado, se pueden comparar sistemas parecidos al que se pretende implementar para tener referencias de cómo se llevan a cabo las principales funciones en algunas webs ya conocidas. De esta forma se puede analizar si el sistema objetivo se parece a lo que ya existe o, por el contrario, no sigue el estándar ya establecido y se diferencia de otras aplicaciones.

Para ello se han seleccionado dos festivales con página web y opción de compra de entradas. Se ha establecido un escenario estándar para simular el comportamiento de un usuario. En este escenario el usuario realizar un total de tres acciones siempre que sea posible: primero consulta la programación del festival, después adquiere la entrada que más le interesa y finalmente comprueba que la entrada se ha adquirido de forma correcta.

Los dos festivales elegidos son el Primavera Sound y el Mad Cool Festival, de los que se hará una breve introducción a continuación, incluyendo los enlaces pertinentes.

Primavera Sound

Primavera Sound es un festival de música que se celebra entre finales de mayo y principios de junio en Barcelona. Su primera edición tuvo lugar en el 2001 en el Pueblo Español y desde el 2005 tiene su sede en el Parque del Fórum, un recinto más grande y al lado del mar.

https://www.primaverasound.com/es

Mad Cool Festival

Mad Cool es un festival de música que se realiza en Madrid desde el año 2016. El arte, la moda, la gastronomía y el turismo se unen eclécticamente en este festival. La última edición, del año 2020, fue cancelada debido a la pandemia del COVID-19.

https://madcoolfestival.es/

 

COMPARATIVA HEURÍSTICA DE NIELSEN

Basándonos en los Principios Heurísticos de Nielsen, podemos evaluar ambas webs teniendo en cuenta si cumplen con las directrices o no. Posteriormente a la tabla, se incluirá una pequeña reflexión de por qué se ha llegado a la conclusión de que las webs cumplen o no con cada uno de esos principios.

Justificación de la tabla de evaluación heurística según Nielsen

 

A continuación, se pasará a exponer el por qué se ha considerado que cada sistema cumple o no con los diez principios establecidos por Nielsen.

  • Visibilidad: Ninguno de los sistemas hace uso de las conocidas “migas de pan”, ni muestran barras de progreso o indicadores de carga, por lo que el usuario no conoce en muchas ocasiones el estado del sistema.
  • Coincidencia: Para la información de la planificación, ambos sistemas hacen uso del diseño del cartel del festival como si fuese en papel. Además, utilizan iconos parecidos a las entradas para indicar el término.
  • Control y libertad: En el caso del Primavera Sound sí que es fácil retroceder o saltar entre varias opciones del menú, sin embargo, en el Mad Cool es necesario terminar muchos procedimientos o simplemente incluso cerrar la página puesto que el menú principal deja de ser visible.
  • Consistencia y estándares: No siguen ningún tipo de consistencia especialmente visual entre muchas de sus opciones del menú, especialmente porque ambas implican la redirección a otros sistemas de terceros, lo que puede hacer al usuario desconfiar.
  • Prevención: En ambos casos se previene al usuario de realizar una compra indeseada permitiéndole siempre comprobar los datos y haciendo inaccesibles las opciones que no están disponibles para evitar confusión.
  • Reconocer en lugar de recordar: Mucha de la información está puesta como imagen y no como texto, lo que hace que el usuario tenga que recordar parte de la información. También ocurre con algunos códigos para las entradas.
  • Flexibilidad y eficiencia: Sorprendentemente, especialmente si tenemos en cuenta la envergadura de ambos festivales, las webs no son tan eficientes y la navegación en muchas ocasiones se hace extraña y tediosa.
  • Estética y diseño: La estética se rompe especialmente al redirigir a sitios de terceros. Además incluir el cartel como una imagen plana no lo hace especialmente accesible ni adaptable a diferentes dispositivos.
  • Ayuda al usuario con errores: En el Primavera Sound es mucho más fácil cometer errores sin darte cuenta puesto que no se indica en ningún momento que los pasos a seguir son erróneos. Sin embargo, en la página de Mad Cool hacen incluso uso de memes y de humor musical para indicar que algo no ha ido bien. Por ejemplo, una foto de Justin Bieber diciendo “Is it too late now to say sorry?” al acceder a una página que no existe.
  • Ayuda y documentación: Algo especialmente sorprendente es el hecho de que ninguna de las dos ofrezca la opción de ayuda o documentación sobre el uso del sistema. Si bien es cierto que ambas incluyen información y preguntas frecuentes sobre el festival, ninguna de ellas cubre los aspectos a nivel técnico que puedan surgirle al usuario final.

 

Además, como se observa en los diagramas de flujo, tienen muchos pasos poco intuitivos como que la programación esté sólo accesible desde la página principal o incluso que la compra de entradas sea una opción difícil de encontrar, cuando es precisamente el principal objetivo de negocio.

Por otro lado, dada la limitada funcionalidad de ambos sistemas, sería complicado extraer conclusiones para el sistema que se está diseñando, salvo la idea de incluir en la página principal botones de acción a aquellas tareas que más interesen, es decir, a “ver programación” y “comprar entradas”.

 

 

Debate0en PEC 4 – Arquitectura de Información – Diseño de Navegación

No hay comentarios.

Publicado por

PEC 3 – Definición de la Organización y el Etiquetado

Publicado por

PEC 3 – Definición de la Organización y el Etiquetado

Con el fin de poder clarificar el resultado obtenido del card-sorting y cómo ha debido evolucionar la arquitectura de la información según…
Con el fin de poder clarificar el resultado obtenido del card-sorting y cómo ha debido evolucionar la arquitectura de…

Con el fin de poder clarificar el resultado obtenido del card-sorting y cómo ha debido evolucionar la arquitectura de la información según estos datos, se ha pasado a la realización de un árbol de contenido. ­Esta estructura se muestra a continuación.

Se han realizado los siguientes cambios a la arquitectura de la información:

  1. Se ha sustituido «Programación» por «Actuaciones».
  2. La «Compra de entradas» ha pasado a «Entradas» en vez de tener que acceder primero a la actuación para la que se quieren adquirir los boletos.
  3. La «Gestión de comentarios» ha pasado de ser algo único del Artista, a ser también parte del rol de Gestor.
  4. El descuento en las entradas para el artista ha pasado de ser parte del perfil del artista, a ser una opción en el proceso de compra de las entradas del perfil de espectador.

Con estos cambios se pretende hacer la navegación en la información más accesible e intuitiva para el usuario. El resultado final sería éste:

Debate0en PEC 3 – Definición de la Organización y el Etiquetado

No hay comentarios.

Publicado por

PEC 2 AI – Conceptualización de la Interacción

Publicado por

PEC 2 AI – Conceptualización de la Interacción

Se ha elegido el escenario 3 creado para David, que trata de la visualización de una de las actuaciones haciendo uso de…
Se ha elegido el escenario 3 creado para David, que trata de la visualización de una de las actuaciones…

Se ha elegido el escenario 3 creado para David, que trata de la visualización de una de las actuaciones haciendo uso de la alternativa de Realidad Aumentada. Esta tecnología es relativamente nueva y ofrece muchas posibilidades que en un pasado eran impensables, por lo que este escenario y su correspondiente user journey son especialmente creativos, ya que es el diseñador el que pone los límites. Por supuesto hay que tener en cuenta que sea realizable y útil, pero se sale de los límites de las experiencias que puedan estar en el subconsciente del diseñador o diseñadora. Eso hace que sea un ejercicio de empatía que requiere mucho más esfuerzo y mucha más imaginación, puesto que la diseñadora no puede adaptar sus emociones o sentimientos a la forma de ser de las personas de referencia ya que no existe esa experiencia ni ninguna referencia a partir de la que desarrollarlo.

Verdaderamente ahí está el reto más grande del diseñador, pero por otro lado, también el más creativo y soñador de todos los ejemplos que tenía a su alcance.

El User Journey resultante de este escenario ha sido el siguiente.

Debate0en PEC 2 AI – Conceptualización de la Interacción

No hay comentarios.