Navegacio

756 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
756
On SlideShare
0
From Embeds
0
Number of Embeds
583
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Navegacio

  1. 1. Navegació i convencionsMariona Grané. Laboratori de Mitjans Interactius. @CAVUB
  2. 2. principis de disseny interactiu
  3. 3. principis de disseny interactiuEstructura, navegació i convencionsDiagramacióEstructuresConsistènciaConvencions en navegació
  4. 4. estructura i navegacióL’estructuració de la informació interactiva pot tenir un objectiu esquemàtic lligat a lanavegació o lligat a la programació.Parlem de storyline (navegació)o de diagrames de fluxe (algoritmes).homeapartat 1 apartat 1 apartat 1subapart subapart subapartsubapartsubapart subapart
  5. 5. estructura i navegacióEls diagrames de fluxe
  6. 6. estructura i navegacióEls diagrames de fluxe són eines per representar gràficament un algoritme.Diagrames = Blueprint = Arquitecture MapUtilitzen sistemes estàndards de representació d’accions i de relacions acordats.
  7. 7. estructura i navegacióNeixen de la representació de processos
  8. 8. estructura i navegacióS’utilitzen per mostrar relacions de causa-efecte entre accions i interaccions delsistema amb l’usuari.Són utilitzats des de la concepció del’arquitectura de la informació,des de la programació ii des del disseny de videojocs ointeractivitats complexes com aesquema previ al guió o maqueta.
  9. 9. estructura i navegacióElements d’un diagrama de fluxeETAPA DEPROCÉSDECISIÓINICICONNECTORPROCÉS[ COMENTARI ]BASE DE DADES
  10. 10. estructura i navegacióEines per crear un diagramaOMNIGRAFFLE www.omnigroup.comSMARTDRAW www.smartdraw.comDIA dia-installer.de
  11. 11. estructura i navegacióEls diagrames de navegació, storylines
  12. 12. estructura i navegacióL’storyline es centra en la navegació i l’organització d’informacions que s’estructurenordenadament sense relacions de causa i efecte.
  13. 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íciesper fer la programació.
  14. 14. estructura i navegacióDe diferents concepcions en l’organització de la informació,es construeixen estructures diferents per a ser desenvolupades a la webTema 1subtema 1.1subtema 1.2subtema 1.3Tema 2subtema 2.1subtema 2.2Tema 3hometema 1 tema 2 tema 3subtema1subtema2subtemasubtemasubtema subtema
  15. 15. estructura i navegacióEstructures: sistemes organitzatius d’estructuració de pantalles i de navegació.
  16. 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 sercompresos han de ser visualitzats o llegits en un ordre seqüencial.
  17. 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 enpantalles secundàries seguint nivells d’aprofundiment diferents segons lescaracterístiques del contingut. D’aquesta manera els enllaços es poden visualitzar sotaels nivells superiors.
  18. 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 ocada subapartat. S’utilitza en entorns informatius i formatius on els ítems que s’han deconsultar i llegir s’organitzen en subapartats categoritzats de forma similar en cadacas.
  19. 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 pantallaestableix categories, o facetes, per a cada informació requerida, les quals, encombinar-se, permeten arribar al material que es busca. És a dir, els continguts espoden buscar o descriure des de diferents punts de vista, i els sistemes de cercapermeten accedir a la mateixa informació des de diferents plantejaments o diferentstemes.Com els sistemes de compraonline on es pot seleccionarproductes per categoriesamb un clic.
  20. 20. estructura i navegacióEstructura hipertextual: organitzada en nodes significatius d’informació relacionatsentre ells per diferents enllaços (per contingut, tipologia, temàtica, temporalitat, etc.).e l c o n c e p t ed’hipertextualitatelimina la jerarquiaen la navegació
  21. 21. estructura i navegacióSovint un mateix entorn web utilitza sistemes d’estructuració combinats
  22. 22. estructura i navegacióAvui les sistemes d’organització de la informaciócanvien i es construeixen, també, a partir de l’ús i laparticipació dels usuaris; així les estructuresesdevenen entorns cada cop més rizomàtics ques’allunyen de les visions més clàssiques i jeràrquiques.
  23. 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
  24. 24. Estructura del entorno
  25. 25. estructura i navegacióConsistència: Coherencia de disseny a tot l’entorn.
  26. 26. estructura i navegacióImplica mantenir una imatge, una estructura, unes interaccions iguals durant tot elsistema. S’aplica als elements d’una pantalla i al global de les pantalles de l’entorninteractiu.Tognazzini (2003) exposa que primer cal una consistència en la interacció i en segonlloc una consistència visual.“Cal asegurar la interacció amb l’usuari per mitjà de sistemes idèntics en tot l’entorn.“
  27. 27. http://www.periscope.net
  28. 28. 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 lloc3. 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 unadisposició coherent al llarg de tot el sistema.!4. L’aspecte visual general de l’aplicació,el sistema, l’entorn, la web, etc. ha de sercoherent.5. La consistència interna de funcionamentdel sistema.
  29. 29. http://www.001.ch
  30. 30. http://inicia.es/de/escuelaartesegovia
  31. 31. http://www. sheepgame.co.uk
  32. 32. http://www.nobodinoz.com/
  33. 33. estructura i navegacióConvencions en navegació: Sistemes comuns i patrons: menus, finestres, mapes,pestanyes, enllaços, hotspots, timeline, entorns virtuals, 3D, ...
  34. 34. estructura i navegacióLes convencions en els sistemes de navegació, son les estándards, les trets comuns omajoritariamente utilitzats per la navegació online.- elements de navegació- disposició dels elements
  35. 35. estructura i navegacióElements gràfics o zones actives en metàfores de navegació.
  36. 36. estructura i navegacióBotons, que permeten moure’s dins una informació entre pantalles o continguts, capendavant, cap enrere, buscant més informació, altres apartats, accions (imprimir, rss,guardar...).
  37. 37. estructura i navegacióBarres de navegació superiors, com a quadres de text, com a pestanyes i com adesplegables.
  38. 38. estructura i navegacióMenús laterals, organitzats i disposats segons cada cas en menús breus, a dreta o aesquerra, menús desplegables, classificats segons tipologies, etc.
  39. 39. estructura i navegacióEnllaços interns del contingut en textos i gràfics.
  40. 40. 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ó elcamí estructurat des del disseny de la web seguint la ruta des de la home fins a lapantalla que visualitza l’usuari en aquell moment.
  41. 41. estructura i navegacióIndicadors lineals de navegació, que permeten saber quantes pantalles ha vist l’usuari iquantes li falten per veure d’un contingut concret.
  42. 42. estructura i navegacióCategories i tagclouds, sistemes de navegació entre continguts, popularitzats a partirdels blogs i basats en la categorització de continguts per folksonomies.
  43. 43. 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 denavegació 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 demolts anys de multimèdia i interactius, un nou espai a la dreta on es poden disposar elsmenú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 costatesquerre per al menú de navegació.· També un 52% utilitzen una navegació primària a la part superior, amb pocs ítemsque porten a llocs de primer nivell jeràrquic.· PERÒ els usuaris no es confonen quan els sistemes de navegació canvien o no sóncomuns, sinó que es resituen ràpidament i s’adapten, sempre que la navegació siguiclara i inequívoca
  44. 44. principis de disseny interactiuLEER NO MATAHassan, Y.; Martín, F. J. (2002), «Elementos de navegación y orientación delu 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.htmInstone, K. (2002), «Location Breadcrumbs». 3rd Annual InformationArchitecture Summit, 16-17 de març, Baltimore.Landow, G. P. (1992), Hypertext. The Convergence of Contemporary CriticalTheory and Technology. Baltimore: Johns Hopkins University Press.Tognazzini, B. (2003), «First Principles of Interaction Design». Asktog. Des dehttp://www.asktog.com/basics/firstPrinciples.htm
  45. 45. Mariona Grané.Laboratori de Mitjans Interactius www.lmi.ub.edu

×