Introducción a la
Construcción y
Diseño de Interfaces
de usuario
⮚ ¿Qué es la Interacción Persona-
Contenidos Máquina?
⮚ El Usuario
⮚ ¿Qué se debe tener en cuenta en la
interacción entre el usuario y el
entorno?
⮚ Interfaces de Usuario
⮚ Experiencia de Usuario
⮚ Diseño centrado en el usuario
2
Interacción Persona-Máquina - IPM
Entornos Interactivos Personas
3
El Usuario
⮚ Persona que interacciona con un
sistema informático
⮚ Persona
⮚ Individuo de la especie
humana
⮚ Interacción
⮚ Todos los intercambios que
suceden entre las personas y
el ordenador [Baecker and
Buxton, 1987]
5
6
¿Qué se debe
tener en
cuenta en la ⮚ Interfaz de usuario: es la parte del sistema
interacción que permite a un usuario interactuar de forma física y
entre el cognitivamente.
usuario y el ⮚ Experiencia de usuario: es la percepción
entorno? dejada en la mente de un usuario después de una
serie de interacciones entre usuarios, dispositivos y
eventos – o una combinación de estos.
Dispositivo Usuario
7
Interfaces
➢ El objetivo del diseño de interfaces de
de usuario es definir los contenidos gráficos y
usuario textuales aplicando principios básicos de
diseño para conseguir una experiencia de
usuario óptima.
➢ Crea elementos interactivos y se preocupa de
que se vean bien en todas las plataformas
(móvil, tableta, web).
➢ Abarca cualquier objeto, producto multimedia,
plataforma o sistema que haya sido diseñado
y programado.
8
[Link]
9
Disciplinas que intervienen en el Diseño IU
➢ Disciplinas transversales
▪ Experiencia de Usuario
▪ Interacción Persona-Máquina
➢ Disciplinas más concretas
▪ Diseño Visual
▪ Diseño de Interacción (IxD)
▪ Arquitectura de Información (IA)
▪ Programación
▪ Diseño Industrial
A
En la práctica los límites entre ellas
son difusos
10
Interfaces de usuario
• Diseño Visual. Disciplina para creas piezas gráficas, logos, productos, etc.
Es un arte sinónimo de Diseño Gráfico y/o Comunicación Visual, vocabulario
visual, señalética, colores, tipografía, etc.
• Diseño de Interacción (IxD). definición del comportamiento de un producto
digital y la disposición de elementos interactivos en pantalla definiendo
flujos, secuencias y sonidos en el diseño de la interfaz ele usuario.
• Arquitectura de Información (IA). Conceptos que se siguen utilizando en la
creación de contenidos, diagramas y estructuras para organizar la
información en pantalla de manera lógica y consistente para el usuario.
Dichos elementos constituyen una actividad previa indispensable para el
diseño posterior de la IU
• Programación
• Diseño Industrial
11
Elementos ➢ Diseño de interacción (cómo responde el
sistema)
➢ Guías de interacción (estados del sistema)
➢ Diseño de elementos (botones, formularios…)
➢ Diseño visual (iconos, imágenes…)
➢ Guías de estilo (paletas de color, fuentes de
texto…)
12
Elementos Interfaces
➢ Diseño de interacción de usuario
(cómo responde el
sistema)
➢ Guías de interacción (estados del sistema)
• Diseño visual
➢ Diseño de elementos• (botones,
Diseño de formularios…)
interacción
• Arquitectura de
información
➢ Diseño visual (iconos,• imágenes…)
Programación
• Diseño industrial
➢ Guías de estilo (paletas de color, fuentes de
texto…)
13
Aspectos a ➢ Uso de dispositivos I/O
considerar
➢ Adaptación a las tareas
➢ Los controles y sus comportamientos
➢ Navegación
➢ Integración entre aplicaciones
➢ Han de ser usables y accesibles
14
Principios generales de una IU
Los elementos deben estar correctamente estructurados,
respondiendo a una clara y lógica jerarquía visual.
➢ Definir partes que van juntas y aquellas que traten el mismo tema.
➢ Diferenciar elementos que son distintos.
➢ Relacionar los que forman un conjunto.
15
Principios
El diseño tiene que utilizar elementos
generales
⮚
convencionales que sean fáciles de entender y de
de una IU utilizar para el usuario y que respondan a la simpleza o
familiaridad.
➢ Tipografía abierta que pueda leerse con facilidad.
➢ Tamaño de letra adecuado
➢ Comunicación adecuada, utilizando un lenguaje
sencillo, y una buena redacción de contenidos.
⮚ El diseño debe ser flexible con margen de
adaptabilidad en distintos dispositivos.
⮚ La funcionalidad del diseño debe ser eficiente para que
el usuario complete las tareas de forma correcta y
rápidamente.
16
Principios generales de una IU
⮚ Los elementos del diseño deben ser totalmente claros para que el usuario
pueda encontrar las opciones a realizar en un primer vistazo.
⮚ Cualquier cambio, modificación o error que esté sucediendo en la interfaz, debe
ser percibido por el usuario de forma perceptible e inmediata.
17
Ejemplo: AMAZON
18
Experiencia de usuario
➢ Experiencia que tiene cualquier usuario cuando está
interactuando con un producto, servicio o aplicación.
➢ Concepto UX: proceso de mejorar la satisfacción del
usuario trabajando en la usabilidad, la accesibilidad y
la interacción.
➢ El objetivo de la experiencia de usuario es realizar
un balance entre los objetivos de su cliente y
las necesidades del usuario final, dándole prioridad.
Poco valor tiene un sistema que cumple con las reglas
del negocio y con lo que el cliente inicialmente quiere, si
el usuario final no es capaz realizar sus tareas de
manera fácil y satisfactoria.
19
Puntos en los que se basa la experiencia de usuario
➢ Usuario: Conocer a la perfección las necesidades del
usuario así como las tareas representativas que tiene que
realizar con el producto.
➢ Usabilidad: Es la medida en la que un producto se puede
usar por determinados usuarios para conseguir objetivos
específicos con efectividad, eficiencia y satisfacción en
un determinado contexto de uso.
➢ Accesibilidad: Se debe conseguir que cualquier tipo de
usuario tenga acceso al producto, independientemente
de sus capacidades o situación.
➢ Deseabilidad: Involucra todos los elementos de imagen,
diseño e identidad que provocan emociones de
apreciación y atracción en el usuario.
➢ Utilidad: Es el atributo que mide si efectivamente la
herramienta está haciendo lo que el usuario
necesita o espera de ella.
20
Puntos en los que se basa la experiencia de usuario
➢ Confianza: Una buena experiencia de
usuario es cuando se les proporciona
confianza.
➢ Información de contacto.
➢ Opiniones de otros usuarios.
➢ Recibir información tras las
acciones.
➢ Estructura de la información: Los
contenidos que se visualicen deben estar
jerarquizados según su importancia.
➢ Navegación: Debe tener un orden visual,
cumpliendo 3 principios fundamentales: “de
dónde vengo”, “dónde estoy” y “dónde
puedo ir”.
21
Puntos en los que se basa la experiencia de usuario
➢ Soporte al usuario: Dar solución a posibles errores: “cuál ha sido el error” y “cómo
puedo salir de él”.
➢ Diseño: Finalmente el diseño engloba todos los elementos anteriormente mencionados
y les da una estructura lógica.
➢ Diseño de Interacción: Son las acciones que se ofrecerán al usuario en cada
momento, y cómo recibirá el feedback de la aplicación.
➢ Diseño gráfico: Es darle el aspecto gráfico o visual al producto. Es muy importante ya
que la impresión que tenga el usuario determina cuanto la usará.
22
Usabilidad ¿Por qué?
⮚ ¿Por qué las cosas son difíciles de utilizar?
⮚ El IU es la puerta del usuario a la funcionalidad del
sistema subyacente
Donald Norman.
The design of
everyday thing
⮚ Un IU mal diseñado es un factor que frena el uso de
las funcionalidades
⮚ Objetivo: diseñar IU usables, fáciles de aprender y
de utilizar
23
Accesibilidad ¿Por qué?
• Garantiza que un producto o servicio sea accesible a cualquier
usuario, con independencia de sus capacidades
• Accesibilidad = Usabilidad Universal
⮚ Tecnología asequible y útil adaptada a la
diversidad [Ben Schneiderman; Communications of the ACM 2000]
24
Tener en cuenta: UX no es sólo IU
➢ Cuando se crea una Interfaz de Usuario se abordan preguntas como:
➢ ¿Para qué tipo de dispositivo vamos a diseñar?
➢ ¿Cómo organizamos la información para proporcionar una interacción más
intuitiva?
➢ ¿Cuáles son los hábitos de uso del usuario?
➢ ¿Qué aspecto debe tener?
➢ ¿Qué tipografía vamos a utilizar?
➢ ¿Qué colores?, etc.
25
Tener en cuenta: UX no es sólo IU
➢ Cuando se habla de la UX se abordan preguntas como:
➢ ¿Quién es mi usuario final?
➢ ¿A qué tipo de mercado, industria o sector me enfrento?
➢ ¿Cuáles son los objetivos de negocio?
➢ ¿Cuáles son las necesidades que tiene el usuario?
➢ ¿Cuáles son sus motivaciones?
➢ ¿Qué problemas se enfrenta mi usuario?
➢ ¿Cómo puedo resolverlos?
➢ ¿Por qué utilizará el producto y dónde?, etc.
Ambas cosas son complementarias:
UX y UI deben ir de la mano
para lograr el 100% del objetivo.
26
Tener en cuenta: UX no es sólo IU
➢ Cuando se habla de la UX se abordan preguntas como:
➢ ¿Quién es mi usuario final?
➢ ¿A qué tipo de mercado, industria o sector me enfrento?
➢ ¿Cuáles son los objetivos de negocio?
➢ ¿Cuáles son las necesidades que tiene el usuario?
➢ ¿Cuáles son sus motivaciones?
➢ ¿Qué problemas se enfrenta mi usuario?
➢ ¿Cómo puedo resolverlos?
➢ ¿Por qué utilizará el producto y dónde?, etc.
Ambas cosas son complementarias:
UX y UI deben ir de la mano
para lograr el 100% del objetivo.
27
Ventajas de una buena UX
➢ Aumentar la satisfacción del usuario/cliente.
➢ Aumentar la productividad y la eficiencia del usuario.
➢ Incrementar el uso del servicio/sistema.
➢ Reducir los costes de soporte, formación y mantenimiento.
➢ Conseguir productos con una calidad cada vez más elevada,
capaces de cumplir las expectativas de los usuarios.
28
¿Cómo se logra una buena experiencia de usuario?
⮚ Situar al usuario siempre en el centro de todas las decisiones durante la
planificación, creación, evolución o rediseño del producto o servicio, pensando
siempre en sus necesidades, habilidades y limitaciones.
⮚ Para ello, incorporar a nuestros usuarios en todas las fases de creación del
producto o servicio, para evaluarlo y mejorarlo tomando en cuenta sus opiniones.
Diseño Centrado en el Usuario
29
Diseño para Todos
Es el proceso de crear productos y servicios que sean utilizables
por personas con independencia de sus capacidades y en todo
tipo de situaciones
Principios
✔ Uso equitativo ✔ Tolerancia con el error
✔ Flexibilidad en el uso ✔ Esfuerzo físico
✔ Uso fácil e intuitivo ✔ Tamaño
✔ Información percibida ✔ Compatibilidad
30
Lenguaje de diseño
➢ Marco de referencia y vocabulario visual.
➢ Dirección estática y conceptual.
➢ Se utilizan para establecer principios y lineamientos en la
creación de interfaces atractivas y consistentes, pero más allá
de ser unas guías de estilo rigurosas, plantean un enfoque del
diseño.
31
Diseño hostil o engañoso
➢ Preguntas capciosas: engaña para que dé una respuesta que no
pretendía.
➢ Colarse en la cesta. introduce un artículo adicional en su cesta.
➢ Motel de cucarachas. suscripción premium.
➢ Zuckering de privacidad. Te engañan para que compartas públicamente
más información sobre ti de lo que realmente pretendías.
➢ Redirecionamiento. Enfoca tu atención a propósito.
➢ Costos ocultos.
32
Diseño hostil o engañoso
➢ Cebo y cambio. Sucede algo diferente e indeseable.
➢ Falsa apariencia. La opción de rechazar está redactada de tal manera
que disuada al usuario de hacerla. Darse de baja de algún servicio.
➢ Anuncios disfrazados. Anuncios que se disfrazan de otro tipo de
contenido o navegación para que hagas clic en ellos.
➢ Continuidad forzada. Cuando su prueba gratuita con un servicio llega a
su fin y su tarjeta de crédito comienza a recibir cargos en silencio sin
previo aviso.
➢ Spam de amigos. El producto solicita su correo electrónico o permisos de
redes sociales para envíar spam a todos sus contactos en un mensaje
que dice ser suyo.
33
