{"id":107,"date":"2019-12-06T20:55:33","date_gmt":"2019-12-06T18:55:33","guid":{"rendered":"http:\/\/quadern-interficies-test.recursos.uoc.edu\/?page_id=107"},"modified":"2020-02-12T09:22:22","modified_gmt":"2020-02-12T07:22:22","slug":"2-4-estructura-y-navegacion","status":"publish","type":"page","link":"http:\/\/quadern-interficies-test.recursos.uoc.edu\/es\/2-4-estructura-y-navegacion\/","title":{"rendered":"2.4. Estructura y navegaci\u00f3n"},"content":{"rendered":"<p>A la hora de estructurar la informaci\u00f3n de una interfaz, es importante que la arquitectura refleje los objetivos del producto y las necesidades del usuario. La estrategia nos indica cu\u00e1les son las necesidades del usuario y el \u00e1mbito (<em>scope plane<\/em>) indica qu\u00e9 informaci\u00f3n es m\u00e1s relevante para cubrir esas necesidades.<\/p>\n<div class=\"featured featured-blue\"><p>Una buena <strong>arquitectura<\/strong> y un dise\u00f1o de interacci\u00f3n apropiado se caracteriza por anticipar las expectativas del usuario combinando el dise\u00f1o de informaci\u00f3n con el dise\u00f1o de interfaz y de navegaci\u00f3n.<\/p>\n<\/div>\n<p>Existen varios tipos de arquitecturas o estructuras de informaci\u00f3n:<\/p>\n<ul>\n<li><strong>Estructuras jer\u00e1rquicas<\/strong>: tambi\u00e9n llamadas <em>\u00e1rboles<\/em>, se componen de nodos (unidades de informaci\u00f3n) asociados a nodos padres y nodos hijos, estableciendo as\u00ed relaciones de dependencia.<\/li>\n<li><strong>Matrices<\/strong>: permiten una navegaci\u00f3n estructurada de nodo a nodo en dos o m\u00e1s dimensiones.<\/li>\n<li><strong>Estructuras org\u00e1nicas<\/strong>: no siguen un patr\u00f3n concreto. Los nodos se conectan individualmente seg\u00fan evolucionen sus relaciones, y no contienen secciones diferenciadas.<\/li>\n<li><strong>Estructuras secuenciales<\/strong>: las m\u00e1s comunes, a menudo las encontramos en soportes fuera de l\u00ednea, como por ejemplo un libro de texto.<\/li>\n<\/ul>\n<figure id=\"attachment_225\" aria-describedby=\"caption-attachment-225\" style=\"width: 525px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"wp-image-225 size-full\" src=\"\/wp-content\/uploads\/2019\/12\/m4357_06.jpg\" alt=\"\" width=\"525\" height=\"174\" srcset=\"\/wp-content\/uploads\/2019\/12\/m4357_06.jpg 525w, \/wp-content\/uploads\/2019\/12\/m4357_06-300x99.jpg 300w\" sizes=\"(max-width: 525px) 100vw, 525px\" \/><figcaption id=\"caption-attachment-225\" class=\"wp-caption-text\">Figura 6. Estructura de datos<br \/>Fuente: <a href=\"https:\/\/www.oscarblancarteblog.com\/2014\/08\/22\/estructura-de-datos-arboles\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.oscarblancarteblog.com\/2014\/08\/22\/estructura-de-datos-arboles\/<\/a>.<\/figcaption><\/figure>\n<p>Para representar la arquitectura de la informaci\u00f3n podemos utilizar los <strong>diagramas<\/strong> (ved figura 7). Este tipo de representaci\u00f3n visual tambi\u00e9n es especialmente \u00fatil para comunicar las ramificaciones, secciones e interrelaciones entre los componentes de la interfaz. No es necesario que represente cada enlace o cada conexi\u00f3n entre secciones, sino que debe comunicar un patr\u00f3n estructural que pueda ser aplicable a la totalidad del contenido previsto.<\/p>\n<figure id=\"attachment_227\" aria-describedby=\"caption-attachment-227\" style=\"width: 563px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"size-full wp-image-227\" src=\"\/wp-content\/uploads\/2019\/12\/m4357_07.jpg\" alt=\"\" width=\"563\" height=\"264\" srcset=\"\/wp-content\/uploads\/2019\/12\/m4357_07.jpg 563w, \/wp-content\/uploads\/2019\/12\/m4357_07-300x141.jpg 300w\" sizes=\"(max-width: 563px) 100vw, 563px\" \/><figcaption id=\"caption-attachment-227\" class=\"wp-caption-text\">Figura 7. Diagrama de la estructura jer\u00e1rquica de un sitio web<br \/>Fuente: <a href=\"https:\/\/wiseseo.guru\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/wiseseo.guru<\/a>.<\/figcaption><\/figure>\n<div class=\"featured featured-grey\"><p><strong>Ejercicio<\/strong><\/p>\n<p>Leed en profundidad\u00a0 <a href=\"https:\/\/learning.oreilly.com\/library\/view\/the-elements-of\/9780321688651\/ch05.html\" target=\"_blank\" rel=\"noopener noreferrer\">\u00abCap\u00edtulo 5. The Structure Plane: Interaction Design and Information Architecture\u00bb<\/a> del libro <em>The Elements of User Experience: User-Centered Design for the Web<\/em>. \u00bfPodr\u00edais identificar ejemplos de interfaces web que presenten estructuras de informaci\u00f3n jer\u00e1rquicas, matrices, org\u00e1nicas y secuenciales? Elegid uno de estos ejemplos y esbozad un diagrama de nodos para representar su estructura general.<\/p>\n<\/div>\n<div class=\"featured featured-blue\"><p>El <strong>dise\u00f1o de navegaci\u00f3n<\/strong> es una especialidad del dise\u00f1o de interfaces que se centra en optimizar la distribuci\u00f3n de informaci\u00f3n en el espacio.<\/p>\n<\/div>\n<p>A este nivel es determinante que la organizaci\u00f3n de la informaci\u00f3n est\u00e9 contextualizada y utilice la met\u00e1fora de forma efectiva, facilitando una navegaci\u00f3n intuitiva y libre de indicaciones expl\u00edcitas. El dise\u00f1o de navegaci\u00f3n tiene tres objetivos:<\/p>\n<ol>\n<li>Permitir al usuario trasladarse de un punto a otro punto de la p\u00e1gina o aplicaci\u00f3n (<em>wayfinding<\/em>).<\/li>\n<li>Comunicar la relaci\u00f3n entre elementos o unidades de informaci\u00f3n.<\/li>\n<li>Comunicar la relaci\u00f3n entre los contenidos y el espacio de la interfaz (como la p\u00e1gina) en la que se encuentra el usuario.<\/li>\n<\/ol>\n<p>La clave de un buen dise\u00f1o de interfaz de navegaci\u00f3n es seleccionar los elementos de interacci\u00f3n m\u00e1s adecuados para cada caso. Algunos de los elementos de control convencionales son:<\/p>\n<ul>\n<li><strong><em>Checkboxes<\/em><\/strong>: para la selecci\u00f3n de opciones m\u00faltiples.<\/li>\n<li><strong>Botones radio<\/strong>: para la selecci\u00f3n de opciones exclusivas.<\/li>\n<li><strong>Campos de texto<\/strong>: para la introducci\u00f3n de texto.<\/li>\n<li><strong>Men\u00fas desplegables<\/strong>: una versi\u00f3n compacta de los botones radio.<\/li>\n<li><strong>Listado de cajas<\/strong>: una versi\u00f3n compacta de los <em>checkboxes<\/em>.<\/li>\n<li><strong>Botones de acci\u00f3n<\/strong>: suelen usarse para aplicar un cambio de opciones, pero pueden controlar cualquier tipo de acci\u00f3n.<\/li>\n<\/ul>\n<div class=\"featured featured-grey\"><p><strong>Ejercicio<\/strong><\/p>\n<p>Identificad los elementos de la interfaz de navegaci\u00f3n del buscador de la p\u00e1gina <a href=\"http:\/\/www.wallapop.com\" target=\"_blank\" rel=\"noopener noreferrer\">Wallapop<\/a>. Comparad estos elementos a los encontrados en el buscador de <a href=\"http:\/\/www.idealista.com\" target=\"_blank\" rel=\"noopener noreferrer\">Idealista<\/a> y reflexionad sobre las ventajas e inconvenientes de ambos dise\u00f1os. \u00bfCu\u00e1l os parece m\u00e1s adecuado? \u00bfPor qu\u00e9?<\/p>\n<\/div>\n<p>Como coment\u00e1bamos anteriormente, la mayor\u00eda de p\u00e1ginas web combinan diferentes estructuras de informaci\u00f3n; asimismo, tambi\u00e9n hacen uso de m\u00faltiples sistemas de navegaci\u00f3n seg\u00fan el rol particular del usuario y las circunstancias. Algunos de los dise\u00f1os m\u00e1s habituales son:<\/p>\n<ul>\n<li>La <strong>navegaci\u00f3n global<\/strong>: proporciona acceso al amplio barrido de todo el sitio.<\/li>\n<li>La <strong>navegaci\u00f3n local<\/strong>: proporciona a los usuarios acceso a lo que est\u00e1 \u00abcerca\u00bb en la arquitectura.<\/li>\n<li>La <strong>navegaci\u00f3n suplementaria<\/strong>: proporciona accesos directos a contenido relacionado que puede no ser f\u00e1cilmente accesible a trav\u00e9s de la navegaci\u00f3n global o local.<\/li>\n<li>La <strong>navegaci\u00f3n contextual<\/strong> (<em>in-line<\/em>): est\u00e1 incrustado en el contenido de la p\u00e1gina en s\u00ed.<\/li>\n<li>La <strong>navegaci\u00f3n de cortes\u00eda<\/strong>: proporciona acceso a elementos que los usuarios no necesitan de manera regular, pero que com\u00fanmente se proporcionan como una conveniencia.<\/li>\n<\/ul>\n<div class=\"featured featured-grey\"><p><strong>Ejercicio<\/strong><\/p>\n<p>Leed en profundidad el <a href=\"https:\/\/learning.oreilly.com\/library\/view\/the-elements-of\/9780321688651\/ch06.html\" target=\"_blank\" rel=\"noopener noreferrer\">\u00abCap\u00edtulo 6. The Skeleton Plane: Interface Design, Navigation Design, and Information Design\u00bb<\/a> del libro <em>The Elements of User Experience: User-Centered Design for the Web<\/em>. Analizad el dise\u00f1o de la interfaz de la aplicaci\u00f3n que aparece en las siguientes capturas de pantalla:<\/p>\n<figure id=\"attachment_229\" aria-describedby=\"caption-attachment-229\" style=\"width: 765px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"size-full wp-image-229\" src=\"\/wp-content\/uploads\/2019\/12\/m4357_08.jpg\" alt=\"\" width=\"765\" height=\"343\" srcset=\"\/wp-content\/uploads\/2019\/12\/m4357_08.jpg 765w, \/wp-content\/uploads\/2019\/12\/m4357_08-300x135.jpg 300w\" sizes=\"(max-width: 765px) 100vw, 765px\" \/><figcaption id=\"caption-attachment-229\" class=\"wp-caption-text\">Figura 8<br \/>Fuente: <a href=\"http:\/\/travispinnick.com\/projects\/apartmentfinder.html\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/travispinnick.com\/projects\/apartmentfinder.html<\/a>.<\/figcaption><\/figure>\n<p>Trazad su estructura con diagramas <em>wireframe<\/em> utilizando el kit de <em>wireframes<\/em> de <a href=\"https:\/\/www.sketch.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sketch<\/a> o de <a href=\"https:\/\/www.figma.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Figma<\/a>; luego nombrad los elementos de navegaci\u00f3n que utiliza.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>A la hora de estructurar la informaci\u00f3n de una interfaz, es importante que la arquitectura refleje los objetivos del producto y las necesidades del usuario. La estrategia nos indica cu\u00e1les son las necesidades del usuario y el \u00e1mbito (scope plane) indica qu\u00e9 informaci\u00f3n es m\u00e1s relevante para cubrir esas necesidades. Existen varios tipos de arquitecturas [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"http:\/\/quadern-interficies-test.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/107"}],"collection":[{"href":"http:\/\/quadern-interficies-test.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/quadern-interficies-test.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/quadern-interficies-test.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/quadern-interficies-test.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/comments?post=107"}],"version-history":[{"count":10,"href":"http:\/\/quadern-interficies-test.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/107\/revisions"}],"predecessor-version":[{"id":676,"href":"http:\/\/quadern-interficies-test.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/107\/revisions\/676"}],"wp:attachment":[{"href":"http:\/\/quadern-interficies-test.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}