⌚️ Diseñar una app para watchOS

Nuevos horizontes (2020), un amanecer en Barcelona (Nuria Gómez Delgado).

Una vez tenemos claro que vamos a trabajar en este dispositivo, porque aporta un valor al usuario, o simplemente por probar, ¿cómo empezamos a diseñar?

Layout

• Muestra el mismo contenido, sin importar el dispositivo, los textos y las imágenes se ajustarán a los espacios.
• Evita mostrar demasiada información, no saturar la pantalla con detalles innecesarios.
• Crea agrupaciones visuales para ayudar a los usuarios a encontrar la información que desean.

• Usa el ancho completo de la pantalla. El bisel proporciona un relleno visual natural alrededor del contenido.
• Evita usar más de dos o tres controles. Los iconos son más efectivos que el texto para botones en paralelo.
• Alinea los elementos a la izquierda, es más fácil de leer.

• Tiene esquinas redondeadas, que pueden recortar el contenido; para evitarlo, diseña en el área de contenido seguro. Las esquinas superiores suelen estar bloqueadas por la toolbar. Los textos deben alinearse con los márgenes, pero los elementos gráficos y los botones llegan hasta el borde.

Tipografía

La fuente propia del sistema es la tipografía San Francisco (SF). En este caso se usa la SF Compact y la SF Compact Rounded (para complicaciones).

• Utiliza estilos de texto integrados siempre que sea posible, funcionan bien y las personas reconocen las jerarquías visuales.
• Mejora la legibilidad y ahorra espacio entre líneas de texto. Los diseños funcionan mejor cuando aumenta o disminuye este espacio.
• No utilices más de una tipo de letra adicional, pueden no ser legibles en tamaños pequeños, y no admiten la función Dynamic Type.
• Usa tamaños de fuente grandes para garantizar la legibilidad. Ajusta el tamaño del texto para asegurar la legibilidad al estar en movimiento.
• Prueba la legibilidad del contenido en escenarios de uso comunes, por ejemplo, en el exterior a la luz del sol o mientras están en movimiento.
• Destaca la información más importante, usando el peso, tamaño y color de la fuente. Evita pesos light y ultra-ligh por debajo de 20pt.
• Usa SF Compact Text para texto de 19pt o menos, SF Compact Display para texto más de 20pt y SF Compact Rounded para complicaciones.

Texto de tamaño dinámico

Dynamic Type proporciona flexibilidad al permitir que las personas elijan su tamaño de texto preferido.

Tracking

Es la separación natural que hay entre letras. Apple muestra los valores de tracking en función del tamaño de la letra. Toda la información aquí.

Color

El uso adecuado del color proporciona continuidad visual, respalda tu marca y ayuda en la comunicación. Hay colores globales y se pueden añadir otros.

• Usa el negro para el color de fondo de tu aplicación, para combinar con el bisel y crear la ilusión de una pantalla sin bordes.
• Evita usar el color como la única forma de mostrar interactividad.
• Usa el color de tu marca como color de acento, para dar consistencia y familiaridad. Si tienes que usar colores adicionales, asegúrate de usar colores claros para el texto para garantizar la legibilidad y el contraste.
• Usa contraste de color. El contraste insuficiente hace que el contenido sea difícil de leer. Una calculadora de contraste de color en línea puede ayudar. Recomiendan estar sobre 7: 1.

Diseño Visual

Icono de la App

Como en cualquier aplicación, se debe proporcionar un icono para la pantalla de inicio. Es circular y no muestra ningún texto adjunto.

• Hazlo simple, captura la esencia. Si el contenido es demasiado complejo, los detalles no se verán. Aprovecha la forma circular para tu diseño.
• Mantén cierta similitud con las aplicaciones de iOS y watchOS. No es necesario que sean idénticos, pero deben ser reconocibles juntos.
• Proporciona un solo punto focal, un elemento único y centrado que capte de inmediato la atención e identifique claramente su aplicación.
• Diseña iconos como imágenes cuadradas a sangre usando el tamaño dado. Apple Watch aplica automáticamente una máscara circular.
• Formato PNG, desentrelazados y sin transparencia. La profundidad de la imagen es de 24 bits. Crea todos los iconos con una resolución de 2x.
• Evita usar el negro para el fondo, para que no se mezcle con el fondo de la pantalla. Puedes aclararlo o añadir un borde.
• Evita el texto, ya que suele ser demasiado pequeño. Se puede usar la primera letra, para ayudar a las personas a reconocer tu aplicación.
• Si tienes una aplicación complementaria, mantén cierta similitud entre los iconos de la aplicación de watchOS y iOS. No necesitan ser idénticos.

Apple marca todos los tamaños, y los iconos deben tener las especificaciones que se ven en la tabla. Además, tienen tamaños concretos para los iconos. Puedes ver toda la información aquí.

Gliphs e imágenes

Se pueden usar imágenes en complicaciones y notificaciones, normalmente se usa un gliph, que es una imagen monocromática con transparencia. Cuando el sistema muestra un gliph, aplica el color de acento que tiene tu aplicación.

• Genera gliphs como archivos PDF con ajuste de escala automático. Sino, puedes dar archivos PNG separados por dispositivo.
• Establece el grosor de la línea en 2pt o más para garantizar la legibilidad si diseñas tus propias imágenes.

Optimización de imágenes

Es importante para mejorar el rendimiento, esfuérzate por diseñar para que sean lo más pequeñas posible mientras logras un rendimiento óptimo.

• Utiliza una imagen para todos los tamaños de pantalla, ya que varias versiones de una sola imagen requieren más espacio.
• Crea tus imágenes usando el formato de archivo correcto: PNG desentrelazados para ilustraciones e iconos; JPEG para fotos; PDF para ilustraciones vectoriales planas que requieran escalado de alta resolución.
• Utiliza la paleta de colores de 8 bits cuando se pueda, ya que reduce el tamaño del archivo sin reducir la calidad de la imagen.
• Optimiza los archivos JPEG para encontrar un equilibrio entre tamaño y calidad para ahorrar mucho espacio en el disco,
• Evita la transparencia, ya que aumenta el tamaño. Es necesaria en iconos y gliphs, el sistema tiñe estas imágenes mediante programación.
• Pon etiquetas de texto alternativas para imágenes e iconos para que el VoiceOver describa de forma audible lo que está en pantalla.
• Proporciona imágenes específicas del dispositivo; cuando sea necesario, utilice una sola imagen para todos los tamaños de pantalla.
• Los archivos PDF con ajuste de escala automático te permiten dar un solo activo para todos los tamaños de pantalla.

Animación

Se pueden hacer diseños más dinámicos, con animaciones que responden a interacciones y dan feedback visual a la persona. Intenta no saturar, y minimiza el número de animaciones al mismo tiempo.

• Haz animaciones cortas, que transmiten lo necesario y no hacen esperar.
• Crea animaciones con un propósito, deben establecer un contexto y llamar la atención o hacerla más atractiva, pero no porque sí.
• Haz animaciones opcionales, cuando la opción para reducir el movimiento está habilitada, deberían minimizarse o eliminarse.

Audio y video

Las aplicaciones pueden reproducir videos cortos y clips de audio mientras la aplicación está activa y en ejecución en primer plano.

• Mantén cortos los clips de audio y video, no deben durar más de 30 segundos. Sino consumen mucho espacio y te tienen la mano levantada.
• Utiliza la hora de finalización anterior al reanudar la reproducción de un clip de video o audio largo, para continuar rápidamente donde lo dejó.
• Utiliza los valores de codificación adecuados para los activos de medios. La siguiente tabla enumera los valores de codificación recomendados.

• En cuanto a la creación de imágenes estáticas, crea una imagen que sea representativa del contenido de un videoclip.

Elementos

Botones

Un botón realiza una acción específica. Se pueden cambiar los fondos y tienen esquinas redondeadas, y pueden tener una etiqueta, una imagen o un grupo.

• Botones que abarquen el ancho de la pantalla, se ven mejor y son más fáciles de tocar para las personas.
• La misma altura para pilas verticales de botones de texto de una y dos líneas. En lo posible, utiliza alturas idénticas para lograr coherencia visual.
• Utiliza el radio de esquina definido por el sistema, para tener un estilo visual coherente en todas las aplicaciones.
• Asegúrate de que los botones se puedan tocar, utiliza las medidas:

Imágenes

• Haz imágenes que se vean bien en todos los tamaños de pantalla. Puedes usar una imagen para todos los tamaños si mantiene la claridad.
• Crea imágenes con resolución 2x, Apple Watch tiene una pantalla Retina. Incluye @ 2x en los nombres de las imágenes.
• Evita superponer texto en imágenes, puede disminuir tanto la claridad de la imagen como la legibilidad del texto.
• Utiliza gráficos placeholder para reservar espacio para una imagen mientras se carga, es una señal visual que muestra lo que ocupa.

Alertas y Action Sheets

Son modales a pantalla completa, dadas por el sistema. Hay dos estilos para alertas y un estilo para hojas de acción; en todos los casos incluyen un título, un mensaje opcional y uno o más botones. Úsalas con moderación.

• Alerta one-button para informar sobre un error o una condición inusual. Título mensaje opcional y botón que siempre descarta la alerta.
• Alerta side-by-side button para dar dos opciones para manejar un error. Un botón inicia la acción descrita y el otro descarta la alerta.
• Hoja de acción para elegir cómo debe proceder la aplicación. Además de un botón que cancela la acción, puede dar hasta tres opciones.
• Evita incluir más de cuatro botones en una hoja de acción, ya que se pueden ver a la vez, además uno debe ser Cancelar.
• Incluye siempre un botón Cancelar en una hoja de alerta o acción en paralelo. Puedes usar un título personalizado en lugar de Cancelar.
• En cuanto al título y el mensaje, que el título explique de manera clara y concisa qué ha pasado, haz títulos cortos, para que se vean en una línea.

Modales

Una hoja modal es una vista de pantalla completa que se desliza sobre la pantalla actual de tu aplicación. Úsala cuando necesites dar una forma de realizar una tarea importante pero separado de su contexto actual.

• Mantén las interacciones breves y ocasionales. Usa hojas modales personalizadas solo como una interrupción temporal.
• Evita mostrar una segunda hoja modal, al cerrar una hoja modal, se espera volver a la interfaz principal de la aplicación.
• Evita utilizar una hoja modal cuando debería utilizar una hoja de alerta o acción, modales claras y familiares para información importante.
• El sistema muestra el título Cancelar, de forma predeterminada. Puedes cambiar el título, como Listo y Descartar. Siempre se muestra en blanco.

Activity Rings

Son anillos que muestran el progreso diario hacia objetivos de movimiento, ejercicio y pararse. Siempre contiene tres anillos.

• Usa los anillos solo para mostrar información de movimiento, ejercicio y pararse. Nunca para mostrar otros tipos de datos.
• Utiliza los anillos de actividad para mostrar el progreso de una sola persona y usa una etiqueta, una foto o un avatar.
• No envíes notificaciones que repitan la misma información que envía la aplicación Actividad. El sistema ya ofrece actualizaciones de progreso.
• No uses anillos de actividad para adornar, no son para embellecer el diseño de tu aplicación. Tampoco los uses para tu marca.
• Mantén los colores para una experiencia de usuario coherente, y siempre sobre un fondo negro. Y mantén los márgenes, nunca permitas que otros elementos corten, obstruyan o invadan este margen o los anillos mismos.

Faces

La esfera del reloj es el corazón de la experiencia; las personas eligen una esfera que van a ver cada vez que levanten la mano y la pueden personalizar. Desde watchOS 7, se pueden compartir las esferas del reloj. Por ejemplo, un instructor de fitness crea una esfera, la personaliza y pone complicaciones. El estudiante la agrega y tiene una experiencia personalizada sin tener que configurarla él mismo.

Listas y Tablas

Tanto las listas como las tablas pueden: presentar filas de información en una sola columna; admiten varias interacciones, como desplazarse y tocar; y mostrar una imagen o color de fondo personalizado.

Las listas además permiten usar un estilo de carrusel para las filas; admitir interacciones de deslizamiento; y dejar que la gente reordene las filas.

• Diseña las filas de forma coherente, para ayudar a comprender la lógica general de la lista o tabla y a centrarse en la información que contiene.
• Cuando puedas, limita el número de filas a 20. Las listas cortas son más fáciles de escanear, pero a veces se espera una lista larga de elementos.
• Evita anidar una lista o tabla dentro de un grupo. Las tablas y listas cambian de tamaño dinámicamente.
• Restringe la longitud de las vistas de detalle si deseas poner la navegación vertical basada en páginas.

Navigation Bar

El sistema muestra el reloj y un título. El reloj no se puede quitar salvo en las modales. El título debe describir el contenido de la pantalla, un título descriptivo para comprender lo que pueden hacer y dónde se encuentran. Crea un título de pantalla conciso, una palabra o frase corta que destile el propósito (no más de 15 caracteres).

Pickers

Muestran listas de elementos por los que navegan utilizando Digital Crown.

• Selector de listas. Muestra texto e imágenes en un desplazamiento. Se ve el elemento seleccionado, los elementos anteriores y siguientes.
• Selector de pila (stack). Muestra imágenes en una pila de tarjetas. Al desplazarse, las imágenes se animan en su posición.
• Selector de secuencia. Muestra una imagen de una secuencia. Al girar la corona digital, muestra la imagen anterior o siguiente.

Sliders

Es una pista horizontal, un conjunto de pasos discretos o una barra continua; representa un rango finito de valores. Se tocan los botones a los lados para aumentar o disminuir su valor en una cantidad definida.

Si es necesario, crea gliphs personalizados para comunicar lo que hace.

Toggles y Switches

Es un control que alterna entre dos estados excluyentes: encendido y apagado.

Proporciona una etiqueta que identifique la propiedad a la que afecta; debe mostrarse junto al control para que las personas sepan qué elemento están activando o desactivando.

Texto y Etiquetas

Una etiqueta muestra una o más líneas de texto estático. Puedes aplicar estilo al texto (color, fuente y alineación), y puedes actualizar el contenido del texto o de la etiqueta.

Diseña para legibilidad. Usa colores más claros para el texto y Dynamic Type para asegurarte de que el texto pueda cambiar de tamaño de manera adecuada.

Fecha y Temporizador

• Etiqueta de fecha. Muestra la fecha actual y hora o una combinación. Puedes configurar con formatos, calendarios y zonas horarias.
• Etiqueta del temporizador. Muestra una cuenta atrás precisa o un temporizador de cuenta atrás. Puedes configurarla en diferentes formatos.

Botones del Toolbar

Un botón de la barra de herramientas te permite ofrecer funciones en una vista que muestra contenido relacionado. Ubicado en la parte superior de una vista de desplazamiento, puede permanecer oculto detrás de la barra de navegación hasta que las personas lo revelen desplazándose hacia arriba.

• Coloca un botón solo en una vista de desplazamiento. En una vista que no se desplaza lo hace visible permanentemente.
• Utiliza un botón para una acción importante que no sea una función principal de la aplicación.
• Usa un solo botón de ancho completo. Mostrar varios botones de la barra de herramientas, puede complicar la vista.

Menús

En las versiones anteriores a watchOS 7, se podía presionar en la pantalla para abrir un menú oculto de acciones relevantes para la pantalla. Actualmente ponen los elementos importantes en la pantalla correspondiente o una pantalla de configuración.

Recursos y referencias

• Apple Human Interface Guidelines — watchOS (toda la info)
• Apple Design Resources — watchOS (con librerías para Sketch)
• Apple Fonts — San Francisco (SF) (con las tipografías)
• Marketing Resources — products (con mockups)

Aquí termina el resumen

Sí, esto era un resumen de toda la información que tienen en la web. He intentado desgranar lo más relevante para poder diseñar un proyecto.

Y a ti, ¿te apetece diseñar algo para relojes?

Refused “New noise”

🤘🏻 Let’s rock! 👏🏻