Login 2.0, por Sergi Márquez

Desarrollo UX/UI

¡La puerta de Kaikoo ya está creada! (aunque no todas las puertas son iguales). A pesar de tener una estructura, necesitamos que esta forme una base sólida para que sostente, en un futuro, un diseño funcional. Antes de empezar una segunda fase de desarrollo, se ha formulado la siguiente pregunta: ¿Qué elementos necesitamos mejorar o incluir para que nuestro login ofrezca todo lo necesario para los usuarios?

El primer paso ha sido realizar un análisis detallado de la estructura previamente creada. Se realiza una identificación de posibles errores de diseño o falta de información. En este caso, el desarrollo empieza y termina de forma digital a partir de un prototipo cercano al high-fidelity y siempre focalizados en conseguir el resultado más real posible.

Mejoras de login

Empezamos el proceso por el estudio y diagnóstico gráfico para extraer conclusiones sobre los pain points observados. Cada uno se convierte posteriormente en un punto a tratar a través del cual se ofrecerá un propuesta de mejora.

Diagnóstico visual para futuros cambios en estructura y diseño
Búsqueda de propuestas de fondo que permita una mayor legibilidad además de la corrección de contraste leve entre elementos de la estructura. Cambio de vinculación de redes sociales y estudio del proceso de interacción del usuario. Proposición de reajuste general de espaciados para obtener un diseño más homogéneo.

Cambios iniciales
– Cambio y rediseño de redes sociales
– Mejoras de UI: Color botón CTA – Continuar.
– Tratamiento de color del fondo + aplicación pattern.
– Introducción de cambio de idioma.
– Corrección botón de password.
Cambios derivados
– Cambio de contraste en título.
– Mejoras de UI: Color RRSS – Hover.
– Rediseño ancho botón CTA.
– Elección tipografía.
– Rediseño color cajas de texto.

Estudio y cambio de redes sociales vinculadas a la plataforma. Eliminación de Steam como posibilidad de login por Discord y Twitch para mejorar la accesibilidad de los jugadores de esports.

Una vez seleccionadas las nuevas redes sociales, realizamos un reajuste de la composición gráfica. Cambio de las formas circulares de los iconos por formas cuadradas, consiguiendo así, más homogeneidad y harmonía entre diferentes elementos. Se definen diferentes propuestas de disposición de RRSS eligiendo, finalmente, un diseño lineal que las englobe en una sola franja horizontal.

Después de finalizar el rediseño gráfico de las redes sociales, se propone una mejora de tamaño y espaciado entre todos los elementos del login. Creación de propuesta enfocada en la mejora de detalles gráficos para conseguir más harmonía y una jerarquía visual lógica.

Mejoras tipográficas 1
Mejoras avanzadas de elementos tipográficos buscando más pregnancia visual y optimización de contraste para conseguir un flujo lógico de visualización.

– Elección de nueva tipografía buscando más carácter y personalidad.
– Mejora de frase introductoria más detallada para el uso de email.
– Mejora de contraste de la palabra “login” en el título.
– Selección y implementación de redes sociales.

Mejoras tipográficas 2 y estructura
Reajuste de la anchura general del login además del consecuente ajuste de tamaños tipográficos. Mejora de proporción entre elementos para obtener una estructura funcional cuyos elementos trabajen como una sola unidad.
– Reajuste de tamaño general y contraste tipográfico final.
– Corrección de icono “visualizar contraseña” al estado adecuado.
– Expansión de la anchura total del login.
– Rediseño de la anchura del botón CTA ajustándolo al nuevo tamaño.
– Redistribución de tamaño y espaciado avanzada.

Mejora de contraste global de elementos gracias al cambio de color del background (morado oscuro) buscando una mayor neutralidad cromática. Realización de propuestas iniciales con tonalidades de azul oscuro, cambiándolo finalmente, a un gris fundido en negro que consigue la neutralidad buscada en este proceso. La diferencia entre blancos y color funciona perfectamente con la propuesta de background final, consiguiendo así, una legibilidad máxima para el usuario gracias a un contraste de color web AAA.

Tratamiento final del background con la implementación de un pattern desigual de estrellas para otorgar más dinamismo y profundizar en el concepto de “Universo de Kaikoo”. Cambio de color, tanto de las cajas de texto como del propio texto interior para no desencajar a nivel cromático y generar más harmonía con la propuesta de background definitiva. Mejora de accesibilidad de la plataforma implementando la opción de cambio de idioma para hacer las plataformas más accesible a los usuarios en un futuro.

Introducción final de propuestas de interacción. Cambio de contrastes tipográficos y estados de uso de elementos para mejorar la accesibilidad visual del usuario y ayudarle a guiarse a través de la propuesta final de login.
– Creación de nuevo estado hover con el azul corporativo para las RRSS.
– Elección de contraste tipográfico para las cajas de texto durante su uso.
– Mejora de contraste y visibilidad del icono de visualización de contraseña.
– Elección de icono y estado del recordatorio de contraseña.
– Creación de nuevo estado OK del botón CTA con el color rojo corporativo.

Una vez realizados los cambios de interacción y contraste para la mejora final de accesibilidad, podemos dar por concluido el diseño del login. El conjunto final de elementos trabaja harmónicamente tanto a nivel de espaciado como a nivel visual. Obtención del contraste buscado entre elementos gracias al color neutro de fondo en comparación con el uso de colores corporativos. Conseguimos, finalmente, un resultado óptimo gracias a la sintonía cromática del uso de imágenes con el color interacción de elementos.

¿Quieres recibir las últimas novedades?

Suscríbete a nuestro newsletter

¿Quieres las últimas novedades?
Suscríbete ahora