FUNDAMENTOS DE UX DESING

Cinco Principios sobre dise�o de interaccion

1.- Consistenacia
Respeto por las convensiones ya establecidas, el conocimiento y costrumbre
del usuario
La forma de interactuar con iOS no es la misma que con Android, asi
como de Windows, Linux y MacOS

Respetar la relacion entre aspecto, posicion y comportamiento

Cual es el icono asociado al boton de Play en un video
Donde suele estar la seccion de comentarios en un Blog
Que crees que pasaria si hacemos click al icono de la papelera

Emplear elementos diferenciadores para ayudar al usuario a que aprender

nuevas metodologias
Las diferencias son las que captan la atencion
Animaciones, efectos, mensajes, etc.

La no-consistencia tambien es parte de un sistema amigable con el usuario

Los objetos que se van a comportar de manera distinta tienen que parecer
distintos

Se trata de ayudar al usuario en la tarea que quiere realizar, en su objetivo

No obligarlo a aparender nuevos modelos y patrones sino es estrictamente
necesarios
Hay que aprovechar lo que ya el conoce y esta familiarizado, haciendo
consistente nuestro producto

No debemos sorprenderlo con cambios o comportamientos que no espera que

ocurran

"Debemos se�alizar el camino a seguir"

2.- Perceptibilidad y previsibilidad

Perceptibilidad
Se trate de hacer perceptibles al usuario los componentes de la
interfaz
Si el usuario no percibe que se puede interactuar, lo mas habitual es
que no lo haga
El descubrimiento de interacciones no tiene que ir ligado a la
casualidad o precesido siempre de un cambio

No se debe ocultar informacion importante o la posibilidad de

interactuar
La diferencia en la apariencia es lo que comunmente se emplea para
sugerir la posibilidad de interactuar

Como dise�adores y profesionales debemos conocer todas las

posibilidades relacionadas a la accesibilidad
Es decir, usuarios que interactuan mediante lectores y voz, interfaces
tactiles, etc.

Previsibilidad
Un buen dise�o de interaccion aporta suficiente informacion al usuario
antes de que realice la accion
Donde podemos interactuar, que puede hacerse, que va pasar despues
Cuando el usuario sabe que puede hacer y que va pasar, facilitamos que
realice correctamente su objetivo

Sino no es previsible:
Obligamos al comportamiento de prueba-error
Aparicion de procesos inconsistentes e indeseados
Puede provocar frustracion y por lo tanto abandono

Salvo que se trate de:

Las intereacciones de una App o una web estan mas
orientadas a la consecuncion de una tarea y por lo tanto han de ser reconocibles
La sorpresa o la falta de "pistas" puede ser interesante en
actividades ludicas o cuando queremos ocultar deliberadamente algo usuario y
queremos que lo descubra por accidente

3.- Facilidad de aprendizaje

Lo ideal seria que no hubiese periodo de aprendizaje
El usuario deberia enfrentarse al sistema y automaticamente saber usarlo

"Eso nunca va pasar"

Las intereacciones tienen que ser faciles de aprender y recordar

El concepto "intuitivo" va asociado a un proceso que se aprende rapidamente y
casi de forma natural
Hasta los sistemas mas sencillos tienen un proceso de aprendizaje

Actualmente en muchas aplicaciones se incorporan asistentes en su primera

ejecucion
Un asistente o un "wizard" mejora la experiencia frente a usuarios novatos y
disminuye el posible grado de frustracion ante algo nuevo
Un asistente tambien ayudar� a guian al usuarios el camino mas habitual para
realizar el objetivo principal

En otras ocasiones, no hay asistente pero se introduce al usuario de forma

escalonada y paso a paso
A la hora de empezar a usar una app es importante emplear los "estados
vacios" para facilitar el aprendizaje

"Transferencia de habilidades", debemos aprovechar los conocmientos que ya

tenemos en otros entornos
Esto se hace generalmente empleando patrones de dise�o reconocibles que
hacen la transferencia de habilidades y aprendizaje algo mucho mas sencillo

Esto tambien se hace imitando visualmente entornos o sistemas que ya

conocemos
Skeuomorfismo digital: imitar el aspecto de algo "real" en el mundo digial
para aprovechar el conocimiento que ya tenemos

4.- Simplicidad (KISS - Keep It Simple Stupid)

"Menos es mas"

Debemos mostrar solo aquellos elementos que de verdad aportan

significativamente algo y que tenga una funcion
Debemos mantener a raya lo irrelevante, piense en el usuario y en el contexto
de momento

No abrumes al usuarios con demasiadas opciones aunque ellas sean interesantes

Revisa, agrupa, busca la productividad del usuario, no del sistema

Lo que debe prevalecer es la funcionalidad y el usuario

 Un dise�o simpre no tiene por que dejar de ser complejo
Se pueden ofrecer muchas opciones si asi es necesarios

A menudo se confunde la simplicidad visual con al funcional

Flat Desing
Propone interfaces simples y minimalistas
Se delega mucho mas el peso a una correcta agrupacion de
contenidos y estructura interactiva

5.- Feedback
Informar al usuario de donde est�, que pasa o que va a pasar
Debe complementar la experiencia del usuario, no complicarla
Cada interaccion debe producir un determinado feedback o reaccion entendible

Debemos diferenciar el feedback entre descuidos o elecciones incorrectas y

errores
El usuario debe tener la posibilidad de deshacer su accion en caso de hacerla
por error
Cuando la interaccion es importante debe ser verificada por el usuario

"Habla con el usuario, pero no seas pesado"

Muestra el feedback justo y necesario

Conciso y explicativo
Permite facilmente al usuario enmendar su error

Un sistema basado en principios

El sistema

Interaccion

PERCIBIR
==> PREDECIR ==> FEEDBACK

+
+ |
|
| +

Observacion y Entendemos

practica que ha pasado

CONSINTECIA

APRENDIZAJE <==
+
|
|
+

Patrones de
Transferencia de
 dise�o e interaccion
conocimiento

+
|
|
+

APPS / HERRAMIENTAS

Particularidades del sistema movil

Como se sujeta el dispositivo por parte del usuario
Aprovechar la tecnologia actual
Condiciones de luz, entorno, se va usar en la calle, corriendo

"Ley del pulgar"

"El contexto lo es todo"
"Dise�o centrado en el usuario"

El dise�o movil es mas sencible al entorno del usuario y de ello depende el

exito o fracaso
El uso de bocetos y prototipos ayudar� a detectar posibles fallos o encontrar
nuevas ideas para dar una mejor solucion

Que es un prototipo
Es una simulacion o un modelo que representa el aspecto propuesto del
producto o servicio dise�ado
Sirven para aproximar conceptos de experiencia de usuario, test de interacion
con usuarios, etc
Puede ser tan sencillo como unos simples bocetos o tan complejo como el
producto final casi acabado

Conceptos relacionados
Sketches / Wireframes
Son una representacion que sirve para concretar la agrupacion de
contenidos y arquitectura de informacion, El "esqueleto" sin la capa visual final

Prototipos / Mockups
Propuestas visualmente mas fieles a como queremos que se vea el
producto final y que presentan algun tipo de interaccion

Por norma general un prototipo siempre incorpora elementos de interaccion con

el usuario, los bocetos o wireframes no tienen por que ser asi
Se trata de mostrar conceptos similares a los que aparecerian en el producto
final, con mayor detalle que los wireframes
Un mockup suele ser mas fiel a la estetica final

Los wireframes o bocetos recopilan la idea rapida respecto a estructura o

informacion

Los wireframes o bocetos, pensados como recopilacion de informacion, son

menos costosos de crear
Los prototipos tiene a acercarse mas al producto final y conlleva interacion,
por eso son mas contosos de crear
El mockup presenta una capa visual mas trabajada pero en ocasiones sin
interaccion, por eso no son tan costosos
El prototipado en el proceso de dise�o
"Dise�o centrado en el usuario"

Debemos hacer sistemas intuitivos y usables

Areas del dise�o centrado en el usuario

Proceso de Analisis
Objetivos del proyecto
Tecnologia usada
Presupuesto
Equipo de trabajo, etc

Proceso de Dise�o
Brainstorming, conceptos de dise�o, modelos mentales, trabajo en
grupo para objtener mas concetpos
Prototipos
Testeo y evaluacion

"Tras evaluar todo, es posible que toque Volver a

Empezar..."

Es un proceso con un componente ciclico

Los prototipos ayudaran a ir refinando el dise�o del proyecto y
la experiencia del usuario

"Es dificil tener todo bien planteado desde el

inicio"

Proceso de Evaluacion

Bocetos antes de prototipos

Bocetos
Permiten a todo el mundo participar
Darle forma a las ideas que queremos compartir en el proyecto
El coste es minimo, solo necesitas papel y lapiz
Notas que a veces son inconexas pero que ayudan a ir determinando ideas
y requerimientos

No se trata de calidad, se trata de cantidad

Conlleva un gasto minimo
Se puede obtener feedback rapido

Prototipos y UX
Permiten describir que funciona y que no
Se hacen en una fase previa a la creacion de codigo
El desperdicio de recursos esta mas controlado
Descubrir situaciones y rutas que no nos habiamos planteado antes

Se deben hacer testeos y evaluaciones con los usuarios

Mejor comunicacion con equipos de trabajo

Prototipos eficaces
Si puedes bocetar, puedes prototipar
No tiene por que ser perfecto

Tienes que saber a quien va dirigiddo

 Conoce a tu audiencia
No tiene por que ser perfecto
Definir objetivos antes de mostrar el prototipo

Objetivo de crear un prototipo

Validar ideas y dise�o
Buscar soluciones mas alla de los limites tecnicos
Mejorar la comunicacion
Vender una idea

Tipos de prototipos
Prototipos de baja fidelidad o Lo-Fi
Poco detalles, mas esquematicos, menos astractivos visualmente

Prototipos de baja fidelidad o Hi-Fi

Mayor grado de detalle, mas parecido al producto final, mayor inversion
de recursos

Fidelidad del prototipo

Aspecto, dise�o visual
Color, tipografia, estructura, etc
Cuando es Lo-Fi, se dede resaltar la interactividad
Cuando es Hi-Fi, hablamos de sensaciones, detalles, feedback mas
concreto del aspecto

Interactividad
Como los elementos del prototipo reaccion a las interacciones
Es decir el contando con la interfaz del usuario
Cuando es Lo-Fi, se enfoca mas en el dise�o y el contenido
Cuando es Hi-Fi, una experiencia mas cercana al producto final

Contenido
Cuando es Lo-Fi, imagenes y texto placeholders o marcadores
Cuando es Hi-Fi, CTA (Call of Action), textos y datos reales

Entorno

Testeo y validacion de prototipos

Antes de evaluar el prototipo, decide que quieres obtener de el

Roles
Facilitador
Monitor del test, profesioal de la usabilidad
Encargado de marcar los objetivos de la sesion
Guiar a los usuarios y ayudar a lo largo del proceso

Usuarios
Deben representa la "audiencia" lo mas real posible

Observadores
Participan en segundo plano
Toman notas de una forma un otra, acciones, decisiones y de los
resultados que tengan los usuarios
No deben interactuar con los usuarios
Sino se puede contar con un observador, la mejor opcion es
grabarlo todo
 Sobre el test
Debemos definir el tiempo limite para cada objetivo o seccion del test,
de 30 minutos a una hora es lo habitual
Se deben hacer entrevistas una vez acabe la sesion del test
Es importante tambien hacer pausas

Evaluando el resultado
Analizar los datos obtenidos de manera agil
Agrupar los resultados
Observaciones y contenidos adicionales

Volver a empezar
Redefine el proyecto basandote en los resultados obtenidos, prototipa y
testea de nuevo
El valor de tus prototipos esta en su testeo, haz que valga la pena

Patrones de dise�os moviles

https://pttrns.com
https://mediaqueri.es/
https://land-book.com
https://www.useronboard.com
https://www.thestarterkit.info/