¡Hola a todos!

En esta PEC debíamos desarrollar el flujo de interacción para cada uno de los 4 escenarios que habíamos definido en la PEC anterior.

Además de esto, debíamos analizar dos aplicaciones que tuvieran algo que ver con In-edit, la aplicación que estamos desarrollando.

En mi caso yo escogí Ticketmaster e Instagram, sé que de buenas a primeras no parece tener mucha relación. Pero, no encontré o no se me ocurrió, ninguna aplicación similar a In-edit por lo que escogí las dos caras de la aplicación. Por un lado, Ticketmaster nos va a permitir analizar el flujo de compra de entradas que podría tener nuestro usuario para adquirir entradas para el festival. Y, por otro, Instagram nos va a dar la experiencia que tienen nuestros creadores a la hora de subir contenido a la aplicación.

El análisis de estas dos aplicaciones por separado nos va a permitir sacar unas conclusiones y fusionarlas para ver qué resultado podría resultar mejor para nuestra propia app.

Lo primero que os voy a adjuntar son los flujos de trabajo de ambas aplicaciones:

Como vemos el flujo de interacción no tiene nada que ver la una con la otra, más allá del inicio de sesión.

A continuación os adjuntaré a modo resumen las conclusiones extraídas del análisis heurístico desarrollado en la PEC.

1. Visibilidad del estado del sistema. 

Ambas aplicaciones muestran en todo momento al usuario en qué parte de la aplicación se encuentran. Esto se trata de una buena práctica ya que permite que el usuario no se sienta perdido dentro de la aplicación.

2. Adecuación entre el sistema y el mundo real. 

El uso del lenguaje es similar al usado en la vida real.

Un punto a tener en cuenta en el sistema es el uso de iconos por parte de Instagram, esto puede tratarse de una mala práctica si no se tiene en cuenta el aprendizaje y los conocimientos del usuario ya que podría generar confusión.

3. Libertad y control por parte del usuario.

Ambas aplicaciones permiten revertir las acciones llevadas a cabo por el usuario, Ticketmaster permite eliminar cosas del carrito de la compra e Instagram permite desde eliminar publicaciones hasta mensajes privados.

4. Ayuda a los usuarios a reconocer, diagnosticar y recuperarse de los errores. 

Este es quizás el punto que las aplicaciones tienen más flojo, ambas señalizan los errores pero no dan mucha información al respecto de cómo solucionarlo. Por lo que el usuario nunca llega a saber qué es lo que falló dentro de la aplicación.

5. Reconocimiento antes que recuerdo.

El reconocer antes que recordar facilita mucho la experiencia de usuario. Por ejemplo, el usuario ya está familiarizado con la plataforma de compra de entradas de Ticketmaster porque recuerda a otras páginas similares y en Instagram, el uso de iconos facilmente reconocibles por el usuario permiten que no le genere un gran esfuerzo utilizar la aplicación.

Como punto en contra diría que el más que usa instagram resulta confuso para subir contenido.

6. Diseño estético y minimalista.

Ambas aplicaciones tienen una guía de diseño marcada que recuerda al usuario siempre que se encuentra dentro de la misma aplicación. Por otro lado el uso de publicidad o de información añadida siempre se hace siguiendo la misma maquetación por lo que el usuario no siente «ruido visual» al entrar en estas páginas.

Como conclusión podemos decir que aunque se traten de páginas que en un primer momento no tienen nada que ver, siguen las mismas leyes y tienen las mismas características que permiten que el usuario tenga una experiencia satisfactorias. Analizarlas me pareció interesante para ver cuáles de ellas podemos incluir en el desarrollo de nuestra propia aplicación.

¡Gracias por leer!

Las 2 apps seleccionadas son Prime Video y Vimeo.

1. Reproducción de un contenido en Prime Video

Queremos investigar cual es el flujo de navegación que nos plantea esta app a la hora de encontrar y reproducir un contenido multimedia. Se ha seleccionado esta app por ser una gran plataforma de contenidos audiovisuales. Un extenso catálogo de vídeos ordenados por categorías.

El reto de este tipo de apps, es clasificar de manera ordenada los contenidos y facilitar la búsqueda de los mismos. También se debe tener en cuenta aspectos que faciliten la “estancia” del usuario dentro de la app como por ejemplo la opción de seguir viendo. Son pequeñas experiencias de usuario que marcan la diferencia entre un producto o servicio excepcional o del montón.

Quizás antepongan el interés de vender un servicio extra a facilitarle al usuario las opciones que realmente necesita.

Opción 1

Opción 2

Diagrama de flujo app Prime Video

2. Crear un evento en vídeo en directo desde Vimeo

Queremos investigar cual es el flujo de navagación que nos plantea esta app a la hora de crear un vídeo en directo. La razón por la que se ha seleccionado esta app es por ser una de las principales plataformas de creación de vídeos junto con Youtube. Posee la función de emisión en directo, uno de los prerequisitos marcados en nuestra app in-edit.

Tiene además muchas opciones para gestionar el contenido multimedia como dejar en oculto para varolación, colaboración en línea, herramientas para la edición de vídeos, distintos grados y roles a la hora de compartir, etc.

Es un buen ejemplo para aplicar a nuestro perfil de “Director” de nuestra app.

Una vez que estamos emitiendo en directo, se activan muchas de las opciones que hemos especificado en los prerrequisitos.

Diagrama de flujo app Prime Video

Conclusiones del análisis

A la hora de buscar 2 aplicaciones que nos ayudaran a indagar y sacar información para nuestro proyecto In-Edit No era tan interesante analizar la parte de red social como la de la funcionalidad de encontrar o crear un contenido audiovisual.

En ambos casos son 2 grandes plataformas con millones de usuarios en las que, como hemos visto, es casi imposible encontrar errores. Aparte de que se aplican todos los principios de usabilidad de Jakob Nielsen  y otros del diseño, destacan por la síntesis de menús. Concentran en uno o dos pequeños grupos de menús todas las funcionalidades posibles; prescindiendo en ambos casos de la hamburguesa.

· Estética y diseño minimalista:
Iconos bien resultos, alta legibilidad, ritmo vertical en los espacios, alto contraste, gerarquías en los tamaños de fuente, etc.
· Consistencia y estándares:
Iconografía estandar, ubicación de logos correcta, desplazamiento de contenido en vertical, ordenación del contenido por tarjetas o por filas, símbolo “más” dentro de una caprpeta para añadir nueva, llamada a la acción principal en color relleno y secundarios en linea… etc.
· Visibilidad del estado del sistema:
En prime hay barras de estado avanzando cuando se descaga un contenido, en vimeo aparecen barras de estado de la subida del vídeo…
· Control y libertad del usuario:
Antes de borrar un vídeo en Vimeo te recuerda si de verdad lo quieres hacer o en prime antes de terminar el proceso de compra te pregunta por ultima vez si estás de acuerdo.

Tras realizar un recorrido con capturas analizando cada detalle, se ha aplicado también una tabla de análisis general tal y como establece la técnica del Benchmarking. En dicha tabla hay muchísimas coincidencias entre estas 2 grandes apps.

Las aplicaciones en su versión móvil, ayudan a comprender mejor las funcionalidades que debe tener una app. De hecho, una buena praxis es diseñar primero para la versión movil y después la de escritorio y no al revés.

Este espacio reducido, nos exige un ejercicio mayor de síntesis y esforzarnos en crear una navegación clara e intuitiva.

Fuentes consultadas (Bibliografía):

·Jiménez, L. y González, P. (2021). Herramientas UOC, “Cuaderno de Arquitectura de la Información”. UOC
·Design Toolkit. Herramientas UOC, “Benchmarking”. UOC
·Design Toolkit. Herramientas UOC, “Evaluación heurística”. UOC
·Allas Miguelsanz, B. “Los 10 principios de usabilidad de Jakob Nielsen: be user friendly”, Fuente: https://profile.es/blog/los-10-principios-de-usabilidad-web-de-jakob-nielsen/ [Fecha de consulta: 12 de Diciembre de 2022].

ANÁLISIS CRÍTICO

Para esta evaluación se han escogido los 10 principios de generales de Jakob Nielsen para el diseño de interacción. Están basados en amplias reglas generales y no específicas directrices de usabilidad son una serie de 10 ideales y fundamentos que permiten crear productos con un mayor grado de acogida entre los usuarios debido a que se basan en sus necesidades y en su comportamiento.

Para este análisis se van analizar 2 portales de venta de entradas para diferentes eventos. Uno de los escenarios y diagramas de flujo es la compra de entradas en base a un viaje. Lo que hace que sea necesario el tener información de antemano sobre los horarios.

• www.ticketmaster.es

• www.entradas.ataquilla.com

Los 10 principios de generales de Jakob Nielsen para el diseño de interacción

#1: Visibilidad del estado del sistema
Este principio de usabilidad web nos indica que siempre tenemos que tener informado al usuario de lo que está pasando en nuestra web y ofrecerle una respuesta en el menor tiempo posible

#2: Coincidencia entre el sistema y el mundo real
El sistema tiene que “hablar” el lenguaje del usuario con palabras o frases que a éste le sean familiares y que pueda reconocer con facilidad.
La información tiene que mostrarse con un orden lógico y las imágenes o iconos usados tienen que ser claros, sin darle la posibilidad al usuario de equivocarse.

#3: Control y libertad del usuario
Tenemos que darle al usuario la posibilidad de subsanar el error y no sentirse frustrado por no poder realizar algo.

#4: Consistencia y estándares
Los usuarios no deberían tener que preguntarse si diferentes palabras, situaciones o acciones significan lo mismo.

#5: Prevención de errores
Prevenir cualquier error que pueda cometer el usuario

#6: Reconocimiento en lugar de recuerdo
Minimizar la carga de memoria del usuario haciendo visibles los elementos, acciones y opciones. El usuario no debería tener que recordar información de una parte de la interfaz a otra.

#7: Flexibilidad y eficiencia de uso
Los procesos flexibles se pueden llevar a cabo de diferentes maneras, de modo que las personas puedan elegir el método que mejor les funcione.

#8: Diseño estético y minimalista
Las interfaces no deben contener información que sea irrelevante o que rara vez se necesite.

#9: Ayude a los usuarios a reconocer, diagnosticar y recuperarse de errores
Los mensajes de error deben presentarse con tratamientos visuales que ayuden a los usuarios a notarlos y reconocerlos.

#10: Ayuda y documentación
Es mejor si el sistema no necesita ninguna explicación adicional. Sin embargo, puede ser necesario proporcionar documentación para ayudar a los usuarios a comprender cómo completar sus tareas.

Diagramas de flujo

DISEÑO DE LA NAVEGACIÓN

Para la realización de esta última actividad se han tenido en cuenta todas las herramientas de diseño centrado e el usuario utilizadas para las prácticas anteriores: desde el briefing del cliente hasta el árbol de contenidos, pasando por las fichas de persona, escenarios y user journeys.

A continuación, vamos a mostrar el análisis crítico de los flujos unas páginas webs de referencia (Festival Internacional de Cine Independiente de Ibiza y Bilbao BBK Live) que tiene relevancia para el proyecto por guardar similitud con los flujos de algunos de los escenarios diseñados en la actividad anterior. En el primero analizamos el flujo de la inspección de proyectos emergentes y en el segundo el flujo de compra de entradas (escenario 2 y 3 respectivamente).

A continuación encontramos el análisis crítico de las referencias y los diagramas de flujo de cada uno de ellos: