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 5 – Prototipatge i proposta de valor

PEC 5 – Prototipatge i proposta de valor
Publicado por

PEC 5 – Prototipatge i proposta de valor

PROPOSTA D’APLICACIÓ MUTEK Prototip Tan bon punt el procés iteratiu de sketching ha quedat prou acurat, s’ha procedit a seguir en el…
PROPOSTA D’APLICACIÓ MUTEK Prototip Tan bon punt el procés iteratiu de sketching ha quedat prou acurat, s’ha procedit a…

PROPOSTA D’APLICACIÓ MUTEK

Prototip

Tan bon punt el procés iteratiu de sketching ha quedat prou acurat, s’ha procedit a seguir en el procés de prototipatge de baix nivell, sense aportar cap disseny gràfic definitiu. Cal aclarir que, en aquest nivell de prototipatge no és necessari incloure cap imatge ni colors ni res però, per tal de facilitar l’enteniment, s’han fet servir les imatges auxiliars de Mutek per omplir allà on fes falta una imatge i s’han posat alguns colors per poder identificar més fàcilment què es pot pitjar i què no.

Donat que es plantegen 2 tipus d’usuaris, s’han dissenyat 2 fluxos de prototipatge per tal de permetre abordar els dos tipus d’interacció. Aquests prototips s’han dissenyat fent servir Figma. Per accedir a aquests enllaços de prototipatge, prémer les imatges per cadascun dels prototips.

 

Proposta de valor

A continuació es mostra la proposta de valors que aporta l’applicació acord a les necessitats identificades en la documentació proporcionada en el briefing i les fitxes persona de l’Anne i de’n David.

Debate0en PEC 5 – Prototipatge i proposta de valor

No hay comentarios.

Publicado por

PEC 4 – Anàlisi de LiveNation i Banister

Publicado por

PEC 4 – Anàlisi de LiveNation i Banister

Un dels pasos a l’hora de dissenyar un sistema interactiu consisteix en observar i analitzar altres productes que compleixen un servei similar…
Un dels pasos a l’hora de dissenyar un sistema interactiu consisteix en observar i analitzar altres productes que compleixen…

Un dels pasos a l’hora de dissenyar un sistema interactiu consisteix en observar i analitzar altres productes que compleixen un servei similar al que es vol dissenyar per tal de veure aquells punts de fortalesa així com de feblesa i poder tenir-los presents en el propi disseny. Donat que Mutek va sol·licitar una aplicació que permeti la compra d’entrades així com la retransmissió en streaming dels espectacles, per a aquest anàlisis s’han escollit les següents dues webs: LiveNation i Banister Live.

Per a analitzar els llocs web indicats, es realitzarà una avaluació Heurística seguint els 10 principis de Nielsen. Per tal de tenir presents aquests principis de Nielsen, s’exposa una breu explicació extreta del blog de Interactius [1].

1. Visibilitat de l’estat del sistema.

«El sistema ha de mantenir a l’usuari informat sobre el que passa a través d’una retroalimentació apropiada en un temps raonable.»

2. Adequació entre el sistema i el món real.

«El sistema ha de parlar en el llenguatge de l’usuari, amb paraules, frases i conceptes familiars per ell. Utilitzar convencions del món real, fent que la informació apareixi en un ordre natural i lògic.»

3. Llibertat i control per part de la persona usuaria.

«A vegades els usuaris escullen funcinalitats per error i necessiten una ‘porta d’emergència’ per sortir d’un estat indesitjat. Oferir suport per desfer i refer accions.»

4. Consistència i estàndars.

«Els usuaris no haurien de preguntar-se si diverses paraules, situacions o acción signifiquen les mateixes coses. Que es segueixin les normes i convencions de la plataforma sobre la que està implementat el sistema.»

5. Prevenció d’errors.

«Abans que dissenyar bons missatges d’errors, és millor evitar que el problema es dugui a terme.»

6. Reconeixement abans que record.

«Minimitzar la càrrega de memòria de l’usuari fent que els objectes, les accions i les opción estiguin visibles. L’usuari no té perquè recordar la informació d’una part del diàleg a una altra»

7. Flexibilitat i eficiència d’ús.

«Els acceleradors, no vistos per l’usuari principiant, milloren la interacció per l’usuari expert de tal manera que el sistema pot servir per usuaris inexperts i experimentats. És important que el sistema permeti personalitzar accions freqüents.»

8. Disseny estètic i minimalista.

«Els diàlegs no haurien de tenir informació irrellevant o que es necessiti rarament. Cada unitat extra d’informació en un diàleg competeix amb la informació important, disminuint la visibilitat relativa.«

9. Ajuda a les persones usuaries a reconèixer i diagnosticar els errors i a recuperar-se.

«Els missatges d’error han d’estar expressats en un llenguatge pla, sense codis, indicant amb precisió el problema i suggerir una solució.«

10. Ajuda i documentació

«Encara que es millor que es pugui fer servir el sistema sense documentació, és necessarti proporcionar a l’usuari ajuda i documentació. Aquest ha de ser fàcil de buscar, centrat en les tasques de l’usuari, amb informació de les etapes a realitzar encara que no sigui molt extensa.»

 

A continuació es mostrarà el diagrama de flux d’una taca en cadascuna de les webs indicades i es farà una avaluació Heurística d’aquests.


LiveNation

Tasca – Comprar dues entrades a un concert

Escenari: Després de 2 anys de restriccions sanitàries degut a la pandèmia de la Covid-19, Destripando la Historia torna als escenaris de forma presencial arreu de la península. Tu i el teu millor amics, fans incondicionals dels artistes, decidiu assistir al primer concert que facin aprop de la teva ciutat. El concert és promocionat per LiveNation, compra les entrades des d’allà.

Diagrama de flux

En analitzar el diagrama de flux per tal de comprar entrades a través de LiveNation, un dels punts que ha cridat més l’atenció és que ells només promocionen els concerts però tot el que té a veure amb la gestió de les entrades està en mans de TicketMaster, un servei de tercers. Un altre aspecte curiós és que les funcions de promoció són bastant limitades i de seguida surt a altres pàgines webs des don es gestionen les entrades, el cual dona una sensació com si LiveNation, a ulls de l’usuari que navega, es dedica a agrupa els esdeveniment però no té cap mena de control sobre aquests.

Diagrama LiveNation

Avaluació Heurística

A continuació s’exposa l’avaluació Heurística de LiveNation:

1. Visibilitat de l’estat del sistema.

LiveNation aplica una bona pràctica. En tot moment l’usuari està informat de quin punt està en la compra d’entrada i quina mena de decisions i dades ha de prendre.

2. Adequació entre el sistema i el món real.

LiveNation aplica una bona pràctica, però millorable. En la majoria dels casos fa servir un llenguatge natural per l’usuari però a vegades hi ha algunes expressions com el botó de «Entradas» per seguir amb la compra que poden despistar una mica i si no fos perquè és l’única opció, potser no seria tant lògic prémer aquest botó.

3. Llibertat i control per part de la persona usuaria.

LiveNation aplica una mala pràctica. Degut a que LiveNation fa servir un servei de tercers per a gestionar la compra d’entrades, en el moment que s’accedeix a TicketMaster perd el control de permetre tornar enrrere i obliga a l’usuari a retrocedir a través del navegador i no pas a través de la web.

4. Consistència i estàndars.

LiveNation aplica una bona pràctica. Segueix els estàndars habituals tant de distribució d’informació com en qüestions d’iconografia.

5. Prevenció d’errors.

LiveNation aplica una mala pràctica. En el moment que s’accedeix a TicketMaster per gestionar la compra d’entrades (i la selecció d’aquestes), Aquest no té en compte si encara hi ha entrades o no per assistir i fins que no selecciones les entrades i continues els pasos, no t’indica amb missatge d’error que no hi ha entrades. Per altra banda, LiveNation si dóna accés a comprar els entrades, hauria de poder visualitzar la disponibilitat d’entrades i no permetre que l’usuari intenti comprar sense poder-ne realment.

6. Reconeixement abans que record.

LiveNation aplica una bona pràctica. En el moment de fer la compra a través de TicketMaster, es conserva la informació de la data, hora i lloc del concert selecionat i això permet que l’usuari no hagi de recordar la seva selecció, així com durant el procés de pagament.

7. Flexibilitat i eficiència d’ús.

LiveNation aplica una bona pràctica, però millorable. Des de LiveNation, permet aplicar filtres de dates, llocs i gèneres per tal de afinar la cerca de concerts i si l’usuari que sap a quin concert vol anar, pot fer ús d’aquests. Tot i així, és l’única opció que permet accelerar el procés ja que és bastant lineal. Per altra banda, si ja s’ha fet mai cap compra a través de TicketMarket, aquest pot guardar la informació per a futures compres, i per tant accelerar-ho.

8. Disseny estètic i minimalista.

LiveNation aplica una bona pràctica. Tota la informació proporcionada és clara i directe, permet que l’usuari no divagui en informació irrellevant

9. Ajuda a les persones usuaries a reconèixer i diagnosticar els errors i a recuperar-se.

LiveNation aplica una bona pràctica, però millorable. Des de LiveNation no hi ha errors posibles, ja que en esspencia és un by-pass per a la compra d’entrades. Però des de TicketMaster sí que hi ha una bona pràctica d’errors doncs aquests són clars si falta informació si algun procés ha fallat i què ha de fer l’usuari per a poder continuar.

10. Ajuda i documentació

LiveNation aplica una bona pràctica, però millorable. La majoria d’accions contenen un Tooltip que indica què vol dir o què fa, però també hi ha informació de l’artista que queda una mica amagat al final de la fitxa de l’artista. Si bé no és rellevant per les tasques a realitzar, si justament es vol accedir a la informació de l’artista, el més coherent és que aquesta informació de descripció aparegui al principi, encara que sigui com a introducció per als següents continguts.

 

 


Banister

Tasca – Assistir a concert en streaming

Escenari: Durant la pandemia, el duo musical de Destripando la Historia s’ha pogut reunir en «petit comité» per transmetre en viu un concert familiar, comentant algunes canços i parlant amb els seguidors responent preguntes. Tu, emocionat, vas comprar les entrades i avui has rebut la notificació de que tot està apunt per començar el concert. Assisteix al concert en streaming a través de Banister.

Diagrama de Flux

Si una cosa destaca Banister és que en concepte de transmissió en streaming té una forma de gestionar-se bastant lineal i similar a la plantejada per Mutek, amb la diferència que aquest diagrama de sequencies correspondria a la transmissió en streaming mentre que la proposada en el projecte és assistir al concert per ARVR i requereix alguns passos més per a gestionar-ho. Arribats en aquest punt, la part més interessant és veure a nivell tècnic com es realitza el setup que connecta amb Banister alhora de transmetre en viu i sobretot, com interactuen amb els oients i quin grau d’interactivitat tenen els artistes directament amb Banister durant el concert. A més a més, també considero interessant veure com es gestionen els errors tècnics que poden succeir en viu per tal de tenir-los presents alhora de dissenyar la interacció per Mutek.

Diagrama de flux Banister

Avaluació Heurística

A continuació s’exposa l’avaluació Heurística de Banister:

1. Visibilitat de l’estat del sistema.

Banister aplica una bona pràctica. Per la naturalesa del concepte de streaming, i la senzillesa a nivell d’espectador, és fàcil saber en tot moment on es troba l’usuari si fora del concert, esperant per entrar o dins del concert.

2. Adequació entre el sistema i el món real.

Banister aplica una bona pràctica, però millorable. Tot i que el concert en streaming en concret no disposa de molts elements interactius a part del xat (que sí aplica bona pràctica), per buscar detalls, es podria parlar de la gestió del perfil de l’usuari i l’accés a les entrades, amb algun text més intuitiu o algun icona que recordi a «El meu perfil»

3. Llibertat i control per part de la persona usuaria.

Banister aplica una mala pràctica. Realment no hi ha cap porta d’emergència que permeti a l’usuari refer les seves accions, l’única porta d’emergència que hi ha és pitjar l’icona de Banister per tornar al principi de tot.

4. Consistència i estàndars.

Banister aplica una bona pràctica, però millorable. Com s’ha comentat abans, durant la tranmissió en streaming no hi ha molts elements interactius, però els pocs que hi ha són adequats. Podria ser millorable si hi hagués més possibilitats. A més a més, també seria millorable un aspecte bastant repetitiu d’error i es que no tots els blocs «clickables» segons el cursor que es mostra, es poden pitjar i això fa que perdi una mica la consistència de que no fa res aquell suposat enllaç.

5. Prevenció d’errors.

Banister aplica una mala pràctica. La possibilitat de que l’usuari es pugui equivocar són molt reduides però on si poden haver errors és durant la transmissió d’errors. Banister ofereix i assegura una bona disponibilitat de servidors i accessos però en canvi hi ha hagut ocasions on, malgrat saber exactament quantes persones assisteixen en streaming, no han sabut oferir el servei al 100% i això indica que no hi ha una bona prevenció d’errors que permeti oferir el servei ininterrumpudament.

6. Reconeixement abans que record.

Banister aplica una mala pràctica. Com s’ha comentat abans, no hi ha motles pantalles d’interacció per poder accedir al concert, però sí que es cert que, si en el correu de recordatori no indiqués quins passos seguir per entrar al concert, l’usuari sol hauria de provar ja que no hi ha cap estructura que permeti reconèixer com accedir al concert.

7. Flexibilitat i eficiència d’ús.

Banister aplica una bona pràctica. Per la naturalesa del concepte de streaming, i la senzillesa a nivell d’espectador, no hi ha necessitat de trobar acceleradors a la tasca per a experts. Els accesos directes que un usuari expert pugui necessitar estan tant accessibles com per l’usuari principiant.

8. Disseny estètic i minimalista.

Banister aplica una bona pràctica. Tota la informació que es mostra en pantalla és senzilla i autoexplicativa de manera que no hi ha elements innecessaris que competeixin per l’atenció de l’usuari.

9. Ajuda a les persones usuaries a reconèixer i diagnosticar els errors i a recuperar-se.

Banister aplica una mala pràctica. Un exemple molt clar és quan s’intenta editar el perfil, per canviar la contrasenya per exemple. En intentar editar, apareix un missatge d’error que per un usuari estàndard no li aporta cap informació i només el botó de «Tornar» li permet recuperar-se, però el missatge és clar només per a desenvolupadors. Aquests tipus d’errors haurien d’estar millor descrits i en cas que sigui necessari una traça per a desenvolupadors, aquest hauria de mostrar-se com a extra en pantalla i que quedi ocult fins a pitjar «més detall» o fins i tot troba una altra manera d’accedir-hi.

10. Ajuda i documentació.

Banister aplica una bona pràctica, però millorable. La tasca d’accedir al concert no conté molts passos però en canvi, la informació que fos necessaria per poder accedir al concert, només es troba en el correu que rep per accedir-hi. Això implica que s’ha de tenir a mà el correu per saber on trobar les entrades. Està documentat? sí, però no és tant accessible com hauria de ser.


Bibliografia i Webgrafia

[1] Modroño, T. (2022, January 5). Evaluación Heurística (PARTE I). Interactius. https://interactius.com/evaluacion-heuristica-parte-i/

Debate0en PEC 4 – Anàlisi de LiveNation i Banister

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

Estudio de diagramas de flujo para el diseño de App del Festival Mutek.

Publicado por

Estudio de diagramas de flujo para el diseño de App del Festival Mutek.

DIAGRAMAS DE FLUJO En los diagramas de flujo adjuntos, se ha representado la secuencia de actividades que deben de realizar los usuarios…
DIAGRAMAS DE FLUJO En los diagramas de flujo adjuntos, se ha representado la secuencia de actividades que deben de…

DIAGRAMAS DE FLUJO
En los diagramas de flujo adjuntos, se ha representado la secuencia de actividades que deben de realizar los usuarios representados en los escenarios desarrollados anteriormente para alcanzar sus objetivos descritos.
En todos ellos identificamos como task flow los pasos de inciar sesión, por lo que debemos invertir recursos en hacer esta etapa de interacción lo más óptima posible, adaptándose a cualquier usuario de la app. El resto de flujos pertenecen son de tipo user flows, ya que en la app se pueden realizar muchas funciones específicas no coincidentes para todos los objetivos de los usuarios.
A continuación, se adjuntan los distintos diagramas.

 

REFERENCIAS Y ANÁLISIS CRÍTICO

Se han seleccionado dos app destinadas a la visualización, búsqueda, compra y reserva de eventos musicales y artísticos; con el fin de analizarlos y evaluarlos para poder extraer información valiosa para nuestro proyecto relativa a la arquitectura que debemos buscar.

Dichas app son Evenbrite y Songkick, ambas competidoras directas entre ellas, al ser muy similares. Estas app son dos de las más populares dedicadas al entorno de eventos en la actualidad.

Para su análisis, en primer lugar hemos creado un diagrama de flujo para cada una de ellas, sobre la realización de una misma actividad: buscar un evento y comprar una entrada.

Los diagramas obtenidos, serán evaluados mediante heurísticas relativas a la interacción app-usuario y usabilidad, haciendo un análisis crítico de los mismos.

A continuación, se exponen los diagramas.

Análisis mediante heurísticas:

En cada punto exponemos una de las diez heurísticas de Nielsen, evaluando comparativamente su presencia en cada una de las apps:

  • Visibilidad del estado del sistema: Songkick tiene mayor eficiencia en este punto, ya que en la página principal podemos ver los eventos añadidos de forma directa y la información está más simplificada, lo cual facilita la intuitividad de la navegación. Evenbrite expone demasiada información sin diferenciar bien grupos, por lo que supone una sobrecarga informativa para el usuario que no le permite conocer el estado actual de forma óptima. En ambas tenemos marcadores para ver en que sección estamos y son usadas óptimamente.
  • Consistencia sistema-mundo real: Evenbrite usa mayor iconografía, la cuál es muy intituitiva. Songkick usa más texto, bastante escueto. Ambas n opresentan problemas de ordenamiento y expresión de la información.
  • Control y libertad del usuario: El cambio de una sección a otra es directo, gracias a tener en ambas siempre presente la barra de secciones. Esto las optimiza en cuanto a la libertad de navegación, pues en cualquier momento podemos pasar a otro lugar de forma fácil y sencilla.
  • Consistencia y estándares: SongKick presenta una estrucutura más consistente que Evenbrite, ya que todas sus imágenes y páginas tienen forma de cuadrículas lxl. Evenbrite, en cambio, combina estilos más distintos en cada una de sus secciones, lo cuál hace más farragosa la navegación.
  • Prevención de errores: ambas incluyen mensajes y notificaciones en el inicio de sesión incorrecto (falta de dato o clave/usuario incorrecto, entre otros). Igualmente, notifica cuando se está haciendo una búsqueda de algo no registrado y avisa de eventos cancelados o con algún otro imprevisto (tras ser guardados).
  • Reconocer en vez de recordar: ambos incluyen listas de búsquedas anteriores en las barras del buscador, sistema de notificaciones, sincronización con google calendar. Respecto a la nomenclatura e iconografía, usan iconos globalmente conocidos y populares, lo que facilita la navegación. En todas sus secciones incluyen barra de apoyo de las secciones disponibles, lo que nos facilita saber donde estamos y adonde podemos ir.
  • Flexibilidad y eficiencia de uso: La barra de secciones supone un gran atajo visual, en ambas.
  • Estética y diseño minimalista: presente en ambas, pero más eficiente en SongKick (más repetición de patrones cuadriculados y proporciones más similares entre imágenes del mismo nivel; información escueta, aunque podemos aumentar para conocer más).
  • Ayuda al reconocimiento y solución de errores: ambas expresan mensajes de datos incorrectos para el inicio de sesión, imposibilidad de conectar a facebook (o spotify en Evenbrite), así como búsquedas no encontradas.
  • Ayuda y documentación: ambas cuentan con secciones de ayuda en la sección del usuario. Evenbrite cuenta con una pestaña enfocada a los problemas con entradas, lo cuál es muy positivo ya que está muy ajustada a la funcionalidad de la app.

Debate0en Estudio de diagramas de flujo para el diseño de App del Festival Mutek.

No hay comentarios.

Publicado por

PEC 4 – Diseño de la navegación

Publicado por

PEC 4 – Diseño de la navegación

En esta entrada presento el sistema de navegación y las siguientes tareas que se han realizado en la cuarta entrega del proyecto…
En esta entrada presento el sistema de navegación y las siguientes tareas que se han realizado en la cuarta…

En esta entrada presento el sistema de navegación y las siguientes tareas que se han realizado en la cuarta entrega del proyecto para el diseño de la app para el festival Mutek:

 

Diagramas de flujo 

Diagramas de los 4 escenarios planteados para las diferentes personas diseñadas en el proyecto. 

Referencias y análisis crítico 

Análisis de dos productos digitales: app del festival Wilderness y la web del festival Bigsound. 

 

Diagramas de flujo 

Se han diseñado cuatro diagramas de flujo, cada uno representa un escenario diferente de los desarrollados en el proceso de modelado. 

Diagrama 01

Escenario: Anne quiere contactar con su público

 

Diagrama 02

Escenario: David quiere ver la programación del festival 

 

Diagrama 03

Escenario: David accede a una actuación en streaming 

 

 

Diagrama 04

Escenario: David contacta con un artista

 

Referencias y análisis crítico 

Se han seleccionado dos productos digitales de referencia para realizar el análisis del flujo de navegación principal de cada uno de ellos. 

Los productos seleccionados son la web de Bigsound festival y la aplicación de Wilderness festival. 

 

Bigsound festival Web 

Bigsound es un festival que se realiza anualmente en Valencia. 

La página principal de este evento destaca por su diseño ya que recuerda al diseño de un cartel. 

En él vemos la información importante sobre donde y cuando se celebrará el festival, y a continuación enlaces a secciones que configuran el árbol de contenidos de esta web. 

Para realizar el análisis de esta web hemos seleccionado el flujo de compra de entradas 

 

Diagrama 

Compra de entradas online 

 

Wilderness festival App 

Wilderness es un festival que abarca la música, las artes, la comida y el bienestar, en Oxfordshire. Con un programa ecléctico que incluye música y arte, una serie de experiencias gastronómicas, charlas y debates para inspirar. 

Su aplicación móvil se diseñó para planificar el tiempo de los asistentes en el festival. 

Diagrama 

Asistir a un evento 

 

 

Benchmarking

Tabla comprativa sobre los dos productos de referencia para profundizar en el análisis y conocer los puntos fuertes y características de ambos. 

Debate0en PEC 4 – Diseño de la navegación

No hay comentarios.

Publicado por

PEC 3 – Definició de la organització i l’etiquetat

Publicado por

PEC 3 – Definició de la organització i l’etiquetat

App Mutek Introducció Per a realitzar l’arbre de continguts partint dels requisits trobats en l’anterior pràctica, s’ha elaborat un inventari de continguts,…
App Mutek Introducció Per a realitzar l’arbre de continguts partint dels requisits trobats en l’anterior pràctica, s’ha elaborat un…

App Mutek

Introducció

Per a realitzar l’arbre de continguts partint dels requisits trobats en l’anterior pràctica, s’ha elaborat un inventari de continguts, a continuació s’ha dissenyat un Card sorting obert per dur a terme de manera online a joves d’edat compresa entre 20 i 30 anys. El fet que el Card sorting s’hagi optat per a que sigui del tipus obert ha permès tenir una visió més àmplia de la percepció que tenen els usuaris a l’hora de categoritzar de forma natural els continguts, però també ha dificultat la tasca, ja que en alguns casos els resultats han estat una mica ambiguos.

Card sorting

En primer lloc, un cop finalitzat el card sorting, s’han analitzat les categories i observat com els usuaris han categoritzat les diferents targetes. A continuació podeu veure la taula obtinguda després d’estandaritzar les categories obtingudes:

Les cartes s’han agrupat en les següents categories:

  • Accés a l’aplicació.
  • Blog i events — on dins podem trobar dues subcategories de Events i Blog.
  • Perfil.
  • Altres/Secció d’artista.
  • Configuracions — on dins podem trobar dues subcategories de Configuració i Tests tècnics.

Arbre de continguts

Degut a l’ambiguitat d’alguns resultats, ha estat necessari crear unes relacions directes entre diferents categories com per exemple les configuracions i l’accés a l’aplicació. S’ha establert que en registrar-se per primer cop es permeti accedir directament a definir les diferents configuracions, però si més endevant es vol modificar, l’aplicació ha de poder permetre-ho i per aquest mateix motiu, també ha de poder accedir-se des de dins l’aplicació, com per exemple des del perfil. Un altre cas on s’ha hagut de prendre una decisió ha estat en les entrades comprades, alguns han suggerit que hauria de ser a events però altres també que hauria d’estar al perfil, però pels requisits establerts inicialment i la lògica contextual s’ha categoritzat com a part del perfil.

Cal comentar també que la categoria de blog i events, per la naturalesa de l’aplicació, és el contingut principal i per tant es pot accedir des de tot arreu així com que no depen directament de cap altre categoria. Per aquest motiu no té cap fletxa de relació. Afegir que la categoria de Secció d’artista queda sobrejada amb un altre color degut a que només els artistes tenen accés a aquests continguts directament.

A continuació podeu veure l’arbre de continguts amb les relacions directes.

Debate1en PEC 3 – Definició de la organització i l’etiquetat

Publicado por

PEC 3: Definicion de la Organizacion y del Etiquetado; El árbol de contenidos.

Publicado por

PEC 3: Definicion de la Organizacion y del Etiquetado; El árbol de contenidos.

Tras analizar con detenimiento os datos recogidos en el Card Sorting, se ha generado un árbol de contenidos estructurando la jerarquía de…
Tras analizar con detenimiento os datos recogidos en el Card Sorting, se ha generado un árbol de contenidos estructurando…

Tras analizar con detenimiento os datos recogidos en el Card Sorting, se ha generado un árbol de contenidos estructurando la jerarquía de aparición de las distintas etiquetas, distribuidas por categorías.
Para seguir de una forma estricta los resultados obtenidos con la herramienta Optimal Sort, me he ayudado del dendograma, que representa la afinidad (decreciente de derecha a izquierda) que las distintas etiquetas presentan entre ellas tras los resultados, independientemente de las etiquetas seleccionadas.

Los participantes han elegido, en gran parte, contar con todas las categorías, sin embargo, para fomentar aprendizaje, atención y memoria se opta por una estructura sencilla, de esta forma guiar al usuario de la forma más simple y eficiente, siempre dejando claro qué es lo que puede hacer, cómo lo puede hacer.

Se ha generado un árbol que permite visualizar la jerarquía de las etiquetas, pero que también permita facilitar el acceso a las etiquetas más frecuentes desde distintas categorías, reduciendo en un principio las posibilidades, para darle al usuario, tanto participante del festival, como espectador el abanico de opciones amplio sin agobiar, llegando a cada una de las opciones de una forma natural y orgánica. Debido a la limitación de las etiquetas en la aplicación, el detalle de la jerarquía en los niveles más avanzados se realizará en tareas venideras.

Debate0en PEC 3: Definicion de la Organizacion y del Etiquetado; El árbol de contenidos.

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

Árbol de contenidos de la app de soporte al Festival Mutek

Publicado por

Árbol de contenidos de la app de soporte al Festival Mutek

En el desarrollo de la fase de definición y organización del etiquetado del proyecto de desarrollo de una app para el festival…
En el desarrollo de la fase de definición y organización del etiquetado del proyecto de desarrollo de una app…

En el desarrollo de la fase de definición y organización del etiquetado del proyecto de desarrollo de una app para el festival Mutek, hemos comenzado con una aplicación de la técnica Card Sorting abierto (al suponer un producto nuevo), cómo análisis de las estructuras mentales interiorizadas por nuestros usuarios.

Para ello, le hemos proporcionado a un grupo de seis usuarios distintos, un total de diecinueve tarjetas correspondientes a distintas informaciones que se han establecido que debe contener la plataforma. Las agrupaciones realizadas por los usuarios, así como los títulos establecidos por ellos para cada una de dichas agrupaciones, han sido analizados. Las conclusiones obtenidas de dicho análisis han sido que se diferencian tres grupos principales relativos a información sobre los eventos, las entradas y los artistas. Además, se incluye un apartado destinado a atención al cliente. Cada uno de estos grupos contiene una serie de informaciones diferenciadas relativas (en base a las estructuras de los usuarios), lo cuál reflejamos en el siguiente diagrama de árbol de contenidos. Se puntualiza que algunos contenidos muy concretos han sido cambiados de grupo, bajo criterios de diseño e interacción.

Debate0en Árbol de contenidos de la app de soporte al Festival Mutek

No hay comentarios.