{"id":103,"date":"2019-12-06T20:33:43","date_gmt":"2019-12-06T18:33:43","guid":{"rendered":"http:\/\/quadern-interficies-test.recursos.uoc.edu\/?page_id=103"},"modified":"2020-01-21T16:56:29","modified_gmt":"2020-01-21T14:56:29","slug":"2-3-los-elementos","status":"publish","type":"page","link":"http:\/\/quadern-interficies-test.recursos.uoc.edu\/es\/2-3-los-elementos\/","title":{"rendered":"2.3. Los elementos"},"content":{"rendered":"<p>Los <strong>elementos<\/strong> del dise\u00f1o de interfaces se pueden dividir en cinco capas dependientes; cada nivel se basa en el nivel anterior y progresan de un nivel m\u00e1s abstracto a uno m\u00e1s concreto (de abajo hacia arriba):<\/p>\n<figure id=\"attachment_223\" aria-describedby=\"caption-attachment-223\" style=\"width: 269px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" class=\"wp-image-223 size-medium\" src=\"\/wp-content\/uploads\/2019\/12\/m4357_05-269x300.jpg\" alt=\"\" width=\"269\" height=\"300\" srcset=\"\/wp-content\/uploads\/2019\/12\/m4357_05-269x300.jpg 269w, \/wp-content\/uploads\/2019\/12\/m4357_05.jpg 589w\" sizes=\"(max-width: 269px) 100vw, 269px\" \/><figcaption id=\"caption-attachment-223\" class=\"wp-caption-text\">Figura 5. Elementos de cada una de estas cinco capas<br \/>Fuente: Jesse James Garrett (2002). <em>The Elements of User Experience: User-Centered Design for the Web<\/em> (cap. 5). <a href=\"https:\/\/www.oreilly.com\/library\/view\/the-elements-of\/9780321688651\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.oreilly.com\/library\/view\/the-elements-of\/9780321688651\/<\/a>.<\/figcaption><\/figure>\n<p>Aunque en general los planos son dependientes de abajo arriba, esto no quiere decir que tengamos que decidir cada aspecto de las capas inferiores antes de ponernos a trabajar sobre los elementos de las capas superiores. Algunas dependencias son bidireccionales, de abajo arriba y de arriba abajo, y necesitan correcciones de forma iterativa.<\/p>\n<p>A continuaci\u00f3n, resumimos los elementos de cada una de estas cinco capas, de la m\u00e1s abstracta a la m\u00e1s concreta.<\/p>\n<div class=\"featured featured-blue\"><p>La\u00a0<a href=\"javascript:void(0);\" class=\"tooltip\" data-toggle=\"popover\" data-placement=\"bottom\" data-content=\"En ingl\u00e9s, <em>strategy plane<\/em>.\" data-placement=\"top\" data-html=\"true\" ><strong>estrategia<\/strong><\/a> responde al motivo del producto, la aplicaci\u00f3n o el sitio, por qu\u00e9 lo creamos, para qui\u00e9n lo hacemos, por qu\u00e9 las personas est\u00e1n dispuestas a usarlo, por qu\u00e9 lo necesitan. El objetivo aqu\u00ed es definir las necesidades del usuario y los objetivos comerciales.<\/p>\n<\/div>\n<p>Esto podr\u00eda hacerse a trav\u00e9s del proceso de investigaci\u00f3n estrat\u00e9gica, donde se entrevista a los usuarios y a todas las partes interesadas, adem\u00e1s de revisar los productos o las empresas de la competencia.<\/p>\n<div class=\"featured featured-blue\"><p>El\u00a0<a href=\"javascript:void(0);\" class=\"tooltip\" data-toggle=\"popover\" data-placement=\"bottom\" data-content=\"En ingl\u00e9s, <em>scope plane<\/em>.\" data-placement=\"top\" data-html=\"true\" ><strong>\u00e1mbito<\/strong><\/a> define los requisitos funcionales y de contenido. \u00bfCu\u00e1les son las caracter\u00edsticas y el contenido de la aplicaci\u00f3n o producto? Los requisitos deben cumplir y estar alineados con los objetivos estrat\u00e9gicos.<\/p>\n<\/div>\n<ul>\n<li><strong>Requisitos funcionales<\/strong> se refieren a las funciones o caracter\u00edsticas del producto, c\u00f3mo funcionan las caracter\u00edsticas entre s\u00ed y c\u00f3mo se interrelacionan entre s\u00ed. Estas caracter\u00edsticas son lo que el usuario necesita para alcanzar los objetivos.<\/li>\n<li><strong>Requisitos de contenido<\/strong> se refieren a la informaci\u00f3n que necesitamos para proporcionar el valor. Informaci\u00f3n como texto, im\u00e1genes, audio, v\u00eddeos, etc. Sin definir el contenido, no tenemos idea del tama\u00f1o o el tiempo requerido para completar el proyecto.<\/li>\n<\/ul>\n<p>Por ejemplo, la caracter\u00edstica es tener un reproductor multimedia para canciones, mientras que el contenido son los archivos de audio para estas canciones.<\/p>\n<div class=\"featured featured-blue\"><p>La\u00a0<a href=\"javascript:void(0);\" class=\"tooltip\" data-toggle=\"popover\" data-placement=\"bottom\" data-content=\"En ingl\u00e9s, <em>structure plane<\/em>.\" data-placement=\"top\" data-html=\"true\" ><strong>estructura<\/strong><\/a> define c\u00f3mo interact\u00faa el usuario con el producto, c\u00f3mo se comporta el sistema cuando interact\u00faa, c\u00f3mo est\u00e1 organizado, priorizado y cu\u00e1nto.<\/p>\n<\/div>\n<p>La estructura se divide en dos componentes, dise\u00f1o de interacci\u00f3n y arquitectura de la informaci\u00f3n.<\/p>\n<ul>\n<li>El <strong>dise\u00f1o de interacci\u00f3n<\/strong>, dados los requisitos funcionales, define c\u00f3mo el usuario puede interactuar con el producto y c\u00f3mo se comporta el sistema en respuesta a las interacciones del usuario.<\/li>\n<li>La <strong>arquitectura de la informaci\u00f3n<\/strong>, dados los requisitos de contenido, define la disposici\u00f3n de los elementos de contenido y su organizaci\u00f3n, para facilitar la comprensi\u00f3n humana. Existen dos acercamientos distintos para crear el esquema de categor\u00edas que estructurar\u00e1 la informaci\u00f3n que presentemos al usuario: de arriba abajo y de abajo arriba. La primera consiste en crear la arquitectura directamente desde la estrategia, teniendo en cuenta los objetivos del producto y las necesidades del usuario. La segunda, de abajo arriba, deriva del \u00e1mbito y se basa en el an\u00e1lisis de contenidos y los requerimientos funcionales de la interfaz. A menudo estos dos m\u00e9todos se combinan en diferentes niveles de la arquitectura; m\u00e1s adelante veremos algunos ejemplos.<\/li>\n<\/ul>\n<div class=\"featured featured-blue\"><p>El\u00a0<a href=\"javascript:void(0);\" class=\"tooltip\" data-toggle=\"popover\" data-placement=\"bottom\" data-content=\"En ingl\u00e9s, <em>skeleton plane<\/em>.\" data-placement=\"top\" data-html=\"true\" ><strong>esqueleto<\/strong><\/a> determina la forma visual en la pantalla, la presentaci\u00f3n y la disposici\u00f3n de todos los elementos que nos hacen interactuar con la funcionalidad del sistema que existe en la interfaz. Tambi\u00e9n c\u00f3mo se mueve el usuario a trav\u00e9s de la informaci\u00f3n y c\u00f3mo se presenta la informaci\u00f3n para que sea efectiva, clara y obvia.<\/p>\n<\/div>\n<p>Los <em>wireframes<\/em> se usan ampliamente para crear un formato visual, que es un diagrama est\u00e1tico que representa un formato visual del producto, que incluye contenido, navegaci\u00f3n y formas de interacci\u00f3n.<\/p>\n<p>El esqueleto se divide en tres componentes:<\/p>\n<ol>\n<li>El <strong>dise\u00f1o de interfaz<\/strong> presenta y organiza elementos de interfaz para permitir a los usuarios interactuar con la funcionalidad del sistema.<\/li>\n<li>La <strong>navegaci\u00f3n<\/strong> dise\u00f1a c\u00f3mo navegar a trav\u00e9s de la informaci\u00f3n utilizando la interfaz.<\/li>\n<li>El <strong>dise\u00f1o de informaci\u00f3n<\/strong> define la presentaci\u00f3n de informaci\u00f3n de una manera que facilita la comprensi\u00f3n.<\/li>\n<\/ol>\n<div class=\"featured featured-blue\"><p>La\u00a0<a href=\"javascript:void(0);\" class=\"tooltip\" data-toggle=\"popover\" data-placement=\"bottom\" data-content=\"En ingl\u00e9s, <em>surface plane<\/em>.\" data-placement=\"top\" data-html=\"true\" ><strong>superficie<\/strong><\/a> es la suma total de todo el trabajo y las decisiones que hemos tomado. Determina c\u00f3mo se ver\u00e1 el producto y elige el dise\u00f1o gr\u00e1fico, la tipograf\u00eda, los colores, etc.<\/p>\n<\/div>\n<p>En este nivel tratamos el dise\u00f1o visual (o sensorial); nos ocupamos de la apariencia visual del contenido, los controles, que dan una idea de lo que el usuario puede hacer y c\u00f3mo interactuar con ellos. Deber\u00eda facilitar la comprensi\u00f3n de las cosas, aumentar la capacidad cognitiva para absorber lo que los usuarios ven en la pantalla.<\/p>\n<div class=\"featured featured-grey\"><p><strong>Ejercicio<\/strong><\/p>\n<p>Reflexionad sobre cu\u00e1les son los elementos de la estrategia y el \u00e1mbito de la p\u00e1gina web de <a href=\"https:\/\/www.netflix.com\/es\/\" target=\"_blank\" rel=\"noopener noreferrer\">Netflix<\/a>. Para analizar la estrategia tratad de responder las siguientes preguntas:<\/p>\n<ol>\n<li>\u00bfPor qu\u00e9 nosotros y el resto del mundo podr\u00edamos necesitar este producto?<\/li>\n<li>\u00bfQu\u00e9 se quiere lograr con este producto?<\/li>\n<li>\u00bfQui\u00e9nes son los usuarios potenciales de este producto?<\/li>\n<li>\u00bfC\u00f3mo satisface las necesidades y deseos de los usuarios?<\/li>\n<\/ol>\n<p>Cuando analic\u00e9is el \u00e1mbito, tratad de trasladar los aspectos de la estrategia a un listado de requisitos. Para ello, considerad todos los casos de uso. Al final, dividid todos los requisitos en requisitos de funciones (caracter\u00edsticas) y requisitos de datos (contenido).<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Los elementos del dise\u00f1o de interfaces se pueden dividir en cinco capas dependientes; cada nivel se basa en el nivel anterior y progresan de un nivel m\u00e1s abstracto a uno m\u00e1s concreto (de abajo hacia arriba): Aunque en general los planos son dependientes de abajo arriba, esto no quiere decir que tengamos que decidir cada [&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\/103"}],"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=103"}],"version-history":[{"count":8,"href":"http:\/\/quadern-interficies-test.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/103\/revisions"}],"predecessor-version":[{"id":617,"href":"http:\/\/quadern-interficies-test.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/103\/revisions\/617"}],"wp:attachment":[{"href":"http:\/\/quadern-interficies-test.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}