Pública Reto 1
Prototipado interactivo de la app de Heaspace
Headspace es una aplicación de meditación y bienestar que ofrece guías para reducir el estrés, mejorar el sueño y fomentar la atención consciente.
Como parte de la entrega del reto 1 para Prototipado, he trabajado en replicar la aplicación de Headspace de la forma más realista posible.
Para ello, he elegido la versión para iOS en un iPhone 14. Por defecto, la aplicación reconoce la apariencia por sistema, así que es la versión ‘dark mode’.
Paso 1. Mapear la aplicación
Como punto de partida, descargué la aplicación y comencé creandome una cuenta para tener acceso a todas las funcionalidades. Grabé la pantalla para poder tener registro de todo y también hice capturas de pantalla para replicar luego.
Ordené las pantallas horizontalmente de forma que el recorrido sea lógico: primero la animación de splashscreen, el inicio de sesión, la pantalla de inicio, etc. para que sea más fácil seguir el recorrido.
Paso 2. Reconocer átomos del sistema
Una vez finalizado e identificado todas las funcionalidades a incluir, me enfoqué en reconocer patrones que se repitieran a lo largo de la aplicación.
Algunos elementos atómicos como paleta de color, tipografía y botones; y otros moleculares como cards, paneles y menúes.
Paso 3. Construir el Sistema de Diseño
Después de haber analizado los elementos básicos, comencé creando variables para la paleta de colores y la tipografía. Elegí una librería de íconos o avatars que se adaptaran a mis necesidades para no tener que crearla desde cero y comencé a diseñar uno por uno los componentes del diseño.
Utilicé Coolicons para los íconos y UI Faces – Free AI avatars como plugins de Figma
Este paso me demandó tiempo y dedicación pero trabajar con variables bien nombradas y también hacer uso del autolayout me permitió implementar cambios rápidos masivos e ir corrigiendo desde el componente principal.
Paso 4. Diseñar las pantallas
Tomé como referencia pantalla por pantalla para ir construyendo en orden las funcionalidades que deseaba incluir en el prototipo. Esto me ayudó a identificar estados intermedios que debía tener en cuenta, así como también ir agregando elementos a mi Sistema de Diseño que eran necesarios para continuar construyendo.
La reutilización de componentes adaptables me sirvió para hacer de esta etapa un trabajo ameno y avanzar a pasos agigantados.
Paso 5. Crear el prototipo
Una vez creadas todas las pantallas, comencé a crear interacciones que permitieran generar un prototipo interactivo. Algunas fueron simples, sólo de transición; y otras incluyeron micro-interacciones más complejas como la animación del inicio, los push-to-refresh o los skeleton y loaders al cargar contenido.
Una mejora clave fue agregar punto de ancla en el prototipo para tener un listado de todas las funcionalidades en el panel de la izquierda, además de comentarios descriptivos.
Paso 6. Testear, testear y testear
Al finalizar el prototipo, comencé a testearlo para encontrar posibles errores o mejoras. Me aseguré que las funciones básicas estuviesen alcanzadas pero también agregué nexos internos para enriquecer la experiencia y hacerla lo más real posible.
Fundamentos para la generación de una interfaz gráfica
Otro de los puntos de desarrollar en base al diseño, era la reflexión de los Seis Principios Básicos que integran composición, percepción visual o psicología cognitiva.
En mi caso, encontré ejemplos de los siguientes principios:
Jerarquía
Página Hoy con scroll
La estructura utilizada en las páginas de Meditaciones, tienen una clara jerarquía que se repetirá como patrón en otras parte la aplicación.
Una imagen de portada ocupa la atención primaria, seguido del título principal, el botón y el resto de los elementos.
El espacio entre el bloquen de texto y el CTA hacen más obvia la acción principal: Reproducir la meditación
Agrupamiento
Ley de Continuidad
En el scroll de la página de Hoy, se puede ver un claro ejemplo de continuidad en el grupo de tarjetas del catálogo de material.
Al hacer ‘push to refresh’, todo el conjunto se mueve en bloque indicando que es parte del mismo grupo
Ley de Semejanza
Si bien cada tarjeta tiene su propia imagen, título y elementos gráficos, se puede reducir a una estructura base para todas por igual.
Este ejemplo se ve reflejado en el skeleton al cargar la página de Hoy
Consistencia
Coherencia interna
Utilizar decisiones consistentes a lo largo de la aplicación, genera un mejor aprendizaje del usuario al momento de tomar decisiones.
Los botones de acción o CTAs, por ejemplo, se ubican por lo general en la parte de abajo de la pantalla para facilitar la llegada con los pulgares
Ver zona confortable de interacción en móviles
Economía y Reutilización
Paleta de color
Dentro de las distintas áreas del Sistema de Diseño creado, se puede encontrar la paleta de colores que permite construir rápidamente con variables cualquier elemento a incluir en la aplicación.
Esto agiliza el diseño, evita el trabajo manual y crea el mínimo de variables para estandarizar visualmente el diseño y economizando recursos que pueden adaptarse a distintos escenarios
Affordance
Carrousel
Dentro de la aplicación, es posible encontrar un carrousel cuando el usuario expande la información de los guías de una meditación.
Se muestra la primera tarjeta, pero también se deja ver el inicio de la siguiente a su derecha. Sumado a ello, los puntos debajo dejan intuir que es posible hacer una interacción horizontal para ambos lados
Prototipo Interactivo
Experimenta la interacción por tu cuenta
Video del Prototipo
Mira un video de cómo se ve el diseño
¿Dudas o comentarios?
Escribeme a cmanterola@uoc.edu
Este es un espacio de trabajo personal de un/a estudiante de la Universitat Oberta de Catalunya. Cualquier contenido publicado en este espacio es responsabilidad de su autor/a.