Interacción

Hombre Máquina

Unidad II

Análisis y
Diseño de
Interfaces

Ing. Katty Lagos O.

Contenido
1. Diseño de Interfaces
2. Interfaces Gráficas
3. Interfaces Web
4. Otras Interfaces

Ing. Katty Lagos O.

1. Diseño de Interfaces
Objetivos de una buena interfaz:

Maximizar
la Minimizar la
velocidad tasa de
de errores
aprendizaje

Maximizar
la Estética
velocidad adecuada
de uso

Ing. Katty Lagos O.

 Fases del
proceso
El objetivo del diseño
centrado en el usuario es
crear productos que las
personas encuentren
útiles y usables; es decir,
que satisfagan sus
necesidades teniendo en
cuenta sus
características.

Ing. Katty Lagos O.

VENTAJAS
 Aumentar la satisfacción del usuario/cliente.
 Aumentar la productividad y la eficiencia del
usuario.
 Incrementar la adopción y el uso del
servicio/sistema.
 Reducir los costos de soporte y formación.
 Reducir el tiempo y los costes de desarrollo:
solo se desarrollan las funcionalidades que el
usuario necesita y tal como lo necesita.
 Reducir los costos de mantenimiento:
garantiza un desarrollo correcto de
antemano.
Ing. Katty Lagos O.
Ing. Katty Lagos O.
La Usabilidad es un atributo de una buena experiencia de usuario y la UI o Interfaz del
Usuario es con lo que se interactúa.
Ing. Katty Lagos O.
Ing. Katty Lagos O.
 UI,hay un botón que permite interactuar al
usuario con el sistema (comprar).
 Usabilidad, hay un botón que permite al usuario
regresar, además me dice en qué moneda está el
precio y me permite seleccionar la cantidad
(previniendo errores).
 Buena UX, Me hace decir ¡Wow! porque tiene una
descripción que me dice qué ingredientes tiene,
cuantas calorías y además me permite ¡agregarlo
a mis favoritos para comprarlo rápido en otra
ocasión!
 En TODOS los casos existe la UX, la diferencia es
que podemos INFLUIR en crear una buena UX
cuando planeamos para la experiencia óptima.
Ing. Katty Lagos O.
¿Qué es UX?
UX (por sus siglas en inglés User eXperience) o en
español Experiencia de Usuario

UX es aquello que una persona percibe al interactuar

con un producto o servicio.

Una buena UX consiste en diseñar productos útiles,

usables y deseables, lo cual influye en que el usuario
se sienta satisfecho, feliz y encantado.

Ux no es agregar una funcionalidad es ponerse en los

zapatos del usuario

Ing. Katty Lagos O.

Una buena UX se
logra a través
del Diseño
Centrado en el
Humano, el cual es
el enfoque de
conocer las
necesidades de los
usuarios y alinearlos
a los objetivos del
negocio tomando
también en cuenta
las limitaciones
técnicas.

Ing. Katty Lagos O.

¿Qué es UI?
UI - User Interface - Interfaz del Usuario.
Es la vista que permite a un usuario interactuar de
manera efectiva con un sistema. Es la suma de
una arquitectura de información + elementos
visuales + patrones de interacción

Ing. Katty Lagos O.

 UI
 ElUI da el ‘look & feel’ al producto con la
estructura e interacción de los elementos de
la interfaz.
 Una buena UI nos permite dar una buena UX,
pero no lo es todo, es un instrumento.

Ing. Katty Lagos O.

 Un UI Designer se encarga de crear
visualmente la interfaz del producto para
que vaya acorde a la UX.
 Además, crea elementos interactivos y se
preocupa de que se vean bien en todas
las plataformas (móvil, tableta, web).
 Un UI Designer trabaja muy de la mano
con el equipo de desarrollo o diseño de
producto proporcionando guías de
estilos y patrones de uso.

Ing. Katty Lagos O.

En conclusión
 UX es lo qué te hace sentir una marca o
producto al momento de interactuar con él,
mientras que UI es una capa visual de colores,
texturas, formas y elementos.
 Por eso, UX no es lo mismo que UI. Detrás de
un producto o aplicación increíble tuvo que
haber trabajo previo de investigación y una
correcta estrategia que se tradujo en una
interfaz atractiva. UI no es, ni nunca será por sí
sola una solución.

Ing. Katty Lagos O.

Cursos Virtuales gratuitos
 https://www.crehana.com/ec/cursos-
online-ui-ux/fundamentos-del-diseno-ux/

 https://learndigital.withgoogle.com/activ
ate/courses

Ing. Katty Lagos O.

Tarea
Evaluar una aplicación o sistema
web en relación a UI - UX
 Indicar al menos 5 criterios(2 UX-3UI/
VICEVERSA)
 Argumentar cada criterio
 Trabajar en grupos de 2 personas
 Subir 1 archivo de word individual del
trabajo

Ing. Katty Lagos O.

2. Interfaces Gráficas de
usuario (GUI)
 Es el contenido gráfico mediante el cual se visualiza
información del equipo en una pantalla. Casi todos los
programas tienen alguna clase de interfaz visual, que
sirve al mismo tiempo para mostrar información al
usuario y como un mapa de navegación entre
diferentes comandos.
 Por ejemplo, si abres un archivo de Word, la interfaz de
usuario te permitirá ver la información que contiene en
la pantalla, pero también te permitirá interactuar con
un sinfín de herramientas para modificar el documento.

Ing. Katty Lagos O.

3. Interfaces Web
 Se refiere a todos los gráficos, información y
herramientas que aparecen en la pantalla al abrir una
página web.
 Aunque estos elementos funcionan de manera muy
similar a otros programas de computadora, tienen que
ser mucho más intuitivos y fáciles de usar, pues sería
muy poco práctico que los internautas tuvieran que
invertir tiempo aprendiendo a manejar los comandos
de cada sitio web que visitan.
 Por eso, en el diseño web es tan importante crear una
interfaz de usuario que facilite al máximo la transmisión
de información, la navegabilidad y la interacción.

Ing. Katty Lagos O.

 4. Otras interfaces
Interfaz de voz (VUI):
•Se trata de programas capaces de identificar e interpretar el habla. El ejemplo
más claro que tenemos es el reciente auge de las inteligencias artificiales,
como Siri, que se controlan por medio de la voz.

Interfaz de texto:
•Se utiliza principalmente en el ámbito de la programación de sistemas
operativos y es la evolución de la interfaz de línea de comando primitiva.
Interfaz natural:
•Identifica e interpreta acciones naturales del ser humano, como movimientos y
expresiones faciales. Un ejemplo de ello son los videojuegos con interfaz
kinética.

Interfaz cerebro-ordenador:
•Es el tipo de interfaz más innovadora que existe hasta el momento, y aunque
aún no cuenta con muchas aplicaciones cotidianas, se está utilizando para
controlar prótesis biónicas y dar instrucciones sencillas a un software por medio
de las ondas cerebrales.

Ing. Katty Lagos O.

 Actividades de un UI Designer
Dentro de A. Diseño de interacción (cómo responde el sistema)
las
actividades
B. Guías de interacción (estados del sistema)
que realiza
un UI
Designer, C. Diseño de elementos (botones, formularios)
están:
D. Diseño visual (iconos, imágenes)

E. Diseño de estilo (paletas de color, fonts)

Ing. Katty Lagos O.

 A. Diseño de interacción (cómo responde el
sistema)
Interacción
• Todos los intercambios multimodal
que suceden entre la • La mayoría de los sistemas actuales interaccionan a
persona y el través de un teclado, una pantalla y un ratón.
• A ellos se los puede considerar canales de
computador comunicación del sistema y corresponden con
• (Baecher & Buxton, 87) ciertos canales de comunicación humanas (tacto,
vista, etc..)
• Una interacción es multimodal cuando usa múltiples
canales de comunicación simultáneamente.
• Cada canal del usuario se puede considerar una
modalidad diferente de interacción.
• Los sistemas actuales tienden a tener múltiples

Interacción canales de comunicación de entrada/salida.

Los seres humanos procesan la

información simultáneamente por varios
canales. Por ejemplo podemos ajustar el
movimiento de un ratón mediante la voz.

Ing. Katty Lagos O.

 Diseño de interacción

B. Guías o estilos de Interacción

Un término genérico para agrupar las diferentes maneras en que los usuarios se
comunican o interaccionan con el ordenador. (Preece J. Human–Computer Interaction,
Cap. 13. Addison–Wesley, 1994)

Los estilos de
interacción
predominantes
La interfaz por línea de órdenes
son:

Menús y formularios

Manipulación directa

Interacción asistida
 24

B. Guías o estilos de Interacción

Interfaz por línea de órdenes

La interfaz por línea de órdenes fue el primer estilo

de interacción de uso generalizado y a pesar de
todos los estilos de interacción que describiremos
después todavía es muy utilizado.

Es una manera de dar instrucciones directamente

al ordenador. Pueden tener la forma de teclas de
función, un carácter, abreviaciones cortas,
palabras enteras o una combinación de las dos
primeras
 25

B. Guías o estilos de Interacción

Menús y navegación
Un menú es un conjunto de opciones visualizadas en la
pantalla, que se pueden seleccionar y la selección de una de
ellas o más supone la ejecución de una orden subyacente y
normalmente un cambio en el estado de la interfaz.

A diferencia de la interfaz por línea de ordenes, los usuarios

tienen la ventaja de no tener que recordar ni palabras, ni
sintaxis, siempre y cuando los textos que acompañan a los
menús sean significativos, lo que no siempre se produce.

Uno de los problemas que tienen los menús es que ocupan

mucho espacio en la interfaz. Para resolver el problema
surgieron los menús desplegables o menús pop–up.
 26
B. Guías o estilos de Interacción
Manipulación directa
El término manipulación directa describe sistemas que tienen
las siguientes características:

•Representación continua de los objetos y de las acciones de interés.

•Cambio de una sintaxis de comandos compleja por la manipulación de
objetos y acciones.
•Acciones rápidas, incrementales y reversibles que provocan un efecto visible
inmediatamente en el objeto seleccionado.

La interfaz WIMP: WIMP quiere decir Ventanas, Iconos, Menús y

Apuntadores (Windows, Icons, Menus and Pointers).

Los investigadores en este campo a menudo ponen mucho

énfasis en el control táctil y en la retroalimentación mediante
sonido que en la retroalimentación visual
 27

B. Guías o estilos de Interacción

Interacción asistida
Utiliza la metáfora del asistente personal o agente que
colabora con el usuario en el mismo ambiente de trabajo
y el usuario en vez de dirigir la interacción, trabaja en un
entorno cooperativo en que el usuario y los agentes o
asistentes se comunican, controlan eventos y realizan
tareas

Agentes de la interfaz (AI): Según Henry Lieberman es un

programa que puede ser considerado por el usuario
como un asistente o programa que le ayuda y no se le
considere una herramienta desde el punto de vista de
una interfaz de manipulación directa.
28
 29
Agentes
Las características de los agentes son:
• Autonomía. Trabajan en segundo plano y si no se les pide
explícitamente observan al usuario y a las fuentes de información
accesibles.
• Inteligencia. Actúan por su propia iniciativa y pueden trabajar en
entornos heterogéneos adaptándose a múltiple situaciones (no
necesariamente utilizan la misma estrategia de resolución cada vez).
• Uso personal. Se adaptan y aprenden del usuario y no insisten en una
determinada solución si el usuario decide otra (la reglamentación por
parte del usuario es una característica de los agentes inteligentes).

Ejemplos: Microsoft Agent

 Asistentes
Los asistentes son entidades computacionales que nos asisten en el uso de las aplicaciones
existentes.

Los asistentes nos exponen de una manera fácil que es el que se ha de hacer y pueden
entender palabras escritas o habladas o acciones gráficas e interpretarlas.

Interpretar quiere decir que el asistente puede hacer acciones complejas o ordenes cortas.

Un requerimiento importante para los asistentes es que han de ser muy flexibles en la manera
en que reciben las instrucciones. Los asistentes son muchas veces mas flexibles que los menús
y las macros porque el usuario nada mas dice lo que quiere hacer.

Ejemplo: Asistentes de Powerpoint, wizards.

 C. Diseño de elementos (botones,
formularios)
Estructura y •cómo se muestra el diseño, qué tipo de datos y su
forma de mostrarlos.
organización:

Textos literales de los •son los textos que acompañan a los campos PARA
COMPLETAR datos, para una mejor explicación.
campos:

Campos para •son los propios campos donde los usuarios deben
introducir sus datos personales u otros, así como
completar de datos: radio-buttons, check-boxes, etc.

•son los click to action del formulario, es decir, los

Botones: puntos a partir de los cuales se sigue en el proceso de
completitud o bien se termina completando.

Ayuda y •a medida que el usuario lo va completando, cómo

ayuda la interfaz en ello, con qué tipo de información
retroalimentación: y cómo se presenta.

Ing. Katty Lagos O.

http://www.usabilidad-ux.com/usabilidad-
experiencia-de-usuario-formularios-web/
Ing. Katty Lagos O.
D. Diseño visual (iconos, imágenes)
 Los iconos son uno de los elementos gráficos más
usados en diseño web en general y los botones
gráficos son parte fundamental de toda
aplicación web.
 Como elementos gráficos en los documentos y en
las páginas web. Los iconos aquí sirven para
identificar secciones, situar puntos visuales
interactivos, ampliar la información de enlaces
textuales a los que acompañan, etc.

Ing. Katty Lagos O.

E. Diseño de estilo (paletas de
color, fonts
 Una guía de estilo digital para las páginas web
engloba mucho más que información para el logo y el
rótulo empresarial: esta determina, además del tipo de
letra y los colores, el diseño de las imágenes o la
presentación de los elementos e incluye datos
relativos al tono del texto.
 Si se hace uso del libro de estilo, la página web
obtiene un aspecto uniforme, incluso si se da el caso
de que haya varios diseñadores web implicados en la
elaboración de cada una de las áreas de la página
web.
https://www.staffcreativa.pe/blog/guias-de-estilo-
diseno-de-paginas-web-diez-marcas-que-amamos/
Ing. Katty Lagos O.
 Algunos principios de diseño de
interfaces gráficas
Consistencia

 Permite a los usuarios transferir sus conocimientos y

destrezas de una aplicación a otra.
 Ayuda a los usuarios a aprender y reconocer
fácilmente el lenguaje gráfico de esa interfaz.
 Significa que los usuarios aprenden cómo hacer las
cosas, por ejemplo apuntar y seleccionar, clic una
sola vez.

Ing. Katty Lagos O.

 Algunos principios de diseño de
interfaces gráficas
Control del usuario
 El usuario y no el computador (o aplicación)
inicia y controla las actividades.

Tolerancia
 Posibilidadde ofrecerle al usuario la capacidad
de recuperarse de los errores.

Ing. Katty Lagos O.

 Algunos principios de diseño de
interfaces gráficas
Retroalimentación y diálogo
El usuario debe estar constantemente informado
de lo que está ocurriendo con los procesos.

La información que recibe el usuario debe ser

entendible y a su alcance.

Ing. Katty Lagos O.

 Algunos principios de diseño de
interfaces gráficas
Integridad estética
• La información se encuentra organizada en forma
adecuada y consistente con los principios de diseño
visual.
• El número de elementos y su respectivo comportamiento
debe ser limitado para aumentar la “usabilidad” de la
interfaz.
• Se debe asegurar de mantener la semántica del lenguaje
gráfico o del lenguaje asociado a la interfaz.
• No cambiar el significado de los objetos que son
estándares.

Ing. Katty Lagos O.

Bibliografía
 Provo, A. (2017). Ebook User Expectations.
 Ibarra-Morales, P. R., Hernández-
Verduzco, E. P., Sánchez-Laurent, G. E., &
Tejeda-Rosell, P. (2016). Experiencia virtual
CEDIM.
 Cantú, A.: El desafío de un UX Researcher.

Ing. Katty Lagos O.