Una iniciativa de

AVISO IMPORTANTE
Este documento, su texto y grficos e imgenes, puede ser utilizado bajo una licencia Creative Commons de tipo Atribucin, No-Comercial. En caso de utilizarse este material o de la
creacin de un derivado, la atribucin se debe respetar citando la fuente como Actvate, Google Espaa 2014 y expresamente, si es posible, mediante un enlace activo a
http://google.es/activate. Revisado, marzo 2014.
Usabilidad y Gestin Web
ndice

1 Diseo de pginas web. Herramientas

2 Diseo de pginas web. Consideraciones

3 El Diseo Centrado en el Usuario (UCD)

4 Qu es la experiencia del usuario?

5 Usabilidad

6 Usabilidad y Conversin

7 Principios de Usabilidad

8 Beneficios de aplicar tcnicas de UX y Usabilidad

9 Bibliografa y recursos web

Usabilidad y Gestin Web

1 Diseo de pginas web.

Herramientas
Direccin IP
Modelo de funcionamiento Web

El servidor web es la herramienta necesaria para servir

la estructura y diseo de una pgina web.
Diseo de pginas web. El lenguaje

Hyper Text Markup Language: HTML

Es el lenguaje estndar de las pginas web que sirve, entre

otras cosas, para la referenciacin y enlazado de
contenidos que pueden estar situados, por ejemplo, en
otros servidores web diferentes.
Diseo de pginas web. El lenguaje

Ejemplo:
Diseo de pginas web
Content Management System (CMS)

Los contenidos de las pginas web y su adaptacin a los

dispositivos los sirven los CMS: Content Management
System.
Un CMS por dentro
Un CMS por fuera
Pasos para crear una Web

Comprar un dominio.
Seleccionar un alojamiento web compartido con todos
los servicios (servidor web, email y auto-instalador del
CM seleccionado).
Seleccionar la plantilla que mejor se adapte a tus
necesidades. Existen gratuitas y de pago.
Ordenar el contenido y ponerte a escribir.
Dominios

.com: es el ms comercial y recomendado.

.es: en Espaa. Recomendado.

.eu: en Europa. Poco usado.

.net, .org, etc.: slo si se ajustan a tu actividad.

.es.com: de segundo nivel. Otra opcin

Opcin rpida para Pymes

Existen multitud de plataformas automticas

que ofrecen la creacin, alojamiento y
mantenimiento de pginas web.

Son una opcin para pymes y autnomos.

Diseo de pginas web. Consideraciones

2 Diseo de pginas web.

Consideraciones
La primera pgina de la historia
Diseos de los 90 Futuristas
Con contadores...
La peor pgina de la historia?
Diseo de pginas web. Consideraciones

A la hora de disear una pgina web es importante

tener en cuenta:

El posicionamiento en buscadores.
La usabilidad y la experiencia de usuario.
Usabilidad y Gestin Web

3 El Diseo Centrado en el
Usuario (UCD)
 El Diseo Centrado en el Usuario (UCD)

Es una filosofa de diseo que se basa en las necesidades e

intereses del usuario, haciendo nfasis en la usabilidad y
comprensin del producto:

Habilidades y necesidades del

usuario.
Contexto de uso.
Tareas que va a realizar.

Fuente:
http://www.orangeaura.com/websites-and-people-what-needs-to-be-considered/usability-accessibilit
y/
El Diseo Centrado en el Usuario (UCD)

El objetivo es disear un sitio web de forma que sus

usuarios puedan servirse de l con un
mnimo de estrs y un mximo de eficiencia.
Usabilidad y Gestin Web

4 Qu es la experiencia de
usuario?
Qu es la experiencia de usuario?

Conjunto de percepciones y sensaciones que

desarrolla un usuario durante su relacin e
interaccin con los elementos de tu identidad
digital y, en concreto, con tu sitio web.
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 de los

usuarios.
Contenidos y servicios ofrecidos. Transmisin de valores

de marca.
Creatividad. Diseo visual.

Facilidad de aprendizaje y recuerdo.

Usabilidad. Navegacin eficiente. Atributo cualitativo de

web.
Usabilidad y Gestin Web

5 Usabilidad
Usabilidad

La usabilidad o facilidad de uso es un

atributo cualitativo de un pgina web
y una de las facetas fundamentales
que forma parte de la UX
(User eXperience o Experiencia de
Usuario)
Usabilidad. Atributos
Vlid
o

Usable Deseable

Aporta
Valor Accesible
Fcil de
encontrar

Creble
http://uxrave.com/post/6831688775/peter-morvilles-user-experience-honeycomb
-the
 Usabilidad

La clave de un sitio usable es que quien navega por l

consiga:

Entender su estructura.
Realizar con satisfaccin aquello que pretenda
realizar.
La usabilidad se basa en no
molestar ni hacer pensar en
exceso al navegante y en
hacerle fcil y grata la
experiencia en el sitio web.
Steve Krug
Usabilidad

Atributos
Consigo realizar la
Cunto tardo
compra Eficienc
Eficacia
ia
en realizar la
correctamente?
compra?
Cometo algn
error o todo sale
bien a la primera?
Satisfacci
n

Me ha parecido difcil?
Me he quedado con buena
sensacin?
Repetir y recomendar esta
web?
Usabilidad

Eficacia:
Relacionado con el nmero de errores que
comete el usuario en la consecucin de una
tarea.

Eficiencia:
Relacionado con el tiempo empleado por el
usuario para la consecucin de la tarea.
 Usabilidad

Satisfaccin de uso:

Percepcin del usuario respecto a la dificultad de

acometer la tarea.

Relacionado con que el sitio web sea subjetivamente

agradable.

Por satisfaccin se entiende la ausencia de

incomodidad y la actitud positiva en el uso del
producto.
Usabilidad y Gestin Web

6
Usabilidad y
Conversin
 Usabilidad y Conversin

Y qu conseguimos si creamos un sitio web

usable?

Mejorar nuestros ratios de conversin!

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 Conversin

La tasa de conversin es el porcentaje de visitantes

que ejecuta una accin: rellenan un formulario, se
suscriben (newsletter, feeds, canales 2.0...), descargan una
demo, etc.

Sitio web usable:

Alcanzar la mxima conversin de los
visitantes que llegan a mi sitio web.
Convertirlos en el objetivo para el que fue
diseado el sitio.
Usabilidad y Gestin Web

7 Principios de
Usabilidad
Principios de Usabilidad

Se comunica de manera inmediata

1

y clara el propsito, objetivo y
funciones de la pgina?
Principios de Usabilidad
Principios de Usabilidad

2 Se ofrecen al usuario mecanismos y

referencias claras que le permitan
orientarse fcilmente (dnde estn y qu
estn haciendo)?

Se mantiene informados a los usuarios

acerca de lo que est ocurriendo?
Principios de Usabilidad

Al pulsar el botn se
sustituye por una barra de
progreso.

Mensajes de feedback al
finalizar una tarea.

La fortaleza de la
contrasea se muestra en
tiempo real.
Principios de Usabilidad
Principios de Usabilidad

3 La pgina se adeca a los objetos

mentales del usuario, su lgica de la
informacin, su terminologa y lenguaje?

La informacin se muestra en un orden

lgico y natural?
Principios de Usabilidad
Principios de Usabilidad
Principios de Usabilidad

4 El sitio web permite al usuario

interactuar con l de manera fcil y
productiva?
Principios de Usabilidad

Ver y seleccionar mejor que

recordar y escribir.
Principios de Usabilidad

5 Tiene el usuario control y libertad

sobre la interfaz?

Se han evitado las acciones

intrusivas que lo limiten?
Principios de Usabilidad

Ejemplo:
Principios de Usabilidad

6 Se mantiene la consistencia en las

diferentes pginas/secciones, etc. del sitio?

Se siguen los estndares "de facto: la

estructuracin pginas, buscador, logo,
etc.?
Principios de Usabilidad

http://www.somosflow.com/desktop/
Principios de Usabilidad

7

El sitio web trata de prevenir posibles
errores?
Principios de Usabilidad

Hacer ms relevante la accin

primaria para evitar que la gente
se equivoque.

Otros ejemplos pueden ser:

Poner el foco automticamente en el cajetn de

bsqueda o los auto-recomendadores, que evitan
tambin errores tipogrficos en las bsquedas.
Principios de Usabilidad
Principios de Usabilidad

8 La interfaz facilita y optimiza el

acceso y la interaccin de los
usuarios con el sistema?

Flexibilidad y eficiencia de uso.

Principios de Usabilidad

La pgina no requiere volver a escribir la informacin

ya solicitada en pginas anteriores?
Principios de Usabilidad

9 El sitio ofrece informacin y un diseo

minimalista?

Texto organizado, conciso, fuentes

legibles?
Principios de Usabilidad

Las fuentes usan colores con suficiente

contraste con el fondo?
Principios de Usabilidad
Principios de Usabilidad

10 Los mensajes de error ayudan a los

usuarios a reconocer, diagnosticar y
solucionar errores?
Principios de Usabilidad
Principios de Usabilidad
Principios de Usabilidad

11 En caso de que sea necesario, se

ofrece una seccin de ayuda y
documentacin orientada a la
resolucin de problemas del
usuario?
Principios de Usabilidad
Usabilidad y Gestin Web

8 Beneficios de aplicar tcnic

de UX y Usabilidad
Beneficios de aplicar tcnicas de UX y
Usabilidad
Refuerzo de la imagen de marca: mejoras en la
percepcin del usuario (producto y proveedor).

Incremento de las ventas en sitios de comercio

electrnico: reduccin de la tasa de abandonos en
carritos de la compra.

Fidelizacin de clientes: aumento de la tasa de

conversin de visitantes a clientes.

Reduccin de costes de desarrollo: deteccin de los

posibles problemas en fases tempranas.
Beneficios de aplicar tcnicas de UX y
Usabilidad
Reduccin de costes en servicios de soporte/atencin
al cliente:

- problemas - consultas.

Aumento de las tasas de conversin (procesos

finalizados): registros, formularios, compras online, etc.

Reduccin de los costes de aprendizaje y

formacin: curvas de aprendizaje + controladas.

Optimizacin de procesos laborales en intranets:

reduccin de tiempos de ejecucin de tareas aumento
9 Bibliografa y recursos
web
Bibliografa y recursos web

Bibliografa

KRUG, STEVE (2006): No me hagas pensar: una aproximacin a la

usabilidad web. Prentice-Hall.
NIELSEN, JAKOB; Loranger, Hoa (2006): Usabilidad. Prioridad en el diseo
web. Anaya Multimedia.

Recursos web

Usability 101. Introduction to usability.

NNGroup.
Usability Geek.
Usabilidad y Gestin Web

Gracias!
 Una iniciativa de

AVISO IMPORTANTE
Este documento, su texto y grficos e imgenes, puede ser utilizado bajo una licencia Creative Commons de tipo Atribucin, No-Comercial. En caso de utilizarse este material o de la
creacin de un derivado, la atribucin se debe respetar citando la fuente como Actvate, Google Espaa 2014 y expresamente, si es posible, mediante un enlace activo a
http://google.es/activate. Revisado, marzo 2014.