¡BIENVENIDOS A CLASE!

Ing. Fabio Pinto

DISEÑO DE INTERFACES FISICAS - AREANDINA - 2022

• UNIDAD 1: Introducción al diseño UI

• Introducción al diseño de interfaces

• Diseño centrado en el usuario
• Elementos del diseño UI
• Proceso de diseño UI

DISEÑO DE INTERFACES FISICAS - AREANDINA - 2022

DISEÑO DE INTERFACES FISICAS - AREANDINA - 2022
INTRODUCCIÓN AL DISEÑO UI

DISEÑO DE INTERFACES FISICAS - AREANDINA - 2022

 HUMAN-COMPUTER INTERACTION
• La interacción hombre–computadora, comúnmente referida con
la abreviatura HCI por Human Computer Interaction, es el
intercambio observable de información, datos y acciones entre un
humano y la computadora, y viceversa.

• Está constituida por el diálogo, la conversación, la comunicación

que pueda fluir en ambas direcciones, entre una persona y el
sistema de software que está utilizando.

DISEÑO DE INTERFACES FISICAS - AREANDINA - 2022

DISEÑO DE INTERFACES FISICAS - AREANDINA - 2022
 INTERFAZ DE USUARIO (UI)
• La interfaz del usuario, en cambio es el medio por el cuál la interacción
hombre-máquina es establecida, manejada y controlada. Conforma la parte
del software y hardware que permite, que el intercambio de información y sus
distintas secuencias o hilos de diálogo, se produzcan.

• La interfaz de usuario o UI es el conjunto de elementos de la pantalla que

permiten al usuario interactuar con una página web. Uno de los expertos a nivel
mundial en UI es Jakob Nielsen

DISEÑO DE INTERFACES FISICAS - AREANDINA - 2022

8
4/9/20XX Título de la presentación 9
 Diseño UX/UI
“El diseño de experiencia de usuario tiene que ver
con todos los elementos que conforman el interfaz,
incluyendo su disposición, aspecto visual, texto,
marca, sonido, e interacción. La UX trabaja para
coordinar estos elementos para permitir la mejor
interacción posible por parte de los usuarios”.
UXPA (2012). Glossary. Terms and definitions used in
the User Experience profession.

4/9/20XX 10 Título de la presentación

La HCI no se basa en sólo ingeniería o
diseño, también ergonomía y
psicología.

DISEÑO DE INTERFACES FISICAS - AREANDINA - 2022

Título de la presentación 4/9/20XX 13
 CLASIFICACIÓN DE LAS INTERFACES DE USUARIO

• Interfaz de línea de comandos (CLI)

• Interfaz gráfica de usuario (GUI)
• Interfaz natural de usuario(NUI)

CLI GUI NUI

• Codificada • Exploratoria • Directa

• Estricta • Versátil • Intuitiva
DISEÑO DE INTERFACES FISICAS - AREANDINA - 2022
DISEÑO DE INTERFACES FISICAS - AREANDINA - 2022
DISEÑO DE INTERFACES FISICAS - AREANDINA - 2022
 FUNCIONES DE UNA INTERFAZ DE USUARIO

• Puesta en marcha y apagado

• Control de las funciones manipulables del sistema
• Gestión de archivos
• Herramientas de desarrollo de aplicaciones
• Comunicaciones
• Información
• Control de acceso
• Sistema de ayuda

DISEÑO DE INTERFACES FISICAS - AREANDINA - 2022

 Uno de los modelos más conocidos sobre la componente de la
interfaz del usuario, es el Modelo Seeheim o Seeheim Model, definido
en el marco de un Workshop efectuado en Seeheim, Alemania, en el
año 1982.

DISEÑO DE INTERFACES FISICAS - AREANDINA - 2022

 USABILIDAD
• La norma ISO 9241 en su parte 11 define a la usabilidad
como «La efectividad, la eficiencia y la satisfacción con
la cual los usuarios específicos logran metas específicas
en un ambiente en particular”

• Efectividad: La exactitud y completitud con la cual un usuario

específico logra una meta específica en un ambiente
particular.
• Eficiencia: Los recursos consumidos en relación con la
exactitud y completitud de las metas alcanzadas.
• Satisfacción: La comodidad y aceptabilidad del sistema por los
usuarios y demás personas que se ven afectadas por el uso de
este.

DISEÑO DE INTERFACES FISICAS - AREANDINA - 2022

DISEÑO DE INTERFACES FISICAS - AREANDINA - 2022
 ¿Cómo se mide la usabilidad?
• El grado de usabilidad de un sistema puede ser medida
de dos formas:
• Empírica: no se basa en opiniones o sensaciones, sino en
pruebas realizadas en laboratorio en ambientes controlados.
• Relativa: porque el resultado de la evaluación no es ni bueno ni
malo, sino que depende de las metas planteadas o de una
comparación con otros sistemas similares.

DISEÑO DE INTERFACES FISICAS - AREANDINA - 2022

 INGENIERÍA DE LA USABILIDAD
• Es un conjunto de conceptos y técnicas para planificar,
realizar y verificar los objetivos de la usabilidad en un
sistema.
• La ingeniería de la usabilidad es una aproximación
metodológica que permite desarrollar aplicaciones
interactivas teniendo como objetivo preferente la
facilidad de uso o usabilidad.

DISEÑO DE INTERFACES FISICAS - AREANDINA - 2022

 INGENIERÍA DE LA USABILIDAD
• El objetivo de las técnicas de la ingeniería de la
usabilidad es alcanzar un producto de software que sea
lo mas usable posible.

• La ingeniería de la usabilidad divide el ciclo de vida en

tres etapas: Especificación, Diseño y Evaluación.

DISEÑO DE INTERFACES FISICAS - AREANDINA - 2022

 FASE DEL CICLO DE VIDA
• Análisis de usuarios
• Identificación de tareas

ESPECIFICACIÓN
• Especificación de Usabilidad

• De interacción

DISEÑO
Prototipado

• Evaluación heurística
Test de usabilidad
EVALUACIÓN

DISEÑO DE INTERFACES FISICAS - AREANDINA - 2022

 ESPECIFICACIÓN
• En esta primera etapa se establecen los objetivos que se
pretenden alcanzar y que definirán el proceso de
desarrollo:
• Análisis del perfil de los usuarios: ¿qué tareas desempeñan?
¿cómo las realizan?
• Identificación de las tareas: se especifica como se van a
estructurar las tareas, como van a ser realizadas y cuales son
las necesidades que se requieren para realizarlas.
• Especificaciones de la usabilidad: se definen los objetivos
cualitativos y cuantitativos que se deberían cumplir.

DISEÑO DE INTERFACES FISICAS - AREANDINA - 2022

 DISEÑO
• Diseño de la interacción: el esquema de diseño de la
interacción se divide en dos fases.
• El diseño conceptual: representa el proceso cognitivo a través
del cual se llega a una solución. Define como se va a organizar
y como va a funcionar el sistema.
• El diseño visual: se crear a partir de la representación gráfica y
estructurada del diseño conceptual. Se suelen generar
sketches y wireframes que describen los componentes de
cada una de las pantallas que va a tener el sistema o interfaz.

DISEÑO DE INTERFACES FISICAS - AREANDINA - 2022

 DISEÑO
• Prototipado: un prototipo es una representación limitada,
una primera aproximación a algunas funcionalidades de
lo que podrá llegar a ser el producto o sistema.
• Los prototipos pueden tener diversas formas y niveles
de detalle.
• Paper prototipe
• Sketch
• Wireframe
• Mockup
• Prototipo funcional

DISEÑO DE INTERFACES FISICAS - AREANDINA - 2022

 EVALUACIÓN
• Luego de realizado el prototipo se evalúa el grado de
usabilidad que tiene. La medición se realiza utilizando
técnicas o métodos de evaluación.
• Las técnicas de evaluación son procedimientos
sistemáticos que permiten recolectar datos
relacionados con la interacción del usuario final y un
sistema o software.

DISEÑO DE INTERFACES FISICAS - AREANDINA - 2022

 MÉTODOS DE EVALUACIÓN
• Métodos de inspección: son aquellos en los que el
conocimiento de la usabilidad se obtiene de pruebas
con expertos que analizan basándose en su experiencia.
• Evaluación heurística
• El recorrido cognitivo
• La inspección de características
• Inspección de estándares.

DISEÑO DE INTERFACES FISICAS - AREANDINA - 2022

 MÉTODOS DE EVALUACIÓN
• Métodos de indagación: son aquellos en los que el
conocimiento de la usabilidad se obtiene en base a
conjeturas, señales o intuiciones. Se basan en la
observación en el contexto de los usuarios.
• Focus group
• Surveys
• Entrevistas
• Grabación de uso
• Guerrilla testing

DISEÑO DE INTERFACES FISICAS - AREANDINA - 2022

 MÉTODOS DE EVALUACIÓN
• Métodos de indagación: son aquellos en los que el
conocimiento de la usabilidad se obtiene en base a
conjeturas, señales o intuiciones. Se basan en la
observación en el contexto de los usuarios.
• Focus group
• Surveys
• Entrevistas
• Grabación de uso
• Guerrilla testing

DISEÑO DE INTERFACES FISICAS - AREANDINA - 2022