¡Hola a tod@s!
A continuación les presento el Storyboard de las secuencias de interacción de la aplicación. Luego las pantallas e interacciones más importantes de la aplicación.
Pública Festival INEDIT
El Festival INEDIT es uno de los festivales especializados en cine más importantes del mundo, tiene base en Barcelona y cuenta con sedes en países como Brasil, Chile, Alemania, Países Bajos, Grecia, México, Argentina y muchos más.
Nos a encargado el desarrollo de una app, la cual sirva como plataforma para que sus usuarios tengan una experiencia digital del festival desde cualquier parte del mundo. Además que se convierta en el punto de encuentro entre directores, creadores emergentes y amantes del cine.
Principales objetivos y requerimientos de la plataforma son:
– Crear debates e intercambio entre directores y público en todo el mundo.
– Incluir In-EditTV dentro de la app (In-EditConnect), este es un espacio para visualizar documentales.
– Incluir una tienda en la app, donde los usuarios pueden adquirir y reservar entradas.
– Incluir una agenda del festival y de los eventos que se realicen todo en año.
– Dar visibilidad a creadores emergentes y ser accesibles.
En base a estas característica y luego de un análisis de la informacion encontrada, poniendo enfasis en la interacci´n cebtrada en el usuario empezamos con el sketching:
Luego procedimos a realizar el,prtotipo de bajo nivel y sus respectivos flujos:
1 Flujo: Javier Sánchez.
Escenario: Javier quiere conocer y crear debate con sus seguidores y otros colegas del sector.
Link video: https://youtube.com/shorts/u4lSufzwuX4?feature=share
2 Flujo: Los seguidores de Javier alrededor del mundo.
Escenario: Javier tiene muchos seguidores en el extranjero que quisieran ver el documental ese día online.
Link video: https://youtube.com/shorts/KTO94nyMKSI?feature=share
3 Flujo: Sara Simon.
Escenario: Sara está triste porque no podrá asistir al evento presencial. Podrá ver el festival desde su casa.
Link video: https://youtube.com/shorts/YMufszoZlLc?feature=share
4 Flujo: Sara Simon.
Escenario: Sara es introvertida y no se siente cómoda con la interacción con directores de manera digital.
Link video: https://youtube.com/shorts/4Etmo_7fu2M?feature=share
Enlace del prototipo interactivo:
https://www.figma.com/proto/9rGAeRl5RwqlJbFWBonjil/Festival-In-Edit?page-id=0%3A1&node-id=1%3A3844&viewport=1807%2C91%2C0.16&scaling=min-zoom&starting-point-node-id=1%3A3844
Propuesta de valor:
Realizamos un análisis de las principales ventajas y desventajas de nuestro sistema, para poder definir la propuesta de valor y poder proponer característica que mejoren el servicio de la app.
Las propuesta de valor más importantes son:
– Crear una sección del festival libre de pago para las personas de bajos recursos.
– Realizar descuentos a los grupos vulnerables y estudiantes para ser más inclusivos.
– Incrementar la actividad e interacción de Media desde la app.
Pública Hola a tod@s!
A continuación les presento mi propuesta de diseño:
Dossier explicativo:
Hola a tod@s!
Prototipo de interacción.
El nuevo producto que diseñé se llama Holo-Call, es un sistema que permite la comunicación por medio de hologramas y de voz. Es importante que tanto el emisor como el receptor tengan el sistema para la comunicación por medio de Hologramas.
El sistema es circular, permite una fácil transportación, es liviano y muy fácil de utilizar.
Debe estar conectado a internet y su batería tiene una duración de 48 horas. La recarga es por medio de un cable USB y tiene una duración de aproximadamente 45 minutos.
En la parte frontal el sistema cuenta con un botón de encendido y apagado, un botón para contestar y realizar llamadas, una cámara y un display táctil, el cual permite navegar en el menú por medio de interacción con los dedos.
En la parte posterior cuenta con un display táctil que permite subir o bajar la intensidad de el holograma por medio de la interacción con los dedos. Un micrófono, un altavoz y cinco LEDs que producen el holograma.
Video explicativo:
Interacciones:
¡Hola a tod@s!
Les comparto aquí mi Value Proposition Canvas.
Lista de mejoras:
Extender el servicio a video conferencias. Así tendrá una característica más que los productos ya existentes en el mercado.
Crear paquetes gratis y de pago con más funciones.
Tener un manejo de datos transparente y ser amigable con el medio ambiente. Compensación CO2
Debe ser un sistema ágil y fiable. El sistema se debe adaptar a los distintos contextos de conexión.
El sistema debe tener interacciones que no estén en el mercado (Innovar).
Debe poder ajustar la calidad del video dependiendo de las condiciones de la conexión.
El sistema debe utilizar la tecnología más actual en los países industrializados y tecnología fiable en el resto del mundo.
Pública Hola a tod@s!
A continuación les presento el universo visual y el prototipo de Short.ly.
Moodboard:
Diseño:
Videos:
Prototipo Desktop:
Prototipo Mobile:
Saludos!
Pública Hola a tod@s!
A continuación les presento los resultados del análisis en el Card Sorting por medio de la elaboración de un árbol de contenidos.
Inventario de contenidos:
Para la realización del inventario de contenidos realicé un análisis del Briefing recibido, los datos obtenidos de los Users Journeys y los requisitos del producto ya establecidos en la fase anterior. Así desarrolle las tarjetas para el Card Sorting, el cual lo realicé con la herramienta Optimal Sort:
Análisis:
La etiqueta Usuario arrojo resultados muy claros. Entre el 100% y 63% de los usuarios aprueba esta categoría para Avatar, perfil, mensajes y notificaciones.
La etiqueta Festival arrojo resultados claros. Entre el 100% y 50% de los usuarios aprueba esta categoría para Agenda, presencial, virtual, venta de entradas, comprar y reservar. Mediante comentarios, 4 de los usuarios recomiendan llamar a “Venta de entradas” simplemente “Tienda”. “Virtual” es clasificada por muchos de los usuarios en otras categorías. Voy a cambiar el nombre de esta subcategoría a eFestival para su mejor comprensión.
La etiqueta In-Edit-Connect arrojo resultados claros. Entre el 100% y 50% de los usuarios aprueba esta categoría para In-Edit-TV, videos y documentales.
La etiqueta Discusiones arrojo buenos resultados. Sin embargo, existe una confusión en la subcategoría Foro, los usuarios no la entienden por su similitud con charlas y debates. Voy a quitar esta Subcategoría de mi contenido.
La etiqueta Directores arrojo buenos resultados. Pero hay una confusión con la subcategoría Creadores emergentes. Muchos de los usuarios no entienden ese término. Por lo cual voy a remplazar esa subcategoría con Promesas.
Árbol de contenidos:
En base a los datos extraídos en el Card Sorting propongo el siguiente árbol de contenidos:
Introducción:
Para el desarrollo de la PEC 2 voy a analizar la página web de Gigaset en base a las 10 heurísticas de Nielsen. Gigaset es una empresa de telecomunicaciones alemana, líder europea en la venta en teléfonos, smartphones y smart home. Analizare los flujos del proceso de compra, búsqueda de productos y proceso de pago.
Escogí esta web por que compré algunos de sus productos y aunque la página estéticamente se ve muy bien, tiene algunos problemas de interacción, por ejemplo: se debe realizar muchos clics y cambios de pantallas para realizar la compra o al regresar a un proceso anterior se pierde parte de la información ya realizada.
Metodología:
Como previamente lo indique, para este análisis voy a utilizar la evaluación heurística de Nielsen, la cual nos ayudara con sus 10 principios a detectar los errores de usabilidad de la página gigaset.com.
Los 10 principios componen mi checklist, con los cuales voy a inspeccionar los flujos del proceso de compra, búsqueda de productos y proceso de pago. Luego realizaré un listado de los resultados de los principios clasificándolos según su gravedad. Los parámetros para esta clasificación son:
– La frecuencia con la que ocurre el problema.
– El impacto del problema.
– La persistencia del problema.
Para finalizar realizaré un análisis desde una perspectiva de género e inclusión.
Los 10 principios heurísticos de Nielsen:
1. Visibilidad del estado del sistema.
Buena práctica: El usuario sabe en todo momento el estado del sistema. Se le informa qué ha buscado previamente y en qué parte del proceso de compra se encuentra.
2. Empate entre el sistema y el mundo real.
Mala práctica: La página de Gigaset esta traducida a muchos idiomas. Sin embargo, en la página en español existen muchas palabras en inglés. Si el usuario no habla el idioma no va a poder navegar de una manera óptima.
3. Control y libertad del usuario.
Buena práctica: El usuario puede eliminar productos de la lista de compras sin ningún aviso molesto.
4. Consistencia y estándares.
Mala práctica: Mala práctica: Al hacer clic en la categoría de una tienda online, el usuario está acostumbrado a que se muestre los productos que puede comprar. En la página de Gigaset al hacer clic en una categoría “Smartphones” te lleva a una landing page informativa y cuando haces clic en “Comprar teléfonos móviles” (que está escondido) te lleva a la página de los productos que puedes comprar.
5. Prevención de errores.
Buena práctica: El usuario recibe información oportuna de los campos que ha llenado mal o la información es incompleta.
6. Reconocimiento mejor que recuerdo.
Buena práctica: Indica al usuario los campos por los cuales se ha realizado una búsqueda. El usuario no necesita recordar estos datos.
7. Flexibilidad y eficiencia de uso.
Mala práctica: Al querer realizar el pago en cada paso aparece una ventana de comprobación de dirección. Dos veces tuve que confirmar la misma dirección. Estoy hace la interacción muy lenta.
8. Diseño estético y minimalista.
Buena práctica: EL diseño de la página es minimalista y el usuario puede encontrar los productos fácilmente. No existen elementos innecesarios o ruido visual.
9. Ayudar a reconocer, diagnosticar y recuperarse de errores.
Buena práctica: Los mensajes de erros son indicados con precisión y sugieren una solución.
10. Ayuda y documentación.
Mala práctica: La página no cuenta con un mapa del sitio web.
Luego de la evaluación heurística de Nielsen encontré 4 principios que no se cumplen y un 1 principio que se cumplen, pero tienen posibilidades de mejoras.
Listado priorizado según gravedad:
– Flexibilidad y eficiencia de uso.
– Empate entre el sistema y el mundo real.
– Consistencia y estándares.
– Ayuda y documentación.
– Visibilidad del estado del sistema.
– Flexibilidad y eficiencia de uso.
Este es el problema más grave que encontré en la página web, ya que el usuario se puede arrepentir de la compra en el último proceso que debería cumplir. El proceso de pago debe ser lo más fácil y rápido posible para concretar la compra.
Solución: La dirección que no tenga errores debe ser aprobada y no reconfirmada. Se puede usar un plug de google maps que verifique automáticamente la dirección.
– Empate entre el sistema y el mundo real.
Existen muchas palabras en el idioma inglés, esto dificulta la navegación de los usuarios que no hablan ese idioma.
Solución: Traducir las palabras en inglés al castellano y utilizar un lenguaje acorde con el usuario.
– Consistencia y estándares.
Al hacer clic en la categoría no te lleva directo a la lista de productos que puedes comprar. esto es un problema para los usuarios que compran habitualmente online y están acostumbrados a ver lo más rápido posible los productos.
Solución: Mostrar los productos de la tienda online luego del primer clic en las categorías.
– Ayuda y documentación.
Los usuarios inexpertos no tienen una sección de ayuda de la página web.
Solución: Crear un mapa del sitio.
– Visibilidad del estado del sistema.
Si bien este principio se cumple, los textos de la ubicación del usuario en la página web son demasiado pequeños y dificultan su lectura.
Solución: Aumentar dos puntos a estos textos y realizar pruebas de usuario para poder verificar que el usuario puede encontrar esta información sin problemas.
Consideraciones de la interfaz desde una perspectiva de género.
La web no hace muchas alusiones al género, utiliza mayormente términos neutros. Para crear una cuenta no existen preguntas de género.
Es satisfactorio ver que usan imágenes diversas sin dejar de lado a ningún grupo de personas. Incluso tienen un aparatado “Fair for future” donde describen su responsabilidad social con las personas y el medio ambiente.
Llegue a la conclusión que en general la web de Gigaset no incumple con el diseño inclusivo y tienen campañas que impulsan la igualdad de las personas y el cuidado del medio ambiente.
Bibliografía:
Judith Membrives, Cuaderno de evaluación de la usabilidad. Barcelona UOC, Febrero 2019. [consulta: 11.11.22]. Disponible en: http://quadern-usabilitat.recursos.uoc.edu/es/
Tomàs Modroño, Evaluación Heurística (PARTE I-II). Septiembre 2017. [consulta: 12.11.22]. Disponible en: https://interactius.com/evaluacion-heuristica-parte-i/
By GammaUX , Diseño inclusivo desde una perspectiva de género. Febrero de 2020. [consulta: 12.11.22]. Disponible en: https://www.gammaux.com/blog/diseno-inclusivo-desde-perspectiva-de-genero/
Screenshots y Fotos utilizadas: Gigaset.com, freepik.com, tenor.com
Hola a tod@s!
Para esta PEC realicé el Wireframe de la web (desktop) del diario Extra.
Es un diario a nivel nacional con el segundo tiraje mas grande del Ecuador.
Escogí este medio a pesar de ser amarillista y no estar de acuerdo con sus prácticas. Pienso que se puede ser más crítico, cuando no eres lector del diario y no estas acostumbrado a la forma de hacer periodismo de ese medio.
Analizando los 3 formatos de este medio, cabe recalcar que la versión Mobile es la más acertada y la que más se acerca a los principios visuales del diseño.
El Layout del Wireframe tiene una disposición de 12 columnas y márgenes amplios para publicidad.
Este es un espacio de trabajo personal de un/a estudiante de la Universitat Oberta de Catalunya. Cualquier contenido publicado en este espacio es responsabilidad de su autor/a.