Este documento presenta una introducción al curso de Experiencia de Usuario (UX) impartido por Paula Gaviria. El curso consta de dos módulos, uno sobre el contexto y objetivos y otro sobre la implementación práctica. Se establecen reglas como no usar celulares y mantener el enfoque. La arquitectura de información es explicada como la organización del contenido, usuarios y contexto. Conceptos clave como navegación, usabilidad e interfaz de usuario son definidos. Finalmente, se proponen ejercicios prácticos

2. Experiencia de Usuario
Paula Andrea Gaviria A.

3. CONOZCÁMONOS
1. Nombre
2. Como se define en 1 palabra
3. Primer concierto al que asistió
@pgaviriaa

4. Nombre: Paula Gaviria
Me defino como:
Apasionada
Primer Concierto:
…....

5. Generalidades
del Curso

6. Reglas del juego

7. Programa
• Tendremos dos módulos temáticos uno sobre: el contexto, el qué y otro sobre
el cómo, el hacer.
• Trabajaremos juiciosos para salir a tiempo y avanzar
• No celulares, si necesitamos atender salgamos del salón.
• Foco y concentración para lograr el objetivo
• ¿Otras sugerencias?

8. Arquitectura de la Información

13. UX = Arq. Info
Conformado por el
CONTEXTO, USUARIOS,
CONTENIDO.

14. Contenidos
• Documentos, Datos,
• Volumen, contenido
• Dinamismo, estructura

15. Usuarios
• Tarea
• Necesidad
• Búsqueda
• Comportamiento
• Experiencia

16. Contexto
• Objetivos de Negocio
• Financiamiento
• Políticas
• Tecnología
• Recursos
• Limitaciones

17. Def.Estrategia

18. Para hablar de
Arquitectura de Info
• Navegación
• Usabilidad – Patrones
y Guidelines
• Contenidos y Labels
• Manejo de íconos

19. Navegación
Navegación

20. ¿Qué es la Usabilidad?

21. “Cualidad de la página web o del programa informático que son
sencillos de usar porque facilitan la lectura de los textos,
descargan rápidamente la información y presentan funciones y
menús sencillos, por lo que el usuario encuentra satisfechas sus
consultas y cómodo su uso”.

23. Nielsen expone que lo habitual es que un usuario no lea con detalle ni siquiera una
mínima parte de los textos de una página web. En su lugar, y por economía de tiempo,
el usuario se limita a ojear la página. Es decir, el usuario realiza un rápido barrido
visual de cada página buscando elementos que llamen su atención. Por tanto es
fundamental la utilización de elementos como:
•Palabras resaltadas mediante negrita y cambios de color o de tamaño. En este sentido
los hipervínculos actúan como elementos de atracción visual pues se destacan del resto del texto.
•Listas de elementos con viñetas o numeradas.
•Títulos de sección y titulares breves intercalados (también llamados 'ladillos').
Debido a esta economía de lectura, según Nielsen, el contenido de un texto debe organizarse
correctamente para ganar la atención del lector. Por ejemplo las ideas más importantes deben
aparecer al principio, y luego la argumentación de la misma. De esta forma, nos aseguramos de que
el posible lector recuerde mejor la información. Nielsen recomienda usar menos del 50% del texto
usado habitualmente en una publicación escrita. Los usuarios se aburren con los textos largos. Los
párrafos deben ser cortos, de dos o tres frases únicamente y muy directos en su estilo.
Por otro lado, asegura que los usuarios aprenden pronto a ignorar los mensajes
publicitarios exagerados, incluso cuando intentan aparecer como información objetiva
camuflados en el texto.

27. La usabilidad hoy
es un “must” no un
“nice to have”

28. Es lo mínimo que
los usuarios
esperan

29. Es lo mínimo que
los usuarios
esperan

30. ¡MANOS A LA OBRA!

46. http://cssmenumaker.com/
Menús
• Principal
• Secundaria
• Auxiliar o relacionado

47. Menús

48. Menús

49. Guidelines y patrones
• Las pantallas son cada vez más pequeñas
• El tiempo es cada vez menos
• El poder de lo simple – keep it simple
• Minimo contenido
• Fácil URLs
• Sing In Permanentes
• Poco Scroll
• Contenidos alternativos (Video, audio)
• Fast, fast, fast – Carga
• Consistencia visual
• No inventar lo que no se necesita
• Ir a los Eurísticos – Atajos Mentales (Psicología)
• Regalo: E-Book ../Downloads/the-basics-of-ux-design.pdf

50. Recordemos:
El sentido común es el menos común de
los sentidos

51. ¡MANOS A LA OBRA!

52. • Dividamonos en grupos
• Selecciones que vamos a hacer:
Site – App
• Seleccionemos empresa
• Establezcamos lo básico
TALLER POR GRUPOS

53. • POE
• OBJETIVO DEL CANAL
• UX
TALLER POR GRUPOS

54. • Wireframes
• ¿Qué son?
• Usemos Balsamiq

55. Es una guía visual que representa el
esqueleto o estructura visual de
un sitio web.1
El wireframe esquematiza el diseño
de página u ordenamiento del
contenido del sitio web, incluyendo
elementos de la interfaz y sistemas
de navegación, y cómo funcionan en
conjunto.2​ Usualmente este esquema
carece de estilo tipográfico, color o
aplicaciones gráficas, ya que su
principal objetivo reside en la
funcionalidad, comportamiento y
jerarquía de contenidos.

56. EMPATHYMAP

57. UNAGUIADEE.M

58. Diseño de información[
diseño de información es la ubicación en la presentación y priorización de
información de manera que facilite el entendimiento. Representa la información
de manera efectiva para una comunicación clara. Para sitios web, los elementos
informativos deben estar ordenados de manera que reflejen los objetivos y
tareas del usuario.
¿Sabemos Cuáles son estos? Identifiquémoslos.

59. Diseño de navegación
El sistema de navegación provee un
conjunto de elementos en pantalla que
permiten al usuario moverse entre
páginas del mismo sitio web. El diseño
de navegación debe comunicar la
relación entre los enlaces que contiene
de forma que los usuarios entiendan las
opciones que tienen para navegar el
sitio. A menudo, los sitios web contienen
múltiples sistemas de navegación, tales
como navegación global, navegación
local, navegación suplementaria,
navegación contextual. Este diseño
permite dar una vista de manera global,
de la ubicación y desplazamiento a
través de las diferentes páginas de un
sitio web.

60. Diseño de interfaz
diseño de la interfaz de usuario incluye seleccionar y ordenar los elementos de la interfaz para permitir
a los usuarios interactuar con la funcionalidad del sistema. El objetivo es facilitar la usabilidad y
eficiencia tanto como sea posible.
Elementos comunes que se encuentran en el diseño de interfaces son los botones de acción, campos
de texto, cajas de verificación, botones radiales y menús desplegables.

61. Ejercicio

62. Miremos el siguiente sitio web por
unos minutos:
Ahora todos listos vamos a hacer su
versión móvil.
Todos en equipos de 4
.

63. Un jugador de
cada equipo rota
a otro y es
testeado el
diseño.
Se sacan
mejoras por
implementar.
Se realizan al
diseño.
Un jugador de
cada equipo rota
a otro y es
testeado el
diseño.
Se sacan
mejoras por
implementar.
Se realizan al
diseño.

64. Se sacan
recomendaciones
y se da una nueva
iteración
Se comparan
versiones 1,2,3,4.
Unimos la
calidad del
resultado.
¿Qué vemos?

66. … El que no
Los hace…
… Los ve hacer

67. Tips de Ux

68. … El que no
Los hace…
… Los ve hacer

69. … El que no
Los hace…
… Los ve hacer
El sentido
común, es el
menos común
de los
sentidos

70. … El que no
Los hace…
… Los ve hacer
Al alcance
De nuestro
Público
Snack!

71. … El que no
Los hace…
… Los ve hacer
Aprovechando
La data y el
medio

72. … El que no
Los hace…
… Los ve hacer
Resumiendo

73. … Los ve hacer

75. Human Center Design

76. Herramientas UX

77. Herramientas para Wireframing:
Balsamiq: http://balsamiq.com
Mockingbird: http://gomockingbird.com
Moqups: http://moqups.com
Mockflow: http://www.mockflow.com
UXPin: http://uxpin.com
Pencil Project: http://pencil.evolus.vn
Herramientas para Prototipado
Axure: http://axure.com
FluidUI: http://fluidui.com
Hotgloo: http://hotgloo.com
iRise: http://irise.com
Just In Mind: http://justinmind.com
Pidoco: http://pidoco.com
Proto.io: http://proto.io
Protoshare: http://protoshare.com
UXPin: http://uxpin.com
Herramientas para hacer Diagramas:
Cacoo: http://cacoo.com
Creately: http://creately.com
Draw.io: https://www.draw.io (free)
Gliffy: http://www.gliffy.com
Omnigraffle: http://www.omnigroup.com/products/omnigra
ffle
Lovely Charts: http://www.lovelycharts.com
Lucid Chart: https://www.lucidchart.com
Herramientas para Analítica web:
Adobe
Analytics: http://www.adobe.com/solutions/digital-
analytics.html
Google Analytics: http://google.com/analytics
KissMetrics: http://kissmetrics.com
MixPanel: http://mixpanel.com
Piwik: http://piwik.org

78. Herramientas de Feedback:
GetSatisfaction: https://getsatisfaction.com
Kampala: http://www.kampyle.com
Sur vey.io: http://survey.io
UsabilityTools: http://usabilitytools.com/tools/feedb
ack-form/#tool-description
UserVoice: http://uservoice.com
Qualaroo: https://qualaroo.com
4Q Survey: http://www.q4survey.com
Grabadores de sesión:
Clicktale: http://www.clicktale.com/default.aspx
GhostRec: http://www.ghostrec.com
MouseFlow: http://mouseflow.com
OpenHallway: http://www.openhallway.com
Tealeaf: http://www.tealeaf.com
UsabilityTools: http://usabilitytools.com/tools/visitor
-recording/#tool-description
UserReplay: http://www.userreplay.co.uk
Rastreo de clicks:
Clickheat: http://www.labsmedia
.com/clickheat/index.html
Clicktale: http://www.clicktale.co
m/default.aspx
CrazyEgg: http://www.crazyegg.
com
UsabilityTools: http://usabilitytoo
ls.com/tools/clicktracking/#tool-
description
UserZoom: http://www.userzoo
m.com

79. Usabilidad para testing remoto:
BagelHint: https://www.bagelhint.com
Chalkmark: http://www.optimalworkshop.com/chalk
mark.htm
Ethnio: http://ethn.io
Feedback Army: http://www.feedbackarmy.com
Five Second Test: http://fivesecondtest.com
Keynote: http://www.keynote.com
Loop11: http://www.loop11.com
TryMyUI: http://www.trymyui.com
UsabilityTools: http://usabilitytools.com
Usabilla: http://www.usabilla.com
Userlytics: http://www.userlytics.com
User Testing: http://www.usertesting.com
Usabilidad offline testing:
Camtasia: http://www.techsmith.com/camta
sia.html
MediaCam: http://netu2.com
Morae: http://www.techsmith.com/morae.ht
ml
Silverback: http://silverbackapp.com
Herramientas para A/B testing:
Adobe Test and
Target: http://www.adobe.com/products/tes
tandtarget.html
Artisan: http://useartisan.com
GlobalMaxer: http://www.globalmaxer.com
Optimizely: http://optimizely.com
Visual Website
Optimiser: http://visualwebsiteoptimizer.co
m

80. https://medium.com/@MotoCMS/25-herramientas-ux-de-
dise%C3%B1o-para-simplificar-la-rutina-diaria-de-
dise%C3%B1ador-7774943a731b
http://blog.acantu.com/9-herramientas-ux-designers/
http://www.saraclip.com/recursos-ux/
http://www.torresburriel.com/weblog/2016/04/28/herrami
enta-ux-dominarlos-todos/

81. Taller Final