Clase-6-Diseno-UX-y-contenido

Vista previa del material en texto

DISEÑO UX Y CONTENIDO
Clase 06. E-COMMERCE
● Incorporar técnicas y herramientas 
útiles para no diseñadores.
● Comprender cómo estructurar el 
contenido.
● Entender la importancia de la 
imágenes en E-Commerce.
OBJETIVOS DE LA CLASE
Search Engine Optimization (SEO): es la 
optimización de nuestro sitio, para que tenga 
una mejor posición en los resultados de los 
motores de búsqueda.
Metatags: los metatags son elementos de 
HTML de la página web. Recordemos que 
HTML es el lenguaje básico para desarrollo de 
sitios web.
Meta Alt: son etiquetas para las imágenes. 
Las imágenes también reaccionan a una 
búsqueda.
GLOSARIO:
Clase 5
Link building: es la cantidad de links externos 
que apuntan a tu página web.
Google Search Console: es un servicio 
gratuito de Google, que te ayuda a supervisar, 
mantener y solucionar los problemas de 
aparición de tu sitio web en los resultados de 
búsqueda de Google.
MAPA DE CONCEPTOS CLASE 6
Diseño UX
Contenido web
Google Optimize
Imágenes
Contenido de texto
Caso real
Terminología en 
Diseño Web
Heurísticas de 
usabilidad
UX
Mobile
UX Research Opinología vs. 
sociología
Del research al 
diseño final
TERMINOLOGÍA EN DISEÑO WEB
UI
UsabilityUX Accessibility
IxD A/B Test
DISEÑO UX 
UX / USABILITY
UX
Es lo que una 
persona percibe 
al interactuar con 
un producto o 
servicio.
User experience Usabilidad
Usability
Es la eficacia, 
eficiencia con la 
una web permite 
alcanzar 
objetivos.
UI / IxD
UI
Es la interfaz de 
usuario, es el look 
& feel de nuestro 
sitio.
User interface Interaction Design
IxD
Es la forma en la que se 
va a interactuar con la 
interfaz. Es el contacto 
entre el usuario y la 
interfaz.
ACCESSIBILITY
Permite a los todos los usuarios (con o sin discapacidades) 
comprender, usar y disfrutar de la web.
Nuestra web debe ser accesible para generar empatía e 
instalar una mentalidad de diseño inclusivo.
A/B TESTING
Son experimentos con dos variantes en una página web, para probar 
cuál es la que posee mayor beneficio, menor abandono, y mejora la 
conversión.
En la web hay varias herramientas que te ayudan a configurar, 
entender y medir cuál es la mejor opción de las planteadas.
Hoy vamos a ver Google Optimize.
HEURÍSTICAS DE USABILIDAD
Son las buenas prácticas de usabilidad 
que se recomienda aplicar a los sitios 
web, para que la navegación sea más 
sencilla, así como el uso de sus 
herramientas o funcionalidades.
Un tiempo de carga 
optimizado permite que el 
usuario pueda usar 
nuestra web. 
Si la carga es lenta, la 
tasa de abandono es 
mayor, lo que provoca 
que menos usuarios usen 
tu web.
TIEMPO DE CARGA
Si menciono un elemento 
de mi web de una manera, 
tengo que mantener la 
coherencia en todo el flujo 
del sitio.
No usar un mismo 
elemento para dos 
funcionalidades distintas.
CONSISTENCIA Y RECONOCIMIENTO
ACCESSIBILITY
Esto ayuda a los usuarios con deficiencias motoras, limitaciones cognitivas o 
discapacidades visuales, evitando pulsaciones innecesarias para visitar un contenido 
que no es relevante para ellos.
Evita los enlaces que dicen 'Haga clic aquí' o sin contenido, como 'Más detalles', 
aplicado a una lista de enlaces.
Texto alternativo para imágenes: este texto lo leen los usuarios del lector de 
pantalla. Las imágenes que no transmiten ningún contenido y se usan con 
fines decorativos no deben ser anunciadas por el lector de pantalla.
Esto ayuda a las personas que tienen dificultades para percibir el contenido 
visual. La tecnología de asistencia puede leer el texto en voz alta, presentarlo 
visualmente o convertirlo a braille.
ACCESSIBILITY
La idea que queremos transmitir, debe ser clara y corta. Muchas veces nos 
apoyamos en una foto para que el mensaje sea más fácil de entender.
MENSAJES CLAROS
En lo sitios web, los usuarios 
relacionan iconografía con 
determinadas acciones, o esperan 
poder encontrar determinada 
información. Si no se utilizan los 
iconos adecuados, podemos causar 
una mala experiencia en la 
navegación.
ICONOGRAFÍA REPRESENTATIVA
Ayuda a los usuarios a entender el flujo de nuestro sitio, para que sepan en 
dónde se encuentran y qué falta para terminar.
VISIBILIDAD DE LOS ESTADOS
Ayuda al usuario a entender cómo subsanar o prevenir el error. Los 
mensajes de ayuda deben ser explicativos y cortos.
PREVENCIÓN DE ERRORES
Los diseños deben trasmitir lo que queremos comunicar, desde las 
acciones hasta nuestro objetivo principal. 
DISEÑO SIMPLE Y CLARO
UX (USER EXPERIENCE)
User Experience es lo que una persona percibe cuando 
interactúa con un producto o servicio.
Logramos una buena User Experience al enfocarnos en 
diseñar productos útiles, usables y deseables, lo cual 
influye en que el usuario se sienta encantado, retorne y 
recomiende.
EXPERIENCIA DE USUARIO
Es importante conocer las necesidades de los usuarios y alinearlos a los 
objetivos del negocio tomando también en cuenta las limitaciones técnicas.
EXPERIENCIA DE USUARIO
¿QUÉ NOS DICE NUESTRA EXPERIENCIA DE USO 
SOBRE ESTO?
GENERANDO LA MISMA EXPERIENCIA
La UI es una herramienta que complementa la buena experiencia del 
usuario. La interacción con los elementos de la web tienen que indicarle 
al usuario que algo está sucediendo.
UX - UI
UI USABILIDAD UX
Parte de la experiencia, es generar la percepción de seguridad: mostrar al 
usuario que está navegando en un sitio seguro. 
Cuando el usuario tenga que cargar su tarjeta de crédito, o dar datos 
personales, hay que transmitir seguridad y confianza. 
SEGURIDAD
La navegación y el fácil acceso en la página son fundamentales para que el 
usuario encuentre un producto o un servicio. Esto se resuelve optimizando 
la arquitectura de información. El buscador resuelve los problemas de 
navegación. 
FACILIDAD DE BÚSQUEDA
UX RESEARCH 
La investigación de UX alude a una serie de técnicas y herramientas 
que se realiza para llegar a conclusiones, determinar hechos, y 
descubrir problemas, revelando así información valiosa que puede 
introducirse en el proceso de diseño.
UX RESEARCH 
Si queremos conocer la experiencia de nuestros clientes, 
una de las mejores actividades es simplemente hablar con 
ellos y preguntarles qué aprecian, qué les molesta y cómo 
mejorar.
Idealmente, debemos preparar una serie de preguntas 
idénticas para todos los entrevistados, para después sacar 
conclusiones en base a sus distintas experiencias sobre 
estos puntos.
ENTREVISTAS
Son pruebas con usuarios en tiempo real, donde se los observa para entender 
cómo interactúan con el diseño, y así encontrar errores o problemas de 
usabilidad.
Son sesiones grabadas donde se le indica al usuario un objetivo. Luego, 
deberá navegar, y se observará la dificultad o facilidad que se le va 
presentando dentro del funnel de conversión. 
TEST DE USUARIOS
Durante todo el proceso de UX, debemos pensar constantemente en la 
experiencia que quieren nuestros clientes. 
Para esto, lo que se desarrolla durante el inicio son ‘perfiles’, que nos deben 
mostrar casos típicos de nuestros distintos tipos de clientes.
Debemos aclarar edades, objetivos y todo los que nos permita identificar un 
grupo específico de clientes.
PERFILES DE PERSONAS
Es una técnica para categorizar el contenido, centrada en el 
usuario. El objetivo es lograr una organización concreta de 
las categorías del sitio, o establecer una jerarquía en la 
información.
Tener una estructura organizada por donde va a navegar el 
usuario, facilita que pueda encontrar el producto o servicio 
que satisface su necesidad.
CARD SORTING
Para diseñar nuestras pantallas principales, primero 
armamos un wireframe de estas.
Cuando hablamos de wireframes nos referimos a un 
dibujo que debe abstraerse del diseño visual de nuestra 
marca, para poner el foco en la posición y jerarquía de 
los elementos.
WIREFRAMES
Podemos analizar el comportamientoen nuestros sitios
mediante mapas de calor, los que nos permiten ver 
dónde los usuarios clickean, y así descubrir qué 
elementos no se están destacando, o si la atención se 
va a otros lugares de la página.
MAPAS DE CALOR
Cuando no hay procesos 
organizados de UX, y los 
procesos existentes no 
pasan por un experto de 
usabilidad, es ahí donde 
aparece entre las sombras 
ese diseñador escondido 
que todos llevamos dentro.
UN EQUIPO SIN UN INVESTIGADOR
OPINOLOGÍA VS. 
SOCIOLOGÍA
Un experto de UX 
recomienda seguir ciertas 
heurísticas que serán el 
lineamiento en el diseño. Sin 
embargo, es recomendable 
analizar el usuario para 
armar una interfaz que 
pueda satisfacer la 
navegación.
UN EQUIPO SIN UN INVESTIGADOR
Identificar el 
problema.
PASOS DEL ANÁLISIS
1 2 3 4 5 6 7
Definir el plan 
para 
solucionar el 
problema.
Probar la 
solución.
Analizar las 
pruebas. Ajustar.
Subir a 
producción .
Analizar el 
comportamie
nto de los 
usuarios.
DEL RESEARCH AL DISEÑO FINAL
● Un investigador UX siempre tiene que ser curioso, inconforme y estar en 
búsqueda de una mejor experiencia. 
● Es un perfil que tiene que estar a la vanguardia de las últimas novedades. 
● Ponerse en la piel de los usuarios para lograr armar productos, servicios o 
funcionalidades que logren enamorar a los usuarios de la marca.
● Esta investigación, gracias a las técnicas y herramientas, sirve para 
retroalimentar a la marca, generando una mejor experiencia al usuario que 
nos navega.
RETROALIMENTACIÓN
Wireframe Diseño A
La experiencia debe ser 
similar o igual en 
diferentes dispositivos.
No podemos ofrecer más 
funcionalidades en una 
resolución que en otra, 
con la excusa de que no 
hay espacio.
DISEÑO RESPONSIVEMOBILE
MOBILE FIRST
Cuando un sitio web se desarrolla para desktop, la versión mobile necesita 
muchas adecuaciones en los elementos para que todo funcione en el 
espacio del celular. En algunos casos, muchos componentes se eliminan 
para que el sitio web quede perfecto en el ambiente mobile.
El concepto de mobile first consiste en partir del diseño para un dispositivo 
móvil, que luego se amplía para versiones de escritorio.
Beneficios de diseñar con este método:
➔ Jerarquizar la información.
➔ Jerarquizar las funcionalidades.
➔ Remarcar el objetivo principal de cada página.
MOBILE FIRST
EYE TRACKING
Es una técnica que mide cómo los 
usuarios miran los sitios web, para
comprender cómo interactúan los 
ojos humanos con el diseño de la 
página. 
Es un estudio que realizó Jakob 
Nielsen en 2008, donde detectó que 
de todo el contenido del sitio, sólo 
se lee el 20%.
CONTENIDO DE TEXTOCONTENIDO 
WEB
DISTRACCIONES
Steve Krug, autor del libro “Don’t make 
me think”, afirma que los usuarios no 
leen, escanean. 
Los usuarios no leen palabra por 
palabra, sino que escanean el 
contenido.
El tiempo de concentración compite 
con las notificaciones del resto de las 
aplicaciones, y la vida cotidiana de la 
persona.
ARQUITECTURA DE INFORMACIÓN
Es la práctica de decidir cómo organizar la 
estructura de lo que mi página quiere decir, para 
que sea algo comprensible.
La jerarquización de la información permite 
identificar qué palabras son las que queremos 
destacar.
Entender cómo funciona nuestro buscador interno, 
ayuda a estructurar el contenido de los servicios, 
productos y categorías, para que respondan según 
cómo buscan los usuarios.
Los párrafos tienen que ser cortos, concisos y 
escaneables. Cada párrafo tiene que transmitir una 
idea.
BÚSQUEDA VACÍA
Es muy común que nos preocupemos más por 
atraer tráfico a nuestra página, descuidando el 
buscador interno.
Una de los objetivos de la arquitectura de 
información es evitar llevar al usuario a una 
búsqueda sin resultados cuando, 
verdaderamente, poseemos ese servicio o 
producto que ingresó en el buscador. El usuario lo 
busca de una forma, y nosotros esperamos que 
se busque de otra.
ESTRUCTURANDO LOS DATOS
Para estructurar los datos de mi servicio o producto, tengo que 
entender qué es lo más importante de él. 
● ¿Qué atributos son los más importantes?
● ¿Qué imagen lo representa más?
● ¿Qué información puedo dividir en párrafos?
● ¿Cuál es el objetivo más importante del producto o 
servicio?
Un e-commerce no es un blog. 
No es importante si los usuarios leen todo el contenido. 
Nos importa ayudar a las personas a facilitarles el trabajo 
de elección.
Los usuarios más interesados van a hacer una lectura 
más profunda, por eso la información necesaria para 
satisfacer sus dudas, tiene que estar ahí. 
¡IMPORTANTE!
La fotografía de nuestros artículos
es crucial para la experiencia de 
los usuarios.
No sólo pueden destacar o 
despreciar lo que vendemos, sino 
que pueden aportar a una mejor 
experiencia y, en consecuencia, 
mayores ventas.
IMÁGENES
¿POR QUÉ SON 
TAN 
IMPORTANTES 
LAS IMÁGENES 
DEL PRODUCTO 
O SERVICIO?
● Son lo primero que el usuario mira.
● Ayudan a comprender mejor nuestros 
productos.
● Amplifican nuestra marca.
● Nos dan una ventaja competitiva.
● Aumentan la posibilidad de 
compartirse en RRSS.
Se recomienda
tener más de una 
foto del producto.
Mostremos todos
los detalles
necesarios.
Es importante
mostrar los 
productos en
contexto.
A/B TEST CON GOOGLE OPTIMIZE
Tal como vimos, el A/B testing consiste en comparar dos versiones 
de una misma página web o aplicación, para comprobar cuál de las 
dos versiones es más eficiente. 
Estas variaciones, llamadas A y B, se muestran de forma aleatoria a 
los distintos usuarios de la página web. Una parte de ellos verá la 
versión A, y la parte restante verá la versión B.
Google Optimize es una herramienta que nos permitirá configurar, 
analizar y medir un A/B test.
CREAR EXPERIMENTO
CANTIDAD DE VARIANTES
PÁGINA DONDE SE HACE EL A/B
ELEGIR A QUIÉNES LES MUESTRO MI A/B
MEDIR EL A/B