🔱 🔊 🎰 Cómo pensar a través de la navegación en aplicaciones móviles 🧢 🔍 🤜🏽

Es importante colocar los botones solo donde tendrán demanda, para no obstruir la interfaz y no sobrecargarla visualmente para los usuarios. Es importante proporcionar al usuario la información necesaria para tomar la decisión de hacer clic en un botón existente o no. Ahora sobre navegación. Traté de especular por qué ciertos elementos en las aplicaciones se implementan de esta manera.

Hamburguesa

En el menú desplegable de tipo "hamburguesa" tiene sentido colocar elementos de menú que no son objetivo, rara vez solicitados, ya que debe hacer clic en el botón para acceder a estos elementos. Esto reduce la probabilidad de que el usuario reconozca, en principio, la presencia de los elementos del menú que están detrás del botón (si este no es el único botón en la interfaz). Además, muchas cosas comienzan dependiendo de cuán notable sea este botón en el contexto de la pantalla. En una hamburguesa, a menudo puede ver la Política y los Acuerdos de usuario, la Ayuda, las Preguntas frecuentes y la información técnica detallada que rara vez solicita el usuario. Al mismo tiempo, los botones de destino se encuentran en el menú inferior, lo más rápido posible para el usuario.

Solo un clic, unos segundos si lo hace solo una vez. Y cuando este clic debe hacerse cada vez que desee utilizar la función de destino de la aplicación, puede generar varias horas de tiempo perdido en total. Nos preocupamos por nuestros usuarios.

Higo. 1. Ejemplo de un menú de hamburguesas.

Perfil

Los usuarios adoran la personalización. Por lo tanto, la presencia de un perfil es bastante común en aplicaciones en las que hay una fracción de una orientación social. Aquellos. Si la aplicación implica el intercambio de información o alguna otra cosa que implique identificarlo como persona frente a otra persona, se implica automáticamente que la aplicación también debe tener un perfil, con la posibilidad de configuraciones flexibles. Si el usuario no tiene la oportunidad de corregir el error tipográfico que se formó durante el registro en los datos personales, como el inicio de sesión o el correo electrónico, o cambiar la imagen de perfil que se muestra a otros usuarios, esto traerá dolor y sufrimiento. Es habitual designar un perfil con un icono humano o un avatar establecido por el usuario.

Debes prestar atención a cómo lo hace Instagram. Para no distraer al usuario con una cuenta conectada con un ícono de perfil en color, el perfil se indica con un ícono estándar del mismo color que el menú principal. Cuando se conectan varias cuentas, entonces, desde qué cuenta realiza acciones, se vuelve lo suficientemente importante como para hacer más hincapié en el perfil con el que el usuario está trabajando actualmente. Por lo tanto, el icono de perfil "activo" ya está visible en el menú.

Higo. 2. Capturas de pantalla del menú inferior de instagram. A la izquierda, un perfil de usuario, a la derecha, dos perfiles conectados a una cuenta

También noto que vi algunas aplicaciones que no implican la identificación del usuario frente a otras personas, pero al mismo tiempo, se presta demasiado espacio y atención al avatar del usuario. Y, por supuesto, en tales casos, las personas rara vez se esfuerzan por reemplazarlo con algo personalizado, porque aparte de ellos, nadie ve este avatar. Esto sucede a menudo en sistemas orientados técnicamente, como aplicaciones para contabilizar algo en algunos almacenes o rastrear cualquier estadística. En tales casos, realmente vale la pena hacer la pregunta "¿se necesita esta funcionalidad aquí o se necesita en tal volumen?".

Menú inferior

La forma más común de menú en este momento. Y esta popularidad tiene una base.

Es conveniente, fácil de leer, descrito en las guías para el diseño de Android y Ayos. Se ha establecido y ha confirmado con el uso prolongado, como conveniente y comprensible.

En general, señalaría varias etapas de este menú. Para aplicaciones completamente innovadoras que todavía usan usuarios inusuales del ícono para indicar elementos del menú, la primera vez, cuando la audiencia de la aplicación va a ser un marketing agresivo, es usar la firma en los elementos del menú, como lo hace Ticktok, por ejemplo. Las firmas para los elementos del menú también deben dejarse a aplicaciones con navegación compleja o una amplia gama de funcionalidades en las que es difícil interpretar inequívocamente este o aquel icono.

Cuando se ha formado una gran parte de la audiencia para aplicaciones con un enfoque limitado y luego depende del marketing boca a boca y menos agresivo, puede eliminar las inscripciones de los elementos del menú y dedicar más espacio al contenido principal de la aplicación. Reducir el espacio asignado anteriormente en el menú, como Instagram, por ejemplo. Para aplicaciones estándar estándar, o aplicaciones que ya han reunido su audiencia activa constante, puede usar el menú sin firmas.

Fig. 3. Captura de pantalla de la aplicación Ticktock

En algunos casos, es habitual resaltar visualmente la acción objetivo más básica. Al estar en cada una de las secciones del menú, podemos proceder a la creación de contenido, porque cada uno de los elementos del menú está relacionado de alguna manera con el contenido, y toda la esencia de la aplicación es precisamente la creación e intercambio de contenido. Un ejemplo es una captura de pantalla de Ticktock.

Observo un menú que parece inusual y goza de cierta popularidad en los sitios de diseño, pero al mismo tiempo, en aplicaciones reales que cuentan con una gran audiencia, lo más probable es que no aumente su popularidad. Porque no es conveniente leer los elementos del menú.

Fig.4. Menú vertical

Pestañas en la sección

Si los datos pertenecen a una sección, pero al mismo tiempo tienen algunas diferencias.

Por ejemplo, en la aplicación Dribble para diseñadores, hay un cambio en el feed entre las personas que sigues, publicaciones populares y recientes. Aquellos. la información es la misma, pero ordenada y filtrada, respectivamente, y se sirve de manera diferente. Un ejemplo similar es cambiar entre suscripciones y videos destacados en Ticktock.

Las pestañas se usan en Instagram de manera un poco diferente. Con la ayuda de pestañas, puede cambiar entre subsecciones en el perfil. En general, esto también es lógico, porque vamos al perfil para interactuar con un objeto específico, ya sea mi publicación, mención del menú en las publicaciones de otras personas u otra cosa.

Y con el ejemplo de Instagram también es fácil demostrar que algunas secciones no necesitan mostrarse a todos los usuarios. Específicamente en el ejemplo de la sección de máscara. Hasta que supe de su existencia y que puedes crearlos tú mismo, no tenía esa sección. Tan pronto como cargué mi primera máscara en esta red social, esta sección comenzó a aparecer en mí. Es inútil para las personas que no conocen las máscaras, pero usan Instagram para otros fines. Estos usuarios no necesitan sobrecargar la pantalla con información innecesaria. Y para aquellos que descubrieron esa oportunidad, esta sección es necesaria.

Higo. 5. Instagram cuando cargué la máscara y antes de cargar la primera máscara

Flecha hacia atrás / Cruz

Si, por ejemplo, en el marco de una sección, revelamos información detallada, sería genial mostrar con animación que esta sección se abrió. Y una cruz o una flecha hacia atrás sirven para contraer información detallada y volver a la pantalla anterior.

Esto a menudo tiene sentido al cambiar de listas o tarjetas de productos, para que el usuario comprenda que volverá al mismo lugar desde el que se mudó de la lista. Y también que el usuario podrá continuar explorando el surtido aún más, sin tener que desplazarse al nivel deseado del catálogo desde el que fue a la sección detallada. Los ejemplos se pueden ver fácilmente en las aplicaciones Wildberries, Ozon, Lamoda, etc.

Higo. 6. Animación de la apertura de información detallada de la tarjeta y a través de la flecha de regreso a la lista

El panel que sale de abajo

Funciona de manera similar a la transición a información detallada, pero se usa en casos en los que necesita dejar acceso visual a la sección desde la cual se realiza la transición. Por lo tanto, a menudo se usa en mapas, donde hasta ahora decides dónde ir y por la distancia que necesitas superar y por alguna información más detallada indicada en la descripción del lugar. Además, esta técnica se utiliza en aplicaciones alimentarias. Cuando deja acceso a la información publicada antes de llamar al formulario donde necesita ingresar la cantidad de comida ordenada. También un buen ejemplo es el panel de comentarios itinerantes en Ticktock. Dejamos la oportunidad de "recordar" sobre qué comentarios de publicación se hacen, dejando literalmente una porción de este video visible cuando expandimos el panel con comentarios.

Higo. 7. Capturas de pantalla de los mapas de Google a la izquierda, Yandex food en el medio y Ticktok a la derecha

Se discute mucho sobre qué influencia tienen y cuánto depende de ellos. Pero mientras las personas buscan aprobación social y no han presentado una forma diferente, los botones para la aprobación social permanecerán en las aplicaciones.

Algunos de los botones realizan la acción en sí, y algunos se desplazan hasta el punto donde se puede realizar esta acción. En este caso, el foco se mueve directamente al espacio en el que se realiza la acción. Como ejemplo, en el primer caso, esto es como. Hicimos clic e inmediatamente vimos que su número aumentó y que el corazón estaba coloreado. Como ejemplo de la segunda opción, estos son comentarios. Cuando hace clic en un comentario, expandimos los comentarios para la publicación o nos enfocamos inmediatamente en el campo de entrada para dejar un comentario. Aquellos. se produce un pequeño pero redireccionamiento.

Conclusión

Construir navegación en la aplicación es un asunto que requiere atención, perseverancia y presencia de lógica.

Escriba con lo que está de acuerdo, con lo que no está de acuerdo, y puede valer la pena agregar algo al artículo.

Cómo pensar a través de la navegación en aplicaciones móviles