La principal preocupaci\u00f3 d\u2019aquest post \u00e9s saber com podem plantejar la navegaci\u00f3 m\u00f2bil d\u2019una botiga online perqu\u00e8 sigui usable i f\u00e0cil per als nostres usuaris. Hi ha infinitat d\u2019opinions al respecte i molta controv\u00e8rsia sobre quina \u00e9s la millor soluci\u00f3. Nosaltres et volem explicar qu\u00e8 \u00e9s la navegaci\u00f3 Priority+<\/strong> i quins avantatges t\u00e9 aplicar-la a la teva botiga online.<\/p>\n Aplicaci\u00f3 m\u00f2bil \u2018CaixaBank Now App<\/a>\u2019<\/strong>, guardonada recentment pel Bank Administration Institute (BAI)<\/strong> <\/a>a la millor experi\u00e8ncia d\u2019usuari, que integra Neo<\/strong>, el primer chatbot amb intel\u00b7lig\u00e8ncia artificial per facilitar l\u2019assist\u00e8ncia virtual a l\u2019usuari. <\/span><\/p>\n Abans d\u2019explicar qu\u00e8 \u00e9s la navegaci\u00f3<\/strong> Priority+<\/em><\/strong>, recordarem quins s\u00f3n els tipus de navegaci\u00f3 que s\u2019apliquen habitualment.<\/p>\n La navegaci\u00f3 inferior<\/strong> \u00e9s una soluci\u00f3 que ja existia a les nostres aplicacions i que organitzava les diferents seccions en forma de tabs<\/em> o pestanyes<\/strong>. Sens dubte, era un plantejament que funcionava.<\/p>\n \u00c9s cert que les aplicacions m\u00f2bils (app)<\/em> s\u00f3n un bon exemple d\u2019usabilitat i funcionalitat, ja que estan dissenyades expressament per a dispositius petits. Tanmateix, les necessitats i funcions d\u2019una app s\u00f3n diferents de les d\u2019una botiga online, per aix\u00f2 hem de parar atenci\u00f3 als problemes que hi poden sorgir.<\/p>\n El principal inconvenient \u00e9s l\u2019amplada limitada que ens ofereix la pantalla per mostrar les seccions d\u2019una botiga online.<\/strong> Per a la navegaci\u00f3 inferior \u00e9s aconsellable no superar els 5 apartats. \u00c9s probable que tamb\u00e9 s\u2019hi vulguin aplicar icones i text. En aquest cas, l\u2019espai ser\u00e0 encara m\u00e9s ajustat i caldr\u00e0 mostrar menys seccions. Com veus, pot no ser una bona soluci\u00f3 per a una botiga online que vulgui potenciar molts apartats diferents.<\/p>\n L\u2019exemple que mostrem a continuaci\u00f3 fa refer\u00e8ncia a la botiga online de China Tippler<\/a>.<\/strong> En el comer\u00e7 electr\u00f2nic de la Xina \u00e9s molt habitual trobar navegacions inferiors en totes les botigues online. D\u2019altra banda, moltes es volen acostar a l\u2019est\u00e8tica occidental i a poc a poc aposten per dissenys m\u00e9s nets i no tan carregats.<\/p>\n Fins ara hem parlat de la navegaci\u00f3 inferior, que va n\u00e9ixer a les aplicacions m\u00f2bils, i dels seus avantatges i inconvenients. Ara \u00e9s el moment de parlar de la navegaci\u00f3 de men\u00fa superior.<\/strong><\/p>\n Amb l\u2019arribada dels nous smartphones, calia crear una estrat\u00e8gia o forma de navegaci\u00f3 diferent que es pogu\u00e9s aplicar a diverses mides de pantalla, a dispositius m\u00e9s petits i, a m\u00e9s, t\u00e0ctils. En conseq\u00fc\u00e8ncia, es va recuperar una icona lleugera i minimalista que permetia adaptar-se a tots: apareix la icona hamburguesa o hamburguer menu.<\/em><\/strong><\/p>\n La caracter\u00edstica principal d\u2019aquesta navegaci\u00f3 \u00e9s la icona de men\u00fa contret que, en fer-hi clic, fa apar\u00e8ixer el men\u00fa de categories i altres enlla\u00e7os del web. En tornar-hi a fer clic, desapareix i deixa la p\u00e0gina neta d\u2019informaci\u00f3. Est\u00e0 formada per 3 l\u00ednies horitzontals paral\u00b7leles entre si i normalment se situa a la part superior esquerra de la pantalla.<\/p>\n Parlem de \u00abrecuperaci\u00f3\u00bb de la icona perqu\u00e8 el 1981 Norm Cox<\/a><\/span> ja havia presentat aquest tipus de bot\u00f3 hamburguesa com a part de la interf\u00edcie d\u2019usuari del Xerox Star<\/a><\/span>. Per\u00f2 no va ser fins al 2009 que va rebre l\u2019impuls que coneixem avui.<\/p><\/blockquote>\n L\u2019\u00fas d\u2019aquesta icona s\u2019ha generalitzat arreu. Els usuaris l\u2019han acabat relacionant amb el concepte de men\u00fa i saben on trobar, per exemple, les categories d\u2019una botiga online. Aquesta soluci\u00f3 s\u2019ha convertit en la reina del men\u00fa m\u00f2bil.<\/p>\n L\u2019avantatge est\u00e8tic \u00e9s que tot all\u00f2 que ens molesta mostrar a la pantalla ho podem situar darrere d\u2019aquesta icona i aconseguir un disseny net i minimalista. Per\u00f2 compte! Tamb\u00e9 es pot caure en l\u2019error d\u2019amagar informaci\u00f3 important per a l\u2019usuari, que nom\u00e9s trobar\u00e0 si obre el men\u00fa.<\/strong> No podr\u00e0 saber qu\u00e8 hi ha en aquell apartat fins que no hagi investigat una mica. \u00c9s a dir, es pot acabar creant una mena de \u00abcalaix de sastre\u00bb que amaga informaci\u00f3 que ens interessaria veure m\u00e9s f\u00e0cilment. De la mateixa manera, s\u2019ha intentat aplicar aquesta soluci\u00f3 en dissenys de versions desktop<\/em> o d\u2019escriptori i aix\u00f2, amics, pel que fa a usabilitat, \u00e9s un error! Tenim espai de sobres per no haver d\u2019amagar els enlla\u00e7os darrere d\u2019una icona!<\/p>\n A m\u00e9s, siguem sincers, a tots ens agrada que ens facilitin la vida i que ens diguin expl\u00edcitament qu\u00e8 trobarem darrere de cada icona i per a qu\u00e8 serveix cada cosa. Per aquest mateix motiu, en alguns dissenys s\u2019ha volgut afegir la paraula \u201cMen\u00fa\u201d just al costat del hamburguer menu<\/em>, per refor\u00e7ar-ne el contingut. Ho podem veure en l\u2019exemple seg\u00fcent de la botiga online Anna Mora<\/a><\/strong>:<\/p>\n Com a resultat dels inconvenients que hem vist en les altres opcions, arriba per quedar-se la navegaci\u00f3<\/strong> Priority+<\/em><\/strong>.<\/em> Aquesta nova soluci\u00f3 es basa en la uni\u00f3 de les dues anteriors: treballar les seccions a trav\u00e9s de pestanyes o tabs<\/em>, i reservar-ne una per obrir un men\u00fa desplegable lateral<\/strong> (com en la navegaci\u00f3 superior a trav\u00e9s de l\u2019hamburguer menu<\/em>).<\/p>\n Aquesta navegaci\u00f3 permet a l\u2019usuari trobar les seccions m\u00e9s importants d\u2019un sol cop d\u2019ull i mostrar molt m\u00e9s contingut sense carregar la pantalla amb un exc\u00e9s d\u2019informaci\u00f3. Poden ser altres categories i\/o enlla\u00e7os rellevants, o b\u00e9 informaci\u00f3 addicional o dades de contacte. Qu\u00e8 et sembla? Genial, oi?<\/p>\n A les aplicacions m\u00f2bils veurem exemples de navegaci\u00f3 Priority+<\/em>, com a Facebook, YouTube (a la pestanya biblioteca apareixen m\u00e9s seccions del perfil que no es veuen a les tabs<\/em>) i, com no podia ser d\u2019altra manera, a la p\u00e0gina principal de cerca de Google. A la captura seg\u00fcent veiem la barra de pestanyes a la part inferior i una secci\u00f3 a la dreta que diu \u00abM\u00e9s\u00bb. A la segona imatge veiem el desplegable d\u2019enlla\u00e7os que hi ha dins d\u2019aquesta icona:<\/p>\n Efectivament, podria ser-ho. Aquesta combinaci\u00f3 permet arribar a les parts m\u00e9s importants d\u2019un eCommerce i, a m\u00e9s, reservar una zona per mostrar altres enlla\u00e7os rellevants sempre que calgui.<\/p>\n Aquesta soluci\u00f3 tamb\u00e9 es pot aplicar a pa\u00efsos com la Xina, que utilitzen la navegaci\u00f3 inferior m\u00f2bil, com hem esmentat abans. A m\u00e9s, t\u00e9 un valor afegit gr\u00e0cies a la secci\u00f3 \u201cextra\u201d.<\/p>\n L\u2019anomenem navegaci\u00f3 Priority+<\/em><\/strong> perqu\u00e8 es prioritzen alguns continguts i d\u2019altres es deixen a disposici\u00f3 i curiositat de l\u2019usuari. Tot i aix\u00ed, tota aquesta informaci\u00f3 \u00e9s a la mateixa zona de navegaci\u00f3, sense perdre-la en cap moment, mentre l\u2019usuari continua navegant.<\/p>\n No ha de ser necess\u00e0riament la Priority+<\/em><\/strong>, i la nostra intenci\u00f3 no \u00e9s marejar-te (s\u00e9 el que deus pensar, per\u00f2 tot t\u00e9 una explicaci\u00f3). All\u00e0 va. Cada botiga online t\u00e9 unes necessitats, un estil, una quantitat d\u2019informaci\u00f3 i de categories i, tamb\u00e9, una intenci\u00f3. Els dissenyadors i Projects Managers,<\/em> en el cas de TLG Commerce, ens encarreguem de trobar la millor soluci\u00f3 per a cada usuari i tipus de botiga.<\/p>\n Per aix\u00f2 cal estudiar detingudament cada cas i pensar quin \u00fas tindr\u00e0, quin p\u00fablic objectiu tindr\u00e0 i quina informaci\u00f3 cal prioritzar.<\/p>\n Priority+ <\/em>uneix la navegaci\u00f3 en forma de pestanyes amb el desplegable de men\u00fa lateral, que funciona amb l\u2019hamburguer menu<\/em> o men\u00fa hamburguesa. La millor navegaci\u00f3 dependr\u00e0 del nombre de categories de la botiga online i dels objectius del client.<\/p><\/blockquote>\n Per ajudar-te una mica m\u00e9s, et donarem una s\u00e8rie de consells generals perqu\u00e8 els tinguis en compte a l\u2019hora d\u2019estudiar la navegaci\u00f3 de la teva botiga online:<\/p>\n Facebook<\/a><\/strong> va ser sens dubte el revolucionari que va comen\u00e7ar a utilitzar el men\u00fa hamburguesa. Avui s\u2019ha adaptat a les noves exig\u00e8ncies i t\u00e9 una navegaci\u00f3 Priority+ <\/em>a la seva aplicaci\u00f3 m\u00f2bil:<\/p>\n Cada dia sorgeixen nous reptes, ja que el creixement exponencial de les tecnologies \u00e9s imparable. Per aix\u00f2 mai no es pot determinar una soluci\u00f3 com la m\u00e0xima, la millor i l\u2019\u00fanica, sin\u00f3 que hem de fer un disseny centrat en l\u2019usuari que s\u2019adapti a les noves exig\u00e8ncies. D\u2019aqu\u00ed a poc podr\u00edem parlar de la interacci\u00f3 amb els dispositius per veu, i aix\u00f2, de nou, ens tornaria a portar a nous obstacles i noves estrat\u00e8gies.<\/p>\n Dit aix\u00f2, esperem que t\u2019hagi agradat aquest post i que hagis apr\u00e8s una mica m\u00e9s sobre com funcionen les navegacions m\u00f2bils, els seus avantatges i inconvenients i qu\u00e8 cal tenir en compte a l\u2019hora de decidir-se per una o una altra.<\/p>\n Si t\u2019interessa el disseny web, et deixo els posts anteriors que hem publicat al nostre blog: Disseny eCommerce: proc\u00e9s de disseny d\u2019una botiga online<\/a><\/strong> i Com aplicar correctament les imatges al teu eCommerce.<\/a><\/strong><\/p>\n![\"App](\"https:\/\/trilogi.com\/blog\/wp-content\/uploads\/sites\/2\/0-1.jpg\" "\\"App")
<\/a><\/p>\nPrimer, recordem la navegaci\u00f3 inferior<\/h2>\n
![\"Botiga](\"https:\/\/trilogi.com\/blog\/wp-content\/uploads\/sites\/2\/1-1.jpg\" "\\"Botiga")
<\/a><\/p>\nApareix la navegaci\u00f3 superior<\/h2>\n
![\"Navegaci\u00f3](\"https:\/\/trilogi.com\/blog\/wp-content\/uploads\/sites\/2\/2-4.jpg\" "\\"Navegaci\u00f3")
<\/a><\/p>\nQu\u00e8 \u00e9s la navegaci\u00f3 Priority+?<\/h2>\n
![\"Captures](\"https:\/\/trilogi.com\/blog\/wp-content\/uploads\/sites\/2\/3-4.jpg\" "\\"Captures")
<\/a><\/p>\nLa navegaci\u00f3 Priority+<\/em> podria ser la soluci\u00f3?<\/h2>\n
![\"Detall](\"https:\/\/trilogi.com\/blog\/wp-content\/uploads\/sites\/2\/4-1.jpg\" "\\"Detall")
<\/a><\/p>\nPer tant, aplico aquesta navegaci\u00f3 a la meva botiga online o no?<\/h2>\n
\n
![\"Navegaci\u00f3](\"https:\/\/trilogi.com\/blog\/wp-content\/uploads\/sites\/2\/5.jpg\" "\\"Navegaci\u00f3")
<\/a><\/p>\nConclusi\u00f3<\/h2>\n
![\"Navegaci\u00f3](\"https:\/\/trilogi.com\/blog\/wp-content\/uploads\/sites\/2\/0.jpg\")
<\/p>\n