Diseño de aplicaciones sin desperdicios

Cómo pueden ayudar los diseñadores a prevenir problemas visuales en aplicaciones iOS

Con el lanzamiento de iOS 11, hubo una preocupación generalizada de que la calidad del software de Apple estuviera disminuyendo. Muchos usuarios experimentaron problemas de rendimiento, errores de software y fallas visuales.

Aquí hay un ejemplo de una falla visual en la aplicación Mensajes, causada por tocar con fuerza para "hacer estallar" un mensaje seguido inmediatamente al tocar el botón Atrás.

Observe la doble animación de navegación y la falta de animación del teclado.

Este tipo de errores visuales no son nuevos para iOS 11, aplicaciones móviles o interfaces de usuario. A medida que las aplicaciones crecen en complejidad y aumentan las expectativas de los usuarios, estos errores aparentemente pequeños pueden tener un gran impacto en el producto final. Hacen que las aplicaciones se sientan incómodas.

¿Qué es jank?

Jank se refiere a fallas visuales que son inesperadas y que distraen. Por lo general, surgen debido a animaciones adicionales o animaciones faltantes.

En la aplicación Media, los iconos de la barra de herramientas tienen una animación adicional (creciendo y moviéndose a la derecha) cuando el teclado vuelve a aparecer después de cancelar una carga de fotos.

Una aplicación puede ser "janky" o exhibir "jankiness" si parece que se comporta incorrectamente. Además de fallas visuales, la sorpresa podría referirse a botones que no responden, comportamiento de carga inconsistente o gestos incómodos.

En esta publicación, me voy a centrar únicamente en fallas visuales.

Motivación

Si eres diseñador, es posible que no te sientas capacitado para arreglar el problema de la aplicación. Es un problema de código, ¿verdad?

Los diseñadores aún juegan un papel crítico. Ciertos elementos de la interfaz de usuario son particularmente molestos, especialmente cuando se los lleva al límite. Si los diseñadores saben qué elementos causan jank y, lo que es más importante, las limitaciones de esos elementos, pueden crear diseños que tengan menos probabilidades de generar aplicaciones inestables.

Vamos a discutir algunas fuentes comunes de jank en las aplicaciones de iOS y explorar formas de diseñar aplicaciones que puedan evitar que estos problemas surjan por completo.

Transiciones de navegación

Comencemos con un elemento común de la interfaz de usuario: la barra de navegación.

Aquí hay una barra de navegación normal y feliz:

Transición suave al tocar el botón Atrás y cuando se maneja interactivamente.

Aquí hay una barra de navegación janky y triste:

Animación extra de región negra en el lado derecho; falta de animación cuando se presiona el botón Atrás.

Que pasa ¿Por qué esta barra de navegación es tan extraña?

En este caso, la barra de navegación de la pantalla "Inicio" es translúcida, mientras que la barra de navegación de la "Nueva pantalla" es opaca.

La barra de navegación proporcionada por Apple es limitada y volátil; solo se admiten ciertos comportamientos. Si un desarrollador desea modificar la barra de navegación de una manera no admitida, no hay garantía de que funcione correctamente en todos los casos.

Consideraciones de diseño de transición de navegación

Muchos tratamientos comunes de la barra de navegación no son totalmente compatibles: ocultar el subrayado gris predeterminado de 1 px, ocultar el texto del botón de retroceso, agregar vistas adicionales debajo de la barra de navegación y permitir un gesto de retroceso desde cualquier lugar de la pantalla.

¿Cómo pueden los diseñadores, que pueden no estar familiarizados con los matices de la API UINavigationController, diseñar estos temas?

El consejo principal es preservar la consistencia del diseño en todas las pantallas. Si cada pantalla tiene un nuevo estilo de barra de navegación, está solicitando problemas.

Teclados

En mi experiencia, los teclados son la fuente más común de jank. Ambos ejemplos en la parte superior de esta publicación están relacionados con el teclado.

Aquí hay otro ejemplo. Observe cómo la animación circular funciona bien al seleccionar imágenes, pero es incorrecta cuando se utiliza el teclado estándar.

Jank relacionado con el teclado en Snapchat.

Consideraciones de diseño del teclado

Cada vez que se involucra un teclado, debe mantener la pantalla lo más simple posible. La mitad del espacio de la pantalla se ha ido de todos modos, así que no empaque el espacio restante lleno de botones.

Tenga cuidado con las animaciones que ocurren junto con la animación del teclado, y no asuma que tiene control total sobre el teclado. Es posible ocultar el teclado sin una animación, pero puede causar complicaciones más adelante.

Considere también los teclados de terceros e internacionales. El hecho de que su diseño funcione bien con el teclado iOS estándar en inglés no significa que funcione para todos. Debe suponer que la altura del teclado es desconocida y puede cambiar en cualquier momento.

Animaciones multiestatales

Me encantan las animaciones multiestatales. Son increíblemente divertidos de diseñar y construir. Sin embargo, las animaciones que tienen muchos estados tienden a causar jank.

Aquí hay un ejemplo de una animación de varios estados que salió mal:

Botón de App Store con una animación no deseada.

Este botón tiene varios estados: normalmente se transforma en una rueda giratoria y se anima para representar una descarga en progreso.

Incluso el comportamiento

A partir de esto, podemos hacer una conjetura sobre dónde se originó el error de giro. Observe cuándo aparece la rueda giratoria por primera vez, pero antes de que comience el progreso azul, el círculo gris casi lleno está girando en su lugar. Debido a algún error en el código, el botón "abrir" de arriba piensa que está en este estado de giro intermedio.

El verdadero problema aquí es demasiado estado. Cuando las animaciones entran en estados no deseados, exhibirán jank.

Consideraciones de diseño de animación multiestado

Las animaciones de múltiples estados aumentan la complejidad. Si está diseñando un elemento que se anima entre varios estados, asegúrese de considerar todas las transiciones de estado y los casos límite. Algo que parece simple en la superficie podría ser mucho más complejo de lo que se pensaba originalmente.

De-Janking un diseño

Ahora que conocemos algunas fuentes comunes de jank en las aplicaciones de iOS, usemos nuestra nueva perspectiva para evaluar un diseño.

Aquí hay un diseño áspero e incompleto que hice hace un tiempo. Estaba explorando la idea de una aplicación de presentación simple. El usuario podría ingresar los "datos" para cada diapositiva, y la presentación se representaría y temática automáticamente.

El foco principal es la pantalla central, donde el usuario puede agregar nuevos elementos, ingresar texto, reorganizar diapositivas, deslizar horizontalmente entre diapositivas y expandir una vista previa de la diapositiva renderizada.

Se ve bastante bien, ¿verdad? No. Este diseño es un boleto de ida a Jankville.

Vamos a contar las posibles fuentes de jank:

  1. Las diferentes barras de navegación y transiciones entre ellas.
  2. La vista previa de la diapositiva que siempre permanece por encima del teclado.
  3. La animación interactiva y basada en estado de expandir la vista previa de la diapositiva.
  4. La posición de desplazamiento y las animaciones del teclado cuando el usuario agrega muchas líneas de texto.
  5. La animación basada en el estado que selecciona el tipo de texto ("Título", "Subtítulo", "Bullet", etc.)

Lo más importante es que estos no son todos independientes: necesitaríamos manejar los efectos secundarios de todas las combinaciones posibles.

Es absolutamente posible construir esto, pero el desarrollador pasaría una cantidad considerable de tiempo arreglando fallos de animación y conflictos de estado. Es probable que esta aplicación requiera una atención intensa a los detalles, la atención y la capacidad de solucionar los problemas que surjan.

Aquí hay un nuevo diseño del que me burlé rápidamente:

La pantalla central "Mi presentación" se ha expandido a tres pantallas: la primera para organizar diapositivas, la segunda para organizar elementos y la tercera para editar un solo elemento.

Esto reduce las posibles fuentes de jank al aprovechar elementos predeterminados de iOS y encapsular elementos potencialmente problemáticos. En lugar de una animación de botón desplegable personalizada para seleccionar el tipo de elemento, el usuario puede seleccionar desde un selector predeterminado. El teclado solo se usa en la pantalla final y nunca necesita ocultarse, ya que solo hay un campo de texto.

Es posible que este segundo diseño no se sienta tan único, pero es más probable que se sienta familiar y funcione como se espera.

Nota sobre diseños personalizados

No pretendo desalentar la creación de interfaces de usuario personalizadas o ampliar los límites de lo que es posible. Me encanta hacer que las experiencias se sientan frescas, es lo que hace que el diseño y desarrollo de iOS sea divertido.

Pero con demasiada frecuencia vi diseños personalizados que solo hacen que el 90% del camino se complete. Debido a una variedad de razones, el último 10% se queda corto, y la extrañeza permanece en aplicaciones bien diseñadas.

Si los diseñadores son conscientes de los escollos más comunes, pueden ayudar a los desarrolladores a evitarlos, lo que resulta en mejores experiencias para todos.

Comida para llevar

Los diseñadores pueden ayudar a prevenir las sacudidas al conocer sus causas y modificar los diseños en consecuencia.

Aquí hay algunos pasos prácticos para reducir el jank:

  1. Obtenga información del desarrollador temprano. Un desarrollador experimentado de iOS puede estimar rápidamente la complejidad de construir un diseño e informarle sobre posibles problemas.
  2. ¡Simplifica los diseños! Es fácil ocultar la complejidad asumiendo que las transiciones y las animaciones se resolverán por sí mismas. Al considerar todos los casos y transiciones posibles, naturalmente avanzará hacia soluciones más simples.

¡Esperamos que hayas aprendido algunas de las razones por las que algunas aplicaciones se sienten incómodas y, lo que es más importante, te sientes capacitado para resolver los problemas mediante el diseño!

¿Disfrutaste la historia? Deja algunos aplausos aquí en Medium y compártelo con tus amigos de diseño / desarrollo de iOS. ¿Quiere mantenerse actualizado sobre lo último en diseño / desarrollo de aplicaciones móviles? Sígueme en Twitter aquí: https://twitter.com/nathangitter

Gracias a David Okun por revisar los borradores de esta publicación.