DISEÑO CENTRADO

EN EL USUARIO
Diseño UX, diseño UI,
diseño de interacción y más
CARGANDO TEÓRICA
CARGANDO TEÓRICA

POR FAVOR, ESPERE

CARGANDO TEÓRICA

30% COMPLETADO
POR FAVOR, ESPERE
CARGANDO TEÓRICA

60% COMPLETADO
POR FAVOR, ESPERE
CARGANDO TEÓRICA

90% COMPLETADO
POR FAVOR, ESPERE
¡fALTAN 4 SEGUNDOS!
heurísticas
heurísticas

Las heurísticas son lineamientos para reducir las frustraciones

que un usuario puede tener al utilizar un sistema, producto
o servicio.

Son sólo una guía, no deben ser tomadas como mandamientos.

heurísticas

1. Visibilidad del estado del sistema.

heurísticas

2. Utilizar el lenguaje de los usuarios.

heurísticas

5. Prevención de errores.
heurísticas

5. Prevención de errores.
heurísticas

6. Reducir la carga
de la memoria del usuario.
heurísticas

9. Ayudar a los usuarios a reconocer,

diagnosticar y recuperarse de errores.
diseño centrado
en el usuario
dcu
diseño centrado en el usuario (dcu)

diseño diseño
CENTRADO CENTRADO
EN EL EN EL
DISEÑADOR USUARIO
diseño centrado en el usuario (dcu)

Es un continuo esfuerzo por aprender sobre los usuarios

y sus necesidades, respuestas y comportamientos.
Es diseñar para ellos, consiguiendo la mayor satisfacción
y la mejor experiencia de uso posible.
diseño centrado en el usuario (dcu)

Experiencia
diseño de usuario
EXPERIENCIA
DE usuario
UX
experiencia de usuario (ux)

Percepción positiva o negativa que un usuario tiene al

momento de interactuar con un sistema, producto o servicio.
experiencia de usuario (ux)

Investigación de usuarios
Estrategia de contenidos
Arquitectura de la información
Navegabilidad
Diseño de interfaz
Usabilidad
Testeos con usuarios
Diseño visual
Redacción
Marketing
Accesibilidad
Diseño de interacción
experiencia de usuario (ux)

Investigación de usuarios
Estrategia de contenidos
Arquitectura de la información
Navegabilidad
Diseño de interfaz
Usabilidad
Testeos con usuarios
Diseño visual
Redacción
Marketing
Accesibilidad
Diseño de interacción
usabilidad
usabilidad
usabilidad

Que algo haga foco exclusivamente

en la funcionalidad, no lo hace
necesariamente deseable.
usabilidad

“Experiencia de usuario refiere a la manera en que un producto

o servicio se comporta y es usado en el mundo real. Una experiencia
de usuario positiva es aquella en la que los objetivos del usuario
y los de la organización que creó el producto se encuentran.
La usabilidad es uno de los atributos que hace una experiencia de
usuario positiva, pero por sí sola no genera una buena experiencia.”

Jesse James Garrett

Co-founder of Adaptive Path
PROTOTIPADO
prototipado

Muchas veces en el desarrollo de productos se cae

en el error de tratar como iguales los conceptos
de mockups, wireframes, sketchs, etc., o de usarlos
como sinónimos aunque realmente no lo sean.

Suenan igual y a simple vista parecen lo mismo,

pero hay importantes diferencias basadas en las
distintas etapas en que estos deben aplicarse
para el desarrollo de un proyecto.
prototipado

¿Qué es?
Un prototipo es una herramienta que le permite a los
diseñadores explorar, comunicar y evaluar sus ideas.

No sirve para probar una solución,

sino para descubrir problemas.
prototipado

Un prototipo debe incluir:

» Contenido:
qué información estará en cada pantalla.
» Elementos de la pantalla:
cabeceras, enlaces, listas, imágenes, formularios, etc.
» Layout/esquema de pantalla:
ubicación, agrupación y jerarquías de los elementos.
» Comportamiento:
indicaciones que comunican cómo será el comportamiento
funcional cuando un elemento se active (enlaces, ventanas,
cuadros desplegables, etc.)
prototipado

Fidelidad de un prototipo
¿Cuán cerca está de la versión final?

» Fidelidad visual
(boceto diseño con estilo)

» Fidelidad funcional
(estático interactivo)

» Fidelidad de contenido
(”lorem ipsum” texto real)
prototipado

Sketch
Boceto o bosquejo estático de un diseño

Dibujo rápido a modo de guía

que suele no ahondar en muchos
detalles, pero reproduce un
concepto o idea general de un
proyecto de una manera muy
sencilla.

Se realiza a mano alzada con

lápiz y borrador para poder
corregir o agregar ideas.
Se utiliza como punto de partida.
prototipado

Wireframe
Representación estática en baja calidad de un diseño

En esta representación se define:

» ¿Qué? (principales grupos de contenido)

» ¿Dónde? (estructura de la información)
» ¿Cómo? (visualización básica del
usuario e interacción de la interfaz)

Los wireframes no son solo un

conjunto de cuadros grises, sino
la columna vertebral del diseño,
donde cada parte importante del
producto tendrá su representación.
prototipado

Mockup
Representación estática en calidad media o alta

Maqueta o modelo a escala o tamaño

real de un diseño, utilizado para la
evaluación del mismo.

» Representa la estructura de la
información, visualiza el contenido
y demuestra las funcionalidades
básicas.

» Permite revisar la parte visual real

del proyecto.
prototipado

Prototipo final
Representación navegable del producto final

Simula la interacción de la interfaz

de usuario y debe permitir:

» Experimentar e interactuar con la

interfaz y el contenido del proyecto.

» Probar las principales interacciones

de una manera similar al producto final.

» Puede ser .html, .ppt, animación

o cualquier otro formato navegable.
workflow
o proceso de trabajo
workflow

METODOLOGÍA DE DISEÑO TRADICIONAL

Proceso lineal

ANALIZAR DISEÑAR publicar

Diseñador Diseñador
workflow

METODOLOGÍA DE DISEÑO centrado en el usuario

Proceso iterativo (cíclico)
Diseñador
DISEÑAR

Diseñador ANALIZAR PUBLICAR

VALIDAR Diseñador
+ Usuario
workflow

METODOLOGÍA DE DISEÑO centrado en el usuario

Proceso iterativo (cíclico)

ANALIZAR
Visión de metas, objetivos
Análisis del usuario
Análisis de la tarea
Análisis de la arquitectura de información
Análisis del flujo de trabajo
workflow

METODOLOGÍA DE DISEÑO centrado en el usuario

Proceso iterativo (cíclico)

diseñar
Diseño de navegación
Storyboards y wireframes
Prototipos de baja fidelidad
Prototipos de fidelidad media
Prototipos funcionales (alta fidelidad)
workflow

METODOLOGÍA DE DISEÑO centrado en el usuario

Proceso iterativo (cíclico)

validar
Evaluaciones heurísticas
Pruebas tempranas de usabilidad
Pruebas de usabilidad alta fidelidad
Autores: DG Mariana Fiorillo, DG Alvaro Ghisolfo, DG Adrián Mauas,
DG Aníbal Guebel y Milagros Pierini

Elaborado para:

Diseño Gráfico por Computación

Cátedra: DG Martín Díaz Cortez
Carreras: DG (Diseño Gráfico) y DIyS (Diseño de Imagen y Sonido)

FADU - Facultad de Arquitectura, Diseño y Urbanismo

UBA - Universidad de Buenos Aires
Año 2018