{"id":14868,"date":"2020-12-09T12:44:55","date_gmt":"2020-12-09T10:44:55","guid":{"rendered":"http:\/\/design-toolkit.recursos.uoc.edu\/?p=14868"},"modified":"2021-02-17T16:26:31","modified_gmt":"2021-02-17T14:26:31","slug":"coherencia","status":"publish","type":"post","link":"http:\/\/design-toolkit-test.uoc.edu\/es\/coherencia\/","title":{"rendered":"Coherencia"},"content":{"rendered":"<h2><strong>\u00bfQu\u00e9 es?<\/strong><\/h2>\n<p>El <strong>principio de coherencia<\/strong> determina que los sistemas son m\u00e1s usables cuando las funciones similares se representan de manera similar.<\/p>\n<p>La coherencia permite a los usuarios aplicar lo aprendido a nuevos contextos, de manera que agiliza el aprendizaje de una interfaz y permite que la atenci\u00f3n se centre en los aspectos relevantes de la tarea.<\/p>\n<h2><strong>Implicaciones en el dise\u00f1o de interfaces<\/strong><\/h2>\n<p>La coherencia en el dise\u00f1o de interfaces favorece dos cuestiones:<\/p>\n<ul>\n<li>Permite que los usuarios aprendan a utilizar una interfaz en menos tiempo, porque incluye elementos reconocibles para el usuario, o porque los nuevos elementos mantienen su significado o funci\u00f3n una vez presentados.<\/li>\n<li>Evita confusiones.<\/li>\n<\/ul>\n<p>En el entorno de dise\u00f1o existen cuatro tipos de coherencia:<\/p>\n<h3>1.<strong> Est\u00e9tica<\/strong><\/h3>\n<p>Se refiere a la coherencia en estilo y apariencia. Permite que un producto se identifique con una marca determinada, y que comunique los valores de esta.<\/p>\n<p>La mejor herramienta para conseguir coherencia est\u00e9tica consiste en utilizar una gu\u00eda de estilo de manera que los elementos visuales correspondan a unas pautas b\u00e1sicas.<\/p>\n<div id=\"attachment_61\" style=\"width: 674px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-61\" loading=\"lazy\" class=\" wp-image-61 my-image\" src=\"\/wp-content\/uploads\/2020\/12\/20110_62.jpg&quot;\" alt=\"\" width=\"664\" height=\"509\" \/><p id=\"caption-attachment-61\" class=\"wp-caption-text\">Gu\u00eda de estilo gr\u00e1fica<br \/>Fuente: <a href=\"https:\/\/www.flickr.com\/photos\/vfsdigitaldesign\/\" target=\"_blank\" rel=\"noopener noreferrer\">VFS Digital Design<\/a>. <a href=\"https:\/\/www.flickr.com\/photos\/vfsdigitaldesign\/5647372040\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.flickr.com\/photos\/vfsdigitaldesign\/5647372040<\/a>.<\/p><\/div>\n<h3>2.<strong> Funcional<\/strong><\/h3>\n<p>Se refiere a la coherencia entre forma y funci\u00f3n: a misma funci\u00f3n, misma forma. Si a lo largo de una interfaz el usuario encuentra diversas veces el mismo icono, por ejemplo, le ser\u00e1 f\u00e1cil reconocer su funci\u00f3n si esta se mantiene de manera coherente.<\/p>\n<p>Los <strong><em>UI design patterns<\/em><\/strong> (modelos de dise\u00f1o de interfaz) son un buen recurso para definir elementos que mantengan la coherencia funcional a lo largo del flujo de interacci\u00f3n.<\/p>\n<p>En internet existen numerosas bibliotecas de <em>design patterns<\/em>. La Interaction Design Foundation ofrece una buena selecci\u00f3n en su art\u00edculo \u00ab<a href=\"https:\/\/www.interaction-design.org\/literature\/article\/10-great-sites-for-ui-design-patterns\" target=\"_blank\" rel=\"noopener noreferrer\">10 Great Sites for UI Design Patterns<\/a>\u00bb.<\/p>\n<div id=\"attachment_62\" style=\"width: 310px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-62\" loading=\"lazy\" class=\"size-full wp-image-62 my-image\" src=\"\/wp-content\/uploads\/2020\/12\/20110_63.jpg&quot;\" alt=\"\" width=\"300\" height=\"533\" \/><p id=\"caption-attachment-62\" class=\"wp-caption-text\"><em>Design patterns<\/em> de Material Design (Android)<br \/>Fuente: <a href=\"https:\/\/commons.wikimedia.org\/wiki\/File:Material_Design.svg\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/commons.wikimedia.org\/wiki\/File:Material_Design.svg<\/a>.<\/p><\/div>\n<h3>3. <strong>Interna<\/strong><\/h3>\n<p>Se refiere a la coherencia a lo largo de las p\u00e1ginas o pantallas de una interfaz, o a la coherencia de una interfaz respecto a otros productos de su mismo grupo. Por ejemplo, las diferentes herramientas de Microsoft Office son coherentes entre ellas, de manera que el usuario puede aprender r\u00e1pidamente c\u00f3mo utilizarlas si tiene experiencia con alguna de ellas.<\/p>\n<p>Los sistemas de dise\u00f1o (<em>design systems<\/em>) tienen como finalidad establecer las gu\u00edas de dise\u00f1o (tanto est\u00e9tico como funcional) para sistemas de aplicaciones. Algunos excelentes ejemplos de sistemas de dise\u00f1o son:<\/p>\n<ul>\n<li><a href=\"https:\/\/material.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Material Design<\/a><\/li>\n<li><a href=\"https:\/\/developer.apple.com\/design\/\" target=\"_blank\" rel=\"noopener noreferrer\">Apple Human Interface Guidelines<\/a><\/li>\n<li><a href=\"https:\/\/www.gov.uk\/guidance\/government-design-principles\" target=\"_blank\" rel=\"noopener noreferrer\">Gov.uk<\/a><\/li>\n<li><a href=\"http:\/\/www.bbc.co.uk\/gel\/\" target=\"_blank\" rel=\"noopener noreferrer\">BBC Global Experience Language<\/a><\/li>\n<\/ul>\n<h3>4.<strong> Externa<\/strong><\/h3>\n<p>Se refiere a la coherencia de un dise\u00f1o respecto a est\u00e1ndares ya definidos. Por ejemplo, la utilizaci\u00f3n de un icono \u00abx\u00bb para cerrar una aplicaci\u00f3n es un est\u00e1ndar que aparece en m\u00faltiples productos, independientes entre s\u00ed.<\/p>\n<h2><strong>Referencias<\/strong><\/h2>\n<p><strong>Lidwell, W.; Holden, K.; Butler, J.<\/strong> (2010). <em>Universal Principles of Design<\/em>. Rockport.<\/p>\n<p><strong>Nikolov, A.<\/strong> (2017). \u00abDesign principle: Consistency\u00bb [en l\u00ednea]. UX Collective. &lt;<a href=\"https:\/\/uxdesign.cc\/design-principle-consistency-6b0cf7e7339f\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/uxdesign.cc\/design-principle-consistency-6b0cf7e7339f<\/a>&gt;. [Fecha de consulta: 25 de enero de 2021].<\/p>\n<p><strong>Wong, E.<\/strong> \u00abPrinciple of Consistency and Standards in User Interface Design\u00bb [en l\u00ednea]. Interaction Design Foundation. &lt;<a href=\"https:\/\/www.interaction-design.org\/literature\/article\/principle-of-consistency-and-standards-in-user-interface-design\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.interaction-design.org\/literature\/article\/principle-of-consistency-and-standards-in-user-interface-design<\/a>&gt;. [Fecha de consulta: 25 de enero de 2021].<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00bfQu\u00e9 es? El principio de coherencia determina que los sistemas son m\u00e1s usables cuando las funciones similares se representan de manera similar. La coherencia permite a los usuarios aplicar lo aprendido a nuevos contextos, de manera que agiliza el aprendizaje de una interfaz y permite que la atenci\u00f3n se centre en los aspectos relevantes de [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":18323,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[29,27],"tags":[],"_links":{"self":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/14868\/"}],"collection":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/"}],"about":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/types\/post\/"}],"author":[{"embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/users\/4\/"}],"replies":[{"embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/comments\/?post=14868"}],"version-history":[{"count":6,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/14868\/revisions\/"}],"predecessor-version":[{"id":17983,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/14868\/revisions\/17983\/"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/media\/18323\/"}],"wp:attachment":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/media\/?parent=14868"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/categories\/?post=14868"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/tags\/?post=14868"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}