Todos los pulgares, por qué la navegación de alcance debería reemplazar la barra de navegación en el diseño de iOS

La barra de navegación está girada

La barra de navegación UINavigationBar, para abreviar, ha existido desde el iPhone original. Históricamente, las barras de navegación han sido convenientes y claras, fáciles de entender y fáciles de construir.

Luego, los teléfonos se dispararon, lo suficiente como para que el iPhone 7 Plus suplantara las ventas del iPad mini. Ahora, si posee un iPhone moderno, las barras de navegación pueden parecer difíciles de manejar, literalmente fuera de contacto.

Las pantallas emergentes significan que la distancia entre la barra de navegación y nuestros pulgares ha aumentado. La pantalla de un 7 Plus es tan alta que se necesitaría un aumento del 150% para alcanzar esos molestos botones con una mano. Solo otro nudillo o dos. Nada raro

Las zonas táctiles de Hurff ilustran el alcance del pulgar derecho.

A medida que los dispositivos cambian, nuestro lenguaje visual cambia con ellos. Es hora de alejarse de la barra de navegación en favor de la navegación al alcance del pulgar. A los fines de este artículo, lo llamaremos Reach Navigation.

Por qué la barra de navegación está fuera de contacto

La barra de navegación es un pilar de la aplicación "estándar del sistema", utilizada en teléfono, mensajes, correo, calendario e innumerables. Hay muchas razones por las que se ganó el favor:

  • iOS Standard Apple creó la barra de navegación para que sea personalizable, escalable, accesible y fácil de implementar. Debido a que es un estándar de iOS, es reconocible en todas las aplicaciones.
  • Navegación Los lados izquierdo y derecho de la barra de navegación ofrecen espacio para botones. El área izquierda a menudo desplaza a los usuarios hacia arriba en la jerarquía, y el área derecha está en juego. El botón Atrás informa a los usuarios que no están en la vista raíz.
  • Título Proporciona una ubicación coherente para el texto que define la función de la vista. Dado que la barra de navegación siempre permanece en la pantalla, ayuda a establecer aún más la jerarquía de información.
  • Compañero de la barra de pestañas Si tiene una fila de iconos que se pueden tocar en la parte inferior de la pantalla (es decir, una barra de pestañas), colocar otros iconos en la parte superior de la pantalla ayuda a separar la relación padre / hijo.
  • Logotipo ¡Su cliente puede poner un logotipo aquí! Genio. Lol jk, encuentro esto de mal gusto, pero estoy divagando.
Algunas barras de navegación de muestra para su disfrute.

Oh, Dios mío, hay muchas buenas razones para usar una barra de navegación en tu proyecto. Excepto, maldita sea! Ahora es difícil levantar el pulgar.

Siendo ese el caso, hablemos de algunas desventajas de Navbar:

  • Es más difícil regresar. Puede deslizar desde el borde, siempre que la vista en la que se encuentre no tenga nada que se desplace horizontalmente, pero si lo tiene, entonces está en una zona urbana.
  • Nombrar todas las vistas es un dolor. No todas las pantallas necesitan un título persistente, y algunas requieren etiquetas demasiado largas para caber. Dejar un área de navegación en blanco desperdicia espacio en la pantalla y parece estéril.
  • Navegar requiere dos manos. Si puede sostener un dispositivo con una mano, debería poder operar el dispositivo con una mano. Se siente mejor y es más conveniente en un mundo lleno de carritos de compras para empujar y bebés para cargar.
  • Las aplicaciones simples se vuelven más complejas de lo necesario. Las barras de navegación tienden a conducir a una arquitectura de información que es profunda. Es fácil de desarrollar para la divulgación progresiva horizontal, lo que significa que puede ser una batalla expandir en línea o usar una hoja.

Todo bien. Ahora sabemos cómo las barras de navegación pueden ser basura. ¿Entonces que estamos haciendo?

Llegar a la navegación y Apple

Como diseñador de iOS, esta es la parte en la que apoyo mi tesis al señalar cómo Apple ya está incorporando Reach Navigation. Listo? Comenzaremos con dos de las formas obvias en que Apple está acomodando pantallas móviles más grandes.

En lugar de un botón de retroceso, navegue hacia atrás deslizando el dedo desde el borde izquierdo.

Primero, ya no tiene que presionar el botón Atrás, puede navegar hacia atrás deslizando el dedo desde el borde izquierdo. También puede controlar el movimiento de la pantalla cuando se desliza hacia atrás, lo que le permite mirar una pantalla anterior antes de comprometerse. No funciona en todas las aplicaciones, pero cuando lo hace, puede ver la transición de la etiqueta trasera al título, lo cual es simplemente hermoso.

Al tocar dos veces el botón de inicio, el contenido se desplaza hacia abajo.

En segundo lugar, iOS incluye una función llamada Accesibilidad, donde los contenidos de la pantalla se desplazan hacia abajo para ayudarlo a alcanzar los botones cerca de la parte superior cuando toca ligeramente el botón de inicio. Funciona por ahora, pero se siente como una solución Bandaid.

Ahora aquí es donde el giro hacia Reach Nav se hace más evidente. Apple ya ha comenzado a eliminar sus aplicaciones de la barra de navegación. Maps y Music tuvieron rediseños estructurales para iOS 10 que disminuyeron o eliminaron la necesidad de barras de navegación.

Apple Music cambia de iOS 9 (izquierda) a iOS 10 (derecha). La eliminación de la barra de navegación permitió que la etiqueta de vista principal aumentara de tamaño. Bonita.

Ahora ambas aplicaciones usan una hoja que puede deslizar hacia abajo para descartar.

Apple Maps cambia de iOS 9 (izquierda) a iOS 10 (derecha). La interfaz de usuario está casi completamente invertida. La configuración del mapa y el bloqueo a la ubicación actual son más difíciles de alcanzar, mientras que la búsqueda y los resultados tienen prioridad.

Algunos botones de retroceso en Apple Music sobrevivieron al bloqueo de corte para iOS 10, pero aparecen marcados para su eliminación en un sistema operativo futuro. Es una tontería destinar tanto espacio horizontal para un botón que solo ocupa el 20 por ciento de los bienes inmuebles. Apple Music también ha revertido a una simple etiqueta Atrás en lugar de describir el destino de regreso, una piedra angular de la funcionalidad del botón Atrás a través del lanzamiento de iOS 7.

El botón Atrás en iOS 10 está ocupando mucho espacio aquí. Parece temporal, ¿no? Sí.

Parece que esta es la dirección que está tomando Apple, que le da la oportunidad de cambiar sus diseños en consecuencia.

Incorporando Reach Navigation

Aquí hay algunos detalles sobre cómo incorporar Reach Nav en sus aplicaciones. Si estás trabajando en:

Una nueva aplicación con una barra de pestañas:

  • Use hojas que salgan de la parte inferior y que se puedan quitar.
  • En lugar de colocar botones importantes como Filtrar o Cambiar vista arriba, vea si puede flotarlos sobre la Barra de pestañas.
  • Tenga algunas conversaciones acerca de qué características son críticas para la misión, antes de elegir pestañas para sus bienes inmuebles de pantalla más preciados.
  • No coloque un botón de destino, como Buscar, Carrito, Mensaje nuevo, en la barra de navegación. Haga una pestaña o incrústela en el área de contenido.

Una nueva aplicación sin barra de pestañas:

  • Pruebe con un cajón expuesto como Maps u hojas como Mail.
  • ¿Necesito decir esto? Priorice la colocación de botones en la parte inferior de la pantalla.

Una renovación de un diseño heredado:

  • Mueva los elementos más utilizados al final.
  • Asegúrese de deslizar desde el borde de la pantalla para volver a funcionar para todas las vistas.
  • Vea lo que puede anidar para liberar espacio en las áreas de pantalla más utilizables.
  • Elimine las acciones importantes del punto superior derecho de la barra de navegación y colóquelas en cualquier otro lugar.
Una versión rápida de cómo Safari podría mover la barra de direcciones hacia abajo, eliminar la barra de herramientas y mantener la funcionalidad.

Finalmente, hay algunas excepciones al poner botones de misión crítica al alcance de la mano. Si una acción tiene graves consecuencias, mover el botón fuera del alcance es una forma de ayudar a su usuario a evitar un error. Entonces, si un caso de pulgares gordos podría costarle a alguien miles de dólares, o eliminar un documento importante, mueva esas opciones un poco hacia arriba.

Ejemplos de llegar a Nav en la naturaleza

Las nuevas aplicaciones de Apple no son los únicos productos que comienzan a respetar Reach Nav. Lyft y Pokémon Go ponen todo al alcance de una mano.

Pokémon Go y Lyft emplean Reach Navigation.

Algunas otras aplicaciones como Overcast han comenzado a usar hojas que le permiten deslizar hacia abajo.

Overcast utiliza hojas que permiten a los usuarios deslizarse hacia abajo.

La aplicación de Twitter para iOS elimina la necesidad de deslizar desde el borde de la pantalla para volver, ahora puede deslizar desde cualquier lugar.

Espere ver que más aplicaciones mueven la funcionalidad hacia abajo en la parte más accesible de la pantalla. Es bastante fácil de adaptar, aunque las aplicaciones con características excesivas tendrán más problemas.

Mantente en contacto

La barra de navegación ha sido una parte esencial de iOS desde que Apple lanzó el primer kit para desarrolladores, y nos ha servido bien. Pero es hora de dejar ir.

Acordemos dejar de pegar botones importantes en la parte superior de la pantalla. Una mejor navegación está al alcance.

Brad Ellis es el fundador de Tall West, una agencia de diseño cuyos clientes incluyen Airbnb y Target. Es ganador del Apple Design Award y ha recibido dos Webbys por diseño de aplicaciones. Si desea trabajar juntos, escríbale a Brad en Tallwest.com.

Colaboradores: Ronan Rooney y Maggie Mason.