Bases y fundamentos para el desarrollo de una experiencia digital consistente en dispositivos. Diseño orientado al usuario , Usabilidad, Diseño de la Interfaz y su relación con la Experiencia de usuario. Metodología, elementos y técnicas para el desarrollo de una comunicación consistente a lo largo de la experiencia digital. Algunas imágenes y esquemas pueden contener derechos de autor.

1. USABILIDAD Y ACCESIBILIDAD
EN PRODUCTOS DIGITALES
CARLOS CARVAJALINO

2. QUÉ ES USABILIDAD
La usabilidad es un valor empírico y resulta
de evaluar:
• Accesibilidad: Es el grado en el que alguien
usa un producto, sin importar sus
capacidades técnicas e intelectuales.
• Navegabilidad: Es que tan fácil de consumir
y navegar un sitio web. En otras palabras:
arquitectura de la información.

3. DIEZ PERLAS DE USABILIDAD (JNIELSEN, ABRIL 94)
1. Visibilidad del estado del sistema
2. Coteje el sistema y el mundo real.
3. Control del usuario y libertad
4. Consistencia y estándares
5. Prevención de errores
6. Reconocer en vez de recordar
7. Flexibilidad y eficiencia de uso.
8. Diseño estético y minimalista.
9. Ayudar al usuarios a reconocer,
diagnosticar y recuperarse de errores
10. Ayuda y documentación

4. USABILIDAD Y EXPERIENCIA DE USUARIO
Usabilidad
Efectividad
Eficiencia
Aprehensibilidad
Prevención de
errores
Memorable
Experiencia de Usuario
Satisfacción
Disfrute
Placer
Diversión
Valor

5. UX NO ES UI
Tema de investigación
Entrevistas cara a cara.
Creación de pruebas de usuario.
Recopilación y organización de estadísticas.
Creando personas
Diseño de producto
Redacción de reportajes
Requerimiento escrito
Artes graficas
Diseño de interacción
Arquitectura informacional
Usabilidad
Prototipos
Maquetado de la interfaz
Diseño de interfaz
Diseño visual
Creación de taxonomía
Creación de terminología
Redaccion
Presentando y hablando
Trabajando estrechamente conprogramadores
Coordinación de lluvia de ideas
Diseño cultura evangelismo
UX
UI

6. ELEMENTOS UX
¿Para quién?
Por qué les importa?
¿Qué pueden hacer que no
pudieran hacer antes?
¿Qué características
necesitan para hacerlo?
¿Cómo convergen
esas características?
Usuarios
Necesidades y metas
Usos
Características
Producto, marca y voz

7. CÓMO EL DISEÑO DE LA UI HACE LA UX
Diseño UI Resultado UX
Consistencia
haga que una sola función funcione igual en todo el
sitio,
El usuario lo intuye, esta cómodo y seguro de entender.
Reduce la carga cognitiva, lo que disminuye la curva de aprendizaje.
Instrucciones
si hay alguna duda sobre cómo funciona algo,
explíquelo.
El usuario lo comprende cómo funciona el sitio y evita la confusión.
Efectos de sonido
agrega diferentes efectos de sonido que se
corresponden consistentemente con diferentes
acciones.
El sonido reafirma la acción y reduce la confusión. Además, induce
el ambiente deseado. Mal utilizado podría ser molesto.
Esquema de colores
los colores que elige para fondos, texto y gráficos. Crean ambiente para la experiencia. Son culturales y
neurobiológico.
Opciones de personalización
permite al usuario elegir sus propios avatares,
configuraciones, pantallas, etc.
El usuario tiene una inversión personal en el sitio y se siente más
"propio", lo que lleva a una experiencia de usuario general más
positiva.

8. COMPETENCIAS UX

9. METODOLOGÍA UX

10. FLUJOGRAMA UX

11. ELEMENTOS UX

12. TÉCNICAS PARA UX
• Pruebas de Usabilidad
• Antes, durante y después
• Mapeo de viaje del cliente
Actividades, Pensamientos, Sentimientos,
Puntos de Contacto y de Dolor y
Oportunidades
• Entrevistas
Usuarios, partes interesadas y expertos
• Microcopy
Asegure consistencia, centrada en el contenido:
Interacciones y tareas, comunicación,
Pensamientos y sentimientos, ¿A dónde va
después ? ¿Qué deberían hacer?

13. MICROCOPY
Asegure una comunicación consistente,
centrada en el contenido:
• Interacciones y tareas
• Tipo de comunicación
• Pensamientos y sentimientos del
usuario
• ¿A dónde va el usuario después ?
• ¿Qué deberían hacer?

14. UX MANIFIESTO
• Validación temprana del cliente sobre
el lanzamiento de productos con un valor
desconocido para el usuario final
• Diseño colaborativo sobre
diseño en una isla
• Resolviendo problemas del usuario sobre
el diseño de la próxima característica "genial"
• Medición de KPI sobre
métricas de éxito indefinidas
• Aplicando herramientas apropiadas sobre
seguir un plan rígido
• Diseño ágil sobre
maquetas o especificaciones pesadas

15. ACCESIBILIDAD
• Comprender la accesibilidad
• Tecnología de asistencia
• Jerarquía
• Color y contraste
• Diseño y tipografía.
• Escritura
• Imágenes
• Sonido y movimiento
• Implementando accesibilidad

16. COMPRENDER LA ACCESIBILIDAD
Robusto
Se acomoda a varios
tipos de usuarios.
Específico
Admite diversos
métodos de entrada
Claro
Ayuda a navegar con
diseños apropiados

17. TECNOLOGÍA DE ASISTENCIA
Aumenta, mantiene o mejora las capacidades
funcionales de las personas con discapacidad,
a través de dispositivos como lectores de
pantalla, controladores direccionales, zoom y
audífonos.

18. JERARQUÍA
• Dónde esta? y qué es importante?
• La retroalimentación visual y táctil
muestran lo que está disponible.
• La navegación fluye con tareas claras y
pasos mínimos
• El control de enfoque en tareas
frecuente.
Simplificar la UI
• Elementos claramente visibles
• Suficiente contraste y tamaño
• Una clara jerarquía de importancia.
• Información clave a un vistazo
Transmitir importancia
• Coloque acciones clave arriba o
abajo
• Coloque elementos similares cerca

19. ENFOQUE
• El enfoque de entrada que sigue el orden del
diseño visual generalmente fluye desde la
parte superior a la parte inferior de la pantalla.
Puede atravesar del elemento más importante
al menos importante.
• Puntos de enfoque y movimientos:
• El orden en que los elementos reciben foco
• Adónde va el foco cuando el elemento
desaparece
• Los puntos de enfoque se pueden expresar con
la mezcla de signos visuales y texto

20. COLOR Y CONTRASTE
• Ayudan a ver e interpretar contenido,
interactuar y comprender las acciones.
• Comunican el ambiente, tono y
criticidad de la información.
• Primarios (De interfaz), secundarios
(neutros) y de acento o semánticos
• Relación de contraste
• Logotipos y elementos decorativos
• Otras señales visuales: daltónicos

21. MAQUETA Y
TIPOGRAFÍA
Tocar y señalar objetivos
• Objetivos táctiles: areas que responden a las
entradas del usuario.
• Objetivos de puntero: aplican al uso de
dispositivos de puntero de seguimiento de
movimiento
Espaciado de objetivos táctiles:
• Tamaño de una huella dactilar
• Separados por más de 8dp*

22. MAQUETADO SENSIBLE
• Ayudan a escalar el contenido en
relación con el tamaño de la
pantalla. Esto ayuda a evitar el
contenido truncado que puede no
mostrarse completamente en tipos
de dispositivos específicos o en
resoluciones variadas.
• Receptivo ( adaptable)
• Flexible ( fluido )

23. TIPOGRAFÍA
Ajustables al browser ( rem / sp )
• https://fonts.google.com
• https://fonts.adobe.com/
• https://www.dafont.com
En pareja, causan impacto visual, y comunican
mensajes muy distintos.
• https://fontpair.co
• https://fontjoy.com
• http://typ.io

24. ESCRITURA
• El texto, visible o no describe, conceptua y
asiste la navegación con titulos o enlaces.
• El texto alternativo traduce la interfaz visual
a una basada en texto.
• Etiqueta corta (125 caracteres)
• Describe una imagen a quien no la vé
• Un lector de pantalla lo leerá.
• Aparece si una imagen no carga.
• Ayuda apara mejorar el SEO.
• Subtítulos, texto adyacente y texto
incrustado

25. ESCRITURA
• Velocidad de lectura: los usuarios de
lectores de pantalla escuchan cada
elemento de la IU en voz alta. Use textos
cortos.
• Tipos y estados de control: los lectores de
pantalla pueden anunciar automáticamente
el tipo o estado de un control.
• Indicando elementos por acción: los
verbos de acción indican lo que hace un
elemento o enlace si se toca.
Search
Search Field
Download over Wi-Fi only
Download over Wi-Fi is selected

26. IMÁGENES
DECORATIVAS
• No necesitan subtítulos ni texto alterno
• No tiene que cumplir pautas de contraste
• Debe tener una etiqueta vacía (alt = ””)
para que los lectores y crawlers las
omitan
• Tienen poco peso y tienden a ser
pequeñas para mejorar la carga en
conexiones lentas
INFORMATIVAS
• Transmiten un concepto con facilidad.
• Son precisas y relevante el contexto
• Necesita subtítulos
• Necesita texto alternativo si el título o
el texto adyacente no explican la
imagen
• Tiene que cumplir con las pautas de
contraste de color

27. SONIDO Y MOVIMIENTO
• Use el sonido para navegar al
agregar etiquetas descriptivas a
los elementos de la interfaz de
usuario. (como TalkBack)
• Agregue controles de pausa o
use alternativas visuales al
sonido u otros elementos de
audio críticos y alertas, como
subtítulos o una transcripción.
• Habilite control de pausa en el
contenido que se mueve, se
desplaza o parpadea, si dura más
de 5s
• Limite la intermitencia a tres
veces en un período de un
segundo
• Evite parpadear áreas grandes
centrales de la pantalla

28. SONIDO Y MOVIMIENTO
• Controles cronometrados:
Ajustables para desaparecer después
de un cierto período de tiempo.
• Controles de alta prioridad: los
usuarios pueden pasar por alto los
controles que realizan funciones de
alta prioridad si desaparecen muy
rápido.
• Los controles que permiten
funciones importantes pueden
permitir a los usuarios volver a
activarlas o realizar la misma función
de otra forma
• El atributo content description se
puede agregar a componentes (como
botones, iconos y pestañas) que
contienen iconos sin texto visible.

29. IMPLEMENTANDO ACCESIBILIDAD
Mediante el uso de controles de plataforma estándar y HTML semántico (en la web), las aplicaciones
contienen automáticamente el marcado y el código necesarios para funcionar bien con la tecnología de
asistencia de una plataforma.
Cumplir con los estándares de accesibilidad de cada plataforma y respaldar su tecnología de asistencia
(incluidos los accesos directos y la estructura) brinda a los usuarios una experiencia eficiente.
Pruebe su diseño con la configuración de accesibilidad de la plataforma activada (tanto durante como
después de la implementación).

30. RECURSOS
VIDEOS
lifeofvids.com
pixabay.com
splitshire.com
wedistill.io
videezy.com
vidsplay.com
videvo.net
ICONOS
material.io/resources
developer.apple.com
flaticon.com
iconfinder.com
feathericons.com
fontawesome.com
thenounproject.com
dryicons.com
VECTORES
vexels.com
vector4free.com
vecteezy.com
freevector.com
vectorportal.com
freepik.com
freedesignfile.com
123freevectors.com
COLOR
khroma.co
colorhunt.co
culrs.com
coolors.co
colorleap.app
gradienthunt.com
colourlovers.com
webgradients.com

31. REFERENCIAS
EN INSTAGRAM
tubikstudio
wittydigital
agenceme
nick_buturishvili
dsgnr_
wearetonik
uidesignpatterns
gifux
Uxbites
twohabitsdesign/
EN LA WEB
https://heydesigner.com
https://blog.prototypr.io
https://sidebar.io
https://www.nngroup.com
https://uxmovement.com
https://designmodo.com
https://uxdesignweekly.com
https://alistapart.com
https://www.uxmatters.com
iamnotmypixels
ux_ui_wireframes
cadabrachallenge
agenceme
humble_ux
uitrends
Uxdesignmastery
Uxpuzzles
Wireflow
uxmemo

32. LITERATURA DE REFERENCIA

33. CITAS CITABLES