Técnicas de interacción rápidas para watchOS 3 en Xamarin

En este artículo se tratan las técnicas de interacción rápida que Apple ha agregado en watchOS 3 y cómo implementarlas en Xamarin.iOS para Apple Watch.

Ofrecer interacciones rápidas al usuario es esencial para crear aplicaciones y complicaciones atractivas para el Apple Watch. Como novedad de watchOS 3, Apple ha agregado compatibilidad con Reconocedores de gestos, acceso a la Digital Crown y nuevas técnicas de navegación y notificación de usuario. Esto, junto con la compatibilidad agregada tanto con SceneKit y SpriteKit, permite al desarrollador crear fácilmente interfaces ricas y visibles que sean rápidas y con capacidad de respuesta.

Qué son las interacciones rápidas

Para un desarrollador que se usa para crear aplicaciones para iOS o macOS (donde la cantidad de tiempo que un usuario dedica a interactuar con la aplicación se mide en minutos o horas), diseñar una aplicación correcta para Apple Watch puede ser un desafío y requiere un enfoque diferente.

En watchOS, el usuario normalmente quiere levantar su muñeca, interactuar rápidamente con una aplicación (normalmente durante un breve par de segundos), luego soltar su muñeca y continuar lo que fuera que estaba haciendo.

A continuación se muestran algunos ejemplos de interacciones rápidas típicas en Apple Watch:

• Iniciar un temporizador.
• Comprobando el tiempo.
• Marcar un elemento fuera de una lista de tareas pendientes.

Para lograr estos objetivos, una aplicación en Apple Watch debe ser:

• Vista rápida: Significa que, con un vistazo rápido, el usuario debe poder obtener la información que necesita.
• Accionable: Lo que significa que los usuarios deben poder tomar decisiones rápidas y bien fundamentadas.
• Capacidad de respuesta: Significa que el usuario nunca debe esperar a recibir la información que necesita o para lograr la acción que desea.

Longitud de interacciones rápidas

Debido a la naturaleza que se puede ver de las aplicaciones de Apple Watch, Apple sugiere que la longitud ideal de una interacción rápida debe ser de dos segundos o menos. Como resultado de este segundo límite, el desarrollador tendrá que dedicar una cantidad considerable de tiempo tanto al diseño como a la implementación de una aplicación de Apple Watch.

Nuevas características y API de watchOS 3

Apple ha agregado varias características y API nuevas a WatchKit para ayudar al desarrollador a agregar interacciones rápidas a sus aplicaciones de Apple Watch:

• watchOS 3 proporciona acceso a nuevos tipos de entrada de usuario, como:
  • Reconocedores de gestos
  • Rotación de Digital Crown
• watchOS 3 proporciona nuevas formas de mostrar y actualizar información, como:
  • Navegación mejorada de la tabla
  • Nueva compatibilidad con el marco de notificaciones de usuario
  • Integración de SpriteKit y SceneKit

Al implementar estas nuevas características, el desarrollador puede asegurarse de que su aplicación watchOS 3 sea Visible, Accionable y con capacidad de respuesta.

Compatibilidad con el reconocedor de gestos

Si el desarrollador ha implementado los reconocedores de gestos en iOS, deben estar muy familiarizados con cómo funcionan los reconocedores de gestos en watchOS 3. Para actualizar, los reconocedores de gestos son objetos que analizan eventos táctiles de bajo nivel en gestos reconocibles y predefinidos.

watchOS 3 admitirá los cuatro reconocedores de gestos siguientes:

• Tipos discretos de gestos:
  • Gesto de deslizar el dedo (WKSwipeGestureRecognizer).
  • Gesto de pulsar (WKTapGestureRecognizer).
• Tipos de gestos continuos:
  • Gesto de panorámica (WKPanGestureRecognizer).
  • Gesto de presionar largo (WKLongPressGestureRecognizer).

Para implementar uno de los nuevos reconocedores de gestos, basta con arrastrarlo a una vista en Interface Builder de Xcode y configurar sus propiedades.

En el código, responda a la acción del reconocedor para controlar el gesto que desencadena el usuario. De nuevo, esto se hace de la misma manera que se controlaría en iOS.

Estados discretos de gestos

Para gestos discretos, se llama a la acción cuando se reconoce el gesto y se asigna un estado (WKGestureRecognizerState) como:

Todos los gestos discretos comienzan en el estado Possible y pasan al estado Failed o Recognized. Cuando se usan gestos discretos, el desarrollador generalmente no trata directamente con el estado. En su lugar, se basan en la acción a la que se llama cuando solo se reconoce el gesto.

Estados de gestos continuos

Los gestos continuos son ligeramente diferentes de los gestos discretos, donde la acción se llama varias veces a medida que se reconoce el gesto:

De nuevo, los gestos continuos comienzan en el estado Possible, pero progresan en varias actualizaciones. Aquí, el desarrollador tendrá que considerar el estado del reconocedor y actualizar la interfaz de usuario de la aplicación durante la Changed fase hasta que el gesto sea finalmente Recognized o Canceled.

Sugerencias de uso del reconocedor de gestos

Apple sugiere lo siguiente al trabajar con los reconocedores de gestos en watchOS 3:

• Agregue los reconocedores de gestos a elementos de grupo en lugar de controles individuales. Puesto que Apple Watch tiene un tamaño de pantalla físico más pequeño, los elementos de grupo tienden a ser más grandes y más fáciles de alcanzar para el usuario. Además, los reconocedores de gestos pueden entrar en conflicto con gestos integrados ya en los controles nativos de la interfaz de usuario.
• Establezca las relaciones de dependencia en el Guión gráfico de la aplicación de inspección.
• Algunos gestos tienen prioridad sobre otros tipos de gestos, como:
  • Desplazarse
  • Force Touch

Rotación de Digital Crown

Al implementar la compatibilidad con Digital Crown en sus aplicaciones watchOS 3, un desarrollador puede proporcionar una mayor velocidad de navegación y interacciones de precisión para sus usuarios.

Desde watchOS 2, la aplicación de Apple Watch podría usar el objeto WKInterfacePicker para acceder a la Digital Crown proporcionando una lista de WKPickerItems y un estilo de selector (lista, apilada o secuencia de imágenes). watchOS permite al usuario usar Digital Crown para seleccionar un elemento de la lista.

Cuando se usa un WKInterfacePicker, WatchKit controla la mayor parte del trabajo por:

• Dibujar la lista y los elementos de interfaz individuales.
• Procesamiento de los eventos de Digital Crown.
• Llamar a una acción cuando se selecciona un elemento.

Novedad de watchOS 3, el desarrollador ahora tiene acceso directo a los eventos de rotación de Digital Crown, lo que les permite crear sus propios elementos de interfaz de usuario que responden a los valores de rotación.

El acceso a Digital Crown lo proporcionan los siguientes elementos:

• WKCrownSequencer: Proporciona acceso a las rotaciones por segundo.
• WKCrownDelegate: Proporciona acceso a eventos delta rotacionales.

Rotaciones por segundo

Acceder a las rotaciones por segundo desde Digital Crown es útil cuando se trabaja con animaciones basadas en física. Para acceder a las rotaciones por segundo, use la CrownSequencer propiedad de la WKInterfaceController extensión Watch. Por ejemplo:

var rotationsPerSecond = CrownSequencer.RotationsPerSecond;

Deltas rotacionales

Use los deltas rotacionales de Digital Crown para contar el número de rotaciones. Use el CrownDidRotate método de invalidación del WKCrownDelegate para acceder a los deltas rotacionales. Por ejemplo:

using System;
using WatchKit;
using Foundation;

namespace MonkeyWatch.MonkeySeeExtension
{
  public class CrownDelegate : WKCrownDelegate
  {
    #region Computed Properties
    public double AccumulatedRotations { get; set;}
    #endregion

    #region Constructors
    public CrownDelegate ()
    {
    }
    #endregion

    #region Override Methods
    public override void CrownDidRotate (WKCrownSequencer crownSequencer, double rotationalDelta)
    {
      base.CrownDidRotate (crownSequencer, rotationalDelta);

      // Accumulate rotations
      AccumulatedRotations += rotationalDelta;
    }
    #endregion
  }
}

Aquí la aplicación mantiene un acumulador (AccumulatedRotations) para determinar el número de rotaciones. Una rotación completa de la Digital Crown es igual a un delta acumulado de 1.0 y una mitad de rotación sería 0.5.

Apple lo ha dejado al desarrollador para determinar cómo se corresponden los recuentos de rotación con respecto a la sensibilidad de los cambios en el elemento de la interfaz de usuario que se está actualizando.

El signo (+/-) del Delta rotacional indica la dirección en la que el usuario está girando la Digital Crown:

Si el usuario se desplaza hacia arriba, WatchKit devolverá deltas positivos y, si se desplaza hacia abajo, se devolverán deltas negativos, independientemente de la orientación en la que el usuario esté usando el reloj.

Enfoque de Digital Crown

Al igual que cualquier otro elemento de interfaz, Digital Crown tiene el concepto de Enfoque. Este enfoque se puede alejar de Digital Crown a otros elementos de interfaz en función de cómo interactúa el usuario con el reloj.

Por ejemplo, cualquiera de los siguientes controles podría robar el foco de Digital Crown:

• Selector
• Control deslizante
• Controlador de desplazamiento

Es necesario que el desarrollador determine cuándo su elemento de interfaz personalizada debe ser el foco de Digital Crown. Apple sugiere usar los nuevos reconocedores de gestos para obtener el foco en el elemento de interfaz de usuario personalizado.

Paginación vertical

La forma estándar en que un usuario navega por una vista de tabla en una aplicación watchOS es desplazarse hasta el fragmento de datos deseado, pulsar en una fila específica para mostrar la vista detallada, pulsar el botón Atrás cuando termine de ver los detalles y repetir el proceso para cualquier otra información que le interese desde dentro de la tabla:

Novedad de watchOS 3, el desarrollador puede habilitar la paginación vertical en sus controles de vista de tabla. Con esta característica habilitada, el usuario puede desplazarse para buscar una fila vista de tabla y pulsar la fila para ver sus detalles como antes. Sin embargo, ahora pueden deslizar hacia arriba para seleccionar la siguiente fila de la tabla o hacia abajo para seleccionar la fila anterior (o usar la Digital Crown), todo sin tener que volver primero a la vista de tabla:

Para habilitar este modo, abra el Guión gráfico de la aplicación watchOS en Xcode para su edición, active la Vista de tabla y active la casilla paginación de detalles verticales:

Asegúrese de que la tabla usa Segues para mostrar la vista detallada y guardar los cambios en Storyboard y volver a Visual Studio para Mac sincronizar.

El desarrollador puede interactuar mediante programación con la paginación vertical en una fila específica mediante el código siguiente en una vista de tabla:

// Segue into Vertical Paging and select the first row
MenuTable.PerformSegue (0);

Al usar paginación vertical, el desarrollador debe tener en cuenta que WatchKit controlará automáticamente la precarga de controladores y, como resultado, se puede llamar a algunos métodos de ciclo de vida del controlador antes de que la interfaz de usuario esté realmente visible.

Mejoras de notificación

La notificación es la forma principal de interacción rápida que un usuario normalmente experimenta en watchOS y está disponible desde el primer Apple Watch y watchOS 1.

Una interacción rápida de notificación típica es la siguiente:

1. El usuario siente el háptico de notificación cuando se recibe una nueva notificación.
2. Levantan la muñeca para ver la interfaz de Short Look para la notificación.
3. Si siguen manteniendo su muñeca levantada, watchOS realiza automáticamente la transición a la interfaz de notificación de aspecto largo.

Hay varias maneras de que un usuario pueda responder a la notificación:

• Para una notificación bien definida y presentada, el usuario no hará nada y simplemente descartará la notificación.
• También pueden pulsar la notificación para iniciar la aplicación watchOS.
• Para una notificación que admita acciones personalizadas, el usuario puede seleccionar una de las acciones personalizadas. Estas pueden ser:
  • Acciones en primer plano: Inician la aplicación para realizar la acción.
  • Acciones en segundo plano: Siempre se enrutaron al iPhone en watchOS 2, pero se pueden enrutar a watchApp en watchOS 3.

Novedad de watchOS 3:

• La notificación usa una API similar en todas las plataformas (iOS, watchOS, tvOS y macOS).
• La notificación local se puede programar en Apple Watch.
• La notificación en segundo plano se enrutará a la extensión de la aplicación si se programaron en Apple Watch.

Programación y entrega de notificaciones

La notificación del iPhone del usuario se reenviará al Apple Watch cuando se produzca lo siguiente:

• La pantalla del iPhone está apagada.
• El Apple Watch se está llevando y se ha desbloqueado.

En watchOS 3, las notificaciones locales se pueden programar en Apple Watch y solo se entregan en el reloj. Es el desarrollador el que programa una notificación de iPhone correspondiente si es necesaria para la aplicación.

Al incluir el mismo identificador de notificación en las versiones de Apple Watch y iPhone de las notificaciones, impide que las notificaciones duplicadas se muestren en el reloj. La versión de Apple Watch de la notificación tendrá prioridad sobre la versión del iPhone.

Dado que watchOS 3 usa el mismo UINotification marco de API que iOS 10, vea nuestra documentación de iOS 10 Marco de notificación al usuario para obtener más detalles.

Uso de SpriteKit y SceneKit

Novedad de watchOS 3, el desarrollador ahora puede usar objetos SpritKit y SceneKit en el diseño de la interfaz de usuario de su aplicación para presentar gráficos 2D y 3D.

Se han agregado dos nuevas clases de interfaz para admitir esta característica:

• WKInterfaceSKScene: Para trabajar con gráficos 2D de SpriteKit.
• WKInterfaceSCNScene: Para trabajar con gráficos 3D de SceneKit.

Para usar estos objetos, basta con arrastrarlos a la superficie de diseño dentro del Guión gráfico de la aplicación de inspección en Interface Builder de Xcode y usar el Inspector de atributos para configurarlos.

Desde este punto, trabajar con las escenas SpriteKit o SceneKit funciona igual que en una aplicación de iOS. La aplicación de inspección presentará un WKInterfaceSKScene llamando a uno de los métodos Present. Para SceneKit, simplemente establezca la Scene propiedad del objeto WKInterfaceSCNScene.

Complicaciones accionables

En watchOS 2, Apple introdujo complicaciones para aplicaciones de 3ros. En watchOS 3, Apple ha ampliado las capacidades que un desarrollador puede incluir en una complicación de WatchKit.

Además, más de las caras de reloj integradas ahora pueden incluir complicaciones y caras de reloj existentes que ya admitieron complicaciones ahora pueden incluir aún más complicaciones.

También es nueva la capacidad de que un usuario deslice rápidamente el dedo hacia la izquierda o hacia la derecha para realizar la transición a través de todas las caras de reloj que ha instalado en su Apple Watch. Con la nueva galería en la aplicación del iPhone complementario de Apple Watch, el usuario puede agregar y personalizar nuevas caras de reloj y cualquiera de las complicaciones que pueden incluir.

Debido a estas nuevas características, Apple sugiere que todas las aplicaciones de Apple Watch también deben incluir al menos una complicación y, como tal, todas las aplicaciones nativas de Apple Watch ahora tienen complicaciones.

Las complicaciones proporcionan las siguientes características a una aplicación:

• Son muy vistosos, ya que siempre están presentes en la cara de reloj.
• watchOS actualiza con frecuencia las complicaciones. Cualquier aplicación que incluya una complicación en la cara de inspección mostrada actualmente por el usuario se actualiza al menos dos veces por hora.
• Cualquier aplicación con una complicación en la cara de reloj mostrada actualmente por el usuario se mantiene en la memoria, lo que hace que la aplicación se inicie rápidamente y mejore la velocidad de respuestas de la aplicación.
• Las complicaciones facilitan al usuario el inicio de una funcionalidad específica en una aplicación watchOS.

Notificación que se puede ver

La notificación en Apple Watch proporciona una manera excelente y personalizable de informar rápidamente al usuario de eventos o información nueva, como mensajes entrantes o lograr un objetivo en una aplicación de entrenamiento.

Mediante una notificación, la información valiosa se puede presentar rápidamente al usuario. En muchas situaciones, una notificación bien diseñada puede eliminar la necesidad de que el usuario inicie realmente la aplicación.

Novedad de watchOS 3, ahora se admiten todas las notificaciones:

• SpriteKit
• SceneKit
• Vídeo insertado

Interfaz de usuario mejorada con SpriteKit y SceneKit

Normalmente, un desarrollador podría pensar en la interfaz de usuario del juego cuando se menciona SpriteKit y SceneKit. Sin embargo, tanto SpriteKit como SceneKit pueden ser útiles para crear interfaces de usuario que no sean de juego que incluyan diseños personalizados, contenido y animaciones que no son posibles en WatchKit solo.

Por ejemplo, una notificación de usuario de una aplicación de uso compartido de fotos puede usar SpriteKit para proporcionar una experiencia de usuario enriquecida mediante la inclusión del usuario que publicó la imagen junto con una imagen real y otra información personalizada que enriquece la experiencia del usuario.

Además, tanto SpriteKit como SceneKit se pueden mezclar con elementos estándar de la interfaz de usuario de WatchKit en el diseño de la interfaz de usuario de la aplicación.

Navegación sencilla

watchOS 3 presenta varias formas en que un desarrollador puede simplificar la navegación dentro de sus aplicaciones watchOS, como la nueva Paginación vertical, compatibilidad con el reconocedor de gestos y características de Rotación de Digital Crown presentadas anteriormente.

Digital Crown es único para Apple Watch y se puede usar de muchas maneras diferentes para simplificar la navegación. Por ejemplo, una aplicación de temporizador puede usar Digital Crown para limpiar las longitudes de temporizador disponibles.

Los gestos personalizados pueden presentar formas nuevas y únicas para que el usuario interactúe con una aplicación de inspección y también se puede usar para simplificar la navegación de la aplicación.

Apple sugiere buscar formas de combinar todas las nuevas características de interacción rápida agregadas en watchOS 3 para presentar interfaces de aplicaciones de watchOS enriquecidas, fáciles y rápidas de usar.

Finalización de la interacción rápida

Una experiencia de interacción rápida bien diseñada proporcionará al usuario la confianza para soltar su muñeca (y desconectarse con la aplicación) cuando haya terminado la interacción actual.

Donde esto se convierte específicamente en un problema es cuando la aplicación de inspección está realizando cualquier tipo de conexión de red o compartiendo información con su aplicación de iPhone complementaria. Esto suele provocar un indicador de espera mientras se realiza la transacción, lo que no es deseable durante una interacción rápida. Considere el ejemplo siguiente:

1. El usuario elige un artículo que se va a comprar en el reloj.
2. Pulsan el botón de compra.
3. La aplicación inicia la transacción de red y muestra un indicador de carga.
4. Algún tiempo después, la transacción se completa y la aplicación muestra una conformación de compra.
5. El usuario quita la muñeca y se desconecta con la aplicación.

Desde el momento en que el usuario pulsa el botón de compra hasta que se completa la transacción, tiene su muñeca levantada mirando un indicador de carga. Para resolver esta situación, Apple sugiere que el desarrollador debe presentar comentarios instantáneos al usuario en lugar de mostrar un indicador de carga.

Con el modelo sugerido de Apple, eche un vistazo a la misma interacción rápida de nuevo:

1. El usuario elige un artículo que se va a comprar en el reloj.
2. Pulsan el botón de compra.
3. La aplicación inicia la transacción de red y muestra un mensaje que indica que la compra se ha iniciado correctamente.
4. El usuario quita la muñeca y se desconecta con la aplicación.
5. Cuando la transacción se completa correctamente algún tiempo más tarde, la aplicación muestra una notificación local para informar al usuario de una compra correcta.

Esta vez, tan pronto como el usuario pulsa el botón de compra, se muestra un mensaje que indica que la compra se ha iniciado, para que pueda soltar con confianza su muñeca y finalizar la interacción rápida en este momento. Más adelante se les informa del éxito o error de la transacción en una notificación de usuario. De este modo, el usuario solo interactúa con la aplicación durante las fases "activas" del proceso.

En el caso de las aplicaciones que realizan redes, pueden usar un NSURLSession segundo plano para controlar la comunicación de red con una tarea de descarga. Esto permitirá que la aplicación se despierte en segundo plano para procesar la información descargada. Para la aplicación que requiere procesamiento en segundo plano, use una aserción de tarea en segundo plano para controlar el procesamiento necesario.

Sugerencias de diseño de interacción rápida

Dado que la longitud deseada de una interacción rápida es de dos segundos o menos, el desarrollador debe centrarse en el diseño de las interacciones de la aplicación desde el principio del proceso de diseño. Busque áreas en las que esas interacciones se puedan simplificar (mediante la técnica presentada anteriormente) y use las nuevas características de watchOS 3 para que la aplicación sea rápida y dinámica.

Apple sugiere lo siguiente:

• Céntrese en interacciones rápidas al poner al día las características más usadas de la aplicación.
• Use complicaciones y notificaciones de usuario para exponer funciones y características comunes.
• Cree una interfaz de usuario enriquecida y visual con SceneKit y SpriteKit.
• Siempre que sea posible, simplifique la navegación dentro de la aplicación.
• Nunca haga que el usuario espere, permita que bajen su muñeca y se desenganche con la aplicación lo antes posible.

Resumen

En este artículo se han tratado las técnicas de interacción rápida que Apple ha agregado en watchOS 3 y cómo implementarlas en Xamarin.iOS para Apple Watch.