La principal preocupaci\u00f3n que nos ocupa en este post, es saber c\u00f3mo podemos plantear la navegaci\u00f3n m\u00f3vil en una tienda online para que sea usable y f\u00e1cil para nuestros usuarios. Hay infinidad de opiniones al respecto y mucha controversia sobre cu\u00e1l es la mejor soluci\u00f3n. Nosotros queremos explicarte qu\u00e9 es la navegaci\u00f3n Priority+<\/strong> y qu\u00e9 ventajas tiene al aplicarla en tu tienda online.<\/p>\n Aplicaci\u00f3n m\u00f3vil \u2018CaixaBank Now App<\/a>\u2019<\/strong>, galardonada recientemente por el Bank Administration Institute (BAI)<\/strong> <\/a>a la mejor experiencia del usuario, integrando Neo<\/strong>, el primer chatbot con inteligencia artificial para facilitar la asistencia virtual al usuario.\u00a0<\/span><\/p>\n Antes de explicar qu\u00e9 es la navegaci\u00f3n<\/strong> Priority+<\/em><\/strong>, recordaremos cu\u00e1les son los tipos de navegaci\u00f3n que se aplican com\u00fanmente.<\/p>\n La navegaci\u00f3n inferior<\/strong> es una soluci\u00f3n que ya exist\u00eda en nuestras aplicaciones y que organizaba sus distintas secciones en forma de tabs<\/em> o pesta\u00f1as<\/strong>. Sin duda alguna, era un planteamiento que funcionaba.<\/p>\n Es cierto que las aplicaciones m\u00f3viles\u00a0(app)<\/em> son un buen ejemplo en usabilidad y funcionalidad, ya que est\u00e1n dise\u00f1adas expresamente para dispositivos peque\u00f1os. No obstante, las necesidades y funciones de una App son diferentes a la de una tienda online, por eso debemos prestar atenci\u00f3n a las problem\u00e1ticas que pueden tener lugar.<\/p>\n El principal inconveniente es el ancho limitado que la pantalla nos ofrece para mostrar las secciones de una tienda online.<\/strong> Para la navegaci\u00f3n inferior es aconsejable no excederse de 5 apartados. Es probable que tambi\u00e9n se quieran aplicar iconos y texto. En ese caso, el espacio ser\u00e1 todav\u00eda m\u00e1s ajustado y se deber\u00e1n mostrar menos secciones. Como ves, puede no ser una buena soluci\u00f3n para una tienda online que quiera potenciar muchos apartados distintos.<\/p>\n El ejemplo que mostramos a continuaci\u00f3n hace referencia a la tienda online de China Tippler<\/a>.<\/strong> En el comercio electr\u00f3nico de China es muy com\u00fan encontrar las navegaciones inferiores en todas sus tiendas online. Por otro lado, muchos se quieren arrimar a la est\u00e9tica occidental y poco a poco apuestan por dise\u00f1os m\u00e1s limpios y no tan cargados.<\/p>\n Hasta ahora hemos hablado de la navegaci\u00f3n inferior que tuvo origen en las aplicaciones m\u00f3viles, sus ventajas e inconvenientes. Ahora es el momento de hablar de la\u00a0navegaci\u00f3n de men\u00fa superior.<\/strong><\/p>\n Con la llegada de los nuevos smartphones, se necesitaba crear una estrategia o forma de navegaci\u00f3n distinta que pudiera aplicarse a distintos tama\u00f1os de pantallas, a dispositivos que eran m\u00e1s peque\u00f1os y adem\u00e1s, t\u00e1ctiles. En consecuencia se recuper\u00f3 un icono ligero y minimalista que permit\u00eda adaptarse a todos ellos: aparece el icono hamburguesa o\u00a0hamburguer menu.<\/em><\/strong><\/p>\n La caracter\u00edstica principal de esta navegaci\u00f3n es este icono de men\u00fa contra\u00eddo\u00a0que al clicar sobre \u00e9l, hace aparecer el men\u00fa de categor\u00edas y otros enlaces de la p\u00e1gina web. Al volver a clicar, desaparece y deja la p\u00e1gina limpia de informaci\u00f3n. Est\u00e1 formado por\u00a03 l\u00edneas horizontales paralelas entre ellas y normalmente se ubicada en la parte superior\/izquierda de la pantalla.<\/p>\n Hablamos de \u00abrecuperaci\u00f3n\u00bb del icono, ya que en\u00a01981 ya se hab\u00eda presentado este tipo de bot\u00f3n hamburguesa por Norm Cox<\/a><\/span> como parte de la interfaz de usuario para el Xerox Star<\/a><\/span>. Pero no fue hasta 2009 que se le dio el impulso que hoy en d\u00eda conocemos.<\/p><\/blockquote>\n El uso de este icono se ha generalizado de forma global. Los usuarios lo han acabado relacionando con el concepto de men\u00fa sabiendo d\u00f3nde encontrar, por ejemplo, las categor\u00edas de una tienda online. Esta soluci\u00f3n se ha convertido en la reina del men\u00fa m\u00f3vil.<\/p>\n La ventaja a nivel est\u00e9tico es que todo lo que nos molesta ense\u00f1ar en la pantalla, lo podemos ubicar detr\u00e1s de este icono permitiendo que quede un dise\u00f1o limpio y minimalista. Pero, \u00a1Ojo! Tambi\u00e9n se puede caer en el error de esconder informaci\u00f3n importante para el usuario, que s\u00f3lo encontrar\u00e1 si abre el men\u00fa.<\/strong> No podr\u00e1 saber qu\u00e9 hay en ese apartado hasta haber investigado un poco. Es decir, se puede acabar creando un tipo de \u201ccaj\u00f3n desastre\u201d que esconde informaci\u00f3n que nos interesar\u00eda ver m\u00e1s f\u00e1cilmente. De la misma manera, se ha intentado aplicar esta soluci\u00f3n en dise\u00f1os de versiones desktop<\/em> o escritorio y eso amigos, a nivel de usabilidad, \u00a1Es un error! \u00a1Tenemos espacio de sobras como para esconder los enlaces detr\u00e1s de un icono!<\/p>\n Adem\u00e1s, seamos sinceros, a todos nos gusta que nos faciliten la vida y que nos digan expl\u00edcitamente qu\u00e9 encontraremos detr\u00e1s de cada icono y para qu\u00e9 sirve cada cosa. Por este mismo motivo, en algunos dise\u00f1os se ha querido a\u00f1adir la palabra \u201cMen\u00fa\u201d justo al lado del hamburguer menu<\/em>, para reafirmar su contenido. Esta casu\u00edstica la podemos observar en el siguiente ejemplo de la tienda online Anna Mora<\/a><\/strong>:<\/p>\n Como resultado de los inconvenientes que hemos visto en las otras opciones, viene para quedarse la navegaci\u00f3n<\/strong> Priority+<\/em><\/strong>.<\/em> Esta nueva soluci\u00f3n se basa en la uni\u00f3n de las dos anteriores: Trabajar las secciones a trav\u00e9s de pesta\u00f1as o tabs<\/em>, reservando una de ellas para abrir un men\u00fa desplegable lateral<\/strong> (como en la navegaci\u00f3n superior a trav\u00e9s del hamburguer menu<\/em>).<\/p>\n Esta navegaci\u00f3n permite encontrar al usuario las secciones m\u00e1s importantes\u00a0de un solo vistazo y mostrar mucho m\u00e1s contenido sin cargar la pantalla de sobreinformaci\u00f3n. Puede tratarse de otras categor\u00edas y\/o enlaces relevantes, como de informaci\u00f3n adicional o datos de contacto. \u00bfQu\u00e9 te parece? \u00bfGenial, no?<\/p>\n En las aplicaciones m\u00f3viles veremos ejemplos de la navegaci\u00f3n Priority+<\/em>, como en Facebook, YouTube (en la pesta\u00f1a biblioteca aparecen m\u00e1s secciones de perfil que no se ven en las tabs<\/em>) y como no, en la p\u00e1gina de b\u00fasqueda principal de Google. En la siguiente captura vemos la barra de pesta\u00f1as en la parte inferior y una secci\u00f3n a la derecha que pone \u00abM\u00e1s\u00bb. En la segunda imagen vemos el desplegable de enlaces que se encuentra dentro de este icono:<\/p>\n Podr\u00eda serla, en efecto. Esta combinaci\u00f3n permite llegar a las partes m\u00e1s importantes de un eCommerce adem\u00e1s de reservar una zona para mostrar otros enlaces relevantes, siempre que sea necesario.<\/p>\n Esta soluci\u00f3n tambi\u00e9n se puede aplicar a pa\u00edses como China que utilizan la navegaci\u00f3n inferior m\u00f3vil, como hemos mencionado anteriormente. Adem\u00e1s, tiene un valor a\u00f1adido gracias a la secci\u00f3n \u201cextra\u201d.<\/p>\n La llamamos navegaci\u00f3n Priority+<\/em><\/strong> ya que se priorizan algunos contenidos y otros se dejan a disposici\u00f3n y curiosidad del usuario. Aun as\u00ed, se dispone de toda esa informaci\u00f3n en la misma zona de navegaci\u00f3n, sin perderla en ning\u00fan momento, mientras el usuario sigue navegando.<\/p>\n No necesariamente debe ser la Priority+<\/em><\/strong> y nuestra intenci\u00f3n no es marearte (S\u00e9 lo que debes pensar, pero todo tiene una explicaci\u00f3n). Ah\u00ed va. Cada tienda online tiene unas necesidades, un estilo, una cantidad de informaci\u00f3n y categor\u00edas y tambi\u00e9n, una intenci\u00f3n. Los dise\u00f1adores y Projects Managers,<\/em> en el caso de TLG Commerce,\u00a0nos encargamos de encontrar la mejor soluci\u00f3n para cada usuario y tipo de tienda.<\/p>\n Es por eso que se debe estudiar detenidamente cada caso y pensar cu\u00e1l ser\u00e1 su uso, que p\u00fablico objetivo tendr\u00e1 y que informaci\u00f3n se debe priorizar.<\/p>\n Priority+\u00a0<\/em>une la navegaci\u00f3n en forma de pesta\u00f1as junto con el desplegable de men\u00fa lateral, que trabaja el hamburguer menu<\/em> o men\u00fa hamburguesa. Depender\u00e1 del n\u00famero de categor\u00edas que tenga la tienda online y los objetivos del cliente para determinar cu\u00e1l ser\u00e1 la mejor navegaci\u00f3n.<\/p><\/blockquote>\n Para ayudarte un poquito m\u00e1s, vamos a darte una serie de consejos generales para que los tengas en cuenta a la hora de estudiar la navegaci\u00f3n de tu tienda online:<\/p>\n Facebook<\/a><\/strong> fue sin duda el revolucionario que empez\u00f3 a utilizar el men\u00fa hamburguesa. Hoy en d\u00eda se ha adaptado a las nuevas exigencias y goza de una navegaci\u00f3n\u00a0Priority+ <\/em>en su aplicaci\u00f3n m\u00f3vil:<\/p>\n Cada d\u00eda surgen nuevos retos ya que el crecimiento exponencial de las tecnolog\u00edas es imparable.\u00a0Es por eso que nunca se puede determinar una soluci\u00f3n como la m\u00e1xima, mejor y \u00fanica, sino que debemos realizar un dise\u00f1o centrado en el usuario que se adapte a las nuevas exigencias. De aqu\u00ed poco podr\u00edamos hablar de la interacci\u00f3n de los dispositivos por voz y eso, nuevamente, volver\u00eda a conducirnos a nuevos obst\u00e1culos y nuevas estrategias.<\/p>\n Dicho esto, esperamos que te haya gustado este post y que hayas aprendido un poquito m\u00e1s sobre c\u00f3mo funcionan las navegaciones m\u00f3viles, sus ventajas e inconvenientes y qu\u00e9 tener en cuenta a la hora de decidirse por una u otra.<\/p>\n Si te interesa el dise\u00f1o web, te dejo a tu disposici\u00f3n los anteriores post que publiquemos en nuestro blog: Dise\u00f1o eCommerce: Proceso de dise\u00f1o de una tienda online<\/a><\/strong> y C\u00f3mo aplicar correctamente las im\u00e1genes en tu eCommerce.<\/a><\/strong><\/p>\n![\"App](\"https:\/\/trilogi.com\/blog\/wp-content\/uploads\/sites\/2\/0-1.jpg\" "\\"App")
<\/a><\/p>\nPrimeramente, recordemos la navegaci\u00f3n inferior<\/h2>\n
![\"Tienda](\"https:\/\/trilogi.com\/blog\/wp-content\/uploads\/sites\/2\/1-1.jpg\" "\\"Tienda")
<\/a><\/p>\nAparece la navegaci\u00f3n superior<\/h2>\n
![\"Navegaci\u00f3n](\"https:\/\/trilogi.com\/blog\/wp-content\/uploads\/sites\/2\/2-4.jpg\" "\\"Navegaci\u00f3n")
<\/a><\/p>\n\u00bfQu\u00e9 es la navegaci\u00f3n Priority+?<\/h2>\n
![\"Capturas](\"https:\/\/trilogi.com\/blog\/wp-content\/uploads\/sites\/2\/3-4.jpg\" "\\"Capturas")
<\/a><\/p>\n\u00bfLa navegaci\u00f3n\u00a0Priority+<\/em> podr\u00eda ser la soluci\u00f3n?<\/h2>\n
![\"Detalle](\"https:\/\/trilogi.com\/blog\/wp-content\/uploads\/sites\/2\/4-1.jpg\" "\\"Detalle")
<\/a><\/p>\nPor lo tanto, \u00bfAplico esta navegaci\u00f3n en mi tienda online? \u00bfNo?<\/h2>\n
\n
![\"Navegaci\u00f3n](\"https:\/\/trilogi.com\/blog\/wp-content\/uploads\/sites\/2\/5.jpg\" "\\"Navegaci\u00f3n")
<\/a><\/p>\nConclusi\u00f3n<\/h2>\n
![\"Navegaci\u00f3n](\"https:\/\/trilogi.com\/blog\/wp-content\/uploads\/sites\/2\/0.jpg\")
<\/p>\n