Clase 08.

DISEÑO UX/UI

WIREFRAME A MANO
RECUERDA PONER A GRABAR
LA CLASE
GLOSARIO:
Clase 7
Taskflow (diagrama de tareas): se enfoca en las
tareas que tiene que realizar el usuario en cada paso,
para llegar a un objetivo.
Flowchart (diagrama de flujo): Cada paso en la
secuencia se anota dentro de una forma de diagrama.
Los pasos están vinculados mediante líneas de
conexión y flechas direccionales.
Userflow (diagrama de usuario basado en el
diagrama de flujo): es una manera de representar
gráficamente un proceso a través de una serie de pasos
bien estructurados y relacionados que permiten
comprender un todo. Suelen utilizarse una serie de
figuras geométricas que representan cada paso del
proceso.
 CRONOGRAMA DEL CURSO
Clase 7 Clase 8 Clase 9

Userflow Wireframes a mano Wireframe digital

GENERANDO WIREFRAMES
USERFLOW ENTREGA PROYECTO 1 DIGITAL EN ADOBE XD
O FIGMA

ARMANDO EL USERFLOW LAS 8 IDEAS ELEGIR EL TIPO DE APP

WIREFRAMES DIGITALES
 ● Armar un wireframe a mano del proyecto.
En web comenzar desde mobile (Mobile
First).
● Introducirnos en el concepto de
prototipado dentro del proceso de diseño
OBJETIVOS DE LA centrado en el usuario (diseño).
● Fortalecer las capacidades en ideación y
CLASE creatividad.
 MAPA DE CONCEPTOS CLASE 8
CREATIVIDAD

INTERFAZ

Diseño Centrado
Analizar Diseñar Validar
en el Usuario

Design Thinking Empatizar Definir Idear Prototipar Evaluar

WIREFRAME
CRAZY 8
A MANO
MVP
FIDELIDAD

Userflow
Arq de
basado en VISUAL
Información
Flowchart
CONTENIDO

FUNCIONALIDAD
 ETAPAS DE DISEÑO UX A UI
(POST ANÁLISIS)

Luego de tener un análisis del producto con el usuario, el

relevamiento, y la recopilación de información, vamos a plasmar todas
las ideas y conceptos en estructuras y elementos que van a componer
la interfaz. Comenzaremos a prototipar nuestro producto digital.
 ¿POR QUÉ PROTOTIPAR?
Los prototipos nos permiten explorar nuestras ideas, antes de invertir tiempo y dinero
1
en el desarrollo.

Lejos de ser una pérdida de tiempo, trabajar con prototipos nos permiten crear
2
múltiples soluciones para poder "fallar rápido y barato". Un prototipo no necesita
estar completo ni ser bonito, sino ser eficiente, rápido, económico, y fácil de construir.

3 Cuando hablamos de un prototipo nos referimos al primer dispositivo que se

desarrolla de algo y que sirve como modelo o muestra para su posterior fabricación.
En síntesis, un prototipo es una versión preliminar de un diseño, que puede ser un
producto físico o digital.
WIREFRAMES
 ¿QUÉ SON?
Un wireframe es un boceto donde se representa visualmente, de una
forma muy sencilla y esquemática, la estructura de una interfaz. Su
objetivo es definir el contenido y la posición de los bloques de
información; esto incluye menús de navegación, bloques de contenido, y
otros elementos. Además, permite entender cómo interactuarán los
mismos entre sí.
 EVOLUCIÓN DEL
PROTOTIPO

SKETCH O MOCKUP O
WIREFRAME A WIREFRAME PROTOTIPO DEVELOP
MANO FUNCIONAL
 SKETCH O MOCKUP O
WIREFRAME A WIREFRAME PROTOTIPO DEVELOP
MANO FUNCIONAL

Baja Fidelidad visual Alta fidelidad

Estático Fidelidad de funcionalidad Interactivo

Texto simulado Fidelidad del contenido Texto real

Rápido Lento
Barato Caro

Evolución del prototipo

SKETCH O MOCKUP O
WIREFRAME A WIREFRAME PROTOTIPO DEVELOP
MANO FUNCIONAL

Fidelidad visual

Baja Alta fidelidad

Fidelidad de funcionalidad

Estático Interactivo

Fidelidad del contenido

Texto simulado Texto real

VISUAL
La fidelidad visual refiere al estilo
gráfico del prototipo. Cuanto más
parecido al producto final sea
nuestro mockup, más alta es su
fidelidad visual.
CONTENIDO
La fidelidad de contenido refiere a
la palabra escrita. La misma será
alta cuando el texto que contenga el
prototipo sea el real.
FUNCIONALIDA
D
La fidelidad de funcionalidad refiere
al nivel de interacción que puede o no
tener el prototipo, es decir, si es un
prototipo estático creado con pantallas
que no se vinculan entre sí, o bien si
es un prototipo interactivo donde las
pantallas que lo componen están
vinculadas entre sí.
Sketch o wireframes a mano
/baja fidelidad
El prototipo de tipo sketch es el más
rudimentario de todos, de hecho es la
primera aproximación a la idea del
producto. Nos permite comenzar a
materializar la idea que tenemos en
nuestras cabezas sobre una solución de
diseño.
 No debe haber demasiado detalle en el uso de las formas

Párrafo de texto Imágenes Botones Elementos especiales (por ejemplo:

buscador, pestañas, slider de fotos)

Íconos (genéricos) Títulos Listado de elementos

Beneficios
Al ser representaciones tan simples, te
permiten crear múltiples versiones de un
mismo proyecto de una forma rápida, así
como aplicar cambios o nuevas ideas.
Lo importante es tener clara la estructura,
antes de empezar con el desarrollo.
Wireframes digitales de
fidelidad baja/media
Los wireframes digitales posee mayor
nivel de detalle, pero siguen siendo
representaciones esquemáticas de los
elementos que formarán parte de la
interfaz del usuario.
Mockups o wireframes en
alta fidelidad

Es el entregable final, la interfaz de

usuario donde se aplica el diseño visual
al diseño de interacción.
Development

Corresponde a la codificación de cada

una de las pantallas, basada en el sistema
operativo en el cual se decida trabajar.
ENTONCES... ¿SIEMPRE TENGO QUE
HACER TODOS ESTOS PROTOTIPOS?
¡No! Sólo aquellos que nos permitan llegar lo más rápido posible a
nuestro objetivo, y con el menor costo posible.
RESPONSIVE DESIGN
 ¿DE QUÉ SE TRATA?

El responsive design alude a todas aquellas técnicas o patrones que

usamos para adaptar nuestras aplicaciones web a la mayor cantidad
de dispositivos posibles.
Resoluciones de pantalla en teléfonos Android.
ADAPTACIÓN, NO TRASLADO
LITERAL
¿Qué hay que tener en cuenta? Veamos...
Distancia de lectura entre usuario-dispositivo.
Affordance. Elemento de interacción (mouse) o dedo.
Tamaño de la pantalla.
VAMOS CON UN EJEMPLO
NYT en épocas donde no era responsive.
The Boston Globe aplicando Responsive Design.
¿Y SI LO VEMOS AL REVÉS?
The Boston Globe aplicando Responsive Design.
CONCEPTOS PRINCIPALES
Viewport

Es el área que está disponible en

la pantalla del navegador.

🚨 No confundir con el tamaño

total de la pantalla del dispositivo.
Media queries

Son una característica de CSS3.

Permiten obtener datos sobre el
navegador del visitante, y usar
estilos de manera condicional según
dichos datos.
Grillas
Significa abandonar los pixels, y dar lugar a
los porcentajes y ems, que son unidades de
medida relativa; transformar el layout de
pixels a una unidad de medida relativa.

Utilizando grillas flexibles, el diseño modifica

su ancho en relación a la pantalla en la cual se
está mostrando.
 Imágenes flexibles

● Cargar imágenes grandes y modificar

sus atributos HTML.
● Acortar imágenes con CSS.
● Múltiples versiones de la imagen en
el servidor.
● Ocultar imágenes.
Breakpoints

No creamos breakpoints orientados a dispositivos, porque es

imposible generar tantos saltos como tipos de pantallas y sus
resoluciones existen.

Partiendo de la ventana con dimensiones reducidas (mobile

first), vas estirando la anchura hasta que comienzas a
apreciar que tu diseño está viéndose peor. Ahí hay un
breakpoint.
 CONCLUSIÓN
● Diseñar por porcentajes, no por pixeles.
● Diseñar para pantallas, no para dispositivos.
● Diseñar para tocar, no para clics.
● Diseñar para pantallas pequeñas primero.
MOBILE FIRST
 ¿DE QUÉ SE TRATA?
Implica plantear el proceso de diseño teniendo en cuenta el
teléfono en primer lugar. La ventaja de esta forma de trabajo es que
obliga a pensar en el teléfono como punto de partida, concentrándose
en lo esencial de un producto, y haciendo foco sólo en lo que tiene
sentido para este dispositivo.
Mobile first

Una vez que la aplicación está diseñada, podemos preguntarnos cuál

es la mejor forma de llevar lo hecho para el teléfono, extendiendo y
escalando el contenido y repensando la diagramación.

Todos los dispositivos tienen usos diferentes; hay que tener en cuenta
las características particulares de cada uno de ellos.
Proceso de diseño mobile first.
Proceso de diseño mobile first.
 VENTAJAS
1 Tienes una concepción global de todo el contenido desde el comienzo.

2 Mejora el rendimiento en las resoluciones inferiores.

3 Estás diseñando para el futuro.

 Resulta más sencillo tener pocos elementos e ir
agregando más cosas a medida que van creciendo,
que empezar por el diseño para pantallas grandes, y
luego ir quitando cosas cuando no entran.
AHORA... A
TRABAJAR!
 ¡PARA PENSAR!
¿Si voy a realizar un prototipo de website, debo empezar a
bocetarlo para que tipo de dispositivo?

MULTIPLE CHOICE
CONTESTA LA ENCUESTA DE ZOOM
☕ BREAK
¡5/10 MINUTOS Y
VOLVEMOS!
WIREFRAME A MANO
 ¡MANOS A LA APP! JAJAJ
VAMOS A EMPEZAR A GENERAR
NUESTRO WIREFRAME A MANO O
SKETCH
 ¿CÓMO?

G I E
RESEARCH RESEARCH
IDEACIÓN
GENERATIVO EVALUATIVO
Focus groups Brainstorming Pruebas de usabilidad
Entrevistas individuales Workshops Encuestas interactivas
Entrevistas en contexto Sesiones de ideación Mapas de calor
Encuestas Benchmarking Recording sessions
Desktop research Arquitectura de Información Card sorting
Mapa de Empatia Diagrama de Usuarios Análisis de métricas
Observaciones en campo
 EL LUGAR EN EL PROCESO DE
DISEÑO
G I E
RESEARCH GENERATIVO IDEACIÓN RESEARCH EVALUATIVO

MAPEAR BOCETAR DECIDIR PROTOTIPAR TESTEAR

Fuente: Google design sprint

PARA ESO VAMOS A EJERCITAR
NUESTRA CREATIVIDAD
 RECUERDA...

● Postergar juicios de valor.

● Fomentar las ideas absurdas, extremas y radicales.
● Construir sobre las ideas de los/as demás integrantes.
● Una conversación a la vez.
● Ser visual para explicar.
● Priorizar cantidad sobre calidad.
Buscamos llevar adelante un pensamiento creativo de divergencia y convergencia.
Para poder llevarlo adelante, nos vamos a ayudar con la actividad “8 ideas” o
“crazy 8s”.
¿CÓMO LA LLEVAREMOS
ADELANTE?
REQUISITO META ENTREGABLE
Tienes que tener un Interpretar una idea, y 8 ideas distintas en forma
problema. Este último generar una solución a su de texto, imágenes o
es la razón detrás de su desafío. ilustraciones.
desafío.
 PASO A PASO

SETUP REGLAS IDEAS CIERRE

SETUP REGLAS IDEAS CIERRE

Tendrás que tener a mano un papel de impresora, doblarlo en 8, y

preparar tus lápices.
SETUP REGLAS IDEAS CIERRE

Definir el tiempo y poner un timer en el celular. En su versión

original, el tiempo es de 1’, pero para llevar adelante nuestra
actividad usaremos 2’, porque estamos entrenando, y el tiempo
extra nos va a venir bien 😛.
 SETUP REGLAS IDEAS CIERRE

Dibujar una posible solución en uno de los segmentos.

Cuando suene el timer, pasamos a otro segmento, y pensaremos otra idea.
SETUP REGLAS IDEAS CIERRE

Le sacamos una foto a cada uno de los segmentos, y los subimos en

este archivo. Usamos la técnica de Dot Voting para votar.
 LAS 8 IDEAS
8 bocetos en pocos minutos.

Tiempo: 30 minutos
(16 minutos aproximadamente para la generación de los 8 bocetos, y alrededor de 14 para hacer la votación de los/as estudiantes).
 8 BOCETOS EN POCO TIEMPO
PARTE 1: GENERACIÓN DE LOS 8
BOCETOS
1. Setup: tener un papel A4 a mano, y doblarlo para que queden 8 partes iguales.
2. Reglas: 2 minutos para cada dibujo. El objetivo es que hagan un boceto rápido de la pantalla
inicial o principal de la app.
3. Ideas: cronometrar los dos primeros minutos, dar una pequeña pausa, y continuar con el segundo.
Esto se dará hasta completar los 8 bocetos. Se puede acompañar con música.

Nota: usaremos los breakout rooms. El/La tutor/a guía la actividad.

 8 BOCETOS EN POCO TIEMPO
PARTE 2: VOTACIÓN DE ESTUDIANTES

4. Cierre: primero los/as estudiantes sacarán fotos a sus bocetos, y los subirán al "archivo
compartido guía". Los/as tutores/as guiarán la instancia de votación en las comisiones. Usaremos el
dotvoting para votar. Dotvoting: cada estudiante tendrá el doble de dot como alumnos/as haya en la
comisión. Cada quien podrá colocar hasta 2 dots por proyecto de sus compañeros/as (respetar esta
consigna). ¿como elegir cual? Bueno, la mejor solución al problema identificado.

Nota: los/as tutores/as deben duplicar la ppt por cada comisión, así como las slides por la cantidad de
estudiantes que tengan.
 RECUERDEN HACER ESTA
ACTIVIDAD A CONCIENCIA
Buscamos fomentar el trabajo colaborativo, muy solicitado en este tipo de
trabajos, donde las miradas de todos son las que hacen la diferencia en el
resultado final.

No se está haciendo un juicio de valor, es importante la mirada de tus

compañeros/as en relación a los bocetos.
 ACUERDOS

Presencia Escucha activa Apertura al Todas las voces

aprendizaje
 1

PRIMERA ENTREGA DEL PROYECTO

FINAL
Deberás entregar los desafíos en los que estuviste trabajando hasta el momento.
PRIMERA ENTREGA DEL PROYECTO
FINAL
Formato:
Archivo en tipo .ppt o .doc con el desarrollo de la actividad. Generar un archivo con el nombre “ProyectoFinal+Entrega1+Apellido”. Se puede entregar
una Google slide también.

Sugerencia/s:
Activar comentarios en el archivo.

Objetivos generales:
1. Integrar todos los desafíos entregables del proyecto.
2. Chequear y revisar el proyecto.
3. Generar, en forma de presentación, el detalle de los desafíos anteriores.

Objetivos específicos:
4. Proponer una hipótesis de solución para generar un Prototipo de aplicación desde cero en el que trabajarás a lo largo del curso
5. Crear y definir los user personas que harán uso de tu proyecto final. Definir al menos dos personas.
6. Realizar un research generativo en busca de información concreta del problema.
7. Realizar un benchmarking que tenga como objetivo la búsqueda de competidores referentes.

¿Qué deberás incluir en esta pre-entrega?

● MVP + investigación.
● User personas basadas en las entrevistas.
● Userflow.
● Arquitectura de información - card sorting.
IDEA DEL PROYECTO: MVP USER PERSONAS*

Objetivo del desafío: Objetivo del

- Definir el problema que vas a resolver. desafío:
- Identificar la información que justifica y avala tu idea. Crear y definir las
- Reconocer cuál es tu diferencial. user personas que
- Determinar el procedimiento que voy a seguir para resolver harán uso de sus
el problema. proyectos finales.
Incluir: Definir al menos
1. Problema: ¿cuál es? una persona por
a. El/La estudiante debe identificar un problema real perfil, de ser
que lo motive. necesario. Es
b. El problema debe estar correctamente redactado. importante iterar
En su desarrollo debe incluir: las proto-personas,
i. Contexto. teniendo en cuenta
ii. Actores involucrados. lo descubierto
iii. Facilitadores y obstaculizadores. durante las
entrevistas. Ya no
2. Solución (el cómo): desarrollaremos un listado de van a estar basadas
funcionalidades básicas al respecto (MVP). Hacer un en suposiciones,
listado de las funciones principales que debería tener el sino que
proyecto personal para poder cumplir con el concepto del entendiendo qué
MVP. pasa realmente.
3. Objetivo: ¿qué buscamos? Incluir:
El/La estudiante debe definir un objetivo concreto que 1. Tipo de
surja del problema, la hipótesis de la cual parte, y cuál es usuario:
su propuesta de solución. - ¿
E
s
USER PERSONAS

5. Motivaciones y frustraciones:
- ¿Qué motivaciones relacionadas con el proyecto tiene el usuario?
- ¿Qué frustraciones actuales tiene el usuario?
- El/La estudiante debe detallar por lo menos 3 motivaciones y 3 frustraciones.
6. Habilidades técnicas:
- Nuevas tecnologías, internet, software, dispositivos móviles.
- Se sugiere usar una escala del 1 al 5, donde 1 es nada y 5 es mucho.
7. Datos personales:
a. Ciudad.
b. Edad.
c. Sexo.
d. Lugar geográfico.
e. Costumbres/intereses.

Complementario: se puede complementar el user persona con los siguientes ítems:

1. Habilidades.
2. Patrones de comportamiento.
3. Actitudes.
4. Cómo piensa.
USERFLOW ARQUITECTURA DE
INFORMACIÓN
Formato: incorporar los enlaces a Whimsical. Formato:
Objetivo del desafío: crear el Userflow del producto que elegiste, desde el incorporar los
inicio hasta la representación principal o main feature. enlaces a
Incluir:
Whimsical.
● User flow: piensa muy bien cada acción que el usuario deba
Objetivo del
hacer, hasta llegar a la solución principal que ofreces en tu
producto. desafío: realizar la
● El uso correcto de los tres modelos de cajas: actividad de
- Decisión: dos caminos posibles. cardsorting, y
- Interacción: relación con otra app, o introducción de dato por confeccionar la
parte del usuario. arquitectura de
- Pantalla: instancias del trayecto del usuario. Desde la acción o información de la
paso inicial, hasta la acción principal que puede recorrer para app a realizar.
obtener la solución que ofrece tu producto o servicio. 1. A partir de
- Inicio/fin: instancia donde inicia o finaliza el flujo o proceso.
la
- Marcar el comienzo del recorrido: usar la palabra “inicio” o
“fin” para marcar los recorridos.
actividad
- Marcar, en los recorridos, qué user persona deberá llevar de card
adelante esa tarea (esto se puede reforzar dejando todo el sorting,
userflow en gris, y sólo marcando el que corresponde a cada definir
uno de los usuarios). cómo se
- Usar las herramientas Whimsical. van a
- El gráfico debe ser claro y ordenado. organizar
- Las flechas deben mantenerse rectas e ir hacia adelante. los
contenidos
. Las
categorías,
en
EJEMPLO DE PRESENTACIÓN
Objetivo: volcar en una presentación el detalle de los desafíos
anteriores. No deberás colocar toda la información, sino lo más
relevante, o aquello que fue solicitado a modificar por tu tutor/a.
 ¿UN TIP?
Para armar el userflow, piensa muy bien cada acción que el usuario
debe hacer, hasta llegar a la solución principal que ofreces en tu
producto.
SOBRE EL PROYECTO
MVP
INVESTIGACIÓN DE ESCRITORIO
USER PERSONAS

HUÉSP ANFITRIÓ
ED N
USERFLOW
ARQUITECTURA DE INFORMACIÓN
CARDSORTING
Y AHORA, ¿DUDAS SOBRE LA
ENTREGA?
 ¿QUERÉS SABER MÁS? TE
DEJAMOS MATERIAL AMPLIADO
DE LA CLASE 7
 ● 80 Herramientas para construir tus ideas | DesignPedia

Los libros los encontrarás en nuestro repositorio.

¿PREGUNT
AS?
¡MUCHAS Resumen de lo visto en clase hoy:
- Armar un wireframe a mano del proyecto. En web

GRACIAS! -
comenzar desde mobile (Mobile First).
Introducirnos en el concepto de prototipado dentro
del proceso de diseño centrado en el usuario
(diseño).
- Fortalecer las capacidades en ideación y
creatividad.
OPINA Y VALORA ESTA
CLASE