Clase 06.

E-COMMERCE

DISEÑO UX Y CONTENIDO
 ● Incorporar técnicas y herramientas
útiles para no diseñadores.
● Comprender cómo estructurar el
contenido.
OBJETIVOS DE LA CLASE ● Entender la importancia de la
imágenes en E-Commerce.
GLOSARIO:
Clase 5
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.
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.

Meta Alt: son etiquetas para las imágenes.

Las imágenes también reaccionan a una
búsqueda.
MAPA DE CONCEPTOS CLASE 6

Terminología en
Diseño UX
Diseño Web
Heurísticas de
usabilidad

UX UX Research Opinología vs.

sociología
Del research al
Mobile diseño final

Contenido de texto

Contenido web Imágenes

Caso real

Google Optimize
DISEÑO UX
TERMINOLOGÍA EN DISEÑO WEB

UX Usability Accessibility

UI IxD A/B Test

 UX / USABILITY
User experience Usabilidad

UX Usability
Es lo que una Es la eficacia,
persona percibe eficiencia con la
al interactuar con una web permite
un producto o alcanzar
servicio. objetivos.
 UI / IxD
User interface Interaction Design

UI
Es la interfaz de
usuario, es el look
& feel de nuestro
sitio.
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.
 TIEMPO DE CARGA
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.
 CONSISTENCIA Y RECONOCIMIENTO
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.
 ACCESSIBILITY
Evita los enlaces que dicen 'Haga clic aquí' o sin contenido, como 'Más detalles',
aplicado a una lista de enlaces.

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.
 ACCESSIBILITY
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.
 MENSAJES CLAROS
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.
 ICONOGRAFÍA REPRESENTATIVA
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.
 VISIBILIDAD DE LOS ESTADOS
Ayuda a los usuarios a entender el flujo de nuestro sitio, para que sepan en
dónde se encuentran y qué falta para terminar.
 PREVENCIÓN DE ERRORES
Ayuda al usuario a entender cómo subsanar o prevenir el error. Los
mensajes de ayuda deben ser explicativos y cortos.
 DISEÑO SIMPLE Y CLARO
Los diseños deben trasmitir lo que queremos comunicar, desde las
acciones hasta nuestro objetivo principal.
UX (USER EXPERIENCE)
 EXPERIENCIA DE USUARIO
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.
¿QUÉ NOS DICE NUESTRA EXPERIENCIA DE USO
SOBRE ESTO?
GENERANDO LA MISMA EXPERIENCIA
 UX - UI
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.
UI USABILIDAD UX
 SEGURIDAD
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.
 FACILIDAD DE BÚSQUEDA
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.
UX RESEARCH
 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.
 ENTREVISTAS
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.
 TEST DE USUARIOS

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.
 PERFILES DE PERSONAS
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.
 CARD SORTING
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.
 WIREFRAMES
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.
 MAPAS DE CALOR

Podemos analizar el comportamiento en 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.
 UN EQUIPO SIN UN INVESTIGADOR
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.
OPINOLOGÍA VS.
SOCIOLOGÍA
 UN EQUIPO SIN UN INVESTIGADOR
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.
 DEL RESEARCH AL DISEÑO FINAL
PASOS DEL ANÁLISIS

1 2 3 4 5 6 7

Definir el plan Analizar el

Identificar el Analizar las
para Probar la Subir a comportamie
problema. pruebas. Ajustar.
solucionar el solución. producción . nto de los
problema. usuarios.
 RETROALIMENTACIÓN
● 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.
Wireframe Diseño A
 MOBILE DISEÑO RESPONSIVE
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.
MOBILE FIRST
 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.
 CONTENIDO CONTENIDO DE TEXTO
WEB 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%.
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?
 ¡IMPORTANTE!
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í.
 IMÁGENES
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.
¿POR QUÉ SON ● Son lo primero que el usuario mira.

TAN ● Ayudan a comprender mejor nuestros

IMPORTANTES productos.

LAS IMÁGENES
● Amplifican nuestra marca.
● Nos dan una ventaja competitiva.
DEL PRODUCTO ● Aumentan la posibilidad de
O SERVICIO? compartirse en RRSS.
 Se recomienda
tener más de una Es importante
foto del producto.
mostrar los
Mostremos todos productos en
los detalles contexto.
necesarios.
 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