{"id":14836,"date":"2020-12-09T10:45:14","date_gmt":"2020-12-09T08:45:14","guid":{"rendered":"http:\/\/design-toolkit.recursos.uoc.edu\/?p=14836"},"modified":"2021-02-17T16:26:42","modified_gmt":"2021-02-17T14:26:42","slug":"jerarquia","status":"publish","type":"post","link":"http:\/\/design-toolkit.recursos.uoc.edu\/es\/jerarquia\/","title":{"rendered":"Jerarqu\u00eda"},"content":{"rendered":"

\u00bfQu\u00e9 es?<\/strong><\/h2>\n

En dise\u00f1o de interfaces, la jerarqu\u00eda<\/strong> se refiere a la organizaci\u00f3n de los elementos de la interfaz de manera que la atenci\u00f3n del usuario se vea atra\u00edda hacia los m\u00e1s relevantes. Se refiere, pues, a ordenar los elementos de manera que se perciba claramente cu\u00e1les son los m\u00e1s importantes y qu\u00e9 relaciones existen entre ellos.<\/p>\n

La posibilidad de establecer jerarqu\u00edas es una consecuencia de la manera en que los humanos percibimos la informaci\u00f3n: cuando vemos una imagen, la observamos primero en su conjunto, no por bloques. Por lo tanto, somos capaces de ver qu\u00e9 elementos destacan en el conjunto y c\u00f3mo se relacionan.<\/p>\n

Implicaciones en el dise\u00f1o de interfaces<\/strong><\/h2>\n

\u00a0<\/strong>Factores implicados en la jerarqu\u00eda visual<\/strong><\/p>\n

    \n
  1. Tama\u00f1o<\/strong>. Cuanto m\u00e1s grande sea un elemento, m\u00e1s atrae la atenci\u00f3n. Por ejemplo, en los peri\u00f3dicos en l\u00ednea (como The Guardian<\/em><\/a>), los titulares de las noticias destacan claramente gracias a su gran tama\u00f1o en relaci\u00f3n con el resto de texto de la p\u00e1gina.<\/li>\n
  2. Color<\/strong>. Los colores luminosos son los que m\u00e1s atraen la atenci\u00f3n. Tambi\u00e9n los m\u00e1s saturados prevalecen sobre los que lo son menos. Los colores muy desaturados y el gris son los que se colocan en la zona m\u00e1s baja de la jerarqu\u00eda.<\/li>\n
  3. Contraste<\/strong>. Los colores que contrastan fuertemente atraen m\u00e1s la atenci\u00f3n.<\/li>\n
  4. Alineaci\u00f3n<\/strong>. Los elementos que se encuentran en la zona superior derecha en una p\u00e1gina atraen m\u00e1s la atenci\u00f3n.<\/li>\n
  5. Repetici\u00f3n<\/strong>. El usuario puede percibir que dos elementos est\u00e1n relacionados si su estilo es similar; por ejemplo, aquellos que tienen el mismo color.<\/li>\n
  6. Proximidad<\/strong>. La proximidad entre elementos refuerza la relaci\u00f3n entre ellos. Los elementos que se colocan pr\u00f3ximos en una interfaz (por ejemplo, t\u00edtulo y p\u00e1rrafo de una noticia) se perciben como conjunto. Tambi\u00e9n hay que tener en cuenta que apartar un elemento de un conjunto es un recurso para hacerlo destacar.<\/li>\n
  7. Espacio vac\u00edo<\/strong>. El espacio vac\u00edo alrededor de un elemento atrae la atenci\u00f3n sobre este. Por ejemplo, los botones call-to-action<\/em> se colocan habitualmente aislados del contexto, para hacerlos destacar.<\/li>\n
  8. Textura<\/strong>. Cuanta m\u00e1s textura tiene una imagen o elemento, m\u00e1s destaca. En dise\u00f1o de interfaces gr\u00e1ficas este aspecto tiene que tratarse con precauci\u00f3n, ya que colocar una imagen texturizada de fondo de un elemento puede producir demasiado ruido visual, e incluso impedir que los elementos que se encuentran encima de la imagen se vean correctamente.<\/li>\n<\/ol>\n
    \"\"

    En Material Design<\/em>, los elementos interactuables atraen la atenci\u00f3n del usuario mediante el uso de un azul luminoso, que destaca respecto a los tonos grises del resto de la pantalla.
    Fuente:     https:\/\/en.wikipedia.org\/wiki\/Material_Design#\/media\/File:Material_Design.svg<\/a>.<\/p><\/div>\n

    \"\"

    La opci\u00f3n para acceder al Campus de la UOC se encuentra en la zona superior derecha de la p\u00e1gina, de manera que el usuario puede encontrarla f\u00e1cilmente.<\/p><\/div>\n

    Pautas para optimizar la jerarqu\u00eda<\/strong><\/p>\n

    Adem\u00e1s de todos estos factores visuales, conocer la manera en que los usuarios escanean visualmente la p\u00e1gina tambi\u00e9n permite sacar el m\u00e1ximo rendimiento de los puntos de mayor atenci\u00f3n. En el contexto occidental podemos reconocer dos patrones:<\/p>\n

      \n
    1. Patr\u00f3n Z<\/strong>. En p\u00e1ginas web con un bajo nivel de contenidos, el usuario escanea la p\u00e1gina siguiendo un patr\u00f3n de lectura en forma de Z: empieza por la parte superior izquierda, sigue hasta la derecha, baja hasta la inferior izquierda y finaliza en la inferior derecha. Los elementos m\u00e1s importantes de una interfaz pueden colocarse a lo largo de este recorrido si queremos estar seguros de que el usuario los vea.<\/li>\n
    2. Patr\u00f3n F<\/strong>. En las p\u00e1ginas web que tienen mucho contenido o que incluyen v\u00eddeo, los usuarios acostumbran a escanear visualmente la p\u00e1gina siguiendo un patr\u00f3n en forma de F: empiezan por la zona superior derecha, van a la superior izquierda, y entonces bajan verticalmente por el margen izquierdo. Si el texto est\u00e1 estructurado, esto les permite localizar la informaci\u00f3n que est\u00e1n buscando; cuando la encuentran, recorren la pantalla de izquierda a derecha siguiendo la l\u00ednea. Despu\u00e9s contin\u00faan con el escaneo vertical hasta el final de la p\u00e1gina.<\/li>\n<\/ol>\n

      Referencias<\/strong><\/h2>\n

      Bank, C.<\/strong> \u00abUnderstanding Web UI Visual Hierarchy\u00bb [en l\u00ednea]. Awwwards. <https:\/\/www.awwwards.com\/understanding-web-ui-visual-hierarchy.html<\/a>>.[Fecha de consulta: 25 de enero de 2021].<\/p>\n

      Soegaard, M.<\/strong> \u00abVisual Hierarchy: Organizing content to follow natural eye movement patterns\u00bb [en l\u00ednea]. Interaction Design Foundation. <https:\/\/www.interaction-design.org\/literature\/article\/visual-hierarchy-organizing-content-to-follow-natural-eye-movement-patterns<\/a>>. [Fecha de consulta: 25 de enero de 2021].<\/p>\n","protected":false},"excerpt":{"rendered":"

      \u00bfQu\u00e9 es? En dise\u00f1o de interfaces, la jerarqu\u00eda se refiere a la organizaci\u00f3n de los elementos de la interfaz de manera que la atenci\u00f3n del usuario se vea atra\u00edda hacia los m\u00e1s relevantes. Se refiere, pues, a ordenar los elementos de manera que se perciba claramente cu\u00e1les son los m\u00e1s importantes y qu\u00e9 relaciones existen […]<\/p>\n","protected":false},"author":4,"featured_media":18171,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[30,27],"tags":[],"_links":{"self":[{"href":"http:\/\/design-toolkit.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/14836\/"}],"collection":[{"href":"http:\/\/design-toolkit.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/"}],"about":[{"href":"http:\/\/design-toolkit.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/types\/post\/"}],"author":[{"embeddable":true,"href":"http:\/\/design-toolkit.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/users\/4\/"}],"replies":[{"embeddable":true,"href":"http:\/\/design-toolkit.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/comments\/?post=14836"}],"version-history":[{"count":4,"href":"http:\/\/design-toolkit.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/14836\/revisions\/"}],"predecessor-version":[{"id":17514,"href":"http:\/\/design-toolkit.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/14836\/revisions\/17514\/"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/design-toolkit.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media\/18171\/"}],"wp:attachment":[{"href":"http:\/\/design-toolkit.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media\/?parent=14836"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/design-toolkit.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/categories\/?post=14836"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/design-toolkit.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/tags\/?post=14836"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}