1. Navegació i convencions
Mariona Grané. Laboratori de Mitjans Interactius. @CAVUB

2. principis de disseny interactiu

3. principis de disseny interactiu
Estructura, navegació i convencions
Diagramació
Estructures
Consistència
Convencions en navegació

4. estructura i navegació
L’estructuració de la informació interactiva pot tenir un objectiu esquemàtic lligat a la
navegació o lligat a la programació.
Parlem de storyline (navegació)
o de diagrames de fluxe (algoritmes).
home
apartat 1 apartat 1 apartat 1
subapart subapart subapart
subapart
subapart subapart

5. estructura i navegació
Els diagrames de fluxe

6. estructura i navegació
Els diagrames de fluxe són eines per representar gràficament un algoritme.
Diagrames = Blueprint = Arquitecture Map
Utilitzen sistemes estàndards de representació d’accions i de relacions acordats.

7. estructura i navegació
Neixen de la representació de processos

8. estructura i navegació
S’utilitzen per mostrar relacions de causa-efecte entre accions i interaccions del
sistema amb l’usuari.
Són utilitzats des de la concepció de
l’arquitectura de la informació,
des de la programació i
i des del disseny de videojocs o
interactivitats complexes com a
esquema previ al guió o maqueta.

9. estructura i navegació
Elements d’un diagrama de fluxe
ETAPA DE
PROCÉS
DECISIÓ
INICI
CONNECTOR
PROCÉS
[ COMENTARI ]
BASE DE DADES

10. estructura i navegació
Eines per crear un diagrama
OMNIGRAFFLE www.omnigroup.com
SMARTDRAW www.smartdraw.com
DIA dia-installer.de

11. estructura i navegació
Els diagrames de navegació, storylines

12. estructura i navegació
L’storyline es centra en la navegació i l’organització d’informacions que s’estructuren
ordenadament sense relacions de causa i efecte.

13. estructura i navegació
En el disseny interactiu, els diagrames de navegació formen part del guió
multimèdia, del disseny d’un projecte,
i són bàsics per detectar les pantalles que cal treballar en el disseny d’interfícies
per fer la programació.

14. estructura i navegació
De diferents concepcions en l’organització de la informació,
es construeixen estructures diferents per a ser desenvolupades a la web
Tema 1
subtema 1.1
subtema 1.2
subtema 1.3
Tema 2
subtema 2.1
subtema 2.2
Tema 3
home
tema 1 tema 2 tema 3
subtema
1
subtema
2
subtema
subtema
subtema subtema

15. estructura i navegació
Estructures: sistemes organitzatius d’estructuració de pantalles i de navegació.

16. estructura i navegació
Estructura lineal: respon a aquells continguts plantejats per ser llegits.
Porta l’usuari a moure’s entre la informació seguint la linealitat entre les pantalles.
Visualització d’una presentació o un llibre multimèdia, i continguts que per ser
compresos han de ser visualitzats o llegits en un ordre seqüencial.

17. estructura i navegació
Estructura jeràrquica: és encara la forma més comuna d’organització d’entorns web.
A partir d’una pantalla principal o d’entrada, les informacions s’organitzen en
pantalles secundàries seguint nivells d’aprofundiment diferents segons les
característiques del contingut. D’aquesta manera els enllaços es poden visualitzar sota
els nivells superiors.

18. estructura i navegació
Estructura simètrica: funciona igual que l’estructura jeràrquica de la informació, però
cada apartat del nivell secundari presenta estructures simètriques en cada tema o
cada subapartat. S’utilitza en entorns informatius i formatius on els ítems que s’han de
consultar i llegir s’organitzen en subapartats categoritzats de forma similar en cada
cas.

19. estructura i navegació
Estructura facetada: està relacionada també amb la jerarquització de la informació,
però a l’hora de programar i a l’hora de visualitzar la navegació en pantalla
estableix categories, o facetes, per a cada informació requerida, les quals, en
combinar-se, permeten arribar al material que es busca. És a dir, els continguts es
poden buscar o descriure des de diferents punts de vista, i els sistemes de cerca
permeten accedir a la mateixa informació des de diferents plantejaments o diferents
temes.
Com els sistemes de compra
online on es pot seleccionar
productes per categories
amb un clic.

20. estructura i navegació
Estructura hipertextual: organitzada en nodes significatius d’informació relacionats
entre ells per diferents enllaços (per contingut, tipologia, temàtica, temporalitat, etc.).
e l c o n c e p t e
d’hipertextualitat
elimina la jerarquia
en la navegació

21. estructura i navegació
Sovint un mateix entorn web utilitza sistemes d’estructuració combinats

22. estructura i navegació
Avui les sistemes d’organització de la informació
canvien i es construeixen, també, a partir de l’ús i la
participació dels usuaris; així les estructures
esdevenen entorns cada cop més rizomàtics que
s’allunyen de les visions més clàssiques i jeràrquiques.

23. estructura i navegació
La creació d’un storyline implica una estructuració de la informació prèvia molt clara.
Cal a més:
· Presentar la informació tenint en compte TOTES les pantalles que es crearan
· Les diferents estructures que poden estar combinades
· Totes les relacions de navegació
· Nivells d’aprofundiment
· Nomenclatura clara i concreta
· Codis de colors o formes

32. Estructura del entorno

41. estructura i navegació
Consistència: Coherencia de disseny a tot l’entorn.

42. estructura i navegació
Implica mantenir una imatge, una estructura, unes interaccions iguals durant tot el
sistema. S’aplica als elements d’una pantalla i al global de les pantalles de l’entorn
interactiu.
Tognazzini (2003) exposa que primer cal una consistència en la interacció i en segon
lloc una consistència visual.
“Cal asegurar la interacció amb l’usuari per mitjà de sistemes idèntics en tot l’entorn.“

43. http://www.periscope.net

44. estructura i navegació
Nivells de consistència de Tognazzini en un entorn web:
1. Tots els comportaments del sistema han de ser iguals.
2. Les accions dels sistemes sempre igual i al mateix lloc
3. Les propietats i les capacitats dels objectes i els elements, icones, fletxes,
botons, etc., que han de ser consistents en el seu disseny i han de tenir una
disposició coherent al llarg de tot el sistema.
!
4. L’aspecte visual general de l’aplicació,
el sistema, l’entorn, la web, etc. ha de ser
coherent.
5. La consistència interna de funcionament
del sistema.

45. http://www.001.ch

46. http://inicia.es/de/escuelaartesegovia

47. http://www. sheepgame.co.uk

48. http://www.nobodinoz.com/

49. estructura i navegació
Convencions en navegació: Sistemes comuns i patrons: menus, finestres, mapes,
pestanyes, enllaços, hotspots, timeline, entorns virtuals, 3D, ...

50. estructura i navegació
Les convencions en els sistemes de navegació, son les estándards, les trets comuns o
majoritariamente utilitzats per la navegació online.
- elements de navegació
- disposició dels elements

51. estructura i navegació
Elements gràfics o zones actives en metàfores de navegació.

52. estructura i navegació
Botons, que permeten moure’s dins una informació entre pantalles o continguts, cap
endavant, cap enrere, buscant més informació, altres apartats, accions (imprimir, rss,
guardar...).

53. estructura i navegació
Barres de navegació superiors, com a quadres de text, com a pestanyes i com a
desplegables.

54. estructura i navegació
Menús laterals, organitzats i disposats segons cada cas en menús breus, a dreta o a
esquerra, menús desplegables, classificats segons tipologies, etc.

55. estructura i navegació
Enllaços interns del contingut en textos i gràfics.

56. estructura i navegació
Breadcrumbs, que mostren a l’usuari on és en relació amb l’estructura de la web.
S’organitza com un path que orienta i permet veure on és a cada moment i la relació
de la pantalla que visualitza amb la resta dels apartats del site.
No indiquen concretament el camí que s’ha seguit fins a arribar a la pantalla, sinó el
camí estructurat des del disseny de la web seguint la ruta des de la home fins a la
pantalla que visualitza l’usuari en aquell moment.

57. estructura i navegació
Indicadors lineals de navegació, que permeten saber quantes pantalles ha vist l’usuari i
quantes li falten per veure d’un contingut concret.

58. estructura i navegació
Categories i tagclouds, sistemes de navegació entre continguts, popularitzats a partir
dels blogs i basats en la categorització de continguts per folksonomies.

59. estructura i navegació
Disposició dels elements de navegació:
· En l’ús dels menús, més del 89% dels entorns web solen situar els menús de
navegació a la part superior de la web, i només un 11%, a la banda esquerra.
· La proliferació dels blogs ha creat patrons distintius i ha fet que sorgeixi, després de
molts anys de multimèdia i interactius, un nou espai a la dreta on es poden disposar els
menús de navegació que sempre havien estat a l’esquerra.
· Un 58% dels blogs utilitzen el costat dret vertical, i només un 12% fan servir el costat
esquerre per al menú de navegació.
· També un 52% utilitzen una navegació primària a la part superior, amb pocs ítems
que porten a llocs de primer nivell jeràrquic.
· PERÒ els usuaris no es confonen quan els sistemes de navegació canvien o no són
comuns, sinó que es resituen ràpidament i s’adapten, sempre que la navegació sigui
clara i inequívoca

60. principis de disseny interactiu
LEER NO MATA
Hassan, Y.; Martín, F. J. (2002), «Elementos de navegación y orientación del
u s u a r i o » . N o s ó l o u s a b i l i d a d , n ú m . 1. D e s d e : h t t p : / /
www.nosolousabilidad.com/articulos/orientacion_usuario.htm
Instone, K. (2002), «Location Breadcrumbs». 3rd Annual Information
Architecture Summit, 16-17 de març, Baltimore.
Landow, G. P. (1992), Hypertext. The Convergence of Contemporary Critical
Theory and Technology. Baltimore: Johns Hopkins University Press.
Tognazzini, B. (2003), «First Principles of Interaction Design». Asktog. Des de
http://www.asktog.com/basics/firstPrinciples.htm

61. Mariona Grané.
Laboratori de Mitjans Interactius www.lmi.ub.edu