Unitat didàctica 3. Designing web navigation.

No existeix una sola guia per a dissenyar la navegació d'una pàgina web. Nosaltres mateixos hem de ser capaços de veure què és allò que necesitem i què no. Una bona manera de fer aquest exercici és veure la pàgina com si fòssim els visitants i no els dissenyadors.

Estructural: connecta una pàgina amb una altra de nivell inferior (com una subcarpeta).

Navegació principal

Normalment es situa a la part superior de la pàgina

S'espera que enllacin amb pàgines dins el lloc web, no que enllaci amb pàgines externes

Els canvis que es produeixen en cada pàgina són mínims

Dóna una vista prèvia de la pàgina i respon preguntes que pot tenir l'usuari principiant, per exemple, saber si trobarà el que està buscant

És una orientació constant molt útil

Serveix per moure's fàcilment entre les pàgines sense haver de recomençar des de la pàgina principal

De què depén la mida i la persistència de la navegació principal?

Mida del lloc web

Comportament i necessitats de l'usuari

Objectius dels interessats (empreses, dissenyadors...)

Procès de navegació (si es pot interrompre o no, etc.)

Navegació local

Per accedir a nivells inferiors de l'estrucutura del web, a continuació de les pàgines de navegació principal

Extensió de la navegació principal

A diferència que la principal, la nav. local pot, a vegades, enllaçar fora de la pàgina web

Relaciona temes i els agrupa

Pot ajudar a aclarir de què tracta la pàgina

Disposicions comunes entre les dues navegacions

Com una L invertida: nav. principal horitzontal a sobre de la pàgina i nav. local vertical a l'esquerra

Les dues horitzontals, una sota de l'altra, potser de diferent mida, tipus de lletra, etc.

Verticals i adjuntes: en forma d'arbre, la local queda adjuntada, marcada amb tabulador, dins de la principal

Accessibilitat

Associativa: connecta pàgines de temes semblants, dins el mateix nivell (com passar d'una subcarpeta a una altra guardades dins la mateixa carpeta principal).

Navegació contextual

Incrustada: les paraules mateixes queden subratllades i servirien per donar més informació sobre la paraula enllaçada

Relacionada: en un quadre a part, serveixen per a facilitar més temes semblants al consultat o enllaçar amb els articles més visitats sobre aquell tema

Dóna la oportunitat d'ampliar la inforamció i una bona exploració

Navegació d'adaptació

Els links d'aquesta navegació estan creats per un procés basat en un rànquing algorítmic que analitza el comportament dels usuaris

Normalment utilitzada per a fer recomanacions en webs de comerç online

El més normal és fer llistes de top 10, perquè sovint, els enllaços més populars poden arribar a ser interminables

Subtopic

Enllaços ràpids

Enllaç a una pàgina important del web que no surt a la navegació principal

Navegació de peu de pàgina

Tradicionalment, conté informació addicional que no pertany al tema principal, com els crèdits, llicències de copyright, etc.

Utilitat: connecta amb pàgines i eines que ajudin a l'usuari a utilitzar la pàgina. Acostumen a estar fora de la jerarquia d'enllaços principal de la pàgina i només es relacionen entre les de mateixa funció.

Proporciona eines per ajudar a l'ususari a navegar per la web

No formen part de la jerarquia de la pàgina, enllacen amb altres pàgines dins d'aquesta però sense cap tipus de relació amb el tema, com per exemple, el perfil d'ususari, un "carro de compra"...

Normalment apareix al top del web

Sovint, la navegació principal i la d'utilitat apareixen juntes en una àrea global de navegació

Tipus de navegació d'utilitat

Enllaços que duen a altres pàgines de la mateixa empresa o negoci, per exemple, o com les diferents utilitats de google, etc.

Caixes d'eines, per fer el que sigui al lloc web

Logo enllaçat, que pot mostrar-lo com a imatge o pot ser un enllaç ràpid a la "home page"

Selector d'idioma

Recordem que si tenim una web en més d'una llengua, ha de quedar marcat al codi HTML

Selector de país o regió

Una mateixa pàgina pot tenir diferents producte segons la regió o el país

Navegació interna

Enllaços que serveixen per saltar d'una pàgina a una altra dins la mateixa web sense haver de tornar enrrere

També proporciona una vista prèvia general de la pàgina

El tipus de mecanisme d'accès als continguts

Comportament dels enllaços de navegació i la transició a la següent pàgina

Les maneres de buscar els mecanismes de suport

El tractament visual de les opcions de navegació

La posició de la navegació a la pàgina

Pàgines de navegació: mostren al visitant el seu objectiu, si és una pàgina de contingut o funcional

"Home page": pàgina principal, ens redirigeix cap allà on vulguem anar

Pàgines de destinació: diferents categories de la pàgina principal

Pàgines-galeria: com les de destinació però amb contingut gràfic enllaçat a d'altres pàgines

Pàgines de resultat de cerca: es crea basant-se en les "keywords" utilitzades per l'usuari

Pàgines de contingut: són les pàgines que busca la gent: històries, articles, blocs, notícies...

Pàgines de producte

Imatges

Descripcions

Detalls

Productes relacionats

Afegir al "carro de comprar" o al "moneder"

Guardar en una llista de preferits

Veure les imatges en gran

Canviar la mida i el color

Enviar per correu a un amic

Pàgines funcionals: per completar la recerca online. No acostuma a haver-hi text, sinó navegació incrustada i links relacionats

Pàgines de cerca avançada, que normalment estan en pàgines serparades

Pàgines de presentació, de registre, per crear comptes... No tenen una navegació perquè no s'interrompi el procès (s'hauria de tornar a començar)

Subtopic

De què depén la llargada de la pàgina (Quan una pàgina s'hauria de convertir en dues?)

Mides de pantalla (no n'hi ha una de única)

Contingut (no té el mateix efecte si estpa dividit en parts diferents)

A la gent no li agrada llegir de la pantalla de l'ordinaor, és més cansat llegir online que en suport paper