Publicat per

Wireframe de El País

Publicat per

Wireframe de El País

Para la realización del siguiente wireframe de baja fidelidad me he basado en la página de inicio del periódico de El País,…
Para la realización del siguiente wireframe de baja fidelidad me he basado en la página de inicio del periódico…

Para la realización del siguiente wireframe de baja fidelidad me he basado en la página de inicio del periódico de El País, y he utilizado el programa de Adobe Illustrator para su elaboración.

Magdalena Hodur

 

Imagen original:

 

Debat0el Wireframe de El País

No hi ha comentaris.

Publicat per

Wireframe The Guardians – RETO2

Publicat per

Wireframe The Guardians – RETO2

Opté por el periódico The Guardian para la actividad de la tabla de interacción, que veo que realmente hace las cosas diferentes…
Opté por el periódico The Guardian para la actividad de la tabla de interacción, que veo que realmente hace…

Opté por el periódico The Guardian para la actividad de la tabla de interacción, que veo que realmente hace las cosas diferentes y satisface los requisitos de la actividad al ofrecer una versión impresa, una aplicación móvil y un sitio web.

Además, elegir este medio me permitió comprender mejor el gran despliegue de Experiencia de Usuario que tiene.

Para diseñar el wireframe, seleccioné la página de una noticia de Cambio Climático que ofrecen en su one page inicial.

En el Wireframe (hacer click para verlo más grande) apliqué un sistema de 12 columnas, con gutters y márgenes muy similares a la página de The Guardians (hacer click para ver la original).

 

Y el wireframe que hice fue este:

Debat0el Wireframe The Guardians – RETO2

No hi ha comentaris.

Publicat per

R2-Wireframe Web del periódico Clarín

Publicat per

R2-Wireframe Web del periódico Clarín

Aquí presento el wireframe del diario Clarín versión desktop. Concretamente es la pantalla de una nota completa donde, además de el header propio del periódico, se puede apreciar a la derecha secciones con información extra para navegar por otras notas. Al final se puede ver una sección de comentarios y más sección con otro tipo de información para seguir interactuando y navegando por el sitio. Al final el footer propio del diario. Entrega de la actividad R2 …
Aquí presento el wireframe del diario Clarín versión desktop. Concretamente es la pantalla de una nota completa donde, además…

Aquí presento el wireframe del diario Clarín versión desktop. Concretamente es la pantalla de una nota completa donde, además de el header propio del periódico, se puede apreciar a la derecha secciones con información extra para navegar por otras notas. Al final se puede ver una sección de comentarios y más sección con otro tipo de información para seguir interactuando y navegando por el sitio. Al final el footer propio del diario.

Debat0el R2-Wireframe Web del periódico Clarín

No hi ha comentaris.

Publicat per

WIREFRAME-R2

Publicat per

WIREFRAME-R2

¡Hola! Para la entrega del reto 2 de la asignatura he decidido trabajar bajo la página “Home” de la web de El…
¡Hola! Para la entrega del reto 2 de la asignatura he decidido trabajar bajo la página “Home” de la…

¡Hola!

Para la entrega del reto 2 de la asignatura he decidido trabajar bajo la página “Home” de la web de El País en formato escritorio. Para su diseño he utilizado el software Adobe XD.

Debat0el WIREFRAME-R2

No hi ha comentaris.

Publicat per

R2. Wireframe

Publicat per

R2. Wireframe

He escogido el periódico Soria Noticias. El wireframe lo he realizado de la página principal, en concreto de una sección. Entrando en…
He escogido el periódico Soria Noticias. El wireframe lo he realizado de la página principal, en concreto de una…

He escogido el periódico Soria Noticias.

El wireframe lo he realizado de la página principal, en concreto de una sección. Entrando en la web se puede observar que todas tienen la misma disposición:

Debat0el R2. Wireframe

No hi ha comentaris.

Publicat per

R2 – Wireframes del periódico EL PAÍS

R2 – Wireframes del periódico EL PAÍS
Publicat per

R2 – Wireframes del periódico EL PAÍS

Buenas tardes a todos, Adjunto los dos Wireframes que he realizado de la página de inicio del periódico EL PAÍS: 1. Wireframe…
Buenas tardes a todos, Adjunto los dos Wireframes que he realizado de la página de inicio del periódico EL…

Buenas tardes a todos,

Adjunto los dos Wireframes que he realizado de la página de inicio del periódico EL PAÍS:

1. Wireframe de la versión web

2. Wireframe de la versión móvil (app)

¡Saludos!

Debat0el R2 – Wireframes del periódico EL PAÍS

No hi ha comentaris.

Publicat per

R1.2: posar benzina

R1.2: posar benzina
Publicat per

R1.2: posar benzina

El recorregut escollit per a la part 3 del Repte 1 és el que faig quan vaig a posar benzina al cotxe.…
El recorregut escollit per a la part 3 del Repte 1 és el que faig quan vaig a posar…

El recorregut escollit per a la part 3 del Repte 1 és el que faig quan vaig a posar benzina al cotxe. La persona de l’estudi és un home, de 45 anys, que treballa al sector tecnològic, fa teletreball, i utilitza el cotxe per a desplaçaments personals.

El recorregut l’he dividit en tres fases:

  • Fase 1: del pis al cotxe: sortir del pis, agafar l’ascensor, anar fins al pàrquing, i pujar al cotxe.
  • Fase 2: recorregut al cotxe fins a la benzinera
  • Fase 3: utilitzar una app per omplir el dipòsit del cotxe.

Fase 1:

Surto del pis, i depenent de si vaig amb el gos o no, agafo l’ascensor. Com que avui el porto, l’agafo. El pàrquing és a un altre edifici, així que obro la porta amb el comandament a distància, obro el cotxe, i l’engego.

Fase 2:

Quan he engegat el cotxe, trio si escolto música, la ràdio, si poso el gps, etc. Com que l’actualitat és interessant, avui escullo la ràdio.

Fase 3:

Arribo a la benzinera i obro l’aplicació per pagar i poder posar benzina:

  1. Primer, he de triar la ciutat on soc, i després dir-li que vull posar benzina.
  2. El següent pas és triar el número de sortidor; el carburant i l’import no cal modificar-los, tot i que desconec si són predefinits o són els de l’última vegada.
  3. Pago i espero a rebre l’avís que el pagament s’ha efectuat correctament.
  4. Faig una doble comprovació i miro a la pantalla del sortidor que realment puc posar benzina.
  5. Omplo el dipòsit.

 

Interaccions:

  • Sistema multimèdia del cotxe. Tipus: Instructing / Estil: GUI i Touch
  • Aplicació mòbil per posar benzina. Tipus: Instructing / Estil: GUI i Touch
  • Pantalla del sortidor de benzina. Tipus: Instructing / Estil: GUI

 

 

Debat0el R1.2: posar benzina

No hi ha comentaris.

Publicat per

Actividad R1 parte 3: Mapeo de experiencias interactivas

Publicat per

Actividad R1 parte 3: Mapeo de experiencias interactivas

Hola buenas, les dejo por aquí mi entrega de la actividad 1 parte 3. La verdad he querido hacerlo con un vídeo por que creo que es la manera que mejor sé comunicar y hacer realmente una mejor experiencia de usuario. Muchas gracias. Entrega de la actividad R1 …
Hola buenas, les dejo por aquí mi entrega de la actividad 1 parte 3. La verdad he querido hacerlo…

Hola buenas, les dejo por aquí mi entrega de la actividad 1 parte 3. La verdad he querido hacerlo con un vídeo por que creo que es la manera que mejor sé comunicar y hacer realmente una mejor experiencia de usuario. Muchas gracias.

Debat0el Actividad R1 parte 3: Mapeo de experiencias interactivas

No hi ha comentaris.

Publicat per

R1. Mapa de experiencia.

R1. Mapa de experiencia.
Publicat per

R1. Mapa de experiencia.

Mapa de experiencia de ir a escalar al rocódromo Quien va al rocódromo lo hace mayoritariamente para: 1- Desconectar y evadirse 2-…
Mapa de experiencia de ir a escalar al rocódromo Quien va al rocódromo lo hace mayoritariamente para: 1- Desconectar…

Mapa de experiencia de ir a escalar al rocódromo

Quien va al rocódromo lo hace mayoritariamente para:

1- Desconectar y evadirse

2- Hacer deporte

3- Iniciarse antes de ir a practicarlo al aire libre

Tanto los socios como los monitores del recinto, en su mayoría se desplazan hacia el recinto

1- En coche, ya que se encuentra algo alejado, en el polígono de la ciudad

2- En bici

Al no ser un deporte muy popular, y que no está estructurado de una manera estable, veo necesaria una pequeña explicación de como funciona el rocódromo.  Hay dos tipos de usuarios principales: Los que van por libre, estos pueden venir solos o con compañeros, pero no tienen una tarea predeterminada, sino que ellos mismos se van marcando los objetivos. O bien, los que van con un monitor, estos si que tienen un proceso y unos timings más marcados, aunque cada monitor plantea su propio entreno y plantea actividades distintas. Nos centraremos en aquellos usuarios que van por libre.

Por mi propia experiencia y lo que he podido observar, la rutina en el rocódromo, por los usuarios que van por libre es la siguiente:

Primeramente se calienta para evitar lesiones, seguidamente, después de ponerse magnesio en las manos, se busca un circuito del primer o segundo nivel para empezar a habituarse ha subir y bajar, aún con un ritmo pausado. Una vez te encuentres preparado, empiezas a intentar subir circuitos de tu nivel.

¿Cómo se distinguen los circuitos entre ellos?

 

Figura 1. Sala Batec. Sabadell (2023) Recuperado de: https://www.diaridesabadell.com/2023/06/16/sala-boulder-sabadell/

Como podemos ver en la Figura 1 en la pared existen hileras de piezas de un mismo color, como la hilera de piezas amarillas, la hilera de piezas rojas… esto son cada uno de los circuitos. La actividad principal es subir del suelo hasta el final de la pared, solo usando en manos y pies, las piezas de un mismo color, es decir, subir un circuito.

¿Cómo se diferencia el nivel de cada circuito?

 

Figura 2. Soporte informativo, leyenda de niveles
(2024) Fotografía de elaboración própia

Como vemos en la Figura 2, en este rocódromo existe una leyenda que clasifica los niveles de dificultad por colores, siendo el amarillo el más sencillo y el negro el más complicado, un sistema similar al que usan las pistas de esquí. Para identificar estos niveles en la pared, debes fijarte, no, en el color de las piezas, sino en el color de unas tarjetas que son colocadas en la pieza de inicio de cada circuito.   

Estas explicaciones anteriores me han servido para ser consciente de lo que era escalar, para observar si existía alguna problemática, para aclarar y aclararme algunos puntos del proceso que ni yo misma era consciente de ellos.

FASES:

1. Prepararse
ACCIONES:

– Preparar la mochila

– Vestirse con ropa deportiva

– Salir de casa

2. Desplazamiento hacia el rocódromo
ACCIONES:

– Ir hacia el coche

– Conducir hasta el rocódromo (entender y respetar las señalizaciones de tráfico)

– Aparcar

3. Llegada al rocódromo
ACCIONES:

– Ir del coche hasta la puerta del rocódromo

– Abrir la aplicación del móvil (dónde hay un QR)

– Iniciar sesión

– Colocar el QR en un dispositivo lector que se encuentra al lado de la puerta

– Entrar

– Perdir tu numero de pié para que te den los pies de gato en el mostrador (te piden el nombre, el numero y pagar 1,50€)

4. En el rocódromo
ACCIONES:

– Cambiarse los zapatos de calle por los de escalada

– Ponerse los auriculares

– Abrir la aplicación de música del móvil

– Reproducir lo que nos apetezca escuchar

– Buscar un circuito de tu nivel.

-¿Cambiar de música?

Finalmente llegamos a:

Figura 3. Experience map (2024) Recurso de elaboración própia

Después de realizar el Experience map (Figura 3) me he dado cuenta que en el proceso de “Ir a escalar al rocódromo” hay más interacciones de las que era consciente, los podemos ver en la fila amarillo limón, “SISTEMAS DE INTERACCIÓN”, dónde he destacado los puntos del recorrido dónde existe una interacción. Para esta actividad he escogido tres interacciones, las cuales he destacado en azul oscuro en la fila “COMENTARIOS”, estas han sido seleccionadas porque existía un sistema interactivo, o bien porque carecía de él.

SISTEMA DE INTERACCIÓN 1

Aplicación móvil con un QR que acciona la puerta a través de un dispositivo lector.

El sistema que usan para accionar la puerta corredera es correcto, es fácil e intuitivo y les permiten tener un control de quien entra a la sala. El sistema interactivo consta de un usuario, el cual necesita un dispositivo digital que tenga instalada la aplicación del rocòdromo. Esta tendrá acceso a un QR que abrirá la puerta del local cuando este se aproxime al dispositivo lector que encontramos en la pared. El usuario se siente contento con este sistema, des de que lo instalaron el usuario se siente más libre para entrar i salir del recinto sin preocuparse de llevar nada encima, más lo que siempre tiene en la mano, el móvil. En la Figura 4 podemos ver el recorrido que se lleva a cabo, intuitivo, rápido y práctico.

Figura 4. Pantallas de la aplicación móvil con el QR que acciona la puerta (2024) Imagen de elaboración propia

Los usuarios también creen que la aplicación está muy desaprovechada, ya que se podría usar para más cosas. En el botón de reservas no te deja reservar, solo te informa si la sala está reservada. En el botón de “El teu centre” de informa de los horarios y de la ubicación, datos importantes, pero que se encuentran más rápidamente si se busca en internet. Finalmente, en el horario, pasa un poco como en el botón anterior, supone menos engorro buscarlo en internet. Sin duda, según los usuarios la app, no es funcional, exceptuando para abrir la puerta que es para lo que la usan.

PROPUESTAS DE MEJORA
  • Crear un chat/ foro para crear una comunidad (al fin y al cabo, el que escala, es un sector bastante reducido)
  • Anuncios de los eventos y competiciones que se efectúan en los recintos, ya sea en las salas de escalada o en el bar
  • Apartado de estiramientos o ejercicios para mejorar el equilibrio, la fuerza y la flexibilidad (ayudaría mucho a los/las que se inician)
  • Sección de ¡NEWS! Para mantenerse informado de las noticias del sector (enfocado más a profesionales o gente muy metida en el deporte)
  • Roadmap sobre espacios naturales dónde poder practicar este deporte.

 

SISTEMA DE INTERACCIÓN 2

Sistema por tarjetas de colores de clasifican los circuitos según el nivel de dificultad.

El lenguaje que usan confunde bastante a los usuarios, nos encontramos con tres problemas que complican la experiencia, es poco entendible. El principal problema nace de usar un lenguaje basado en colores para clasificar la dificultad de los circuitos y que los circuitos también se diferencien entre ellos según los colores. El problema según los usuarios surge cuando están en una conversación. Ejemplo: Marta, ¿quieres que probemos el circuito rojo?

Rojo ¿el nivel? ¿El color de las piezas? No acaba de quedar claro de lo que se habla. Como ya hemos visto en este mismo documento, durante la explicación de como funcionaba el rocódromo, ya se planteaba esta problemática (respaldado por la Figura 2) Otra problemática que nos encontramos es que la leyenda dónde queda explicada la clasificación de colores por niveles queda situada en el principio de la sala, así que para recordarla deber dirigirte al inicio. Por último y seguramente, más importante, los usuarios necesitan que los circuitos estén debidamente señalizados y esto muchas veces no ocurre. Las tarjetas que marcan la dificultad de los circuitos a veces no existen, o están caídas o arrugadas. El problema reside en que, no solo,no saben el nivel de dificultad, sino que estas marcan el inicio y el final de los circuitos y si estas faltan supone un conflicto para iniciar la escalada.

Figura 5 i 6. Tarjetas de colores para identificar los niveles según la leyenda de la Figura 2 (2023)
Imagen de elaboración propia
PROPUESTAS DE MEJORA

En este caso propongo esta interacción ya que según la observación he podido comprobar que existe una carencia de un circuito interactivo, dónde el usuario se sienta más tranquilo y no se le generen tantas dudas. Un sistema de leds, un lenguaje menos repetitivo, ya que el color de las piezas es el que es, usar un sistema numérico o de formas para indicar el nivel.

 

SISTEMA DE INTERACCIÓN 3

Usar auriculares y escuchar música mientras se escala.

Los usuarios escuchan música mientras escalan, para hacerlo, necesitan un dispositivo reproductor, que suele ser el móvil con alguna aplicación como Spotify y un dispositivo emisor que son los auriculares. Los auriculares son un sistema muy cómodo, portátil y ligero para escuchar música (Figura 7), la complicación de este sistema viene cuando se necesita cambiar una canción, atender a una llamada, parar la música… mientras se escala, ya que para todas estas acciones, ya sea a través del móvil o del auricular, son necesarias las manos, funcionan con un sistema táctil. Otro contratiempo que se encuentran los usuarios  al escalar es el de accionar, sin querer, con la mano, con el brazo… la parte sensible al tacto del auricular y ocasionar alguna acción no deseada como cambiar o parar la música.

Figura 7. Auriculares ergonómicos, diseñados para hacer deporte (2023)
Imagen de elaboración propia

 

Figura 8. Captura de la pantalla
de Spotify cuando reproduces
una canción (2023) Imagen de
elaboración propia
PROPUESTAS DE MEJORA

En esta ocasión, el usuario no esta del todo descontento con la experiencia. Los auriculares que usan son muy ergonómicos, se adaptan bien a la fisiología y están preparados para no caerse con movimiento, como vemos en la Figura 7, estos se adaptan bien a la oreja. En cuanto a la cuestión de no poder cambiar/parar una canción mientras escalan, no les supone mucho problema. La modalidad de escalada que practican es “Boulder”, en esta la altura máxima que podrán subir es de 4,5 metros, al ser poca altura, rápidamente estarán de vuelta en el suelo, a demás de ser un deporte que consiste en la prueba i el error y en estudiar y entender como se sube el circuito, así que gran parte del entrenamiento, están en el suelo, por tanto las manos disponibles para cambiar la música.

Debat0el R1. Mapa de experiencia.

No hi ha comentaris.

Publicat per

R1 – Parte 3: Información de campo del recorrido

R1 – Parte 3: Información de campo del recorrido
Publicat per

R1 – Parte 3: Información de campo del recorrido

CONTEXTO Uno de mis recorridos habituales es ir a entrenar, más concretamente, un entrenamiento de Crossfit. Llevo varios años entrenando en el…
CONTEXTO Uno de mis recorridos habituales es ir a entrenar, más concretamente, un entrenamiento de Crossfit. Llevo varios años…

CONTEXTO

Uno de mis recorridos habituales es ir a entrenar, más concretamente, un entrenamiento de Crossfit. Llevo varios años entrenando en el mismo box, para poder lograr el entrenamiento la opción más conveniente para llegar al sitio es la que paso a describir, junto con los procesos de interacción con los que tuve en el camino.

RECOGIDA DE INFORMACIÓN

Para poder asistir a la clase de Crossfit tengo que reservar mi lugar a través de la app, por lo general, se consigue sitio. Pero hubo temporadas en donde había que reservar con anticipación, caso contrario estaba todo lleno. En la app también puedo ver los ejercicios del día para saber si tengo que llevar la comba, las calleras o si hay algún ejercicio de piernas poder llevarme el protector para las rodillas ya que tengo una lesión en una de ellas. En la clase de hoy hay sentadillas, con lo cual trabajaré piernas, tendré que protegerme la rodilla para evitar lastimarme.

Una vez preparada la mochila con todo lo necesario, salgo de casa camino a una estación de Bicing, miro la app SMOU para ver cuantas bicicletas hay disponibles por la zona. La estación cerca de casa tiene 4 bicicletas libres, apuro el paso para que otra persona no me las quite, ya que si no consigo bicicleta llegaría tarde o perdería la clase.

Por suerte, cuando llego quedan dos, entonces con la tarjeta la libero la bicicleta y me pongo a pedalear por el carril bici y me dirijo al box.

Al llegar a la estación cerca del box de Crossfit, aparco la bicicleta en uno de los 8 lugares libres que hay, sin problemas. Camino un calle y entro al box donde tengo que acreditarme con la app para confirmar que haré la clase que me había apuntado previamente. Aun no terminaron los de la clase anterior, con lo cual espero junto con mis compañeros.

Una vez dentro del área para el entrenamiento, veo la pantalla donde describen los ejercicios, repeticiones y tiempos. Esto suele ser complicado si es la primera vez que se hace Crossfit ya que son todos nombres en inglés y son diferentes a una clase de un gimnasio o sala fitness. Pero como ya me los conozco, no me resulta un problema, con lo cual una vez el coach de la orden puedo arrancar mi entrenamiento.

INTERACCIONES
(Estilos/Tipos)

  • Gesture-Typing/Manipulating -> Reservar con la app mi lugar en la clase.
  • Gesture/Exploring -> Mirar la app SMOU por disponibilidad de bicicletas.
  • Touch/Instructing -> Liberar una bicicleta con la tarjeta.
  • Touch/Instructing -> Pedalear al sitio.
  • Gesture-Typing/Manipulating -> Acreditarme con la app y confirmar asistencia.
  • Gesture/Exploring -> Ver pantalla con los ejercicios.

Debat0el R1 – Parte 3: Información de campo del recorrido

No hi ha comentaris.