UX y UI

Check-in:
¿Qué conceptos de la
clase anterior recuerdas?
 UX

El diseño UX hace referencia a lo que experimenta el usuario antes,

durante y después de entrar en contacto con un activo digital.

Definimos que la experiencia no depende solamente del diseño, también

tiene que ver con lo que la marca representa y como hace sentir a los
usuarios.
 UX
Aspectos a considerar en relación a la psicología

Percepción

Aprendizaje Memoria

Motivación Emociones

Mentalidad
 Percepción

Estudiamos como los colores y el contexto

afectan la atención de los usuarios mientras se
desplazan su mirada en la pantalla.
 Emociones

No son reacciones automáticas, y por lo tanto hay que

entender como se generan y las implicaciones que
tienen.
 Memoria

Recordemos que las personas tienen limitaciones para

recordar debemos evitar que los viajes del usuario se
vuelvan confusos y difíciles de recordar
 Mentalidad

El usuario tiene creencias, estereotipos, una

interpretación de la sociedad y su contexto. Por esta
razón los usuarios buscan valoraciones de productos y
servicios.
 Motivación

El usuario tiene creencias, estereotipos, una

interpretación de la sociedad y su contexto. Por esta
razón los usuarios buscan valoraciones de productos y
servicios.
 Aprendizaje

Es importante que el usuario pueda tener facilidades

para aprender como funciona nuestro activo digital.
 ¿Por qué estos aspectos son importantes?

Son aspectos determinantes que pueden hacer que una venta se realicé o
se corte durante el proceso.

Porque todas las personas tienen prejuicios, estereotipos, pensamientos,

limitaciones y necesidades que pueden afectar negativamente la interacción
del activo digital con el usuario.

Es por eso que debemos de construir sitios que permitan una navegación
adecuada y la satisfacción de dichas necesidades.
 UI

La interfaz de usuario (UI) es el conjunto de elementos de

la pantalla que permiten al usuario interactuar con un
activo digital
 Elementos importantes del UI

Propósito del Ayuda al

sitio usuario

UI
Mostrar el Diseño gráfico
contenido funcional
 Propósito del sitio

El activo digital debe contar con un propósito claro:

-Es una página informativa, ¿Cómo lo evidenciamos?

-Es un e-commerce, ¿Es funcional? ¿Se entiende el proceso de compra?
-Es una app, ¿cuál es su razón de ser?
 Ayuda al usuario

El sistema de navegación tiene que estar a la vista y debe incluir un

sistema de búsqueda adicional.

La información tiene que ser explicita y clara.

Aquí también es donde tiene un sentido bastante grande tener otros

activos digitales que den soporte a una página web.
 Mostrar contenido

Tiene que ser explicado de forma clara y con elementos de texto que
ayuden en la lectura.

Existen cursos de escritura UX para poder explicar de forma lingüística y

adecuada usando títulos, negritas y otros elementos que fortalezcan al
lenguaje.
 Diseño gráfico funcional

Los elementos gráficos son clave para dirigir al usuario y encontrar lo

que quiere.

Los elementos gráficos no son un adorno.

UX/UI
¿Cómo desarrollamos un proyecto de UX/UI?
 Recapitulando

● UX: Es la experiencia del usuario y UI el desarrollo y el diseño de la interfaz.

● Consideramos que UX es importante no solo en pantallas sino no todo punto de contacto
que el cliente tiene con nosotros.
● Debemos de construir comunicación en activos web para poder llevar un flujo de la
comunicación eficiente y eficaz en función de nuestros objetivos.
 Nos puede pasar que…

Empezamos un proyecto de cero Rediseñamos un proyecto

En ambos casos podemos desarrollar metodologías similares para

generar un proyecto y una investigación adecuada para generar la
propuesta de valor que buscamos conforme al objetivo de negocio.
 Con un proyecto nuevo

Medición y
optimización
Desarrollo e
implementació
Validación de n
mercado
Construcción
de la idea
Desarrollo de
concepto
 Desarrollo de concepto

Debemos de considerar y pensar en el cliente y la necesidad que

¿Cuál es el
problema? debemos de resolver para ellos a través de un proyecto digital.

¿Cuál es la
Pensamos en soluciones potenciales que podemos construir que
solución? permitan al cliente realizar sus transacciones de forma adecuada.

¿Cómo El concepto va a sumar valor a la experiencia del cliente si es fácil,

construimos valor
en el proceso? rápido y eficiente.
 Consideramos que

El desarrollo de las metodologías de proyecto es similar ya sea

uno nuevo o uno en proceso.

La investigación y desarrollo no va a variar en la forma de construir

el proyecto

La construcción de proyectos es válida en función de lo que el

mercado dicte.
¿Cómo validamos un proyecto de UX?
 ¿Por qué es importante investigar?

Porque necesitamos reconocer de forma exhaustiva que la

experiencia del usuario es satisfactoria y que nos permite
generar experiencias sin fricción y que agreguen valor a los
clientes.
 Investigación de escritorio

Cuando el presupuesto es Es una opción económica

bajo o no tenemos mucha
capacidad para realizar una
investigación de campo, se
puede emplear una
investigación de usuarios
principales en base a lo que se
puede observar de la
competencia. Puede ser una opción sesgada
con poca información.
 Prueba de usabilidad

Es una opción que permite

validar en un ambiente
controlado.
Se generan prototipos para
validar que el diseño creado
inicialmente en una pantalla
tiene sentido para el público
para el que esta creado.
Puede llegar a ser costoso el
diseño de múltiples opciones.
 A/B Testing

Al igual que la prueba de

usabilidad es bastante
controlable.
Es una variación en la que en
paralelo se miden dos tipos de
pantalla con una o pocas
diferenciaciones para validar
cual es el más viable.
Puede existir un sesgo por parte
del diseñador.
 Encuestas y cuestionarios en línea

Nos brinda información de los

clientes a primera mano a bajo
costo
Cuando el presupuesto es
limitado se puede hacer una
encuesta tipo pop up, donde
se pueda evaluar los aspectos
principales de la página web
Puede que no se tenga la opinión
de los no usuarios.
 Focus Group

Tiene mayor respaldo estadístico

y es más controlado.
Esta técnica puede
desarrollarse con diferentes
elementos para validar en un
grupo cerrado y validado para
estudiar partes especificas del
activo.
Puede ser difícil encontrar al
target deseado.
 Entrevistas remotas

Al igual que otros métodos es

bastante controlado.

Utilizando herramientas para

video llamadas se hacen
convocatorias para entrevistas
y captar información del target
La tecnología puede ser una
barrera por las limitaciones que
conlleva.
 Analítica

Es información real y a la mano.

Con herramientas como
Google Analytics se puede
hacer un análisis de como
funciona actualmente la
página y que puntos de dolor
pueden existir dentro de la
página
Puede no contarnos todo lo que
necesitamos.
 Analítica

Cosas que podemos medir en la analítica

¿Cuánto tiempo le toma al usuario finalizar una tarea?

¿Dónde hacen clics? (mapas de calor)
¿Qué tan lejos se desplazan en la página?
¿Qué características son las más populares?
¿Qué caminos suele tomar el usuario?
¿Cuándo se van? (Tasa de rebote)
UX – Aspectos
prácticos
 Recapitulando

● Hemos hablado de los conceptos de UX/UI y como es importante tomarlo en cuenta para el
desarrollo de nuestros activos digitales.
● Vimos la importancia de realizar investigaciones de UX para poder generar activos sin
fricciones.
● Sabemos que UX es más que algo gráfico, es un todo que nos ayuda a construir activos
digitales de valor.
UX nos hace diseñar
Parece chiste pero es anécdota
La realidad del UX
Concepto

Investigación

Práctica
Tips UX
Consejos prácticos
 1. La primera impresión es la que cuenta

Las primeras impresiones son importantes para captar usuarios que

llegan por primera vez a la web.

Según investigaciones de la Universidad de Missouri, las personas tardan sólo

2,6 segundos en escanear toda una página web y fijarse en elementos que
resalten como el menú, el logo y las imágenes, entre otros.
 2. Encontrar lo que buscamos

Antes de que un usuario llegue a nuestro sitio hay que definir e identificar
al cliente ideal, optimizar la conversión del sitio web y analizar el
comportamiento del tráfico del website para captar la atención del
usuario.

Entender cómo una persona se comporta cuando navega puede ayudarnos a

resolver problemas que ocurren entre el clic en el enlace de búsqueda y la
llegada a nuestro sitio web
 3. Mejorar el proceso de compra

Para mejorar la UX no sólo es importante que los usuarios conviertan, sino

entender cómo navegan por el sitio web para lograr que hagan lo que nuestro
negocio necesita.

Existen elementos que pueden motivar la conversión final como la velocidad

de carga del sitio web, el desplazamiento y el número de páginas visitadas.
 4. Mejorar velocidad de carga

Según el proveedor de balance de carga y servicios de ciberseguridad Radware,

esperar más de 2 segundos en la carga de una web da como resultado una tasa
de abandono de hasta el 87%.

Los usuarios describen esta experiencia como una de las más

frustrantes.
 5. Hacer Call to Action (CTA) atractivas

Los usuarios están acostumbrados a seguir señales visuales que determinan qué
contenido es importante para ellos. En este sentido, las llamadas a la acción (del
inglés “call to action”) deben ir asociadas a una palabra clara.
Utilizando verbos o palabras como “sí, quiero anotarme/suscribirme”, los
usuarios se ven motivados a llevar dicha acción a cabo.

Los colores de los botones también son importantes. Según varios estudios, diferentes
colores y palabras en el botón de compra pueden hacer variar el ratio de conversión.
 6. Trabajar en diseños responsive

El número de personas que utiliza su celular para navegar en internet crece cada
vez más rápido.

De hecho, no sería extraño que al menos el 25% del tráfico de un sitio web provenga de
dispositivos móviles, por lo que hoy en día es necesario proveer un sitio optimizado, que se
adapte a los diferentes dispositivos y sea fácil de navegar.
 7. Usar imágenes atractivas

Cuando los usuarios entran por primera vez a un sitio, reconocen si a las fotos ya las vieron
antes o no. Por este motivo, usar imágenes de un banco gratuito puede reducir la
confianza de la página.

Las fotografías deben despertar emociones positivas en los visitantes. Por eso, debemos
elegir imágenes donde los usuarios se puedan identificar con los personajes y
transmitan el mensaje que el usuario está buscando para conectar con ellos.
 8. Mantener la coherencia

La coherencia proporcionará una experiencia armoniosa mientras el usuario navega por

nuestro sitio web. Si entre una y otra página hay un cambio de diseño drástico puede ser que
el usuario se encuentre desorientado y confundido, perdiendo así la confianza.
Navegación Lineal
Interfaces de usuario de voz
Lenguaje visual claro
Titulares Grandes
Animación Funcional
 Contar historias a través de videos

El video tiene la oportunidad

de involucrar a los usuarios
desde el principio. Es por eso
que cada vez, vemos más
sitios web que usan video
hero en su página de inicio.
Por ejemplo, Tesla no solo
presenta a los visitantes un
producto, sino que cuentan
una historia sobre el
producto con el uso del video,
lo que ayudará a crear una
experiencia más memorable.
Interfaces conversacionales
UX
Mobile
Mostrar el estado del sistema
Hablar el lenguaje del usuario
Control y Libertad del Usuario
Consistencia y Estándares
Prevenir errores
Aliviar la carga en memoria al usuario
Estética y Minimalismo
Comunicar errores con claridad
Ayuda y Documentación
Consejos UX
 Recapitulando

● Hemos visto el concepto de UX y UI, entendiendo que son metodologías que nos ayudan al desarrollo adecuado de las

pantallas con las que interactúa el cliente.

● Entendemos que el diseño de interfaz y el viaje del usuario no solamente es un aspecto gráfico, involucra todos los

sentidos.

● Los fundamentos de UX nos permiten construir experiencias positivas para las marcas y que nos permiten orientar a los

usuarios a los objetivos que estamos buscando.

 Reciprocidad

Si te doy un regalo y
pruebas mi servicio
es más probable
que recurras
positivamente a lo
que te solicito.
 Validación social

Estamos más
propensos a
participar si otros lo
están haciendo.
 Cadenas de invitación

Si generas links
para invitar a otros a
través de los
usuarios actuales
premiándolos
puedes exponenciar
tu servicio
Dropbox Grow hack
 Confianza

El look and feel de

una página es una
buena forma de
generar confianza y
romper barreras en
el uso de un
servicio.
 Cantidad de opciones

Una adecuada
cantidad de
opciones de compra
puede hacer la
experiencia más
cómoda para el
cliente.
 Invitar a la compra inmediata

Identificar cuanto
producto en stock
para informar a los
clientes que si
desean comprar,
deberán esperar.
 Valoraciones sociales

Permitir que otros

usuarios validen tus
productos es
positivo para la
compra y mejora de
los productos
disponibles.
 Rostros en las web

Los rostros son muy

poderosos para captar la
atención, principalmente si
te ven de frente.
 Paso a paso pequeños

Utilizar paso a paso

pequeños te sirven para
que el usuario piense que
avanza rápidamente.
 Minimizar las decisiones

Tomar decisiones es
difícil. Si dejas que lo
piense va a razonar y a
evitar la compra, y esto
baja las tazas de
conversión.
 Alineación de formularios

Textos alineados
correctamente y con un
sentido de lectura
adecuado son más fáciles
de llenar.
 Alineación de formularios

Generación de resumen
de información también
hace más fácil la
captación del mismo.
 Congruencia en la captación de la información

Generación de resumen
de información también
hace más fácil la
captación del mismo.
Titulares para generar diferenciación
Desarrollar el contenido en una columna
Diferenciar menú por proximidad y jerarquía
Diferenciar los campos que dan error
Background oscuro para Popup Box
Eliminar los bordes innecesarios
Evitar redundancia en las instrucciones
Trabajar en la adecuación de menús
Filtros de búsqueda funcionales
Crear opciones basadas en frecuencia
Entrega la información de valor en una compra
También se puede entregar información de valor a través de
movimientos adicionales
Entregar información de valor en secuencia para saber
cuanto se debe avanzar
Entregar feedback de las actividades que hay que hacer
Muestra que contenidos son obligatorios y opcionales en los
formularios
Usar botones descriptivos
Indicar opciones preferidas por otros clientes
Presenta la información de forma comparativa
Presenta la información de forma comparativa