ActiFolio: 04 Evaluación de la usabilidad y caso de estudio (proyecto 2/2)

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