PEC4. EVALUACIÓN DE LA USABILIDAD

Realización de una plataforma web para la reserva de actividades deportivas.

FUNDAMENTOS DE LA PROPUESTA GRÁFICA

PALETA DE COLORES

Los colores corporativos que he utilizado han sido 2 paletas de colores: la gama de azul y la gama del amarillo.

Por otro lado nos encontraremos los colores neutrales, la escala de grises, para utilizarlos mayormente en las tipografías.

TIPOGRAFÍA

La tipografía utilizada es ROBOTO. He elegido este tipo de tipografía por sus características tan buenas: es clara y legible. En la tipografía no he usado un patrón que siga los múltiplos de 8, ya que en cada ocasión podía venir mejor un tamaño u otro y que no correspondiera a múltiplos de 8. En cambio, a la hora del espaciado entre textos, imágenes y otros componentes sí que he seguido un ritmo armónico en la proporcionalidad siendo estos múltiplos de 8. Una vez definida la fuente tipográfica y los estilos de tamaño y peso, se utilizan los textos de esta página para crear los estilos que se utilizarán en todo el proyecto.

ESTRUCTURA    

Es importante tener en cuenta la composición utilizando múltiplos de ocho y de cuatro puesto que el desarrollo de los componentes será indispensable para la construcción de las pantallas posibles de la interfaz, por lo que tener un modelo numérico que permita la jerarquización de alimentos al interior de la pantalla ayudará enormemente en el equilibrio de la misma y en la integración de cada uno de los elementos al momento de construir un interfaz eficiente y efectiva. Utilizaremos dos tipos de rejillas, una para cada uno de los breakpoints. La rejilla del móvil consistirá en 4 columnas con un ancho entre ellas de 72px y unos márgenes/canales de 16px. La rejilla del ordenador consistirá en 12 columnas con un ancho entre ellas de 64px y unos márgenes/canales de 24px. Estas rejillas se utilizan para poder organizar bien los componentes a lo largo del proyecto.

PROCESO DE DISEÑO

El proyecto consistía es realizar una web en la que se podía hacer reservas deportivas, es decir, instalaciones: pistas, salas… Por lo que el usuario tendrá que realizar la tarea de reservar una actividad deportiva y luego pagarla. Para ello, nada más abrir la web el usuario tiene opción a: Iniciar sesión, Registrarse o Reservar (como invitado). Una vez que entra en la zona reservas el usuario tendrá que elegir una de las actividades deportivas. Después el usuario tendría que escoger día y hora. Una vez el usuario este de acuerdo con el día, la hora y el precio, el usuario tendrá que proceder al pago. Si el usuario no tiene cuenta, tendrá que rellenar todos los datos, pero si el usuario tiene cuenta, únicamente tendrá que efectuar el pago. Todo el proceso va en cadena, por lo que el usuario no debería tener problemas a la hora de efectuar una reserva y pagarla.

PANTALLA PRINCIPAL

 CREAR CUENTA

REALIZAR RESERVA

SELECCIÓN FECHA Y HORA

PROCEDER AL PAGO

RESERVA REALIZADA CON EXITO

ESTRUCTURA MÓVIL

Al ser un diseño responsive la versión móvil es muy similar a la versión ordenador. Excepto por el añadido del menú en la versión móvil, ya que si no había mucho ruido con tanta información. Está pensada para que el usuario pueda utilizarla sin problemas con una mano, ya que los usuarios que utilizan el móvil suelen usarlo de esta manera.

ESTRUCTURA ORDENADOR

UI KIT

El UI KIT completo lo podéis ver en: https://www.figma.com/file/VLslxLL3PsNSPnK6LnlzsS/PEC2_ANDREAOMEDES_PROTIPADO_2?node-id=9%3A19

 

 

 

 

MEJORAS

Dados los resultados de la tabla puedo concluir con una serie de mejoras que aplicaré en la web, tanto en la versión ordenador como en la versión móvil.

Las iré enumerando de manera que en la parte de mejoras veremos los cambios que he efectuado conforme a los problemas dados.
Dónde la primera imagen es el prototipo antiguo y la segunda la mejora

*Para ver mejoras del ordenador ir a:

https://www.figma.com/file/VLslxLL3PsNSPnK6LnlzsS/PEC2_ANDREAOMEDES_PROTIPADO_2?node-id=702%3A1878

1. No sabe cómo volver atrás o a inicio cuando ha creado la cuenta

2. Al rellenar datos le gustaría ver siguiente y atrás

3. No sabe cómo volver atrás o a inicio cuando ha creado la cuenta

4.Buscador o filtro en la parte de elección de actividades

5. Celda de aceptar condiciones es algo pequeña

6. Las horas en formato móvil se ven pequeñas

7. No ve el botón de atrás. Va hacia arriba de la web e intenta hacer clic en el evento donde salen todos los datos de la reserva para modificar la fecha

8. Al finalizar una reserva le gustaría que hubiera un botón para ir a inicio.

CONCLUSIONES

De este proyecto, me llevo el saber empatizar con el usuario para una mejor realización de una plataforma. Por más que tú pienses que está todo correcto, eso lo piensas tú y solo tú.
Me llevo el saber diseñar de una manera Resposive, pensando en al menos 3 dispositivos: ordenador, tablet y smartphone.

Crear una web puede ser simple, pero no nos damos cuenta de todo lo que lleva detrás. Todo lo que se emplea para que quede un diseño bonito, usable e interactivo.
Hablo de los componentes, las interacciones (default, presionado, hover, desabilitado…), de posición siguiendo una reticula, de chebox, desplegables y de muchas cosas más.

No hemos hecho código (HTML o CSS), pero si que hemos tenido el cuidado y la precisión de hacer todo que sea prototipable y que los informaticos nos miren raro y nos hagan reestructurar completamente el prototipo.

Cada proyecto que he ido haciendo he ido descubriendo muchas más cosas y perfeccionando técnica, algo que en Febrero veía imposible.

Aún me queda mucho por aprender, pero estoy segura que este es el camino y que para aprender hay que fallar, fallar, fallar y al final llegar al éxito

Un saludo a todos y gracias por leerme

VIRTUAL.MUTEK. ESCENARIO Y USER JOURNEY

Hola chicos y chicas!

Os voy a presentar el escenario que he escogido para Anne Woods en el que Anne recibe un correo de que va a participar en el VIRTUAL.MUTEK.

PLANTEAMIENTO

Un día cualquiera Anne está en casa trabajando en su trabajo de Freelance, cuando acaba la jornada se pone cómoda y mira sus correos, antes de ponerse con nuevas creaciones digitales para sus redes sociales. En su correo ve un mail de MUTEK, no le extraña pues esta apuntada a la newtseller, pero este correo es diferente. Lee atentamente y descubre que ha sido seleccionada para participar en el festival 2022 de MUTEK. Le indican que han creado una nueva App para tener a sus usuarios más cerca y poder interactuar unos con otros, además incluyen nueva tecnología como performances en streaming y realidad aumentada. Le pasan un link de la App para que pueda acceder a ella.

ACCIÓN

Se descarga la app llamada VITUAL.MUTEK y el primer paso es crearse un nuevo perfil. Introduce sus datos: Nombre, nombre de pila (o de artista), correo electrónico (para poder recibir la autentificación del correo y notificaciones futuras), contraseña nueva, hay una casilla para elegir si eres artista o publico y finalmente si tienes un código de invitación. Introduce todos sus datos, mete el código que le han pasado en el email. Y le da a aceptar. Inmediatamente recibe un correo para verificar el registro en la aplicación. Le da a aceptar, le lleva a la app donde mete su nombre y contraseña y le pregunta si quiere recordar la contraseña, acepta y ahora ya puede navegar por la app. En la home aparece los diferentes países donde se celebra el festival MUTEK, y dentro de cada uno todas las fechas y artistas que van y la hora de actuación. En el menú situado arriba a la derecha, descubre que hay varias opciones: comunidad, performances en streaming, performances en Realidad virtual, programación, venta de entradas y perfil. Se mete en comunidad y descubre que ya hay diferentes grupos creados, donde puedes observar el título del grupo, los artistas que están incluidos, y el numero de personas que hay en el grupo. En la parte de arriba hay un buscador por nombre del artista para ver si hay algún grupo creado. Y la opción de Crear nueva comunidad (grupo). Ve que, aunque siga arrastrando el dedo para seguir viendo más grupos tiene un circulo con la opción de +. Le da y ve que es para crear un nuevo grupo. Como ve que no hay ningún grupo con su nombre decide crear uno, poniendo su nombre en el grupo. Lo crea y escribe un primer mensaje dando la bienvenida a todos, y contándoles que esta deseando que empiece el festival y le da a enviar. Ve que no solo puede escribir si no que puede mandar videos (donde ya tiene pensado subir varios de ella hablando, en conciertos…) tiene una opción de compartir a redes sociales, por tanto, no se lo piensa dos veces y lo comparte en cuantas más mejor.

DESENLACE

Termina ojeando el programa para ver que artistas van y que día le va a tocar a ella pinchar, de esta manera puede organizarse los vuelos, los temas para pinchar y nuevo contenido para sus seguidores. Sale de la aplicación contenta porque va a poder hablar con sus seguidores, ya que, auqnue no vayan a aningún concierto, la app es gratuita y la comunidad estará ahí para cuando ellos quieran.

Anne consigue:

– Registrarse.

– Crear un nuevo grupo en la comunidad.

– Organizarse la agenda sabiendo que día va a tocar.

¡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.