Universidad tecnológica Nacional

Facultad Regional Buenos Aires

UX – User EXperience
Diseño centrado en las personas

Ing. Pablo Sabatino

Diseño de Sistemas – UTN-FRBA

 User EXperience

∗ No es diseño de interfaz de usuario (solamente).

∗ No es un paso adicional al proceso de desarrollo (Está
integrado a lo largo de todo el ciclo de desarrollo)
∗ No es solo usabilidad.
∗ No es solo un tema de interés para el usuario (son necesidades
que tiene que satisfacer para todos)
∗ Es Multidisciplinario.

Diseño de Sistemas – UTN-FRBA

 User EXperience

Inventé el término porque pensé que

interfaz y usabilidad eran demasiado
limitados. Quise descubrir todos los
aspectos de la experiencia de una
http://es.wikipedia.org/wiki/Donald_Norman
persona con su sistema, incluyendo el
diseño industrial, gráficos, la interfaz, la
interacción física, y el manual.
Don Norman

Diseño de Sistemas – UTN-FRBA

 ¿Qué es User EXperience (UX)?

Es un enfoque de Diseño centrado y orientado a las personas que usarán el producto.

Garantizar la calidad de las soluciones construyendo aplicaciones con una interfaz que sea
amigable, fácil de usar y con un impacto visual y emocional para los usuarios.

Garantizar la calidad de las soluciones construyendo aplicaciones con una interfaz que sea
amigable, fácil de usar y con un impacto visual y emocional para los usuarios.

No está únicamente enfocado en las necesidades del usuario, también toma vital
importancia las necesidades de negocio.

Diseño de Sistemas – UTN-FRBA

 UX y QA – UX como calidad

Decidir quién encontrará los problemas: Si

el usuario final o el equipo.

UX y QA terminan cuando se termina el

tiempo o el presupuesto

Diseño de Sistemas – UTN-FRBA

 ¿Qué valor le aporta este enfoque al negocio?

Es el proceso de aumentar la satisfacción y lealtad del cliente mediante la mejora

de la usabilidad, facilidad de uso y el placer proporcionado en la interacción entre el
cliente y el producto.

Aseguramos que el proyecto incluya lo que los usuarios desean (calidad) y al mismo
tiempo lo que genera rentabilidad o beneficio para el negocio.

Diseño de Sistemas – UTN-FRBA

 Usabilidad

La usabilidad de una interfaz es una medida

de la efectividad, eficiencia y satisfacción
con la cual determinados usuarios pueden
alcanzar determinados objetivos en un
entorno particular con dicha interfaz (ISO
9241, Requerimientos ergonómicos para
trabajo de oficina con terminales visuales,
Parte 11-1997)

Diseño de Sistemas – UTN-FRBA

 Proceso UX de UX Mastery

Diseño de Sistemas – UTN-FRBA

 User Experience - Patrones de Conducta

La gente es ansiosa…

Diseño de Sistemas – UTN-FRBA

 User Experience - Patrones de Conducta

La gente está apurada…

Diseño de Sistemas – UTN-FRBA

 User Experience - Patrones de Conducta

La gente a veces comete errores…

Diseño de Sistemas – UTN-FRBA

 User Experience - Patrones de Conducta

Prevenir al usuario…

Borrar
Borrar

Diseño de Sistemas – UTN-FRBA

 User Experience - Patrones de Conducta

Guiar al usuario…

Diseño de Sistemas – UTN-FRBA

 User Experience - Patrones de Conducta

Mostrar el final…

Formularios
simples que
no aburran…

Diseño de Sistemas – UTN-FRBA

 User Experience - Patrones de Conducta

Resaltar lo importante…

Diseño de Sistemas – UTN-FRBA

 Sketching – Dibujar productos

El sketching no se trata de realizar un dibujo o trazo bonito o artístico, sino

de transmitir ideas de forma rápida y sencilla, de forma que cualquier persona con
sólo visualizar la imagen pueda comprender y asumir su contenido.

El sketching nos aporta velocidad a la hora de plasmar ideas de forma rápida, una
inmediatez generalmente difícil de obtener con un software, más lento de ejecución
y que hace que ideas frescas puedan ser olvidadas o transformadas por nuestra
mente.

Permite de una forma rápida, sencilla y efectiva, comunicar flujos de navegación e

interacción. Las decisiones de diseño se toman de una forma más eficaz y sobre todo
mucho más útil.
Diseño de Sistemas – UTN-FRBA
 Sketching – Ventajas

Transmite ideas de forma rápida y sencilla

Accesible para todos/as (bajo costo)
Comprensible por todos
De rápido desarrollo
De inmediata transmisión

Herramienta de comunicación
Comprensible por equipos multidisciplinares
Equipos en remoto
Comunicación con el cliente Nos ayuda en las pruebas
Comunicación con el equipo
Probar interfaces y procesos
Comparar interfaces y procesos
Con los usuarios
Diseño de Sistemas – UTN-FRBA
 Sketching – Ejemplo

Diseño de Sistemas – UTN-FRBA

 Desarrollo de Concepto – WireFrame
(plano de pantalla - que no de navegación)

Se les conoce como Prototipos de Baja fidelidad, StoryBoard, Schematics, Blueprints o Page
Architecture.

Es un dibujo esquemático, es decir, una representación visual muy sencilla del “esqueleto” o
estructura de una página web (o aplicación web), se lo utiliza como un primer paso que
sentará las bases del resto del diseño. El objetivo es definir sencillos bloques de contenido y su
posición, incluyendo navegación, elementos de la interfaz, bloques de contenido y analizar
cómo éstos funcionarán entre sí.

Son una herramienta de comunicación y discusión entre arquitectos de información,

programadores, diseñadores y clientes.

También se pueden utilizar para pruebas de usuarios.

Diseño de Sistemas – UTN-FRBA
 WireFrame - Ejemplo

Se caracterizan por no tener ningún detalle

tipográfico, color, elemento gráfico o
estético, se realizan con trazos simples, cajas
y texto, todo como a mano alzada, ya que el
objetivo es centrarse en la funcionalidad, la
experiencia de usuario y la prioridad de los
contenidos del proyecto.
El cliente (y el equipo) puede tener entonces
una muy rápida idea de qué elementos y
contenidos se mostrarán, con la ventaja de
no distraer la atención en temas que
deberían preocuparnos más adelante como
colores, logotipos, texturas y tipografías. En
definitiva nos permite evaluar y separar
claramente lo que realmente aporta valor de
una idea al proyecto de la que no.
Diseño de Sistemas – UTN-FRBA
 WireFrame - Ejemplo

Por su simpleza, acelera mucho la producción de

múltiples versiones para el proyecto, o la
aplicación de cambios o nuevas ideas surgidas de
anteriores esquemas, lo que ayudará al cliente a
evaluar mejor junto al equipo cuál será la mejor
alternativa al momento de diseñar su producto.
Los wireframes se realizan usando herra-mientas
simples, desde una hoja de papel y lápiz a
software

Diseño de Sistemas – UTN-FRBA

 WireFrame– Ventajas

∗ Simular la experiencia completa de los futuros usuarios y generar más ideas.

∗ Incluir soluciones antes de que el código sea definitivo.
∗ Comunicar las ideas al resto de implicados en el proyecto.
∗ Definir el alcance del proyecto
∗ Podemos centrarnos en el desarrollo de una única funcionalidad de la página y darle
forma de manera aislada.
∗ Podemos desechar ideas ya que no se le ha dedicado demasiado tiempo.
∗ Nos facilita el poder contrastar ideas y soluciones con el cliente antes de poner en
marcha el proceso de diseño visual.
∗ Se pueden crear casos de uso que permitan simular el comportamiento de un
usuario real.
∗ Nos va a permitir explorar interacciones relevantes para nuestros problemas de
diseño.

Diseño de Sistemas – UTN-FRBA

 Herramientas para diseñar wireframes

Omnigraffle (MAC)
http://www.omnigroup.com/products/omnigraffle/

SimpleDiagrams (WIN, MAC, LINUX)

http://www.simplediagrams.com/

MockupScreens (WIN y MAC)

http://mockupscreens.com

Pencil Project (Add-on para Firefox, WIN, MAC y Linux)

http://pencil.evolus.vn/en-US/Home.aspx

Mockflow (Online, WIN y MAC)

http://www.mockflow.com/
Diseño de Sistemas – UTN-FRBA
 Lecturas Recomendadas

Diseño de Sistemas – UTN-FRBA

 UX…Requisito laboral…

Analista de usabilidad

Android Developer Ssr

Desarrollador Front End

Diseño de Sistemas – UTN-FRBA

 Clave para iniciarse en UX

Conocer y entender a su usuario

User Research (salir del escritorio)

Diseño de Sistemas – UTN-FRBA

 UX – User EXperience

Lo más importante de todo a la hora de pensar en

UX es:

SENTIDO COMÚN

Diseño de Sistemas – UTN-FRBA