¡Hola!

Bienvenidx :)

Este documento es una extensión de la microclase. Nos interesa

que puedas ampliar conocimientos ya que la clase es corta y

ayuda mucho poder bajar la información en un archivo para

tenerlo a mano de consulta o repaso.

El objetivo de estas microclases es que ustedes incorporen

algunos conceptos sobre el diseño de experiencia de usuario y

diseño de interfaz y compartirles recursos que a ustedes les sirva

y les sea útil como material extra si ya están dentro de estas

disciplinas o recién empezando.

Nuestra idea es ser sus compañeras en este nuevo camino hacia

futuros diseñadores ux/ui.

Como siempre decimos en cada clase, no somos expertas, día a

día vamos aprendiendo, somos inquietas estudiamos e

investigamos mucho pero como dice una gran profe nuestra, no

existen técnicas infalibles ni una formula secreta para resolver

cuestiones específicas. Hay mil maneras diferentes de resolver

algo, todos los días se actualizan las metodologías, entre todo

podemos ir aportando y aprendiendo.

Bien… Una vez dicho todo esto… ¡Comencemos!

Tabla de contenido

Introducció

Tipos de patrones de Diseño

Aplicación de Patrones
Introducción
En pocas palabras podríamos decir que un patrón es una serie de
sucesos que se repiten de forma reiterativa pudiendo reconocerlo
con facilidad luego de percibirlo y aprenderlo.

Por ejemplo, queremos tejer un suéter, dentro de nuestro libro de

instrucciones vamos a poder buscar patrones que nos ayuden a
construirlo con distintos niveles de complejidad, pero que una
vez que se aprendan, vamos a poder utilizarlos si queremos
construir una nueva pieza similar. También podemos encontrar
patrones en el Origami para construir un animal en papel, ya que
cada animal tiene su propio patrón.

Fuente Imagen

Cada vez que descubrimos un patrón, se libera una descarga de

dopamina, hormona asociada con el placer y la recompensa.

Es un proceso cognitivo, en donde tratamos de asociar un

estímulo con alguna experiencia previa que hayamos tenido.

Gerd Gigerenzer, psicólogo alemán habla de la “capacidad

adaptativa” o “caja de herramientas”. Esto se observa cuando a
una persona se le presenta una situación nueva y para tomar
decisiones dentro de este nuevo contexto, va a buscar en su caja
de herramientas adaptativa algún tipo de información o recurso
similar para poder afrontarla.

A medida que vamos interactuando en diferentes sitios web,

vamos incorporando nuevos patrones. De esta manera,
recopilamos y aprendemos diferentes tareas que luego vamos a
buscar en nuestra cabeza cuando nos encontremos con
situaciones similares.

Esta situación hizo que se fueran creando “paquetes” de

soluciones, que los diseñadores saben que funcionan para que la
interacción entre el usuario y la interfaz sea fluida y con la menor
cantidad de obstáculos posible. También para maximizar la
usabilidad, que el usuario no tenga que pensar desde cero cada
interacción sino que ya la reconoce y puede navegar de manera
rápida y eficiente.

La importancia de utilizar patrones de interfaz de usuario es que

permiten ahorrar tiempo a la hora desarrollar un proyecto,
sabemos que funcionan gracias a que se mantuvieron a través
del tiempo y porque fueron testeados previamente.

“Un lenguaje común que tanto

los diseñadores como los
usuarios finales comprenden”
UxPIN - Tactical UI Design Patterns
¿Cómo está formado un patrón?

A lo largo de la historia dentro del diseño web, diseño de

interacciones, entre otros, se fueron presentando soluciones a
problemas que enfrentaba el usuario durante su experiencia.
Estas soluciones tuvieron mucho éxito, por lo que comenzaron a
aplicarse de manera repetitiva y el usuario terminó
familiarizándose con ellas al punto de llegar a reconocerlas

fácilmente.

Fuente Imagen

La importancia de utilizar patrones de interfaz de usuario es que

permiten ahorrar tiempo a la hora desarrollar un proyecto,
sabemos que funcionan gracias a que se mantuvieron a través
del tiempo y porque fueron testeados previamente.
La creación de un patrón generalmente contempla lo siguiente:

Problema

Relacionado con la usabilidad de un usuario es importante saber

qué debemos solucionar.

Contexto

¿Dónde ocurre ese problema? ¿A quiénes afecta?

Razón

La razón por la que este patrón existe y cómo afecta la

experiencia de usuario y usabilidad.

Solución comprobada

El diseñador implementa algo previamente analizado y

comprobado para poder abordar el problema.

Ejemplos

Para respaldar el éxito del patrón aplicado en la vida real, a través

de capturas de pantallas y descripciones.

Implementación

Instrucciones detalladas para poder aplicar el patrón.

Cuidando los patrones de diseño

Si bien se tratan de soluciones al alcance, que nos ahorran

tiempo y están comprobadas, hay que tener cuidado a la hora de
utilizarlos teniendo en cuenta algunos aspectos:
No confiar demasiado en los patrones, analizar bien el
problema ya que podemos solucionarlo de forma incorrecta
Usar patrones pero no caer en la copia de otro sitio o
aplicación, no queremos que se parezcan a sitios o apps
reconocidas.
Si vamos a crear patrones propios, seguir las instrucciones
adecuadas para poder definirlos claramente y qué tipo de
problemas solucionan.
Lo mejor es maximizar la experiencia de usuario, que el
usuario se sienta familiarizado durante el proceso para una
interacción más intuitiva y que no preste a confusiones.

Tipos de patrones de Diseño

Existen varios patrones de diseño que podemos aplicar durante
la creación de una interfaz.

Entrada/salida de datos

Generalmente los sitios web o apps requieren que las personas

usuarias se registren y creen un perfil para iniciar sesión, también
que elijan fechas para un evento o rellenar datos para realizar
pagos.

Para ingresar este tipo de datos, el patrón más reconocido son los
formularios de registro.

Fuente Imagen
Estructuración de contenidos

Relacionado con grillas y jerarquización. Que todo mantenga un

orden consistente.

Es importante el orden de contenidos para que la navegación sea

clara y el usuario pueda encontrar soluciones de manera rápida.
Por ejemplo, si el usuario está buscando registrarse, que
encuentre una manera fácil de hacerlo. No confundirlo con
imágenes irrelevantes, acciones innecesarias o funciones que
presten a la confusión.

En el ejemplo podemos ver que sin niveles de lectura es difícil

que el usuario encuentre fácilmente lo que está buscando.

Fuente Imagen
Navegación

Si la navegación dentro de una app o sitio web requiere

explicación constante, no es tan buena. Que el usuario perciba
una navegación simple y clara puede asegurar una buena
usabilidad tanto en una web o app.

Por ejemplo en los sitios webs vamos a buscar el menú siempre

al top de la pantalla (header) porque sabemos que ahí se
encuentran todas las secciones en un mismo lugar.

Fuente Imagen
 Fuente Imagen

Lo mismo en los celulares, las barras de navegación

generalmente se encuentran en la parte inferior de la pantalla y a
través de íconos que asociamos a acciones que reconocemos
previamente, podemos navegar por las distintas secciones de
una app.

Fuente Imagen
Jerarquía

Como vimos en el patrón de estructuras, las jerarquías permiten

que los usuarios puedan distinguir fácilmente los elementos
principales de los secundarios. Esta jerarquización se puede
hacer a través del color, del contraste y espaciado, entre otros.

En este ejemplo podemos ver cómo el contraste de color permite

que se diferencie el contenido de forma clara.

Fuente Imagen
Aplicación de Patrones

Hay muchas bibliotecas de patrones que están al alcance para

poder tomarlas como referencias. Esto no quiere decir que
tengamos que aplicar todos los patrones existentes en nuestros
diseños. Siempre hay que tener como enfoque el problema a
solucionar.

El libro de UXPin How to use the best design patterns recomienda

los siguientes pasos:

Averiguar los problemas que requieren soluciones.

Primero hay que detectar qué problemas de usabilidad se

encuentran presentes en nuestro sitio o aplicación. A través de
pruebas y testeos con usuarios, así sabremos exactamente qué es
lo que no está funcionando.

Analiza otras webs o aplicaciones móviles que hayan

encontrado solución a estos problemas.

Analizar cómo webs o aplicaciones similares a las nuestras han

solucionado el problema.

Examine cómo otros sitios web o aplicaciones móviles

implementan estas soluciones.

Relacionado con el punto anterior, es necesario tener en cuenta

cómo se comportan los demás, para saber por qué tienen éxito y
qué es lo que funciona para que los usuarios se sientan atraídos.
Esto no no quiere decir que debamos copiar exactamente lo que
aplican los otros, sino que puede tomarse como punto de
partida.

Analizar cada patrón y decidir cuál es el correcto para aplicar.

Si veo que otros sitios o aplicaciones similares utilizan ciertos

patrones, primero hay que probar, testear si nos funciona igual
con nuestro sitio o aplicación. No tomarlo simplemente porque la
competencia le funciona, debemos constatar que nos sirva como
solución para nuestros usuarios.

Bibliotecas de patrones

Mobbin

UI Garage

Ui patterns

Pttrns

Screenlane

Checklist Design

Landing folio

UI Sources

UIJar

Design Vault
Bibliografía
User Interface (UI) Design Patterns - Interaction Design Foundation. 2020

10 Great Sites for UI Design Patterns - Interaction Design Foundation. 2020

UX Collective Editors. UI Inspiration: Design Pattern Libraries. 2016

DesignLAB. What Is A UI Design Pattern

Maryna Z., Yulia Z. Devising Interfaces with UX Design Patterns. 2017

Tidwell J., Brewer C. , Valencia A. Designing Interfaces. 2020

MacDonald D. Practical UI Patterns for Design Systems. 2019

UXPin. Tactical UI Design Patterns. 2015

UXPin. Designing Better UX With UI Patterns. 2015.

Si te gustó nuestro contenido

te invitamos a seguirnos en

nuestras redes :)