AVISO IMPORTANTE

Este documento, su texto y gráficos e imágenes, puede ser utilizado bajo una licencia Creative Commons de tipo Atribución, No-Comercial. En caso de utilizarse este material o de
la creación de un derivado, la atribución se debe respetar citando la fuente como “Actívate, Google España” y expresamente, si es posible, mediante un enlace activo a
http://google.es/activate.

En colaboración con
Usabilidad y gestión web
Índice
1 Diseño de páginas web. Herramientas

2 Diseño de páginas web. Consideraciones

3 El Diseño Centrado en el Usuario (UCD)

4 ¿Qué es la experiencia del usuario?

5 Usabilidad

6 Usabilidad y mobile

7 Usabilidad y conversión
Diseño de páginas web

Ordenador personal

Ordenador personal

Servidor web Internet

Ordenador personal

El servidor web es la herramienta necesaria para servir

la estructura y diseño de una página web.
Diseño de páginas web. Lenguaje
Hyper Text Markup Language: HTML
Es el lenguaje estándar de las páginas web, que entienden nuestros
navegadores y que sirve, entre otras cosas, para mostrar,
referenciar y enlazar contenidos web.
Diseño de páginas web. Lenguaje
Ejemplo:
Diseño de páginas web
Content Management System (CMS)

Un CMS o gestor de contenidos es un sistema que permite crear y

gestionar sitios web sin necesidad de escribir código de programación.
Un CMS por dentro

Fuente: Wordpress
Un CMS por fuera

Fuente: Wordpress
Pasos para crear una web
● Comprar un dominio.
● Seleccionar un alojamiento web compartido con todos los
servicios (servidor web, email y auto-instalador del CMS
seleccionado).
● Seleccionar la plantilla que mejor se adapte a tus necesidades.
Existen gratuitas y de pago.
● Ordenar el contenido y ponerte a escribir.
Opción rápida para pymes
Existen multitud de plataformas automáticas que
ofrecen la creación, alojamiento y mantenimiento de
páginas web.

Son una opción para pymes y autónomos.

Dominios

● .com: es el más comercial y recomendado.

● .es: en España. Recomendado.

● .eu: en Europa. Poco usado.

● .net, .org, etc.: sólo si se ajustan a tu actividad.

● .es.com: de segundo nivel. No recomendados.

2
Diseño de páginas web.
Consideraciones
Diseño de páginas web.
Consideraciones
A la hora de diseñar una página web es importante
tener en cuenta:

● El posicionamiento en buscadores.
● La usabilidad y la experiencia de usuario.
3 El Diseño Centrado en el Usuario
El Diseño Centrado en el Usuario
UCD User Centered Design
Es una filosofía de diseño que pretende crear:

● Experiencias que van más allá de los productos o

servicios.
● Entornos que conecten a nivel emocional con el
usuario.
Juicy Salif
Philippe Starck
El Diseño Centrado en el Usuario

Pone el énfasis en la facilidad de uso y comprensión del

producto por parte del usuario, basándose en sus
necesidades e intereses y analizando aspectos como:

● Habilidades y necesidades del usuario.

● Contexto de uso.
● Tareas que va a realizar.
El Diseño Centrado en el Usuario
El objetivo es diseñar un sitio web que los usuarios puedan
utilizar con un mínimo de estrés y un máximo de eficiencia.
El Diseño Centrado en el Usuario

Se basa en la OBSERVACIÓN y ANÁLISIS de:

● Los usuarios internos y externos.

● Las tareas que han de realizar.
4 ¿Qué es la experiencia de usuario?
¿Qué es la experiencia de usuario?
La sensación, emoción y satisfacción
- del usuario…
- …respecto a un producto
- …resultado de interactuar con el producto
- y su proveedor: la marca.
¿Qué es la experiencia de usuario?
Conjunto de percepciones y sensaciones que desarrolla un
usuario durante su relación e interacción con una interfaz
de cualquier tipo. En el caso que nos ocupa, con los
elementos de tu sitio web y tu presencia e identidad digital.
¿Qué es la experiencia de usuario?
Objetivos del diseño web:
● Homogeneización de las iniciativas online.
● Proyección de marca única y homogénea.
● Una experiencia de usuario global satisfactoria.

BRAND
¿Qué es la experiencia de usuario?
Nuestro sitio web es…

…¡¡¡El reflejo de nuestra marca en Internet, nuestro principal

escaparate, nuestras oficinas centrales en Internet!!!
¿Qué es la experiencia de usuario?
Concepto global que depende de numerosos factores:

● Utilidad y valor del producto/servicio.

● Respuesta a las necesidades y expectativas del usuario.
● Contenidos y servicios ofrecidos.
● Transmisión de valores de marca.
● Creatividad y diseño visual.
● Facilidad de aprendizaje y recuerdo.
● Usabilidad, navegación eficiente. Atributo cuantitativo de web.
5 Usabilidad
Usabilidad

La usabilidad hace referencia a la facilidad con que las personas

pueden utilizar una interfaz particular con el fin de alcanzar un
objetivo concreto.

Es un atributo cualitativo y una de las facetas fundamentales de

la UX (User eXperience o Experiencia de Usuario)

¡Pero no lo es todo!
Usabilidad
La usabilidad es un atributo de la experiencia de usuario.

Válid
o
Usable Deseable

Aporta
valor
Fácil de Accesible
encontrar

Creíble

Fuente adaptada de: User experience desing, Peter Morville, Semantic Studios
Usabilidad
La clave de un sitio usable es que quien navega por él consiga:

● Entender su estructura.
● Realizar con satisfacción aquello que pretendía realizar.

“La usabilidad se basa en no molestar ni

hacer pensar en exceso al navegante y
en hacerle fácil y grata la experiencia en
el sitio web”.
Steve Krug.
Usabilidad
Efectividad + Eficiencia
● ¿Consigo realizar la compra ● ¿Cuánto tardo en realizar la
correctamente? compra?
● ¿Cometo algún error o todo sale
bien a la primera?

=
SATISFACCIÓN
● ¿Me ha parecido difícil?
● ¿Me he quedado con buena sensación?
● ¿Repetiré y recomendaré esta web?
Usabilidad

Eficiencia:
Relacionado con el número de errores que comete el usuario en la
consecución de una tarea.

Efectividad:
Relacionado con el tiempo empleado por el usuario para la
consecución de la tarea.
Usabilidad
Satisfacción de uso:
Percepción del usuario respecto a la dificultad de acometer la
tarea.

Relacionado con que el sitio web sea subjetivamente

agradable.

Por satisfacción se entiende la ausencia de incomodidad y la

actitud positiva en el uso del producto.
Usabilidad
Velocidad de carga y rendimiento
Un diseño web muy elaborado aumenta, en la mayoría de casos, los tiempos de
carga. Hay que buscar la forma de optimizar la velocidad de carga de nuestros
sites al máximo.

Por esto, los desarrolladores deben considerar cuidadosamente qué tipo de

herramientas usar para ofrecer un contenido multimedia interactivo y relevante
para el usuario y, a la vez, que sean eficaces para el correcto funcionamiento de
la web.

En general, el principio “menos es más” siempre será válido, sin que esto
implique usar un diseño aburrido.
Usabilidad
Velocidad de carga y rendimiento
La velocidad de carga es otra de las claves de la usabilidad. Es independiente de
la interfaz propiamente dicha, pero impacta directamente en la experiencia de
usuario.

● Impacta en SEO
● Impacta en el engagement.
● Impacta en la conversión.
● Impacta en las ventas.

● Impacta directamente en los costes de

mantenimiento de tu infraestructura web. Fuente: A Beginner’s Guide to Website Speed Optimization. Noviembre 2016
Usabilidad
Velocidad de carga y rendimiento
Un buen diseño de experiencia de usuario con una alta velocidad de carga y rendimiento
y una buena capacidad de respuesta conduce a mayores conversiones.

UX = Percepción Velocidad y rendimiento Conversiones

Una buena experiencia de El diseño es lo que el La rapidez, velocidad y
usuario es la percepción usuario ve. La velocidad y rendimiento influyen
de que todas las áreas de el rendimiento es lo que el directamente en las
contacto del camino que usuario siente. conversiones.
recorre el usuario son
completadas sin
problema y de una
manera natural.
6 Usabilidad y mobile
Usabilidad y mobile
Los nuevos retos de la usabilidad
La navegación web desde móviles ha superado a la de ordenadores de
escritorio en muchos países. Ya supone un 44% a nivel global.

Fuente: Digital in 2016, We are social

Usabilidad y mobile
Los nuevos retos de la usabilidad
“Focus on the user, and everything else will follow”.

Puesto que cada vez hay más personas navegando online a través de
dispositivos móviles que desde ordenadores de escritorio, esto supone
numerosas implicaciones para el diseño de la experiencia de usuario a nivel
mobile.

El hecho de que un sitio web no esté adaptado para

móvil ya es un problema y con consecuencias
directas traducidas en tasas de rebote, abandono
de carritos de la compra, etc.
Usabilidad y mobile
Responsive design
Consiste en diseñar webs que se adapten al tamaño del dispositivo que
las visualiza, por supuesto, manteniendo su usabilidad a pesar de las
limitaciones de tamaño.

Pero, ¿por dónde empezamos? ¿mobile o desktop?

Usabilidad y mobile
Diseño adaptable (responsive design)
Progressive enhancement: partimos desde el sitio web para móvil, creamos contenidos específicamente
creados para este dispositivo en primer lugar y el diseño. Una vez hecho vamos adaptándolo a pantallas
más grandes.

Mobile first

Optimización para pantallas pequeñas, funcionalidades necesarias, tiempos de carga óptimos,

lógica de navegación simple (“lean design”).

Adaptación a pantallas grandes.

El resultado es una navegación web sencilla y muy usable en pantallas grandes, aunque con
menos funcionalidades.
Usabilidad y mobile
Velocidad de carga y rendimiento

“As users migrate to mobile, page load time is perhaps

the most important metric we have. If you can’t load
pages fast enough, you can’t compete. Consumer
expectations in a mobile-led world are extreme.”

Howard Mittman, Condé Nast.

Fuente: How GQ cut its webpage load time by 80 percent, Digiday

Usabilidad y mobile
Micro-momentos

Fuente: 4 New Moments Every Marketer Should Know, Think With Google
Usabilidad y mobile
25 principios de diseño web móvil:
Búsquedas en el site
- Las búsquedas en el site siempre
visibles (cerca de la parte alta de la
página).
- Los resultados de búsqueda son
relevantes (funcion autocompletar).
- Los filtros sirven para mejorar los
resultados de búsqueda.
- Guiar a los usuarios para obtener
mejores resultados de búsqueda.
Formulario de entrada
- La información de la entrada es
ágil.
- Uso de botones y listas
desplegables para simplificar la
ejecución.
- Uso de calendarios visuales para la
selección de fechas.
- Minimizar errores con etiquetados
y validaciones en tiempo real.
- El diseño del formulario es
eficiente (auto-relleno, barras de
progreso).
Usabilidad & diseño
- Todo el site está optimizado para móvil.
- No hacer que el usuario necesite
redducir/aumentar o hacer zoom en la
pantalla.
- Las imágenes de productos pueden
expandirse (primeros planos de gran
calidad disponibles).
- Los usuarios son informados sobre qué
orientación de pantalla funciona mejor (el
site funciona en todas las orientaciones).
- Manten al usuario en una única ventana
de navegador (los “call-to-action”
permanecen en la misma ventana).
- Evita términos como “full site” para las
opciones de navegación (usar PC site).
- El site dejará claro por qué necesita saber
la ubicación del usuario (y qué pretende
hacer con ella).
Fuente: Principles of mobile site desing-Google, AnsewrLab, 2014
Usabilidad y mobile
25 principios de diseño web móvil:
Página de inicio & navegación web
- Las llamadas a la acción (CTA) están en el frente
y centradas.
- Los menús son cortos y amables.
- Es fácil volver a la página principal.
- Las promociones no interrumpirán la navegación.
Comercio & conversiones
- Los usuarios pueden explorar antes de convertir.
- Los usuarios pueden comprar como invitados.
- Usar la información previa para maximizar conveniencias (p.
ej. pagos a terceros).
- “Click to call” estará presente en tareas complejas.
- Facilidad para terminar la conversión desde otro dispositivo.
Fuente: Principles of mobile site desing-Google, AnsewrLab, 2014
Usabilidad en apps
Usabilidad en apps
Los gestos en pantallas táctiles son el equivalente del ratón en PC/portatil. En el diseño de apps
debemos crear experiencias de usuario aprovechando todas las posibilidades que otorga la pantalla
táctil.

Fuente: Gestures & Animations: The Pillars of Mobile Design. UX Magazine, 2014
Usabilidad y mobile
Principios de la usabilidad en apps
- Piensa en los usuarios.
- 100% Responsive.
- El usuario ha de ver que cada acción conlleva una reacción.
- ¡Keep it simple!
- El contraste de tonos/colores es importante.
- Utiliza iconos populares y reconocibles.
- Mantén la uniformidad en todos los elementos.
- Crea formularios cortos.
- 1 Pantalla siempre es mejor que 2.
- Tutoriales integrados en la interfaz.
- Sentido común. :)

Fuente: 20 Tips: How To Design Great UI For Mobile Apps?. Think 360, 2016
7 Usabilidad y conversión
Usabilidad y conversión

¿Y qué conseguimos si creamos un sitio web usable?

¡Mejorar nuestros ratios de conversión!

En los procesos de nuestro sitio web: registros, compras, descargas,

etc.

Si un usuario no encuentra un producto es imposible que lo compre.

Usabilidad y conversión
La tasa de conversión es el porcentaje de visitantes que ejecuta una
acción: rellenan un formulario, se suscriben (newsletter, feeds, canales
2.0...), descargan una demo, etc.

Sitio web usable:

● Alcanzar la máxima conversión de los
visitantes que llegan a mi sitio web.
● Convertirlos en el objetivo para el que fue
diseñado el sitio.
8 Principios de usabilidad
Principios de usabilidad

¿Se comunica de manera inmediata y clara el

1 propósito, objetivo y funciones de la página?

Fuente: Jakob Nielsen’s usability inspection methods

Principios de usabilidad

Fuentes de imágenes: Google y Facebook

Principios de usabilidad

2 ¿Se ofrece al usuario mecanismos y referencias claras

que le permitan orientarse fácilmente (dónde está y qué
está haciendo)?

¿Se mantiene informado al usuario acerca de lo que está

ocurriendo?

Fuente: Jakob Nielsen’s usability inspection methods

Principios de usabilidad
● Al pulsar el botón se sustituye por una
barra de progreso.

● Mensajes de feedback al finalizar una

tarea.

● La fortaleza de la contraseña se muestra

en tiempo real.
Fuente de imagen: Flipboard y Google
Principios de usabilidad
Principios de usabilidad

Fuente de imagen: Privalia

Principios de usabilidad

Fuente de imagen: Privalia

Principios de usabilidad

3 ¿La página se adecúa a los objetos mentales del usuario,

su lógica de la información, su terminología y lenguaje?

¿La información se muestra en un orden lógico y natural?

Fuente: Jakob Nielsen’s usability inspection methods

Principios de usabilidad

Fuente de imagen: Laboralkutxa

Principios de usabilidad

Fuente de imagen: Openbank

Principios de usabilidad

4 ¿Puede el usuario interactuar de manera fácil y

productiva con el sitio web?

Fuente: Jakob Nielsen’s usability inspection methods

Principios de usabilidad

Fuente de imagen: Rastreator

Principios de usabilidad

5 ¿Tiene el usuario control y libertad sobre la

interfaz?

¿Se han evitado las acciones intrusivas que lo

limiten?

Fuente: Jakob Nielsen’s usability inspection methods

Principios de usabilidad
Ejemplo:

Fuente de imagen: Amazon BuyVip

Principios de usabilidad

6 ¿Se mantiene la consistencia en las diferentes

páginas/secciones, etc. del sitio?

¿Se siguen los estándares "de facto“: la estructuración

páginas, buscador, logo, etc.?

Fuente: Jakob Nielsen’s usability inspection methods

Principios de usabilidad

Los elementos de una interfaz web deben ser consistentes

Áreas de navegación, herramientas de búsqueda, botones, controles, etc. son

iguales en todas las páginas y siguen los estándares comunes de mercado.
Fuente: The importance of Visual Consistency in UI Design. Ux Passion, 2015
Principios de usabilidad

7 ¿Trata el sitio web de prevenir posibles errores?

Fuente: Jakob Nielsen’s usability inspection methods

Principios de usabilidad
Hacer más relevante la acción
primaria para evitar que la gente se
equivoque.

Otros ejemplos pueden ser:

Poner el foco automáticamente en la caja de búsqueda o los

auto-recomendadores, que evitan también errores tipográficos
en las búsquedas.
Principios de usabilidad

Fuente de imagen: Gmail

Principios de usabilidad

8 ¿La interfaz facilita y optimiza el acceso y la

interacción de los usuarios con el sistema?

Flexibilidad y eficiencia de uso.

Fuente: Jakob Nielsen’s usability inspection methods

Principios de usabilidad

Fuente de imagen: Kayak

Principios de usabilidad

Fuente de imagen: NHS

Principios de usabilidad

9 ¿El sitio ofrece información y un diseño

minimalista?

¿Texto organizado, conciso y fuentes legibles?

Fuente: Jakob Nielsen’s usability inspection methods

Principios de usabilidad

Fuente de imagen: Mango

Principios de usabilidad

Fuente de imagen: Apple

Principios de usabilidad

10 ¿Los mensajes de error ayudan a los usuarios a

reconocer, diagnosticar y solucionar errores?

Fuente: Jakob Nielsen’s usability inspection methods

Principios de usabilidad

Fuente de imagen: Klout

Principios de usabilidad

Fuente de imagen: IK4

Principios de usabilidad

11 ¿En caso de que sea necesario, se ofrece una

sección de ayuda y documentación orientada a la
resolución de problemas del usuario?

Fuente: Jakob Nielsen’s usability inspection methods

Principios de usabilidad

Fuente de imagen: Euskaltel

9 Beneficios de aplicar técnicas
de UX y usabilidad
Principios de usabilidad

● Refuerzo de la imagen de marca: mejoras en la percepción del usuario

(producto y proveedor).
● Incremento de las ventas en sitios de comercio electrónico: reducción de la
tasa de abandonos en carritos de la compra.

● Fidelización de clientes: aumento de la tasa de conversión de visitantes a

clientes.

● Reducción de costes de desarrollo: detección de los posibles problemas en

fases tempranas.
Principios de usabilidad
● Reducción de costes en servicios de soporte/atención al cliente:
- problemas → - consultas.

● Aumento de las tasas de conversión (procesos finalizados): registros,

formularios, compras online, etc.

● Reducción de los costes de aprendizaje y formación: curvas de aprendizaje +

controladas.

● Optimización de procesos laborales en intranets: reducción de tiempos de

ejecución de tareas → aumento de la productividad.
¡Gracias!