{"id":232,"date":"2021-03-07T19:01:00","date_gmt":"2021-03-07T18:01:00","guid":{"rendered":"https:\/\/www.guille-rmo.com\/blog\/?p=232"},"modified":"2021-03-12T17:24:12","modified_gmt":"2021-03-12T16:24:12","slug":"introduccion-patrones-diseno","status":"publish","type":"post","link":"https:\/\/www.guille-rmo.com\/blog\/introduccion-patrones-diseno\/","title":{"rendered":"Introducci\u00f3n a los patrones de dise\u00f1o"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">No te lo han explicado nunca, pero seguro que sabes qu\u00e9 son esas tres rayitas horizontales que est\u00e1n en casi todas tus aplicaciones del m\u00f3vil. Tambi\u00e9n sabes en qu\u00e9 consiste el concepto de \u00abcarrito de compra\u00bb de una tienda online o que cuando te hablan de \u00abpasos\u00bb al registrarte en un sitio web, nadie quiere que te pongas a caminar.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">El porqu\u00e9 sabes esas cosas, y m\u00e1s, es debido a los <strong>patrones de dise\u00f1o<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Qu\u00e9 son<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Un <strong>patr\u00f3n de dise\u00f1o<\/strong> es una soluci\u00f3n ya definida, frecuente y de eficacia comprobada ante un problema com\u00fan.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">El objetivo principal de utilizar patrones de dise\u00f1o es <strong>aprovechar el aprendizaje del usuario<\/strong> en beneficio de la experiencia que encontrar\u00e1 a lo largo de nuestro producto, ya sea una web, una herramienta digital o una aplicaci\u00f3n m\u00f3vil.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Como dise\u00f1adores, a veces sentimos unas ganas tremendas de innovar y de crear soluciones y dise\u00f1os originales nunca vistos antes. Es esa cara, con sus luces y sombras, de la labor creativa que quiere convertirnos en artistas de la pista.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pero, \u00a1quiet@! Antes de nada, es muy recomendable <strong>investigar<\/strong> y, en la mayor\u00eda de casos, descubrir que lo que buscamos ya ha sido dise\u00f1ado, probado y certificado como una buena soluci\u00f3n para el problema al que nos enfrentamos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Para qu\u00e9 sirven<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Llegados a este punto, quiero diferenciar los patrones de dise\u00f1o separ\u00e1ndolos en dos bloques:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Patrones que dise\u00f1amos y construimos para nuestro producto en particular y que llamar\u00e9 en este art\u00edculo <strong>Patrones propios<\/strong>.<\/li><li>Patrones que, como dec\u00edamos antes, ya trae consigo el usuario cuando \u00abaterriza\u00bb en nuestra interfaz y que llamaremos <strong>Patrones comunes<\/strong>.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Patrones propios<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">En este primer bloque he agrupado los patrones que, dise\u00f1ados por nosotros, ayudar\u00e1n al usuario a entender y aprender c\u00f3mo es y c\u00f3mo funciona nuestro producto. Patrones que quiz\u00e1 no haya visto anteriormente en otras plataformas o aplicaciones, pero que encontrar\u00e1 a lo largo de nuestra interfaz, familiariz\u00e1ndose con ella a medida que la utilice.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Al ser elementos o pr\u00e1cticas <strong>reutilizables<\/strong>, el uso de estos patrones de dise\u00f1o permite lograr una <strong>mayor consistencia<\/strong> a lo largo de la experiencia de uso de nuestro producto, <strong>incrementa la capacidad para escalarlo<\/strong> y nos convierte en maestros jedi de la <strong>eficacia<\/strong> a la hora de dise\u00f1arlo y construirlo. \u00a1Ahorraremos tiempo y esfuerzo!<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/media.giphy.com\/media\/l0IpYf36OQy9O7ENW\/giphy.gif\" alt=\"\"\/><figcaption>Dise\u00f1adores y desarrolladores utilizando patrones de dise\u00f1o.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Resulta complicado poner ejemplos sobre este \u00abtipo\u00bb de patrones ya que surgen como una necesidad espec\u00edfica para un producto digital que tiene unos requerimientos particulares. Pero, en base a mi experiencia, intentar\u00e9 describir algunos casos en donde es posible aplicar el concepto de \u00ab<strong>patr\u00f3n reutilizable<\/strong>\u00bb y as\u00ed entender mejor esta agrupaci\u00f3n:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Podemos definir que los elementos interactivos de nuestra aplicaci\u00f3n (botones, enlaces e iconos interactivos, por ejemplo) tengan un mismo color. De esta manera llegar\u00edamos a un momento en el que nuestro usuario sabr\u00eda, antes incluso de realizar una acci\u00f3n, con qu\u00e9 elementos puede interactuar.<\/li><li>Los procesos implicados en nuestro producto (de compra, de transferencia de dinero, de creaci\u00f3n de una cuenta de usuario, etc) podr\u00edan tener una estructura, y una manera visual de representarla, similar entre s\u00ed.<\/li><li>Los avisos del sistema que estemos dise\u00f1ando aparecen y desaparecen de la interfaz con la misma l\u00f3gica y bajo unas mismas reglas.<\/li><li>Que todos los estados vac\u00edos de una p\u00e1gina o secci\u00f3n tengan una misma estructura de elementos y componentes.<\/li><li>Definir que la informaci\u00f3n de un elemento de una lista se le muestre al usuario de una manera que repliquemos en todas las listas de nuestro producto. Por ejemplo, en una plataforma web de un banco, podr\u00edamos unificar c\u00f3mo mostrar la informaci\u00f3n de una cuenta, de una tarjeta de cr\u00e9dito y de un pr\u00e9stamo bajo la premisa de que todos ellos encajan dentro de la misma categor\u00eda de \u00abproductos bancarios\u00bb.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">En conclusi\u00f3n, y como dec\u00edamos antes, la idea es <strong>aplicar la misma soluci\u00f3n a una serie de circunstancias que tienen caracter\u00edsticas comunes<\/strong> para que el usuario aprenda f\u00e1cilmente a utilizar intuitivamente nuestra interfaz.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Patrones comunes<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">El segundo grupo lo forman los patrones que el usuario ya conoce porque se ha cruzado con ellos repetidamente en otras p\u00e1ginas web, plataformas o apps y que podemos (y debemos) aprovechar para fortalecer la experiencia que estemos creando.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Gracias a ellos conseguiremos <strong>reducir la carga cognitiva del usuario<\/strong> al utilizar nuestra interfaz, ya que el esfuerzo de aprender c\u00f3mo funciona ser\u00e1 mucho menor, generando la sensaci\u00f3n de que nuestro producto es familiar, conocido y en consecuencia, m\u00e1s intuitivo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Creo que viene bien colocar por aqu\u00ed una cita de Jacob Nielsen: <strong>\u00ab<em>Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.<\/em>\u00ab<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">He encontrado algunas formas de catalogar estos patrones, aunque parece que no hay un criterio establecido que los englobe y agrupe. Un ejemplo, sin entrar en detalle, podr\u00eda ser:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Navegaci\u00f3n:<\/strong> rastros de migas, men\u00fas verticales y horizontales, men\u00fas expandibles, cabecera, pie de p\u00e1gina, acordeones, tarjetas de contenido, paginaci\u00f3n, etc.<\/li><li><strong>Obtenci\u00f3n de datos:<\/strong> formularios, calendarios, <em>drag and drop<\/em>, <em>captchas<\/em>, procesos con pasos, valoraciones, etc.<\/li><li><strong>B\u00fasqueda:<\/strong> caja de b\u00fasqueda, resultados, filtros, mapas de sitio, etiquetas, categor\u00edas, etc.<\/li><li><strong>Contenido:<\/strong> tablas, carruseles, preguntas frecuentes, filtros de contenido, ordenaci\u00f3n, etc.<\/li><li><strong>Social:<\/strong> lista de amigos, compartir contenido o perfiles, reacciones, invitaciones, seguimiento de perfiles, muro, etc.<\/li><li><strong>Otros:<\/strong> procesos de acceso, procesos de registro, procesos de pago, suscripciones, p\u00e1ginas de producto, carrito de compra, lista de deseados, etc.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">En s\u00edntesis, estos patrones son elementos y maneras de realizar tareas frecuentes que se han ido propagando por numerosos productos digitales hasta que son conocidos por el grueso de los usuarios, independientemente del producto que utilicen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusi\u00f3n<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Resulta muy conveniente <strong>aprovechar lo que el usuario ya tiene aprendido<\/strong> para que nuestros dise\u00f1os le aporten sensaciones conocidas (es decir, intuici\u00f3n) y <strong>facilitar el uso de las interfaces<\/strong> que estemos creando.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por otro lado, aplicar esa idea de <strong>repetici\u00f3n\/reutilizaci\u00f3n<\/strong> en nuestros propios productos y bajo nuestras reglas espec\u00edficas fomentar\u00e1 que el <strong>aprendizaje<\/strong> de los mismos sea <strong>m\u00e1s r\u00e1pido<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Un poquito de bibliograf\u00eda digital<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Para quien guste de profundizar m\u00e1s por su cuenta y beneficio.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a rel=\"noreferrer noopener\" href=\"http:\/\/ui-patterns.com\/patterns\" target=\"_blank\">http:\/\/ui-patterns.com\/patterns<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.nngroup.com\/topic\/design-patterns\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.nngroup.com\/topic\/design-patterns\/<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/uigarage.net\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/uigarage.net\/<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"http:\/\/www.welie.com\/patterns\/\" target=\"_blank\" rel=\"noreferrer noopener\">http:\/\/www.welie.com\/patterns\/<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"http:\/\/ww1.patternbrowser.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">http:\/\/ww1.patternbrowser.org\/<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.smileycat.com\/category\/elements-of-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.smileycat.com\/category\/elements-of-design\/<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/mobbin.design\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/mobbin.design\/<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/pttrns.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/pttrns.com\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>No te lo han explicado nunca, pero seguro que sabes qu\u00e9 son esas tres rayitas horizontales que est\u00e1n en casi todas tus aplicaciones del m\u00f3vil. Tambi\u00e9n sabes en qu\u00e9 consiste el concepto de \u00abcarrito de compra\u00bb de una tienda online o que cuando te hablan de \u00abpasos\u00bb al registrarte en un sitio web, nadie quiere que te pongas a caminar.<\/p>\n","protected":false},"author":1,"featured_media":238,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-232","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-patrones-diseno"],"_links":{"self":[{"href":"https:\/\/www.guille-rmo.com\/blog\/wp-json\/wp\/v2\/posts\/232","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.guille-rmo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.guille-rmo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.guille-rmo.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.guille-rmo.com\/blog\/wp-json\/wp\/v2\/comments?post=232"}],"version-history":[{"count":118,"href":"https:\/\/www.guille-rmo.com\/blog\/wp-json\/wp\/v2\/posts\/232\/revisions"}],"predecessor-version":[{"id":404,"href":"https:\/\/www.guille-rmo.com\/blog\/wp-json\/wp\/v2\/posts\/232\/revisions\/404"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.guille-rmo.com\/blog\/wp-json\/wp\/v2\/media\/238"}],"wp:attachment":[{"href":"https:\/\/www.guille-rmo.com\/blog\/wp-json\/wp\/v2\/media?parent=232"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.guille-rmo.com\/blog\/wp-json\/wp\/v2\/categories?post=232"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.guille-rmo.com\/blog\/wp-json\/wp\/v2\/tags?post=232"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}