# data[].attributes.body
La clasificación de patrones de diseño se enfoca en la integración de los criterios de diseño presentados; principios de usabilidad, Interacción Hu - mano-Computadora (IHC), diseño centrado en el usuario; y aspectos de comunicación e interacción social.

# data[].attributes.body
Título o nombre del patrón : Debería ser claro, conciso, significativo y sugestivo respecto al problema abordado.

Problema : Descripción del problema de interacción abordado.

Principio/s de usabilidad : Determina sobre qué principios o criterios de usabilidad se sustenta el patrón.

Contexto : Descripción del contexto o situación de interacción para la que puede ser aplicado el patrón.

Representación visual : Se trata de un elemento opcional, en el que se representa visualmente la esencia o resumen del patrón (diagramas, esquemas, fotografía,…).

Solución : Este es el elemento principal de un patrón, donde se describe de forma clara y precisa qué decisión de diseño será la más adecuada para solucionar el problema de interacción.

Consecuencias : Impacto de la decisión de diseño sobre otros elementos y atributos del producto.

Beneficios : Se argumentan las ventajas y beneficios en términos de usabilidad que implica la aplicación del patrón.

Ejemplo : Se muestra un ejemplo de aplicación con éxito del patrón, normalmente de forma gráfica.

Patrones relacionados : Relación del patrón con otros patrones similares, como aquellos destinados a solucionar el mismo problema en contextos diferentes.

Bibliografía : Fuentes de información sobre los que se fundamenta el patrón o a través de las cuales poder ampliar información.

Comentarios : Aquellos patrones publicados en medios de comunicación interactiva (como la web) pueden admitir que por ejemplo otros desarrolladores comenten y aporten información, enriqueciendo el patrón.

# data[].attributes.body
Nacen en el campo de la arquitectura de mano de Christoper Alexander como una forma de ofrecer una solución  común a un problema de diseño.

# data[].attributes.body
Autor : Persona que propone el patrón.

Palabras clave : Describen los conceptos principales tratados en el patrón.

Copyright : Mención de reserva de derechos de autor.

# data[].attributes.body
Ward Cunningham y Kent Beck trasladaron de la Arquitectura al campo de la interacción hombre-ordenador (HCI)

# data[].attributes.body
Agilizar el desarrollo, ofrecen soluciones efectivas a problemas comunes evitando la necesidad de evaluar y revaluar cada aspecto de un proyecto.

# data[].attributes.body
- Ahorran tiempo
- Ayudan a estar seguro de la validez de tu código.
- Establecen un lenguaje común

# data[].attributes.headline
...en el campo de la ingeniería del software.

# data[].attributes.subject
...en el campo de la ingeniería del software.

# data[].attributes.body
...se hicieron populares a principios de los 90 a partir de la publicación del libro Design Patterns escrito por el GoF (Gang of Four): Erich Gamma, Richard Helm, Ralph Johnson y John Vlisides, en el que se recogían 23 microarquitecturas orientadas a objetos  como patrones diseño comunes.

# data[].attributes.body
...Facilitan la tarea de creación de nuevos objetos encapsulando el proceso.

Abstract Factory: Nos provee una interfaz que delega la creación de un conjunto de objetos relacionados sin necesidad de especificar en ningún momento cuáles son las implementaciones concretas.

Factory Method: Expone un método de creación,  delegando en las subclases la implementación de este método.

Builder: Separa la creación de un objeto complejo de su estructura, de tal forma que el mismo proceso de construcción nos puede servir para crear representaciones diferentes.

Singleton: limita a uno el número de instancias posibles de una clase en nuestro programa, y proporciona un acceso global al mismo.

Prototype: Permite la creación de objetos basados en «plantillas». Un nuevo objeto se crea a partir de la clonación de otro objeto

# data[].attributes.body
...especifican la forma en que unas clases se relacionan con otras.

Adapter: Permite a dos clases con diferentes interfaces trabajar entre ellas, a través de un objeto intermedio con el que se comunican e interactúan.

Bridge: Desacopla una abstracción de su implementación, para que las dos puedan evolucionar de forma independiente.

Composite: Facilita la creación de estructuras de objetos en árbol, donde todos los elementos emplean una misma interfaz. Cada uno de ellos puede a su vez contener un listado de esos objetos, o ser el último de esa rama.

Decorator: Permite añadir funcionalidad extra a un objeto (de forma dinámica o estática) sin modificar el comportamiento del resto de objetos del mismo tipo.

Facade: Una facade (o fachada) es un objeto que crea una interfaz simplificada para tratar con otra parte del código más compleja, de tal forma que simplifica y aísla su uso. Un ejemplo podría ser crear una fachada para tratar con una clase de una librería externa.

Flyweight: Una gran cantidad de objetos comparte un mismo objeto con propiedades comunes con el fin de ahorrar memoria.

Proxy: Es una clase que funciona como interfaz hacia cualquier otra cosa: una conexión a Internet, un archivo en disco o cualquier otro recurso que sea costoso o imposible de duplicar.

# data[].attributes.body
...gestionan algoritmos, relaciones y responsabilidades entre objetos.

Command: Son objetos que encapsulan una acción y los parámetros que necesitan para ejecutarse.

Chain of responsibility: se evita acoplar al emisor y receptor de una petición dando la posibilidad a varios receptores de consumirlo. Cada receptor tiene la opción de consumir esa petición o pasárselo al siguiente dentro de la cadena.

Interpreter: Define una representación para una gramática así como el mecanismo para evaluarla. El árbol de sintaxis del lenguaje se suele modelar mediante el patrón Composite.

Iterator: Se utiliza para poder movernos por los elementos de un conjunto de forma secuencial sin necesidad de exponer su implementación específica.

Mediator: Objeto que encapsula cómo otro conjunto de objetos interactúan y se comunican entre sí.

Memento: Este patrón otorga la capacidad de restaurar un objeto a un estado anterior

Observer: Los objetos son capaces de suscribirse a una serie de eventos que otro objetivo va a emitir, y serán avisados cuando esto ocurra.

State: Permite modificar la forma en que un objeto se comporta en tiempo de ejecución, basándose en su estado interno.

Strategy: Permite la selección del algoritmo que ejecuta cierta acción en tiempo de ejecución.

Template Method: Especifica el esqueleto de un algoritmo, permitiendo a las subclases definir cómo implementan el comportamiento real.

Visitor: Permite separar el algoritmo de la estructura de datos que se utilizará para ejecutarlo. De esta forma se pueden añadir nuevas operaciones a estas estructuras sin necesidad de modificarlas.

# data[].attributes.body
https://ccc.inaoep.mx/~grodrig/Descargas/InteraPatternToCIC.pdf

http://www.uxlumen.com/patrones-de-diseno-de-interaccion/

http://www.staffcreativa.pe/blog/disenar-interfaz-usuario/

https://sistemas.tecnoderecho.com/consejos-diseno-piensa-usuario/

https://devexperto.com/patrones-de-diseno-software/

# data[].attributes.body
https://devexperto.com/patrones-de-diseno-software/

https://ccc.inaoep.mx/~grodrig/Descargas/InteraPatternToCIC.pdf

http://www.uxlumen.com/patrones-de-diseno-de-interaccion/

http://www.staffcreativa.pe/blog/disenar-interfaz-usuario/

https://sistemas.tecnoderecho.com/consejos-diseno-piensa-usuario/

http://www.smashingmagazine.com/2009/06/15/40-helpful-resources-on-user-interface-design-patterns/

http://sourcemaking.com/design_patterns

http://en.wikipedia.org/wiki/Design_patte

http://en.wikipedia.org/wiki/Interaction_design_pattern

# data[].attributes.body
Problema

Los usuarios deben ser dirigidos a la sección correcta del sitio web

Solución

Enumere las categorías principales con los elementos en el centro de la página de inicio

Usar cuando

Está diseñando la página de inicio de un sitio web rico en información. Por lo general, un sitio corporativo o una búsqueda de información .

Cómo

Divide el sitio en muy pocas secciones principales. Se prefieren tres o cuatro secciones principales para lograr un efecto limpio. Se colocan las etiquetas de cada sección principal sobre una lista de subelementos de esa sección. Los subelementos tampoco deben ser demasiado numerosos, normalmente de 4 a 8 elementos.

Por qué

Brinda a los usuarios una descripción general rápida e informativa de las elecciones principales que deben tomar. No se oculta nada importante y se puede acceder a todas las opciones en el menú con un solo clic.

# data[].attributes.body
Problema

Los usuarios necesitan acceder a la navegación pero pueden necesitar más espacio en la pantalla.

Solución

Cree un menú que pueda dejarse de lado y recuperarse fácilmente nuevamente.

Usar cuando

Cuando el espacio de la pantalla es escaso y la navegación principal ocupa relativamente demasiado espacio. Alternativamente, considere un menú Trail horizontal en combinación con el menú desplegable .

Cómo

Implementado usando html dinámico, también requerirá alguna forma de diseño líquido.

Por qué

Este patrón principalmente ahorra una gran cantidad de espacio en la pantalla mientras el menú aún está disponible. A diferencia de un menú desplegable o un menú superpuesto, un menú retráctil permanece en la página cuando se activa.

# data[].attributes.body
Problema

Los usuarios necesitan encontrar un artículo específico en una gran colección de artículos.

Solución

Ofrezca una función de búsqueda avanzada especial con opciones de comparación, alcance y salida de términos extendidos.

Usar cuando

Los sitios con gran cantidad de información, como un sitio de comercio electrónico , un sitio multinacional o un sitio de portal, contienen tanta información que los usuarios no siempre tienen el éxito suficiente con un cuadro de búsqueda normal . Estos patrones se basan en el patrón del cuadro de búsqueda agregando algunos añadiendo más opciones de búsqueda. La búsqueda avanzada está destinada a usuarios intermedios y expertos que necesitan control total sobre el motor de búsqueda para que puedan tener más éxito en el logro de sus objetivos. Dichos usuarios suelen tener un conocimiento más que superficial sobre los elementos que están buscando. Es posible que conozcan el tipo de elementos y estén configurados para buscar un elemento específico que sepan o no sepan que existe.

Cómo

La búsqueda avanzada generalmente coexiste con el cuadro de búsqueda normal o como parte de un área de búsqueda . La función de búsqueda se extiende en tres áreas:

1. Más control sobre la coincidencia de términos.
Este tipo de funcionalidad controla cómo el motor de búsqueda interpreta la lista combinada de términos de búsqueda. Por lo general, esto incluye la funcionalidad AND / OR junto con la funcionalidad de exclusión. Cuando el motor de búsqueda admite la funcionalidad AND / OR, use "coincidir todos los términos" y "coincidir con cualquier término" en lugar de los operadores AND y OR en el campo de texto. La gente a menudo comete errores usando la lógica booleana, por lo que es mejor evitarla. Además, AND / OR en la lista de palabras clave podría ser compatible con usuarios expertos, pero luego Consejos de búsqueda adicionalesson necesarios para informar a los usuarios sobre las posibilidades.

2. Alcance.
El alcance se refiere a qué elementos se pueden encontrar y cuáles no. El alcance limita los posibles resultados de búsqueda al definir las condiciones que debe cumplir un resultado. Por ejemplo, resulta de un subsitio particular, tipos de elementos (artículos, video, audio ...) o propiedades de elementos (título, fecha, ubicación, tamaño, autor ...). El alcance es lo que hace que los usuarios sean realmente poderosos porque les permite buscar elementos específicos para el sitio.

3. Más control de salida. Esto permite a los usuarios controlar la forma en que se presentan los resultados de la búsqueda . Se pueden controlar aspectos como la clasificación o los tamaños de paginación.

Por qué

Las funciones avanzadas dan a los usuarios el control de muchos aspectos de la búsqueda. Esto requiere un conocimiento adicional de los datos disponibles y, por lo tanto, es solo para usuarios experimentados. Muchos usuarios tienen problemas para usar los operadores AND y OR, por lo que es más fácil ofrecer el tipo de coincidencia como una opción (todos los términos, cualquier término, etc.).

# data[].attributes.body
Problema
Los usuarios quieren comprar un producto.

Solución
Introduzca un carrito de compras donde los usuarios puedan colocar sus productos antes de que realmente los compren.

Usar cuando
Un sitio donde los usuarios pueden navegar por los productos y comprarlos. Los usuarios no son compradores muy frecuentes y posiblemente novatos. Para los clientes que regresan, considere un sistema de COMPRAS DE UN CLIC. Los usuarios pueden comprar más de un producto. Los usuarios pueden querer seleccionar productos ahora pero pagar después. Los usuarios pueden decidir comprar en otro lugar en cualquier momento

Cómo
Cuando los usuarios ven una descripción del producto, pueden elegir agregarlo a su carrito de compras. Después de agregar un artículo a su carrito, se muestra a los usuarios el contenido actual del carrito. Los usuarios pueden inspeccionar el contenido de su carrito en cualquier momento utilizando un enlace que está disponible en cada página. Un mini carrito persistente también se puede mostrar directamente en las páginas de contenido. Básicamente, el carrito es un colector que se utiliza para recolectar productos.

La descripción del contenido del carrito generalmente incluye el nombre de los artículos, la cantidad, la disponibilidad y los precios. Los usuarios pueden eliminar artículos de su carrito si lo desean y cambiar las cantidades. La descripción de los productos es un enlace a los detalles del producto. Los usuarios siempre ven los costos totales de una compra, por lo que incluyen los costos de envío, si corresponde. Los usuarios también deben ser informados de las opciones de pago, como qué tarjetas de crédito se aceptan. Desde la página del carrito, los usuarios pueden continuar comprando o continuar con el procedimiento de pago. Los artículos permanecen en el carrito por un cierto período de tiempo, por ejemplo, 90 días.

Por qué
El carrito de compras es una metáfora muy conocida e internacional. Este patrón permite a los usuarios reunir todos los productos primero y pagarlos todos a la vez y cuando lo deseen. Al mostrar los costos totales, incluido el envío, los usuarios saben exactamente lo que tendrán que pagar cuando decidan comprar. El procedimiento de pago con un asistente ayuda a los usuarios a realizar la compra real con toda la asistencia posible.

# data[].attributes.body
Problema
Los usuarios deben pasar de un sitio global a un sitio web específico de un país

Solución
Coloque un selector de idioma y región en la página de inicio.

Usar cuando
No debe confundirse con el Selector de idiomas.

Cómo
Use un menú desplegable si no hay tanto espacio para el selector de idioma. De lo contrario, enumérelos para que los usuarios puedan seleccionar el país apropiado directamente. Liste los países alfabéticamente.

Por qué
A veces, el sitio internacional funciona como un proxy de los sitios del país. Si ese es el único propósito, una lista de enlaces es la solución más clara que proporciona acceso con un clic. Si el sitio internacional contiene otra información, como información corporativa, el selector de idioma puede convertirse en un cuadro desplegable que es uno de los elementos de la página.

# data[].attributes.body
Problema
Los usuarios han ingresado entradas que no se pudieron validar y se les debe solicitar que corrijan la entrada.

Solución
Informe a los usuarios que hay un problema y cómo resolverlo. También diga a los usuarios dónde ocurrió el problema.

Usar cuando
Los usuarios intentan completar el formulario y uno o más de los campos son sintácticamente inválidos o faltan. Por lo general, hay dos tipos de problemas: a) el campo no se ha completado en absoluto, o b) el campo contiene datos en el formato incorrecto.

Cómo
El mensaje de error que se entrega debe informar a los usuarios:
Que ha ocurrido un error . Esto se hace mejor mostrando un cuadro de color en la parte superior de la página que contiene un "aviso importante". El aviso debe indicar cuál es el problema y que los usuarios pueden reparar el problema yendo al campo "problema" y cambiando la entrada.
Donde ocurrió el error . Esto también se realiza indicando los campos del problema en el cuadro en la parte superior de la página en combinación con una marca en el campo del problema en sí. Por ejemplo, el widget de formulario se puede colorear como se hace en el ejemplo anterior.
Cómo se puede reparar el error . Esto se hace dando información de reparación al lado del campo del problema. Esta información debe marcarse visualmente para destacarse como "información de ayuda". Por lo general, dicha información de ayuda informa a los usuarios sobre la sintaxis correcta del campo de entrada.
Aunque dar buenos mensajes de error es importante, siempre se debe evaluar si se puede prevenir el problema. Por ejemplo, el uso de la entrada de restricción a veces puede ser posible para evitar una entrada incorrecta.

Por qué
Obviamente, los usuarios deben ser conscientes del hecho de que hay un problema. Hacer esto en la parte superior de la página en un cuadro visual distintivo asegura que los usuarios lo verán. Además, los usuarios deben recibir información útil que los pondrá en camino nuevamente. Para lograrlo, es importante brindar información de ayuda cerca del campo del problema en sí, de modo que el "problema" y la "solución" estén cerca uno del otro.

# data[].attributes.body
Problema
Los usuarios quieren divertirse o entretenerse

Solución
Agregue elementos desafiantes y sorprendentes a su sitio, con el apoyo de detalles visuales adicionales que agreguen diversión, para crear una experiencia altamente interactiva y visual.

Usar cuando
El sitio no debe tener un carácter muy "serio" o altamente informativo. El hecho de que el sitio sea divertido de visitar y su contenido esté en línea con eso se refleja en el diseño del sitio. Brindar una experiencia divertida es más importante que proporcionar la forma más fácil y clara de acceder a información útil, como en una experiencia de Búsqueda de información . Dichos sitios suelen ser un sitio de promoción de marca , un sitio de artista o un sitio donde el tema trata directamente sobre diversión u ocio, por ejemplo, dibujos animados, pasatiempos, etc. Los elementos inspirados también pueden aparecer en "sitios serios" para "romper" la seriedad y proporcionar un poco de contraste Por ejemplo, un juego puede aparecer en un sitio de noticias , un sitio automotriz o un sitio corporativo.

Cómo
Puede hacer que su sitio sea más divertido o entretenido aplicando una combinación de elementos interactivos específicos y un estilo visual apropiado.

Para que la interactividad sea más "divertida", debe ser desafiante o sorprendente, y requiere que los usuarios descubran cómo funcionan o se comportan las cosas. Los usuarios tendrán que aprender cómo funciona el sitio y qué tiene para ofrecer. Los usuarios pueden incluso tener que mejorar para mejorar sus habilidades motoras o mentales para una interacción exitosa. Al diseñar una diversión sostenida en un sitio, el sitio puede incluir elementos del juego como competir contra otros y obtener recompensas cuando alcanzan un objetivo determinado. Los elementos típicos que tienen una interacción tan desafiante incluyen Minesweeping , Roll-over y Overlay Menu. En ambos casos, los usuarios deben explorar o actuar primero para obtener acceso a la navegación.

En cuanto al estilo visual, más diversión significa estar positivamente sorprendido. Por ejemplo, al ser juguetón, como un dibujo animado, redondo y no recto, con colores suaves, contornos negros y fuertes contrastes (sin gradientes). Otros medios incluyen el uso de metáforas, haciendo cosas que están fuera de proporción o combinaciones de cosas que normalmente no van juntas. La música lúdica y el uso de animaciones o transiciones animadas también pueden ayudar. El uso de muchos elementos visuales hará que las páginas se descarguen más lentamente, pero eso está bien siempre que las imágenes sean lo suficientemente buenas y valgan la pena la espera.

Al mirar el diseño web, ciertos elementos tienen un aspecto más divertido o entretenido:
- Visita guiadapuede ser una buena manera de explicar a los usuarios cómo usar un producto en particular.
- Los juegos interactivos pueden proporcionar entretenimiento real incluso a sitios web serios.

Por qué
Un elemento crucial en la creación de una experiencia altamente interactiva es hacerla desafiante. Esto significa que la interactividad se hace más difícil de lo necesario. De lo contrario, no habría necesidad de descubrimiento y la alegría de "¡Ajá, ahora entiendo cómo funciona esto!" nunca ocurrirá Por supuesto, la diversión no estaría completa con un estilo visual que tenga un impacto positivo y sorprendente en los usuarios. El uso de personajes de dibujos animados y un estilo visual lúdico ayudan a crear un impacto tan sorprendente.

# data[].attributes.body
Problema
Los usuarios necesitan ayuda con un producto y recurren al sitio para recibir asistencia.

Solución
Cree una sección de soporte y realice una copia de seguridad con funciones de búsqueda adicionales.

Usar cuando
Los usuarios tienen un producto que compraron en un sitio de comercio electrónico o fuera de línea. Tienen algún tipo de problema con él y acuden al sitio en busca de ayuda porque es donde lo compraron o porque es el sitio del fabricante. El usuario puede estar buscando algo en particular, como una actualización del controlador, estado del pedido, un manual o precios. Alternativamente, pueden tener un problema más general o desconocido y necesitar apoyo.

Cómo
Los usuarios buscan asistencia. Por lo tanto, la experiencia que están buscando es 'útil', 'limpia' y 'directa al grano'. No es apropiado molestar a los usuarios con ofertas comerciales irrelevantes mientras buscan asistencia. El sitio debe ser muy efectivo para sus visitantes.

Una sección de soporte
Aunque el sitio puede tener una organización basada en un tema, audiencia o cualquier otro principio, puede ser conveniente agregar una 'sección de soporte'. Puede ser parte de la Navegación principal o convenientemente colocarse en la Meta Navegación . A menudo, tal sección se puede llamar 'Soporte', 'Servicio al cliente' o 'Ayuda', pero en otros casos se puede llamar de manera diferente.

La sección de soporte puede contener varios elementos. A veces es apropiado seleccionar el producto que los usuarios necesitan ayuda con lo que luego lleva a los usuarios a un tipo de página de producto donde, en lugar de tratar de comercializar un producto, se proporciona información de soporte. A menudo hay un Preguntas frecuentes (FAQ) o un Asistente de ayuda . Una vez que los usuarios están en el nivel del producto, entran en una especie de experiencia de búsqueda de información .

Facilidades de búsqueda adicionales
Cuando hay mucha información de soporte, los usuarios necesitarán facilidades de búsqueda adicionales. Se necesita un cuadro de búsqueda o búsqueda avanzada.