Dani Garcia Bazaco -
EX.05 Disseny d’una interfície digital, estudi de la usabilitat i millora de l’experiència d’usuari Ergonomia, percepció i usabilitat Elena Bartomeu Magaña Eina, curs 2013/2014
1. Autobriefing El ejercicio consiste en desenvolupar una aplicación para smartphone, desde el diseño de una interfaz digital, la usabilidad y mejora de la experiencia del usuario. La app que propongo desenvolupar nace con el propósito de acabar con esta pregunta: ¿En que tienda vi ese regalo? MemoryBox App, permite a los usuarios recordar objetos que encuentran en las tiendas. Funciona haciendo una foto al objeto y guardando la geolocalización del establecimientos. Los objetos se guardaran en listas creadas por el usuario, para poder recordar los objetos más adelante.
1.1. Anàlisi estratègic del target a traves d’una narrativa Corremos sin cesar porque no sabemos adónde vamos ni qué queremos hacer con nuestra vida. Como detenernos a pensar nos da miedo, existe el riesgo de descubrir que andamos perdidos, entre una cápsula de experiencia instantánea y la siguiente, seguimos a la carrera. Sobre esto, el periodista José María Romera afirma que “la agitación que impera en nuestro tiempo deja poco espacio a la reflexión y al sosiego. Esperar es casi un acto heroico cuando la conducta más frecuente ante el rechazo o el fracaso es el abandono a las primeras de cambio. Sólo en la medida en que nos reconciliemos con la duración propia de cada cosa podremos obtener de ella el máximo beneficio”. Hay una serie de hábitos que nos permiten pasar de lo instantáneo al lento y placentero rugido de la cafetera de la vida. Algunos de ellos serían: Recuperar el hábito de esperar. Aunque haya cola en una tienda o parada del mercado, si es allí donde queremos comprar, no buscar una solución instantánea cambiando de lugar. La prisa es un ritmo que afecta a nuestra vida cotidiana. Nos impide elegir actividades que requieren reposo, sosiego, como son leer, reflexionar, asistir a reuniones, tertulias, charlar… No tenemos tiempo para este tipo de actividades, pero sí para otras, que requieren de un ritmo trepidante: dar una vuelta por un centro comercial lleno, ir de bares, asistir a actividades masivas, en las que siempre hay que estar entrando a empujones. Ser espectadores de espectáculos que hacen pasar el tiempo de manera rápida.
2. Anàlisi de referents d’aplicacions similars Evernote App cuyo objetivo es la organización de información personal. Evernote te permite tomar notas, capturar fotos, crear listas de cosas pendientes y grabar recordatorios de voz. Foursquare Red social que consiste en geolocalizar donde estás. Funciona haciendo check-in en lugares específicos donde te encuentras y así ganar puntos por descubrir nuevos lugares. Stylepixi App que se define como tu asistente de compras personal. Consiste en compartir tus fotos para que tus amigos te den “feedback” antes de adquirir un producto. Wallapop mercadillo virtual donde los productos se muestran ordenados en función de lo cerca que se encuentran de ti. Funciona sacando una foto con tu smartphone al producto y publicarlo en la aplicación.En pocos segundos tu artículo estará a la venta. Gus App que acaba con el problema que tienen los aficionados a la lectura cuando entran a una librería y no sabemos qué libre elegir. Gracias a Gus, el lector lleva en el bolsillo un asesor personal que le recomienda siempre los mejores libros para el. La app permite escanear el código de barras de cualquier libro para dejar una valoración personal con un sistema rápido y sencillo.
3. Selecció de funcions connectives amb altres mitjans no interactius a traves del desenvolupament de Narrativa Transmedia MemoryBox quiere que la experiencia del usuario sea más participativa al verse forzado a encontrar dicha información en diferentes medios. La app tiene un programa de televisión semanal en BTV, sobre moda, tendencias y eventos para que sus usuarios esten a la última. A través de la app los usuarios pueden subir sus fotos i/o videos de los diferentes eventos que propone la aplicación, como por ejemplo, la inauguración de una tienda en el Born, y así coloborar en crear el programa de televisión. En definicitiva, los propios usuarios de la app se convierten en reporteros y coolhunters. Otra función para crear experiencias en las que los usuarios fuesen partícipes, MemoryBox se inventa un juego muy sencillo pero efectivo. La aplicación cada semana sube una foto de un producto estrella. El primer usuario que encuentre ese producto y lo capture, haciendo una foto y geolocalizando el establecimiento, lo gana. Este juego hace que el usuario se convierta en un cazatesoros y no un simple usuario pasivo.
4. Disseny de l’Arquitectura de la informació a traves de l’esquema de models mentals. Necessàries tres funcions complertes. 1. “CAPTURAR” OBJECTO 1.1 FOTOGRAFIAR EL OBJETO 1.1.1 Clicar en el menú “Captura” 1.1.2 Encuadrar y enfocar objeto 1.1.3 Clicar botón para hacer la foto 1.1.4 Aceptar o cancelar la foto 1.2 GEOLOCALIZAR EL OBJETO 1.2.1 Verificar que la localitzación es correcta 1.2.2 Seleccionar la tienda 1.2.3 Clicar botón validación (arriba a la derecha) 1.3 FICHAR OBJETO 1.3.1 Clicar encima de “Nombre del objeto” 1.3.2 Escribir el nombre del objeto (teclado) 1.3.3 Clicar encima de “Descripción” 1.3.4 Escribir la descripción del objeto (teclado) 1.3.5 Clicar encima de “€” 1.3.6 Escribir el precio del objeto (teclado) 1.3.7 Seleccionar la lista donde queremos añadir el objeto 1.3.8 Clicar botón validación (arriba a la derecha)
2. JUGAR AL JUEGO 2.1 PARTICIPAR 2.1.1 Clicar en el menú “Juego” 2.1.2 Encontrar el producto estrella 2.1.3 Clicar en el botón “Lo encontré” 2.2 FOTOGRAFIAR EL OBJETO 2.2.2 Encuadrar y enfocar objeto 2.2.3 Clicar botón para hacer la foto 2.2.4 Aceptar o cancelar la foto 2.3 GEOLOCALIZAR EL OBJETO 2.3.1 Verificar que la localitzación es correcta 2.3.2 Seleccionar la tienda 2.3.3 Clicar botón validación (arriba a la derecha) 2.4 FICHAR OBJETO
2.4.1 Clicar encima de “Nombre del objeto” 2.4.2 Escribir el nombre del objeto (teclado) 2.4.3 Clicar encima de “Descripción” 2.4.4 Escribir la descripción del objeto (teclado)
3. PARTICIPAR EN EL PROGRAMA DE TELEVISÓN 3.1 COLABORAR 3.1.1 Clicar en el menú “TV” 3.1.2 Clicar en el evento que queramos participar 3.1.3 Clicar botón “Coloborar” 3.2 FOTOGRAFIAR O GRABAR UN VÍDEO 3.2.1 Encuadrar y enfocar objeto 3.2.2 Clicar botón para hacer la foto o el vídeo 3.2.3 Aceptar o cancelar la foto o el vídeo 3.3 GEOLOCALIZAR EL EVENTO 3.3.1 Verificar que la localitzación es correcta 3.3.2 Seleccionar localización 3.3.3 Clicar botón validación (arriba a la derecha) 3.4 FICHAR EVENTO 3.2.1 Clicar encima de “Nombre del video” 3.4.2 Escribir el nombre del video (teclado) 3.4.3 Clicar encima de “Descripción” 3.4.4 Escribir una descripción (teclado) 3.4.5 Clicar botón validación (arriba a la derecha)
5. Disseny de la interfície d’usuari Wireframes de la función 1, “CAPTURAR” OBJECTO
1
2
LISTAS Ropa
6
Regalos Navidad
4
Libros
2
Ideas
5
Futuros caprichos
4
Otros
5
3
4
atrás
UBICACIÓN Buscar o crear ubicación
Dresscode Bcn Carrer de Lledó, 10
7
TweenSurf
Carrer del Bonaire, 2
Special Events Man Carrer dels Vigatans, 11
Furest Listas
Ubicaciones
Captura
Juego
Avinguda Diagonal, 468
Tv
5
6
8
Nombre del objeto Descripción
Camiseta Básica
|
€
Descripción
TweenSurf
€
Rollito surfer
TweenSurf
TweenSurf
Carrer del Bonaire, 2
Carrer del Bonaire, 2
LISTAS
25€
Carrer del Bonaire, 2
LISTAS
LISTAS
Ropa
7
Ropa
7
Ropa
7
Regalos Navidad
4
Regalos Navidad
4
Regalos Navidad
4
Libros
2
Libros
2
Libros
2
Ideas
5
Ideas
5
Ideas
5
Futuros caprichos
4
Futuros caprichos
4
Futuros caprichos
4
Otros5
Otros5
Otros5
LISTAS Ropa
7
Regalos Navidad
4
Libros
2
Ideas
5
Futuros caprichos
5
Otros
5
Listas
Ubicaciones
Captura
Juego
Tv
5. Disseny de la interfície d’usuari Wireframes de la función 2, JUGAR AL JUEGO
1
2
LISTAS Ropa
7
Regalos Navidad
4
Libros
2
Ideas
5
Futuros caprichos
5
Otros
5
Listas
Ubicaciones
5
Captura
Juego
UBICACIÓN Buscar o crear ubicación
JUEGO
3
4
SÉ EL PRIMERO EN ENCONTRAR Y CAPTURAR EL PRODUCTO ESTRELLA Y SERÁ TUYO!!!
Tv
6
7 Nombre del objeto comentario
Impossible Barcelona
Carrer d'En Tantarantana,16
¡gracias por partipar! en breves nos pondremos en contacto con usted si es el ganador. Suerte Impossible Barcelona Carrer d'En Tantarantana,16
TweenSurf
Carrer del Bonaire, 2
Special Events Man Carrer dels Vigatans, 11
Furest
Avinguda Diagonal, 468
atrás
5. Disseny de la interfície d’usuari Wireframes de la función 3, PARTICIPAR EN EL PROGRAMA DE TELEVISÓN
1
2
LISTAS Ropa
7
Regalos Navidad
4
Libros
2
Ideas
5
Futuros caprichos
5
Otros
5
TV
3
TV
¿QUIERES AYUDARNOS A CREAR NUESTRO PROGRAMA DE TV? Sube foto y/o videos de los diferentes eventos que te proponemos
Flea Market Barcelona 12.1.14
Inauguración Impossible Barcelona 16.1.14
Party Polaroid Barcelona 7.2.14
Listas
5
Ubicaciones
Captura
Juego
Tv
6
7
¡gracias por colaborar! en breves visulizaremos el archivo. Nombre del video Descripción
4
6.1 Planificació i desenvolupament de test d’usuari El test de usabilidad se ha llevado a cabo para obtener retroalimentación de los usuarios de forma que, tras la observación de su comportamiento al usar la app, sea posible corregir y mejorar aspectos de usabilidad. El test a dos usuarios se ha efectuado en una aula, y el tercer usuario se le ha realizado en una tienda, ya que es donde se utilizará la aplicación. El test de los 3 usuarios siempre ha empezado con la explicación de la App. Despúes de la explicación se les decia como harias para “Capturar” un objeto (función 1). Los usuarios tenien los pantallazos ordenados de cada función en su mano. Cada vez que querian pasar de pantalla se les preguntaba ¿que crees que aparecerá ahora? Pregunta que sirve para tener feedback del usuario y ver que espera que aparezca en la siguiente pantalla. En todo momento se ha dejado al usuario libre, pero si tardaba un tiempo razonable y no encontraba lo que les pedía, les hacía preguntas como, ¿que encuentras a faltar? o ¿que estás buscando? A continuación especificaré los comentarios y/o opiniones de los usuarios que tuve durante el test para algunas modificaciones y mejoras en la interfaz. Maica Sangüesa, me comenta que hace falta poder registrarte como usuario. También dice que echa de menos un botón de validación una vez has seleccionado la ubicación del objeto. Comenta que estaría bien que saliera el nombre de la App en el menú. Maica en todo momento me ha acertado las pantallas que iban a salir. Tu Nguyen, en la función 1 (“Capturar” objeto) se pensaba que tenia que ir primero a una lista. Sobre el juego “producto estrella” comenta que la gente no se a mover por un producto de poco valor. Siempre tiene que ser un regalo atractivo para el usuario. El juego tiene que ser más social para que la gente se implique y quiera jugar. Tu Nguyen se equivocó al pensar que después de hacer la foto del producto saliera la pantalla de geolocalización. Marina Cazorla no encontraba el producto estrella, no entendía que el regalo que salía en la pantalla lo tenía que buscar. Una vez a realizado la foto y ha sido geolocalizado, entiende perfectamente que puede crear más lista y puede seleccionar las que ya existen. En general, las 3 funciones se han entendido bastante bien, aunque hay aspectos que se pueden corregir y mejorar.
6.2. Introducció de millores en base als resultats obtinguts. Pantallas de la función 1, “CAPTURAR” OBJECTO
1
2
usuario contraseña
Ropa
4
Regalos de Navidad
5
Libros
3
Ideas
7
Futuros Caprichos
4
Dia de la Madre
2
3
4
8
9
crear nuevo usuario conectarse con facebook
Listas
5
UBICACIÓN
6
UBICACIÓN
Ubicaciones
Captura
Juego
tv
7 Nombre del objeto Descripción
Buscar o crear ubicación
Descripción
€
Rollito surfer
€
TweenSurf
TweenSurf
TweenSurf
LISTAS
LISTAS
LISTAS
Carrer del Bonaire, 2
Buscar o crear ubicación
Camiseta Básica
Cami|
25€
Carrer del Bonaire, 2
Carrer del Bonaire, 2
Ropa
4
Ropa
4
Ropa
4
Regalos de Navidad
5
Regalos de Navidad
5
Regalos de Navidad
5
Libros
3
Libros
3
Libros
3
Dresscode Bcn
Dresscode Bcn
Ideas
7
Ideas
7
Ideas
7
TweenSurf
TweenSurf
Futuros Caprichos
4
Futuros Caprichos
4
Futuros Caprichos
4
Special Events Man
Special Events Man
Dia de la Madre
2
Dia de la Madre
2
Dia de la Madre
2
Carrer de Lledó, 10
Carrer del Bonaire, 2
Carrer dels Vigatans, 11
Carrer de Lledó, 10
Carrer del Bonaire, 2
Carrer dels Vigatans, 11
Pantallas de la función 2, JUGAR AL JUEGO 1
2
Ropa
4
Regalos de Navidad
5
Libros
3
Ideas
7
Futuros Caprichos
4
Dia de la Madre
2
3
4
7
8
Sé el primero en encontrar y capturar este producto y será tuyo gratis!
LO ENCONTRÉ
Listas
Ubicaciones
5
Captura
Juego
UBICACIÓN
tv
Listas
Ubicaciones
6
Captura
Juego
UBICACIÓN
tv
Instant Lab Convierte las fotos del iPhone en polaroids Impossible Barcelona Carrer d’En Tantarantana,16
¡GRACIAS POR PARTIPAR! en breves nos pondremos en contacto con usted si es el ganador. ¡Suerte!
Buscar o crear ubicación
Buscar o crear ubicación
Impossible Barcelona
Impossible Barcelona
Furest
Furest
Special Events Man
Special Events Man
Carrer d’En Tantarantana,16
Avinguda Diagonal, 468
Carrer dels Vigatans, 11
Carrer d’En Tantarantana,16
Avinguda Diagonal, 468
Carrer dels Vigatans, 11
Listas
Ubicaciones
Captura
Juego
tv
Pantallas de la función 3, PARTICIPAR EN EL PROGRAMA DE TELEVISÓN 1
2
Ropa
4
Regalos de Navidad
5
Libros
3
Ideas
7
Futuros Caprichos
4
Dia de la Madre
2
3
4
¿QUIERES AYUDARNOS A CREAR NUESTRO PROGRAMA DE TV? Sube fotos y/o videos de los diferentes eventos que te proponemos
Flea Market Barcelona 12.01.2014
12.1.14
Inauguración Impossible Barcelona
Flea Market Barcelona
16.01.2014
Calle del Portal de Santa Madrona www.fleamarketbcn.com
COLABORAR Party Polaroid Barcelona 7.02.2014
Listas
5
Ubicaciones
6
Captura
Juego
UBICACIÓN
tv
Listas
Ubicaciones
7
Captura
Juego
UBICACIÓN
Listas
tv
Ubicaciones
Captura
Juego
tv
9
8 Amor de Flea Market Estuve por la mañana de paseo ¡Genial! Flea Market Barcelona Calle del Portal de Santa Madrona
¡GRACIAS POR COLABORAR! en breves visualizaremos el archivo.
Buscar o crear ubicación
Buscar o crear ubicación
Flea Market Barcelona
Flea Market Barcelona
Calle del Portal de Santa Madrona
Calle del Portal de Santa Madrona
TweenSurf
TweenSurf
Special Events Man
Special Events Man
Carrer del Bonaire, 2
Carrer dels Vigatans, 11
Carrer del Bonaire, 2
Carrer dels Vigatans, 11
Listas
Ubicaciones
Captura
Juego
tv