SlideShare une entreprise Scribd logo
1  sur  29
Diseño de Interfaces
Centradas en el usuario
M.C.V. Liz Palacios Penna.
Maestría en Diseño Multimedia
¿Qué es una UI?
Es la interfaz de usuario, (user interface)
Hace referencia a la interfaz con la que las personas
interaccionan con las máquinas.
También permite que el ordenador envíe un feedback al
usuario, de modo que este pueda dar cuenta de si su acción
se ha llevado a cabo con éxito.
Se trata del puente o
vehículo que permite usar
un ordenador, o cualquier
dispositivo móvil.
Cuenta con los elementos de control visibles (o
sensibles) al usuario, a través de los que puede efectuar
alguna acción.
Estos pueden ser líneas de texto, comandos, gráficos,
etc.
Tipos UI
Existen diversos tipos de métodos interacción
persona-ordenador (IPO), es decir muchos tipos
de interfaces.
Funcionan con comandos. Ejemplo MS dos.
El control mediante una CLI se lleva a cabo a través
del teclado y sin necesidad de usar el ratón.
Command Line Interfaces(CLI)
Text User Interface (TUI).
La interacción con el ordenador se realiza también por
medio del teclado.
Los programadores
pueden recurrir normalmente a
256 caracteres.
Ejemplo: gestores de arranque o
en programas BIOS Setup.
Graphical User Interfaces
(GUI)
Este software se aplica con elementos gráficos de
control e imágenes simbólicas que toman como
referencia de forma creativa a objetos del “mundo real”.
Todos los elementos pueden identificarse de forma sencilla
y su manejo resulta más intuitivo.
Voice User Interface (VUI)
Permite la interacción con los ordenadores por medio del control
por voz.
Ejemplo: Apple ha creado Siri, Amazon introdujo a Alexa,
Microsoft incluye a Cortana.
El usuario puede acceder a las aplicaciones por medio de
llamadas o lo que se transmite a viva voz, los usuarios pueden
trabajar de un modo más efectivo y tener mayor accesibilidad.
Natural User Interface (NUI)
La comunicación con el ordenador se establece a partir del
reconocimiento de gestos. Estas interfaces también
reconocen rostros y objetos. Ejemplo de ello son los diferentes
sensores de cámaras y micrófonos que permiten
una comunicación versátil con el dispositivo.
Tangible User Interfaces (TUI)
Son interfaces de usuario figurativas y
personalizables, es decir, la interacción con el
ordenador se lleva a cabo a través de objetos físicos.
Ejemplo, realidad aumentada.
Perceptual User Interfaces (PUI)
Son las interfaces de usuario controladas por
percepción, lo que se traduce en una
conexión entre las VUI, las GUI y el
reconocimiento electrónico de gestos.
Ejemplo: los drones de la marca DJ.
Brain Computer Interfaces (BCI)
Funcionan con ayuda de electrodos se pueden medir
las ondas cerebrales y hacer que los algoritmos las
traduzcan en comandos de control.
Ejemplo Stephen Hawkin.
La interfaz permite:
1. Que la persona pueda controlar efectivamente las
acciones de la máquina.
1. Que la persona reciba respuestas de la máquina
que le permitan saber si la interacción es correcta y
cómo seguir actuando.
El diseñador de la interfaz debe favorecer que el
proceso de interacción se efectúe de manera fácil e
intuitiva y que el usuario puede acceder a la
información o ejecutar las acciones que desea, de la
manera más simple posible.
El diseño de interfaces implica
conocimientos de
disciplinas muy variadas, como
la psicología, o el diseño
visual.
Uno de los elementos más importantes es
que la interfaz, “genere una buena
experiencia de usuario”.
¿Qué distingue a las buenas
interfaces de usuario?
 Son sencillas
 Intuitivas
 Amigables
 Comprensibles
 Funcionan
 Tienen fácil manejo
 Son usables
 Tienen apariencia reconocible, tienen
buen aspecto
Si es difícil de usar, el tener un diseño llamativo no
tendrá ninguna importancia para el usuario. Para diseñarlas,
se deben realizar tests; conocer al usuario.
Ejemplo: análisis de mapas de calor. Este
tipo de análisis puede hacer un
seguimiento del comportamiento del
usuario a través de los clics, del scroll,
del movimiento ocular o eye tracking y se
registra haciendo uso de gradaciones
cromáticas.
Con respecto al diseño…..“menos es más”.
Debe imperar la función sobre la forma.
Función, claridad y estructura rigen el diseño de la
interfaz.
Se trata de conocer las conductas de uso del
público objetivo y de no restringir la
funcionalidad a través del diseño.
¿Qué es una UI intuitiva?
Los usuarios esperan utilizar la interfaz de manera
intuitiva.
Usar los símbolos que la forman de manera instintiva
Por este motivo...utiliza iconos ya implantados.
La intención es encontrar el equilibrio
perfecto entre estética y funcionalidad para
poder alcanzar el éxito con un producto.
Puede haber integración de interfaces como GUI y VUI.
Ejemplo Iphone.
La interfaz gráfica de usuario
y el SEO
Una buena interfaz gráfica de usuario tiene un efecto
positivo en la optimización en buscadores (SEO).
Si los usuarios se sienten bien en una página web
permanecerán más tiempo en ella, lo que se convierte en
un factor muy importante, puesto que los buscadores
tienen la capacidad de reconocer mediante el tiempo
de permanencia cuál es la relevancia que tiene una
página web para la búsqueda correspondiente.
Al diseñar la UI, debes ponerte en el lugar de los usuarios
que llegan a ella por primera vez.
Si un usuario no tiene una agradable experiencia,
la abandonará y buscará otra UI sencilla y funcional.
Entonces…., !la navegación intuitiva se convierte en un
factor decisivo!
Se recomienda tener enlaces internos significativos
(crawlers de los buscadores).
 Rutas claras
 Rutas cortas
A lo que se llama (navegación con migas de pan o
breadcrumb navigation).
Para ello, se muestra la ruta recorrida en la página en las
barras de menú colocadas en la parte superior de la
propia página.
Ejemplo:
Página de inicio/Ropa de mujer/Pantalones/Vaqueros.
También puedes leer:
http://albertolacalle.com/hci/interfaz.htm
Todos los días interactuamos con interfaces;
analógicas, físicas, digitales, etc, con las que nos
relacionamos sin ser conscientes.
En la medida en que la interacción está más
relacionada con el cuerpo humano la sensación llamada
“transparencia de la interfaz” (kinect,
pantallas táctiles, reconocimiento de gestos, etc) ….todo
parece que funciona de un modo totalmente
intuitivo, casi naturalizado.
….. la evolución en el diseño de las interfaces
va en dirección de intentar acercarse a la máxima
transparencia….

Contenu connexe

Tendances

Tendances (20)

Tutorial voz ip packet tracer
Tutorial voz ip packet tracerTutorial voz ip packet tracer
Tutorial voz ip packet tracer
 
Puertos tcp mas usados
Puertos tcp mas usadosPuertos tcp mas usados
Puertos tcp mas usados
 
4.1. Funciones de la capa de red
4.1. Funciones de la capa de red4.1. Funciones de la capa de red
4.1. Funciones de la capa de red
 
ejercicios de subnetting
ejercicios de subnettingejercicios de subnetting
ejercicios de subnetting
 
Multiplexación por división de tiempo
Multiplexación por división de tiempoMultiplexación por división de tiempo
Multiplexación por división de tiempo
 
Redes Inalambricas Wlan
Redes Inalambricas WlanRedes Inalambricas Wlan
Redes Inalambricas Wlan
 
Dhcp
DhcpDhcp
Dhcp
 
Subneteo
SubneteoSubneteo
Subneteo
 
Ejercicios vlsm
Ejercicios vlsmEjercicios vlsm
Ejercicios vlsm
 
Graficacion por Computadora
Graficacion por ComputadoraGraficacion por Computadora
Graficacion por Computadora
 
Tecnologías de acceso
Tecnologías de accesoTecnologías de acceso
Tecnologías de acceso
 
PROTOCOLO DHCP
PROTOCOLO DHCPPROTOCOLO DHCP
PROTOCOLO DHCP
 
Gestion de Redes
Gestion de RedesGestion de Redes
Gestion de Redes
 
Modelo de gestion de red
Modelo de gestion de redModelo de gestion de red
Modelo de gestion de red
 
Medios Guiados y Medios No Guiados
Medios Guiados y Medios No GuiadosMedios Guiados y Medios No Guiados
Medios Guiados y Medios No Guiados
 
Subnetting
SubnettingSubnetting
Subnetting
 
Servidor dhcp
Servidor dhcpServidor dhcp
Servidor dhcp
 
Intranet y extranet
Intranet y extranetIntranet y extranet
Intranet y extranet
 
CISCO 1 - Introduccion a las redes
CISCO 1 - Introduccion a las redesCISCO 1 - Introduccion a las redes
CISCO 1 - Introduccion a las redes
 
Unidad 2 (2)
Unidad 2 (2)Unidad 2 (2)
Unidad 2 (2)
 

Similaire à Diseño de interfaces centradas en el usuario

2.4 Creación de Interfaces.pptx
2.4 Creación de Interfaces.pptx2.4 Creación de Interfaces.pptx
2.4 Creación de Interfaces.pptxRam Vazquez
 
Interfaz de usuario
Interfaz de usuarioInterfaz de usuario
Interfaz de usuarioJose Tabor
 
El computador desde el punto de vista del usuario
El computador desde el punto de vista del usuarioEl computador desde el punto de vista del usuario
El computador desde el punto de vista del usuarioJhoseannyOsuna
 
El computador desde el punto de vista del usuario
El computador desde el punto de vista del usuarioEl computador desde el punto de vista del usuario
El computador desde el punto de vista del usuarioCristianJose15
 
Diseño de interfaz importancia y proceso
Diseño de interfaz importancia y procesoDiseño de interfaz importancia y proceso
Diseño de interfaz importancia y procesoadrianazamora
 
UXN CDMX 03-32 - De la ficción a la realidad, el ayer, hoy y mañana de UX y l...
UXN CDMX 03-32 - De la ficción a la realidad, el ayer, hoy y mañana de UX y l...UXN CDMX 03-32 - De la ficción a la realidad, el ayer, hoy y mañana de UX y l...
UXN CDMX 03-32 - De la ficción a la realidad, el ayer, hoy y mañana de UX y l...UX Nights
 
El computador desde el punto de vista del usuario
El computador desde el punto de vista del usuarioEl computador desde el punto de vista del usuario
El computador desde el punto de vista del usuarioCristianJose15
 
Unidad 5 interfaces-trabajo c.i.27.902.634
Unidad 5 interfaces-trabajo c.i.27.902.634Unidad 5 interfaces-trabajo c.i.27.902.634
Unidad 5 interfaces-trabajo c.i.27.902.634ManuelBarrios56
 
Interfaz de usuario
Interfaz de usuarioInterfaz de usuario
Interfaz de usuarioaaaj1908
 
QUE ES IPO Y EL DISEÑO CENTRADO EN EL USUARIO
QUE ES IPO Y EL DISEÑO CENTRADO EN EL USUARIOQUE ES IPO Y EL DISEÑO CENTRADO EN EL USUARIO
QUE ES IPO Y EL DISEÑO CENTRADO EN EL USUARIOGDYatusae
 
UX no es diseño gráfico
UX no es diseño gráficoUX no es diseño gráfico
UX no es diseño gráficoIsabel Yepes
 
Usabilidad - Cadius en el Día de la Usabilidad - Pamplona
Usabilidad - Cadius en el Día de la Usabilidad - PamplonaUsabilidad - Cadius en el Día de la Usabilidad - Pamplona
Usabilidad - Cadius en el Día de la Usabilidad - PamplonaSusana Heredia
 
Interfaz grafica
Interfaz graficaInterfaz grafica
Interfaz graficajhordy2000
 
Interfaz Usuario
Interfaz UsuarioInterfaz Usuario
Interfaz Usuariotaninof
 
Reconocimiento de Gestos Kinect + C#
Reconocimiento de Gestos Kinect + C#Reconocimiento de Gestos Kinect + C#
Reconocimiento de Gestos Kinect + C#Jhonnatan Flores
 
03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuario03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuarioManuel Mujica
 
03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuario03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuarioManuel Mujica
 
Usabilidad y Workflow de diseño Web
Usabilidad y Workflow de diseño WebUsabilidad y Workflow de diseño Web
Usabilidad y Workflow de diseño WebDNRstudios
 
Interfaz Gráfica de Usuario
Interfaz Gráfica de UsuarioInterfaz Gráfica de Usuario
Interfaz Gráfica de UsuarioLucasDanielB
 

Similaire à Diseño de interfaces centradas en el usuario (20)

2.4 Creación de Interfaces.pptx
2.4 Creación de Interfaces.pptx2.4 Creación de Interfaces.pptx
2.4 Creación de Interfaces.pptx
 
Interfaz de usuario
Interfaz de usuarioInterfaz de usuario
Interfaz de usuario
 
El computador desde el punto de vista del usuario
El computador desde el punto de vista del usuarioEl computador desde el punto de vista del usuario
El computador desde el punto de vista del usuario
 
El computador desde el punto de vista del usuario
El computador desde el punto de vista del usuarioEl computador desde el punto de vista del usuario
El computador desde el punto de vista del usuario
 
Diseño de interfaz importancia y proceso
Diseño de interfaz importancia y procesoDiseño de interfaz importancia y proceso
Diseño de interfaz importancia y proceso
 
UXN CDMX 03-32 - De la ficción a la realidad, el ayer, hoy y mañana de UX y l...
UXN CDMX 03-32 - De la ficción a la realidad, el ayer, hoy y mañana de UX y l...UXN CDMX 03-32 - De la ficción a la realidad, el ayer, hoy y mañana de UX y l...
UXN CDMX 03-32 - De la ficción a la realidad, el ayer, hoy y mañana de UX y l...
 
El computador desde el punto de vista del usuario
El computador desde el punto de vista del usuarioEl computador desde el punto de vista del usuario
El computador desde el punto de vista del usuario
 
Unidad 5 interfaces-trabajo c.i.27.902.634
Unidad 5 interfaces-trabajo c.i.27.902.634Unidad 5 interfaces-trabajo c.i.27.902.634
Unidad 5 interfaces-trabajo c.i.27.902.634
 
Interfaz de usuario
Interfaz de usuarioInterfaz de usuario
Interfaz de usuario
 
QUE ES IPO Y EL DISEÑO CENTRADO EN EL USUARIO
QUE ES IPO Y EL DISEÑO CENTRADO EN EL USUARIOQUE ES IPO Y EL DISEÑO CENTRADO EN EL USUARIO
QUE ES IPO Y EL DISEÑO CENTRADO EN EL USUARIO
 
UX no es diseño gráfico
UX no es diseño gráficoUX no es diseño gráfico
UX no es diseño gráfico
 
Usabilidad - Cadius en el Día de la Usabilidad - Pamplona
Usabilidad - Cadius en el Día de la Usabilidad - PamplonaUsabilidad - Cadius en el Día de la Usabilidad - Pamplona
Usabilidad - Cadius en el Día de la Usabilidad - Pamplona
 
Interfaz grafica
Interfaz graficaInterfaz grafica
Interfaz grafica
 
Interfaz Usuario
Interfaz UsuarioInterfaz Usuario
Interfaz Usuario
 
Reconocimiento de Gestos Kinect + C#
Reconocimiento de Gestos Kinect + C#Reconocimiento de Gestos Kinect + C#
Reconocimiento de Gestos Kinect + C#
 
03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuario03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuario
 
03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuario03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuario
 
Taller n°3 patricio vimos
Taller n°3 patricio vimosTaller n°3 patricio vimos
Taller n°3 patricio vimos
 
Usabilidad y Workflow de diseño Web
Usabilidad y Workflow de diseño WebUsabilidad y Workflow de diseño Web
Usabilidad y Workflow de diseño Web
 
Interfaz Gráfica de Usuario
Interfaz Gráfica de UsuarioInterfaz Gráfica de Usuario
Interfaz Gráfica de Usuario
 

Dernier

Planificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.docPlanificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.docAhilynBasabe
 
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdfCLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdfDanielaPrezMartnez3
 
Afiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezAfiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezPaola575380
 
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docxPLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docxLeo Florez
 
Introduccion-a-los-numeros-en-ingles.pptx
Introduccion-a-los-numeros-en-ingles.pptxIntroduccion-a-los-numeros-en-ingles.pptx
Introduccion-a-los-numeros-en-ingles.pptxcalc5597
 
Jesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitecturaJesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitecturajesusgrosales12
 
Proceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoProceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoJorge Fernandez
 
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGersonManuelRodrigue1
 
INTERVENCIONES DE CARRETERAS EN LA LIBERTAD
INTERVENCIONES DE CARRETERAS  EN LA LIBERTADINTERVENCIONES DE CARRETERAS  EN LA LIBERTAD
INTERVENCIONES DE CARRETERAS EN LA LIBERTADMaryNavarro1717
 
Espacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesEspacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesespejosflorida
 
GRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosGRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosCristianGmez22034
 
Geometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroGeometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroJuan Carlos Fonseca Mata
 
Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30SantiagoAgudelo47
 
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptxSESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptxJustoAlbertoBaltaSmi
 
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialplantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialAndreaMlaga1
 
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfINICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfBrbara57940
 
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYPLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYkarendaza9506
 
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfSlaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfslaimenbarakat
 
140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.docilvrosiebp
 

Dernier (20)

Planificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.docPlanificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.doc
 
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdfCLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
 
Afiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezAfiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola Perez
 
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docxPLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
 
Introduccion-a-los-numeros-en-ingles.pptx
Introduccion-a-los-numeros-en-ingles.pptxIntroduccion-a-los-numeros-en-ingles.pptx
Introduccion-a-los-numeros-en-ingles.pptx
 
Jesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitecturaJesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitectura
 
Proceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoProceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimiento
 
1.La locomoción de los seres vivos diseño
1.La locomoción de los seres vivos diseño1.La locomoción de los seres vivos diseño
1.La locomoción de los seres vivos diseño
 
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
 
INTERVENCIONES DE CARRETERAS EN LA LIBERTAD
INTERVENCIONES DE CARRETERAS  EN LA LIBERTADINTERVENCIONES DE CARRETERAS  EN LA LIBERTAD
INTERVENCIONES DE CARRETERAS EN LA LIBERTAD
 
Espacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesEspacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientes
 
GRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosGRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivos
 
Geometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroGeometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de Querétaro
 
Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30
 
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptxSESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
 
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialplantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especial
 
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfINICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
 
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYPLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
 
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfSlaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
 
140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc
 

Diseño de interfaces centradas en el usuario

  • 1. Diseño de Interfaces Centradas en el usuario M.C.V. Liz Palacios Penna. Maestría en Diseño Multimedia
  • 2. ¿Qué es una UI? Es la interfaz de usuario, (user interface) Hace referencia a la interfaz con la que las personas interaccionan con las máquinas.
  • 3. También permite que el ordenador envíe un feedback al usuario, de modo que este pueda dar cuenta de si su acción se ha llevado a cabo con éxito. Se trata del puente o vehículo que permite usar un ordenador, o cualquier dispositivo móvil.
  • 4. Cuenta con los elementos de control visibles (o sensibles) al usuario, a través de los que puede efectuar alguna acción. Estos pueden ser líneas de texto, comandos, gráficos, etc.
  • 5. Tipos UI Existen diversos tipos de métodos interacción persona-ordenador (IPO), es decir muchos tipos de interfaces.
  • 6. Funcionan con comandos. Ejemplo MS dos. El control mediante una CLI se lleva a cabo a través del teclado y sin necesidad de usar el ratón. Command Line Interfaces(CLI)
  • 7. Text User Interface (TUI). La interacción con el ordenador se realiza también por medio del teclado. Los programadores pueden recurrir normalmente a 256 caracteres. Ejemplo: gestores de arranque o en programas BIOS Setup.
  • 8. Graphical User Interfaces (GUI) Este software se aplica con elementos gráficos de control e imágenes simbólicas que toman como referencia de forma creativa a objetos del “mundo real”. Todos los elementos pueden identificarse de forma sencilla y su manejo resulta más intuitivo.
  • 9. Voice User Interface (VUI) Permite la interacción con los ordenadores por medio del control por voz. Ejemplo: Apple ha creado Siri, Amazon introdujo a Alexa, Microsoft incluye a Cortana. El usuario puede acceder a las aplicaciones por medio de llamadas o lo que se transmite a viva voz, los usuarios pueden trabajar de un modo más efectivo y tener mayor accesibilidad.
  • 10. Natural User Interface (NUI) La comunicación con el ordenador se establece a partir del reconocimiento de gestos. Estas interfaces también reconocen rostros y objetos. Ejemplo de ello son los diferentes sensores de cámaras y micrófonos que permiten una comunicación versátil con el dispositivo.
  • 11. Tangible User Interfaces (TUI) Son interfaces de usuario figurativas y personalizables, es decir, la interacción con el ordenador se lleva a cabo a través de objetos físicos. Ejemplo, realidad aumentada.
  • 12. Perceptual User Interfaces (PUI) Son las interfaces de usuario controladas por percepción, lo que se traduce en una conexión entre las VUI, las GUI y el reconocimiento electrónico de gestos. Ejemplo: los drones de la marca DJ.
  • 13. Brain Computer Interfaces (BCI) Funcionan con ayuda de electrodos se pueden medir las ondas cerebrales y hacer que los algoritmos las traduzcan en comandos de control. Ejemplo Stephen Hawkin.
  • 14. La interfaz permite: 1. Que la persona pueda controlar efectivamente las acciones de la máquina. 1. Que la persona reciba respuestas de la máquina que le permitan saber si la interacción es correcta y cómo seguir actuando.
  • 15. El diseñador de la interfaz debe favorecer que el proceso de interacción se efectúe de manera fácil e intuitiva y que el usuario puede acceder a la información o ejecutar las acciones que desea, de la manera más simple posible.
  • 16. El diseño de interfaces implica conocimientos de disciplinas muy variadas, como la psicología, o el diseño visual.
  • 17. Uno de los elementos más importantes es que la interfaz, “genere una buena experiencia de usuario”.
  • 18. ¿Qué distingue a las buenas interfaces de usuario?  Son sencillas  Intuitivas  Amigables  Comprensibles  Funcionan  Tienen fácil manejo  Son usables  Tienen apariencia reconocible, tienen buen aspecto
  • 19. Si es difícil de usar, el tener un diseño llamativo no tendrá ninguna importancia para el usuario. Para diseñarlas, se deben realizar tests; conocer al usuario. Ejemplo: análisis de mapas de calor. Este tipo de análisis puede hacer un seguimiento del comportamiento del usuario a través de los clics, del scroll, del movimiento ocular o eye tracking y se registra haciendo uso de gradaciones cromáticas.
  • 20. Con respecto al diseño…..“menos es más”. Debe imperar la función sobre la forma. Función, claridad y estructura rigen el diseño de la interfaz. Se trata de conocer las conductas de uso del público objetivo y de no restringir la funcionalidad a través del diseño.
  • 21. ¿Qué es una UI intuitiva? Los usuarios esperan utilizar la interfaz de manera intuitiva. Usar los símbolos que la forman de manera instintiva Por este motivo...utiliza iconos ya implantados.
  • 22. La intención es encontrar el equilibrio perfecto entre estética y funcionalidad para poder alcanzar el éxito con un producto. Puede haber integración de interfaces como GUI y VUI. Ejemplo Iphone.
  • 23. La interfaz gráfica de usuario y el SEO Una buena interfaz gráfica de usuario tiene un efecto positivo en la optimización en buscadores (SEO). Si los usuarios se sienten bien en una página web permanecerán más tiempo en ella, lo que se convierte en un factor muy importante, puesto que los buscadores tienen la capacidad de reconocer mediante el tiempo de permanencia cuál es la relevancia que tiene una página web para la búsqueda correspondiente.
  • 24. Al diseñar la UI, debes ponerte en el lugar de los usuarios que llegan a ella por primera vez. Si un usuario no tiene una agradable experiencia, la abandonará y buscará otra UI sencilla y funcional. Entonces…., !la navegación intuitiva se convierte en un factor decisivo!
  • 25. Se recomienda tener enlaces internos significativos (crawlers de los buscadores).  Rutas claras  Rutas cortas A lo que se llama (navegación con migas de pan o breadcrumb navigation).
  • 26. Para ello, se muestra la ruta recorrida en la página en las barras de menú colocadas en la parte superior de la propia página. Ejemplo: Página de inicio/Ropa de mujer/Pantalones/Vaqueros. También puedes leer: http://albertolacalle.com/hci/interfaz.htm
  • 27. Todos los días interactuamos con interfaces; analógicas, físicas, digitales, etc, con las que nos relacionamos sin ser conscientes.
  • 28. En la medida en que la interacción está más relacionada con el cuerpo humano la sensación llamada “transparencia de la interfaz” (kinect, pantallas táctiles, reconocimiento de gestos, etc) ….todo parece que funciona de un modo totalmente intuitivo, casi naturalizado.
  • 29. ….. la evolución en el diseño de las interfaces va en dirección de intentar acercarse a la máxima transparencia….