Espacio Personal

Autor: Paula Pérez Expósito (Página 2 de 2)

Pec 1 – Deconstrucción de una interfaz gráfica

En este trabajo hemos analizado la página Airbnb. Para ello hemos analizado los elementos de la interfaz, desarrollado un UI Kit y finalmente hecho un prototipo de la página.

Todo esto lo hemos construído en base a 3 breakpoints. Escritorio, Ipad y móvil.

Os adjunto unas capturas de mi UI Kit.

Retículas: 

Como se puede ver tenemos diferentes sistemas para cada una de los breakpoints, pero mantuvimos el sistema de columnas.

 

Iconografía de la web: 

Hemos recogido la iconografía más utilizada

Tipografías: 

Elementos: 

Hemos recogido los elementos que más se repetían a lo largo de los breakpoints

Por último os dejo el vídeo de mi prototipado: https://www.loom.com/share/663e48fa0ffa4f59b260c6d5723f22f4

Y el enlace a mi archivo de figma:

https://www.figma.com/file/GjcK2VZCxD1jRF4cunpurF/Airbnb?node-id=80%3A2250

 

Muchas gracias por leerme!

 

Interacciones: Mapa de experiencia

Para obtener la información del campo recorrido, he elegido un trayecto que realizo todos los días que consiste en ir de mi casa a la parada del autobús.

Para ello interactúo con mi ascensor en un primer momento. Lo primero que hago es llamarlo, me indica mediante una luz que lo he llamado correctamente y de alguna manera, me sorprende que con ese simple gesto yo sepa que va a llegar en algún momento.

Tras esto entro en el ascensor y vuelvo a pulsar el botón que me llevará a la planta baja. El sistema es el mismo, pulso, se ilumina y así entiendo perfectamente que él entendió mi orden.

Tras esto lo que hago es mirar a la pantalla que me indica en qué piso estoy todavía, parece una tontería pero esta información me dice mucho del tiempo disponible. Además me indica si estoy bajando o subiendo.

Una vez en la calle, abro la aplicación del autobús, quiero saber de cuánto tiempo dispongo para llegar a la parada antes que el autobús.

Te abre directamente la pantalla de líneas, pudiendo acceder desde ahí a la línea que sea necesaria.

En mi caso me es más cómodo acceder a la pantalla de favoritos donde previamente he guardado las paradas a las que más recurro.

Y una vez allí le doy a la parada que necesito para obtener la información y así saber del tiempo que dispongo

Cuando llega mi autobús, lo que tengo que hacer es pagar, he grabado (muerta de vergüenza) como interactúo con la máquina de pago. Me indica que he pagado correctamente de dos maneras, por un lado hace un sonido y por otro lo muestra en la pantalla. En este caso había dinero en la tarjeta así que no ha habido ningún sonido de error.

como veis en el vídeo se puede escuchar el sonido y en la pantalla el saldo disponible.

Como conclusión puedo sacar que me sorprende que elementos tan simples como un ascensor o un autobús puedan llegar a interactuar con las personas y a hacer que estas reciban el mensaje de una manera supersimple y que prácticamente todo el mundo lo entienda.

Entradas siguientes »