Abans de definir què és la navegació Priority+, et llancem aquesta pregunta: quantes vegades hem entrat en una botiga online des del mòbil i hem vist que la navegació no és del tot visible, no s’adapta bé o és extremadament gran?
La principal preocupació d’aquest post és saber com podem plantejar la navegació mòbil d’una botiga online perquè sigui usable i fàcil per als nostres usuaris. Hi ha infinitat d’opinions al respecte i molta controvèrsia sobre quina és la millor solució. Nosaltres et volem explicar què és la navegació Priority+ i quins avantatges té aplicar-la a la teva botiga online.
Aplicació mòbil ‘CaixaBank Now App’, guardonada recentment pel Bank Administration Institute (BAI) a la millor experiència d’usuari, que integra Neo, el primer chatbot amb intel·ligència artificial per facilitar l’assistència virtual a l’usuari.
Abans d’explicar què és la navegació Priority+, recordarem quins són els tipus de navegació que s’apliquen habitualment.
La navegació inferior és una solució que ja existia a les nostres aplicacions i que organitzava les diferents seccions en forma de tabs o pestanyes. Sens dubte, era un plantejament que funcionava.
És cert que les aplicacions mòbils (app) són un bon exemple d’usabilitat i funcionalitat, ja que estan dissenyades expressament per a dispositius petits. Tanmateix, les necessitats i funcions d’una app són diferents de les d’una botiga online, per això hem de parar atenció als problemes que hi poden sorgir.
El principal inconvenient és l’amplada limitada que ens ofereix la pantalla per mostrar les seccions d’una botiga online. Per a la navegació inferior és aconsellable no superar els 5 apartats. És probable que també s’hi vulguin aplicar icones i text. En aquest cas, l’espai serà encara més ajustat i caldrà mostrar menys seccions. Com veus, pot no ser una bona solució per a una botiga online que vulgui potenciar molts apartats diferents.
L’exemple que mostrem a continuació fa referència a la botiga online de China Tippler. En el comerç electrònic de la Xina és molt habitual trobar navegacions inferiors en totes les botigues online. D’altra banda, moltes es volen acostar a l’estètica occidental i a poc a poc aposten per dissenys més nets i no tan carregats.
Fins ara hem parlat de la navegació inferior, que va néixer a les aplicacions mòbils, i dels seus avantatges i inconvenients. Ara és el moment de parlar de la navegació de menú superior.
Amb l’arribada dels nous smartphones, calia crear una estratègia o forma de navegació diferent que es pogués aplicar a diverses mides de pantalla, a dispositius més petits i, a més, tàctils. En conseqüència, es va recuperar una icona lleugera i minimalista que permetia adaptar-se a tots: apareix la icona hamburguesa o hamburguer menu.
La característica principal d’aquesta navegació és la icona de menú contret que, en fer-hi clic, fa aparèixer el menú de categories i altres enllaços del web. En tornar-hi a fer clic, desapareix i deixa la pàgina neta d’informació. Està formada per 3 línies horitzontals paral·leles entre si i normalment se situa a la part superior esquerra de la pantalla.
Parlem de «recuperació» de la icona perquè el 1981 Norm Cox ja havia presentat aquest tipus de botó hamburguesa com a part de la interfície d’usuari del Xerox Star. Però no va ser fins al 2009 que va rebre l’impuls que coneixem avui.
L’ús d’aquesta icona s’ha generalitzat arreu. Els usuaris l’han acabat relacionant amb el concepte de menú i saben on trobar, per exemple, les categories d’una botiga online. Aquesta solució s’ha convertit en la reina del menú mòbil.
L’avantatge estètic és que tot allò que ens molesta mostrar a la pantalla ho podem situar darrere d’aquesta icona i aconseguir un disseny net i minimalista. Però compte! També es pot caure en l’error d’amagar informació important per a l’usuari, que només trobarà si obre el menú. No podrà saber què hi ha en aquell apartat fins que no hagi investigat una mica. És a dir, es pot acabar creant una mena de «calaix de sastre» que amaga informació que ens interessaria veure més fàcilment. De la mateixa manera, s’ha intentat aplicar aquesta solució en dissenys de versions desktop o d’escriptori i això, amics, pel que fa a usabilitat, és un error! Tenim espai de sobres per no haver d’amagar els enllaços darrere d’una icona!
A més, siguem sincers, a tots ens agrada que ens facilitin la vida i que ens diguin explícitament què trobarem darrere de cada icona i per a què serveix cada cosa. Per aquest mateix motiu, en alguns dissenys s’ha volgut afegir la paraula “Menú” just al costat del hamburguer menu, per reforçar-ne el contingut. Ho podem veure en l’exemple següent de la botiga online Anna Mora:
Com a resultat dels inconvenients que hem vist en les altres opcions, arriba per quedar-se la navegació Priority+. Aquesta nova solució es basa en la unió de les dues anteriors: treballar les seccions a través de pestanyes o tabs, i reservar-ne una per obrir un menú desplegable lateral (com en la navegació superior a través de l’hamburguer menu).
Aquesta navegació permet a l’usuari trobar les seccions més importants d’un sol cop d’ull i mostrar molt més contingut sense carregar la pantalla amb un excés d’informació. Poden ser altres categories i/o enllaços rellevants, o bé informació addicional o dades de contacte. Què et sembla? Genial, oi?
A les aplicacions mòbils veurem exemples de navegació Priority+, com a Facebook, YouTube (a la pestanya biblioteca apareixen més seccions del perfil que no es veuen a les tabs) i, com no podia ser d’altra manera, a la pàgina principal de cerca de Google. A la captura següent veiem la barra de pestanyes a la part inferior i una secció a la dreta que diu «Més». A la segona imatge veiem el desplegable d’enllaços que hi ha dins d’aquesta icona:
Efectivament, podria ser-ho. Aquesta combinació permet arribar a les parts més importants d’un eCommerce i, a més, reservar una zona per mostrar altres enllaços rellevants sempre que calgui.
Aquesta solució també es pot aplicar a països com la Xina, que utilitzen la navegació inferior mòbil, com hem esmentat abans. A més, té un valor afegit gràcies a la secció “extra”.
L’anomenem navegació Priority+ perquè es prioritzen alguns continguts i d’altres es deixen a disposició i curiositat de l’usuari. Tot i així, tota aquesta informació és a la mateixa zona de navegació, sense perdre-la en cap moment, mentre l’usuari continua navegant.
No ha de ser necessàriament la Priority+, i la nostra intenció no és marejar-te (sé el que deus pensar, però tot té una explicació). Allà va. Cada botiga online té unes necessitats, un estil, una quantitat d’informació i de categories i, també, una intenció. Els dissenyadors i Projects Managers, en el cas de TLG Commerce, ens encarreguem de trobar la millor solució per a cada usuari i tipus de botiga.
Per això cal estudiar detingudament cada cas i pensar quin ús tindrà, quin públic objectiu tindrà i quina informació cal prioritzar.
Priority+ uneix la navegació en forma de pestanyes amb el desplegable de menú lateral, que funciona amb l’hamburguer menu o menú hamburguesa. La millor navegació dependrà del nombre de categories de la botiga online i dels objectius del client.
Per ajudar-te una mica més, et donarem una sèrie de consells generals perquè els tinguis en compte a l’hora d’estudiar la navegació de la teva botiga online:
- Opta per la funcionalitat. Cal plantejar solucions que funcionin més enllà de les tendències. No sempre “el que es porta” és el més encertat.
- Com més fàcil, millor. No tots els públics fan servir igual un dispositiu mòbil, però sí que és aconsellable dissenyar sempre pensant en l’usuari més inexpert. Així t’asseguraràs que el cercle de persones que el sàpiguen utilitzar sigui molt més gran.
- Mostra les categories. Sempre que puguis, deixa visibles els enllaços de les categories més importants.
- Defineix en cada moment què veurà l’usuari. Especifica sempre que puguis què trobarà l’usuari mentre navega.
- Treballa l’opció que triïs amb consciència. Si prefereixes un disseny minimalista i vols utilitzar l’hamburguer menu, assegura’t de facilitar el contingut que hi ha a dins en un altre lloc de la pàgina i, en qualsevol cas, no el carreguis amb massa informació. Fes que la teva icona agrupi una «tipologia» i evita barrejar temes diferents.
Facebook va ser sens dubte el revolucionari que va començar a utilitzar el menú hamburguesa. Avui s’ha adaptat a les noves exigències i té una navegació Priority+ a la seva aplicació mòbil:
Conclusió
Cada dia sorgeixen nous reptes, ja que el creixement exponencial de les tecnologies és imparable. Per això mai no es pot determinar una solució com la màxima, la millor i l’única, sinó que hem de fer un disseny centrat en l’usuari que s’adapti a les noves exigències. D’aquí a poc podríem parlar de la interacció amb els dispositius per veu, i això, de nou, ens tornaria a portar a nous obstacles i noves estratègies.
Dit això, esperem que t’hagi agradat aquest post i que hagis après una mica més sobre com funcionen les navegacions mòbils, els seus avantatges i inconvenients i què cal tenir en compte a l’hora de decidir-se per una o una altra.
Si t’interessa el disseny web, et deixo els posts anteriors que hem publicat al nostre blog: Disseny eCommerce: procés de disseny d’una botiga online i Com aplicar correctament les imatges al teu eCommerce.
Si tens algun dubte i/o vols repensar la versió mòbil del teu eCommerce, no dubtis a contactar amb nosaltres. T’ajudarem encantats. Fins aviat!
