Curso Usabilidad Web Noviembre - Diciembre 2019

CURSO DE
USABILIDAD WEB
Profesor: Álvaro López Herrera
www.alvarolopezherrera.com
@allopher
allopher86@gmail.com
www.linkedin.com/in/alvarolopezherrera/

Presentación. ¿Quién soy?
6 años de experiencia en marketing digital
Especialista en Google Ads y Facebook Ads
Staff de la comunidad de Marketeros Nocturnos
Blog profesional con más de 6 años de trayectoria
Profesor de varios cursos de marketing digital
Ponente de charlas y webinars
Álvaro López Herrera @allopher www.alvarolopezherrera.com allopher86@gmail.com
2

Quiero conoceros…

¿Qué esperáis de este curso?

Índice de contenidos
● Iniciación en Usabilidad Web
● Experiencias de usuario
● Prácticas
● Metodología
● Usabilidad aplicada a otras disciplinas

Objetivos
● Aprender a conocer los aspectos relativos a la web
● Conocer y orientar desde un buen diseño web
● Aplicar las mejores prácticas y recomendaciones

Usabilidad web. Concepto
La usabilidad web es el grado de facilidad de uso que tiene una página web para
los visitantes que entran e interactúan con ella.
La usabilidad de una página web son todas las técnicas y principios básicos
que se utilizan para que una página web esté totalmente optimizada para la
navegación de la misma.
La usabilidad es una característica que mide qué tan intuitiva y fácil de usar es
una página web para el usuario común.

Ejercicio Práctico
¿Cómo es la usabilidad de la página web de vuestra empresa?

UX/UI
Experiencia del usuario (UX): la experiencia que tiene cualquier usuario cuando
está interactuando con una plataforma digital, un dispositivo o cualquier otro
entorno.
Interfaz del usuario (UI): es el conjunto de los controles y canales sensoriales
mediante los cuales un usuario puede comunicarse con una máquina, puede ser
gráﬁca o desarrollada por tecnologías como HTML, CSS, YUI, jQuery, etc. Por
ejemplo, en un ordenador, la pantalla, el teclado y los altavoces son parte de la
interfaz de usuario porque la utilidad de todas ellas es hacer que entre o salga
información del equipo.
Se caracteriza por el alto grado de usabilidad, y por ser amigable e intuitiva.

UX
El diseño de experiencia de usuario está formado por varias etapas:
● Diseño visual
● AI (arquitectura de la información)
● Diseño de interacción
● Usabilidad
● Investigación de usuario
● Estrategia de contenidos
Álvaro López Herrera @allopher www.alvarolopezherrera.com allopher86@gmail.comÁlvaro López Herrera @allopher www.alvarolopezherrera.com allopher86@gmail.com

Diseño visual
El Diseño Visual es una denominación profesional del diseño que analiza y
transforma datos en estructuras visuales mediante el conocimiento de procesos
perceptivos (ciencia de la visión) y cognitivos, el reconocimiento de los contextos
socioculturales para su planificación en los dispositivos y soportes de la imagen,
con el fin de generar sistemas de información que interactúan con la comunidad y
sus referentes significacionales, a través de los procesos comunicativos (Fuente
Wikipedia).
En nuestro caso, la forma de presentar la información visualmente es esencial
para tener una experiencia del usuario agradable.

AI (arquitectura de la
información)
Es la disciplina y arte encargada del estudio, análisis, organización, disposición y
estructuración de la información en espacios de información, y de la selección y
presentación de los datos en los sistemas de información interactivos y no interactivos
(Wikipedia).
Organizar la información de forma adecuada en la web, normalmente en forma
arborescente, es esencial para lograr que el usuario pueda navegar sin problemas,
evitando las fugas en el proceso de compra (embudo de conversión).

Diseño de interacción
Diseño de interacción, a menudo abreviado como IxD, está deﬁnido como “la
práctica de diseñar productos digitales interactivos, entornos, sistemas, y
servicios”(Wikipedia).
Hace referencia a las relaciones que se producen entre las personas, las
representaciones visuales, el tiempo, los objetos físicos o espaciales y el
comportamiento.
El diseño de interacción está orientado a satisfacer las necesidades y deseos de
la mayoría de usuarios de un producto concreto.

Usabilidad
La usabilidad se convierte en el eje fundamental de la UX, ya que si una web o
programa informático carece de una lógica en términos de usabilidad (sencillo,
intuitivo y actualizado), podremos invertir mucho en términos de posicionamiento,
tanto orgánico como de pago, pero el resultado será desastroso.

Investigación de usuario
Conocer cómo es el usuario que va a interactuar con la web es fundamental para
lograr que la experiencia del usuario sea satisfactoria, conocer los datos
cualitativos. como son los demográﬁcos (sexo y edad) y otros datos de evidente
interés (poder adquisitivo, intereses...).
Importancia de la deﬁnición del buyer persona.

Estrategia de contenidos
Los contenidos que van a nutrir la página web es otro de los elementos que no
debemos olvidar o menospreciar, ya que no sólo bastará con que lleguen los usuarios
a la web o que naveguen, sino que los contenidos que ofrezcamos deben tener el
nivel de calidad para interesar y ofrecer algo que nos diferencie con el resto de
cientos de miles de webs que cohabitan en la world wide web.
https://www.youtube.com/watch?v=2Uj1A9AguFs

Paraguas de experiencia del usuario
Fuente: Thomas
Memmel

UI
Según Larry Constantine y Lucy Lockwood, existen 6 principios para el diseño de
interfaz centrado en el usuario. Estos principios son:
● La estructura
● La simplicidad
● La visibilidad
● El feedback
● La tolerancia
● El reuso

Estructura
El diseño debe organizar la interfaz de usuario a propósito, de manera
signiﬁcativa y útil basada en modelos claros y consistentes, los cuáles son
evidentes y reconocibles para los usuarios, ayudando a sintetizar las cosas
relacionadas entre sí y a separar todas aquellas cosas que no están relacionadas.
La estructura tiene que ser capaz de informar de manera visual al usuario, para
que pueda entender qué es cada cosa.

Simplicidad
El diseño debe facilitar las tareas sencillas y comunes, comunicarse de forma
clara y sencilla en el propio idioma del usuario y proporcionar buenos accesos
directos que están signiﬁcativamente relacionados con procedimientos más
largos.

Visibilidad
El diseño debe hacer visibles todas las opciones y materiales necesarios para una
tarea determinada sin distraer al usuario con información superﬂua o redundante.
El diseño tiene que ser capaz de permitir que el usuario encuentre todas las
opciones que hay en la página web, de una manera fácil y rápida.
El buen diseño no abruma a los usuarios con alternativas o confunde con
información innecesaria.

Feedback
El diseño debe mantener a los usuarios informados de las acciones o
interpretaciones, los cambios de estado o condición, y los errores o excepciones
que son relevantes y de interés para el mismo a través de un lenguaje claro,
conciso, que sea familiar para los propios usuarios.
Cualquier cambio, modiﬁcación o error que esté sucediendo en la página web,
tiene que ser informado al usuario, siempre.

Tolerancia
El diseño debe ser ﬂexible y tolerante, reduciendo el coste de los errores y el mal
uso al permitir deshacer y rehacer. Al mismo tiempo, se deben evitar los errores
siempre que sea posible, interpretando todas las acciones razonables.

Reuso
El diseño debe reutilizar los componentes, comportamientos internos y externos,
manteniendo la coherencia con el objetivo, reduciendo así la necesidad de los
usuarios a repensar y recordar.

Buenas prácticas en Usabilidad

● Normas consistentes
● Prevención de errores
● Control y libertad del usuario
● La comunicación entre el sistema y el mundo real
● Visibilidad del estado del sistema
Jakob Nielsen es un ingeniero informático de origen danés, que posee
reconocimiento a nivel mundial sobre usabilidad. Este prestigioso
ingeniero diseñó los 10 principios básicos de usabilidad web en el año
1995 (principios de usabilidad heurística), que aún a día de hoy se
siguen utilizando:

● Reconocer en lugar de recordar
● Diseño estético y minimalista
● Ayudar a los usuarios a reconocer, diagnosticar y rectiﬁcar los errores
● Flexibilidad y eﬁciencia de uso
● Ayuda y documentación
Práctica: Analizar y proponer puntos de mejora de la página de intranet

Normas consistentes
Debemos mostrar mensajes con la causa especíﬁca del error y con indicaciones
de cómo solventarlo, cuidar el lenguaje utilizado y ser precisos en las acciones
siguientes. Ejemplo: error 404.
Mostrar mensajes genéricos provocará que nuestros usuarios no sepan cómo
reaccionar.

Prevención de errores
Todos podemos equivocarnos, es por ello que debemos procurar que el impacto
de estos errores sean mínimos en el sistema. Realizar pruebas sobre casos
pocos probables y probar nuestros algoritmos nos ayudarán a que el sistema
pueda reaccionar.
Realizar un buen testeo antes de lanzar el sistema nos permitirá prevenir muchos
de estos errores.

Control y libertad del usuario
Los usuarios se sentirán más cómodos en tu sistema si les otorgas libertades y
control en su uso.
Debemos estar conscientes que es muy probable que los usuarios elijan opciones
que posteriormente quieran cambiar, y permitirles deshacer/rehacer acciones o
cancelar ciertas elecciones es una manera de darles el control. Ej: carrito.
La personalización es fundamental en este caso.

La comunicación entre el sistema
y el mundo real
Debemos de investigar un poco al público al que irá dirigido nuestro sistema para
utilizar lenguaje que le resulte familiar.
Mostrar información en un orden natural y lógico, usar representaciones gráﬁcas
claras e intentar ayudar a que se genere una comunicación propicia entre el
sistema y el mundo real.

Visibilidad del estado del sistema
El sistema mantiene informado al usuario en todo momento sobre su estado
actual, apoyándose en indicadores que sirvan de feedback y que sean de fácil
lectura.
Ejemplo; fallo en un programa, nos apoya
el sistema con unas indicaciones básicas.

Reconocer en lugar de recordar
Minimiza la información que el usuario tiene que recordar mostrando objetos,
acciones y opciones de una manera visible en tu interfaz.
Permite que vea las instrucciones en todo momento y que al elegir opciones,
estas sean mostradas explícitamente, ayudando a facilitar la navegación en todo
momento.

Diseño estético y minimalista
“A veces, menos es más”
Muestra sólo la información que se necesite en el momento. Recuerda que es
muy fácil perder la atención de los usuarios, por tal motivo debemos ser claros y
concisos.

Ayudar a los usuarios a reconocer,
diagnosticar y rectiﬁcar los
errores
Debemos mostrar mensajes con la causa especíﬁca del error y con indicaciones
de cómo solventarlo, cuidar el lenguaje utilizado y ser precisos en las acciones
siguientes. Mostrar mensajes genéricos provocará que nuestros usuarios no
sepan cómo reaccionar.

Flexibilidad y eﬁciencia de uso
Permite que los usuarios experimentados puedan tener comandos “aceleradores”
para que el uso de tu sistema sea cada vez más cómodo.
Estás opciones en un principio no se mostrarán a los nuevos usuarios, pero con el
uso, harán que su trabajo sea más productivo.
Ejemplo: Excel.

Ayuda y documentación
Aún cuando nuestro sistema sea lo suﬁcientemente intuitivo para usarse, siempre
es conveniente otorgar documentación y proveer de una forma de otorgar ayuda a
los usuarios.
Toda la información mostrada en las preguntas frecuentes o FAQs y en otra
documentación aclaratoria, así como las respuestas a las dudas de usuarios,
deberán ser claras y directas.

Principios a tener en cuenta en
UX/UI
Expectativas del usuario
Dispositivos móviles (diseño responsable/responsive design)
Conectividad deﬁciente y elevada latencia
Seguridad del sitio web
URL friendlys

Web Performace Optimization (WPO): optimización del tiempo de carga
Logo en las cabeceras
Eslogan
Favicon
Iconos de las Redes Sociales
Cuidar tamaños y pesos de las imágenes
UX/UI

Botones con llamadas a la acción
Texto del cuerpo legible y con tamaño de la letra adecuado
Personalización del error 404
Formulario de contacto
Menú lateral
UX/UI

Últimos artículos del blog
Módulo de opiniones de usuarios
Módulo de puntuaciones o valoraciones
Módulo de ofertas y promociones especiales
Módulo de productos destacados
UX/UI

Consejos Usabilidad Web
● Evita incluir elementos de tu web “en construcción”:
● Diseña y construye tu página web acorde con el target de tu empresa.
● No des nunca prioridad al diseño sobre la funcionalidad.
● Utiliza URLs claras y fáciles de entender.
● Coloca la información de contacto de manera visible para los
usuarios.

● Diseña la página web de una manera jerarquizada y muy sencilla de
manejar.
● Aporta sólo información relevante, clara y muy concisa.
● Tu página debe indicar al usuario en cada momento por dónde puede
navegar.
● Evita animaciones que no aporten nada al usuario (debate GIFs)
● Crea llamadas a la acción claras y que no den lugar a dudas.

Metodología

Metodología en usabilidad web
Las metodologías en usabilidad web han ido evolucionando a lo largo del tiempo,
pero las más importantes son las siguientes:
● Clásica
● Design thinking
● Lean UX
● Agile

Metodología clásica
Está basada en 5 secuencias lógicas y necesarias para lograr los objetivos
planteados:
● Planiﬁcación
● Diseño
● Desarrollo
● Prueba y testeo
● Entrega y feedback

Design thinking
Design thinking es una metodología utilizada por los diseñadores para resolver
problemas complejos que, en vez de centrarse en éstos, se orienta en la acción,
propiciando el avance hacia la creación del escenario de futuro preferido.
Fases:
● Empatizar con los usuarios o clientes.
● Deﬁnir sus necesidades, sus problemas y sus ideas.
● Crear ideas que desafíen las suposiciones y deriven en soluciones innovadoras.
● Conﬁgurar un prototipo.
● Pasar al modo de prueba con las distintas soluciones planteadas.

Lean UX
Es un método que permite crear productos que sigan todos los requerimientos de
los usuarios, reduciendo la posibilidad de fracasar, agilizando su tiempo de
producción y logrando los objetivos buscados en un tiempo más corto.
Los principios en los que se sustenta son:
● Eliminar lo sobrante.
● Ampliar el aprendizaje.
● Decidir lo más tarde posible.
● Reaccionar tan rápido como sea posible.
● Potenciar el equipo.
● Ver todo el conjunto.

Agile
La metodología Agile busca una forma que aporte más valor a los procesos y las
tomas de decisiones en el desarrollo. Los miembros del equipo trabajan en fases
y actualizaciones para validar el producto o servicio.
Scrum y Kanban son algunas de las técnicas ágiles más populares.

Está determinada por 4 fases:
● Los individuos y su interacción, por encima de los procesos y las
herramientas.
● El software que funciona, frente a la documentación exhaustiva.
● La colaboración con el cliente, por encima de la negociación del equipo.
● La respuesta al cambio, por encima del seguimiento de un plan.

Sitios web para Móviles
● Formato ligero
● Presentación intuitiva
● Una sola compilación para todas las plataformas
● Adaptabilidad
● Fases de desarrollo más breves
● Costes de desarrollo reducidos
● Abierto para todos
● Seguimiento sencillo

¿Cómo crear nuestra página web?
Múltiples CMS (content management system), algunos de los más importantes:
● WordPress
● Drupal
● Joomla
● Wix
Tener en cuenta el hosting y el dominio para crear la web, además de plantillas y
la posibilidad de contratar a un diseñador web.

Usabilidad aplicada a otras
disciplinas

Relación UX/UI con Analítica
La usabilidad es de extrema importancia para las empresas y para los usuarios
de estas plataformas, pero sin tener en cuenta la analítica es complicado poder
hacer mejoras en todo el proceso de UX/UI.
Nos debemos basar siempre en datos e información objetiva para poder tomar
decisiones que nos afecten en el proceso de desarrollo de la usabilidad web, y
más aún cuándo tenemos un sitio web con larga trayectoria.

Relación UX/UI con Página web
La relación es recíproca, ya que la usabilidad es completamente imprescindible
para la concepción y el desarrollo de las páginas webs, pero en las páginas webs
debemos tener en cuenta la UX/UI para mejorar los procesos y las métricas
relacionadas con el uso de la web: tiempo de permanencia en la página, tasa de
rebote, conversiones, usuarios únicos, sesiones, ...

Relación UX/UI con SEO
La relación entre la UX con el SEO se convierte en otro pilar, ya que si la página
web no está bien concebida y desarrollada, difícilmente estará bien rankeada en
Google, suponiendo una pérdida signiﬁcativa para ambas partes, el usuario no
encontrará la web en cuestión, y la empresa perderá la oportunidad de que la web
sea encontrada de forma orgánica por el usuario cuando navegue en un buscador.
Ejemplo: ﬂoristería.

Acciones de lanzamiento
A la hora de promocionar un nuevo sitio en Internet hemos de recordar que no
todas las acciones de promoción que se realicen tendrán los mismos efectos,
pero que en deﬁnitiva, llevadas de la forma adecuada, todas suman en la difícil
tarea de promocionar nuestro proyecto. Así, hay que tener en cuenta algunas
cosas que podemos hacer para promocionar desde un inicio una página web.
74

1. Buscar enlaces de otros sitios: si enlazamos a otros sitios de interés,
conseguiremos con el paso de el tiempo, que otros sites también nos enlacen,
produciendo un beneﬁcio mutuo.
2. Incluir la dirección de tu web en toda la identidad corporativa de la empresa.
3. Optimizar la página web.
4. Darse de alta en Google My Business.
75

5. Compartir contenidos con otros sitios. Debate sobre linkbuilding y compra de
enlaces(notas de prensa o publirreportajes online).
6. Hacer que su sitio web sea "sticky": es decir, que los usuarios quieran permanecer
en él durante largos períodos de tiempo y que recurren al sitio de forma habitual.
7. Hacérselo fácil a otros para que enlacen con su sitio.
76

8. Utilizar los sistemas de pago-por-clic o anuncios en otros sitios web.
9. Crear un boletín o newsletter.
Hay que tener cuidado con la legislación sobre la protección de datos o GDPR.
10. Analizar los hábitos de los visitantes, y empezar de nuevo.
La promoción de un sitio web es un proceso continuo.
11. Protocolo de Seguridad HTTPS: todas las páginas web sin el protocolo,
aparecen como webs no seguras para los buscadores.
77

Relación UX/UI con PPC/SEM
La relación de la UX con PPC (Social Ads y Google Ads) es también esencial, ya
que si conseguimos que los usuarios lleguen a nuestra web, haciendo un esfuerzo
económico importante, y llegan a un sitio donde no pueden acceder a la
información que les interesa, o no pueden avanzar en el proceso de compra,
abandonarán la web para no volver nunca más, a pesar del esfuerzo monetario
realizado.

Estructura de la web acorde a PPC
Arboreceste, facilitando el desplazamiento del usuario.
Páginas de aterrizaje bien optimizadas que faciliten la conversión (formulario de
contacto, llamada de teléfono, llamada mosca...).
La página web debe tener sus palabras claves bien seleccionadas y trabajadas, en
función de la temática, para permitir que las campañas pueden optimizarse
(keyword research).
Los textos y las imágenes de la web deben estar bien redactados y escogidas en
su caso, para facilitar que el usuario que llegue se quede leyendo el contenido que
le estamos ofreciendo.

Otros datos de interés
https://www.toptal.com/designers/user-research/el-valor-de-la-investigacion-de-usuario
https://www.sortega.com/blog/el-paraguas-sera-la-experiencia-de-usuario/
https://attachmedia.com/guia-ux/
Libro Lean UX: Applying Lean Principles to Improve User Experience, Jeff Gothelf
http://www.tss.com.pe/blog/las-10-reglas-heuristicas-de-usabilidad-definidas-por-jakob-nielsen
https://www.maxcf.es/tendencias-diseno-web-2020/
https://www.informacionyarte.com/manuales-de-diseno-web-para-principiantes-en-pdf
https://rafarjonilla.com/que-es/wpo/

Curso Usabilidad Web Noviembre - Diciembre 2019

Recomendados

Recomendados

Más contenido relacionado

Similar a Curso Usabilidad Web Noviembre - Diciembre 2019

Similar a Curso Usabilidad Web Noviembre - Diciembre 2019 (20)

Último

Último (20)

Curso Usabilidad Web Noviembre - Diciembre 2019