DISEÑO UX/UI

Clase 16
Patrones de Diseño
Les damos la bienvenida
Vamos a comenzar a grabar la clase
Cronograma

Clase 15 Clase 16 Clase 17

Sistema de grillas Patrones de Diseño Prototipo Funcional

● ¿Qué son los patrones de ● Prototipo funcional

● Resolución
diseño? ● Métricas UX
● Diseño modular
● UX Writing ● Tarea para el Proyecto
● Aplicación de grillas
● Material Design
● Tarea para el Proyecto
● Patrones de navegación
● Patrones de interacción
● Wireflows
● Tarea para el Proyecto
 Diseño Centrado en el Usuario (DCU)

Analizar Diseñar Validar

Mi-Fi Visual y Contenido

Design Thinking

Empatizar Definir Idear Prototipar Evaluar

Patrones de Diseño
Patrones de diseño
Son técnicas para resolver problemas comunes en el desarrollo de
software y otros ámbitos referentes al diseño de interacción o interfaces.

Un patrón de diseño resulta ser una solución a un problema de diseño, es

decir son soluciones a problemas comunes que podemos encontrar en
webs y apps, que ya han sido testeadas y estudiadas para dar una
respuesta.

Además son reutilizables, lo que significa que pueden resolver un mismo

problema en distintas circunstancias.
Patrones de diseño, origen
Se empezó a hablar de los patrones de diseño en la década de 1970 con la publicación del
libro “El lenguaje de patrones” de Christopher Alexander.

En él se hacía referencia a problemas arquitectónicos que podían encontrarse y a cómo

estructurar o disponer los elementos para solucionar estos problemas.

Más tarde, en 1995, se recogería esta idea para llevarla al mundo de la programación,
surgiendo el famoso libro “Patrones de diseño”.

Como podemos ver es un concepto que puede aplicarse a muchos sectores y también
actualmente en el mundo del diseño de interfaces, la experiencia de usuario y la
usabilidad.
“Los usuarios pasan más tiempo en otros sitios que en el tuyo”

Esta frase nos quiere decir que los usuarios ya tienen un

comportamiento marcado y unos modelos mentales porque han
visitado muchas webs o aplicaciones antes que la nuestra.

Por lo tanto esperan que nuestro producto funcione del mismo modo
que todos los otros que ya conoce.

Los patrones nos permiten ahorrar tiempo y ya sabemos que

funcionan.
Patrones de lectura
Los usuarios repasan la información con la mirada, no leen.

● Escanean la información, de arriba a abajo y ven lo que les llama la atención.

● Navegan chocando con los elementos hasta que encuentran lo que quieren.
● Si encuentran lo que buscan, dejan partes de la página sin siquiera mirarla.
● Encuentran palabras claves relacionadas a lo que están buscando.
● Luego de encontrar lo que buscan, es posible que ocurra una lectura detallada, es
decir que profundicen en lo que más les importa.
Patrón de lectura “F”

Jakob Nielsen realizó un estudio de “eye tracking” a casi 250 personas y descubrió que al
visitar una web la forma de lectura era similar a la letra F.

1. Escaneaban la información localizada arriba a la izquierda, y el primer párrafo.

2. Luego la vista se mueve hacia abajo al comienzo del párrafo siguiente.

3. Y por último escanean la información bajando por el lado izquierdo de la página de

manera vertical.
Patrón de lectura “F”
¿Cómo debemos presentar los textos?
● Textos concisos, nadie quiere leer un bloque de texto largo. Ir directo al grano, a la
información principal, 75 palabras máximo.
● Alinear los textos a la izquierda, porque facilita la lectura. No justificar los párrafos.
● Usar jerarquías visuales, que exista mayor y menor importancia. Usar la negrita para
palabras clave, así se destacan.
● Formatos escaneables, en bloques breves de información.
● Lenguaje claro para los usuarios con el que buscan la información.
¿Cómo debemos presentar los textos?
● No usar lenguaje promocional o marketinero que genere desconfianza.
● No utilizar TEXTOS EN MAYÚSCULAS, dificulta la lectura y puede malinterpretarse.
● En el caso de cometer un error, el usuario debe comprender qué error cometió y
cómo puede recuperarse y continuar navegando.
● Incluir subtítulos cada 3 párrafos y dividir por temas. Usar números y viñetas para
agilizar la lectura.
Test de los 5 segundos
Mostramos un diseño a una persona 5 segundos, lo retiramos, luego le preguntamos
qué recuerda de lo que vio.

Esto nos permite saber si el diseño fue comprendido y si los focos de atención más
importantes estaban bien ubicados.

Les preguntamos:

● ¿Qué recordás de la información?

● ¿Qué llamó más tu atención?

 Ejercicio
Clase 16
Test de los 5 segundos
Jerarquías visuales

Nivel 1

Nivel 2

Nivel 3
¿Cuál es el tono o lenguaje apropiado?
● Tener en cuenta el ambiente al que pertenece nuestro proyecto, para poder
establecer el tono del mensaje: serio, elegante, social, informal, humorístico,
informativo, corporativo, familiar etc. Pensá en cómo hablaría tu empresa si fuera
una persona.
● Dado el caso debemos hablar como hablan nuestros usuarios, por más que algo se
llama técnicamente de una manera, para que el usuario comprenda debemos utilizar
la jerga que utiliza.
● No debemos hablar como robots, no es lo mismo cometer un error y que te digan
“error #589”, a que digan “ups!, tu nombre de usuario no coincide con la
contraseña, por favor intentá nuevamente”.
● Podemos involucrar más al usuario si en vez de poner “continuar” “ok”, ponemos:
“Sí, realizar la compra”, “No, prefiero seguir mirando”.
Manual de estilo, marca o identidad (enfocado al lenguaje)

Un manual de estilo, guía de estilo o libro de estilo, es una guía

compuesta por un conjunto de criterios preceptuados, por normas
para el diseño y la redacción de documentos, ya sea para el uso
general, o para ser utilizados por los redactores de periódicos u otras
organizaciones que también publican textos.

Obelisco, el manual de estilo del GCBA

https://gcba.github.io/
Manual de estilo, marca o identidad (enfocado al lenguaje)
Su objetivo general es dar coherencia y unificar
criterios. Periodistas, editores y correctores recurren al
manual de estilo para resolver dudas y crear una
identidad única.

● Define mensajes clave y público objetivo.

● Mantiene la coherencia entre todos los
contenidos, aunque hayan sido creados por
diferentes personas.
● Resuelve dudas comunes entre el equipo de
creación de contenidos, con el ahorro de tiempo y
esfuerzos que esto supone.
● Ofrece pautas de trabajo para los nuevos
redactores, freelancers o los bloggers invitados.
● Marca el estándar de calidad para todos los
contenidos que se producen.
Manual de estilo, marca o identidad (enfocado al lenguaje)
Su objetivo general es dar coherencia y unificar criterios.
Periodistas, editores y correctores recurren al manual de
estilo para resolver dudas y crear una identidad única.

● Define mensajes clave y público objetivo.

● Mantiene la coherencia entre todos los contenidos,
aunque hayan sido creados por diferentes personas.
● Resuelve dudas comunes entre el equipo de
creación de contenidos, con el ahorro de tiempo y
esfuerzos que esto supone.
● Ofrece pautas de trabajo para los nuevos
redactores, freelancers o los bloggers invitados.
● Marca el estándar de calidad para todos los
contenidos que se producen.

Link al manual
Manual de estilo, marca o identidad (enfocado al lenguaje)

Discord y sus directrices de

estilo, tono y voz
https://discord.com/branding
La importancia de tener buena ortografía
● Una mala escritura puede crear confusión, poca claridad y falta de coherencia.
● Si una empresa importante comete un error en un diseño para la vía pública o en
una publicidad audiovisual por ejemplo, podría provocar una pérdida de millones de
dólares en ventas.
● Podría dejarnos fuera de una oportunidad de trabajo si presentamos un CV o
portafolio que contenga errores ortográficos.
● Estas fallas tienen el potencial de destruir las relaciones con los clientes, no volver
a ser contratados, o incluso ser despedidos.
● Otras investigaciones muestran que tan pronto como las personas identifican errores
ortográficos en el texto de una página web, inmediatamente la abandonan porque
temen que se trate de un sitio fraudulento.
Patrones de navegación

Formas de navegar los contenidos para evitar que los usuarios se pierdan:
● Drawer: El menú (hamburguesa) nos permite cambiar rápidamente de pantalla, para
aplicaciones con más de 5 destinos no relacionados y poco frecuentes.
● Barra inferior: Nos permite ver la navegación principal de la app. 3 a 5 secciones
máximo. (Android Bottom Navigation Bar).
● Pestañas: Organizan y permiten la navegación entre grupos de contenido que están
relacionados. (Android Tabs 4 fijas o 7 con scroll).
● Retornos: Se posiciona arriba a la izquierda (Android Back).
Patrones de interacción
Formas en que el usuario sujeta el
teléfono y el modo que utilizan sus dedos
condiciona la posición de los elementos.
Patrones de interacción
● Listas

● Desborde

● Buscar

● Cuadro de diálogo

● Notificaciones

● Introducción de datos
Listas
● Contenido dispuesto verticalmente.

● Muestra ítems y permite al usuario

seleccionar alguno de ellos para más
información.

● Contienen elementos con acciones

primarias y complementarias, que se
representan mediante iconos y
textos.
Desborde
● Funciones extra y de uso poco
frecuente

● Ocultas la mayor parte del tiempo,

hasta que el usuario las reclame.

● Contienen acciones que no entran en

la barra de acción por lo que pasan al
desborde.
Buscar
● Opción para buscar accesible
desde la barra de acciones o
desde un campo de búsqueda.
Cuadro de diálogo
● Se utilizan para interrumpir al usuario de
forma temporal para que tome una
decisión, o para explicar algo que ha
sucedido antes de continuar.
● Mientras están visibles, no es posible hacer
otra cosa en el resto de la aplicación por lo
que hay que limitar su uso a lo
imprescindible.
● Por lo general, se centran en la pantalla, y
por encima de cualquier otro elemento de
la interfaz.
Notificaciones
● Se utiliza para mostrar que algo
acaba de ocurrir, o bien que
sucederá en breve.

● Se utilizan mensajes simples de

confirmación que desaparecen
luego de unos segundos.

● Las notificaciones no siempre

requieren la intervención del usuario
y no interrumpen su flujo.
Introducción de datos
● No siempre se debe obligar al
usuario a utilizar el teclado.

● Existen otras alternativas: menús

deslizantes, desplegables, checkbox, o
una lista, donde el usuario puede
elegir entre varias opciones.

● Además, existen en el teléfono

sensores de ubicación, cámaras y
micrófonos que también podrán ser
un input de datos para una
aplicación.
https://m3.material.io/
Android - Google: Material Design
Wireflows
Un wireflow es una representación visual que combina elementos
de wireframes y user flow para mostrar la estructura y la
interacción de una interfaz de usuario.
Esencialmente, es una combinación de user flow y wireframe que
describe cómo los usuarios navegan a través de una aplicación o
sitio web.
Elementos básicos para crear un wireflow
1. Pantallas/Estados: Representaciones visuales de las diferentes pantallas o estados
que componen la interfaz de usuario.

2. Conexiones: Flechas o líneas que muestran la dirección del flujo de interacción entre
las pantallas.

3. Contenido: Bloques de contenido dentro de cada pantalla, como texto, imágenes,

botones, formularios, etc.

4. Interacciones: Detalles sobre cómo interactúan los usuarios con cada pantalla, como
hacer clic en un botón, deslizar hacia la derecha, introducir texto en un campo, etc.

5. Navegación: Elementos que muestran la estructura de navegación del producto,

como barras de navegación, menús desplegables, botones de retroceso, etc.
Ejemplo de Wireflow:
¿Para qué sirve el wireflow?
Visión general del flujo de usuario: Los wireflows proporcionan una visión general del
flujo de usuario a través de una aplicación o sitio web.

Esto ayuda a los diseñadores y equipos de desarrollo a comprender cómo interactúan los
usuarios con el producto y a identificar posibles puntos de conflicto en la experiencia del
usuario.

Iteración y refinamiento: A medida que avanza el proceso de diseño, los wireflows pueden
actualizarse y modificarse para incorporar comentarios de los usuarios, cambios en los
requisitos del proyecto o nuevas ideas de diseño.
Creación de nuestro wireflow
Antes de comenzar, es importante tener una comprensión clara del objetivo del wireflow
y del alcance del proyecto. ¿Qué queremos lograr con el wireflow? ¿Qué partes del flujo de
usuario vamos a representar?

Luego, hay que Identificar los puntos de entrada al sistema (por ejemplo, un botón de
inicio de sesión) y los puntos de salida (como la finalización de una transacción, el cierre de
sesión, etc.).

Posterior a ello, vamos a crear un esquema inicial del wireflow utilizando el plugin
“Autoflow” de Figma. Esto puede ser una representación simple, mostrando las
principales pantallas y las conexiones entre ellas.

A medida que avanzamos, agregamos más detalles al wireflow, como pantallas

específicas, elementos de interfaz de usuario, interacciones y notas explicativas.
1. Click en el símbolo
de plugins y
componentes.
2. Seleccionamos
“plugins”.
3. Escribimos
“autoflow” en el
buscador.
4. Clickeamos “run”
Con el plugin corriendo,
seleccionamos dos
frames que queramos
que se conecten y
automáticamente
aparecerá la línea que
los conecta.
Elegir figura para la
conexión

Seleccionar la ubicación de
la conexión

Agregar nota o texto a la

flecha
Si lo que queremos es
conectar un
componente con una
pantalla, simplemente
clickeamos el
componente de manera
individual y luego
seleccionamos el frame
al cual queremos que se
dirija. Automáticamente
aparecerá la flecha que
los conecte.
 Ejercicio
Clase 16
Exploremos diferentes
wireflows en esta web:
https://www.capturando.la/
Tarea para el Proyecto
Para continuar diseñando la interfaz del prototipo del Proyecto que vamos a desarrollar:
A partir de los Wireframes digitales (pantallas sencillas), vamos a incorporar los Patrones
de Diseño (los de navegación y luego los de interacción) vistos en clase. Para realizar esta
tarea necesitaremos previamente tener hechos los:
● Mapa de sitio
● User Flow (optativa)
● Wireframes a mano
● Wireframes digitales

Aclaraciones: Guarden todo el proceso, es decir guarden los wireframes digitales y

luego sobre una copia incorporen los patrones de diseño.
Para esta tarea utilizaremos el Anexo de la clase 16.
Tarea para el Proyecto (optativa)
Para complementar el Proyecto que estuvimos desarrollando en esta parte del curso:
A partir de las pantallas con los Patrones de Diseño ya incorporados, vamos a realizar en
Figma el Wireflow del Happy Path de nuestro Proyecto utilizando la herramienta
Autoflow y los conceptos vistos en clase.
Para realizar esta tarea necesitaremos previamente tener hechos:
● MVP (funcionalidad principal)
● Task Flow y User Flow (optativas)
● Wireframes a mano y digitales
● Patrones de Diseño
Aclaraciones: Recuerden no sobreescribir, guarden los wireframes con los Patrones de
Diseño aplicados y luego sobre una copia realicen el Wireflow.
Es muy importante que guarden todas las etapas del proceso de diseño por separado.
Ejemplo de entrega
 EVOLUCIÓN DEL PROTOTIPO

A continuación mostramos la evolución del diseño de cada pantalla,

cómo fue evolucionando la interfaz de usuario desde el wireframe a
mano (boceto a mano), al wireframe digital (boceto digital) al diseño
que incluye los Patrones de Diseño (diseño más detallado).
 1- Login
WIREFRAME A MANO WIREFRAME DIGITAL PATRONES DE DISEÑO

Botón

Botón

Botón de
registrar
 2- Sign in
WIREFRAME A MANO WIREFRAME DIGITAL PATRONES DE DISEÑO

Botón

Campo de
texto

Campo de texto
(password)

Control de
selección
 3- Home Drawer
Botón de
notificaciones
WIREFRAME A MANO WIREFRAME DIGITAL PATRONES DE DISEÑO

Barra de
App (arriba)

Imagen

Botón en
acción
flotante

Card
 4- Buscador
WIREFRAME A MANO WIREFRAME DIGITAL PATRONES DE DISEÑO
Navegación
Título
Subtítulo

Botones de
selección

Interacción
 5- Resultados
WIREFRAME A MANO WIREFRAME DIGITAL PATRONES DE DISEÑO

Título

Card

Navegación

Interacción
 6- Reseña
WIREFRAME A MANO WIREFRAME DIGITAL PATRONES DE DISEÑO

Card

Navegación

Interacción
 7- Agenda
WIREFRAME A MANO WIREFRAME DIGITAL PATRONES DE DISEÑO

Título

Interacción

Calendario

Botón de
selección

Botón
Wireframes bocetados a mano
Wireframes digitales en baja FIDELIDAD
Wireframes Patrones de Diseño aplicados (Material Design) Ver más
Wireframes evolución

Evolución: del boceto al Wireframe

Evolución del Home de la App de

Deportes: Boceto a mano, Wireframe
digital Lofi realizado en Figma y
Wireframes incorporando los patrones
de Diseño utilizando parte de los
elementos de Material 3 Design Kit, y
posteriormente realizando el prototipo
funcional.

Ver Prototipo Funcional

Boceto a mano Home Wireframes Lo-fi Patrones de diseño

Manos a la obra! Los primeros Wireframes de Unicompras
Para comenzar con el diseño de la app, primero realizamos algunos wireframes a mano de las pantallas
principales. Luego utilizando Figma los digitalizamos y armamos los wireframes en fidelidad baja.

>> Wireframe a Mano Elige tipo de

Usa el Configura Configura Finaliza la
Inicio Sesión Home compra
Buscador (grupal/individual) envio pago compra

>> Wireframe Digital en Baja

Elige tipo de Finaliza la
Usa el Elige Configura Configura
Inicio Sesión Home compra
compra
Buscador Productos (grupal/individual) envio pago

LINK
Aplicación de patrones de diseño

Tomando como input la guías de Material Design, comenzamos a definir y aplicar los siguientes patrones de
navegación y de interacción para nuestros frames:

TEXT INPUT BACK ARROW NAV DRAWER

MENÚ CARDS DE LOS

BOTONES BUSCADOR NAV BAR
HAMBURGUESA PRODUCTOS
No te olvides de dar el presente
Recordá:
● Revisar la Cartelera de Novedades.
● Hacer tus consultas en el Foro.

Todo en el Aula Virtual.

Muchas gracias por tu atención.
Nos vemos pronto