Saltar al contenido principal

4.6. UX / UI

4.6.1. Arquitectura#

Basándose en la investigación previa de la técnica y de la competencia se estructura la siguiente arquitectura/user flow. Unificar la arquitectura y el user flow permite agilizar tiempos, facilitar la lectura del gráfico y permite contrastar información.

Los objetos grises representan pantallas, ajustes o detalles únicamente visibles para la primera visita a la página de un usuario. Los objetos negros representan componentes comunes a usuarios nuevos y habituales. A continuación se detalla cada punto de la arquitectura.

1. Onboarding#

Indicaciones sobre el onboarding

Utiliza los elementos presentes en la app para poner ejemplos y guiar al usuario. Únicamente aparecen cuando el usuario entra por primera vez. También se pide al usuario permitir notificaciones y abrir nuevas pestañas.

2. Web app (Landing Page)#

Indicaciones sobre la Landing Page En esta pantalla se encuentran los elementos o accesos mencionados a continuación. Es una pantalla dividida en dos. A la izquierda encontramos el temporizador y a la derecha el listado para añadir tareas. En la parte superior y de izquierda a derecha, encontramos la opción para añadir el título del proyecto. Seguidamente disponemos del acceso al "Weekly Planner" y los ajustes.

3. Temporizador#

El tiempo se representa con el peso de la tipografía (Ultra, cuando el temporizador empieza y Hairline cuando el temporizador acaba).

Con opciones para empezar, pausar y resetear el temporizador. Donde se muestra un temporizador con cuenta atrás. La primera vez que se accede estará preestablecido a 25 minutos. Las siguientes veces se inicia con el tiempo ajustado por el usuario (si es el caso).

3.1. Tiempo de trabajo#

Indicaciones sobre el Tiempo de trabajo

25 minutos o según establecido por el usuario

3.2. Notificación de escritorio (macOS)#

Por sonido y tarjeta (del sistema operativo). Indica el inicio/cambio de pausa o trabajo.

3.3. Tiempo de descanso corto#

Indicaciones sobre el tiempo de descanso corto

5 minutos o según establecido por el usuario

3.4. Tiempo de descanso largo#

Indicaciones sobre el tiempo de descanso largo

15 minutos o según establecido por el usuario

3.4. Tareas#

Listado de tareas permite añadir tareas y eleiminarlas. En hacer clic la tarea se puede editar. La tarea activa sincroniza su peso con el peso del temporizador. Una vez completada, se atenúa.

Debajo de la tarea activa se calcula la hora de finalización.

3.5. Progreso#

Accesible una vez completado el Pomodoro. Zona donde el usuario puede ver estadísticas ya digeridas, como en el caso de Strava y su "Year in Sport". A diferencia de la competencia, que únicamente ofrece los datos en estadísticas crudas. Es importante ofrecer al usuario la información ya digerida, una de esas funciones que puede hacer la máquina si definimos los parámetros necesarios.

3.6. Ajustes#

Indicaciones sobre los ajustes

Modo oscuro por defecto, saltar tarea/temporizador auto, ajustar tiempos, ajustar Pomodoro, información y créditos.

3.7. Weekly Planner#

Indicaciones sobre el Weekly planner

Planificador semanal sincronizado con las tareas del día. Las tareas no realizadas, saltan al siguiente día. Permite crear una organización general antes de empezar el proyecto.

4.6.2. UX#

A continuación se detallan funcionalidades o accesos directos diseñados para ofrecer una experiencia más fluida al usuario.

Preconfigurar con el subdominio#

Esta funcionalidad va ligada con el naming. Aprovecha la parte del subdominio3, para preconfigurar el temporizador de la app. El usuario/a introduce un número, seguido de un punto y el dominio (número.minutesto.work), el temporizador estará preconfigurado con los minutos deseados. Ejemplo:

La URL conserva las tareas del proyecto#

Utilizando la zona de ruta de acceso y combinándola con la memoria caché del navegador, se pueden almacenar tareas de diferentes proyectos. Siempre y cuando el usuario no elimine dicha caché. Una alternativa seria almacenar los datos en un servicio externo, esto supondría un coste regular, por ende impidiendo que la app pueda ser utilizada libremente. Se define con el título del proyecto.

Ilustración de que la URL conserva las tareas del proyecto

Interactividad de los botones#

Los botones en la barra de navegación, interactúan con el usuario cuando este pasa el cursor (hover). Las interacciones previsualizan dentro del botón lo que va a suceder, permitiendo al usuario reconocer pasivamente la función del botón y a identificar rápidamente. Por ejemplo, en el caso de los ajustes, como aparece una ventana de arriba abajo, el botón de "SETTINGS", previsualiza el movimiento bajando el bloque naranja de arriba abajo.

Tiempo de descanso representado con el incienso#

La pausa de 15 minutos se representa con el incienso, una representación del paso del tiempo más pausada y relajada. Semióticamente indica del paso del tiempo y un momento de meditación.

4.6.3. Sonidos#

Se han creado dos sonidos. Uno para el final del temporizador, y otro para el inicio del temporizador. El sonido ha sido creado con un xilófono, ya que tiene un sonido poco estridente, pero suficientemente agudo para captar la atención. Entre los dos sonidos hay una diferencia de semitono, uno en el espectro de sonido "animado" y otro en el "serio".

Start#

El inicio se presenta con un ritmo animado.

End#

La pausa se marca firmemente y el sonido se prolonga más para suavizar el enlace con el silencio de la pausa.

4.6.4 UI#

A continuación se detallan los componentes que forman interface y también un timeline de las diferentes versiones de la web app y su desarrollo.

UI (Design System)#

Estos son los componentes utilizados toda la web app y sus diferentes estados. Además se detalla su lógica en cuanto proporciones e incrementos.

Tipografía#

Constan 8 estilos tipográficos, seis de los cuales se rigen por el incremento en la unidad de rem. Dos de estos estilos se reservan para el temporizador, es decir un estilo para minutos y un estilo para segundos. Ambos varían su peso según los minutos. Los seis estilos restantes van del tamaño XL, L, M (Versión de capitulares), S, XS y XXS. El incremento tipográfico se rige por 1.8 rem.

Ilustración de la escala tipográfica

Color#

La paleta cromática se ha definido en el apartado la identidad. Para definir las diferentes actuaciones se ha utilizado la herramienta de código abierto Scale. A continuación se muestran los enlaces a la web app.

Ilustración de la escala tipográfica

↑ Primario (Ver en Scale)

Ilustración de la escala tipográfica

↑ Secundario (Ver en Scale)

Ilustración de la escala tipográfica

↑ Acentuación (Ver en Scale)

Espaciado#

Existen diez tamaños de espaciado, que se rigen por un incremento de 1.4 respecto al anterior. El tamaño mínimo establecido es de 7 píxeles y el tamaño más grande establecido es de 120 píxeles.

Ilustración de la escala de espaciado

Componentes interactivos#

Existen tres tipos de botones. El primero es un switch, el segundo es estilo radio y el tercero el botón clásico. Este último se comentan detalle en el apartado de usabilidad. También se ha creado un input, separadores y un estilo de sombra. Descubrir su interacción en la sección de prototipado.

Ilustración de los componentes


  1. Subdominio. 2016, 17 marzo. En Wikipedia, la enciclopedia libre.https://es.wikipedia.org/wiki/Subdominio