2016
Anuncit.com: Conceptualitzación y primera propuesta de interfaz gráfica PAC 1 DISSENY D´INTERFÍCIES MULTIMÈDIA AULA 2 NURIA ESPINOZA
Contenidos Introducción ........................................................................................................ 2 Personas: focales ................................................................................................ 3 Personas: secundario .......................................................................................... 5 Moodboard ......................................................................................................... 7 Propuesta gráfica ................................................................................................ 8 Versión escritorio ............................................................................................. 8 Versión móvil ................................................................................................. 10 Recursos utilizados en la propuesta gráfica ................................................... 10
1
Introducción Dentro de las dos opciones disponibles, me he decantado por la opción B ya que su interfaz me parece extremadamente intuitiva y fácil de comprender y de utilizar por un amplio rango de usuarios, ya sean nóveles en el mundo de Internet o usuarios avanzados (gracias a la ficha de usuario, por ejemplo). La navegación por íconos es fácilmente adaptable a todo tipo de dispositivos y además se ve y se entiende sin mucha dificultad. Además, la navegación por íconos habla el mismo lenguaje del usuario, le parece natural y sencillo. El darle al usuario la opción de elegir por comunidad autónoma también es un acierto, por si el usuario no tiene muy claro el objeto que busca. El diseño es minimalista, y no incluyen información poco relevante. A pesar que el modelo A es un modelo más clásico de navegación, considero que el modelo B es innovador y sobretodo, accesible. La dificultad que le veo de buenas a primeras es que el usuario entienda lo inclusiva de las categorías estando en la home, por lo que yo hubiera dado un rol más relevante en la página al buscador, convirtiéndolo en el tercer elemento visible de la página. A continuación presentaré tanto los main users de esta página web (estudiante joven y una mujer de mediana edad ama de casa), que utilizarán la web con frecuencia. También presentaré al usuario secundario, en este caso un adulto mayor con conocimientos de Internet más bien básicos y que se conectará a la web con muy poca frecuencia.
2
Personas: focales Nombre: Luis
1
Edad: 25 años Profesión: estudiante universitario Descripción de la persona Luis está soltero (por ahora), y comparte piso con tres estudiantes de edades parecidas a la suya. Viven en Barcelona, en un amplio piso en el Eixample. Cada día se desplaza en bicicleta o en transporte público para ir a la facultad. Luis tiene trabajos esporádicos (ha trabajado como camarero, repartidor, etc.) con los que complementa las ayudas periódicas que recibe de sus padres, que ya están jubilados. Luis les visita casi cada semana. Su madre le entrega un montón de tupperware con la comida de la semana, gesto que Luis agradece porque lo comparte con sus compañeros de piso (¡es mucha comida!) Luis tiene un portátil que lleva consigo a todos lados, y en el piso compartido tienen ADSL. Utiliza el ordenador para realizar trabajos de la facultad y leer artículos, aunque se conecta sobre todo a través de su móvil de segunda mano. Desde su teléfono móvil sigue las noticias del día y chatea con sus amigos. Luis es una persona bastante extrovertida y tiene un grupo de amigos con los que sale cada semana a realizar excursiones por la montaña. Descripción del escenario Ha llegado la hora de cambiar de bicicleta: su vieja BH le permite desplazarse por la ciudad sin inconveniente, sin embargo en su grupo de amigos hay algunos que comparten su afición por el ciclismo de montaña. Organizan periódicamente salidas con bicicletas alquiladas para la ocasión. Luis ha podido comprobar que realmente es un deporte que le gusta, así que se ha lanzado a la venta de su vieja bicicleta y a la compra de una de montaña de segunda mano. Nada más llegar de la universidad, se acomoda en su habitación con el portátil y comienza a buscar portales de compra/venta. Ha instalado algunas aplicaciones de portales de compra/venta en su móvil, pero a pesar de la rapidez de navegación del móvil, quiere ver las fotografías de las bicicletas en venta en un tamaño más grande para poder hacerse una opinión previa del producto. Accede al portal de compra/venta, e introduce un nuevo anuncio con fotografías en buena calidad de su vieja BH. Agradece que el formulario es claro, rápido de rellenar y no requiere registro previo; no tiene ganas ni tiempo de registrarse en otra página más que le envíe spam cada cierto tiempo. No es la primera vez que vende algo online, sin embargo agradece los consejos para publicar anuncios. Los revisa para ver si hay algún consejo que pueda poner en práctica en esta ocasión. Decide finalmente registrarse para llevar un seguimiento de las visitas a su anuncio. El proceso de registro no es complejo y le avisa cuando se le escapa algún campo que el formulario considera obligatorio.
Foto: Getty images [http://www.gettyimages.es/detail/foto/close-up-portrait-of-a-mid-20s-hipster-maleimagen-libre-de-derechos/553820327] [Fecha de consulta: 26/03/2016]
1
3
A continuación, accede a la categoría de venta de bicicletas para ver los modelos en venta y las fotografías y escribe mails a los anunciantes que le interesan.
Nombre: Ana
2
Edad: 40 años Profesión: ama de casa / anteriormente administrativa Descripción de la persona Ana está casada desde hace diez años y tiene 1 hijo de 5. Vive en las afueras de Madrid, en Alcalá de Henares. Trabajaba como administrativa en una fábrica, pero lo dejó desde que nació su hijo para dedicarse a su cuidado. Es una decisión que tomaron conjuntamente su marido y ella y de la que no se arrepiente, ya que ahora que su hijo está creciendo y su marido tiene un trabajo que les permite vivir y llegar a fin de mes, puede dedicarse a sus aficiones, especialmente la lectura. Ana es una ávida lectora y tiene una considerable cantidad de libros en casa. No sale mucho a excepción de con su marido muy de tanto en tanto, y en esas ocasiones van al cine o a cenar con el resto de su familia. Tiene un reducido grupo de amigas, aunque no comparten la misma afición que ella. En casa disponen de acceso a Internet y de un ordenador de sobremesa que tiene ya unos años. Ana utiliza el ordenador con frecuencia y accede a foros de literatura y a páginas de venta e intercambio de libros. Aproximadamente cada dos meses, Ana intercambia o vende algunas novelas por otras. Inicialmente lo hacía con sus contactos del foro, pero posteriormente pasó a visitar portales de compra/venta para sus adquisiciones. Descripción del escenario Un día laborable cualquiera, Ana queda libre de sus tareas sobre las 11 de la mañana. No quiere quedar sus amigas, ya que quiere buscar información sobre una novela que le recomendaron hace unos días en el foro de siempre. Ana accede a las tiendas online usuales (no le gusta mucho meterse en páginas que no conoce), pero no encuentra una edición que sea lo bastante barata. Accede a continuación al portal cotidiano de compra/venta de artículos de segunda mano, un portal que también le indicaron en el foro de literatura. Ana conoce bien la página y la considera de uso rápido y sencillo para usuarios medios como ella. Tras realizar la búsqueda, encuentra rápidamente un par de anuncios que venden el libro que busca. Anota los números de teléfono para llamar a los contactos y ver qué posibilidades hay de negociar o a qué distancia se encuentran de ella. Echa en falta que en este portal no se pueda enviar un mensaje privado al anunciante. Tras tantos años trabajando de administrativa se siente más cómoda escribiendo emails y preferiría no tener que llamar por teléfono.
Foto: compartemelo.com [http://compartemelo.com/por-que-las-mujeres-de-40-anos-son-las-mejores/364] [Fecha de consulta: 26/03/2016] 2
4
Ana considera que si no consigue el libro tras llamar a estas dos personas, ella misma se anunciará como compradora a través del mismo portal. Ha estado revisando el formulario y no parece nada complicado. Lo mejor de todo es que no tiene que registrarse; su experiencia previa le indica que los procesos de registro pueden ser complicados y engorrosos.
Personas: secundario Nombre: Juan
3
Edad: 70 años Profesión: jubilado, anterior transportista. Descripción de la persona Juan está casado desde hace más de 50 años con María. Viven en un barrio obrero de Barcelona, en Bellvitge. Tienen 2 hijos y 5 nietos en total. Prestan ayuda a sus hijos (tanto económica como de cuidadores) cuando lo necesitan, especialmente al más mayor de los dos, Oscar, que está en paro desde hace dos años. Juan y su mujer siempre se ofrecen para cuidar de sus nietos porque quieren ser de ayuda a su familia, sin embargo los dos cuentan con pensiones muy justas y cuidar de su familia a veces requiere que ellos mismos se queden sin dinero para sus propios gastos. Juan omite esta información a sus hijos para no darles otra preocupación. Juan a veces reflexiona amargamente que en esta edad debiera dedicarse a disfrutar sus aficiones, largamente olvidadas, en lugar de seguir preocupándose por sus hijos. Juan siempre quiso dedicarse al maquetismo y a la ornitología, sin embargo ha descartado el maquetismo ya que es muy caro para el poco dinero que le queda de su pensión tras cuidar de sus nietos cada semana. El menor de sus hijos, Javier, informático, les regaló un ordenador de sobremesa hace unos años. Juan utiliza el ordenador muy poco, porque no acaba de entender cómo funciona. Cuando Javier viene de visita, muy de tanto en tanto, Juan aprovecha para preguntarle cosas y pedirle que le enseñe a manejarlo. Cuentan con un plan de internet de los más baratos, en los que sólo se paga lo que se consume diariamente. María no tiene interés en el ordenador, pero Juan considera que podría serles útil para buscar información sobre viajes baratos, información sobre aves, promociones para tercera edad y, por qué no, quizás hay algo que pueda servir a sus hijos. Juan es extrovertido y suele decir lo que piensa. Sus conocidos ya lo saben, y no dudan en recriminarle su franqueza cada vez que quedan para jugar al dominó en el bar del barrio. Es un hombre conocido y respetado. Descripción del escenario Tras dar una vuelta al barrio y saludar a sus amigos y conocidos en el bar, Juan vuelve a casa con la compra diaria (pan y periódico). María tiene visita en el médico, y él todavía tiene 2 horas libres antes de ir a buscar a los niños a la puerta del colegio. Hoy ha decidido probar suerte, así que enciende el ordenador con cuidado y se sienta delante junto a las notas que ha ido tomando de las Foto: blogdefarmacia.es [http://www.blogdefarmacia.com/los-carbohidratos-y-el-azucar-pueden-aumentarel-riesgo-de-deterioro-cognitivo-en-adultos-mayores/] [Fecha de consulta: 26/03/2016] 3
5
clases de Javier. Sabe que el cumpleaños de María se acerca y quiere darle una sorpresa. María lo pasa muy mal sabiendo las penurias económicas que pasan sus hijos y ellos, y quiere darle un motivo para sonreír. Juan accede con dificultad al navegador y a Google, que es su página de inicio. Busca “segunda mano” para poder entrar en algunos de esos portales de los que Javier le ha hablado en alguna ocasión. Accede al primer enlace e intenta entender la página que se le presenta. A primera vista tiene unas categorías básicas presentadas en forma de dibujo, lo cual le gusta porque se ven muy claramente. Accede a la categoría “regalos” (presentada como un clásico paquete de regalo) y en la página siguiente se presenta un listado en texto con las subcategorías. Juan se siente un poco abrumado, ya que hay muchas opciones disponibles. Accede a la primera categoría “perfumes” y encuentra un listado de anuncios con imágenes. Lee algunos de ellos y decide contactar con un par de ellos, que se encuentran cerca de su zona. Le gusta que en la página salga el teléfono disponible, ya que la mera idea de enviar un correo electrónico le producía muchos nervios. Ese es un tema que todavía no entiende y que le preguntará a Javier la siguiente ocasión.
6
Moodboard He recopilado una serie de imágenes que servirán de referencia / inspiración para la creación gráfica de la página anuncit.com. La recopilación entera se encuentra en Pinterest, en el siguiente enlace: https://es.pinterest.com/quietduna/uoc-moodboard/ La siguiente imagen es un resumen de las imágenes del Moodboard en Pinterest:
7
Propuesta gráfica En primer lugar, recordar que me basaré en estos wireframes creados por un compañero:
Para la versión escritorio, utilizaré una resolución de pantalla de 1366 x 768, ya que según los últimos datos recogidos 4, es la resolución que utiliza aproximadamente un 35% de los usuarios.
Versión escritorio Propuesta gráfica:
W3Schools, “Web statistics and trends” [http://www.w3schools.com/browsers/browsers_display.asp][Fecha de consulta: 26/03/2016] 4
8
•
He seguido la paleta de colores del logo, teniendo pues las siguientes variaciones: o #2980B9 – Azul o #3498DB – Azul más claro o #a2cff0 - Azul más claro o #FFFFFF – Blanco o #000000 – Negro He modificado la posición del buscador respecto al wireframe. En la propuesta gráfica lo he situado al mismo nivel de relevancia que las categorías y el mapa; el buscador es una pieza clave de una página de este tipo y debe ganar importancia desde el primer momento. De esa manera nos aseguramos que todo tipo de usuario pueda interactuar de manera exitosa con la página: ya sea con el buscador, las categorías o el mapa. Los breadcrumbs aparecerán al comenzar la navegación (páginas de búsqueda, productos, etc). En la página principal un enlace a la home sería redundante e innecesario si queremos un diseño minimalista. Detalle del buscador expandido:
•
Detalle del hover encima de las categorías:
•
•
•
9
Versión móvil A la izquierda, página principal. A la derecha, menú sándwich abierto.
•
•
Siguiendo lo comentado anteriormente, el buscador ha ganado un sitio en la página principal, y ha salido por tanto fuera del menú secundario (sándwich) ya que así facilitamos el uso a todo tipo de usuarios. El menú secundario ocupa toda la pantalla, sin embargo no es totalmente opaco para evitar que el usuario se “pierda” en la navegación.
Recursos utilizados en la propuesta gráfica • • • •
Photoshop CC 2015 Íconos creados por Freepik [http://www.freepik.es/] en Flaticon.com [http://www.flaticon.com/free] [Fecha de consulta: 27/03/206] Mapa de España: d-maps.com [http://d-maps.com/carte.php?num_car=18039&lang=es] [Fecha de consulta: 27/03/206] Logo: anuncit.com [http://anuncit.com/] 10