Destacada

Prototipo interactivo y propuesta de valor

Propuesta de valor

En esta propuesta de valor se plasman los requisitos de los usuarios y las soluciones aportadas a través del prototipo. Las soluciones consisten más que nada en facilitar los procesos de interacción y de comunicación de los usuarios con la app, y también entre los mismos usuarios.

Prototipo interactivo

La manera en la que hice el prototipo interactivo mezcla todas las soluciones a los problemas que tenían los usuarios, así, desde la página principal del prototipo se puede llegar a todas las soluciones. De igual manera, voy a dejar como ejemplo, el diagrama de flujo que se debe seguir para acceder e interactuar en los foros.

Se puede acceder al prototipo a través del siguiente enlace: https://www.figma.com/file/g94ATUcLSLgSop9oFkHcAh/Prototipo-In-edit?node-id=0%3A1&t=oEyRW4GOmiOpdmOV-1

 

Destacada

Árbol de contenidos

Hola, adjunto árbol de contenidos. En mi trabajo quise experimentar con las formas de interacción presenciales y virtuales, por lo tanto, añadí categorías y cartas que hicieran énfasis en que los usuarios virtuales tuvieran opciones de interacción entre ellos, entre estos también se incluyen a los invitados y expositores. Por otro lado, me centré también en mejorar la «experiencia social» de la app, es decir, que los foros y los medios de interacción entre personas fueran mejores y más fáciles de usar.

 

Destacada

Wireframe

Hola, he elegido un diario regional para realizar el ejercicio, en específico: La Opinión de Murcia. Puedo decir que el diseño de su página web es bastante básico, además de que se distancia bastante del diseño de la versión física. Cuenta con las categorías necesarias para buscar las noticias que le interesen a los usuarios. Un problema muy grande que le veo es que abusan de la publicidad, fácil, un 40% de la pantalla queda ocupada por publicidad si no se utiliza adblock o algo similar.

Destacada

Escenario y User Journey.

Buenos días, con un poco de retraso, adjunto escenario y user journey.

Escenario

Javier se levanta todos los días alrededor de las 8:00 AM, la primera cosa que hace, es revisar su móvil. Acto seguido va a desayunar con sus dos hijos y esposa mientras utiliza el móvil para poner un poco de música en el comedor. Después de desayunar, Javier se sienta en el PC para editar una imagen promocional de un nuevo documental que está haciendo, “El rock iberoamericano durante las décadas de los 70 y 80, se grita revolución”. Javier tiene la intención de subir la imagen a internet y mostrarla a un público selecto, en este caso, a los asistentes del festival In-editConnect interesados en el rock iberoamericano.

A las 9:30 AM toma su móvil y abre la nueva app de In-editConnect, al entrar en la página principal, ve la opción de “foro” en los desplegables. Allí, encuentra que el foro no tiene opciones para filtrar los temas de discusión, todos los debates se encuentran en el mismo lugar, no hay categorías de temas de discusión. Esto le produce dudas a Javier, sobre donde postear la imagen promocional de su nuevo documental; él esperaba recibir comentarios de personas que estuvieran realmente interesadas en el tema y que lo conocieran.

Finalmente, Javier se arriesga, y postea la imagen en un hilo titulado “El rock en español”, al hacerlo, de 30 comentarios que se postearon desde que subió la imagen, 10 iban dirigidos hacia el contenido de su imagen, algunos de los contenidos de estos comentarios fueron:

“¿Rock iberoamericano? Bandas como Soda Stereo no tienen nada que ver con Héroes del Silencio” 

“El Rock es música que solo los blancos sabemos hacer, los latinitos no tienen nada que ver, Viva Españita!”

Y así, fue como Javier se dio cuenta de que el foro tampoco tenía moderadores, lo que le produjo una sensación de incompetencia por parte de los creadores y gestores de la app. Se preguntaba si realmente valía la pena depositar su tiempo en el uso de esa app, y sencillamente utilizar redes sociales para contactar con las personas que les interesara su producto.

User Journey

PEC 1 – Prototipado

Hola a tod@s.

Aquí tienen mi entrega de esta PEC. Me costó un poco realizar la actividad ya que no estoy acostumbrado a utilizar programas como Figma, pero logré terminar el prototipo. En este caso es un prototipo de la versión móvil de Spotify al reproducir la canción «Give it away» de Red Hot Chilli Peppers. Abajo quedan dos imágenes estáticas del prototipo; y mas abajo un link al archivo del prototipo en Figma.

Archivo de Figma: https://drive.google.com/file/d/13C1GKdE3OVDFw_X2fbaoDCdTFRmPkOG1/view?usp=drive_link

Evaluación heurística MercadoLibre

Post de analisis heurístico

En este post se realiza un análisis heurístico de la página web del ecommerce latinoamericano Mercadolibre. El análisis se realiza teniendo en cuenta los diez principios de Nielsen y su aplicación sobre la pagina teniendo en cuenta sus implementaciones buenas y malas.

Metodología

Para realizar el análisis se han seguido los textos propuestos en los recursos de la PEC en especial los relacionados con la evaluación heurística (Nielsen, 1994; Modroño, 2017, 2018; Cuaderno de evaluación de la usabilidad).  Se han tomado capturas de pantalla de cada uno de los ejemplos de los principios que se reflejan en la página, seguido de los ejemplos de buenos y malos usos de los principios heurísticos, también, se realizan recomendaciones a implementar para mejorar el diseño de la pagina y corregir lo errores notados.

1. Empate entre el sistema y el mundo real 

Buena práctica: un ejemplo de buena práctica es la forma en la que organizan algunas de las categorías de productos, la que se muestra en la imagen es la de productos de supermercado; se organizan productos con base en su utilidad, al igual que en las tiendas físicas.

Mala práctica: me parece que existe un exceso de categorías entre categorías, todo está muy “cuadriculado”, puede que el usuario pueda ubicar mejor el producto que quiere de esta manera, pero, igual es mucha información en pantalla, cosa que en tiendas físicas está mejor distribuida. Sería más útil poner un buscador dentro de las categorías, para que el usuario no pierda tanto tiempo buscando productos.

2. Diseño estético y minimalista

Este punto me parece que es un poco irónico, ya que la página cumple con un diseño estético pero a veces poco minimalista, como vamos a ver a continuación:

 

Buena práctica: en este caso, tenemos que las categorías se agrupan bajo iconos sencillos y reconocibles a los usuarios, lo cual está muy bien y no satura la interfaz.

Mala práctica: pero, por otro lado, tenemos que en la página también se muestran las categorías de manera escrita, lo cual se hace de una forma excesiva y saturante para el usuario. Como se puede ver en la imagen de abajo, todo lo que está en texto, son categorías. Quizás no sea necesario tener que quitar las categorías para solucionar, en cambio, se podrían colocar pestañas que permitan reducir la cantidad de texto en pantalla para hacer más cómoda la interacción al usuario.

3. Ayudar a reconocer, diagnosticar y recuperarse de errores

Buena práctica: En este caso se nos informa de un error en el que tratamos de ingresar con una cuenta de correo correspondiente al dominio venezolano de la página, a la página colombiana; la solución que se nos da es un link que nos redirige hacia el dominio de Venezuela.

Mala práctica:  en este caso, al tratar de crear una cuenta, en la fase de reconocimiento facial aparece un error, pero no dice ni como solucionarlo ni por que se ocasiona, entonces dejan al usuario básicamente a medio camino de crear su cuenta. Hacer evidente el error, para que el usuario sepa que está pasando sería de mucha ayuda, en conjunto con un link directo hacia soporte. 

 

4. Visibilidad del estado del sistema 

 

Buena práctica: Mercadolibre siempre nos permite conocer en qué paso de la compra nos encontramos con la opción del carrito, como también nos permite conocer qué elementos pasados hemos visto a través del historial.

 

Mala práctica: el sistema falla en siempre dar la ubicación del usuario en la página, por ejemplo, en la imagen nos encontramos en la categoría cables, pero en ningún momento se nos indica que nos encontramos allí. Sería bueno añadir un mapa de la página accesible en todo momento, para guiar al usuario.

5. Control y libertad del usuario 

Buena práctica: al crear una cuenta, te dan la opción de deshacer y de repetir alguno de los pasos anteriores por si te equivocaste al hacerlo; como también, si dejas el proceso detenido y sin completar, puedes continuarlo después.

Mala práctica: es curioso, que la mala práctica se encuentre en el mismo proceso de creación de cuenta. Solo que esta vez, se da cuando hay un fallo al reconocer tu imagen facial; el error puede seguir ocurriendo y nunca se te dan opciones para retomar después, o hacer algo distinto; es poco claro que puedes salir de la página sin perder el proceso. Así, implementar un botón que permita volver a la página anterior, o a la página principal, sería una buena idea.

 

 

6. Ayuda y documentación 

 

Buena práctica: como podemos ver, la página cuenta con un apartado de FAQ y de ayuda bastante completo, cuenta con un buscador también, para facilitar la búsqueda de información del usuario.

Mala práctica:  una mala práctica que tiene la página es que no hay forma de contacto directo, no hay direcciones de correo electrónico, ni chats de ayuda. Todo depende de que el usuario lea instrucciones y busque su solución. La solución, por lo tanto sería implementar chats de soporte, links o medios de contacto mas evidentes para el usuario.

 

7. Prevención de errores 

Buena práctica: el sistema cumple con avisar alteraciones que puede tener el servicio que presta la página, en este caso nos está avisando de que no se realizan envíos hacia la ubicación deseada y que el producto no está disponible si no hasta un día después de realizar la compra. Esto no crea falsas expectativas.

Mala práctica: En este caso tenemos una mala práctica al momento de crear una cuenta, en la que se da un fallo al utilizar la cámara del dispositivo para realizar reconocimiento facial; la cosa es, que la cámara si funciona durante todo el proceso, pero la pagina de igual manera da error y ninguna de las soluciones que propone sive. Una opción que se podría implementar, seria un link hacia soporte en caso de que el usuario no encuentre la solución.

8. Flexibilidad y eficiencia de uso 

Buena práctica: en este caso tenemos la opción del carrito de compra, la cual nos permite añadir objetos a nuestro carrito, para seguir explorando más productos para añadir. Es una opción “avanzada” que puede ahorrar tiempo de navegación a las personas.

Mala práctica: Como mala práctica, tenemos el hecho de que al iniciar sesión, después de haber seguido todos los pasos correctamente y darle al botón iniciar sesión, la página nos dice que hay que rellenar un captcha; cosa que se pudo haber hecho desde el principio. Una solución podría ser que el captcha siempre esté activo.

9. Reconocimiento mejor que recuerdo

 

Buena práctica: dentro de las categorías de compra de la página suelen haber buscadores especializados de productos, los cuales ayudan al usuario a poder realizar la búsqueda de manera más sencilla. En este caso tenemos un buscador de automóviles con varias opciones de búsqueda.

Mala práctica: en este caso tenemos que en la barra superior parece haber un exceso de “títulos” que en sí, si guían al usuario durante su navegación, pero que pueden ser reducidos mediante un símbolo, como lo es el de menú hamburguesa.

10. Consistencia y estándares 

 

Buena práctica: Una buena práctica es que los botones de acciones importantes están estandarizados con el color azul de fondo y la letra blanca para la fuente. Esto se cumple por todo el recorrido de la página.

Mala práctica: un ejemplo de mala práctica es como se utiliza el banner principal de la página, para meter publicidad de suscripciones, cuando en casi ninguna pagina que conozco pasa esto, es raro ver eso en la esquina superior derecha siempre. Una solución podría ser quitar la publicidad y no colocar nada, o colocar otro tipo de imagen que le aporte utilidad a los usuarios, por ejemplo ahí podría ir una opción de chat de ayuda.

Consideraciones de la interfaz desde una perspectiva de género e inclusión

En si, durante mi uso de la interfaz no encontré ningún tipo de discriminación directa hacia grupos sociales. La empresa como tal, cuenta con una política inclusiva bastante seria, en relación a sus empleados, aunque navegando por la página se pueden encontrar unos cuantos descuidos del género de los usuarios, como por ejemplo, en las categorías dedicadas a ropa, los filtros por género solo consisten en: hombre, mujer, niño, niña y sin género (aunque en realidad me parece que son categorías que se adaptan al tipo de ropa que se vende). La página no hace uso de colores de manera sexista, ni de manera excluyente.

De hecho, la página tiene un apartado exclusivo de accesibilidad en donde se explica su compromiso para hacer una página accesible para todo público, independientemente de sus capacidades. Constantemente se están evaluando para adaptar el uso de la página a todo público.

Prototipos (Movil, Tablet, PC) de la Web BIKI

Hola, aquí dejo mi publicación de los prototipos de la web BIKI.

Me disculpo por hacer la entrega tan tarde.

En si la actividad consistía en hacer prototipos de la pagina Web del servicio de bicicletas de Valladolid: BIKI. He realizado los diseños para en tres breakpoints distintos: PC, Tablet y Móvil, en conjunto con el Kit UI que recopila los principales elementos con los que se ha realizado la Web. También he realizado un video que muestra el funcionamiento del prototipo de PC.

Dejo una imagen del prototipo móvil y también el link al documento de Figma.

Link: https://www.figma.com/file/Jr9NfzIfyNJfYTVNmB9DH2/Untitled?node-id=11%3A296&t=nsZfemaPGw5RFbUW-1

Aquí está el video:

Prototipo de diseño especulativo

Hola, agrego mi entrega sobre el prototipo.

En este caso me basé en un boli (lapicero) para el diseño. El uso que le doy al boli es común, tomar apuntes, dibujar, etc. Para descontextualizarlo, me lo imaginé como un dispositivo que permite comunicarse a distancia a través de la escritura y el dibujo; puede interconectarse con dispositivos digitales como móviles y tablets para hacer diseños o para escribir mensajes. El nombre es LAP1.

 

¡Bienvenidos y bienvenidas!

Pública

¡Hola!

Esta publicación se ha generado automáticamente y solo puedes verla tú.

Te presentamos tu Folio, un portafolios donde podrás publicar las PEC y las actividades de tus asignaturas, además de tus proyectos propios. Te invitamos a explorarlo y personalizarlo cambiando el tema, los colores o la imagen de cabecera.

Para personalizar tu Folio y empezar a publicar entradas, navega por la barra superior y haz clic en Añadir / Entrada o accede al Tablero, donde encontrarás el menú lateral de WordPress con todas las opciones de la herramienta.

Las publicaciones que vincules a las actividades de las asignaturas se mostrarán en el Ágora del aula. Desde allí podrás ver las publicaciones de tus compañeros y compañeras y dejar comentarios.

Te recordamos que puedes elegir el nivel de visibilidad de cada publicación: pública, protegida con contraseña, campus, aula, visible solo para el profesorado y privada.

Te dejamos un link al espacio de aprendizaje donde encontrarás todas las indicaciones básicas para actualizar tu Folio, hacer publicaciones, vincularlas a las actividades de las asignaturas y hacer entregas en el REC. ¡Échale un vistazo!

Si tienes cualquier duda, puedes ponerte en contacto con el profesorado de tu asignatura o con el servicio de atención.