Presentación para estudiantes de segundo año de curso webmaster de la Academia Área, en Donostia. EL curso habla sobre metodologías de experiencia de usuario, usabilidad, UX, estrategia, etc. Se describen algunos de los perfiles que toman parte dentro del diseño web, así como un listado de referencias interesantes para los alumnos.

1. ExperienciadeusuarioyUsabilidad

2. 1. Introducción y definiciones
2. La palabra clave: ESTRATEGIA
3. Qué perfiles intervienen en el proceso de diseño
4. Un proyecto - Ejemplo
Índice

3. Diseño centrado en el usuario (UCD)

4. Diseñar con el usuario final
permanentemente en el centro de la
atención.
Cada etapa del proceso de diseño y desarrollo de un
proyecto web debería considerar al usuario final mediante:
- Actividades que lo involucren.
- Técnicas que permitan tener una clara percepción de sus
necesidades y preferencias.
ElDiseñoCentradoenelUsuario(UCD)

5. Se basa en las necesidades e intereses del
usuario, haciendo énfasis en la usabilidad y
comprensión del producto:
ElDiseñoCentradoenelUsuario(UCD)
http://www.orangeaura.com/websites-and-people-what-ne
- Habilidades y necesidades
del usuario.
- Contexto de uso.
- Tareas que va realizar.

6. Empecemos por cómo sería un proceso de compra
online llevado a la vida “física/offline”.
http://www.youtube.com/watch?v=3Sk7cOqB9Dk&list=PLC34DC3AFD26EF033&index=2&feature=plpp_video

7. El objetivo es diseñar un sitio web de forma que sus
usuarios puedan servirse de el con un mínimo de
estrés y un máximo de eficiencia.
ElDiseñoCentradoenelUsuario(UCD)

8. Y esto… … ¿cómo lo
hacemos?

9. ¿Sacamos la bola de cristal?.... ;P

10. Con un enfoque desde el inicio, recogiendo
datos de manera estructurada, sistemática y
objetiva, hacia:
 los usuarios internos y externos.
 las tareas que han de realizar con el
producto.
ElDiseñoCentradoenelUsuario(UCD)

11. De Hitz Kareaga
El Diseño Centrado en el Usuario (UCD)

12. También es necesario contextualizar
el momento actual…

13. El acceso multiplataforma y la difusión de los
smartphones y tablets no tiene marcha atrás.
¡Miremos hacia adelante!

14. Experiencia de usuario

15. ¿Qué es la experiencia de usuario?
La sensación, sentimiento y
satisfacción del usuario…
…respecto a un producto…
…resultado de interactuar con el
producto digital: la web,app, etc.
Experiencia de usuario

16. Las personas somos clientes, consumidores y
usuarios.
Y cómo tal, tenemos experiencias
con las marcas, sus productos y sus
servicios.
Entender la UX desde una perspectiva global.
Experiencia de usuario

17. Designforusers
Kris Colvin
Experiencia de usuario

18. Conjunto de percepciones y sensaciones que
desarrolla un usuario durante su relación e
interacción con los elementos de tu identidad
digital, y en concreto con tu sitio web…
Experiencia de usuario

19. Concepto global que depende de numerosos
factores:
- Utilidad y valor del producto/servicio.
- Contenidos y servicios ofrecidos.
- Transmisión de valores de marca.
- Respuesta a las necesidades y expectativas de los
usuarios.
- Creatividad.
- Diseño visual.
- Usabilidad/ Arquitectura de la información consistente /
Navegación eficiente.
- Facilidad de aprendizaje y recuerdo.
Experiencia de usuario

20. Cuéntame…¿Qué problema solucionas?
Experiencia de usuario

21. Usabilidad

22. Usabilidad
La usabilidad o “facilidad de uso” es una de las
facetas fundamentales que forma parte de la UX.
Pero no lo es todo, debemos cuidar todos los
aspectos de nuestro sitio web.
http://uxpassion.com/services/user-ex

23. “La usabilidad se basa en no
molestar ni hacer pensar en
exceso al navegante (Krug) y en hacerle
fácil y grata la experiencia en el sitio
web.”
Usabilidad

24. Usabilidad

25. Eficacia Eficiencia
Satisfacción
Atributos
¿Consigo realizar la
comprar correctamente?
¿Cometo algún error o
todo sale bien a la primera?
¿Cuánto tardo en
realizar la compra?
¿Me ha parecido difícil?
¿Me he quedado con buena sensación?
¿Repetiré y recomendaré esta web?
Usabilidad

26. Estrategia

27. ¿Tienes un plan?Estrategia

28. Marca tus objetivos
- Cuantificables
- Realistas
- Medibles
Comprueba, mide, modifica, y vuelve. La estrategia en
internet debe estar viva
Estrategia

29. Tipo de objetivos  Conversión
- Conseguir visitas
- Que las visitas se conviertan en leads: contacto, descarga
de material, compartir (mail, redes sociales, etc.)
- Trasacción monetaria  Venta: Compras, contrataciones
etc.
Estrategia

30. Los usuarios: ¿Para quién diseñamos?
- Todo el mundo…Mejor prueba otra respuesta
- ¿Cuál es el perfil de los usuarios?
- Diferenciemos las personas a las que nos dirigimos…es
imposible que seamos interesantes para todo el mundo.
- Realiza una ficha / descripción breve de los personajes a
los que te diriges.
- Priorízalos. Puedes dirigirte a varios grupos…
Estrategia

31. Estrategiawww.asturias.es

32. Contexto de uso
¿Dónde y cómo se utiliza mi web?
¿Desde qué dispositivo?
¿Consideraciones?
Y esto…se puede saber…prever…
Estrategia

34. ¿CómolohacemosenTSE?

35. Test de usuario sobre prototipo de
baja fidelidad
Entrevistas internas stakeholders:
diagnostico situación, necesidades,
objetivos internos, etc..
Fase 1 – INVESTIGACION
Y ANALISIS
Definición PO / segmentos y
priorización
Detección necesidades: encuestas
online / focus / entrevistas…
Catalogación contenidos y servicios
Fase 2 – CONCEPTO Y
DISEÑO
E-branding: posicionamiento y
objetivos
Nuevo contenidos, servicios y
funcionalidades sitio web
Consultoría SEO
Sector: Benchmarking competencia,
buenas prácticas y tendencias.
Card sorting
Actualización catalogación contenidos
Árbol de contenidos
Prototipado navegable de baja
fidelidad
Fase 3 –DESARROLLO E
IMPLANTACION
Diseño visual
Desarrollo sitio web
Seguimiento UX
Test de usuario sobre sitio en
desarrollo / producción + ajustes
Implantación
MetodologíaTSE
Evaluación experto sitio web

36. ¿Cómoplanteounaweb?
Algunos consejillos 
1.Reúnete con la persona que te hace el encargo.
Pregúntale sus objetivos y los públicos.
2.Recopila toda la información que se vaya a incluir en la
web. Puedes empezar por analizar la web actual y listarla
en un excel.
3.Analiza sitios web de referencia. Pueden ser su
competencia o no. Por lo general las mejores referencias
están fuera
4.Plantea el contexto de uso. ¿Es importante para el cliente
la visualización en móviles?

37. ¿Cómoplanteounaweb?
Más consejillos Para diseñar 
1.No me hagas pensar, o me voy
2.Recuerda, las personas no leemos, hojeamos ¡Sintetiza!
3.Los usuario tenemos prisa. ¿Recuerdas el cable y la bomba?
4.Tranquilo, ya trasteo yo. Ya me las arreglaré. Y si no, cable azul.
5.Dibuja las páginas, plasmando las jerarquías ¡Prototipado!

38. ¿Cómoplanteounaweb?
Más consejillos Para diseñar 
1.Deja claro dónde se puede hacer clic. Estandariza las opciones de
navegación
2.¿Sonido? NO, gracias. Y animaciones las justas. No despistes, recuerda que
tienes objetivos.
3.No me cuentes un cuento. Sintetiza los textos con mensajes claros.
4.Permite a los usuarios regresar al punto anterior, hacer y deshacer: Todos
nos equivocamos
5.Cuida el nombre de las páginas
6.Ofrece orientación al usuario del lugar en el que se encuentra

39. ¿Cómoplanteounaweb?
EN resumen
1.Recopila toda la información del cliente
2.Ordénala, crea las secciones. Si son muchas, ayúdate de unas tarjetas, como
si jugaras al solitario. Agrúpalas
3.Dibuja la web en papel. ¡Prototipa!
4.Cuéntale la idea al cliente. Seguro que te cuestionará muchas cosas
5.Diseña y déjala muy bonita. Pero ojo, el diseño utilízalo para:
1. Jerarquizar información
2. Destacar mensajes
3. Diferenciar todos los elementos de la web.

40. Elprocesoenagencia
Perfiles UX
1.Investiga el entorno
2.Investiga al cliente
3.Plasma la información en un gran documento
4.Inventaria la información y la ordena en un árbol de contenidos.
5.Prototipa y diseña la interacción y funcionalidad.

41. ElprocesoUX
Controlamos y estamos encima del proyecto
¡Pero no somos tan malos!

42. Elprocesoenagencia
El Diseñador web
1.Debe ser consciente de la información del cliente y todo el trabajo previo
realizado
2.Debe trabajar codo con codo con el Consultor UX
3.Debe guiarse por las directrices marcadas en el prototipo. Las necesidades e
imagen de marca del cliente
4.Debe aportar soluciones a lo marcado en el prototipo y sumar. El diseño es
una parte muy importante, pero…no lo es todo.

43. Elprocesoenagencia
El Maquetador
1.Debe conocer a la perfección el proceso.
2.Debe estar trabajando y pensando en las funcionalidades / interacciones con
el creativo UX en el momento del prototipo. Debe conocer muy bien las nuevas
tecnologías para poder diseñar una experiencia de uso enriquecida.
3.Debe hablar con el diseñador sobre las posibilidades que hay de que el
diseño se pueda maquetar o no.

44. Elprocesoenagencia
El Programador
1.Debe conocer a la perfección el proceso.
2.Debe conocer las funcionalidades e interacciones marcadas en el proceso de
prototipado y realizar un análisis funcional.
3.Debe estar en contacto permanente con el maquetador. Los CSSs pueden
verse descuadrados al juntarlos con el gestor de contenidos.

45. Elprocesoenagencia
Otro perfiles
1.SEO: influye en el estudio previo, en la arquitectura, textos, nombre de
secciones y categorías, etc.
2.Analítico: Responsable de analizar toda la actividad de un sitio web. Nos dirá
en qué páginas nos abandonan, el éxito de unos contenidos sobre otros. Así
como tipos de usuario, procedencia y sistema operativo del que se conectan.
3.Social Media Manager: Puede decirnos y hacer un pequeño pulso de lo que
se dice de nosotros en redes sociales.

46. Elprocesoenagencia
¿Quién tiene más poder? ¿Diseño?¿UX?¿SEO?

47. Mandaelcliente,
perodebemosdefendertantolaperspectivadelusuario
comoelobjetivodeltrabajo

48. Algunosbuenosejemplos
Para observar
1.http://www.milanuncios.com/
2.http://www.vinissimus.com/es/index.html
3.http://www.ibergour.com/es/
Para evitar
1.http://www.renfe.es
2.www.kutxa.net
3.Banca electrónica: Laboral, Kutxanet…da igual 

49. ¡Gracias!
- Twitter: @theSocialUX
- Facebook
- Google +:
- SlideShare
- Web: www.thesocialexperience.es

50. Libros:
- No me hagas pensar. Steve Krug
- El diseño de las cosas cotidianas. Donald. A Norman
- El diseño emocional. Donald A. Norman
- Revista de estrategia e Interacción: www.capire.info
- Juan Carlos Camus: www.usando.info
- Jorge Barahona: www.jbarahona.com
- Jesse Jame Garret : http://blog.jjg.net/
- Nacho Gil -Fundamentos para el diseño de la experiencia de usuario
online:
http://www.slideshare.net/nachogil/elementos-de-la-experiencia-de-usuario-online-0
Bibliografía y referencias

51. Arquitectura de la información:
No sólo usabilidad: http://www.nosolousabilidad.com
- Arquitectura de Información: análisis histórico-conceptual - Rodrigo
Ronda León.
- Revisión de técnicas de arquitectura de información - Rodrigo Ronda
León.
- Diseño de Arquitecturas de Información: Descripción y Clasificación -
Yusef Hassan Montero y Ana Núnez Peña.
Métodos de arquitectura de la información - Mauricio Candamil Llano
http://www.slideshare.net/maocandamil/metodos-arquitectura-de-informacion
Hipertexto. Net
http://www.hipertext.net/web/pag206.htm#3
Bibliografía y referencias

52. Arquitectura de Información y Diseño Centrado en el Usuario - Juan
David Saab:
http://www.slideshare.net/juansaab/arquitectura-de-informacin-y-dcu-diseo-centrado-e
Arquitectura de información y su relación con el diseño estratégico -
Omar Sosa Tzec:
http://www.slideshare.net/Tzek/diseno-estratgico-y-arquitectura-de-informacin
Entregables en un proceso de Arquitectura de Información - Astrolabio,
agencia web
http://www.slideshare.net/astromario/arquitectura-de-informacin-entregables
Bibliografía y referencias

53. Experiencia de usuario y social media:
-Marco Gallen ¿Cómo aprovechar las redes sociales para mejorar la
experiencia de usuario? :
http://marcogallen.com/blog/usabilidad/%C2%BFcomo-aprovechar-las-redes-social
-Roberto Igarza - experiencia de usuario: cómo las redes sociales amplifican
el descontento:
http://robertoigarza.wordpress.com/2009/08/10/experiencia-de-usuario-como-las-
-UX Matters - The Social Buzz: Designing User Experiences for Social Media:
http://www.uxmatters.com/mt/archives/2009/06/the-social-buzz-designing-user-e
-UX Magazine - The evolved user experience: using social media technologies
to drive ux design and product strategy:
http://uxmag.com/strategy/the-evolved-user-experience
Bibliografía y referencias

54. Experiencia de usuario y social media:
-Simple Line Design - User Experience and Social Media Integration:
http://www.simplelinedesign.co.uk/blog/user-experience-and-social-media-
integration
-Joanna Pineda - Creating an Integrated, Layered User Experience Across
Your Social Media Pages: http://www.thematrixfiles.net/blog/creating-an-
integrated-layered-user-experience-across-your-social-media-pages
-Bob Murray - Social Media Within A User Experience Team:
http://blog.redweb.com/2010/04/01/social-media-within-a-user-experience-
team
-Javier Varela – Social Media Plan:
http://www.slideshare.net/javiervarela/social-media-plan-javier-varela-
jornadas
-Jerome Nadel: Digital UX Strategy:
http://www.slideshare.net/JeromeNadel/DigitalUXStrategyvFinalreduced
Bibliografía y referencias

55. Usabilidad – Conversión
-SEO Colombia - Usabilidad: Factores de conversión y su importancia
http://www.seocolombia.com/blog/usabilidad-factores-de-conversion-y-su-
importancia
-OptimizaClick - Conversión y usabilidad web
http://www.optimizaclick.com/conversion-web
-David Martin Morales - Usabilidad y Métricas enfocadas a la Conversión
(Editato)
http://marketing-on-line.blogspot.com/2009/06/usabilidad-y-metricas.html
-Iván Serrano - Cómo diseñar correctamente una Landing Page: las mejores
prácticas y ejemplos
http://www.ivoserrano.com/diseno-web/como-disenar-correctamente-una-
landing-page-las-mejores-practicas-y-ejemplos
Bibliografía y referencias

56. Experiencia de usuario y Usabilidad por The Social Experience se encuentra
bajo una Licencia:
Creative Commons Reconocimiento-CompartirIgual 3.0 Unported.