UI ABC

UI ABC

Vistas por usuarios

• Vistas para todos los usuarios
  • Landing page
  • Login
  • Navbar
• Vistas empresas
  • Registro
  • Dashboard inicial
  • Ver proyectos
    • Búsqueda candidatos
    • Entrevistas programadas
    • Asignación/selección de candidatos
      • Vista Proyectos
        • Creación de proyecto
    • Botón en la vista de proyectos
    • Formulario de creación de proyectos
      • Resultados de entrevistas
    • Botón en la vista de proyectos para ir a resultados
    • La entrevista tiene un puntaje (visto en estrellas) y un comentario.
    • Listado de personas que presentaron entrevistas para el proyecto
    • Filtros: Fechas, Rol, Tipo y Candidato
      • Sección Candidatos contratados
    • Un listado de candidatos contratados con un botón al frente que diga calificar
    • Al dar clic al botón calificar muestra un modal con estrellas y campo para dejar comentario
  • Vista Búsqueda de candidatos
    • Listado de candidatos según filtros aplicados
    • Panel para escoger y aplicar filtros
    • Modal para ver el detalle de un candidato
  • Vista entrevistas programadas
    • Listado de entrevistas con fecha y hora, nombre candidato, proyecto.
    • Es un maestro detalle que al desplegarlo muestra toda la info
  • Vista de asignación de candidatos
    • Listado de candidatos que participaron en el proceso con nombre, número de cédula y correo electrónico
    • Un check para escogerlos y finalmente guardarlos
• Vistas candidatos
  • Registro
  • Dashboard candidatos
    • Listado de pruebas a presentar
    • El listado es un maestro detalle con un botón al frente que diga presentar
• Vistas ABC
  • Registro
  • Registro de nueva prueba técnica
  • Cargue de banco de preguntas
  • Asignar pruebas a candidato
    • Listado de candidatos
    • Un botón asignar pruebas
    • Se despliega una modal con un dropdown para escoger las pruebas disponibles

Prototipo de papel

Al definir las vistas se optó por crear un prototipo de papel que nos permitió aclarar dudas sobre las interacciones que debería tener el usuario con la aplicación. El proceso que se siguió fue el siguiente:

• Identificar las historias de usuario que se van a implementar en el MVP
• Enumerar las vistas a elaborar
• Definir el contenido de las vistas
• Realizar el cableado entre vistas
• Testear el prototipo con un posible usuario y evaluar las interacciones
• Anotar y corregir

Las conclusiones a las cuales llegó el equipo a partir del prototipo fueron:

• Falta incluir varias vistas para cargar información de pruebas y preguntas
• Se deben ajustar algunos flujos en la aplicación correspondientes a la asignación de pruebas

Web

https://www.figma.com/file/DHBjUgakFdVozgwQ3k41lX/Untitled?type=design&node-id=0%3A1&mode=design&t=FVh6FjiqjE9U8By7-1

Mobile

https://www.figma.com/file/wvsMK3VsHfulwpWlnYEBZX/Mobile?type=design&node-id=54496%3A24452&mode=design&t=B3FFhxE4lYvRP3zg-1

Decisiones de diseño

Escogencia del color

Basado en la teoría de psicología del color y los aspectos que queremos transmitir:

• Profesionalismo
• Seriedad
• Exclusividad
• Seguridad

El color primario que escogimos es el azul y el secundario el gris, por tanto, la paleta de colores escogida es la siguiente:

La establecemos en los mockpus de figma con la ayuda de la herramienta de Material IU dispuesta para los colores

Fuente

La elección de la fuente Roboto está justificada por las siguientes razones:

• Legibilidad: Roboto es una fuente de pantalla diseñada especialmente para la legibilidad en dispositivos digitales. Su forma limpia y sencilla facilita la lectura en pantallas pequeñas, lo que la convierte en una opción ideal para aplicaciones móviles y sitios web.

• Versatilidad: Roboto es una fuente versátil que se adapta bien a una amplia variedad de estilos de diseño. Puede ser utilizada para aplicaciones tanto formales como informales, y se ve igualmente bien en tamaños de fuente pequeños y grandes.

• Compatibilidad con dispositivos: Dado que Roboto es una fuente de código abierto desarrollada por Google, es ampliamente compatible con dispositivos Android y otros sistemas operativos. Esto garantiza una consistencia en la apariencia de la fuente en diferentes plataformas y dispositivos.

• Estilo moderno y limpio: Roboto tiene un aspecto contemporáneo y limpio que se adapta a las tendencias de diseño actuales. Su diseño neutral y sin adornos la hace adecuada para una amplia gama de aplicaciones, desde aplicaciones de negocios hasta aplicaciones de entretenimiento.

• Variedad de pesos y estilos: Roboto ofrece una variedad de pesos y estilos, desde regular y delgada hasta negra y condensada, lo que permite una mayor flexibilidad en el diseño de la interfaz de la aplicación. Puedes utilizar diferentes pesos para destacar información importante o para crear jerarquía visual.

• Licencia abierta: Roboto se distribuye bajo la licencia de fuente abierta Apache, lo que significa que se puede utilizar de forma gratuita en proyectos comerciales y no comerciales sin preocuparse por problemas de licencia.

• Pruebas de usabilidad: Roboto ha sido probada en términos de legibilidad y usabilidad en numerosos proyectos y se ha convertido en una opción popular en la industria, respaldada por su éxito en la experiencia del usuario.

Accesibilidad

Para mejorar la accesibilidad del sitio se utilizó un plugin de Figma que permite revisar el contraste de los mockups. Con esta herramienta identificamos las partes que presentaban dificultades para personas de una condición visual y fueron corregidas según las indicaciones de la misma herramienta.

Internacionalización y localización

Para incluir estas dos características se debe adjuntar la librería i18Next. La documentación está disponible en la página oficial https://www.i18next.com/