{"id":8458,"date":"2018-09-13T13:25:34","date_gmt":"2018-09-13T11:25:34","guid":{"rendered":"https:\/\/www.hiberus.com\/crecemos-contigo\/?p=8458"},"modified":"2023-11-28T11:13:37","modified_gmt":"2023-11-28T10:13:37","slug":"navegacion-movil","status":"publish","type":"post","link":"https:\/\/www.hiberus.com\/crecemos-contigo\/navegacion-movil\/","title":{"rendered":"Mobile First: uso y navegaci\u00f3n en m\u00f3viles"},"content":{"rendered":"

Analizando diversos estudios sobre las tendencias de dispositivos m\u00f3viles, observamos que el uso de estos dispositivos en Espa\u00f1a es cada vez mayor. De hecho, Espa\u00f1a lidera el ranking mundial con un 88% de usuarios de m\u00f3vil.<\/strong> Y no s\u00f3lo es que en Espa\u00f1a exista mucha gente que tenga y use el m\u00f3vil, sino que es ha llegado el Mobile First. Es decir, el dispositivo m\u00e1s utilizado para acceder a Internet: alrededor del 95% de los espa\u00f1oles accede a Internet a trav\u00e9s de su m\u00f3vil.<\/strong><\/p>\n

Adem\u00e1s, el uso de las aplicaciones m\u00f3viles ha crecido m\u00e1s del 100%<\/strong> en los \u00faltimos 3 a\u00f1os. Los usuarios tienen instaladas una media de 17,8 aplicaciones<\/strong> en sus smartphones y el 64% afirma que prefiere comprar a trav\u00e9s de la App,<\/strong> frente a un 52% que prefiere realizar su compra mediante el sitio web del vendedor.<\/p>\n

Dise\u00f1ar para Mobile First<\/h2>\n

Todos estos datos nos demuestran la importancia que tiene dise\u00f1ar sitios web y Apps para dispositivos m\u00f3viles que sean intuitivas, atractivas y en las que la navegaci\u00f3n sea lo m\u00e1s sencilla posible.<\/strong> A la hora de dise\u00f1ar para mobile, el principal problema<\/strong> al que nos enfrentamos es el reducido espacio<\/strong> del que disponemos, debido al peque\u00f1o tama\u00f1o de las pantallas m\u00f3viles. Por ello, tenemos que hacer uso de diferentes recursos<\/strong> que nos permitan mostrar todo el contenido deseado y hacerlo f\u00e1cilmente accesible, pero sin agobiar al usuario \ud83d\ude09 Hoy os ense\u00f1amos algunos de estos recursos.<\/p>\n

Men\u00fa principal<\/h3>\n

En la mayor\u00eda de los sitios web en dispositivos m\u00f3viles, tanto en el navegador como en muchas Apps, encontramos el conocido men\u00fa hamburguesa.<\/strong> Este tipo de men\u00fa es perfecto cuando disponemos de muchas categor\u00edas, ya que nos permite mostrar, en forma de listado, muchas al mismo tiempo. Tambi\u00e9n es muy \u00fatil para dotar de diferente importancia jer\u00e1rquica a algunas de ellas y cuando la arquitectura de la informaci\u00f3n es compleja y alberga diferentes niveles jer\u00e1rquicos (con diversas categor\u00edas y subcategor\u00edas).<\/p>\n

\"Men\u00fa

Home y men\u00fa de navegaci\u00f3n de la App m\u00f3vil de Amazon<\/a><\/p><\/div>\n

Otra opci\u00f3n de men\u00fa de navegaci\u00f3n que cada vez se observa en m\u00e1s aplicaciones m\u00f3viles es el tab bar:<\/strong> una barra fija en la parte inferior de la pantalla. La clave de este tipo de men\u00fa es que dispone de pocas opciones. De hecho, el n\u00famero m\u00e1ximo de categor\u00edas que podemos mostrar en estos men\u00fas son cinco, debido al espacio: las opciones deben guardar cierta distancia entre s\u00ed para que cualquier usuario pueda pulsarlas sin dificultad y acceda a la realmente deseada. Esto es un tema vital para toda la navegaci\u00f3n en dispositivos m\u00f3viles en general: el usuario interact\u00faa con los elementos del sitio pulsando con el dedo, por lo que debemos asegurarnos de que cualquier elemento con enlace dispone del suficiente espacio respecto al resto de elementos interactivos. Y no debemos olvidar que hay muchos tama\u00f1os de dedos \ud83d\ude09<\/p>\n

\"tab

Inicio de la App m\u00f3vil de TripAdvisor<\/a><\/p><\/div>\n

Volviendo al men\u00fa que estamos observando, la principal ventaja de este tipo de navegaci\u00f3n es que el usuario ve de un simple vistazo las principales secciones disponibles en la App y puede acceder a cualquiera de ellas en cualquier momento de forma muy r\u00e1pida y sencilla.<\/p>\n

Algunas aplicaciones que quieren hacer uso de esta navegaci\u00f3n, pero disponen de m\u00e1s de cinco categor\u00edas, muestran como \u00faltima opci\u00f3n un nuevo men\u00fa de opciones, donde recogen las categor\u00edas secundarias.<\/p>\n

\"Men\u00fa

Men\u00fa de navegaci\u00f3n de la App m\u00f3vil de Ryanair<\/a><\/p><\/div>\n

 <\/p>\n

Filtrado<\/h3>\n

En cuanto al filtrado en los listados de contenidos, lo m\u00e1s com\u00fan en mobile es disponer de un bot\u00f3n \u201cFiltrar\u201d,<\/strong> o similar, que muestre los diferentes tipos de filtros disponibles. Este bot\u00f3n solemos encontrarlo en la parte superior de la pantalla, junto a las opciones de ordenaci\u00f3n y tipos de visualizaci\u00f3n. Aunque tambi\u00e9n hay Apps que lo muestran en la zona inferior de la pantalla como un bot\u00f3n flotante, de forma que siempre se muestra accesible al hacer scroll. Posteriormente, las opciones de visualizaci\u00f3n de los filtros son amplias.<\/p>\n

\"Filtros\"

P\u00e1ginas de listado de productos de las Apps de Privalia<\/a> y Booking<\/a>, donde se observa el acceso a los filtros en la parte superior de la pantalla<\/p><\/div>\n

Nosotros recomendamos mostrar los filtros a pantalla completa<\/strong> para facilitar la navegaci\u00f3n por parte del usuario, como se observa en la siguiente imagen. Este tipo de filtrado nos permite disponer de una gran variedad de tipolog\u00edas de filtros. Podemos establecer diferentes categor\u00edas con sus diversas opciones cada una, permitiendo al usuario filtrar por par\u00e1metros muy diversos al mismo tiempo y de forma sencilla.<\/p>\n

\"Filtros

Pantalla de filtros de la App de Booking<\/a><\/p><\/div>\n

Otro tipo de filtrado que podemos encontrarnos en webs y Apps es el que observamos en la siguiente imagen: se muestran directamente las opciones de filtrado a modo de etiquetas,<\/strong> de forma que puedes observar directamente los filtros disponibles y seleccionarlos r\u00e1pida y f\u00e1cilmente. Adem\u00e1s, mediante scroll horizontal, puedes consultar el resto de filtros disponibles. Esta soluci\u00f3n es ideal para situaciones en las que disponemos de pocas posibilidades de filtrado y si no permitimos la selecci\u00f3n de m\u00faltiples filtros, en cuyo caso es m\u00e1s conveniente la primera opci\u00f3n, dado que el usuario ve claramente todos los filtros que ha marcado.<\/p>\n

\"Filtrado

P\u00e1gina de resultados de la App de Pinterest<\/a> que muestra opciones de filtrado en la parte superior<\/p><\/div>\n

 <\/p>\n

Listado de contenidos<\/h3>\n

A la hora de mostrar listados de contenidos, hay m\u00faltiples opciones. En funci\u00f3n del objetivo que persigamos, ser\u00e1 mejor optar por una opci\u00f3n u otra. A continuaci\u00f3n, os mostramos tres posibilidades.<\/p>\n

Aqu\u00ed podemos observar un listado vertical,<\/strong> el m\u00e1s convencional. Si este es el contenido principal de la p\u00e1gina y bajo este listado no vamos a mostrar m\u00e1s contenidos, o no son relevantes, este tipo de listado es la mejor opci\u00f3n, ya que la navegaci\u00f3n y visualizaci\u00f3n de las diferentes opciones es muy sencilla y r\u00e1pida: con un ligero movimiento de dedo para hacer scroll vertical, el usuario puede ir viendo los distintos contenidos.<\/p>\n

\"Listado

Listado de hoteles de la App Agoda<\/a><\/p><\/div>\n

Sin embargo, puede haber situaciones en las que queramos mostrar muchos tipos de contenidos al mismo tiempo. En este caso, podemos optar por listados horizontales<\/strong> en los que el usuario debe hacer scroll horizontal para visualizar las distintas opciones. La ventaja que tiene es que podemos mostrar al mismo tiempo diferentes listados o contenidos: el usuario ve las distintas tipolog\u00edas de listados que hay y visualiza las opciones de la que le interesa.<\/p>\n

\"Listado

Una de las pantallas principales de la App Skyscanner<\/a> con sugerencias de destinos<\/p><\/div>\n

Como se observa en la imagen, para reflejar que existen m\u00e1s opciones en el listado horizontal se muestra la \u00faltima cortada, as\u00ed el usuario sabe que deslizando el dedo de forma horizontal ver\u00e1 m\u00e1s contenidos. Para reflejar esto, tambi\u00e9n podemos hacer uso de flechas a los lados del contenido, por ejemplo. No obstante, actualmente se utiliza m\u00e1s la opci\u00f3n anterior, dado que el movimiento a realizar con el dedo es m\u00e1s c\u00f3modo y porque las flechas no siempre se visualizan correctamente, en funci\u00f3n del dise\u00f1o de las im\u00e1genes, el contraste, etc.<\/p>\n

Otra opci\u00f3n para mostrar diferentes contenidos es la que se observa en la siguiente imagen. Con unos bullets<\/strong> en la zona inferior, reflejamos que existen m\u00e1s contenidos y cu\u00e1l estamos visualizando. Este recurso es especialmente \u00fatil para mostrar im\u00e1genes, ya que nos permite visualizar la imagen a lo ancho de la pantalla para darle m\u00e1s protagonismo, verla mejor y dejar libre el resto de la pantalla para mostrar otros contenidos, tambi\u00e9n relevantes.<\/p>\n

\"bullets\"

Ficha de un establecimiento en la App Google Maps<\/a><\/p><\/div>\n

Estos son algunos de los recursos que podemos encontrarnos a la hora de navegar con dispositivos m\u00f3viles. En este punto, lo importante es que tengamos claro qu\u00e9 es lo que queremos contar a nuestros usuarios y asegurarles una navegaci\u00f3n sencilla e intuitiva. Si la experiencia de nuestros usuarios es positiva, alcanzaremos mejores objetivos de negocio.<\/p>\n

En Hiberus Digital<\/a>, nuestros especialistas analizar\u00e1n tu proyecto y te asesorar\u00e1n sobre la opci\u00f3n que mejor se adapte a tus necesidades. Ponte en contacto con nosotros y estaremos encantados de ayudarte.<\/p>\n

\n
\n
\n
\n

\u00bfQuieres m\u00e1s informaci\u00f3n sobre nuestros servicios de UX\/UI?<\/p>\n

Contacta con nuestro equipo de User Research, User Experience y User Interface<\/p>\n <\/div>\n

\n \n
\n

<\/p>

    <\/ul><\/div>\n
    \n
    \n<\/fieldset>\n
    \n\t
    \n\t\t
    \n\t\t\t

    <\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t

    \n\t\t\t

    <\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t

    \n\t\t
    \n\t\t\t

    <\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t

    \n\t\t\t

    <\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t

    \n\t\t
    \n\t\t\t

    <\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t

    \n\t\t
    \n\t\t\t