Publicado por

PEC 4. Diseño de la navegación

Publicado por

PEC 4. Diseño de la navegación

¡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…
¡Hola a todos! En esta PEC debíamos desarrollar el flujo de interacción para cada uno de los 4 escenarios…

¡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!

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

No hay comentarios.

Publicado por

Referencias y Análisis Crítico

Publicado por

Referencias y Análisis Crítico

Las 2 apps seleccionadas son Prime Video y Vimeo. 1. Reproducción de un contenido en Prime Video Queremos investigar cual es el…
Las 2 apps seleccionadas son Prime Video y Vimeo. 1. Reproducción de un contenido en Prime Video Queremos investigar…

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].

Debate0en Referencias y Análisis Crítico

No hay comentarios.

Publicado por

PEC 4 – Diseño de navegación. Análisis crítico

PEC 4 – Diseño de navegación. Análisis crítico
Publicado por

PEC 4 – Diseño de navegación. Análisis crítico

4. Diseño de la navegación …
4. Diseño de la navegación …

Debate0en PEC 4 – Diseño de navegación. Análisis crítico

No hay comentarios.